From d1eda0f856759f226f61278486f602b1729b2c21 Mon Sep 17 00:00:00 2001 From: Kjetil Hoel Date: Wed, 7 Sep 2022 14:10:00 +0200 Subject: [PATCH] file renaming, removed some files, changes to types, add variant to inputs --- .eslintrc.json | 4 +- src/Components/Cards/Card/Card.tsx | 24 +- .../ContentContainer.stories.mdx | 32 -- .../ContentContainer/ContentContainer.tsx | 32 -- .../Containers/ContentContainer/index.ts | 1 - .../PageContainer/PageContainer.stories.mdx | 152 --------- .../PageContainer/PageContainer.test.tsx | 92 ----- .../PageContainer/PageContainer.tsx | 194 ----------- .../__snapshots__/PageContainer.test.tsx.snap | 196 ----------- .../Containers/PageContainer/index.ts | 1 - .../TitleContainer/TitleContainer.stories.mdx | 32 -- .../TitleContainer/TitleContainer.tsx | 34 -- .../Containers/TitleContainer/index.ts | 1 - src/Components/Containers/index.ts | 3 - .../Form/BaseInput/BaseInput.stories.mdx | 39 --- src/Components/Form/Button/Button.stories.mdx | 96 ------ src/Components/Form/Button/Button.test.tsx | 53 --- src/Components/Form/Button/Button.tsx | 28 -- .../Button/__snapshots__/Button.test.tsx.snap | 108 ------ src/Components/Form/Button/index.ts | 1 - src/Components/Form/Checkbox/Checkbox.tsx | 10 +- src/Components/Form/DatePicker/Datepicker.tsx | 16 +- src/Components/Form/FileInput/FileInput.tsx | 6 +- .../Form/NumberInput/NumberInput.tsx | 4 +- src/Components/Form/Radio/Radio.tsx | 10 +- .../Form/TextAreaInput/TextAreaInput.tsx | 6 +- src/Components/Form/TextInput/TextInput.tsx | 4 +- src/Components/Form/index.ts | 2 - src/Components/index.ts | 1 - .../Components/{ButtonStyles.ts => Button.ts} | 4 +- .../Components/{CardStyles.ts => Card.ts} | 4 +- .../{CheckboxStyles.ts => Checkbox.ts} | 4 +- .../{FileInputStyles.ts => FileInput.ts} | 4 +- .../{HeadingStyles.ts => Heading.ts} | 4 +- .../{IconButtonStyles.ts => IconButton.ts} | 9 +- .../Components/{InputStyles.ts => Input.ts} | 4 +- .../Components/{RadioStyles.tsx => Radio.tsx} | 4 +- src/Styles/Components/SharedComponents.ts | 322 ------------------ .../Components/{StepsStyles.ts => Steps.ts} | 4 +- .../Components/{TableStyles.ts => Table.ts} | 4 +- .../Components/{TabStyles.tsx => Tabs.tsx} | 4 +- .../Components/{TextStyles.ts => Text.ts} | 4 +- .../{TextareaStyles.ts => Textarea.ts} | 4 +- src/Styles/Components/index.ts | 26 +- src/Styles/index.ts | 27 +- src/Types/SharedComponents.ts | 93 ++--- 46 files changed, 117 insertions(+), 1590 deletions(-) delete mode 100644 src/Components/Containers/ContentContainer/ContentContainer.stories.mdx delete mode 100644 src/Components/Containers/ContentContainer/ContentContainer.tsx delete mode 100644 src/Components/Containers/ContentContainer/index.ts delete mode 100644 src/Components/Containers/PageContainer/PageContainer.stories.mdx delete mode 100644 src/Components/Containers/PageContainer/PageContainer.test.tsx delete mode 100644 src/Components/Containers/PageContainer/PageContainer.tsx delete mode 100644 src/Components/Containers/PageContainer/__snapshots__/PageContainer.test.tsx.snap delete mode 100644 src/Components/Containers/PageContainer/index.ts delete mode 100644 src/Components/Containers/TitleContainer/TitleContainer.stories.mdx delete mode 100644 src/Components/Containers/TitleContainer/TitleContainer.tsx delete mode 100644 src/Components/Containers/TitleContainer/index.ts delete mode 100644 src/Components/Containers/index.ts delete mode 100644 src/Components/Form/BaseInput/BaseInput.stories.mdx delete mode 100644 src/Components/Form/Button/Button.stories.mdx delete mode 100644 src/Components/Form/Button/Button.test.tsx delete mode 100644 src/Components/Form/Button/Button.tsx delete mode 100644 src/Components/Form/Button/__snapshots__/Button.test.tsx.snap delete mode 100644 src/Components/Form/Button/index.ts rename src/Styles/Components/{ButtonStyles.ts => Button.ts} (97%) rename src/Styles/Components/{CardStyles.ts => Card.ts} (88%) rename src/Styles/Components/{CheckboxStyles.ts => Checkbox.ts} (96%) rename src/Styles/Components/{FileInputStyles.ts => FileInput.ts} (92%) rename src/Styles/Components/{HeadingStyles.ts => Heading.ts} (52%) rename src/Styles/Components/{IconButtonStyles.ts => IconButton.ts} (83%) rename src/Styles/Components/{InputStyles.ts => Input.ts} (88%) rename src/Styles/Components/{RadioStyles.tsx => Radio.tsx} (97%) delete mode 100644 src/Styles/Components/SharedComponents.ts rename src/Styles/Components/{StepsStyles.ts => Steps.ts} (96%) rename src/Styles/Components/{TableStyles.ts => Table.ts} (83%) rename src/Styles/Components/{TabStyles.tsx => Tabs.tsx} (90%) rename src/Styles/Components/{TextStyles.ts => Text.ts} (84%) rename src/Styles/Components/{TextareaStyles.ts => Textarea.ts} (84%) diff --git a/.eslintrc.json b/.eslintrc.json index 595db9d..48685f2 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -81,8 +81,8 @@ "react/function-component-definition": [ "error", { - "namedComponents": "arrow-function", - "unnamedComponents": "arrow-function" + "namedComponents": "function-declaration", + "unnamedComponents": "function-declaration" } ] } diff --git a/src/Components/Cards/Card/Card.tsx b/src/Components/Cards/Card/Card.tsx index 50b6cd4..7930021 100644 --- a/src/Components/Cards/Card/Card.tsx +++ b/src/Components/Cards/Card/Card.tsx @@ -1,21 +1,6 @@ import { Heading, Box, Flex, Text, useStyleConfig } from '@chakra-ui/react'; import React, { ReactElement } from 'react'; - -type CardProps = { - title: string; - body: string; - textColors?: string; - titleTextColor?: string; - bodyTextColor?: string; - titleTextSize?: string; - bodyTextSize?: string; - onClick?: () => void; - titleIcon?: ReactElement; - actionIcon?: ReactElement; - cardHeight?: string | (number | string)[]; - cardWidth?: string | (number | string)[]; - -}; +import { CardProps } from 'Types'; const Card = (props: CardProps): ReactElement => { const { @@ -31,17 +16,16 @@ const Card = (props: CardProps): ReactElement => { actionIcon, cardHeight, cardWidth, - } = props; const cardStyles = useStyleConfig('Card'); return ( diff --git a/src/Components/Containers/ContentContainer/ContentContainer.stories.mdx b/src/Components/Containers/ContentContainer/ContentContainer.stories.mdx deleted file mode 100644 index 4d5be3b..0000000 --- a/src/Components/Containers/ContentContainer/ContentContainer.stories.mdx +++ /dev/null @@ -1,32 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import { DocsPageHeader, DocsPageBodyComponents } from 'Docs'; -import { LibPath } from 'Types'; -import { ContentContainer} from 'Components'; - -export const Template = (args) => - -export const componentName = 'ContentContainer'; - - - - - - - - - {Template.bind({})} - - - - diff --git a/src/Components/Containers/ContentContainer/ContentContainer.tsx b/src/Components/Containers/ContentContainer/ContentContainer.tsx deleted file mode 100644 index 0ae8a36..0000000 --- a/src/Components/Containers/ContentContainer/ContentContainer.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Box, useStyleConfig, Center } from '@chakra-ui/react'; -import React from 'react'; - -type ContentContainerProps = { - children: JSX.Element[] | JSX.Element; - padding?: string | (string | number)[]; - margin?: string | (string | number)[]; - minWidth?: string | (string | number)[]; - width?: string | (string | number)[]; -}; - -function ContentContainer(props: ContentContainerProps) { - const { padding, margin, minWidth, width, children } = props; - - const styles = useStyleConfig('ContentContainer'); - - return ( -
- - {children} - -
- ); -} - -export { ContentContainer }; diff --git a/src/Components/Containers/ContentContainer/index.ts b/src/Components/Containers/ContentContainer/index.ts deleted file mode 100644 index 9189010..0000000 --- a/src/Components/Containers/ContentContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ContentContainer'; \ No newline at end of file diff --git a/src/Components/Containers/PageContainer/PageContainer.stories.mdx b/src/Components/Containers/PageContainer/PageContainer.stories.mdx deleted file mode 100644 index 6188704..0000000 --- a/src/Components/Containers/PageContainer/PageContainer.stories.mdx +++ /dev/null @@ -1,152 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import { DocsPageHeader, DocsPageBodyComponents } from 'Docs'; -import { LibPath } from 'Types'; -import { PageContainer } from 'Components'; - -export const Template = (args) => ; - -export const componentName = 'PageContainer'; - -Content goes here!, - containerPadding: '0px', - containerMargin: '0px', - contentPadding: '0px', - contentMargin: '0px', - subtitlePadding: '0px', - titlePadding: '0px', - titleMargin: '0px', - borderWidth: '1px', - contentBorderWidth: '1px', - height: '100%', - width: '100%', - containerMinWidth: '0px', - containerMaxWidth: '100%', - containerSideMargins: '0px', - shouldContentFillContainer: true, - containerSize: 'auto', - titleBadge: { - badgeColor: '#01233D', - textColor: '#FFFFFF', - label: 'Some badge', - }, - }} -/> - - - - - {Template.bind({})} - - - - -### Content Alignment: Center - - - -

- Lorem Ipsum is simply dummy text of the printing - and typesetting industry. Lorem Ipsum has been the - industry's standard dummy text ever since the 1500s, - when an unknown printer took a galley of type and - scrambled it to make a type specimen book. It has - survived not only five centuries, but also the leap into - electronic typesetting, remaining essentially unchanged. - It was popularised in the 1960s with the release of - Letraset sheets containing Lorem Ipsum passages, and - more recently with desktop publishing software like - Aldus PageMaker including versions of Lorem Ipsum. -

- - ), - }} - > - {Template.bind({})} - - - -### Content Alignment: Right - - - -

- Lorem Ipsum is simply dummy text of the printing - and typesetting industry. Lorem Ipsum has been the - industry's standard dummy text ever since the 1500s, - when an unknown printer took a galley of type and - scrambled it to make a type specimen book. It has - survived not only five centuries, but also the leap into - electronic typesetting, remaining essentially unchanged. - It was popularised in the 1960s with the release of - Letraset sheets containing Lorem Ipsum passages, and - more recently with desktop publishing software like - Aldus PageMaker including versions of Lorem Ipsum. -

- - ), - }} - > - {Template.bind({})} - - diff --git a/src/Components/Containers/PageContainer/PageContainer.test.tsx b/src/Components/Containers/PageContainer/PageContainer.test.tsx deleted file mode 100644 index f5611b1..0000000 --- a/src/Components/Containers/PageContainer/PageContainer.test.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React, { ReactElement } from 'react'; -import '@testing-library/jest-dom'; -import { render, screen } from '@testing-library/react'; -import { PageContainer } from './PageContainer'; -import ReactDOM from 'react-dom'; - -const PAGE_CONTAINER_TESTER_TITLE = 'PageContainerTitle'; -const PAGE_CONTAINER_TESTER_SUBTITLE = 'PageContainerSubtitle'; -const PAGE_CONTAINER_TESTER_CONTENT = 'PageContainerContent'; -const PAGE_CONTAINER_TESTER_Title_ALIGNMENT= 'center'; -const PAGE_CONTAINER_TESTER_TEXT_COLOR = '#000000'; -const PAGE_CONTAINER_TESTER_SUBTITLE_ALIGNMENT = 'center'; -const PAGE_CONTAINER_TESTER_SUBTITLE_TEXT_COLOR = '#000000'; -const PAGE_CONTAINER_TESTER_CONTANER_PADDING = '1rem'; -const PAGE_CONTAINER_TESTER_CONTAINER_MARGIN = '1rem'; -const PAGE_CONTAINER_TESTER_CONTENT_PADDING = '1rem'; -const PAGE_CONTAINER_TESTER_CONTENT_MARGIN = '1rem'; -const PAGE_CONTAINER_TESTER_SUBTITLE_PADDING = '1rem'; -const PAGE_CONTAINER_TESTER_TITLE_PADDING = '1rem'; -const PAGE_CONTAINER_TESTER_TITLE_MARGIN = '1rem'; -const PAGE_CONTAINER_TESTER_BORDER_COLOR = '#000000'; -const PAGE_CONTAINER_TESTER_BORDER_WIDTH = '1px'; -const PAGE_CONTAINER_TESTER_CONTENT_BORDER_COLOR = '#000000'; -const PAGE_CONTAINER_TESTER_CONTENT_BORDER_WIDTH = '1px'; -const PAGE_CONTAINER_TESTER_TITLE_BADGE ={badgeColor: '#ffffff', textColor: '#ffffff', label: '#ffffff'} -const PAGE_CONTAINER_TESTER_BACKGROUND_COLOR = '#ffffff'; -const PAGE_CONTAINER_TESTER_CONTENT_COLOR = '#ffffff'; -const PAGE_CONTAINER_TESTER_TITLE_COLOR = '#ffffff'; -const PAGE_CONTAINER_TESTER_HEIGHT = '100px'; -const PAGE_CONTAINER_TESTER_WIDTH = '100px'; -const PAGE_CONTAINER_TESTER_CONTAINER_MIN_WIDTH = '100px'; -const PAGE_CONTAINER_TESTER_CONTAINER_MAX_WIDTH = '100px'; -const PAGE_CONTAINER_TESTER_CONTAINER_SIDE_MARGIN = '1rem'; -const PAGE_CONTAINER_TESTER_SHOULD_CONTENT_FILL_CONTAINER = true; -const PAGE_CONTAINER_TESTER_CONTAINER_SIZE = '100px'; - -const PageContainerTester = (): ReactElement =>{ - return ( - - -
{PAGE_CONTAINER_TESTER_CONTENT}
- - ); -} - -describe('PageContainer component test', () => { - it('matches snapshot', () => { - const tree = render(); - expect(tree).toMatchSnapshot(); - }); - it('renders without chrashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - }) - - it('should render with title, subtitle and contnet', () => { - render(); - - expect(screen.getByText(PAGE_CONTAINER_TESTER_TITLE)).toBeVisible(); - expect(screen.getByText(PAGE_CONTAINER_TESTER_SUBTITLE)).toBeVisible(); - expect(screen.getByText(PAGE_CONTAINER_TESTER_CONTENT)).toBeVisible(); - }); -}); diff --git a/src/Components/Containers/PageContainer/PageContainer.tsx b/src/Components/Containers/PageContainer/PageContainer.tsx deleted file mode 100644 index 0682211..0000000 --- a/src/Components/Containers/PageContainer/PageContainer.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import React, { ReactElement } from 'react'; -import { Box, Heading, Text, Badge, Center, Container } from '@chakra-ui/react'; -import { PageContainerProps } from 'Types'; - - -const Content = (props: PageContainerProps) => { - const { - title, - titleAlignment, - titleTextColor, - subtitle, - subtitleAlignment, - subtitleTextColor, - children, - contentPadding, - contentMargin, - subtitlePadding, - titlePadding, - titleMargin, - borderColor, - borderWidth, - contentBorderColor, - contentBorderWidth, - titleBadge, - contentColor, - titlesColor, - containerMinWidth, - containerMaxWidth, - shouldContentFillContainer, - } = props; - - return ( -
- - - -
- {title} - {titleBadge && ( - - {titleBadge.label} - - )} -
- - {subtitle && ( - - {subtitle} - - )} - - - {children} - - -
- ); -}; - -const PageContainer = (props: PageContainerProps): ReactElement => { - const { - title, - titleAlignment, - titleTextColor, - subtitle, - subtitleAlignment, - subtitleTextColor, - children, - containerPadding, - containerMargin, - contentPadding, - contentMargin, - subtitlePadding, - titlePadding, - titleMargin, - borderColor, - borderWidth, - contentBorderColor, - contentBorderWidth, - titleBadge, - backgroundColor, - contentColor, - titlesColor, - height, - width, - containerMinWidth, - containerMaxWidth, - containerSideMargins, - shouldContentFillContainer, - containerSize, - } = props; - - const contentProps = { - shouldContentFillContainer: shouldContentFillContainer, - title: title, - titleAlignment: titleAlignment, - titleTextColor: titleTextColor, - subtitle: subtitle, - subtitleAlignment: subtitleAlignment, - subtitleTextColor: subtitleTextColor, - children: children, - contentPadding: contentPadding, - contentMargin: contentMargin, - subtitlePadding: subtitlePadding, - titlePadding: titlePadding, - titleMargin: titleMargin, - borderColor: borderColor, - borderWidth: borderWidth, - contentBorderColor: contentBorderColor, - contentBorderWidth: contentBorderWidth, - titleBadge: titleBadge, - contentColor: contentColor, - titlesColor: titlesColor, - containerMinWidth: containerMinWidth, - containerMaxWidth: containerMaxWidth, - }; - - return ( - - {containerSize ? ( - - - - ) : ( - - - - )} - - ); -}; - -export { PageContainer }; diff --git a/src/Components/Containers/PageContainer/__snapshots__/PageContainer.test.tsx.snap b/src/Components/Containers/PageContainer/__snapshots__/PageContainer.test.tsx.snap deleted file mode 100644 index f632142..0000000 --- a/src/Components/Containers/PageContainer/__snapshots__/PageContainer.test.tsx.snap +++ /dev/null @@ -1,196 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PageContainer component test matches snapshot 1`] = ` -Object { - "asFragment": [Function], - "baseElement": -
-
    -
      -
        -
          -
            -
              -
-
-
-
-
-
-
-
-
-

- PageContainerTitle -

- - #ffffff - -
-
-

- PageContainerSubtitle -

-
-
-
- PageContainerContent -
-
-
-
-
-
-
- , - "container":
-
-
-
-
-
-
-
-

- PageContainerTitle -

- - #ffffff - -
-
-

- PageContainerSubtitle -

-
-
-
- PageContainerContent -
-
-
-
-
-
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; diff --git a/src/Components/Containers/PageContainer/index.ts b/src/Components/Containers/PageContainer/index.ts deleted file mode 100644 index 7a798df..0000000 --- a/src/Components/Containers/PageContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PageContainer'; diff --git a/src/Components/Containers/TitleContainer/TitleContainer.stories.mdx b/src/Components/Containers/TitleContainer/TitleContainer.stories.mdx deleted file mode 100644 index c77163c..0000000 --- a/src/Components/Containers/TitleContainer/TitleContainer.stories.mdx +++ /dev/null @@ -1,32 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import { DocsPageHeader, DocsPageBodyComponents } from 'Docs'; -import { LibPath } from 'Types'; -import { TitleContainer } from 'Components'; - -export const Template = (args) => { - return ( - - ); -}; - -export const componentName = 'TitleContainer'; - - - - - - - - {Template.bind({})} - - - - diff --git a/src/Components/Containers/TitleContainer/TitleContainer.tsx b/src/Components/Containers/TitleContainer/TitleContainer.tsx deleted file mode 100644 index d781d56..0000000 --- a/src/Components/Containers/TitleContainer/TitleContainer.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Box, Heading, Container } from '@chakra-ui/react'; -import React, { ReactElement } from 'react'; - -type TitleContainerProps = { - title: string; - padding?: string | (string | number)[]; - margin?: string | (string | number)[]; - width?: string | (string | number)[]; - minWidth?: string | (string | number)[]; - children?: ReactElement | ReactElement[]; -}; - -function TitleContainer(props: TitleContainerProps) { - const { title, padding, margin, width, minWidth, children } = props; - - return ( - - - {title} - {children && children} - - - ); -} - -export { TitleContainer }; diff --git a/src/Components/Containers/TitleContainer/index.ts b/src/Components/Containers/TitleContainer/index.ts deleted file mode 100644 index dae4c43..0000000 --- a/src/Components/Containers/TitleContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './TitleContainer'; \ No newline at end of file diff --git a/src/Components/Containers/index.ts b/src/Components/Containers/index.ts deleted file mode 100644 index 8e6daec..0000000 --- a/src/Components/Containers/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './PageContainer'; -export * from './TitleContainer'; -export * from './ContentContainer'; diff --git a/src/Components/Form/BaseInput/BaseInput.stories.mdx b/src/Components/Form/BaseInput/BaseInput.stories.mdx deleted file mode 100644 index aa83c1a..0000000 --- a/src/Components/Form/BaseInput/BaseInput.stories.mdx +++ /dev/null @@ -1,39 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import { DocsPageHeader, DocsPageBodyComponents } from 'Docs'; -import { LibPath } from 'Types'; -import { BaseInput } from 'Components'; - -export const Template = (args) => ; - -export const componentName = 'BaseInput'; - -Content], - invalidText: '', - captionText: '', - captionTextMargin: '0', - margin: '0', - padding: '0', - width: '100%', - minWidth: '0', - maxWidth: '100%', - }} -/> - - - - - {Template.bind({})} - - - diff --git a/src/Components/Form/Button/Button.stories.mdx b/src/Components/Form/Button/Button.stories.mdx deleted file mode 100644 index 59006d0..0000000 --- a/src/Components/Form/Button/Button.stories.mdx +++ /dev/null @@ -1,96 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import { DocsPageHeader, DocsPageBodyComponents } from 'Docs'; -import { LibPath } from 'Types'; -import { Button } from 'Components'; - -export const Template = (args) => - - - , - "container":
-
- -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; diff --git a/src/Components/Form/Button/index.ts b/src/Components/Form/Button/index.ts deleted file mode 100644 index 8b166a8..0000000 --- a/src/Components/Form/Button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Button'; diff --git a/src/Components/Form/Checkbox/Checkbox.tsx b/src/Components/Form/Checkbox/Checkbox.tsx index 513419e..520e83b 100644 --- a/src/Components/Form/Checkbox/Checkbox.tsx +++ b/src/Components/Form/Checkbox/Checkbox.tsx @@ -18,7 +18,7 @@ export function Checkbox(props: CheckboxProps): ReactElement { padding, width, minWidth, - backgroundColor, + variant, autoFocus, } = props; @@ -43,10 +43,10 @@ export function Checkbox(props: CheckboxProps): ReactElement { isGroup > {label} @@ -59,7 +59,7 @@ export function Checkbox(props: CheckboxProps): ReactElement { key={`chk${index}`} onChange={() => handleOnChange(index)} isChecked={value.includes(index)} - backgroundColor={backgroundColor} + variant={variant} autoFocus={autoFocus} > {option} diff --git a/src/Components/Form/DatePicker/Datepicker.tsx b/src/Components/Form/DatePicker/Datepicker.tsx index 8d0d817..41e883d 100644 --- a/src/Components/Form/DatePicker/Datepicker.tsx +++ b/src/Components/Form/DatePicker/Datepicker.tsx @@ -11,9 +11,9 @@ const StyledDatePicker = chakra(DatePicker); const CalendarContainer = (props: { children: ReactNode[] }): JSX.Element => { const { children } = props; - const datePickerStyles = useMultiStyleConfig('DatePicker', {}); + const datePicker = useMultiStyleConfig('DatePicker', {}); - const themeStyles = { + const theme = { ...datePickerStyles, '.react-datepicker__day': datePickerStyles.day, '.react-datepicker__header': datePickerStyles.header, @@ -28,7 +28,7 @@ const CalendarContainer = (props: { children: ReactNode[] }): JSX.Element => { }; return ( - + {children} ); @@ -56,7 +56,7 @@ const DatePickerInput = (props: DatePickerProps): JSX.Element => { shouldCloseOnSelect, } = props; - const datePickerStyles = useMultiStyleConfig('DatePicker', {}); + const datePicker = useMultiStyleConfig('DatePicker', {}); return ( { width={width} minWidth={minWidth} > - + onChange(e as Date)} - dropdownMode='select' + dropdownMode="select" placeholderText={placeholder} - dateFormat='dd/MM/yyyy' + dateFormat="dd/MM/yyyy" selected={value} calendarContainer={CalendarContainer} maxDate={maxDate} diff --git a/src/Components/Form/FileInput/FileInput.tsx b/src/Components/Form/FileInput/FileInput.tsx index 51b19ca..5a69a2d 100644 --- a/src/Components/Form/FileInput/FileInput.tsx +++ b/src/Components/Form/FileInput/FileInput.tsx @@ -19,7 +19,7 @@ import { UploadIconHover, } from 'Icons'; -import { FileInputStyles } from 'Styles/Components/FileInputStyles'; +import { FileInput as FileInputStyles } from 'Styles/Components/FileInput'; export const FileInput = (props: FileUploadProps): ReactElement => { const { @@ -35,7 +35,7 @@ export const FileInput = (props: FileUploadProps): ReactElement => { variant, } = props; - const fileInputStyles = useMultiStyleConfig('FileInput', { size, variant }); + const fileInput = useMultiStyleConfig('FileInput', { size, variant }); const [totalUploadSizeReached, setTotalUploadSizeReached] = useState(false); @@ -92,7 +92,7 @@ export const FileInput = (props: FileUploadProps): ReactElement => { const getValidationText = (isDragActive: boolean) => { return ( variant !== 'disabled' ?? setHoverUploadBox(true) } diff --git a/src/Components/Form/NumberInput/NumberInput.tsx b/src/Components/Form/NumberInput/NumberInput.tsx index d3562dc..3efc536 100644 --- a/src/Components/Form/NumberInput/NumberInput.tsx +++ b/src/Components/Form/NumberInput/NumberInput.tsx @@ -28,7 +28,7 @@ const NumberInput = (props: NumberInputProps): ReactElement => { padding, width, minWidth, - backgroundColor, + variant, autoFocus, textAlign, } = props; @@ -80,7 +80,7 @@ const NumberInput = (props: NumberInputProps): ReactElement => { }} value={formatValue(value)} maxLength={maxValueLength} - backgroundColor={backgroundColor} + variant={variant} autoFocus={autoFocus} /> diff --git a/src/Components/Form/Radio/Radio.tsx b/src/Components/Form/Radio/Radio.tsx index 7093595..3fd8a52 100644 --- a/src/Components/Form/Radio/Radio.tsx +++ b/src/Components/Form/Radio/Radio.tsx @@ -23,7 +23,7 @@ export function Radio(props: RadioProps): ReactElement { padding, width, minWidth, - backgroundColor, + variant, } = props; return ( @@ -37,10 +37,10 @@ export function Radio(props: RadioProps): ReactElement { isGroup > {label} @@ -48,7 +48,7 @@ export function Radio(props: RadioProps): ReactElement { isDisabled={isDisabled} onChange={(e) => onChange(+e)} value={value} - backgroundColor={backgroundColor} + variant={variant} > {options.map((option, index) => { diff --git a/src/Components/Form/TextAreaInput/TextAreaInput.tsx b/src/Components/Form/TextAreaInput/TextAreaInput.tsx index 0a9ab33..0c2cc9b 100644 --- a/src/Components/Form/TextAreaInput/TextAreaInput.tsx +++ b/src/Components/Form/TextAreaInput/TextAreaInput.tsx @@ -32,7 +32,7 @@ const TextAreaInput = (props: TextInputProps): ReactElement => { padding, width, minWidth, - backgroundColor, + variant, autoFocus, } = props; return ( @@ -50,9 +50,9 @@ const TextAreaInput = (props: TextInputProps): ReactElement => { isInvalid={!!invalidText} isDisabled={isDisabled} placeholder={placeholder} - onChange={(e: any) => onChange(e.target.value as string)} + onChange={(e) => onChange(e.target.value)} value={value} - backgroundColor={backgroundColor} + variant={variant} autoFocus={autoFocus} /> diff --git a/src/Components/Form/TextInput/TextInput.tsx b/src/Components/Form/TextInput/TextInput.tsx index 47111e5..1a961f9 100644 --- a/src/Components/Form/TextInput/TextInput.tsx +++ b/src/Components/Form/TextInput/TextInput.tsx @@ -25,9 +25,9 @@ export const TextInput = (props: TextInputProps): ReactElement => { padding, width, minWidth, - backgroundColor, autoFocus, textAlign, + variant, } = props; return ( { placeholder={placeholder} onChange={(e: any) => onChange(e.target.value as string)} value={value} - backgroundColor={backgroundColor} autoFocus={autoFocus} + variant={variant} /> ); diff --git a/src/Components/Form/index.ts b/src/Components/Form/index.ts index f54259d..389625f 100644 --- a/src/Components/Form/index.ts +++ b/src/Components/Form/index.ts @@ -5,9 +5,7 @@ export * from './TextAreaInput'; export * from './TextInput'; export * from './Checkbox'; export * from './Radio'; -export * from './Button'; export * from './Select'; export * from './DatePicker'; export * from './MultiSelect'; export * from './RichTextAreaInput'; - diff --git a/src/Components/index.ts b/src/Components/index.ts index 3e7a574..3d207ef 100644 --- a/src/Components/index.ts +++ b/src/Components/index.ts @@ -4,4 +4,3 @@ export * from './Cards'; export * from './Form'; export * from './Overlay'; export * from './Navigation'; -export * from './Containers'; diff --git a/src/Styles/Components/ButtonStyles.ts b/src/Styles/Components/Button.ts similarity index 97% rename from src/Styles/Components/ButtonStyles.ts rename to src/Styles/Components/Button.ts index 578c81c..4e059d0 100644 --- a/src/Styles/Components/ButtonStyles.ts +++ b/src/Styles/Components/Button.ts @@ -1,4 +1,4 @@ -const ButtonStyles = { +const Button = { baseStyle: { marginEnd: '0.75rem', }, @@ -65,4 +65,4 @@ const ButtonStyles = { }, }; -export { ButtonStyles }; +export { Button }; diff --git a/src/Styles/Components/CardStyles.ts b/src/Styles/Components/Card.ts similarity index 88% rename from src/Styles/Components/CardStyles.ts rename to src/Styles/Components/Card.ts index 0db3f9e..649cfc6 100644 --- a/src/Styles/Components/CardStyles.ts +++ b/src/Styles/Components/Card.ts @@ -1,4 +1,4 @@ -const CardStyles = { +const Card = { baseStyle: { backgroundColor: 'lightblue', borderRadius: '6px', @@ -15,4 +15,4 @@ const CardStyles = { }, }; -export { CardStyles }; +export { Card }; diff --git a/src/Styles/Components/CheckboxStyles.ts b/src/Styles/Components/Checkbox.ts similarity index 96% rename from src/Styles/Components/CheckboxStyles.ts rename to src/Styles/Components/Checkbox.ts index 53ffb8d..437fd10 100644 --- a/src/Styles/Components/CheckboxStyles.ts +++ b/src/Styles/Components/Checkbox.ts @@ -1,4 +1,4 @@ -const CheckboxStyles = { +const Checkbox = { baseStyle: { control: { backgroundColor: 'white', @@ -51,4 +51,4 @@ const CheckboxStyles = { }, }; -export { CheckboxStyles }; +export { Checkbox }; diff --git a/src/Styles/Components/FileInputStyles.ts b/src/Styles/Components/FileInput.ts similarity index 92% rename from src/Styles/Components/FileInputStyles.ts rename to src/Styles/Components/FileInput.ts index 71e6feb..4c6a0c8 100644 --- a/src/Styles/Components/FileInputStyles.ts +++ b/src/Styles/Components/FileInput.ts @@ -1,4 +1,4 @@ -const FileInputStyles = { +const FileInput = { baseStyle: { padding: '16px', border: 'dashed 1px #01459E', @@ -32,4 +32,4 @@ const FileInputStyles = { }, }; -export { FileInputStyles }; +export { FileInput }; diff --git a/src/Styles/Components/HeadingStyles.ts b/src/Styles/Components/Heading.ts similarity index 52% rename from src/Styles/Components/HeadingStyles.ts rename to src/Styles/Components/Heading.ts index f61824c..cea73f9 100644 --- a/src/Styles/Components/HeadingStyles.ts +++ b/src/Styles/Components/Heading.ts @@ -1,7 +1,7 @@ -const HeadingStyles = { +const Heading = { baseStyle: { color: 'darkgrey', }, }; -export { HeadingStyles }; +export { Heading }; diff --git a/src/Styles/Components/IconButtonStyles.ts b/src/Styles/Components/IconButton.ts similarity index 83% rename from src/Styles/Components/IconButtonStyles.ts rename to src/Styles/Components/IconButton.ts index 0371502..b5ed474 100644 --- a/src/Styles/Components/IconButtonStyles.ts +++ b/src/Styles/Components/IconButton.ts @@ -1,4 +1,4 @@ -const IconButtonStyles = { +const IconButton = { baseStyle: { color: 'blue', _hover: { @@ -9,7 +9,7 @@ const IconButtonStyles = { }, _active: { backgroundColor: 'bluegrey', - } + }, }, variants: { solid: { @@ -19,9 +19,8 @@ const IconButtonStyles = { backgroundColor: 'white', outlineColor: 'lightblue', }, - ghost: { - } + ghost: {}, }, }; -export { IconButtonStyles }; +export { IconButton }; diff --git a/src/Styles/Components/InputStyles.ts b/src/Styles/Components/Input.ts similarity index 88% rename from src/Styles/Components/InputStyles.ts rename to src/Styles/Components/Input.ts index d1ed464..4a23eea 100644 --- a/src/Styles/Components/InputStyles.ts +++ b/src/Styles/Components/Input.ts @@ -1,4 +1,4 @@ -const InputStyles = { +const Input = { variants: { outline: { field: { @@ -15,4 +15,4 @@ const InputStyles = { }, }; -export { InputStyles }; +export { Input }; diff --git a/src/Styles/Components/RadioStyles.tsx b/src/Styles/Components/Radio.tsx similarity index 97% rename from src/Styles/Components/RadioStyles.tsx rename to src/Styles/Components/Radio.tsx index 40f429a..5a9a449 100644 --- a/src/Styles/Components/RadioStyles.tsx +++ b/src/Styles/Components/Radio.tsx @@ -1,4 +1,4 @@ -const RadioStyles = { +const Radio = { baseStyle: { control: { backgroundColor: 'white', @@ -52,4 +52,4 @@ const RadioStyles = { }, }; -export { RadioStyles }; +export { Radio }; diff --git a/src/Styles/Components/SharedComponents.ts b/src/Styles/Components/SharedComponents.ts deleted file mode 100644 index 4009af4..0000000 --- a/src/Styles/Components/SharedComponents.ts +++ /dev/null @@ -1,322 +0,0 @@ -/* eslint-disable */ -import { - Dispatch, - MutableRefObject, - SetStateAction, - ReactElement, -} from 'react'; - -enum ButtonType { - Primary = 'primary', - Secondary = 'secondary', - Delete = 'delete', -} - -enum Direction { - Row = 'row', - Column = 'column', -} - -enum Alignment { - Left = 'left', - Right = 'right', -} - -enum IconTestID { - AlertWarning = 'alertWarningIcon', - AlertInfo = 'alertInfoIcon', - AlertError = 'alertErrorIcon', - AlertSuccess = 'alertSuccessIcon', - AlertDialog = 'alertDialogIcon', - CardTitle = 'cardTitleIcon', - CardAction = 'cardActionIcon', - Modal = 'modalIcon', -} - -enum ModalIconType { - Check = 'check', - Exclamation = 'exclamation', -} - -enum AlertStatus { - Warning = 'warning', - Info = 'info', - Error = 'error', - Success = 'success', -} -enum AlertDialogIconType { - Warning = 'warning', -} - -enum AccordionBadgeEnum { - OK = 'Alle obligatoriske felt er fylt ut', - InProgress = 'Under arbeid', -} - -type PageContainerProps = { - title: string; - titleAlignment?: 'left' | 'right' | 'center'; - titleTextColor?: string; - subtitle?: string; - subtitleAlignment?: 'left' | 'right' | 'center'; - subtitleTextColor?: string; - children: JSX.Element[] | JSX.Element; - containerPadding?: string | (string | number)[]; - containerMargin?: string | (string | number)[]; - containerSideMargins?: string | (string | number)[]; - contentPadding?: string | (string | number)[]; - contentMargin?: string | (string | number)[]; - subtitlePadding?: string | (string | number)[]; - titlePadding?: string | (string | number)[]; - titleMargin?: string | (string | number)[]; - borderColor?: string; - borderWidth?: string | (string | number)[]; - contentBorderColor?: string; - contentBorderWidth?: string; - titleBadge?: { badgeColor: string; textColor: string; label: string }; - backgroundColor?: string; - contentColor?: string; - titlesColor?: string; - height?: string | (string | number)[]; - width?: string | (string | number)[]; - containerMinWidth?: string | (string | number)[]; - containerMaxWidth?: string | (string | number)[]; - shouldContentFillContainer?: boolean; - /** Use a single or array of 'ch' values, such as '60ch' or ['50ch', '60ch', '80ch'] for responsive breakpoints */ - containerSize?: string | string[]; -}; - -interface BaseInputProps extends InputProps { - children: JSX.Element[] | JSX.Element; -} - -type InputProps = { - label?: string; - labelTextMargin?: string; - invalidText?: string; - captionText?: string; - captionTextMargin?: string; - margin?: string; - padding?: string; - width?: string; - minWidth?: string; -}; -interface InputComponentProps extends InputProps { - isDisabled?: boolean; - backgroundColor?: string; - autoFocus?: boolean; -} -interface TextInputProps extends InputComponentProps { - placeholder?: string; - value: string; - onChange: Dispatch>; - characterLimit?: number; -} - -interface NumberInputProps extends InputComponentProps { - placeholder?: string; - allowNegative?: boolean; - value: string; - onChange: Dispatch>; - maxValue?: string; - maxValueLength?: number; - isCurrency?: boolean; - currencySpacer?: string; -} - -type CardProps = { - title: string; - body: string; - onClick?: () => void; - titleIcon?: ReactElement; - actionIcon?: ReactElement; - cardHeight?: string; - cardWidth?: string; - titleSize?: string; -}; - -type ModalProps = { - isModalOpen: boolean; - iconVariant?: ModalIconType; - title: string; - subtitle?: string; - children?: JSX.Element[] | JSX.Element; - buttons: ModalButtons; - hasCloseButton?: boolean; - onClose: () => void; - errorMessage?: string; - width?: string; -}; - -type ModalButtons = { - primary: ModalButton; - secondary: ModalButton; - alignment: Alignment; -}; - -type ModalButton = { - label: string; - variant: string; - onClick?: () => void; -}; - -interface RadioProps extends InputComponentProps { - direction?: Direction; - options: string[]; - value: number; - onChange: Dispatch>; -} - -interface CheckboxProps extends InputComponentProps { - direction?: Direction; - options: string[]; - value: number[]; - onChange: Dispatch>; -} - -type AccordionProps = { - allowMultiple?: boolean; - items: AccordionItem[]; -}; - -type AccordionItem = { - title: string; - content: JSX.Element[] | JSX.Element; - badge?: AccordionBadgeEnum; -}; - -type TabProps = { - tabs: Tab[]; - centerTabs?: boolean; -}; - -type Tab = { - title: string; - children: JSX.Element[] | JSX.Element; -}; - -type StepperProps = { - activeStep: number; - setActiveStep: Dispatch>; - stepsContent: StepContent[]; - buttonTexts: StepperButtonTexts; - finalStep: finalStep; - centerButtons?: boolean; - clickableSteps?: boolean; - completedSteps?: number[]; - onFinalStep: () => void; - onFinalize: () => void; - buttonCaption?: { text: string; color: string }; -}; - -type StepContent = { - label: string; - children: JSX.Element[] | JSX.Element; -}; -type StepperButtonTexts = { - previous: string; - next: string; - complete: string; -}; -type finalStep = { - finalText: string; - finalButtonText: string; -}; - -type AlertProps = { - status: AlertStatus; - description: string; - onClose: () => void; - linkText?: string; - linkHref?: string; -}; - -type AlertDialogProps = { - iconVariant?: AlertDialogIconType; - heading: string; - text: string; - isOpen: boolean; - cancelRef: MutableRefObject; - onClose: () => void; - buttons: AlertDialogButton[]; -}; - -type AlertDialogButton = { - label: string; - variant: ButtonType; - onClick: () => void; -}; - -interface BaseSelectProps extends InputComponentProps { - placeholder?: string; - options: SelectOption[]; - filterText?: string; -} - -interface SelectProps extends BaseSelectProps { - onChange: Dispatch>; - value?: SelectOption; -} - -interface MultiSelectProps extends BaseSelectProps { - submitText?: string; - cancelText?: string; - onChange: Dispatch>; - value: SelectOption[]; -} - -type SelectOption = { - label: string; - value: number; -}; - -interface DatePickerProps extends InputComponentProps { - placeholder?: string; - onChange: React.Dispatch>; - value?: Date; - maxDate?: Date; - minDate?: Date; -} -interface RichTextAreaProps extends TextInputProps { - toolbarOptions?: { - bold?: boolean; - italic?: boolean; - underline?: boolean; - unorderedList?: boolean; - }; -} - -export type { - PageContainerProps, - BaseInputProps, - TextInputProps, - NumberInputProps, - CardProps, - ModalProps, - ModalButtons, - RadioProps, - AccordionProps, - AccordionItem, - CheckboxProps, - TabProps, - StepperProps, - AlertProps, - AlertDialogProps, - SelectProps, - MultiSelectProps, - SelectOption, - AlertDialogButton, - DatePickerProps, - RichTextAreaProps, -}; - -export { - ButtonType, - Direction, - Alignment, - IconTestID, - AlertStatus, - AlertDialogIconType, - ModalIconType, - AccordionBadgeEnum, -}; diff --git a/src/Styles/Components/StepsStyles.ts b/src/Styles/Components/Steps.ts similarity index 96% rename from src/Styles/Components/StepsStyles.ts rename to src/Styles/Components/Steps.ts index 778fb0d..6abc5b1 100644 --- a/src/Styles/Components/StepsStyles.ts +++ b/src/Styles/Components/Steps.ts @@ -1,7 +1,7 @@ import { StyleFunctionProps } from '@chakra-ui/theme-tools'; import { StepsStyleConfig } from 'chakra-ui-steps'; -const StepsStyles = { +const Steps = { ...StepsStyleConfig, baseStyle: (props: StyleFunctionProps): unknown => { return { @@ -39,4 +39,4 @@ const StepsStyles = { }, }; -export { StepsStyles }; +export { Steps }; diff --git a/src/Styles/Components/TableStyles.ts b/src/Styles/Components/Table.ts similarity index 83% rename from src/Styles/Components/TableStyles.ts rename to src/Styles/Components/Table.ts index 4225930..90f3dce 100644 --- a/src/Styles/Components/TableStyles.ts +++ b/src/Styles/Components/Table.ts @@ -1,4 +1,4 @@ -const TableStyles = { +const Table = { variants: { 'simple': { th: { @@ -11,4 +11,4 @@ const TableStyles = { }, }; -export { TableStyles }; +export { Table }; diff --git a/src/Styles/Components/TabStyles.tsx b/src/Styles/Components/Tabs.tsx similarity index 90% rename from src/Styles/Components/TabStyles.tsx rename to src/Styles/Components/Tabs.tsx index 5bee053..c917cd5 100644 --- a/src/Styles/Components/TabStyles.tsx +++ b/src/Styles/Components/Tabs.tsx @@ -1,4 +1,4 @@ -const TabStyles = { +const Tabs = { variants: { 'line': { tab: { @@ -17,4 +17,4 @@ const TabStyles = { }, }; -export { TabStyles }; +export { Tabs }; diff --git a/src/Styles/Components/TextStyles.ts b/src/Styles/Components/Text.ts similarity index 84% rename from src/Styles/Components/TextStyles.ts rename to src/Styles/Components/Text.ts index 3e947cb..1f150d5 100644 --- a/src/Styles/Components/TextStyles.ts +++ b/src/Styles/Components/Text.ts @@ -1,4 +1,4 @@ -const TextStyles = { +const Text = { baseStyle: { color: 'darkgrey', fontSize: '16px', @@ -12,4 +12,4 @@ const TextStyles = { }, }; -export { TextStyles }; +export { Text }; diff --git a/src/Styles/Components/TextareaStyles.ts b/src/Styles/Components/Textarea.ts similarity index 84% rename from src/Styles/Components/TextareaStyles.ts rename to src/Styles/Components/Textarea.ts index c974c95..6a4c0f5 100644 --- a/src/Styles/Components/TextareaStyles.ts +++ b/src/Styles/Components/Textarea.ts @@ -1,4 +1,4 @@ -const TextareaStyles = { +const Textarea = { variants: { outline: { borderColor: 'darkgrey', @@ -13,4 +13,4 @@ const TextareaStyles = { }, }; -export { TextareaStyles }; +export { Textarea }; diff --git a/src/Styles/Components/index.ts b/src/Styles/Components/index.ts index 6bcdaac..c58c5b8 100644 --- a/src/Styles/Components/index.ts +++ b/src/Styles/Components/index.ts @@ -1,15 +1,15 @@ -export * from './TextStyles'; -export * from './HeadingStyles'; -export * from './ButtonStyles'; -export * from './IconButtonStyles'; -export * from './CardStyles'; -export * from './TabStyles'; -export * from './CheckboxStyles'; -export * from './RadioStyles'; -export * from './StepsStyles'; -export * from './InputStyles'; -export * from './TextareaStyles'; -export * from './TableStyles'; -export * from './FileInputStyles'; +export * from './Text'; +export * from './Heading'; +export * from './Button'; +export * from './IconButton'; +export * from './Card'; +export * from './Tabs'; +export * from './Checkbox'; +export * from './Radio'; +export * from './Steps'; +export * from './Input'; +export * from './Textarea'; +export * from './Table'; +export * from './FileInput'; /* export * from './DatePickerStyles'; */ diff --git a/src/Styles/index.ts b/src/Styles/index.ts index 2079292..2027627 100644 --- a/src/Styles/index.ts +++ b/src/Styles/index.ts @@ -2,20 +2,19 @@ import { extendTheme } from '@chakra-ui/react'; import { colors, fonts } from './Theme'; import { - TextStyles as Text, - HeadingStyles as Heading, - ButtonStyles as Button, - IconButtonStyles as IconButton, - CardStyles as Card, - TabStyles as Tabs, - CheckboxStyles as Checkbox, - RadioStyles as Radio, - StepsStyles as Steps, - // DatePickerStyles as DatePicker, - InputStyles as Input, - TextareaStyles as Textarea, - TableStyles as Table, - FileInputStyles as FileInput, + Text, + Heading, + Button, + IconButton, + Card, + Tabs, + Checkbox, + Radio, + Steps, + Input, + Textarea, + Table, + FileInput, } from './Components'; const overrides = { diff --git a/src/Types/SharedComponents.ts b/src/Types/SharedComponents.ts index 0cd1655..57c10bb 100644 --- a/src/Types/SharedComponents.ts +++ b/src/Types/SharedComponents.ts @@ -1,11 +1,6 @@ /* eslint-disable */ -import { - Dispatch, - MutableRefObject, - SetStateAction, - ReactElement, -} from 'react'; +import { MutableRefObject, ReactElement } from 'react'; type Direction = 'row' | 'column'; @@ -38,64 +33,34 @@ enum AlertDialogIconType { Warning = 'warning', } -type PageContainerProps = { - title: string; - titleAlignment?: 'left' | 'right' | 'center'; - titleTextColor?: string; - subtitle?: string; - subtitleAlignment?: 'left' | 'right' | 'center'; - subtitleTextColor?: string; - children: JSX.Element[] | JSX.Element; - containerPadding?: string | (string | number)[]; - containerMargin?: string | (string | number)[]; - containerSideMargins?: string | (string | number)[]; - contentPadding?: string | (string | number)[]; - contentMargin?: string | (string | number)[]; - subtitlePadding?: string | (string | number)[]; - titlePadding?: string | (string | number)[]; - titleMargin?: string | (string | number)[]; - borderColor?: string; - borderWidth?: string | (string | number)[]; - contentBorderColor?: string; - contentBorderWidth?: string; - titleBadge?: { badgeColor: string; textColor: string; label: string }; - backgroundColor?: string; - contentColor?: string; - titlesColor?: string; - height?: string | (string | number)[]; - width?: string | (string | number)[]; - containerMinWidth?: string | (string | number)[]; - containerMaxWidth?: string | (string | number)[]; - shouldContentFillContainer?: boolean; - /** Use a single or array of 'ch' values, such as '60ch' or ['50ch', '60ch', '80ch'] for responsive breakpoints */ - containerSize?: string | string[]; -}; +type ResponsiveStyleValue = string | (string | number)[]; interface BaseInputProps extends InputProps { children: JSX.Element[] | JSX.Element; + isGroup?: boolean; } type InputProps = { label?: string; - labelTextMargin?: string; + labelTextMargin?: ResponsiveStyleValue; invalidText?: string; captionText?: string; captionTextMargin?: string; - margin?: string; - padding?: string; - width?: string; - minWidth?: string; - maxWidth?: string; + margin?: ResponsiveStyleValue; + padding?: ResponsiveStyleValue; + width?: ResponsiveStyleValue; + minWidth?: ResponsiveStyleValue; + maxWidth?: ResponsiveStyleValue; + variant?: string; }; interface InputComponentProps extends InputProps { isDisabled?: boolean; - backgroundColor?: string; autoFocus?: boolean; } interface TextInputProps extends InputComponentProps { placeholder?: string; value: string; - onChange: Dispatch>; + onChange: (value: string) => void; characterLimit?: number; textAlign?: 'right' | 'center'; } @@ -104,7 +69,7 @@ interface NumberInputProps extends InputComponentProps { placeholder?: string; allowNegative?: boolean; value: string; - onChange: Dispatch>; + onChange: (value: string) => void; maxValue?: string; maxValueLength?: number; isCurrency?: boolean; @@ -115,12 +80,16 @@ interface NumberInputProps extends InputComponentProps { type CardProps = { title: string; body: string; + textColors?: string; + titleTextColor?: string; + bodyTextColor?: string; + titleTextSize?: string; + bodyTextSize?: string; onClick?: () => void; titleIcon?: ReactElement; actionIcon?: ReactElement; - cardHeight?: string; - cardWidth?: string; - titleSize?: string; + cardHeight?: ResponsiveStyleValue; + cardWidth?: ResponsiveStyleValue; }; type ModalProps = { @@ -134,7 +103,7 @@ type ModalProps = { hasCloseButton?: boolean; onClose: () => void; errorMessage?: string; - width?: string; + width?: ResponsiveStyleValue; }; type ModalButtons = { @@ -153,14 +122,14 @@ interface RadioProps extends InputComponentProps { direction?: Direction; options: string[]; value: number; - onChange: Dispatch>; + onChange: (value: number) => void; } interface CheckboxProps extends InputComponentProps { direction?: Direction; options: string[]; value: number[]; - onChange: Dispatch>; + onChange: (value: number[]) => void; } type AccordionProps = { @@ -191,18 +160,17 @@ type Tab = { type StepperProps = { activeStep: number; - setActiveStep: Dispatch>; + setActiveStep: (value: number) => void; stepsContent: StepContent[]; buttonTexts: StepperButtonTexts; finalStep: finalStep; buttonAlignment?: 'left' | 'center' | 'right'; - buttonMargin?: string; + buttonMargin?: ResponsiveStyleValue; clickableSteps?: boolean; completedSteps?: number[]; onFinalStep: () => void; onFinalize: () => void; isCompleteButtonDisabled?: boolean; - buttonCaption?: { text: string; color: string }; }; type StepContent = { @@ -252,14 +220,14 @@ interface BaseSelectProps extends InputComponentProps { } interface SelectProps extends BaseSelectProps { - onChange: Dispatch>; + onChange: (value: SelectOption) => void; value?: SelectOption; } interface MultiSelectProps extends BaseSelectProps { submitText?: string; cancelText?: string; - onChange: Dispatch>; + onChange: (value: SelectOption[]) => void; value: SelectOption[]; } @@ -270,7 +238,7 @@ type SelectOption = { interface DatePickerProps extends InputComponentProps { placeholder?: string; - onChange: React.Dispatch>; + onChange: (value: Date) => void; value?: Date; maxDate?: Date; minDate?: Date; @@ -318,17 +286,15 @@ interface RichTextAreaProps extends TextInputProps { undo?: boolean; redo?: boolean; fullscreen?: boolean; - print?: boolean; + print?: boolean; getPDF?: boolean; spellChecker?: boolean; selectAll?: boolean; html?: boolean; help?: boolean; - }; } - interface FileUploadProps extends InputProps { uploadLabel?: string; dropLabel?: string; @@ -339,11 +305,10 @@ interface FileUploadProps extends InputProps { disabled?: boolean; showIcon?: boolean; size?: string; - variant?: string; + variant?: string; } export type { - PageContainerProps, BaseInputProps, TextInputProps, NumberInputProps,