From 75a95a9e093ca09bc9e35a0d4db9541090d4855a Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Wed, 26 Jul 2023 20:03:16 +0000 Subject: [PATCH 1/3] Add ui/title stories Co-authored-by: RubensRafael --- .../__stories__/MainSectionTitle.stories.tsx | 54 ++++++++++++++++ .../__stories__/SubSectionTitle.stories.tsx | 63 +++++++++++++++++++ .../ui/title/components/__stories__/themes.ts | 63 +++++++++++++++++++ .../testing/decorators/CatalogDecorator.tsx | 55 ++++++++++------ 4 files changed, 216 insertions(+), 19 deletions(-) create mode 100644 front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx create mode 100644 front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx create mode 100644 front/src/modules/ui/title/components/__stories__/themes.ts diff --git a/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx b/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx new file mode 100644 index 000000000000..f6f429295428 --- /dev/null +++ b/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx @@ -0,0 +1,54 @@ +import { ThemeProvider } from '@emotion/react'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + +import { MainSectionTitle } from '../MainSectionTitle'; + +import { theme1, theme2, theme3 } from './themes'; + +const meta: Meta = { + title: 'UI/Title/MainSectionTitle', + component: MainSectionTitle, + decorators: [ComponentDecorator], +}; + +export default meta; + +type Story = StoryObj; + +const defaultArgTypes = { control: false }; + +const args = { + children: 'Lorem ipsum', +}; + +export const Default: Story = { + args, + decorators: [ComponentDecorator], +}; + +export const Catalog: Story = { + args, + argTypes: { + children: defaultArgTypes, + }, + parameters: { + providers: Array(4).fill(ThemeProvider), + providerProps: [ + { theme: {} }, + { theme: theme1 }, + { theme: theme2 }, + { theme: theme3 }, + ], + catalog: [ + { + name: 'text', + values: ['Default', 'Md', 'Lg', 'Xl'], + props: () => ({}), + }, + ], + }, + decorators: [CatalogDecorator], +}; diff --git a/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx b/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx new file mode 100644 index 000000000000..e71577a4d2c5 --- /dev/null +++ b/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx @@ -0,0 +1,63 @@ +import { ThemeProvider } from '@emotion/react'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + +import { SubSectionTitle } from '../SubSectionTitle'; + +import { theme1, theme2, theme3 } from './themes'; + +const args = { + title: 'Lorem ipsum', + description: 'Lorem ipsum dolor sit amet', +}; + +const meta: Meta = { + title: 'UI/Title/SubSectionTitle', + component: SubSectionTitle, + decorators: [ComponentDecorator], + args: { + title: args.title, + }, +}; + +export default meta; + +type Story = StoryObj; + +const defaultArgTypes = { control: false }; + +export const Default: Story = { + decorators: [ComponentDecorator], +}; + +export const WithDescription: Story = { + args, + decorators: [ComponentDecorator], +}; + +export const Catalog: Story = { + args, + argTypes: { + title: defaultArgTypes, + description: defaultArgTypes, + }, + parameters: { + providers: Array(4).fill(ThemeProvider), + providerProps: [ + { theme: {} }, + { theme: theme1 }, + { theme: theme2 }, + { theme: theme3 }, + ], + catalog: [ + { + name: 'text', + values: ['Default', 'Md', 'Lg', 'Xl'], + props: () => ({}), + }, + ], + }, + decorators: [CatalogDecorator], +}; diff --git a/front/src/modules/ui/title/components/__stories__/themes.ts b/front/src/modules/ui/title/components/__stories__/themes.ts new file mode 100644 index 000000000000..25d0d92811e9 --- /dev/null +++ b/front/src/modules/ui/title/components/__stories__/themes.ts @@ -0,0 +1,63 @@ +export const theme1 = { + font: { + color: { + primary: '#8B0000', + tertiary: '#FF0000', + }, + size: { + md: '28px', + xl: '32px', + }, + weight: { + regular: '400', + semiBold: '500', + }, + }, + text: { + lineHeight: { + lg: '1.8', + }, + }, +}; +export const theme2 = { + font: { + color: { + primary: '#0000CD', + tertiary: '#4169E1', + }, + size: { + md: '32px', + xl: '36px', + }, + weight: { + regular: '500', + semiBold: '600', + }, + }, + text: { + lineHeight: { + lg: '2.0', + }, + }, +}; +export const theme3 = { + font: { + color: { + primary: '#006400', + tertiary: '#008000', + }, + size: { + md: '36px', + xl: '40px', + }, + weight: { + regular: '600', + semiBold: '700', + }, + }, + text: { + lineHeight: { + lg: '2.2', + }, + }, +}; diff --git a/front/src/testing/decorators/CatalogDecorator.tsx b/front/src/testing/decorators/CatalogDecorator.tsx index f8e5ffb5427f..d6b61fa444f2 100644 --- a/front/src/testing/decorators/CatalogDecorator.tsx +++ b/front/src/testing/decorators/CatalogDecorator.tsx @@ -70,7 +70,7 @@ const emptyVariable = { }; export const CatalogDecorator: Decorator = (Story, context) => { - const { catalog } = context.parameters; + const { catalog, providers = [], providerProps = [] } = context.parameters; const [ variable1, variable2 = emptyVariable, @@ -95,24 +95,41 @@ export const CatalogDecorator: Decorator = (Story, context) => { {(variable2.labels?.(value2) || value2) && ( {variable2.labels?.(value2) || value2} )} - {variable1.values.map((value1: string) => ( - - {(variable1.labels?.(value1) || value1) && ( - - {variable1.labels?.(value1) || value1} - - )} - - - ))} + {variable1.values.map((value1: string, index: number) => { + const Provider = providers[index]; + + const StoryProvider = (props: { + children: React.ReactNode; + }) => + providers.length > 0 ? ( + + {props.children} + + ) : ( + <>{props.children} + ); + + return ( + + {(variable1.labels?.(value1) || value1) && ( + + {variable1.labels?.(value1) || value1} + + )} + + + + + ); + })} ))} From 96a8a81efd5c38c816f853b2edea141eba728fcc Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Thu, 27 Jul 2023 04:11:53 +0000 Subject: [PATCH 2/3] Add requested changes Co-authored-by: v1b3m Co-authored-by: RubensRafael --- .../__stories__/MainSectionTitle.stories.tsx | 29 --------- .../__stories__/SubSectionTitle.stories.tsx | 31 --------- .../ui/title/components/__stories__/themes.ts | 63 ------------------- .../testing/decorators/CatalogDecorator.tsx | 55 ++++++---------- 4 files changed, 19 insertions(+), 159 deletions(-) delete mode 100644 front/src/modules/ui/title/components/__stories__/themes.ts diff --git a/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx b/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx index f6f429295428..0247788a9285 100644 --- a/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx +++ b/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx @@ -1,12 +1,9 @@ -import { ThemeProvider } from '@emotion/react'; import type { Meta, StoryObj } from '@storybook/react'; -import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { MainSectionTitle } from '../MainSectionTitle'; -import { theme1, theme2, theme3 } from './themes'; const meta: Meta = { title: 'UI/Title/MainSectionTitle', @@ -18,8 +15,6 @@ export default meta; type Story = StoryObj; -const defaultArgTypes = { control: false }; - const args = { children: 'Lorem ipsum', }; @@ -28,27 +23,3 @@ export const Default: Story = { args, decorators: [ComponentDecorator], }; - -export const Catalog: Story = { - args, - argTypes: { - children: defaultArgTypes, - }, - parameters: { - providers: Array(4).fill(ThemeProvider), - providerProps: [ - { theme: {} }, - { theme: theme1 }, - { theme: theme2 }, - { theme: theme3 }, - ], - catalog: [ - { - name: 'text', - values: ['Default', 'Md', 'Lg', 'Xl'], - props: () => ({}), - }, - ], - }, - decorators: [CatalogDecorator], -}; diff --git a/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx b/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx index e71577a4d2c5..7390f9848f1c 100644 --- a/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx +++ b/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx @@ -1,13 +1,9 @@ -import { ThemeProvider } from '@emotion/react'; import type { Meta, StoryObj } from '@storybook/react'; -import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { SubSectionTitle } from '../SubSectionTitle'; -import { theme1, theme2, theme3 } from './themes'; - const args = { title: 'Lorem ipsum', description: 'Lorem ipsum dolor sit amet', @@ -26,8 +22,6 @@ export default meta; type Story = StoryObj; -const defaultArgTypes = { control: false }; - export const Default: Story = { decorators: [ComponentDecorator], }; @@ -36,28 +30,3 @@ export const WithDescription: Story = { args, decorators: [ComponentDecorator], }; - -export const Catalog: Story = { - args, - argTypes: { - title: defaultArgTypes, - description: defaultArgTypes, - }, - parameters: { - providers: Array(4).fill(ThemeProvider), - providerProps: [ - { theme: {} }, - { theme: theme1 }, - { theme: theme2 }, - { theme: theme3 }, - ], - catalog: [ - { - name: 'text', - values: ['Default', 'Md', 'Lg', 'Xl'], - props: () => ({}), - }, - ], - }, - decorators: [CatalogDecorator], -}; diff --git a/front/src/modules/ui/title/components/__stories__/themes.ts b/front/src/modules/ui/title/components/__stories__/themes.ts deleted file mode 100644 index 25d0d92811e9..000000000000 --- a/front/src/modules/ui/title/components/__stories__/themes.ts +++ /dev/null @@ -1,63 +0,0 @@ -export const theme1 = { - font: { - color: { - primary: '#8B0000', - tertiary: '#FF0000', - }, - size: { - md: '28px', - xl: '32px', - }, - weight: { - regular: '400', - semiBold: '500', - }, - }, - text: { - lineHeight: { - lg: '1.8', - }, - }, -}; -export const theme2 = { - font: { - color: { - primary: '#0000CD', - tertiary: '#4169E1', - }, - size: { - md: '32px', - xl: '36px', - }, - weight: { - regular: '500', - semiBold: '600', - }, - }, - text: { - lineHeight: { - lg: '2.0', - }, - }, -}; -export const theme3 = { - font: { - color: { - primary: '#006400', - tertiary: '#008000', - }, - size: { - md: '36px', - xl: '40px', - }, - weight: { - regular: '600', - semiBold: '700', - }, - }, - text: { - lineHeight: { - lg: '2.2', - }, - }, -}; diff --git a/front/src/testing/decorators/CatalogDecorator.tsx b/front/src/testing/decorators/CatalogDecorator.tsx index d6b61fa444f2..f8e5ffb5427f 100644 --- a/front/src/testing/decorators/CatalogDecorator.tsx +++ b/front/src/testing/decorators/CatalogDecorator.tsx @@ -70,7 +70,7 @@ const emptyVariable = { }; export const CatalogDecorator: Decorator = (Story, context) => { - const { catalog, providers = [], providerProps = [] } = context.parameters; + const { catalog } = context.parameters; const [ variable1, variable2 = emptyVariable, @@ -95,41 +95,24 @@ export const CatalogDecorator: Decorator = (Story, context) => { {(variable2.labels?.(value2) || value2) && ( {variable2.labels?.(value2) || value2} )} - {variable1.values.map((value1: string, index: number) => { - const Provider = providers[index]; - - const StoryProvider = (props: { - children: React.ReactNode; - }) => - providers.length > 0 ? ( - - {props.children} - - ) : ( - <>{props.children} - ); - - return ( - - {(variable1.labels?.(value1) || value1) && ( - - {variable1.labels?.(value1) || value1} - - )} - - - - - ); - })} + {variable1.values.map((value1: string) => ( + + {(variable1.labels?.(value1) || value1) && ( + + {variable1.labels?.(value1) || value1} + + )} + + + ))} ))} From e24c7edae156a3bcdb7bffde3d4ea36a25a5f5da Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Thu, 27 Jul 2023 04:24:01 +0000 Subject: [PATCH 3/3] Fix linter issues Co-authored-by: v1b3m Co-authored-by: RubensRafael --- .../ui/title/components/__stories__/MainSectionTitle.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx b/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx index 0247788a9285..5ce9288e2179 100644 --- a/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx +++ b/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx @@ -4,7 +4,6 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { MainSectionTitle } from '../MainSectionTitle'; - const meta: Meta = { title: 'UI/Title/MainSectionTitle', component: MainSectionTitle,