diff options
Diffstat (limited to 'src')
130 files changed, 5080 insertions, 6913 deletions
diff --git a/src/components/atoms/buttons/button-link/button-link.mdx b/src/components/atoms/buttons/button-link/button-link.mdx new file mode 100644 index 0000000..e22471e --- /dev/null +++ b/src/components/atoms/buttons/button-link/button-link.mdx @@ -0,0 +1,71 @@ +import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks'; +import * as ButtonLinkStories from './button-link.stories'; + +<Meta of={ButtonLinkStories} /> + +# Button + +<Primary /> + +## Kind + +The button appearance can change depending on its kind. + +### Primary + +<Canvas of={ButtonLinkStories.Primary} /> + +### Secondary (default) + +<Canvas of={ButtonLinkStories.Secondary} /> + +### Tertiary + +<Canvas of={ButtonLinkStories.Tertiary} /> + +## States + +It can be: +* enabled, +* disabled +* external. + +### Enabled (default) + +<Canvas of={ButtonLinkStories.Enabled} /> + +### Disabled + +<Canvas of={ButtonLinkStories.Disabled} /> + +### External + +<Canvas of={ButtonLinkStories.ExternalLink} /> + +## Shapes + +It can either: +* be a circle, +* be a rectangle +* be a square, +* or have an automatic shape. + +### Circle + +<Canvas of={ButtonLinkStories.Circle} /> + +### Rectangle (default) + +<Canvas of={ButtonLinkStories.Rectangle} /> + +### Square + +<Canvas of={ButtonLinkStories.Square} /> + +### Auto + +<Canvas of={ButtonLinkStories.Auto} /> + +## Props + +<ArgTypes of={ButtonLinkStories} /> diff --git a/src/components/atoms/buttons/button-link/button-link.stories.ts b/src/components/atoms/buttons/button-link/button-link.stories.ts new file mode 100644 index 0000000..bbf940c --- /dev/null +++ b/src/components/atoms/buttons/button-link/button-link.stories.ts @@ -0,0 +1,99 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ButtonLink } from './button-link'; + +const meta = { + component: ButtonLink, + title: 'Atoms/Buttons/ButtonLink', +} satisfies Meta<typeof ButtonLink>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + children: 'Button Link', + isDisabled: false, + to: '#', + }, +}; + +export const Primary: Story = { + name: 'Kind: Primary', + args: { + ...Default.args, + kind: 'primary', + }, +}; + +export const Secondary: Story = { + name: 'Kind: Secondary', + args: { + ...Default.args, + kind: 'secondary', + }, +}; + +export const Tertiary: Story = { + name: 'Kind: Tertiary', + args: { + ...Default.args, + kind: 'tertiary', + }, +}; + +export const Enabled: Story = { + name: 'State: Enabled', + args: { + ...Default.args, + isDisabled: false, + }, +}; + +export const Disabled: Story = { + name: 'State: Disabled', + args: { + ...Default.args, + isDisabled: true, + }, +}; + +export const ExternalLink: Story = { + name: 'State: External', + args: { + ...Default.args, + isExternal: true, + }, +}; + +export const Circle: Story = { + name: 'Shape: Circle', + args: { + ...Default.args, + shape: 'circle', + }, +}; + +export const Rectangle: Story = { + name: 'Shape: Rectangle', + args: { + ...Default.args, + shape: 'rectangle', + }, +}; + +export const Square: Story = { + name: 'Shape: Square', + args: { + ...Default.args, + shape: 'square', + }, +}; + +export const Auto: Story = { + name: 'Shape: Auto', + args: { + ...Default.args, + shape: 'auto', + }, +}; diff --git a/src/components/atoms/buttons/button-link/button-link.stories.tsx b/src/components/atoms/buttons/button-link/button-link.stories.tsx deleted file mode 100644 index f048ce9..0000000 --- a/src/components/atoms/buttons/button-link/button-link.stories.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ButtonLink } from './button-link'; - -/** - * ButtonLink - Storybook Meta - */ -export default { - title: 'Atoms/Buttons/ButtonLink', - component: ButtonLink, - args: { - isExternal: false, - shape: 'rectangle', - }, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The link body.', - type: { - name: 'string', - required: true, - }, - }, - isExternal: { - control: { - type: 'boolean', - }, - description: 'Determine if the link is an external link.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - kind: { - control: { - type: 'select', - }, - description: 'The link kind.', - options: ['primary', 'secondary', 'tertiary'], - table: { - category: 'Options', - defaultValue: { summary: 'secondary' }, - }, - type: { - name: 'string', - required: false, - }, - }, - shape: { - control: { - type: 'select', - }, - description: 'The link shape.', - options: ['circle', 'rectangle', 'square'], - table: { - category: 'Options', - defaultValue: { summary: 'rectangle' }, - }, - type: { - name: 'string', - required: false, - }, - }, - to: { - control: { - type: 'text', - }, - description: 'The link target.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof ButtonLink>; - -const Template: ComponentStory<typeof ButtonLink> = (args) => ( - <ButtonLink {...args} /> -); - -/** - * ButtonLink Story - Primary - */ -export const Primary = Template.bind({}); -Primary.args = { - children: 'Link', - kind: 'primary', - to: '#', -}; - -/** - * ButtonLink Story - Secondary - */ -export const Secondary = Template.bind({}); -Secondary.args = { - children: 'Link', - kind: 'secondary', - to: '#', -}; - -/** - * ButtonLink Story - Tertiary - */ -export const Tertiary = Template.bind({}); -Tertiary.args = { - children: 'Link', - kind: 'tertiary', - to: '#', -}; diff --git a/src/components/atoms/buttons/button/button.mdx b/src/components/atoms/buttons/button/button.mdx new file mode 100644 index 0000000..d90156e --- /dev/null +++ b/src/components/atoms/buttons/button/button.mdx @@ -0,0 +1,80 @@ +import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks'; +import * as ButtonStories from './button.stories'; + +<Meta of={ButtonStories} /> + +# Button + +<Primary /> + +## Kind + +The button appearance can change depending on its kind. + +### Primary + +<Canvas of={ButtonStories.Primary} /> + +### Secondary (default) + +<Canvas of={ButtonStories.Secondary} /> + +### Tertiary + +<Canvas of={ButtonStories.Tertiary} /> + +### Neutral + +<Canvas of={ButtonStories.Neutral} /> + +## States + +It can either: +* be enabled, +* be disabled +* indicate a loading state, +* indicate a pressed state. + +### Enabled (default) + +<Canvas of={ButtonStories.Enabled} /> + +### Disabled + +<Canvas of={ButtonStories.Disabled} /> + +### Loading + +<Canvas of={ButtonStories.Loading} /> + +### Pressed + +<Canvas of={ButtonStories.Pressed} /> + +## Shapes + +It can either: +* be a circle, +* be a rectangle +* be a square, +* or conserves its initial shape. + +### Circle + +<Canvas of={ButtonStories.Circle} /> + +### Rectangle (default) + +<Canvas of={ButtonStories.Rectangle} /> + +### Square + +<Canvas of={ButtonStories.Square} /> + +### Initial + +<Canvas of={ButtonStories.Initial} /> + +## Props + +<ArgTypes of={ButtonStories} /> diff --git a/src/components/atoms/buttons/button/button.stories.ts b/src/components/atoms/buttons/button/button.stories.ts new file mode 100644 index 0000000..25fb9f8 --- /dev/null +++ b/src/components/atoms/buttons/button/button.stories.ts @@ -0,0 +1,112 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Button } from './button'; + +const meta = { + component: Button, + title: 'Atoms/Buttons/Button', +} satisfies Meta<typeof Button>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + children: 'Button', + }, +}; + +export const Primary: Story = { + name: 'Kind: Primary', + args: { + ...Default.args, + kind: 'primary', + }, +}; + +export const Secondary: Story = { + name: 'Kind: Secondary', + args: { + ...Default.args, + kind: 'secondary', + }, +}; + +export const Tertiary: Story = { + name: 'Kind: Tertiary', + args: { + ...Default.args, + kind: 'tertiary', + }, +}; + +export const Neutral: Story = { + name: 'Kind: Neutral', + args: { + ...Default.args, + kind: 'neutral', + }, +}; + +export const Enabled: Story = { + name: 'State: Enabled', + args: { + ...Default.args, + }, +}; + +export const Disabled: Story = { + name: 'State: Disabled', + args: { + ...Default.args, + isDisabled: true, + }, +}; + +export const Loading: Story = { + name: 'State: Loading', + args: { + ...Default.args, + isLoading: true, + }, +}; + +export const Pressed: Story = { + name: 'State: Pressed', + args: { + ...Default.args, + isPressed: true, + }, +}; + +export const Circle: Story = { + name: 'Shape: Circle', + args: { + ...Default.args, + shape: 'circle', + }, +}; + +export const Rectangle: Story = { + name: 'Shape: Rectangle', + args: { + ...Default.args, + shape: 'rectangle', + }, +}; + +export const Square: Story = { + name: 'Shape: Square', + args: { + ...Default.args, + shape: 'square', + }, +}; + +export const Initial: Story = { + name: 'Shape: Initial', + args: { + ...Default.args, + shape: 'initial', + }, +}; diff --git a/src/components/atoms/buttons/button/button.stories.tsx b/src/components/atoms/buttons/button/button.stories.tsx deleted file mode 100644 index 5ce28fb..0000000 --- a/src/components/atoms/buttons/button/button.stories.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Button } from './button'; - -/** - * Button - Storybook Meta - */ -export default { - title: 'Atoms/Buttons/Button', - component: Button, - args: { - type: 'button', - }, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The button body.', - type: { - name: 'string', - required: true, - }, - }, - isDisabled: { - control: { - type: 'boolean', - }, - description: 'Should the button be disabled?', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isLoading: { - control: { - type: 'boolean', - }, - description: - 'Should the button be disabled because it is loading something?', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isPressed: { - control: { - type: 'boolean', - }, - description: 'Define if the button is currently pressed.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - kind: { - control: { - type: 'select', - }, - description: 'Button kind.', - options: ['primary', 'secondary', 'tertiary', 'neutral'], - table: { - category: 'Options', - defaultValue: { summary: 'secondary' }, - }, - type: { - name: 'string', - required: false, - }, - }, - onClick: { - control: { - type: null, - }, - description: 'A callback function to handle click.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - shape: { - control: { - type: 'select', - }, - description: 'The link shape.', - options: ['circle', 'rectangle', 'square', 'initial'], - table: { - category: 'Options', - defaultValue: { summary: 'rectangle' }, - }, - type: { - name: 'string', - required: false, - }, - }, - type: { - control: { - type: 'select', - }, - description: 'Button type attribute.', - options: ['button', 'reset', 'submit'], - table: { - category: 'Options', - defaultValue: { summary: 'button' }, - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Button>; - -const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />; - -const logClick = () => { - console.log('Button has been clicked!'); -}; - -/** - * Button Story - Primary - */ -export const Primary = Template.bind({}); -Primary.args = { - children: 'Click on the button', - kind: 'primary', - onClick: logClick, -}; - -/** - * Button Story - Secondary - */ -export const Secondary = Template.bind({}); -Secondary.args = { - children: 'Click on the button', - kind: 'secondary', - onClick: logClick, -}; - -/** - * Button Story - Tertiary - */ -export const Tertiary = Template.bind({}); -Tertiary.args = { - children: 'Click on the button', - kind: 'tertiary', - onClick: logClick, -}; - -/** - * Button Story - Neutral - */ -export const Neutral = Template.bind({}); -Neutral.args = { - children: 'Click on the button', - kind: 'neutral', - onClick: logClick, -}; diff --git a/src/components/atoms/figure/figure.stories.tsx b/src/components/atoms/figure/figure.stories.tsx index 7763641..ece08b7 100644 --- a/src/components/atoms/figure/figure.stories.tsx +++ b/src/components/atoms/figure/figure.stories.tsx @@ -1,74 +1,39 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { Figure } from './figure'; -/** - * Figure - Storybook Meta - */ -export default { - title: 'Atoms/Figure', +const meta = { component: Figure, - args: {}, - argTypes: { - caption: { - control: { - type: 'text', - }, - description: 'A figure caption.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - hasBorders: { - control: { - type: 'boolean', - }, - description: 'Add borders around the figure.', - table: { - category: 'Styles', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Figure>; + title: 'Atoms/Figure', +} satisfies Meta<typeof Figure>; -const Template: ComponentStory<typeof Figure> = (args) => <Figure {...args} />; +export default meta; -/** - * Figure Stories - Illustration - */ -export const Illustration = Template.bind({}); -Illustration.args = { - children: ( - <NextImage - alt="An example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - ), +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + children: ( + <NextImage + alt="An example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + ), + }, }; -/** - * Figure Stories - BorderedIllustration - */ -export const BorderedIllustration = Template.bind({}); -BorderedIllustration.args = { - children: ( - <NextImage - alt="An example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - ), - hasBorders: true, +export const Bordered: Story = { + args: { + children: ( + <NextImage + alt="An example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + ), + hasBorders: true, + }, }; diff --git a/src/components/atoms/flip/flip.stories.tsx b/src/components/atoms/flip/flip.stories.tsx index 1e470b1..19b4242 100644 --- a/src/components/atoms/flip/flip.stories.tsx +++ b/src/components/atoms/flip/flip.stories.tsx @@ -1,61 +1,53 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Flip as FlipComponent } from './flip'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Flip } from './flip'; import { FlipSide } from './flip-side'; -/** - * Flip - Storybook Meta - */ -export default { +const meta = { + component: Flip, title: 'Atoms/Flip', - component: FlipComponent, - argTypes: {}, -} as ComponentMeta<typeof FlipComponent>; +} satisfies Meta<typeof Flip>; -const Template: ComponentStory<typeof FlipComponent> = (args) => ( - <FlipComponent {...args} tabIndex={0} /> -); +export default meta; -/** - * Images Stories - Horizontal Flipping - */ -export const Horizontal = Template.bind({}); -Horizontal.args = { - children: ( - <> - <FlipSide style={{ padding: '10px' }}> - Consequatur natus possimus quia consequatur placeat consectetur. Quia - vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur est - cum et. - </FlipSide> - <FlipSide isBack style={{ background: '#eee', padding: '10px' }}> - Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque - minima velit. Ad consequatur assumenda qui placeat aut consectetur - officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et - autem non. - </FlipSide> - </> - ), +type Story = StoryObj<typeof meta>; + +export const Horizontal: Story = { + args: { + children: ( + <> + <FlipSide style={{ padding: '10px' }}> + Consequatur natus possimus quia consequatur placeat consectetur. Quia + vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur + est cum et. + </FlipSide> + <FlipSide isBack style={{ background: '#eee', padding: '10px' }}> + Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque + minima velit. Ad consequatur assumenda qui placeat aut consectetur + officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et + autem non. + </FlipSide> + </> + ), + }, }; -/** - * Images Stories - Vertical Flipping - */ -export const Vertical = Template.bind({}); -Vertical.args = { - children: ( - <> - <FlipSide style={{ padding: '10px' }}> - Consequatur natus possimus quia consequatur placeat consectetur. Quia - vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur est - cum et. - </FlipSide> - <FlipSide isBack style={{ background: '#eee', padding: '10px' }}> - Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque - minima velit. Ad consequatur assumenda qui placeat aut consectetur - officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et - autem non. - </FlipSide> - </> - ), - direction: 'vertical', +export const Vertical: Story = { + args: { + children: ( + <> + <FlipSide style={{ padding: '10px' }}> + Consequatur natus possimus quia consequatur placeat consectetur. Quia + vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur + est cum et. + </FlipSide> + <FlipSide isBack style={{ background: '#eee', padding: '10px' }}> + Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque + minima velit. Ad consequatur assumenda qui placeat aut consectetur + officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et + autem non. + </FlipSide> + </> + ), + direction: 'vertical', + }, }; diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.ts b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.ts new file mode 100644 index 0000000..d1be590 --- /dev/null +++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.ts @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { BooleanField } from './boolean-field'; + +const meta = { + component: BooleanField, + title: 'Atoms/Forms/Fields/BooleanField', +} satisfies Meta<typeof BooleanField>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Checkbox: Story = { + args: { + id: 'checkbox', + isChecked: false, + name: 'checkbox', + type: 'checkbox', + value: 'checkbox', + }, +}; + +export const Radio: Story = { + args: { + id: 'radio', + isChecked: false, + name: 'radio', + type: 'radio', + value: 'radio', + }, +}; diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx deleted file mode 100644 index 60dd352..0000000 --- a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useCallback, useState } from 'react'; -import { BooleanField } from './boolean-field'; - -/** - * BooleanField - Storybook Meta - */ -export default { - title: 'Atoms/Forms/Fields', - component: BooleanField, - args: { - isHidden: false, - }, - argTypes: { - 'aria-labelledby': { - control: { - type: 'text', - }, - description: 'One or more ids that refers to the field name.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the field.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - id: { - control: { - type: 'text', - }, - description: 'The field id.', - type: { - name: 'string', - required: true, - }, - }, - isChecked: { - control: { - type: null, - }, - description: 'The field state: true if checked.', - type: { - name: 'boolean', - required: true, - }, - }, - isHidden: { - control: { - type: 'boolean', - }, - description: 'Define if the field should be visually hidden.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - name: { - control: { - type: 'text', - }, - description: 'The field name.', - type: { - name: 'string', - required: true, - }, - }, - onChange: { - control: { - type: null, - }, - description: 'A callback function to handle field state change.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: true, - }, - }, - onClick: { - control: { - type: null, - }, - description: 'A callback function to handle click on field.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - type: { - control: { - type: 'select', - }, - description: 'The field type. Either checkbox or radio.', - options: ['checkbox', 'radio'], - type: { - name: 'string', - required: true, - }, - }, - value: { - control: { - type: 'text', - }, - description: 'The field value.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof BooleanField>; - -const Template: ComponentStory<typeof BooleanField> = ({ - isChecked: checked, - onChange: _onChange, - ...args -}) => { - const [isChecked, setIsChecked] = useState(checked); - const handleChange = useCallback(() => { - setIsChecked((prev) => !prev); - }, []); - - return ( - <BooleanField isChecked={isChecked} onChange={handleChange} {...args} /> - ); -}; - -/** - * Checkbox Story - */ -export const Checkbox = Template.bind({}); -Checkbox.args = { - id: 'checkbox', - isChecked: false, - name: 'checkbox', - type: 'checkbox', - value: 'checkbox', -}; - -/** - * Radio Story - */ -export const Radio = Template.bind({}); -Radio.args = { - id: 'radio', - isChecked: false, - name: 'radio', - type: 'radio', - value: 'radio', -}; diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.stories.ts b/src/components/atoms/forms/fields/checkbox/checkbox.stories.ts new file mode 100644 index 0000000..e815b91 --- /dev/null +++ b/src/components/atoms/forms/fields/checkbox/checkbox.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Checkbox as CheckboxComponent } from './checkbox'; + +const meta = { + component: CheckboxComponent, + title: 'Atoms/Forms/Fields', +} satisfies Meta<typeof CheckboxComponent>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Checkbox: Story = { + args: { + id: 'checkbox', + isChecked: false, + name: 'checkbox', + value: 'checkbox', + }, +}; diff --git a/src/components/atoms/forms/fields/input/input.stories.tsx b/src/components/atoms/forms/fields/input/input.stories.tsx index 4744bc5..af1ca60 100644 --- a/src/components/atoms/forms/fields/input/input.stories.tsx +++ b/src/components/atoms/forms/fields/input/input.stories.tsx @@ -1,237 +1,231 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { type ChangeEvent, useCallback, useState } from 'react'; -import { Input } from './input'; - -/** - * Input - Storybook Meta - */ -export default { - title: 'Atoms/Forms/Fields', +import { useArgs } from '@storybook/client-api'; +import type { Meta, StoryObj } from '@storybook/react'; +import { type ChangeEvent, useCallback } from 'react'; +import { Input, type InputProps } from './input'; + +const meta = { component: Input, + title: 'Atoms/Forms/Fields/Input', + excludeStories: /Controlled.*$/, +} satisfies Meta<typeof Input>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const ControlledInput = ({ value, ...args }: InputProps) => { + const [_, updateArgs] = useArgs<InputProps>(); + + const handleChange = useCallback( + (e: ChangeEvent<HTMLInputElement>) => { + updateArgs({ ...args, value: e.target.value }); + }, + [args, updateArgs] + ); + + return <Input {...args} onChange={handleChange} value={value} />; +}; + +const InputTemplate: Story = { args: { + id: 'default', isDisabled: false, + isReadOnly: false, isRequired: false, + name: 'default', + type: 'text', + value: '', }, - argTypes: { - 'aria-labelledby': { - control: { - type: 'text', - }, - description: 'One or more ids that refers to the field name.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Add classnames to the field.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - id: { - control: { - type: 'text', - }, - description: 'Input id.', - type: { - name: 'string', - required: true, - }, - }, - isDisabled: { - control: { - type: 'boolean', - }, - description: 'Input state: either enabled or disabled.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isRequired: { - control: { - type: 'boolean', - }, - description: 'Determine if the field is required.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - max: { - control: { - type: 'number', - }, - description: 'Maximum value.', - table: { - category: 'Options', - }, - type: { - name: 'number', - required: false, - }, - }, - min: { - control: { - type: 'number', - }, - description: 'Minimum value.', - table: { - category: 'Options', - }, - type: { - name: 'number', - required: false, - }, - }, - name: { - control: { - type: 'text', - }, - description: 'Input name.', - type: { - name: 'string', - required: true, - }, - }, - placeholder: { - control: { - type: 'text', - }, - description: 'A placeholder value.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - step: { - control: { - type: 'number', - }, - description: 'Input incremental values that are valid.', - table: { - category: 'Options', - }, - type: { - name: 'number', - required: false, - }, - }, - type: { - control: { - type: 'select', - }, - description: 'Input type: input type or textarea.', - options: [ - 'datetime-local', - 'email', - 'number', - 'search', - 'tel', - 'text', - 'textarea', - 'time', - 'url', - ], - type: { - name: 'string', - required: true, - }, - }, - value: { - control: { - type: null, - }, - description: 'Input value.', - type: { - name: 'string', - required: true, - }, - }, + render: ControlledInput, +}; + +export const IsEditable: Story = { + ...InputTemplate, + name: 'State: Editable', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of an editable input field', + id: 'editable-input', + name: 'editable', + }, +}; + +export const IsDisabled: Story = { + ...InputTemplate, + name: 'State: Disabled', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a disabled input field', + id: 'disabled-input', + isDisabled: true, + name: 'disabled', + }, +}; + +export const IsReadOnly: Story = { + ...InputTemplate, + name: 'State: Readonly', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a read-only input field', + id: 'readonly-input', + isReadOnly: true, + name: 'readonly', + }, +}; + +export const IsRequired: Story = { + ...InputTemplate, + name: 'State: Required', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a required input field', + id: 'required-input', + isRequired: true, + name: 'required', + }, +}; + +export const DateInput: Story = { + ...InputTemplate, + name: 'Type: Date', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a date field', + id: 'date', + name: 'date', + type: 'date', + }, +}; + +export const DatetimeInput: Story = { + ...InputTemplate, + name: 'Type: Datetime', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a datetime field', + id: 'datetime', + name: 'datetime', + type: 'datetime-local', + }, +}; + +export const EmailInput: Story = { + ...InputTemplate, + name: 'Type: Email', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of an email field', + id: 'email', + name: 'email', + type: 'email', + }, +}; + +export const MonthInput: Story = { + ...InputTemplate, + name: 'Type: Month', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a month field', + id: 'month', + name: 'month', + type: 'month', + }, +}; + +export const NumberInput: Story = { + ...InputTemplate, + name: 'Type: Number', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a number field', + id: 'number', + name: 'number', + type: 'number', + }, +}; + +export const PasswordInput: Story = { + ...InputTemplate, + name: 'Type: Password', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a password field', + id: 'password', + name: 'password', + type: 'password', + }, +}; + +export const SearchInput: Story = { + ...InputTemplate, + name: 'Type: Search', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a search field', + id: 'search', + name: 'search', + type: 'search', + }, +}; + +export const TelInput: Story = { + ...InputTemplate, + name: 'Type: Tel', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a tel field', + id: 'tel', + name: 'tel', + type: 'tel', + }, +}; + +export const TextInput: Story = { + ...InputTemplate, + name: 'Type: Text', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a text field', + id: 'text', + name: 'text', + type: 'text', + }, +}; + +export const TimeInput: Story = { + ...InputTemplate, + name: 'Type: Time', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a time field', + id: 'time', + name: 'time', + type: 'time', + }, +}; + +export const UrlInput: Story = { + ...InputTemplate, + name: 'Type: Url', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of an url field', + id: 'url', + name: 'url', + type: 'url', + }, +}; + +export const WeekInput: Story = { + ...InputTemplate, + name: 'Type: Week', + args: { + ...InputTemplate.args, + 'aria-label': 'Example of a week field', + id: 'week', + name: 'week', + type: 'week', }, -} as ComponentMeta<typeof Input>; - -const Template: ComponentStory<typeof Input> = ({ - value: initialValue, - onChange: _onChange, - ...args -}) => { - const [value, setValue] = useState(initialValue); - const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => { - setValue(e.target.value); - }, []); - - return <Input value={value} onChange={updateValue} {...args} />; -}; - -/** - * Input Story - DateTimeField - */ -export const DateTimeField = Template.bind({}); -DateTimeField.args = { - id: 'field-storybook', - name: 'field-storybook', - type: 'datetime-local', -}; - -/** - * Input Story - EmailField - */ -export const EmailField = Template.bind({}); -EmailField.args = { - id: 'field-storybook', - name: 'field-storybook', - type: 'email', -}; - -/** - * Input Story - NumericField - */ -export const NumericField = Template.bind({}); -NumericField.args = { - id: 'field-storybook', - name: 'field-storybook', - type: 'number', -}; - -/** - * Input Story - TextField - */ -export const TextField = Template.bind({}); -TextField.args = { - id: 'field-storybook', - name: 'field-storybook', - type: 'text', -}; - -/** - * Input Story - TimeField - */ -export const TimeField = Template.bind({}); -TimeField.args = { - id: 'field-storybook', - name: 'field-storybook', - type: 'time', }; diff --git a/src/components/atoms/forms/fields/radio/radio.stories.ts b/src/components/atoms/forms/fields/radio/radio.stories.ts new file mode 100644 index 0000000..c1f5eed --- /dev/null +++ b/src/components/atoms/forms/fields/radio/radio.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Radio as RadioComponent } from './radio'; + +const meta = { + component: RadioComponent, + title: 'Atoms/Forms/Fields', +} satisfies Meta<typeof RadioComponent>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Radio: Story = { + args: { + id: 'radio', + isChecked: false, + name: 'radio', + value: 'radio', + }, +}; diff --git a/src/components/atoms/forms/fields/select/select.stories.tsx b/src/components/atoms/forms/fields/select/select.stories.tsx index fddf354..7884cfb 100644 --- a/src/components/atoms/forms/fields/select/select.stories.tsx +++ b/src/components/atoms/forms/fields/select/select.stories.tsx @@ -1,143 +1,91 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { type ChangeEvent, useCallback, useState } from 'react'; -import { Select as SelectComponent } from './select'; +import type { Meta, StoryObj } from '@storybook/react'; +import { type ChangeEvent, useState, useCallback } from 'react'; +import { Select, type SelectOptions, type SelectProps } from './select'; -const selectOptions = [ - { id: 'option1', name: 'Option 1', value: 'option1' }, - { id: 'option2', name: 'Option 2', value: 'option2' }, - { id: 'option3', name: 'Option 3', value: 'option3' }, -]; +const meta = { + component: Select, + title: 'Atoms/Forms/Fields/Select', + excludeStories: /Controlled.*$/, +} satisfies Meta<typeof Select>; -/** - * Select - Storybook Meta - */ -export default { - title: 'Atoms/Forms/Fields', - component: SelectComponent, +export default meta; + +type Story = StoryObj<typeof meta>; + +export const ControlledSelect = ({ multiple, ...args }: SelectProps) => { + const [selected, setSelected] = useState(multiple === true ? [''] : ''); + const handler = useCallback( + (e: ChangeEvent<HTMLSelectElement>) => { + if (multiple) + setSelected( + Array.from(e.target.selectedOptions, (option) => option.value) + ); + else setSelected(e.target.value); + }, + [multiple] + ); + + return ( + <Select {...args} multiple={multiple} onChange={handler} value={selected} /> + ); +}; + +const options = [ + { id: 'option-1', name: 'Option 1', value: 'option-1' }, + { id: 'option-2', name: 'Option 2', value: 'option-2' }, + { id: 'option-3', name: 'Option 3', value: 'option-3' }, + { id: 'option-4', name: 'Option 4', value: 'option-4' }, + { id: 'option-5', name: 'Option 5', value: 'option-5' }, +] satisfies SelectOptions[]; + +const SelectTemplate: Story = { args: { isDisabled: false, isRequired: false, + multiple: false, + options, + value: '', }, - argTypes: { - 'aria-labelledby': { - control: { - type: 'text', - }, - description: 'One or more ids that refers to the select field name.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Add classnames to the select field.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - id: { - control: { - type: 'text', - }, - description: 'Field id.', - type: { - name: 'string', - required: true, - }, - }, - isDisabled: { - control: { - type: 'boolean', - }, - description: 'Field state: either enabled or disabled.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isRequired: { - control: { - type: 'boolean', - }, - description: 'Determine if the field is required.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - name: { - control: { - type: 'text', - }, - description: 'Field name.', - type: { - name: 'string', - required: true, - }, - }, - options: { - description: 'Select options.', - type: { - name: 'array', - required: true, - value: { - name: 'string', - }, - }, - }, - value: { - control: { - type: null, - }, - description: 'Field value.', - type: { - name: 'string', - required: true, - }, - }, + render: ControlledSelect, +}; + +export const SingleChoice: Story = { + ...SelectTemplate, + args: { + ...SelectTemplate.args, + 'aria-label': 'Example of a default select field', + options, }, -} as ComponentMeta<typeof SelectComponent>; +}; -const Template: ComponentStory<typeof SelectComponent> = ({ - onChange: _onChange, - value, - ...args -}) => { - const [selected, setSelected] = useState(value); - const updateSelection = useCallback((e: ChangeEvent<HTMLSelectElement>) => { - setSelected(e.target.value); - }, []); +export const MultipleChoices: Story = { + ...SelectTemplate, + args: { + ...SelectTemplate.args, + 'aria-label': 'Example of a select field with multiple choices', + multiple: true, + options, + }, +}; - return ( - <SelectComponent {...args} onChange={updateSelection} value={selected} /> - ); +export const IsDisabled: Story = { + ...SelectTemplate, + name: 'State: Disabled', + args: { + ...SelectTemplate.args, + 'aria-label': 'Example of a disabled select field', + isDisabled: true, + options, + }, }; -/** - * Select Story - */ -export const Select = Template.bind({}); -Select.args = { - id: 'storybook-select', - name: 'storybook-select', - options: selectOptions, - value: 'option2', +export const IsRequired: Story = { + ...SelectTemplate, + name: 'State: Required', + args: { + ...SelectTemplate.args, + 'aria-label': 'Example of a required select field', + isRequired: true, + options, + }, }; diff --git a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx index 21214bd..d98dfe3 100644 --- a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx +++ b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx @@ -1,136 +1,86 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { type ChangeEvent, useCallback, useState } from 'react'; -import { TextArea as TextAreaComponent } from './text-area'; +import { useArgs } from '@storybook/client-api'; +import type { Meta, StoryObj } from '@storybook/react'; +import { type ChangeEvent, useCallback } from 'react'; +import { TextArea, type TextAreaProps } from './text-area'; -/** - * TextArea - Storybook Meta - */ -export default { - title: 'Atoms/Forms/Fields', - component: TextAreaComponent, +const meta = { + component: TextArea, + title: 'Atoms/Forms/Fields/TextArea', + excludeStories: /Controlled.*$/, +} satisfies Meta<typeof TextArea>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const ControlledTextArea = ({ value, ...args }: TextAreaProps) => { + const [_, updateArgs] = useArgs<TextAreaProps>(); + + const handleChange = useCallback( + (e: ChangeEvent<HTMLTextAreaElement>) => { + updateArgs({ ...args, value: e.target.value }); + }, + [args, updateArgs] + ); + + return <TextArea {...args} onChange={handleChange} value={value} />; +}; + +const TextAreaTemplate: Story = { args: { + id: 'default', isDisabled: false, + isReadOnly: false, isRequired: false, + name: 'default', + value: '', }, - argTypes: { - 'aria-labelledby': { - control: { - type: 'text', - }, - description: 'One or more ids that refers to the field name.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Add classnames to the field.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - id: { - control: { - type: 'text', - }, - description: 'TextArea id.', - type: { - name: 'string', - required: true, - }, - }, - isDisabled: { - control: { - type: 'boolean', - }, - description: 'TextArea state: either enabled or disabled.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isRequired: { - control: { - type: 'boolean', - }, - description: 'Determine if the field is required.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - name: { - control: { - type: 'text', - }, - description: 'TextArea name.', - type: { - name: 'string', - required: true, - }, - }, - placeholder: { - control: { - type: 'text', - }, - description: 'A placeholder value.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - value: { - control: { - type: null, - }, - description: 'TextArea value.', - type: { - name: 'string', - required: true, - }, - }, + render: ControlledTextArea, +}; + +export const IsEditable: Story = { + ...TextAreaTemplate, + name: 'State: Editable', + args: { + ...TextAreaTemplate.args, + 'aria-label': 'Example of a default text area', + id: 'disabled', + name: 'disabled', }, -} as ComponentMeta<typeof TextAreaComponent>; +}; -const Template: ComponentStory<typeof TextAreaComponent> = ({ - value: initialValue, - onChange: _onChange, - ...args -}) => { - const [value, setValue] = useState(initialValue); - const updateValue = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => { - setValue(e.target.value); - }, []); +export const IsDisabled: Story = { + ...TextAreaTemplate, + name: 'State: Disabled', + args: { + ...TextAreaTemplate.args, + 'aria-label': 'Example of a disabled text area', + id: 'disabled', + isDisabled: true, + name: 'disabled', + }, +}; - return <TextAreaComponent value={value} onChange={updateValue} {...args} />; +export const IsReadOnly: Story = { + ...TextAreaTemplate, + name: 'State: Readonly', + args: { + ...TextAreaTemplate.args, + 'aria-label': 'Example of a read-only text area', + id: 'readonly', + isReadOnly: true, + name: 'readonly', + }, }; -/** - * TextArea Story - TextArea - */ -export const TextArea = Template.bind({}); -TextArea.args = { - id: 'field-storybook', - name: 'field-storybook', +export const IsRequired: Story = { + ...TextAreaTemplate, + name: 'State: Required', + args: { + ...TextAreaTemplate.args, + 'aria-label': 'Example of a required text area', + id: 'required', + isRequired: true, + name: 'required', + }, }; diff --git a/src/components/atoms/forms/fieldset/fieldset.stories.tsx b/src/components/atoms/forms/fieldset/fieldset.stories.tsx index a7d665d..e3dd53e 100644 --- a/src/components/atoms/forms/fieldset/fieldset.stories.tsx +++ b/src/components/atoms/forms/fieldset/fieldset.stories.tsx @@ -1,61 +1,47 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Input } from '../fields'; -import { Legend } from '../legend'; -import { Fieldset as FieldsetComponent } from './fieldset'; - -/** - * Fieldset - Storybook Meta - */ -export default { - title: 'Atoms/Forms', - component: FieldsetComponent, +import { Fieldset, type FieldsetProps } from './fieldset'; + +const meta = { + component: Fieldset, + title: 'Atoms/Forms/Fieldset', +} satisfies Meta<typeof Fieldset>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: {}, +}; + +const FieldsetWithFields = ({ + inputLabel, + ...props +}: FieldsetProps & { inputLabel: string }) => ( + <Fieldset {...props}> + <Input aria-label={inputLabel} id="field" name="field" type="text" /> + </Fieldset> +); + +type WithFieldStory = StoryObj<FieldsetProps & { inputLabel: string }>; + +export const Enabled: WithFieldStory = { + name: 'State: Enabled', args: { + ...Default.args, + inputLabel: 'Example of a field inside an enabled fieldset', isDisabled: false, }, - argTypes: { - isDisabled: { - control: { - type: 'boolean', - }, - description: - 'Define if the fields inside the fieldset should be disabled.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, -} as ComponentMeta<typeof FieldsetComponent>; - -const Template: ComponentStory<typeof FieldsetComponent> = (args) => ( - <FieldsetComponent {...args}> - <div> - <Input - aria-label="A field example" - id="field1" - name="field1" - type="text" - /> - </div> - <div> - <Input - aria-label="Another field example" - id="field2" - name="field2" - type="text" - /> - </div> - </FieldsetComponent> -); + render: FieldsetWithFields, +}; -/** - * Fieldset Story - */ -export const Fieldset = Template.bind({}); -Fieldset.args = { - legend: <Legend>The fieldset legend</Legend>, +export const Disabled: WithFieldStory = { + name: 'State: Disabled', + args: { + ...Default.args, + inputLabel: 'Example of a field inside a disabled fieldset', + isDisabled: true, + }, + render: FieldsetWithFields, }; diff --git a/src/components/atoms/forms/label/label.stories.ts b/src/components/atoms/forms/label/label.stories.ts new file mode 100644 index 0000000..094a432 --- /dev/null +++ b/src/components/atoms/forms/label/label.stories.ts @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Label } from './label'; + +const meta = { + component: Label, + title: 'Atoms/Forms/Label', +} satisfies Meta<typeof Label>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + children: 'A label', + }, +}; + +export const VisuallyHidden: Story = { + args: { + children: 'A visually hidden label', + isHidden: true, + }, +}; + +export const IsRequired: Story = { + name: 'State: Required', + args: { + ...Default.args, + isRequired: true, + }, +}; + +export const SizeSM: Story = { + name: 'Size: Small', + args: { + ...Default.args, + size: 'sm', + }, +}; + +export const SizeMD: Story = { + name: 'Size: Medium', + args: { + ...Default.args, + size: 'md', + }, +}; diff --git a/src/components/atoms/forms/label/label.stories.tsx b/src/components/atoms/forms/label/label.stories.tsx deleted file mode 100644 index 195be97..0000000 --- a/src/components/atoms/forms/label/label.stories.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Label as LabelComponent } from './label'; - -/** - * Label - Storybook Meta - */ -export default { - title: 'Atoms/Forms', - component: LabelComponent, - args: { - isHidden: false, - isRequired: false, - size: 'sm', - }, - argTypes: { - 'aria-label': { - control: { - type: 'text', - }, - description: 'Define an accessible name.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Add classnames to the label.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - children: { - control: { - type: 'text', - }, - description: 'The label body.', - type: { - name: 'string', - required: true, - }, - }, - htmlFor: { - control: { - type: 'text', - }, - description: 'The field id.', - type: { - name: 'string', - required: true, - }, - }, - isHidden: { - control: { - type: 'boolean', - }, - description: 'Set to true if the label should be visually hidden.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isRequired: { - control: { - type: 'boolean', - }, - description: 'Set to true if the field is required.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - size: { - control: { - type: 'select', - }, - description: 'The label size.', - options: ['md', 'sm'], - table: { - category: 'Options', - defaultValue: { summary: 'sm' }, - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof LabelComponent>; - -const Template: ComponentStory<typeof LabelComponent> = ({ - children, - ...args -}) => <LabelComponent {...args}>{children}</LabelComponent>; - -/** - * Label Story - */ -export const Label = Template.bind({}); -Label.args = { - children: 'A label', -}; diff --git a/src/components/atoms/forms/legend/legend.stories.tsx b/src/components/atoms/forms/legend/legend.stories.tsx index b23d889..963fe33 100644 --- a/src/components/atoms/forms/legend/legend.stories.tsx +++ b/src/components/atoms/forms/legend/legend.stories.tsx @@ -1,27 +1,25 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Fieldset } from '../fieldset'; -import { Legend as LegendComponent } from './legend'; +import { Legend, type LegendProps } from './legend'; -/** - * Legend - Storybook Meta - */ -export default { - title: 'Atoms/Forms', - component: LegendComponent, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof LegendComponent>; - -const Template: ComponentStory<typeof LegendComponent> = (args) => ( +const FieldsetWithLegend = (args: LegendProps) => ( <Fieldset> - <LegendComponent {...args} /> + <Legend {...args} /> </Fieldset> ); -/** - * Legend Story - */ -export const Legend = Template.bind({}); -Legend.args = { - children: 'A fieldset legend', +const meta = { + component: Legend, + title: 'Atoms/Forms/Legend', + render: FieldsetWithLegend, +} satisfies Meta<typeof Legend>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + children: 'A legend', + }, }; diff --git a/src/components/atoms/heading/heading.stories.ts b/src/components/atoms/heading/heading.stories.ts new file mode 100644 index 0000000..0bc8c68 --- /dev/null +++ b/src/components/atoms/heading/heading.stories.ts @@ -0,0 +1,69 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Heading } from './heading'; + +const meta = { + component: Heading, + title: 'Atoms/Headings', +} satisfies Meta<typeof Heading>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const HeadingTemplate: Story = { + args: { + children: 'The quick brown fox jumps over a lazy dog', + isFake: false, + level: 2, + }, +}; + +export const H1: Story = { + args: { + ...HeadingTemplate.args, + level: 1, + }, +}; + +export const H2: Story = { + args: { + ...HeadingTemplate.args, + level: 2, + }, +}; + +export const H3: Story = { + args: { + ...HeadingTemplate.args, + level: 3, + }, +}; + +export const H4: Story = { + args: { + ...HeadingTemplate.args, + level: 4, + }, +}; + +export const H5: Story = { + args: { + ...HeadingTemplate.args, + level: 5, + }, +}; + +export const H6: Story = { + args: { + ...HeadingTemplate.args, + level: 6, + }, +}; + +export const FakeH2: Story = { + args: { + ...HeadingTemplate.args, + isFake: true, + level: 2, + }, +}; diff --git a/src/components/atoms/heading/heading.stories.tsx b/src/components/atoms/heading/heading.stories.tsx deleted file mode 100644 index c5ac4a0..0000000 --- a/src/components/atoms/heading/heading.stories.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Heading } from './heading'; - -/** - * Heading - Storybook Meta - */ -export default { - title: 'Atoms/Headings', - component: Heading, - args: { - isFake: false, - }, - argTypes: { - children: { - description: 'Heading body.', - type: { - name: 'string', - required: true, - }, - }, - isFake: { - control: { - type: 'boolean', - }, - description: 'Use an heading element or only its styles.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - level: { - control: { - type: 'number', - min: 1, - max: 6, - }, - description: 'Heading level.', - type: { - name: 'number', - required: true, - }, - }, - }, -} as ComponentMeta<typeof Heading>; - -const Template: ComponentStory<typeof Heading> = (args) => ( - <Heading {...args} /> -); - -/** - * Heading Story - h1 - */ -export const H1 = Template.bind({}); -H1.args = { - children: 'Your title', - level: 1, -}; - -/** - * Heading Story - h2 - */ -export const H2 = Template.bind({}); -H2.args = { - children: 'Your title', - level: 2, -}; - -/** - * Heading Story - h3 - */ -export const H3 = Template.bind({}); -H3.args = { - children: 'Your title', - level: 3, -}; - -/** - * Heading Story - h4 - */ -export const H4 = Template.bind({}); -H4.args = { - children: 'Your title', - level: 4, -}; - -/** - * Heading Story - h5 - */ -export const H5 = Template.bind({}); -H5.args = { - children: 'Your title', - level: 5, -}; - -/** - * Heading Story - h6 - */ -export const H6 = Template.bind({}); -H6.args = { - children: 'Your title', - level: 6, -}; diff --git a/src/components/atoms/images/icons/icon.stories.ts b/src/components/atoms/images/icons/icon.stories.ts new file mode 100644 index 0000000..55b5c31 --- /dev/null +++ b/src/components/atoms/images/icons/icon.stories.ts @@ -0,0 +1,135 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Icon } from './icon'; + +const meta = { + component: Icon, + title: 'Atoms/Images/Icons', +} satisfies Meta<typeof Icon>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const ArrowRight: Story = { + args: { + orientation: 'right', + shape: 'arrow', + }, +}; + +export const ArrowLeft: Story = { + args: { + orientation: 'left', + shape: 'arrow', + }, +}; + +export const ArrowBottom: Story = { + args: { + orientation: 'bottom', + shape: 'arrow', + }, +}; + +export const ArrowTop: Story = { + args: { + orientation: 'top', + shape: 'arrow', + }, +}; + +export const Career: Story = { + args: { + shape: 'career', + }, +}; + +export const CCBySA: Story = { + args: { + shape: 'cc-by-sa', + }, +}; + +export const Cog: Story = { + args: { + shape: 'cog', + }, +}; + +export const Computer: Story = { + args: { + shape: 'computer', + }, +}; + +export const Cross: Story = { + args: { + shape: 'cross', + }, +}; + +export const Envelop: Story = { + args: { + shape: 'envelop', + }, +}; + +export const Feed: Story = { + args: { + shape: 'feed', + }, +}; + +export const Hamburger: Story = { + args: { + shape: 'hamburger', + }, +}; + +export const Help: Story = { + args: { + shape: 'help', + }, +}; + +export const Home: Story = { + args: { + shape: 'home', + }, +}; + +export const MagnifyingGlass: Story = { + args: { + shape: 'magnifying-glass', + }, +}; + +export const Minus: Story = { + args: { + shape: 'minus', + }, +}; + +export const Moon: Story = { + args: { + shape: 'moon', + }, +}; + +export const Plus: Story = { + args: { + shape: 'plus', + }, +}; + +export const PostsStack: Story = { + args: { + shape: 'posts-stack', + }, +}; + +export const Sun: Story = { + args: { + shape: 'sun', + }, +}; diff --git a/src/components/atoms/images/icons/icon.stories.tsx b/src/components/atoms/images/icons/icon.stories.tsx deleted file mode 100644 index 0da568a..0000000 --- a/src/components/atoms/images/icons/icon.stories.tsx +++ /dev/null @@ -1,210 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Icon, type IconProps, type IconShape } from './icon'; - -/** - * Home icon - Storybook Meta - */ -export default { - title: 'Atoms/Images/Icons', - component: Icon, - argTypes: { - shape: { - control: { - type: 'select', - }, - options: [ - 'arrow', - 'career', - 'cc-by-sa', - 'cog', - 'computer', - 'cross', - 'envelop', - 'feed', - 'hamburger', - 'help', - 'home', - 'magnifying-glass', - 'minus', - 'moon', - 'posts-stack', - 'plus', - 'sun', - ], - description: 'Define the icon shape.', - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Icon>; - -const Template: ComponentStory<typeof Icon> = ({ - shape, - ...args -}: IconProps<IconShape>) => <Icon {...args} shape={shape} />; - -/** - * Icon Stories - ArrowRight - */ -export const ArrowRight = Template.bind({}); -ArrowRight.args = { - orientation: 'right', - shape: 'arrow', -}; - -/** - * Icon Stories - ArrowLeft - */ -export const ArrowLeft = Template.bind({}); -ArrowLeft.args = { - orientation: 'left', - shape: 'arrow', -}; - -/** - * Icon Stories - ArrowBottom - */ -export const ArrowBottom = Template.bind({}); -ArrowBottom.args = { - orientation: 'bottom', - shape: 'arrow', -}; - -/** - * Icon Stories - ArrowTop - */ -export const ArrowTop = Template.bind({}); -ArrowTop.args = { - orientation: 'top', - shape: 'arrow', -}; - -/** - * Icon Stories - Career - */ -export const Career = Template.bind({}); -Career.args = { - shape: 'career', -}; - -/** - * Icon Stories - CCBySA - */ -export const CCBySA = Template.bind({}); -CCBySA.args = { - shape: 'cc-by-sa', -}; - -/** - * Icon Stories - Cog - */ -export const Cog = Template.bind({}); -Cog.args = { - shape: 'cog', -}; - -/** - * Icon Stories - Computer - */ -export const Computer = Template.bind({}); -Computer.args = { - shape: 'computer', -}; - -/** - * Icon Stories - Cross - */ -export const Cross = Template.bind({}); -Cross.args = { - shape: 'cross', -}; - -/** - * Icon Stories - Envelop - */ -export const Envelop = Template.bind({}); -Envelop.args = { - shape: 'envelop', -}; - -/** - * Icon Stories - Feed - */ -export const Feed = Template.bind({}); -Feed.args = { - shape: 'feed', -}; - -/** - * Icon Stories - Hamburger - */ -export const Hamburger = Template.bind({}); -Hamburger.args = { - shape: 'hamburger', -}; - -/** - * Icon Stories - Help - */ -export const Help = Template.bind({}); -Help.args = { - shape: 'help', -}; - -/** - * Icon Stories - Home - */ -export const Home = Template.bind({}); -Home.args = { - shape: 'home', -}; - -/** - * Icon Stories - MagnifyingGlass - */ -export const MagnifyingGlass = Template.bind({}); -MagnifyingGlass.args = { - shape: 'magnifying-glass', -}; - -/** - * Icon Stories - Minus - */ -export const Minus = Template.bind({}); -Minus.args = { - shape: 'minus', -}; - -/** - * Icon Stories - Moon - */ -export const Moon = Template.bind({}); -Moon.args = { - shape: 'moon', -}; - -/** - * Icon Stories - Plus - */ -export const Plus = Template.bind({}); -Plus.args = { - shape: 'plus', -}; - -/** - * Icon Stories - PostsStack - */ -export const PostsStack = Template.bind({}); -PostsStack.args = { - shape: 'posts-stack', -}; - -/** - * Icon Stories - Sun - */ -export const Sun = Template.bind({}); -Sun.args = { - shape: 'sun', -}; diff --git a/src/components/atoms/images/logo/logo.stories.ts b/src/components/atoms/images/logo/logo.stories.ts new file mode 100644 index 0000000..4324c80 --- /dev/null +++ b/src/components/atoms/images/logo/logo.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Logo } from './logo'; + +const meta = { + component: Logo, + title: 'Atoms/Images/Logo', +} satisfies Meta<typeof Logo>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: {}, +}; diff --git a/src/components/atoms/images/logo/logo.stories.tsx b/src/components/atoms/images/logo/logo.stories.tsx deleted file mode 100644 index cfccb65..0000000 --- a/src/components/atoms/images/logo/logo.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Logo as LogoComponent } from './logo'; - -/** - * Logo - Storybook Meta - */ -export default { - title: 'Atoms/Images', - component: LogoComponent, - argTypes: { - heading: { - control: { - type: 'text', - }, - description: 'The SVG title.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof LogoComponent>; - -const Template: ComponentStory<typeof LogoComponent> = (args) => ( - <LogoComponent {...args} /> -); - -/** - * Images Stories - Logo - */ -export const Logo = Template.bind({}); diff --git a/src/components/atoms/layout/article/article.stories.ts b/src/components/atoms/layout/article/article.stories.ts new file mode 100644 index 0000000..f0bda0e --- /dev/null +++ b/src/components/atoms/layout/article/article.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Article } from './article'; + +const meta = { + component: Article, + title: 'Atoms/Layout/Article', +} satisfies Meta<typeof Article>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The article contents.', + }, +}; diff --git a/src/components/atoms/layout/article/article.stories.tsx b/src/components/atoms/layout/article/article.stories.tsx deleted file mode 100644 index 4c5b158..0000000 --- a/src/components/atoms/layout/article/article.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Article as ArticleComponent } from './article'; - -/** - * Article - Storybook Meta - */ -export default { - title: 'Atoms/Layout', - component: ArticleComponent, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The contents.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof ArticleComponent>; - -const Template: ComponentStory<typeof ArticleComponent> = (args) => ( - <ArticleComponent {...args} /> -); - -/** - * Layout Stories - Article - */ -export const Article = Template.bind({}); -Article.args = { - children: 'The article content.', -}; diff --git a/src/components/atoms/layout/aside/aside.stories.ts b/src/components/atoms/layout/aside/aside.stories.ts new file mode 100644 index 0000000..c58372a --- /dev/null +++ b/src/components/atoms/layout/aside/aside.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Aside } from './aside'; + +const meta = { + component: Aside, + title: 'Atoms/Layout/Aside', +} satisfies Meta<typeof Aside>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The aside contents.', + }, +}; diff --git a/src/components/atoms/layout/aside/aside.stories.tsx b/src/components/atoms/layout/aside/aside.stories.tsx deleted file mode 100644 index a394d1b..0000000 --- a/src/components/atoms/layout/aside/aside.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Aside as AsideComponent } from './aside'; - -/** - * Aside - Storybook Meta - */ -export default { - title: 'Atoms/Layout', - component: AsideComponent, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The contents.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof AsideComponent>; - -const Template: ComponentStory<typeof AsideComponent> = (args) => ( - <AsideComponent {...args} /> -); - -/** - * Layout Stories - Aside - */ -export const Aside = Template.bind({}); -Aside.args = { - children: 'The aside content.', -}; diff --git a/src/components/atoms/layout/footer/footer.stories.ts b/src/components/atoms/layout/footer/footer.stories.ts new file mode 100644 index 0000000..662524c --- /dev/null +++ b/src/components/atoms/layout/footer/footer.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Footer } from './footer'; + +const meta = { + component: Footer, + title: 'Atoms/Layout/Footer', +} satisfies Meta<typeof Footer>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The footer contents.', + }, +}; diff --git a/src/components/atoms/layout/footer/footer.stories.tsx b/src/components/atoms/layout/footer/footer.stories.tsx deleted file mode 100644 index 0df1647..0000000 --- a/src/components/atoms/layout/footer/footer.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Footer as FooterComponent } from './footer'; - -/** - * Footer - Storybook Meta - */ -export default { - title: 'Atoms/Layout', - component: FooterComponent, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The contents.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof FooterComponent>; - -const Template: ComponentStory<typeof FooterComponent> = (args) => ( - <FooterComponent {...args} /> -); - -/** - * Layout Stories - Footer - */ -export const Footer = Template.bind({}); -Footer.args = { - children: 'The footer content.', -}; diff --git a/src/components/atoms/layout/header/header.stories.ts b/src/components/atoms/layout/header/header.stories.ts new file mode 100644 index 0000000..2afe715 --- /dev/null +++ b/src/components/atoms/layout/header/header.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Header } from './header'; + +const meta = { + component: Header, + title: 'Atoms/Layout/Header', +} satisfies Meta<typeof Header>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The header contents.', + }, +}; diff --git a/src/components/atoms/layout/header/header.stories.tsx b/src/components/atoms/layout/header/header.stories.tsx deleted file mode 100644 index 3d98263..0000000 --- a/src/components/atoms/layout/header/header.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Header as HeaderComponent } from './header'; - -/** - * Header - Storybook Meta - */ -export default { - title: 'Atoms/Layout', - component: HeaderComponent, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The contents.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof HeaderComponent>; - -const Template: ComponentStory<typeof HeaderComponent> = (args) => ( - <HeaderComponent {...args} /> -); - -/** - * Layout Stories - Header - */ -export const Header = Template.bind({}); -Header.args = { - children: 'The header content.', -}; diff --git a/src/components/atoms/layout/main/main.stories.ts b/src/components/atoms/layout/main/main.stories.ts new file mode 100644 index 0000000..79aedbb --- /dev/null +++ b/src/components/atoms/layout/main/main.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Main } from './main'; + +const meta = { + component: Main, + title: 'Atoms/Layout/Main', +} satisfies Meta<typeof Main>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The main contents.', + }, +}; diff --git a/src/components/atoms/layout/main/main.stories.tsx b/src/components/atoms/layout/main/main.stories.tsx deleted file mode 100644 index 6a22ed5..0000000 --- a/src/components/atoms/layout/main/main.stories.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Main as MainComponent } from './main'; - -/** - * Main - Storybook Meta - */ -export default { - title: 'Atoms/Layout', - component: MainComponent, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The content.', - type: { - name: 'string', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the main element.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - id: { - control: { - type: 'text', - }, - description: 'The main element id.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof MainComponent>; - -const Template: ComponentStory<typeof MainComponent> = (args) => ( - <MainComponent {...args} /> -); - -/** - * Layout Stories - Main - */ -export const Main = Template.bind({}); -Main.args = { - children: 'The main content.', -}; diff --git a/src/components/atoms/layout/nav/nav.stories.ts b/src/components/atoms/layout/nav/nav.stories.ts new file mode 100644 index 0000000..6ee4e5e --- /dev/null +++ b/src/components/atoms/layout/nav/nav.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Nav } from './nav'; + +const meta = { + component: Nav, + title: 'Atoms/Layout/Nav', +} satisfies Meta<typeof Nav>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The nav contents.', + }, +}; diff --git a/src/components/atoms/layout/nav/nav.stories.tsx b/src/components/atoms/layout/nav/nav.stories.tsx deleted file mode 100644 index 5649abf..0000000 --- a/src/components/atoms/layout/nav/nav.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Nav as NavComponent } from './nav'; - -/** - * Nav - Storybook Meta - */ -export default { - title: 'Atoms/Layout', - component: NavComponent, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The contents.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof NavComponent>; - -const Template: ComponentStory<typeof NavComponent> = (args) => ( - <NavComponent {...args} /> -); - -/** - * Layout Stories - Nav - */ -export const Nav = Template.bind({}); -Nav.args = { - children: 'The nav content.', -}; diff --git a/src/components/atoms/layout/section/section.stories.ts b/src/components/atoms/layout/section/section.stories.ts new file mode 100644 index 0000000..f8df223 --- /dev/null +++ b/src/components/atoms/layout/section/section.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Section } from './section'; + +const meta = { + component: Section, + title: 'Atoms/Layout/Section', +} satisfies Meta<typeof Section>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The section contents.', + }, +}; diff --git a/src/components/atoms/layout/section/section.stories.tsx b/src/components/atoms/layout/section/section.stories.tsx deleted file mode 100644 index fdc8217..0000000 --- a/src/components/atoms/layout/section/section.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Heading } from '../../heading'; -import { Section as SectionComponent } from './section'; - -/** - * Section - Storybook Meta - */ -export default { - title: 'Atoms/Layout/Section', - component: SectionComponent, - argTypes: { - children: { - description: 'The section contents.', - type: { - name: 'function', - required: true, - }, - }, - }, -} as ComponentMeta<typeof SectionComponent>; - -const Template: ComponentStory<typeof SectionComponent> = (args) => ( - <SectionComponent {...args} /> -); - -/** - * Section Story - */ -export const Section = Template.bind({}); -Section.args = { - children: ( - <> - <Heading level={2}>A section title</Heading> - <div>The body</div> - </> - ), -}; diff --git a/src/components/atoms/layout/time/time.stories.ts b/src/components/atoms/layout/time/time.stories.ts new file mode 100644 index 0000000..6e00a4c --- /dev/null +++ b/src/components/atoms/layout/time/time.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Time } from './time'; + +const meta = { + component: Time, + title: 'Atoms/Layout/Time', +} satisfies Meta<typeof Time>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + date: '2022-03-15 10:44:20', + }, +}; diff --git a/src/components/atoms/layout/time/time.stories.tsx b/src/components/atoms/layout/time/time.stories.tsx deleted file mode 100644 index d534f14..0000000 --- a/src/components/atoms/layout/time/time.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Time } from './time'; - -/** - * Time - Storybook Meta - */ -export default { - title: 'Atoms/Layout/Time', - component: Time, - argTypes: { - date: { - control: { - type: 'text', - }, - description: 'A valid date string.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof Time>; - -const Template: ComponentStory<typeof Time> = (args) => <Time {...args} />; - -/** - * Time Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - date: '2022-03-15 10:44:20', -}; diff --git a/src/components/atoms/links/link/link.stories.tsx b/src/components/atoms/links/link/link.stories.tsx index 0a6a6c5..30b0eab 100644 --- a/src/components/atoms/links/link/link.stories.tsx +++ b/src/components/atoms/links/link/link.stories.tsx @@ -1,178 +1,84 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Link } from './link'; -/** - * Link - Storybook Meta - */ -export default { - title: 'Atoms/Links/Link', +const meta = { component: Link, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The link body.', - type: { - name: 'string', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - href: { - control: { - type: 'text', - }, - description: 'The link target.', - type: { - name: 'string', - required: true, - }, - }, - isDownload: { - control: { - type: 'boolean', - }, - description: 'Determine if the link purpose is to download a file.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isExternal: { - control: { - type: 'boolean', - }, - description: 'Determine if the link is external of the current website.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - lang: { - control: { - type: 'text', - }, - table: { - category: 'Options', - }, - description: 'The target language as code language.', - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Link>; + title: 'Atoms/Links', +} satisfies Meta<typeof Link>; + +export default meta; -const Template: ComponentStory<typeof Link> = (args) => <Link {...args} />; +type Story = StoryObj<typeof meta>; -/** - * Links Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: 'A link', - href: '#', +export const Default: Story = { + args: { + children: 'A link', + href: '#link', + }, }; -/** - * Links Stories - Download - */ -export const DownloadLink = Template.bind({}); -DownloadLink.args = { - children: 'A link to a file', - href: '#', - isDownload: true, - isExternal: false, +export const WithLang: Story = { + args: { + children: 'Github repository', + href: 'https://github.com/ArmandPhilippot/apcom', + lang: 'en', + }, + render: (args) => ( + <> + Go to the <Link {...args} />. + </> + ), }; -/** - * Links Stories - Download link with lang - */ -export const DownloadLinkWithLang = Template.bind({}); -DownloadLinkWithLang.args = { - children: 'A link to a file', - href: '#', - isDownload: true, - isExternal: false, - lang: 'en', +export const DownloadLink: Story = { + args: { + children: 'Download the file', + href: '#file', + isDownload: true, + }, }; -/** - * Links Stories - External - */ -export const ExternalLink = Template.bind({}); -ExternalLink.args = { - children: 'A link', - href: '#', - isDownload: false, - isExternal: true, +export const DownloadLinkWithLang: Story = { + args: { + children: 'Download the file', + href: '#file', + isDownload: true, + lang: 'en', + }, }; -/** - * Links Stories - External download link - */ -export const ExternalDownload = Template.bind({}); -ExternalDownload.args = { - children: 'A link', - href: '#', - isDownload: true, - isExternal: true, +export const ExternalLink: Story = { + args: { + children: 'Go to the Github repository', + href: 'https://github.com/ArmandPhilippot/apcom', + isExternal: true, + }, }; -/** - * Links Stories - External link with Lang - */ -export const ExternalLinkWithLang = Template.bind({}); -ExternalLinkWithLang.args = { - children: 'A link', - href: '#', - isDownload: false, - isExternal: true, - lang: 'en', +export const ExternalLinkWithLang: Story = { + args: { + children: 'Go to the Github repository', + href: 'https://github.com/ArmandPhilippot/apcom', + isExternal: true, + lang: 'en', + }, }; -/** - * Links Stories - External download with lang - */ -export const ExternalDownloadWithLang = Template.bind({}); -ExternalDownloadWithLang.args = { - children: 'A link', - href: '#', - isDownload: true, - isExternal: true, - lang: 'en', +export const ExternalDownloadLink: Story = { + args: { + children: 'Download the file', + href: '#file', + isDownload: true, + isExternal: true, + }, }; -/** - * Links Stories - With Lang - */ -export const LinkLang = Template.bind({}); -LinkLang.args = { - children: 'A link', - href: '#', - isDownload: false, - isExternal: false, - lang: 'en', +export const ExternalDownloadLinkWithLang: Story = { + args: { + children: 'Download the file', + href: '#file', + isDownload: true, + isExternal: true, + lang: 'en', + }, }; diff --git a/src/components/atoms/links/sharing-link/sharing-link.stories.ts b/src/components/atoms/links/sharing-link/sharing-link.stories.ts new file mode 100644 index 0000000..53d2507 --- /dev/null +++ b/src/components/atoms/links/sharing-link/sharing-link.stories.ts @@ -0,0 +1,59 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { SharingLink } from './sharing-link'; + +const meta = { + component: SharingLink, + title: 'Atoms/Links/Share', +} satisfies Meta<typeof SharingLink>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Diaspora: Story = { + args: { + label: 'Share on Diaspora', + medium: 'diaspora', + url: '#diaspora', + }, +}; + +export const Email: Story = { + args: { + label: 'Share by Email', + medium: 'email', + url: '#email', + }, +}; + +export const Facebook: Story = { + args: { + label: 'Share on Facebook', + medium: 'facebook', + url: '#facebook', + }, +}; + +export const JournalDuHacker: Story = { + args: { + label: 'Share on Journal du Hacker', + medium: 'journal-du-hacker', + url: '#journal-du-hacker', + }, +}; + +export const LinkedIn: Story = { + args: { + label: 'Share on LinkedIn', + medium: 'linkedin', + url: '#linkedin', + }, +}; + +export const Twitter: Story = { + args: { + label: 'Share on Twitter', + medium: 'twitter', + url: '#twitter', + }, +}; diff --git a/src/components/atoms/links/sharing-link/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link/sharing-link.stories.tsx deleted file mode 100644 index 932d468..0000000 --- a/src/components/atoms/links/sharing-link/sharing-link.stories.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { SharingLink } from './sharing-link'; - -/** - * SharingLink - Storybook Meta - */ -export default { - title: 'Atoms/Links/Sharing', - component: SharingLink, - argTypes: { - medium: { - control: { - type: 'select', - }, - description: 'The sharing medium.', - options: [ - 'diaspora', - 'email', - 'facebook', - 'journal-du-hacker', - 'linkedin', - 'twitter', - ], - type: { - name: 'string', - required: true, - }, - }, - label: { - control: { - type: 'text', - }, - description: 'An accessible label that describe the link..', - type: { - name: 'string', - required: true, - }, - }, - url: { - control: { - type: 'text', - }, - description: 'The sharing url.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof SharingLink>; - -const Template: ComponentStory<typeof SharingLink> = (args) => ( - <SharingLink {...args} /> -); - -/** - * Sharing Link Stories - Diaspora - */ -export const Diaspora = Template.bind({}); -Diaspora.args = { - label: 'Share on Diaspora', - medium: 'diaspora', - url: '#', -}; - -/** - * Sharing Link Stories - Email - */ -export const Email = Template.bind({}); -Email.args = { - label: 'Share by Email', - medium: 'email', - url: '#', -}; - -/** - * Sharing Link Stories - Facebook - */ -export const Facebook = Template.bind({}); -Facebook.args = { - label: 'Share on Facebook', - medium: 'facebook', - url: '#', -}; - -/** - * Sharing Link Stories - Journal du Hacker - */ -export const JournalDuHacker = Template.bind({}); -JournalDuHacker.args = { - label: 'Share on Journal du Hacker', - medium: 'journal-du-hacker', - url: '#', -}; - -/** - * Sharing Link Stories - LinkedIn - */ -export const LinkedIn = Template.bind({}); -LinkedIn.args = { - label: 'Share on LinkedIn', - medium: 'linkedin', - url: '#', -}; - -/** - * Sharing Link Stories - Twitter - */ -export const Twitter = Template.bind({}); -Twitter.args = { - label: 'Share on Twitter', - medium: 'twitter', - url: '#', -}; diff --git a/src/components/atoms/links/social-link/social-link.stories.ts b/src/components/atoms/links/social-link/social-link.stories.ts new file mode 100644 index 0000000..f7f4302 --- /dev/null +++ b/src/components/atoms/links/social-link/social-link.stories.ts @@ -0,0 +1,43 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { SocialLink } from './social-link'; + +const meta = { + component: SocialLink, + title: 'Atoms/Links/Social', +} satisfies Meta<typeof SocialLink>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Github: Story = { + args: { + icon: 'Github', + label: 'Github profile', + url: '#github', + }, +}; + +export const Gitlab: Story = { + args: { + icon: 'Gitlab', + label: 'Gitlab profile', + url: '#gitlab', + }, +}; + +export const LinkedIn: Story = { + args: { + icon: 'LinkedIn', + label: 'LinkedIn profile', + url: '#linkedin', + }, +}; + +export const Twitter: Story = { + args: { + icon: 'Twitter', + label: 'Twitter profile', + url: '#twitter', + }, +}; diff --git a/src/components/atoms/links/social-link/social-link.stories.tsx b/src/components/atoms/links/social-link/social-link.stories.tsx deleted file mode 100644 index cfb4ac7..0000000 --- a/src/components/atoms/links/social-link/social-link.stories.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { SocialLink } from './social-link'; - -/** - * SocialLink - Storybook Meta - */ -export default { - title: 'Atoms/Links/Social', - component: SocialLink, - argTypes: { - url: { - control: { - type: null, - }, - description: 'Social profile url.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof SocialLink>; - -const Template: ComponentStory<typeof SocialLink> = (args) => ( - <SocialLink {...args} /> -); - -/** - * Social Link Stories - Github - */ -export const Github = Template.bind({}); -Github.args = { - icon: 'Github', - label: 'Github profile', - url: '#', -}; - -/** - * Social Link Stories - Gitlab - */ -export const Gitlab = Template.bind({}); -Gitlab.args = { - icon: 'Gitlab', - label: 'Gitlab profile', - url: '#', -}; - -/** - * Social Link Stories - LinkedIn - */ -export const LinkedIn = Template.bind({}); -LinkedIn.args = { - icon: 'LinkedIn', - label: 'LinkedIn profile', - url: '#', -}; - -/** - * Social Link Stories - Twitter - */ -export const Twitter = Template.bind({}); -Twitter.args = { - icon: 'Twitter', - label: 'Twitter profile', - url: '#', -}; diff --git a/src/components/atoms/lists/description-list/description-list.stories.tsx b/src/components/atoms/lists/description-list/description-list.stories.tsx index d051fcd..65efc28 100644 --- a/src/components/atoms/lists/description-list/description-list.stories.tsx +++ b/src/components/atoms/lists/description-list/description-list.stories.tsx @@ -1,150 +1,270 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Description } from './description'; import { DescriptionList } from './description-list'; import { Group } from './group'; import { Term } from './term'; -/** - * DescriptionList - Storybook Meta - */ -export default { - title: 'Atoms/Lists/DescriptionList', +const meta = { component: DescriptionList, + title: 'Atoms/Lists/Description List', +} satisfies Meta<typeof DescriptionList>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const Default: Story = { + args: { + children: [ + <Term key="term">A term</Term>, + <Description key="description">A description of the term.</Description>, + ], + }, +}; + +export const SingleTermSingleDescription: Story = { + args: { + ...Default.args, + }, +}; + +export const MultipleTermsSingleDescription: Story = { + args: { + ...Default.args, + children: [ + <Term key="term-1">First term</Term>, + <Term key="term-2">Second term</Term>, + <Term key="term-3">Third term</Term>, + <Description key="description-1">Description of the terms</Description>, + ], + }, +}; + +export const SingleTermMultipleDescriptions: Story = { + args: { + ...Default.args, + children: [ + <Term key="term-1">A term</Term>, + <Description key="description-1"> + First description of the term + </Description>, + <Description key="description-2"> + Second description of the term + </Description>, + <Description key="description-3"> + Third description of the term + </Description>, + ], + }, +}; + +export const MultipleTermsMultipleDescriptions: Story = { + args: { + ...Default.args, + children: [ + <Term key="term-1">First term</Term>, + <Description key="description-1"> + Description of the first term + </Description>, + <Term key="term-2">Second term</Term>, + <Term key="term-2-alternative">Alternative of second term</Term>, + <Description key="description-2"> + Description of the second term + </Description>, + <Term key="term-3">Third term</Term>, + <Description key="first-description-3"> + First description of the third term + </Description>, + <Description key="second-description-3"> + Second description of the third term + </Description>, + ], + }, +}; + +export const GroupOfMultipleTermsMultipleDescriptions: Story = { + args: { + ...Default.args, + children: [ + <Group key="group-1"> + <Term>First term</Term> + <Description>Description of the first term</Description> + </Group>, + <Group key="group-2"> + <Term>Second term</Term> + <Term>Alternative of second term</Term> + <Description>Description of the second term</Description> + </Group>, + <Group key="group-3"> + <Term>Third term</Term> + <Description>First description of the third term</Description> + <Description>Second description of the third term</Description> + </Group>, + ], + }, +}; + +export const SpacingXXSWithoutGroup: Story = { + name: 'Spacing: Double extra-small (without group)', + args: { + ...MultipleTermsMultipleDescriptions.args, + spacing: '2xs', + }, +}; + +export const SpacingXSWithoutGroup: Story = { + name: 'Spacing: Extra-small (without group)', + args: { + ...MultipleTermsMultipleDescriptions.args, + spacing: 'xs', + }, +}; + +export const SpacingSMWithoutGroup: Story = { + name: 'Spacing: Small (without group)', + args: { + ...MultipleTermsMultipleDescriptions.args, + spacing: 'sm', + }, +}; + +export const SpacingMDWithoutGroup: Story = { + name: 'Spacing: Medium (without group)', + args: { + ...MultipleTermsMultipleDescriptions.args, + spacing: 'md', + }, +}; + +export const SpacingLGWithoutGroup: Story = { + name: 'Spacing: Large (without group)', + args: { + ...MultipleTermsMultipleDescriptions.args, + spacing: 'lg', + }, +}; + +export const SpacingXLWithoutGroup: Story = { + name: 'Spacing: Extra-large (without group)', args: { - isInline: false, - }, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the list wrapper', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof DescriptionList>; - -const Template: ComponentStory<typeof DescriptionList> = (args) => ( - <DescriptionList {...args} /> -); - -/** - * Description List Stories - Single term, single description - */ -export const SingleTermSingleDescription = Template.bind({}); -SingleTermSingleDescription.args = { - children: ( - <> - <Term>A term</Term> - <Description>A description of the term.</Description> - </> - ), -}; - -/** - * Description List Stories - Multiple terms, single description - */ -export const MultipleTermsSingleDescription = Template.bind({}); -MultipleTermsSingleDescription.args = { - children: ( - <> - <Term>A first term</Term> - <Term>A second term</Term> - <Term>A third term</Term> - <Description>A description of the term.</Description> - </> - ), -}; - -/** - * Description List Stories - Single term, multiple descriptions - */ -export const SingleTermMultipleDescriptions = Template.bind({}); -SingleTermMultipleDescriptions.args = { - children: ( - <> - <Term>A term</Term> - <Description>A first description of the term.</Description> - <Description>A second description of the term.</Description> - <Description>A third description of the term.</Description> - </> - ), -}; - -/** - * Description List Stories - Multiple terms, multiple descriptions - */ -export const MultipleTermsMultipleDescriptions = Template.bind({}); -MultipleTermsMultipleDescriptions.args = { - children: ( - <> - <Term>A first term</Term> - <Term>A second term</Term> - <Term>A third term</Term> - <Description>A first description of the term.</Description> - <Description>A second description of the term.</Description> - <Description>A third description of the term.</Description> - </> - ), -}; - -/** - * Description List Stories - Group of terms & descriptions - */ -export const GroupOfTermsDescriptions = Template.bind({}); -GroupOfTermsDescriptions.args = { - children: ( - <> - <Group> + ...MultipleTermsMultipleDescriptions.args, + spacing: 'xl', + }, +}; + +export const SpacingXXLWithoutGroup: Story = { + name: 'Spacing: Double extra-large (without group)', + args: { + ...MultipleTermsMultipleDescriptions.args, + spacing: '2xl', + }, +}; + +export const SpacingXXSWithGroup: Story = { + name: 'Spacing: Double extra-small (with group)', + args: { + ...GroupOfMultipleTermsMultipleDescriptions.args, + spacing: '2xs', + }, +}; + +export const SpacingXSWithGroup: Story = { + name: 'Spacing: Extra-small (with group)', + args: { + ...GroupOfMultipleTermsMultipleDescriptions.args, + spacing: 'xs', + }, +}; + +export const SpacingSMWithGroup: Story = { + name: 'Spacing: Small (with group)', + args: { + ...GroupOfMultipleTermsMultipleDescriptions.args, + spacing: 'sm', + }, +}; + +export const SpacingMDWithGroup: Story = { + name: 'Spacing: Medium (with group)', + args: { + ...GroupOfMultipleTermsMultipleDescriptions.args, + spacing: 'md', + }, +}; + +export const SpacingLGWithGroup: Story = { + name: 'Spacing: Large (with group)', + args: { + ...GroupOfMultipleTermsMultipleDescriptions.args, + spacing: 'lg', + }, +}; + +export const SpacingXLWithGroup: Story = { + name: 'Spacing: Extra-large (with group)', + args: { + ...GroupOfMultipleTermsMultipleDescriptions.args, + spacing: 'xl', + }, +}; + +export const SpacingXXLWithGroup: Story = { + name: 'Spacing: Double extra-large (with group)', + args: { + ...GroupOfMultipleTermsMultipleDescriptions.args, + spacing: '2xl', + }, +}; + +export const InlinedWithoutGroups: Story = { + name: 'Alignment: inlined without groups', + args: { + ...Default.args, + children: [ + <Term key="term1">A term</Term>, + <Description key="description1">A description.</Description>, + <Term key="term2">Another term</Term>, + <Description key="description2">Another description.</Description>, + ], + isInline: true, + spacing: 'xs', + }, +}; + +export const InlinedWithGroups: Story = { + name: 'Alignment: inlined with groups', + args: { + ...Default.args, + children: [ + <Group key="group1"> <Term>A term</Term> - <Description>A description of the term.</Description> - </Group> - <Group> + <Description>A description.</Description> + </Group>, + <Group key="group2"> <Term>Another term</Term> - <Description>A description of the other term.</Description> - </Group> - </> - ), -}; - -/** - * Description List Stories - Inlined list of term and descriptions - */ -export const InlinedList = Template.bind({}); -InlinedList.args = { - children: ( - <> - <Term>A term:</Term> - <Description>A first description of the term.</Description> - <Description>A second description of the term.</Description> - <Description>A third description of the term.</Description> - </> - ), - isInline: true, - spacing: 'xs', -}; - -/** - * Description List Stories - Inlined group of terms & descriptions - */ -export const InlinedGroupOfTermsDescriptions = Template.bind({}); -InlinedGroupOfTermsDescriptions.args = { - children: ( - <> - <Group isInline spacing="2xs"> - <Term>A term:</Term> - <Description>A description of the term.</Description> - </Group> - <Group isInline spacing="2xs"> - <Term>Another term:</Term> - <Description>A description of the other term.</Description> - </Group> - </> - ), + <Description>Another description.</Description> + </Group>, + ], + isInline: true, + spacing: 'xs', + }, +}; + +export const InlinedWithInlinedGroups: Story = { + name: 'Alignment: inlined with inlined groups', + args: { + ...Default.args, + children: [ + <Group key="group1" isInline spacing="xs"> + <Term>A term</Term> + <Description>A description.</Description> + </Group>, + <Group key="group2" isInline spacing="xs"> + <Term>Another term</Term> + <Description>Another description.</Description> + </Group>, + ], + isInline: true, + spacing: 'xs', + }, }; diff --git a/src/components/atoms/lists/list/list.stories.tsx b/src/components/atoms/lists/list/list.stories.tsx index 538947a..6e7d254 100644 --- a/src/components/atoms/lists/list/list.stories.tsx +++ b/src/components/atoms/lists/list/list.stories.tsx @@ -1,196 +1,140 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { List, type ListProps } from './list'; +import type { Meta, StoryObj } from '@storybook/react'; +import { List } from './list'; import { ListItem } from './list-item'; -/** - * List - Storybook Meta - */ -export default { - title: 'Atoms/Lists', +const meta = { component: List, - args: {}, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the list wrapper', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof List>; + title: 'Atoms/Lists/List', +} satisfies Meta<typeof List>; + +export default meta; + +type Story = StoryObj<typeof meta>; -const Template: ComponentStory<typeof List> = < - O extends boolean, - H extends boolean, ->( - args: ListProps<O, H> -) => <List {...args} />; +export const Default: Story = { + args: { + children: [ + <ListItem key="item-1">Item 1</ListItem>, + <ListItem key="item-2">Item 2</ListItem>, + <ListItem key="item-3">Item 3</ListItem>, + ], + }, +}; -/** - * List Stories - Hierarchical list - */ -export const Hierarchical = Template.bind({}); -Hierarchical.args = { - children: [ - <ListItem key="item-1"> - Item 1 - <List isHierarchical isOrdered> - <ListItem>Subitem 1</ListItem> - <ListItem>Subitem 2</ListItem> - </List> - </ListItem>, - <ListItem key="item-2"> - Item 2 - <List isHierarchical isOrdered> - <ListItem>Subitem 1</ListItem> - <ListItem> - Subitem 2 - <List isHierarchical isOrdered> - <ListItem>Nested item 1</ListItem> - <ListItem>Nested item 2</ListItem> - </List> - </ListItem> - <ListItem>Subitem 3</ListItem> - </List> - </ListItem>, - <ListItem key="item-3">Item 3</ListItem>, - ], - isHierarchical: true, +export const OrderedList: Story = { + args: { + ...Default.args, + isOrdered: true, + }, }; -/** - * List Stories - Ordered list - */ -export const Ordered = Template.bind({}); -Ordered.args = { - children: [ - <ListItem key="item-1"> - Item 1 - <List isOrdered> - <ListItem>Subitem 1</ListItem> - <ListItem>Subitem 2</ListItem> - </List> - </ListItem>, - <ListItem key="item-2"> - Item 2 - <List isOrdered> - <ListItem>Subitem 1</ListItem> - <ListItem> - Subitem 2 - <List isOrdered> - <ListItem>Nested item 1</ListItem> - <ListItem>Nested item 2</ListItem> - </List> - </ListItem> - <ListItem>Subitem 3</ListItem> - </List> - </ListItem>, - <ListItem key="item-3">Item 3</ListItem>, - ], - isOrdered: true, +export const UnorderedList: Story = { + args: { + ...Default.args, + isOrdered: false, + }, }; -/** - * List Stories - Unordered list - */ -export const Unordered = Template.bind({}); -Unordered.args = { - children: [ - <ListItem key="item-1"> - Item 1 - <List> - <ListItem>Subitem 1</ListItem> - <ListItem>Subitem 2</ListItem> - </List> - </ListItem>, - <ListItem key="item-2"> - Item 2 - <List isOrdered> - <ListItem>Subitem 1</ListItem> - <ListItem> - Subitem 2 - <List> - <ListItem>Nested item 1</ListItem> - <ListItem>Nested item 2</ListItem> - </List> - </ListItem> - <ListItem>Subitem 3</ListItem> - </List> - </ListItem>, - <ListItem key="item-3">Item 3</ListItem>, - ], +export const Nested: Story = { + args: { + ...Default.args, + children: [ + <ListItem key="item-1">Item 1</ListItem>, + <ListItem key="item-2"> + Item 2 + <List isOrdered> + <ListItem>Nested item 1</ListItem> + <ListItem>Nested item 2</ListItem> + <ListItem> + Nested item 3 + <List> + <ListItem>Deeper item 1</ListItem> + <ListItem>Deeper item 2</ListItem> + <ListItem>Deeper item 3</ListItem> + </List> + </ListItem> + </List> + </ListItem>, + <ListItem key="item-3">Item 3</ListItem>, + ], + isOrdered: false, + }, }; -const items = [ - { id: 'item-1', label: 'Item 1' }, - { id: 'item-2', label: 'Item 2' }, - { - id: 'item-3', - label: ( - <> - Item 3 - <List> +export const HierarchicalList: Story = { + args: { + ...OrderedList.args, + children: [ + <ListItem key="item-1"> + Item 1 + <List isHierarchical isOrdered> <ListItem>Subitem 1</ListItem> <ListItem>Subitem 2</ListItem> </List> - </> - ), + </ListItem>, + <ListItem key="item-2"> + Item 2 + <List isHierarchical isOrdered> + <ListItem>Subitem 1</ListItem> + <ListItem> + Subitem 2 + <List isHierarchical isOrdered> + <ListItem>Nested item 1</ListItem> + <ListItem>Nested item 2</ListItem> + </List> + </ListItem> + <ListItem>Subitem 3</ListItem> + </List> + </ListItem>, + <ListItem key="item-3">Item 3</ListItem>, + ], + isHierarchical: true, }, - { id: 'item-4', label: 'Item 4' }, - { id: 'item-5', label: 'Item 5' }, -]; +}; -/** - * List Stories - Inline and ordered list - */ -export const InlineOrdered = Template.bind({}); -InlineOrdered.args = { - children: items.map((item) => ( - <ListItem key={item.id}>{item.label}</ListItem> - )), - isInline: true, - isOrdered: true, - spacing: 'sm', +export const WithMarker: Story = { + args: { + ...Default.args, + hideMarker: false, + }, }; -/** - * List Stories - Inline and unordered list - */ -export const InlineUnordered = Template.bind({}); -InlineUnordered.args = { - children: items.map((item) => ( - <ListItem key={item.id}>{item.label}</ListItem> - )), - isInline: true, - spacing: 'sm', +export const WithoutMarker: Story = { + args: { + ...Default.args, + hideMarker: true, + }, }; -/** - * List Stories - Ordered list without marker - */ -export const OrderedHideMarker = Template.bind({}); -OrderedHideMarker.args = { - children: items.map((item) => ( - <ListItem key={item.id}>{item.label}</ListItem> - )), - hideMarker: true, - isOrdered: true, +export const InlineList: Story = { + args: { + ...Default.args, + children: [ + <ListItem key="item-1">Item 1</ListItem>, + <ListItem key="sep-1">{'>'}</ListItem>, + <ListItem key="item-2">Item 2</ListItem>, + <ListItem key="sep-2">{'>'}</ListItem>, + <ListItem key="item-3">Item 3</ListItem>, + ], + hideMarker: true, + isInline: true, + spacing: 'xs', + }, }; -/** - * List Stories - Unordered list without marker - */ -export const UnorderedHideMarker = Template.bind({}); -UnorderedHideMarker.args = { - children: items.map((item) => ( - <ListItem key={item.id}>{item.label}</ListItem> - )), - hideMarker: true, +export const ListInInlineList: Story = { + args: { + ...InlineList.args, + children: [ + <ListItem key="item-1">Item 1</ListItem>, + <ListItem key="item-2"> + Item 2 + <List> + <ListItem>Nested item 1</ListItem> + <ListItem>Nested item 2</ListItem> + </List> + </ListItem>, + <ListItem key="item-3">Item 3</ListItem>, + ], + }, }; diff --git a/src/components/atoms/loaders/progress-bar/progress-bar.stories.ts b/src/components/atoms/loaders/progress-bar/progress-bar.stories.ts new file mode 100644 index 0000000..82f6f18 --- /dev/null +++ b/src/components/atoms/loaders/progress-bar/progress-bar.stories.ts @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ProgressBar } from './progress-bar'; + +const meta = { + component: ProgressBar, + title: 'Atoms/Loaders/ProgressBar', +} satisfies Meta<typeof ProgressBar>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const max = 50; +const current = 10; +const label = `${current} loaded out of a total of ${max}`; + +export const Example: Story = { + args: { + current, + label, + max, + }, +}; diff --git a/src/components/atoms/loaders/progress-bar/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar/progress-bar.stories.tsx deleted file mode 100644 index fb600fb..0000000 --- a/src/components/atoms/loaders/progress-bar/progress-bar.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ProgressBar as ProgressBarComponent } from './progress-bar'; - -/** - * ProgressBar - Storybook Meta - */ -export default { - title: 'Atoms/Loaders', - component: ProgressBarComponent, - argTypes: { - current: { - control: { - type: 'number', - }, - description: 'The current value.', - type: { - name: 'number', - required: true, - }, - }, - label: { - control: { - type: 'text', - }, - description: 'The progress bar label.', - type: { - name: 'string', - required: true, - }, - }, - max: { - control: { - type: 'number', - }, - description: 'The maximal value.', - type: { - name: 'number', - required: true, - }, - }, - }, -} as ComponentMeta<typeof ProgressBarComponent>; - -const Template: ComponentStory<typeof ProgressBarComponent> = (args) => ( - <ProgressBarComponent {...args} /> -); - -const max = 50; -const current = 10; -const label = `${current} loaded out of a total of ${max}`; - -/** - * Loaders Stories - Progress bar - */ -export const ProgressBar = Template.bind({}); -ProgressBar.args = { - current, - label, - max, -}; diff --git a/src/components/atoms/loaders/spinner/spinner.stories.ts b/src/components/atoms/loaders/spinner/spinner.stories.ts new file mode 100644 index 0000000..63d7f21 --- /dev/null +++ b/src/components/atoms/loaders/spinner/spinner.stories.ts @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Spinner } from './spinner'; + +const meta = { + component: Spinner, + title: 'Atoms/Loaders/Spinner', +} satisfies Meta<typeof Spinner>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + 'aria-label': 'A spinner example', + }, +}; + +export const WithTextOnBottom: Story = { + args: { + children: 'A spinner example', + position: 'bottom', + }, +}; + +export const WithTextOnLeft: Story = { + args: { + children: 'A spinner example', + position: 'left', + }, +}; + +export const WithTextOnRight: Story = { + args: { + children: 'A spinner example', + position: 'right', + }, +}; + +export const WithTextOnTop: Story = { + args: { + children: 'A spinner example', + position: 'top', + }, +}; diff --git a/src/components/atoms/loaders/spinner/spinner.stories.tsx b/src/components/atoms/loaders/spinner/spinner.stories.tsx deleted file mode 100644 index e9dfae4..0000000 --- a/src/components/atoms/loaders/spinner/spinner.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Spinner as SpinnerComponent } from './spinner'; - -/** - * Spinner - Storybook Meta - */ -export default { - title: 'Atoms/Loaders', - component: SpinnerComponent, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'Loading message.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof SpinnerComponent>; - -const Template: ComponentStory<typeof SpinnerComponent> = (args) => ( - <SpinnerComponent {...args} /> -); - -/** - * Loaders Stories - Spinner - */ -export const Spinner = Template.bind({}); -Spinner.args = { - children: 'Submitting...', -}; diff --git a/src/components/atoms/notice/notice.stories.ts b/src/components/atoms/notice/notice.stories.ts new file mode 100644 index 0000000..1f0723b --- /dev/null +++ b/src/components/atoms/notice/notice.stories.ts @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Notice } from './notice'; + +const meta = { + component: Notice, + title: 'Atoms/Notice', +} satisfies Meta<typeof Notice>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const ErrorKind: Story = { + args: { + children: 'Nisi provident sapiente.', + kind: 'error', + }, +}; + +export const InfoKind: Story = { + args: { + children: 'Nisi provident sapiente.', + kind: 'info', + }, +}; + +export const SuccessKind: Story = { + args: { + children: 'Nisi provident sapiente.', + kind: 'success', + }, +}; + +export const WarningKind: Story = { + args: { + children: 'Nisi provident sapiente.', + kind: 'warning', + }, +}; diff --git a/src/components/atoms/notice/notice.stories.tsx b/src/components/atoms/notice/notice.stories.tsx deleted file mode 100644 index 60d97d9..0000000 --- a/src/components/atoms/notice/notice.stories.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Notice as NoticeComponent } from './notice'; - -/** - * Notice - Storybook Meta - */ -export default { - title: 'Atoms/Notice', - component: NoticeComponent, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the notice wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - kind: { - control: { - type: 'select', - }, - description: 'The notice kind.', - options: ['error', 'info', 'success', 'warning'], - type: { - name: 'string', - required: true, - }, - }, - children: { - control: { - type: 'text', - }, - description: 'The notice body.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof NoticeComponent>; - -const Template: ComponentStory<typeof NoticeComponent> = (args) => ( - <NoticeComponent {...args} /> -); - -/** - * Notice stories - Error - */ -export const ErrorKind = Template.bind({}); -ErrorKind.args = { - children: 'Nisi provident sapiente.', - kind: 'error', -}; - -/** - * Notice stories - Info - */ -export const InfoKind = Template.bind({}); -InfoKind.args = { - children: 'Nisi provident sapiente.', - kind: 'info', -}; - -/** - * Notice stories - Success - */ -export const SuccessKind = Template.bind({}); -SuccessKind.args = { - children: 'Nisi provident sapiente.', - kind: 'success', -}; - -/** - * Notice stories - Warning - */ -export const WarningKind = Template.bind({}); -WarningKind.args = { - children: 'Nisi provident sapiente.', - kind: 'warning', -}; diff --git a/src/components/atoms/overlay/overlay.stories.tsx b/src/components/atoms/overlay/overlay.stories.tsx index f9c478c..5c56d6a 100644 --- a/src/components/atoms/overlay/overlay.stories.tsx +++ b/src/components/atoms/overlay/overlay.stories.tsx @@ -1,63 +1,65 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useToggle } from '../../../utils/hooks'; +import type { Meta, StoryObj } from '@storybook/react'; +import { useCallback, useState } from 'react'; import { Button } from '../buttons'; -import { Overlay } from './overlay'; +import { Overlay, type OverlayProps } from './overlay'; -/** - * Overlay - Storybook Meta - */ -export default { - title: 'Atoms/Overlay', - component: Overlay, - argTypes: {}, -} as ComponentMeta<typeof Overlay>; +type OverlayTemplateProps = OverlayProps & { + isActive?: boolean; +}; -const Template: ComponentStory<typeof Overlay> = ({ isVisible, ...props }) => { - const [isActive, toggle] = useToggle(isVisible); +const OverlayTemplate = ({ + isActive: active = false, + ...props +}: OverlayTemplateProps) => { + const [isActive, setIsActive] = useState(active); + + const handleClick = useCallback(() => { + setIsActive((prev) => !prev); + }, []); return ( <div> <p> - Itaque reprehenderit sint rerum placeat et sapiente similique ut - distinctio. Libero illo reprehenderit qui quaerat dolorem. Officiis - asperiores sapiente eaque. Aut numquam porro quasi delectus excepturi - aut eaque et. Commodi et necessitatibus provident blanditiis rem qui - atque. + Ad eos id. In nihil fugit nisi dolorem numquam fuga aut quod voluptatem. + Dicta id nisi quia laboriosam sit ipsam deserunt ex. Omnis quia error + ipsum ea numquam quia veniam omnis voluptatem. Dolor corrupti mollitia + quod fugit est animi totam sed. </p> <p> - Aut architecto vitae dolor hic explicabo iure quia quae beatae. - Exercitationem nulla dignissimos doloribus sunt at nisi. A modi quasi - est sed quas repellendus vel sed dolores. Sed neque aperiam adipisci eos - autem. Libero omnis quis aut quas omnis magni harum et. + Eum et laudantium eaque cumque. Voluptatem voluptas fugit incidunt quos + voluptatibus velit et voluptatem laboriosam. Et voluptas ut quia + mollitia eum voluptatem. Similique cum ratione ea illo autem facilis + laudantium. </p> - <Button onClick={toggle}>Open overlay</Button> - <Overlay {...props} isVisible={isActive} onClick={toggle} /> + <Button onClick={handleClick}>Open overlay</Button> + {isActive ? <Overlay {...props} onClick={handleClick} /> : null} </div> ); }; -/** - * Overlay Stories - Hidden - */ -export const Hidden = Template.bind({}); -Hidden.args = { - children: ( - <div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}> - Some modal contents. - </div> - ), - isVisible: false, -}; +const meta = { + title: 'Atoms/Overlay', + component: Overlay, + render: OverlayTemplate, +} satisfies Meta<typeof Overlay>; -/** - * Overlay Stories - Visible - */ -export const Visible = Template.bind({}); -Visible.args = { - children: ( - <div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}> - Some modal contents. - </div> - ), - isVisible: true, +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + children: ( + <div + style={{ + background: '#FFF', + padding: '1rem', + margin: '1rem', + }} + > + The modal contents. + </div> + ), + isActive: true, + }, }; diff --git a/src/components/atoms/sidebar/sidebar.stories.ts b/src/components/atoms/sidebar/sidebar.stories.ts new file mode 100644 index 0000000..f3883b9 --- /dev/null +++ b/src/components/atoms/sidebar/sidebar.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Sidebar } from './sidebar'; + +const meta = { + component: Sidebar, + title: 'Atoms/Sidebar', +} satisfies Meta<typeof Sidebar>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'Some widgets.', + }, +}; diff --git a/src/components/atoms/sidebar/sidebar.stories.tsx b/src/components/atoms/sidebar/sidebar.stories.tsx deleted file mode 100644 index 4debb41..0000000 --- a/src/components/atoms/sidebar/sidebar.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Sidebar as SidebarComponent } from './sidebar'; - -/** - * Sidebar - Storybook Meta - */ -export default { - title: 'Atoms/Layout', - component: SidebarComponent, - argTypes: { - 'aria-label': { - control: { - type: 'text', - }, - description: 'An accessible name for the sidebar.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - children: { - control: { - type: 'text', - }, - description: 'The sidebar content.', - type: { - name: 'string', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the aside element.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof SidebarComponent>; - -const Template: ComponentStory<typeof SidebarComponent> = (args) => ( - <SidebarComponent {...args} /> -); - -/** - * Layout Stories - Sidebar - */ -export const Sidebar = Template.bind({}); -Sidebar.args = { - children: 'Some widgets.', -}; diff --git a/src/components/atoms/visually-hidden/visually-hidden.stories.tsx b/src/components/atoms/visually-hidden/visually-hidden.stories.tsx index 24ac921..f2868fd 100644 --- a/src/components/atoms/visually-hidden/visually-hidden.stories.tsx +++ b/src/components/atoms/visually-hidden/visually-hidden.stories.tsx @@ -1,48 +1,30 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Link } from '../links'; +import type { Meta, StoryObj } from '@storybook/react'; import { VisuallyHidden } from './visually-hidden'; -/** - * Sidebar - Storybook Meta - */ -export default { - title: 'Atoms/VisuallyHidden', +const meta = { component: VisuallyHidden, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The contents to visually hide.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof VisuallyHidden>; + title: 'Atoms/Visually Hidden', +} satisfies Meta<typeof VisuallyHidden>; + +export default meta; -const Template: ComponentStory<typeof VisuallyHidden> = (args) => ( - <VisuallyHidden {...args} /> -); +type Story = StoryObj<typeof meta>; -/** - * VisuallyHidden Stories - Not focusable - */ -export const NotFocusable = Template.bind({}); -NotFocusable.args = { - children: 'Esse quia deserunt animi id sit voluptatem aperiam.', +const VisuallyHiddenTemplate: Story = { + args: { + children: 'Some content not focusable.', + }, }; -/** - * VisuallyHidden Stories - Focusable - */ -export const Focusable = Template.bind({}); -Focusable.args = { - children: ( - <> - {'Esse quia deserunt animi id sit voluptatem aperiam. '} - <Link href="#">Any link.</Link> - </> - ), +export const NotFocusable: Story = { + args: { + ...VisuallyHiddenTemplate.args, + }, +}; + +export const Focusable: Story = { + args: { + ...VisuallyHiddenTemplate.args, + children: <a href="#anchor">A skip to anchor link</a>, + }, }; diff --git a/src/components/molecules/branding/branding.stories.tsx b/src/components/molecules/branding/branding.stories.tsx index c2f216a..e0b8a16 100644 --- a/src/components/molecules/branding/branding.stories.tsx +++ b/src/components/molecules/branding/branding.stories.tsx @@ -1,92 +1,42 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { Heading } from '../../atoms'; import { Branding } from './branding'; -/** - * Branding - Storybook Meta - */ -export default { - title: 'Molecules/Branding', +const meta = { component: Branding, - args: {}, - argTypes: { - baseline: { - control: { - type: 'object', - }, - description: 'The brand baseline.', - type: { - name: 'function', - required: false, - }, - }, - logo: { - control: { - type: 'object', - }, - description: 'The brand logo.', - type: { - name: 'function', - required: true, - }, - }, - name: { - control: { - type: 'object', - }, - description: 'The brand name.', - type: { - name: 'function', - required: true, - }, - }, - url: { - control: { - type: 'string', - }, - description: 'The homepage url.', - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Branding>; + title: 'Molecules/Branding', +} satisfies Meta<typeof Branding>; -const Template: ComponentStory<typeof Branding> = (args) => ( - <Branding {...args} /> -); +export default meta; -/** - * Branding Stories - Logo and title - */ -export const LogoAndTitle = Template.bind({}); -LogoAndTitle.args = { - logo: ( - <NextImage - alt="Your brand logo" - height={150} - src="https://picsum.photos/150" - width={150} - /> - ), - name: <Heading level={1}>Your brand name</Heading>, +type Story = StoryObj<typeof meta>; + +export const LogoAndTitle: Story = { + args: { + logo: ( + <NextImage + alt="Your brand logo" + height={150} + src="https://picsum.photos/150" + width={150} + /> + ), + name: <Heading level={1}>Your brand name</Heading>, + }, }; -/** - * Branding Stories - Logo, title and baseline - */ -export const LogoTitleAndBaseline = Template.bind({}); -LogoTitleAndBaseline.args = { - baseline: <div>Your brand baseline if any</div>, - logo: ( - <NextImage - alt="Your brand logo" - height={150} - src="https://picsum.photos/150" - width={150} - /> - ), - name: <Heading level={1}>Your brand name</Heading>, +export const LogoTitleAndBaseline: Story = { + args: { + baseline: <div>Your brand baseline if any</div>, + logo: ( + <NextImage + alt="Your brand logo" + height={150} + src="https://picsum.photos/150" + width={150} + /> + ), + name: <Heading level={1}>Your brand name</Heading>, + }, }; diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.stories.ts b/src/components/molecules/buttons/back-to-top/back-to-top.stories.ts new file mode 100644 index 0000000..dddfa18 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/back-to-top.stories.ts @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { BackToTop } from './back-to-top'; + +const meta = { + component: BackToTop, + title: 'Molecules/Buttons/BackToTop', +} satisfies Meta<typeof BackToTop>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + anchor: '#top', + label: 'Back to top', + }, +}; diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx deleted file mode 100644 index 3abb59d..0000000 --- a/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { BackToTop as BackToTopComponent } from './back-to-top'; - -/** - * BackToTop - Storybook Meta - */ -export default { - title: 'Molecules/Buttons', - component: BackToTopComponent, - argTypes: { - anchor: { - control: { - type: 'text', - }, - description: 'An element id with leading hashtag to use as anchor.', - type: { - name: 'string', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the button wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - label: { - control: { - type: 'text', - }, - description: 'An accessible name for the button.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof BackToTopComponent>; - -const Template: ComponentStory<typeof BackToTopComponent> = (args) => ( - <BackToTopComponent {...args} /> -); - -/** - * Buttons Stories - Back to top - */ -export const BackToTop = Template.bind({}); -BackToTop.args = { - anchor: '#top', - label: 'Back to top', -}; diff --git a/src/components/molecules/buttons/help-button/help-button.stories.ts b/src/components/molecules/buttons/help-button/help-button.stories.ts new file mode 100644 index 0000000..294959b --- /dev/null +++ b/src/components/molecules/buttons/help-button/help-button.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { HelpButton } from './help-button'; + +const meta = { + component: HelpButton, + title: 'Molecules/Buttons/Help', +} satisfies Meta<typeof HelpButton>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + label: 'Help', + }, +}; diff --git a/src/components/molecules/buttons/help-button/help-button.stories.tsx b/src/components/molecules/buttons/help-button/help-button.stories.tsx deleted file mode 100644 index 556dd74..0000000 --- a/src/components/molecules/buttons/help-button/help-button.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { HelpButton as HelpButtonComponent } from './help-button'; - -/** - * HelpButton - Storybook Meta - */ -export default { - title: 'Molecules/Buttons', - component: HelpButtonComponent, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the button wrapper.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - onClick: { - control: { - type: null, - }, - description: 'A callback function to handle click on button.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta<typeof HelpButtonComponent>; - -const Template: ComponentStory<typeof HelpButtonComponent> = (args) => ( - <HelpButtonComponent {...args} /> -); - -/** - * Help Button Stories - Level 1 - */ -export const HelpButton = Template.bind({}); -HelpButton.args = { - label: 'Help', -}; diff --git a/src/components/molecules/card/card.stories.tsx b/src/components/molecules/card/card.stories.tsx index 7cc2ad4..55a0609 100644 --- a/src/components/molecules/card/card.stories.tsx +++ b/src/components/molecules/card/card.stories.tsx @@ -1,8 +1,8 @@ -import type { ComponentMeta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { Button, ButtonLink, Link, Time } from '../../atoms'; import { MetaItem } from '../meta-list'; -import { Card, type CardProps } from './card'; +import { Card } from './card'; import { CardActions } from './card-actions'; import { CardBody } from './card-body'; import { CardCover } from './card-cover'; @@ -11,228 +11,138 @@ import { CardHeader } from './card-header'; import { CardMeta } from './card-meta'; import { CardTitle } from './card-title'; -/** - * Card - Storybook Meta - */ -export default { - title: 'Molecules/Card', +const meta = { component: Card, - argTypes: {}, -} as ComponentMeta<typeof Card>; - -const Template: Story<CardProps<string | undefined>> = < - T extends string | undefined, ->( - args: CardProps<T> -) => <Card {...args} />; + title: 'Molecules/Card', +} satisfies Meta<typeof Card>; -/** - * Card Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: 'The card contents.', -}; +export default meta; -/** - * Card Stories - AsLink - */ -export const AsLink = Template.bind({}); -AsLink.args = { - 'aria-label': 'Learn more about this card', - children: 'The card contents.', - linkTo: '#card', -}; +type Story = StoryObj<typeof meta>; -export const HeaderCover = Template.bind({}); -HeaderCover.args = { - children: <CardHeader />, - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), +export const Default: Story = { + args: { + children: 'The card contents.', + }, }; -export const HeaderTitle = Template.bind({}); -HeaderTitle.args = { - children: ( - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - ), +export const AsLink: Story = { + args: { + 'aria-label': 'Learn more about this card', + children: 'The card contents.', + linkTo: '#card', + }, }; -export const HeaderMeta = Template.bind({}); -HeaderMeta.args = { - children: ( - <CardHeader> - <CardMeta isInline> - <MetaItem label="Written by:" value="The author" /> - <MetaItem - label="Published on:" - value={<Time date={new Date().toISOString()} />} +export const HeaderCover: Story = { + args: { + children: <CardHeader />, + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} /> - </CardMeta> - </CardHeader> - ), + </CardCover> + ), + }, }; -export const BodyContents = Template.bind({}); -BodyContents.args = { - children: <CardBody>The card contents</CardBody>, +export const HeaderTitle: Story = { + args: { + children: ( + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + ), + }, }; -export const FooterActions = Template.bind({}); -FooterActions.args = { - children: ( - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - ), +export const HeaderMeta: Story = { + args: { + children: ( + <CardHeader> + <CardMeta isInline> + <MetaItem label="Written by:" value="The author" /> + <MetaItem + label="Published on:" + value={<Time date={new Date().toISOString()} />} + /> + </CardMeta> + </CardHeader> + ), + }, }; -export const FooterMeta = Template.bind({}); -FooterMeta.args = { - children: <CardFooter />, - meta: ( - <CardMeta> - <MetaItem - label="Categories:" - value={[ - { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, - { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, - ]} - /> - <MetaItem - label="Tags:" - value={[ - { id: 'tag-1', value: 'Tag 1' }, - { id: 'tag-2', value: 'Tag 2' }, - { id: 'tag-3', value: 'Tag 3' }, - ]} - /> - </CardMeta> - ), +export const BodyContents: Story = { + args: { + children: <CardBody>The card contents</CardBody>, + }, }; -export const CompositionCoverTitle = Template.bind({}); -CompositionCoverTitle.args = { - children: ( - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), +export const FooterActions: Story = { + args: { + children: ( + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + ), + }, }; -export const CompositionTitleMeta = Template.bind({}); -CompositionTitleMeta.args = { - children: ( - <CardHeader> - <CardTitle>The card title</CardTitle> - <CardMeta isInline> - <MetaItem label="Written by:" value="The author" /> +export const FooterMeta: Story = { + args: { + children: <CardFooter />, + meta: ( + <CardMeta> <MetaItem - label="Published on:" - value={<Time date={new Date().toISOString()} />} + label="Categories:" + value={[ + { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, + { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, + ]} /> - </CardMeta> - </CardHeader> - ), -}; - -export const CompositionCoverTitleMeta = Template.bind({}); -CompositionCoverTitleMeta.args = { - children: ( - <CardHeader> - <CardTitle>The card title</CardTitle> - <CardMeta isInline> - <MetaItem label="Written by:" value="The author" /> <MetaItem - label="Published on:" - value={<Time date={new Date().toISOString()} />} + label="Tags:" + value={[ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ]} /> </CardMeta> - </CardHeader> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), -}; - -export const CompositionTitleBody = Template.bind({}); -CompositionTitleBody.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - </> - ), + ), + }, }; -export const CompositionCoverTitleBody = Template.bind({}); -CompositionCoverTitleBody.args = { - children: ( - <> +export const CompositionCoverTitle: Story = { + args: { + children: ( <CardHeader> <CardTitle>The card title</CardTitle> </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, }; -export const CompositionTitleMetaBody = Template.bind({}); -CompositionTitleMetaBody.args = { - children: ( - <> +export const CompositionTitleMeta: Story = { + args: { + children: ( <CardHeader> <CardTitle>The card title</CardTitle> <CardMeta isInline> @@ -243,20 +153,13 @@ CompositionTitleMetaBody.args = { /> </CardMeta> </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - </> - ), + ), + }, }; -export const CompositionCoverTitleMetaBody = Template.bind({}); -CompositionCoverTitleMetaBody.args = { - children: ( - <> +export const CompositionCoverTitleMeta: Story = { + args: { + children: ( <CardHeader> <CardTitle>The card title</CardTitle> <CardMeta isInline> @@ -267,242 +170,348 @@ CompositionCoverTitleMetaBody.args = { /> </CardMeta> </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, }; -export const CompositionTitleActions = Template.bind({}); -CompositionTitleActions.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), +export const CompositionTitleBody: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + </> + ), + }, }; -export const CompositionCoverTitleActions = Template.bind({}); -CompositionCoverTitleActions.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), +export const CompositionCoverTitleBody: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, }; -export const CompositionTitleBodyActions = Template.bind({}); -CompositionTitleBodyActions.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), +export const CompositionTitleMetaBody: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + <CardMeta isInline> + <MetaItem label="Written by:" value="The author" /> + <MetaItem + label="Published on:" + value={<Time date={new Date().toISOString()} />} + /> + </CardMeta> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + </> + ), + }, }; -export const CompositionTitleBodyActionsMeta = Template.bind({}); -CompositionTitleBodyActionsMeta.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), - meta: ( - <CardMeta> - <MetaItem - label="Categories:" - value={[ - { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, - { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, - ]} - /> - <MetaItem - label="Tags:" - value={[ - { id: 'tag-1', value: 'Tag 1' }, - { id: 'tag-2', value: 'Tag 2' }, - { id: 'tag-3', value: 'Tag 3' }, - ]} - /> - </CardMeta> - ), +export const CompositionCoverTitleMetaBody: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + <CardMeta isInline> + <MetaItem label="Written by:" value="The author" /> + <MetaItem + label="Published on:" + value={<Time date={new Date().toISOString()} />} + /> + </CardMeta> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, }; -export const CompositionCoverTitleBodyActionsMeta = Template.bind({}); -CompositionCoverTitleBodyActionsMeta.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), - meta: ( - <CardMeta> - <MetaItem - label="Categories:" - value={[ - { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, - { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, - ]} - /> - <MetaItem - label="Tags:" - value={[ - { id: 'tag-1', value: 'Tag 1' }, - { id: 'tag-2', value: 'Tag 2' }, - { id: 'tag-3', value: 'Tag 3' }, - ]} - /> - </CardMeta> - ), +export const CompositionTitleActions: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + }, }; -export const CompositionAllContents = Template.bind({}); -CompositionAllContents.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - <CardMeta isInline> - <MetaItem label="Written by:" value="The author" /> - <MetaItem - label="Published on:" - value={<Time date={new Date().toISOString()} />} - /> - </CardMeta> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), - meta: ( - <CardMeta> - <MetaItem - label="Categories:" - value={[ - { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, - { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, - ]} - /> - <MetaItem - label="Tags:" - value={[ - { id: 'tag-1', value: 'Tag 1' }, - { id: 'tag-2', value: 'Tag 2' }, - { id: 'tag-3', value: 'Tag 3' }, - ]} - /> - </CardMeta> - ), +export const CompositionCoverTitleActions: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, +}; + +export const CompositionTitleBodyActions: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + }, +}; + +export const CompositionTitleBodyActionsMeta: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + meta: ( + <CardMeta> + <MetaItem + label="Categories:" + value={[ + { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, + { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, + ]} + /> + <MetaItem + label="Tags:" + value={[ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ]} + /> + </CardMeta> + ), + }, +}; + +export const CompositionCoverTitleBodyActionsMeta: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + meta: ( + <CardMeta> + <MetaItem + label="Categories:" + value={[ + { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, + { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, + ]} + /> + <MetaItem + label="Tags:" + value={[ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ]} + /> + </CardMeta> + ), + }, +}; + +export const CompositionAllContents: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + <CardMeta isInline> + <MetaItem label="Written by:" value="The author" /> + <MetaItem + label="Published on:" + value={<Time date={new Date().toISOString()} />} + /> + </CardMeta> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + meta: ( + <CardMeta> + <MetaItem + label="Categories:" + value={[ + { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, + { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, + ]} + /> + <MetaItem + label="Tags:" + value={[ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ]} + /> + </CardMeta> + ), + }, }; diff --git a/src/components/molecules/code/code.stories.tsx b/src/components/molecules/code/code.stories.ts index 1127839..38a9ef8 100644 --- a/src/components/molecules/code/code.stories.tsx +++ b/src/components/molecules/code/code.stories.ts @@ -1,58 +1,14 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Code } from './code'; -/** - * Code - Storybook Meta - */ -export default { - title: 'Molecules/Code', +const meta = { component: Code, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The code sample.', - type: { - name: 'string', - required: true, - }, - }, - filterPattern: { - control: { - type: 'text', - }, - description: 'Define a pattern to filter the command line output.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - language: { - control: { - type: 'text', - }, - description: 'The code sample language.', - type: { - name: 'string', - required: true, - }, - }, - plugins: { - description: 'An array of Prism plugins to activate.', - type: { - name: 'object', - required: false, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof Code>; + title: 'Molecules/Code', +} satisfies Meta<typeof Code>; -const Template: ComponentStory<typeof Code> = (args) => <Code {...args} />; +export default meta; + +type Story = StoryObj<typeof meta>; const javascriptCodeSample = ` const foo = () => { @@ -60,25 +16,22 @@ const foo = () => { } `; -/** - * Code Stories - Code sample - */ -export const CodeSample = Template.bind({}); -CodeSample.args = { - children: javascriptCodeSample, - language: 'javascript', +export const CodeSample: Story = { + args: { + children: javascriptCodeSample, + language: 'javascript', + }, }; /** - * Code Stories - Highlighting - * * @todo Find a way to make it working: line-highlight plugin is not loaded. */ -export const Highlighting = Template.bind({}); -Highlighting.args = { - children: javascriptCodeSample, - highlight: '3', - language: 'javascript', +export const Highlighting: Story = { + args: { + children: javascriptCodeSample, + highlight: '3', + language: 'javascript', + }, }; // cSpell:ignore xinitrc @@ -89,15 +42,13 @@ ls -lah #output#-rw-r--r-- 1 armand armand 2,0K 21 jul. 2021 .xinitrc `; -/** - * Code Stories - Command Line - */ -export const CommandLine = Template.bind({}); -CommandLine.args = { - children: commandLineCode, - cmdOutputFilter: '#output#', - isCmd: true, - language: 'bash', +export const CommandLine: Story = { + args: { + children: commandLineCode, + cmdOutputFilter: '#output#', + isCmd: true, + language: 'bash', + }, }; // cSpell:ignore lcov @@ -163,14 +114,13 @@ const treeSample = ` └── yarn.lock`; /** - * Code Stories - Tree view - * * @todo Find a way to make it working: treeview plugin is not loaded. */ -export const TreeView = Template.bind({}); -TreeView.args = { - children: treeSample, - language: 'treeview', +export const TreeView: Story = { + args: { + children: treeSample, + language: 'treeview', + }, }; const diffSample = ` @@ -181,12 +131,10 @@ const diffSample = ` -foo = foo + 1; +const foo = bar.baz([1, 2, 3]) + 1;`; -/** - * Code Stories - Diff - */ -export const Diff = Template.bind({}); -Diff.args = { - children: diffSample, - isDiff: true, - language: 'diff', +export const Diff: Story = { + args: { + children: diffSample, + isDiff: true, + language: 'diff', + }, }; diff --git a/src/components/molecules/collapsible/collapsible.stories.ts b/src/components/molecules/collapsible/collapsible.stories.ts new file mode 100644 index 0000000..e869306 --- /dev/null +++ b/src/components/molecules/collapsible/collapsible.stories.ts @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Collapsible } from './collapsible'; + +const meta = { + component: Collapsible, + title: 'Molecules/Collapsible', +} satisfies Meta<typeof Collapsible>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const heading = 'Your title'; +const body = + 'Eius et eum ex voluptas laboriosam aliquid quas necessitatibus. Molestiae eius voluptatem qui voluptas eaque et totam. Ut ipsum ea sit. Quos molestiae id est consequatur. Suscipit illo at. Omnis non suscipit. Qui itaque laboriosam quos ut est laudantium. Iusto recusandae excepturi quia labore voluptatem quod recusandae. Quod ducimus ut rem dolore et.'; + +export const Collapsed: Story = { + args: { + children: body, + heading, + isCollapsed: true, + }, +}; + +export const Expanded: Story = { + args: { + children: body, + heading, + isCollapsed: false, + }, +}; diff --git a/src/components/molecules/collapsible/collapsible.stories.tsx b/src/components/molecules/collapsible/collapsible.stories.tsx deleted file mode 100644 index 7cac64d..0000000 --- a/src/components/molecules/collapsible/collapsible.stories.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Heading } from '../../atoms'; -import { Collapsible } from './collapsible'; - -/** - * HeadingButton - Storybook Meta - */ -export default { - title: 'Molecules/Collapsible', - component: Collapsible, - argTypes: { - heading: { - control: { - type: 'text', - }, - description: 'Define the collapsible heading.', - type: { - name: 'function', - required: true, - }, - }, - isCollapsed: { - control: { - type: 'boolean', - }, - description: 'Define if the component should be collapsed or expanded.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: true, - }, - }, - }, -} as ComponentMeta<typeof Collapsible>; - -const Template: ComponentStory<typeof Collapsible> = ({ heading, ...args }) => ( - <Collapsible - {...args} - heading={ - <Heading isFake level={3}> - {heading} - </Heading> - } - /> -); - -const heading = 'Your title'; -const body = - 'Eius et eum ex voluptas laboriosam aliquid quas necessitatibus. Molestiae eius voluptatem qui voluptas eaque et totam. Ut ipsum ea sit. Quos molestiae id est consequatur. Suscipit illo at. Omnis non suscipit. Qui itaque laboriosam quos ut est laudantium. Iusto recusandae excepturi quia labore voluptatem quod recusandae. Quod ducimus ut rem dolore et.'; - -/** - * Collapsible Stories - Collapsed - */ -export const Collapsed = Template.bind({}); -Collapsed.args = { - children: body, - heading, - isCollapsed: true, -}; - -/** - * Collapsible Stories - Expanded - */ -export const Expanded = Template.bind({}); -Expanded.args = { - children: body, - heading, - isCollapsed: false, -}; diff --git a/src/components/molecules/colophon/colophon.stories.tsx b/src/components/molecules/colophon/colophon.stories.tsx index 7baecad..83db4f4 100644 --- a/src/components/molecules/colophon/colophon.stories.tsx +++ b/src/components/molecules/colophon/colophon.stories.tsx @@ -1,83 +1,47 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Icon } from '../../atoms'; import { Copyright } from '../copyright'; import { Colophon } from './colophon'; -/** - * Colophon - Storybook Meta - */ -export default { - title: 'Molecules/Colophon', +const meta = { component: Colophon, - argTypes: { - copyright: { - description: 'The website copyright.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - links: { - control: { - type: 'object', - }, - description: - 'Adds links to the colophon (a Legal Notice link for example).', - table: { - category: 'Options', - }, - type: { - name: 'object', - required: false, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof Colophon>; + title: 'Molecules/Colophon', +} satisfies Meta<typeof Colophon>; + +export default meta; -const Template: ComponentStory<typeof Colophon> = (args) => ( - <Colophon {...args} /> -); +type Story = StoryObj<typeof meta>; -/** - * Colophon Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - copyright: <Copyright from="2021" owner="Brand" to="2023" />, +export const Default: Story = { + args: { + copyright: <Copyright from="2021" owner="Brand" to="2023" />, + }, }; -/** - * Colophon Stories - WithLicense - */ -export const WithLicense = Template.bind({}); -WithLicense.args = { - copyright: <Copyright from="2021" owner="Brand" to="2023" />, - license: <Icon heading="CC BY SA" shape="cc-by-sa" />, +export const WithLicense: Story = { + args: { + copyright: <Copyright from="2021" owner="Brand" to="2023" />, + license: <Icon heading="CC BY SA" shape="cc-by-sa" />, + }, }; -/** - * Colophon Stories - WithLinks - */ -export const WithLinks = Template.bind({}); -WithLinks.args = { - copyright: <Copyright from="2021" owner="Brand" to="2023" />, - links: [ - { href: '#legal', id: 'item-1', label: 'Legal notice' }, - { href: '#credits', id: 'item-2', label: 'Credits' }, - ], +export const WithLinks: Story = { + args: { + copyright: <Copyright from="2021" owner="Brand" to="2023" />, + links: [ + { href: '#legal', id: 'item-1', label: 'Legal notice' }, + { href: '#credits', id: 'item-2', label: 'Credits' }, + ], + }, }; -/** - * Colophon Stories - WithLicenseAndLinks - */ -export const WithLicenseAndLinks = Template.bind({}); -WithLicenseAndLinks.args = { - copyright: <Copyright from="2021" owner="Brand" to="2023" />, - license: <Icon heading="CC BY SA" shape="cc-by-sa" />, - links: [ - { href: '#legal', id: 'item-1', label: 'Legal notice' }, - { href: '#credits', id: 'item-2', label: 'Credits' }, - ], +export const WithLicenseAndLinks: Story = { + args: { + copyright: <Copyright from="2021" owner="Brand" to="2023" />, + license: <Icon heading="CC BY SA" shape="cc-by-sa" />, + links: [ + { href: '#legal', id: 'item-1', label: 'Legal notice' }, + { href: '#credits', id: 'item-2', label: 'Credits' }, + ], + }, }; diff --git a/src/components/molecules/copyright/copyright.stories.ts b/src/components/molecules/copyright/copyright.stories.ts new file mode 100644 index 0000000..6ef32c9 --- /dev/null +++ b/src/components/molecules/copyright/copyright.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Copyright } from './copyright'; + +const meta = { + component: Copyright, + title: 'Molecules/Copyright', +} satisfies Meta<typeof Copyright>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + from: '2012', + owner: 'Your brand', + }, +}; + +export const WithEndYear: Story = { + args: { + from: '2012', + owner: 'Your brand', + to: '2023', + }, +}; diff --git a/src/components/molecules/copyright/copyright.stories.tsx b/src/components/molecules/copyright/copyright.stories.tsx deleted file mode 100644 index 58a82e9..0000000 --- a/src/components/molecules/copyright/copyright.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Copyright } from './copyright'; - -/** - * Copyright - Storybook Meta - */ -export default { - title: 'Molecules/Copyright', - component: Copyright, - argTypes: { - from: { - control: { - type: 'text', - }, - description: 'The copyright start date.', - type: { - name: 'string', - required: true, - }, - }, - owner: { - control: { - type: 'text', - }, - description: 'The copyright owner.', - type: { - name: 'string', - required: true, - }, - }, - to: { - control: { - type: 'text', - }, - description: 'The copyright end date.', - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Copyright>; - -const Template: ComponentStory<typeof Copyright> = (args) => ( - <Copyright {...args} /> -); - -/** - * Copyright Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - from: '2012', - owner: 'Your brand', -}; - -/** - * Copyright Stories - WithEndYear - */ -export const WithEndYear = Template.bind({}); -WithEndYear.args = { - from: '2012', - owner: 'Your brand', - to: '2023', -}; diff --git a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx index 1d1af70..47ded7b 100644 --- a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx +++ b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx @@ -1,130 +1,270 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { type ChangeEvent, useState, useCallback } from 'react'; -import { Input, Label } from '../../../atoms'; +import type { Meta, StoryObj } from '@storybook/react'; +import { type ChangeEvent, useCallback, useState } from 'react'; +import { + Checkbox, + type CheckboxProps, + Radio, + type RadioProps, + Input, + type InputProps, + type TextAreaProps, + TextArea, + Label, +} from '../../../atoms'; +import { ControlledSelect } from '../../../atoms/forms/fields/select/select.stories'; import { LabelledField } from './labelled-field'; -/** - * LabelledField - Storybook Meta - */ -export default { - title: 'Molecules/Forms/Field', +const meta = { + title: 'Molecules/Forms/Labelled Field', component: LabelledField, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the field.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - field: { - control: { - type: null, - }, - description: 'A component: Checkbox, Input, Select, Radio or TextArea.', - type: { - name: 'function', - required: true, - }, - }, - label: { - control: { - type: null, - }, - description: 'A Label component.', - type: { - name: 'function', - required: true, - }, - }, - isInline: { - control: { - type: 'boolean', - }, - description: 'Should the label and the field be inlined?', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isReversedOrder: { - control: { - type: 'boolean', - }, - description: 'Should the label and the field be reversed?', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, -} as ComponentMeta<typeof LabelledField>; - -const Template: ComponentStory<typeof LabelledField> = ({ ...args }) => { - const id = 'sunt'; - const [value, setValue] = useState<string>(''); - const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => { +} satisfies Meta<typeof LabelledField>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const ControlledCheckbox = ({ + isChecked: checked = false, + ...args +}: CheckboxProps) => { + const [isChecked, setIsChecked] = useState<boolean>(checked); + + const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => { + setIsChecked(e.target.checked); + }, []); + + return <Checkbox {...args} isChecked={isChecked} onChange={handleChange} />; +}; + +const ControlledInput = ({ value: defaultValue, ...args }: InputProps) => { + const [value, setValue] = useState(defaultValue); + + const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => { + setValue(e.target.value); + }, []); + + return <Input {...args} onChange={handleChange} value={value} />; +}; + +const ControlledRadio = ({ + isChecked: checked = false, + ...args +}: RadioProps) => { + const [isChecked, setIsChecked] = useState<boolean>(checked); + + const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => { + setIsChecked(e.target.checked); + }, []); + + return <Radio {...args} isChecked={isChecked} onChange={handleChange} />; +}; + +const ControlledTextArea = ({ + value: defaultValue, + ...args +}: TextAreaProps) => { + const [value, setValue] = useState(defaultValue); + + const handleChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => { setValue(e.target.value); }, []); - return ( - <LabelledField - {...args} - field={ - <Input - id={id} - name={id} - onChange={updateValue} - type="text" - value={value} - /> - } - label={<Label htmlFor={id}>A label</Label>} - /> - ); -}; - -/** - * Labelled Field Stories - Left - */ -export const Left = Template.bind({}); -Left.args = { - isInline: true, -}; - -/** - * Labelled Field Stories - Right - */ -export const Right = Template.bind({}); -Right.args = { - isInline: true, - isReversedOrder: true, -}; - -/** - * Labelled Field Stories - Top - */ -export const Top = Template.bind({}); -Top.args = {}; - -/** - * Labelled Field Stories - Bottom - */ -export const Bottom = Template.bind({}); -Bottom.args = { - isReversedOrder: true, + return <TextArea {...args} onChange={handleChange} value={value} />; +}; + +export const Default: Story = { + args: { + field: ( + <ControlledInput id="default-field" name="default-field" type="text" /> + ), + label: <Label>A field label</Label>, + }, +}; + +export const LabelledCheckbox: Story = { + name: 'Field: Checkbox', + args: { + ...Default.args, + field: ( + <ControlledCheckbox + id="checkbox-field" + name="checkbox-field" + value="checkbox-field" + /> + ), + }, +}; + +export const LabelledRadio: Story = { + name: 'Field: Radio', + args: { + ...Default.args, + field: ( + <ControlledRadio + id="radio-field" + name="radio-field" + value="radio-field" + /> + ), + }, +}; + +export const LabelledDateField: Story = { + name: 'Field: Date', + args: { + ...Default.args, + field: <ControlledInput id="date-field" name="date-field" type="date" />, + }, +}; + +export const LabelledDateTimeField: Story = { + name: 'Field: Datetime', + args: { + ...Default.args, + field: ( + <ControlledInput + id="datetime-field" + name="datetime-field" + type="datetime-local" + /> + ), + }, +}; + +export const LabelledEmailField: Story = { + name: 'Field: Email', + args: { + ...Default.args, + field: <ControlledInput id="email-field" name="email-field" type="email" />, + }, +}; + +export const LabelledMonthField: Story = { + name: 'Field: Month', + args: { + ...Default.args, + field: <ControlledInput id="month-field" name="month-field" type="month" />, + }, +}; + +export const LabelledNumberField: Story = { + name: 'Field: Number', + args: { + ...Default.args, + field: ( + <ControlledInput id="number-field" name="number-field" type="number" /> + ), + }, +}; + +export const LabelledPasswordField: Story = { + name: 'Field: Password', + args: { + ...Default.args, + field: ( + <ControlledInput + id="password-field" + name="password-field" + type="password" + /> + ), + }, +}; + +export const LabelledSearchField: Story = { + name: 'Field: Search', + args: { + ...Default.args, + field: ( + <ControlledInput id="search-field" name="search-field" type="search" /> + ), + }, +}; + +export const LabelledSelect: Story = { + name: 'Field: Select', + args: { + ...Default.args, + field: ( + <ControlledSelect + id="select-field" + name="select-field" + options={[]} + value="" + /> + ), + }, +}; + +export const LabelledTelField: Story = { + name: 'Field: Tel', + args: { + ...Default.args, + field: <ControlledInput id="tel-field" name="tel-field" type="tel" />, + }, +}; + +export const LabelledTextField: Story = { + name: 'Field: Text', + args: { + ...Default.args, + }, +}; + +export const LabelledTextArea: Story = { + name: 'Field: Textarea', + args: { + ...Default.args, + field: <ControlledTextArea id="textarea-field" name="textarea-field" />, + }, +}; + +export const LabelledTimeField: Story = { + name: 'Field: Time', + args: { + ...Default.args, + field: <ControlledInput id="time-field" name="time-field" type="time" />, + }, +}; + +export const LabelledUrlField: Story = { + name: 'Field: Url', + args: { + ...Default.args, + field: <ControlledInput id="url-field" name="url-field" type="url" />, + }, +}; + +export const LayoutColumn: Story = { + name: 'Layout: Column', + args: { + ...LabelledCheckbox.args, + isInline: false, + }, +}; + +export const LayoutReversedColumn: Story = { + name: 'Layout: Reversed column', + args: { + ...LabelledCheckbox.args, + isInline: false, + isReversedOrder: true, + }, +}; + +export const LayoutRow: Story = { + name: 'Layout: Row', + args: { + ...LabelledCheckbox.args, + isInline: true, + }, +}; + +export const LayoutReversedRow: Story = { + name: 'Layout: Reversed row', + args: { + ...LabelledCheckbox.args, + isInline: true, + isReversedOrder: true, + }, }; diff --git a/src/components/molecules/forms/radio-group/radio-group.stories.tsx b/src/components/molecules/forms/radio-group/radio-group.stories.tsx index 4b92c34..2917efb 100644 --- a/src/components/molecules/forms/radio-group/radio-group.stories.tsx +++ b/src/components/molecules/forms/radio-group/radio-group.stories.tsx @@ -1,55 +1,9 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { type ChangeEventHandler, useCallback, useState } from 'react'; import { Legend } from '../../../atoms'; -import { RadioGroup as RadioGroupComponent } from './radio-group'; -import { getOptions, initialChoice } from './radio-group.fixture'; +import { RadioGroup, type RadioGroupProps } from './radio-group'; -/** - * RadioGroup - Storybook Meta - */ -export default { - title: 'Molecules/Forms', - component: RadioGroupComponent, - args: {}, - argTypes: { - onChange: { - control: { - type: null, - }, - description: 'A callback function to handle selected option change.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - options: { - description: 'An array of radio option object.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - value: { - control: { - type: 'text', - }, - description: 'The default selected option id.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof RadioGroupComponent>; - -const Template: ComponentStory<typeof RadioGroupComponent> = ({ - value, - ...args -}) => { +const ControlledRadioGroup = ({ value, ...props }: RadioGroupProps) => { const [selection, setSelection] = useState(value); const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback( @@ -59,17 +13,83 @@ const Template: ComponentStory<typeof RadioGroupComponent> = ({ [] ); - return ( - <RadioGroupComponent {...args} onSwitch={handleChange} value={selection} /> - ); + return <RadioGroup {...props} onSwitch={handleChange} value={selection} />; }; -/** - * Radio Group Story - */ -export const RadioGroup = Template.bind({}); -RadioGroup.args = { - legend: <Legend>Options:</Legend>, - options: getOptions('group1'), - value: initialChoice, +const meta = { + title: 'Molecules/Forms/Radio Group', + component: RadioGroup, + render: ControlledRadioGroup, +} satisfies Meta<typeof RadioGroup>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + legend: <Legend>Select your preferred option:</Legend>, + name: 'example', + options: [ + { id: 'example-1', label: 'Option 1', value: 'example-1' }, + { id: 'example-2', label: 'Option 2', value: 'example-2' }, + { id: 'example-3', label: 'Option 3', value: 'example-3' }, + ], + }, +}; + +export const Inline: Story = { + args: { + ...Example.args, + isInline: true, + name: 'inline', + options: [ + { id: 'inline-1', label: 'Option 1', value: 'inline-1' }, + { id: 'inline-2', label: 'Option 2', value: 'inline-2' }, + { id: 'inline-3', label: 'Option 3', value: 'inline-3' }, + ], + }, +}; + +export const DisabledGroup: Story = { + args: { + ...Example.args, + isDisabled: true, + name: 'disabled', + options: [ + { id: 'disabled-1', label: 'Option 1', value: 'disabled-1' }, + { id: 'disabled-2', label: 'Option 2', value: 'disabled-2' }, + { id: 'disabled-3', label: 'Option 3', value: 'disabled-3' }, + ], + }, +}; + +export const DisabledOption: Story = { + args: { + ...Example.args, + name: 'disabled-option', + options: [ + { id: 'option-1', label: 'Option 1', value: 'option-1' }, + { + id: 'option-2', + isDisabled: true, + label: 'Option 2', + value: 'option-2', + }, + { id: 'option-3', label: 'Option 3', value: 'option-3' }, + ], + }, +}; + +export const DefaultValue: Story = { + args: { + ...Example.args, + name: 'default-value', + options: [ + { id: 'value-1', label: 'Option 1', value: 'value-1' }, + { id: 'value-2', label: 'Option 2', value: 'value-2' }, + { id: 'value-3', label: 'Option 3', value: 'value-3' }, + ], + value: 'value-2', + }, }; diff --git a/src/components/molecules/forms/switch/switch.stories.tsx b/src/components/molecules/forms/switch/switch.stories.tsx index a88e6ab..9a59b83 100644 --- a/src/components/molecules/forms/switch/switch.stories.tsx +++ b/src/components/molecules/forms/switch/switch.stories.tsx @@ -1,25 +1,14 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { type ChangeEventHandler, useCallback, useState } from 'react'; -import { Legend } from '../../../atoms'; -import { Switch as SwitchComponent, type SwitchOption } from './switch'; - -/** - * Switch - Storybook Meta - */ -export default { - title: 'Molecules/Forms', - component: SwitchComponent, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof SwitchComponent>; - -const Template: ComponentStory<typeof SwitchComponent> = ({ - value, - ...args -}) => { - const [selection, setSelection] = useState(value); - - const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback( +import { Icon } from '../../../atoms'; +import { Switch, type SwitchProps } from './switch'; + +type ControlledSwitchProps = Omit<SwitchProps, 'onSwitch' | 'selectedItem'>; + +const ControlledSwitch = ({ items, ...props }: ControlledSwitchProps) => { + const [selection, setSelection] = useState(items[0].value); + + const handleSwitch: ChangeEventHandler<HTMLInputElement> = useCallback( (e) => { setSelection(e.target.value); }, @@ -27,22 +16,60 @@ const Template: ComponentStory<typeof SwitchComponent> = ({ ); return ( - <SwitchComponent {...args} onSwitch={handleChange} value={selection} /> + <Switch + {...props} + items={items} + onSwitch={handleSwitch} + value={selection} + /> ); }; -const items: [SwitchOption, SwitchOption] = [ - { id: 'option-1', label: 'Choice 1', value: 'option-1' }, - { id: 'option-2', label: 'Choice 2', value: 'option-2' }, -]; - -/** - * Radio Group Story - */ -export const Switch = Template.bind({}); -Switch.args = { - items, - legend: <Legend>Choose the best option:</Legend>, - name: 'example', - value: items[0].value, +const meta = { + title: 'Molecules/Forms/Switch', + component: Switch, + render: ControlledSwitch, +} satisfies Meta<typeof Switch>; + +export default meta; + +type Story = StoryObj<typeof ControlledSwitch>; + +export const Example: Story = { + args: { + items: [ + { id: 'item-1', label: 'Item 1', value: 'item-1' }, + { id: 'item-2', label: 'Item 2', value: 'item-2' }, + ], + name: 'example', + }, +}; + +export const Disabled: Story = { + args: { + isDisabled: true, + items: [ + { id: 'disabled-item-1', label: 'Item 1', value: 'item-1' }, + { id: 'disabled-item-2', label: 'Item 2', value: 'item-2' }, + ], + name: 'disabled', + }, +}; + +export const Icons: Story = { + args: { + items: [ + { + id: 'light-theme', + label: <Icon aria-label="Light theme" shape="sun" size="xs" />, + value: 'light-theme', + }, + { + id: 'dark-theme', + label: <Icon aria-label="Dark theme" shape="moon" size="xs" />, + value: 'dark-theme', + }, + ], + name: 'theme', + }, }; diff --git a/src/components/molecules/grid/grid.stories.tsx b/src/components/molecules/grid/grid.stories.tsx index 4e12af4..69ab2f8 100644 --- a/src/components/molecules/grid/grid.stories.tsx +++ b/src/components/molecules/grid/grid.stories.tsx @@ -1,230 +1,246 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Grid } from './grid'; import { GridItem } from './grid-item'; -export default { - title: 'Molecules/Grid', +const meta = { component: Grid, - argTypes: { - items: { - description: 'The grid items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof Grid>; + title: 'Molecules/Grid', +} satisfies Meta<typeof Grid>; + +export default meta; -const Template: ComponentStory<typeof Grid> = (args) => <Grid {...args} />; +type Story = StoryObj<typeof meta>; -export const Default = Template.bind({}); -Default.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), +export const Example: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + }, }; -export const OneColumn = Template.bind({}); -OneColumn.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - </> - ), - col: 1, - gap: 'sm', +export const OneColumn: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + col: 1, + gap: 'sm', + }, }; -export const TwoColumns = Template.bind({}); -TwoColumns.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - </> - ), - col: 2, - gap: 'sm', +export const TwoColumns: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + col: 2, + gap: 'sm', + }, }; -export const ThreeColumns = Template.bind({}); -ThreeColumns.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - </> - ), - col: 3, - gap: 'sm', +export const ThreeColumns: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + col: 3, + gap: 'sm', + }, }; -export const FixedSize = Template.bind({}); -FixedSize.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - size: '300px', - gap: 'sm', +export const FixedSize: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + size: '300px', + gap: 'sm', + }, }; -export const MaxSize = Template.bind({}); -MaxSize.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - sizeMax: '300px', - gap: 'sm', +export const MaxSize: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + sizeMax: '300px', + gap: 'sm', + }, }; -export const MinSize = Template.bind({}); -MinSize.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - sizeMin: '100px', - gap: 'sm', +export const MinSize: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + sizeMin: '100px', + gap: 'sm', + }, }; -export const MinAndMaxSize = Template.bind({}); -MinAndMaxSize.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - sizeMax: '300px', - sizeMin: '100px', - gap: 'sm', +export const MinAndMaxSize: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + sizeMax: '300px', + sizeMin: '100px', + gap: 'sm', + }, }; -export const Fill = Template.bind({}); -Fill.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - col: 'auto-fill', - sizeMin: '100px', - gap: 'sm', +export const Fill: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + col: 'auto-fill', + sizeMin: '100px', + gap: 'sm', + }, }; diff --git a/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx index 43ef150..7e5647c 100644 --- a/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx +++ b/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx @@ -1,34 +1,27 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { Logo } from '../../../atoms'; -import { FlippingLogo as FlippingLogoComponent } from './flipping-logo'; +import { FlippingLogo } from './flipping-logo'; -/** - * FlippingLogo - Storybook Meta - */ -export default { +const meta = { + component: FlippingLogo, title: 'Molecules/Images/Flipping Logo', - component: FlippingLogoComponent, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof FlippingLogoComponent>; +} satisfies Meta<typeof FlippingLogo>; -const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => ( - <FlippingLogoComponent {...args} /> -); +export default meta; -/** - * FlippingLogo Story - */ -export const FlippingLogo = Template.bind({}); -FlippingLogo.args = { - back: <Logo heading="A logo example" />, - front: ( - <NextImage - alt="A photo example" - height={200} - src="https://picsum.photos/200" - width={200} - /> - ), +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + back: <Logo heading="A logo example" />, + front: ( + <NextImage + alt="A photo example" + height={200} + src="https://picsum.photos/200" + width={200} + /> + ), + }, }; diff --git a/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx b/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx index 3ddb8f1..9b1596a 100644 --- a/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx +++ b/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx @@ -1,108 +1,79 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Link } from '../../../atoms'; import { MetaItem } from './meta-item'; -/** - * MetaItem - Storybook Meta - */ -export default { - title: 'Molecules/MetaList/Item', +const meta = { component: MetaItem, - argTypes: { - label: { - control: { - type: 'text', - }, - description: 'The item label.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof MetaItem>; + title: 'Molecules/MetaList/Item', +} satisfies Meta<typeof MetaItem>; -const Template: ComponentStory<typeof MetaItem> = (args) => ( - <MetaItem {...args} /> -); +export default meta; -/** - * MetaItem Stories - SingleValue - */ -export const SingleValue = Template.bind({}); -SingleValue.args = { - label: 'Comments', - value: 'No comments', +type Story = StoryObj<typeof meta>; + +export const SingleValue: Story = { + args: { + label: 'Comments', + value: 'No comments', + }, }; -/** - * MetaItem Stories - MultipleValues - */ -export const MultipleValues = Template.bind({}); -MultipleValues.args = { - label: 'Tags', - value: [ - { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, - { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, - ], +export const MultipleValues: Story = { + args: { + label: 'Tags', + value: [ + { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, + { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, + ], + }, }; -/** - * MetaItem Stories - SingleValueBordered - */ -export const SingleValueBordered = Template.bind({}); -SingleValueBordered.args = { - hasBorderedValues: true, - label: 'Comments', - value: 'No comments', +export const SingleValueBordered: Story = { + args: { + hasBorderedValues: true, + label: 'Comments', + value: 'No comments', + }, }; -/** - * MetaItem Stories - MultipleValuesBordered - */ -export const MultipleValuesBordered = Template.bind({}); -MultipleValuesBordered.args = { - hasBorderedValues: true, - label: 'Tags', - value: [ - { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, - { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, - ], +export const MultipleValuesBordered: Story = { + args: { + hasBorderedValues: true, + label: 'Tags', + value: [ + { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, + { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, + ], + }, }; -/** - * MetaItem Stories - SingleValueInlined - */ -export const SingleValueInlined = Template.bind({}); -SingleValueInlined.args = { - isInline: true, - label: 'Comments', - value: 'No comments', +export const SingleValueInlined: Story = { + args: { + isInline: true, + label: 'Comments', + value: 'No comments', + }, }; -/** - * MetaItem Stories - MultipleValuesInlined - */ -export const MultipleValuesInlined = Template.bind({}); -MultipleValuesInlined.args = { - isInline: true, - label: 'Tags', - value: [ - { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, - { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, - ], +export const MultipleValuesInlined: Story = { + args: { + isInline: true, + label: 'Tags', + value: [ + { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, + { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, + ], + }, }; -/** - * MetaItem Stories - InlinedValues - */ -export const InlinedValues = Template.bind({}); -InlinedValues.args = { - hasInlinedValues: true, - label: 'Tags', - value: [ - { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, - { id: 'tag2', value: <Link href="#tag2">A long tag 2</Link> }, - { id: 'tag3', value: <Link href="#tag3">Tag 3</Link> }, - ], +export const InlinedValues: Story = { + args: { + hasInlinedValues: true, + label: 'Tags', + value: [ + { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, + { id: 'tag2', value: <Link href="#tag2">A long tag 2</Link> }, + { id: 'tag3', value: <Link href="#tag3">Tag 3</Link> }, + ], + }, }; diff --git a/src/components/molecules/meta-list/meta-list.stories.tsx b/src/components/molecules/meta-list/meta-list.stories.tsx index d73c5b9..f6015bd 100644 --- a/src/components/molecules/meta-list/meta-list.stories.tsx +++ b/src/components/molecules/meta-list/meta-list.stories.tsx @@ -1,29 +1,16 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Link } from '../../atoms'; import { MetaItem } from './meta-item'; import { MetaList } from './meta-list'; -/** - * MetaList - Storybook Meta - */ -export default { - title: 'Molecules/MetaList', +const meta = { component: MetaList, - argTypes: { - items: { - description: 'The meta items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof MetaList>; + title: 'Molecules/MetaList', +} satisfies Meta<typeof MetaList>; -const Template: ComponentStory<typeof MetaList> = (args) => ( - <MetaList {...args} /> -); +export default meta; + +type Story = StoryObj<typeof meta>; const items = [ { id: 'comments', label: 'Comments', value: 'No comments.' }, @@ -53,19 +40,15 @@ const items = [ }, ]; -/** - * MetaList Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />), +export const Example: Story = { + args: { + children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />), + }, }; -/** - * MetaList Stories - Inlined - */ -export const Inlined = Template.bind({}); -Inlined.args = { - children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />), - isInline: true, +export const Inlined: Story = { + args: { + children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />), + isInline: true, + }, }; diff --git a/src/components/molecules/modals/modal/modal.stories.tsx b/src/components/molecules/modals/modal/modal.stories.tsx index 744d21f..d4afc5c 100644 --- a/src/components/molecules/modals/modal/modal.stories.tsx +++ b/src/components/molecules/modals/modal/modal.stories.tsx @@ -1,191 +1,156 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading, Icon } from '../../../atoms'; import { Modal } from './modal'; -/** - * Modals - Storybook Meta - */ -export default { - title: 'Molecules/Modals/Modal', +const meta = { component: Modal, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof Modal>; - -const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />; - -/** - * Modal Stories - Primary - */ -export const Primary = Template.bind({}); -Primary.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', -}; - -/** - * Modal Stories - Primary with close button - */ -export const PrimaryWithCloseBtn = Template.bind({}); -PrimaryWithCloseBtn.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', -}; - -/** - * Modal Stories - Primary with icon - */ -export const PrimaryWithIcon = Template.bind({}); -PrimaryWithIcon.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Primary with heading - */ -export const PrimaryWithHeading = Template.bind({}); -PrimaryWithHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, -}; - -/** - * Modal Stories - Primary with icon and heading - */ -export const PrimaryWithIconAndHeading = Template.bind({}); -PrimaryWithIconAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Primary with close button and heading - */ -export const PrimaryWithCloseBtnAndHeading = Template.bind({}); -PrimaryWithCloseBtnAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', - heading: <Heading level={3}>Aut provident eum</Heading>, -}; - -/** - * Modal Stories - Primary with close button and icon - */ -export const PrimaryWithCloseBtnAndIcon = Template.bind({}); -PrimaryWithCloseBtnAndIcon.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Primary with close button, icon and heading - */ -export const PrimaryWithCloseBtnIconAndHeading = Template.bind({}); -PrimaryWithCloseBtnIconAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', - heading: <Heading level={3}>Aut provident eum</Heading>, - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Secondary - */ -export const Secondary = Template.bind({}); -Secondary.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - kind: 'secondary', -}; - -/** - * Modal Stories - Secondary with close button - */ -export const SecondaryWithCloseBtn = Template.bind({}); -SecondaryWithCloseBtn.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - kind: 'secondary', - closeBtnLabel: 'Close the modal', -}; - -/** - * Modal Stories - Secondary with heading - */ -export const SecondaryWithHeading = Template.bind({}); -SecondaryWithHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - kind: 'secondary', -}; - -/** - * Modal Stories - Secondary with icon - */ -export const SecondaryWithIcon = Template.bind({}); -SecondaryWithIcon.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - kind: 'secondary', - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Secondary with close button and heading - */ -export const SecondaryWithCloseBtnAndHeading = Template.bind({}); -SecondaryWithCloseBtnAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - kind: 'secondary', - closeBtnLabel: 'Close the modal', -}; - -/** - * Modal Stories - Secondary with close button and icon - */ -export const SecondaryWithCloseBtnAndIcon = Template.bind({}); -SecondaryWithCloseBtnAndIcon.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', - icon: <Icon aria-hidden shape="help" />, - kind: 'secondary', -}; - -/** - * Modal Stories - Secondary with icon and heading - */ -export const SecondaryWithIconAndHeading = Template.bind({}); -SecondaryWithIconAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - icon: <Icon aria-hidden shape="help" />, - kind: 'secondary', -}; - -/** - * Modal Stories - Secondary with close button, icon and heading - */ -export const SecondaryWithCloseBtnIconAndHeading = Template.bind({}); -SecondaryWithCloseBtnIconAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - closeBtnLabel: 'Close the modal', - icon: <Icon aria-hidden shape="help" />, - kind: 'secondary', + title: 'Molecules/Modals/Modal', +} satisfies Meta<typeof Modal>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Primary: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + }, +}; + +export const PrimaryWithCloseBtn: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + }, +}; + +export const PrimaryWithIcon: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + icon: <Icon aria-hidden shape="help" />, + }, +}; + +export const PrimaryWithHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + heading: <Heading level={3}>Aut provident eum</Heading>, + }, +}; + +export const PrimaryWithIconAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + heading: <Heading level={3}>Aut provident eum</Heading>, + icon: <Icon aria-hidden shape="help" />, + }, +}; + +export const PrimaryWithCloseBtnAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + heading: <Heading level={3}>Aut provident eum</Heading>, + }, +}; + +export const PrimaryWithCloseBtnAndIcon: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + icon: <Icon aria-hidden shape="help" />, + }, +}; + +export const PrimaryWithCloseBtnIconAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + heading: <Heading level={3}>Aut provident eum</Heading>, + icon: <Icon aria-hidden shape="help" />, + }, +}; + +export const Secondary: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + kind: 'secondary', + }, +}; + +export const SecondaryWithCloseBtn: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + kind: 'secondary', + }, +}; + +export const SecondaryWithHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + heading: <Heading level={3}>Aut provident eum</Heading>, + kind: 'secondary', + }, +}; + +export const SecondaryWithIcon: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + icon: <Icon aria-hidden shape="help" />, + kind: 'secondary', + }, +}; + +export const SecondaryWithCloseBtnAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + heading: <Heading level={3}>Aut provident eum</Heading>, + kind: 'secondary', + }, +}; + +export const SecondaryWithCloseBtnAndIcon: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + icon: <Icon aria-hidden shape="help" />, + kind: 'secondary', + }, +}; + +export const SecondaryWithIconAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + heading: <Heading level={3}>Aut provident eum</Heading>, + icon: <Icon aria-hidden shape="help" />, + kind: 'secondary', + }, +}; + +export const SecondaryWithCloseBtnIconAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + heading: <Heading level={3}>Aut provident eum</Heading>, + icon: <Icon aria-hidden shape="help" />, + kind: 'secondary', + }, }; diff --git a/src/components/molecules/modals/tooltip/tooltip.stories.tsx b/src/components/molecules/modals/tooltip/tooltip.stories.tsx index 0cff339..d128f51 100644 --- a/src/components/molecules/modals/tooltip/tooltip.stories.tsx +++ b/src/components/molecules/modals/tooltip/tooltip.stories.tsx @@ -1,22 +1,12 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useBoolean } from '../../../../utils/hooks'; -import { Tooltip } from './tooltip'; +import { Tooltip, type TooltipProps } from './tooltip'; -/** - * Switch - Storybook Meta - */ -export default { - title: 'Molecules/Modals/Tooltip', - component: Tooltip, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof Tooltip>; - -const Template: ComponentStory<typeof Tooltip> = ({ +const ControlledTooltip = ({ isOpen, onToggle: _onToggle, ...args -}) => { +}: TooltipProps) => { const { deactivate, state: isOpened, toggle } = useBoolean(isOpen); return ( @@ -31,13 +21,21 @@ const Template: ComponentStory<typeof Tooltip> = ({ ); }; -/** - * Tooltip Stories - Example - */ -export const Example = Template.bind({}); -Example.args = { - children: - 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', - heading: 'A title', - isOpen: false, +const meta = { + component: Tooltip, + title: 'Molecules/Modals/Tooltip', + render: ControlledTooltip, +} satisfies Meta<typeof Tooltip>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: + 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', + heading: 'A title', + isOpen: false, + }, }; diff --git a/src/components/molecules/nav/nav-item/nav-item.stories.tsx b/src/components/molecules/nav/nav-item/nav-item.stories.tsx index df736a4..3d77b4d 100644 --- a/src/components/molecules/nav/nav-item/nav-item.stories.tsx +++ b/src/components/molecules/nav/nav-item/nav-item.stories.tsx @@ -1,37 +1,25 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { NavLink } from '../nav-link'; -import { NavItem } from './nav-item'; +import { NavItem, type NavItemProps } from './nav-item'; -/** - * NavItem - Storybook Meta - */ -export default { - title: 'Molecules/Nav/NavItem', - component: NavItem, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'Define the nav item contents.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof NavItem>; - -const Template: ComponentStory<typeof NavItem> = (args) => ( +const WrappedNavItem = (args: NavItemProps) => ( <ul style={{ margin: 0, padding: 0 }}> <NavItem {...args} /> </ul> ); -/** - * NavItem Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: <NavLink href="#example" label="Example" />, +const meta = { + component: NavItem, + title: 'Molecules/Nav/Item', + render: WrappedNavItem, +} satisfies Meta<typeof NavItem>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: <NavLink href="#example" label="Example" />, + }, }; diff --git a/src/components/molecules/nav/nav-link/nav-link.stories.tsx b/src/components/molecules/nav/nav-link/nav-link.stories.tsx index b0ad76a..ba13d33 100644 --- a/src/components/molecules/nav/nav-link/nav-link.stories.tsx +++ b/src/components/molecules/nav/nav-link/nav-link.stories.tsx @@ -1,148 +1,100 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Icon } from '../../../atoms'; -import { NavLink as NavLinkComponent } from './nav-link'; +import { NavLink, type NavLinkProps } from './nav-link'; -/** - * NavLink - Storybook Meta - */ -export default { - title: 'Molecules/Nav/NavLink', - component: NavLinkComponent, - argTypes: { - href: { - control: { - type: 'text', - }, - description: 'The link target.', - type: { - name: 'string', - required: true, - }, - }, - label: { - control: { - type: 'text', - }, - description: 'The link label.', - type: { - name: 'string', - required: true, - }, - }, - logo: { - control: { - type: null, - }, - description: 'The link logo.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof NavLinkComponent>; - -const Template: ComponentStory<typeof NavLinkComponent> = (args) => ( +const WrappedNavLink = (args: NavLinkProps) => ( <div style={{ width: 'fit-content' }}> - <NavLinkComponent {...args} /> + <NavLink {...args} /> </div> ); -/** - * NavLink Stories - Regular - */ -export const Regular = Template.bind({}); -Regular.args = { - href: '#', - label: 'A nav link', +const meta = { + component: NavLink, + title: 'Molecules/Nav/Link', + render: WrappedNavLink, +} satisfies Meta<typeof NavLink>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Regular: Story = { + args: { + href: '#', + label: 'A nav link', + }, }; -/** - * NavLink Stories - RegularInlineWithLogo - */ -export const RegularInlineWithLogo = Template.bind({}); -RegularInlineWithLogo.args = { - href: '#example', - isStack: false, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, +export const RegularInlineWithLogo: Story = { + args: { + href: '#example', + isStack: false, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + }, }; -/** - * NavLink Stories - RegularStackWithLogo - */ -export const RegularStackWithLogo = Template.bind({}); -RegularStackWithLogo.args = { - href: '#example', - isStack: true, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, +export const RegularStackWithLogo: Story = { + args: { + href: '#example', + isStack: true, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + }, }; -/** - * NavLink Stories - Block - */ -export const Block = Template.bind({}); -Block.args = { - href: '#', - label: 'A nav link', - variant: 'block', +export const Block: Story = { + args: { + href: '#', + label: 'A nav link', + variant: 'block', + }, }; -/** - * NavLink Stories - BlockInlineWithLogo - */ -export const BlockInlineWithLogo = Template.bind({}); -BlockInlineWithLogo.args = { - href: '#example', - isStack: false, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, - variant: 'block', +export const BlockInlineWithLogo: Story = { + args: { + href: '#example', + isStack: false, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + variant: 'block', + }, }; -/** - * NavLink Stories - BlockStackWithLogo - */ -export const BlockStackWithLogo = Template.bind({}); -BlockStackWithLogo.args = { - href: '#example', - isStack: true, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, - variant: 'block', +export const BlockStackWithLogo: Story = { + args: { + href: '#example', + isStack: true, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + variant: 'block', + }, }; -/** - * NavLink Stories - Main - */ -export const Main = Template.bind({}); -Main.args = { - href: '#', - label: 'A nav link', - variant: 'main', +export const Main: Story = { + args: { + href: '#', + label: 'A nav link', + variant: 'main', + }, }; -/** - * NavLink Stories - MainInlineWithLogo - */ -export const MainInlineWithLogo = Template.bind({}); -MainInlineWithLogo.args = { - href: '#example', - isStack: false, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, - variant: 'main', +export const MainInlineWithLogo: Story = { + args: { + href: '#example', + isStack: false, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + variant: 'main', + }, }; -/** - * NavLink Stories - MainStackWithLogo - */ -export const MainStackWithLogo = Template.bind({}); -MainStackWithLogo.args = { - href: '#example', - isStack: true, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, - variant: 'main', +export const MainStackWithLogo: Story = { + args: { + href: '#example', + isStack: true, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + variant: 'main', + }, }; diff --git a/src/components/molecules/nav/nav-list/nav-list.stories.tsx b/src/components/molecules/nav/nav-list/nav-list.stories.tsx index c165ac7..702acfe 100644 --- a/src/components/molecules/nav/nav-list/nav-list.stories.tsx +++ b/src/components/molecules/nav/nav-list/nav-list.stories.tsx @@ -1,19 +1,16 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { NavItem } from '../nav-item'; import { NavLink } from '../nav-link'; import { NavList } from './nav-list'; -/** - * Nav - Storybook Meta - */ -export default { - title: 'Molecules/Nav/NavList', +const meta = { component: NavList, -} as ComponentMeta<typeof NavList>; + title: 'Molecules/Nav/List', +} satisfies Meta<typeof NavList>; -const Template: ComponentStory<typeof NavList> = (args) => ( - <NavList {...args} /> -); +export default meta; + +type Story = StoryObj<typeof meta>; const NavItems = () => ( <> @@ -32,20 +29,16 @@ const NavItems = () => ( </> ); -/** - * NavList Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: <NavItems />, +export const Example: Story = { + args: { + children: <NavItems />, + }, }; -/** - * NavList Stories - Inlined - */ -export const Inlined = Template.bind({}); -Inlined.args = { - children: <NavItems />, - isInline: true, - spacing: 'sm', +export const Inlined: Story = { + args: { + children: <NavItems />, + isInline: true, + spacing: 'sm', + }, }; diff --git a/src/components/organisms/comment/approved-comment/approved-comment.stories.ts b/src/components/organisms/comment/approved-comment/approved-comment.stories.ts new file mode 100644 index 0000000..ac24463 --- /dev/null +++ b/src/components/organisms/comment/approved-comment/approved-comment.stories.ts @@ -0,0 +1,65 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ApprovedComment } from './approved-comment'; + +const meta = { + component: ApprovedComment, + title: 'Organisms/Comment/Approved', +} satisfies Meta<typeof ApprovedComment>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + author: { + name: 'Kameron.Conn', + }, + content: + 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', + id: 1, + publicationDate: '2023-11-06', + }, +}; + +export const WithAvatar: Story = { + args: { + author: { + avatar: { + alt: 'Kameron.Conn avatar', + src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/82.jpg', + }, + name: 'Kameron.Conn', + }, + content: + 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', + id: 2, + publicationDate: '2023-11-06', + }, +}; + +export const WithWebsite: Story = { + args: { + author: { + name: 'Kameron.Conn', + website: 'https://www.armandphilippot.com/', + }, + content: + 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', + id: 3, + publicationDate: '2023-11-06', + }, +}; + +export const WithReplyBtn: Story = { + args: { + author: { + name: 'Kameron.Conn', + }, + content: + 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', + id: 4, + publicationDate: '2023-11-06', + replyBtn: 'Reply', + }, +}; diff --git a/src/components/organisms/comment/approved-comment/approved-comment.stories.tsx b/src/components/organisms/comment/approved-comment/approved-comment.stories.tsx deleted file mode 100644 index 36afa6b..0000000 --- a/src/components/organisms/comment/approved-comment/approved-comment.stories.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ApprovedComment } from './approved-comment'; - -/** - * ApprovedComment - Storybook Meta - */ -export default { - title: 'Organisms/Comment/ApprovedComment', - component: ApprovedComment, - argTypes: { - author: { - description: 'The author data.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - content: { - control: { - type: 'text', - }, - description: 'The comment body.', - type: { - name: 'string', - required: true, - }, - }, - id: { - control: { - type: 'string', - }, - description: 'The comment id.', - type: { - name: 'string', - required: true, - }, - }, - publicationDate: { - control: { - type: 'text', - }, - description: 'The publication date.', - type: { - name: 'string', - required: true, - }, - }, - replyBtn: { - control: { - type: null, - }, - description: 'Add a reply button.', - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta<typeof ApprovedComment>; - -const Template: ComponentStory<typeof ApprovedComment> = (args) => ( - <ApprovedComment {...args} /> -); - -/** - * ApprovedComment Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - author: { - name: 'Kameron.Conn', - }, - content: - 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', - id: 1, - publicationDate: '2023-11-06', -}; - -/** - * ApprovedComment Stories - WithAvatar - */ -export const WithAvatar = Template.bind({}); -WithAvatar.args = { - author: { - avatar: { - alt: 'Kameron.Conn avatar', - src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/82.jpg', - }, - name: 'Kameron.Conn', - }, - content: - 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', - id: 2, - publicationDate: '2023-11-06', -}; - -/** - * ApprovedComment Stories - WithWebsite - */ -export const WithWebsite = Template.bind({}); -WithWebsite.args = { - author: { - name: 'Kameron.Conn', - website: 'https://www.armandphilippot.com/', - }, - content: - 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', - id: 3, - publicationDate: '2023-11-06', -}; - -/** - * ApprovedComment Stories - WithReplyBtn - */ -export const WithReplyBtn = Template.bind({}); -WithReplyBtn.args = { - author: { - name: 'Kameron.Conn', - }, - content: - 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', - id: 4, - publicationDate: '2023-11-06', - replyBtn: 'Reply', -}; diff --git a/src/components/organisms/comment/pending-comment/pending-comment.stories.ts b/src/components/organisms/comment/pending-comment/pending-comment.stories.ts new file mode 100644 index 0000000..d823082 --- /dev/null +++ b/src/components/organisms/comment/pending-comment/pending-comment.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { PendingComment } from './pending-comment'; + +const meta = { + component: PendingComment, + title: 'Organisms/Comment/Pending', +} satisfies Meta<typeof PendingComment>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/comment/pending-comment/pending-comment.stories.tsx b/src/components/organisms/comment/pending-comment/pending-comment.stories.tsx deleted file mode 100644 index 1b6e1d9..0000000 --- a/src/components/organisms/comment/pending-comment/pending-comment.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PendingComment } from './pending-comment'; - -/** - * PendingComment - Storybook Meta - */ -export default { - title: 'Organisms/Comment/PendingComment', - component: PendingComment, - argTypes: {}, -} as ComponentMeta<typeof PendingComment>; - -const Template: ComponentStory<typeof PendingComment> = (args) => ( - <PendingComment {...args} /> -); - -/** - * PendingComment Stories - Default - */ -export const Default = Template.bind({}); -Default.args = {}; diff --git a/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx b/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx index 57174ea..1638e15 100644 --- a/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx +++ b/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx @@ -1,25 +1,19 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from '../../../atoms'; import { ReplyCommentForm } from './reply-comment-form'; -/** - * ReplyCommentForm - Storybook Meta - */ -export default { - title: 'Organisms/Comment/ReplyCommentForm', +const meta = { component: ReplyCommentForm, - argTypes: {}, -} as ComponentMeta<typeof ReplyCommentForm>; + title: 'Organisms/Comment/Reply Form', +} satisfies Meta<typeof ReplyCommentForm>; -const Template: ComponentStory<typeof ReplyCommentForm> = (args) => ( - <ReplyCommentForm {...args} /> -); +export default meta; -/** - * ReplyCommentForm Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - commentId: 5, - heading: <Heading level={2}>Reply to comment 5</Heading>, +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + commentId: 5, + heading: <Heading level={2}>Reply to comment 5</Heading>, + }, }; diff --git a/src/components/organisms/comments-list/comments-list.stories.tsx b/src/components/organisms/comments-list/comments-list.stories.ts index afebfb7..24c05cb 100644 --- a/src/components/organisms/comments-list/comments-list.stories.tsx +++ b/src/components/organisms/comments-list/comments-list.stories.ts @@ -1,61 +1,21 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; +import type { CommentFormSubmit } from '../forms'; import { type CommentData, CommentsList } from './comments-list'; -const saveComment = () => undefined; - -/** - * CommentsList - Storybook Meta - */ -export default { - title: 'Organisms/CommentsList', +const meta = { component: CommentsList, - argTypes: { - comments: { - control: { - type: null, - }, - description: 'An array of comments.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - depth: { - control: { - type: 'number', - min: 0, - max: 4, - }, - description: 'The maximum depth. Use `0` to hide replies.', - table: { - category: 'Options', - defaultValue: { summary: 0 }, - }, - type: { - name: 'number', - required: false, - }, - }, - onSubmit: { - control: { - type: null, - }, - description: 'A callback function to save the comment form data.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta<typeof CommentsList>; + title: 'Organisms/CommentsList', +} satisfies Meta<typeof CommentsList>; + +export default meta; + +type Story = StoryObj<typeof meta>; -const Template: ComponentStory<typeof CommentsList> = (args) => ( - <CommentsList {...args} /> -); +const saveComment: CommentFormSubmit = () => { + console.log('Comment saved!'); + + return undefined; +}; const comments = [ { @@ -156,33 +116,27 @@ const comments = [ }, ] satisfies CommentData[]; -/** - * Layout Stories - Without nested comments - */ -export const WithoutReplies = Template.bind({}); -WithoutReplies.args = { - comments, - depth: 0, - onSubmit: saveComment, +export const WithoutReplies: Story = { + args: { + comments, + depth: 0, + onSubmit: saveComment, + }, }; -/** - * Layout Stories - With nested comments - */ -export const WithReplies = Template.bind({}); -WithReplies.args = { - comments, - depth: 2, - onSubmit: saveComment, +export const WithReplies: Story = { + args: { + comments, + depth: 2, + onSubmit: saveComment, + }, }; -/** - * Layout Stories - With nested comments and forbidden replies - */ -export const WithForbiddenReplies = Template.bind({}); -WithForbiddenReplies.args = { - areRepliesForbidden: true, - comments, - depth: 3, - onSubmit: saveComment, +export const WithForbiddenReplies: Story = { + args: { + areRepliesForbidden: true, + comments, + depth: 3, + onSubmit: saveComment, + }, }; diff --git a/src/components/organisms/forms/comment-form/comment-form.stories.ts b/src/components/organisms/forms/comment-form/comment-form.stories.ts new file mode 100644 index 0000000..0518f61 --- /dev/null +++ b/src/components/organisms/forms/comment-form/comment-form.stories.ts @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { CommentForm, type CommentFormSubmit } from './comment-form'; + +const meta = { + component: CommentForm, + title: 'Organisms/Forms/Comment', +} satisfies Meta<typeof CommentForm>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const saveComment: CommentFormSubmit = () => { + console.log('Comment saved!'); + + return undefined; +}; + +export const Example: Story = { + args: { + onSubmit: saveComment, + }, +}; diff --git a/src/components/organisms/forms/comment-form/comment-form.stories.tsx b/src/components/organisms/forms/comment-form/comment-form.stories.tsx deleted file mode 100644 index fcc76fa..0000000 --- a/src/components/organisms/forms/comment-form/comment-form.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { CommentForm as CommentFormComponent } from './comment-form'; - -/** - * CommentForm - Storybook Meta - */ -export default { - title: 'Organisms/Forms', - component: CommentFormComponent, - argTypes: { - parentId: { - control: { - type: null, - }, - description: 'The parent id if it is a reply.', - type: { - name: 'number', - required: false, - }, - }, - onSubmit: { - control: { - type: null, - }, - description: 'A callback function to process the comment form data.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta<typeof CommentFormComponent>; - -const Template: ComponentStory<typeof CommentFormComponent> = (args) => ( - <CommentFormComponent {...args} /> -); - -/** - * Forms Stories - Comment form - */ -export const CommentForm = Template.bind({}); diff --git a/src/components/organisms/forms/contact-form/contact-form.stories.ts b/src/components/organisms/forms/contact-form/contact-form.stories.ts new file mode 100644 index 0000000..cd2cd1b --- /dev/null +++ b/src/components/organisms/forms/contact-form/contact-form.stories.ts @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ContactForm, type ContactFormSubmit } from './contact-form'; + +const meta = { + component: ContactForm, + title: 'Organisms/Forms/Contact', +} satisfies Meta<typeof ContactForm>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const sendMail: ContactFormSubmit = () => { + console.log('Mail sent!'); + + return undefined; +}; + +export const Example: Story = { + args: { + onSubmit: sendMail, + }, +}; diff --git a/src/components/organisms/forms/contact-form/contact-form.stories.tsx b/src/components/organisms/forms/contact-form/contact-form.stories.tsx deleted file mode 100644 index 46111e1..0000000 --- a/src/components/organisms/forms/contact-form/contact-form.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ContactForm } from './contact-form'; - -/** - * ContactForm - Storybook Meta - */ -export default { - title: 'Organisms/Forms', - component: ContactForm, - argTypes: { - onSubmit: { - control: { - type: null, - }, - description: 'A callback function to process the contact form data.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta<typeof ContactForm>; - -const Template: ComponentStory<typeof ContactForm> = (args) => ( - <ContactForm {...args} /> -); - -/** - * ContactForm Stories - Contact - */ -export const Contact = Template.bind({}); -Contact.args = {}; diff --git a/src/components/organisms/forms/search-form/search-form.stories.ts b/src/components/organisms/forms/search-form/search-form.stories.ts new file mode 100644 index 0000000..203d4a6 --- /dev/null +++ b/src/components/organisms/forms/search-form/search-form.stories.ts @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { SearchForm, type SearchFormSubmit } from './search-form'; + +const meta = { + component: SearchForm, + title: 'Organisms/Forms/Search', +} satisfies Meta<typeof SearchForm>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const search: SearchFormSubmit = () => { + console.log('Searching!'); + + return undefined; +}; + +export const Example: Story = { + args: { + onSubmit: search, + }, +}; + +export const WithLabelHidden: Story = { + args: { + isLabelHidden: true, + onSubmit: search, + }, +}; diff --git a/src/components/organisms/forms/search-form/search-form.stories.tsx b/src/components/organisms/forms/search-form/search-form.stories.tsx deleted file mode 100644 index d8e4339..0000000 --- a/src/components/organisms/forms/search-form/search-form.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { SearchForm } from './search-form'; - -/** - * SearchForm - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Search', - component: SearchForm, - argTypes: { - isLabelHidden: { - control: { - type: 'boolean', - }, - description: 'Determine if the input label should be visually hidden.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, -} as ComponentMeta<typeof SearchForm>; - -const Template: ComponentStory<typeof SearchForm> = (args) => ( - <SearchForm {...args} /> -); - -/** - * SearchForm Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - isLabelHidden: false, -}; - -/** - * SearchForm Stories - With hidden label - */ -export const WithHiddenLabel = Template.bind({}); -WithHiddenLabel.args = { - isLabelHidden: true, -}; diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.ts b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.ts new file mode 100644 index 0000000..1ec157d --- /dev/null +++ b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { AckeeToggle } from './ackee-toggle'; + +const meta = { + component: AckeeToggle, + title: 'Organisms/Forms/Settings/Ackee', +} satisfies Meta<typeof AckeeToggle>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx deleted file mode 100644 index abaf59f..0000000 --- a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { AckeeToggle } from './ackee-toggle'; - -/** - * AckeeToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings/Items', - component: AckeeToggle, - argTypes: {}, -} as ComponentMeta<typeof AckeeToggle>; - -const Template: ComponentStory<typeof AckeeToggle> = (args) => ( - <AckeeToggle {...args} /> -); - -/** - * Toggle Stories - Ackee - */ -export const Ackee = Template.bind({}); -Ackee.args = {}; diff --git a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.ts b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.ts new file mode 100644 index 0000000..5244ae1 --- /dev/null +++ b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { MotionToggle } from './motion-toggle'; + +const meta = { + component: MotionToggle, + title: 'Organisms/Forms/Settings/Motion', +} satisfies Meta<typeof MotionToggle>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx deleted file mode 100644 index 67cea37..0000000 --- a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { MotionToggle } from './motion-toggle'; - -/** - * MotionToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings/Items', - component: MotionToggle, - argTypes: {}, -} as ComponentMeta<typeof MotionToggle>; - -const Template: ComponentStory<typeof MotionToggle> = (args) => ( - <MotionToggle {...args} /> -); - -/** - * Toggle Stories - Motion - */ -export const Motion = Template.bind({}); -Motion.args = {}; diff --git a/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.ts b/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.ts new file mode 100644 index 0000000..0e4c746 --- /dev/null +++ b/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { PrismThemeToggle } from './prism-theme-toggle'; + +const meta = { + component: PrismThemeToggle, + title: 'Organisms/Forms/Settings/Prism Theme', +} satisfies Meta<typeof PrismThemeToggle>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.tsx b/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.tsx deleted file mode 100644 index 9313bf2..0000000 --- a/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PrismThemeToggle } from './prism-theme-toggle'; - -/** - * PrismThemeToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings/Items', - component: PrismThemeToggle, - argTypes: {}, -} as ComponentMeta<typeof PrismThemeToggle>; - -const Template: ComponentStory<typeof PrismThemeToggle> = (args) => ( - <PrismThemeToggle {...args} /> -); - -/** - * Toggle Stories - Prism theme - */ -export const PrismTheme = Template.bind({}); diff --git a/src/components/organisms/forms/settings-form/settings-form.stories.ts b/src/components/organisms/forms/settings-form/settings-form.stories.ts new file mode 100644 index 0000000..3f9ec3e --- /dev/null +++ b/src/components/organisms/forms/settings-form/settings-form.stories.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import type { FormEventHandler } from 'react'; +import { SettingsForm } from './settings-form'; + +const meta = { + component: SettingsForm, + title: 'Organisms/Forms/Settings', +} satisfies Meta<typeof SettingsForm>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const doNothing: FormEventHandler = (e) => { + e.preventDefault(); + + return undefined; +}; + +export const Example: Story = { + args: { + onSubmit: doNothing, + }, +}; diff --git a/src/components/organisms/forms/settings-form/settings-form.stories.tsx b/src/components/organisms/forms/settings-form/settings-form.stories.tsx deleted file mode 100644 index da93bfa..0000000 --- a/src/components/organisms/forms/settings-form/settings-form.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { SettingsForm } from './settings-form'; - -/** - * SettingsForm - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings', - component: SettingsForm, - argTypes: {}, -} as ComponentMeta<typeof SettingsForm>; - -const Template: ComponentStory<typeof SettingsForm> = (args) => ( - <SettingsForm {...args} /> -); - -/** - * Forms Stories - Settings - */ -export const Settings = Template.bind({}); -Settings.args = {}; diff --git a/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.ts b/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.ts new file mode 100644 index 0000000..eecc3c1 --- /dev/null +++ b/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ThemeToggle } from './theme-toggle'; + +const meta = { + component: ThemeToggle, + title: 'Organisms/Forms/Settings/Theme', +} satisfies Meta<typeof ThemeToggle>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.tsx b/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.tsx deleted file mode 100644 index 4742adf..0000000 --- a/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ThemeToggle } from './theme-toggle'; - -/** - * ThemeToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings/Items', - component: ThemeToggle, - argTypes: {}, -} as ComponentMeta<typeof ThemeToggle>; - -const Template: ComponentStory<typeof ThemeToggle> = (args) => ( - <ThemeToggle {...args} /> -); - -/** - * Toggle Stories - Theme - */ -export const Theme = Template.bind({}); diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts new file mode 100644 index 0000000..4667caf --- /dev/null +++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Breadcrumbs } from './breadcrumbs'; + +const meta = { + component: Breadcrumbs, + title: 'Organisms/Nav/Breadcrumbs', +} satisfies Meta<typeof Breadcrumbs>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const OneItem: Story = { + args: { + items: [{ id: 'home', slug: '#', label: 'Home' }], + }, +}; + +export const TwoItems: Story = { + args: { + items: [ + { id: 'home', slug: '#', label: 'Home' }, + { id: 'blog', slug: '#', label: 'Blog' }, + ], + }, +}; + +export const ThreeItemsOrMore: Story = { + args: { + items: [ + { id: 'home', slug: '#', label: 'Home' }, + { id: 'blog', slug: '#', label: 'Blog' }, + { id: 'post1', slug: '#', label: 'A Post' }, + ], + }, +}; diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx deleted file mode 100644 index 0b6fd27..0000000 --- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Breadcrumbs } from './breadcrumbs'; - -/** - * Breadcrumbs - Storybook Meta - */ -export default { - title: 'Organisms/Nav/Breadcrumbs', - component: Breadcrumbs, - argTypes: { - items: { - description: 'The breadcrumb items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof Breadcrumbs>; - -const Template: ComponentStory<typeof Breadcrumbs> = (args) => ( - <Breadcrumbs {...args} /> -); - -/** - * Breadcrumbs Stories - One item - */ -export const OneItem = Template.bind({}); -OneItem.args = { - items: [{ id: 'home', slug: '#', label: 'Home' }], -}; - -/** - * Breadcrumbs Stories - Two items - */ -export const TwoItems = Template.bind({}); -TwoItems.args = { - items: [ - { id: 'home', slug: '#', label: 'Home' }, - { id: 'blog', slug: '#', label: 'Blog' }, - ], -}; - -/** - * Breadcrumbs Stories - Three items - */ -export const ThreeItems = Template.bind({}); -ThreeItems.args = { - items: [ - { id: 'home', slug: '#', label: 'Home' }, - { id: 'blog', slug: '#', label: 'Blog' }, - { id: 'post1', slug: '#', label: 'A Post' }, - ], -}; diff --git a/src/components/organisms/nav/main-nav/main-nav.stories.tsx b/src/components/organisms/nav/main-nav/main-nav.stories.tsx index 6333f2c..c18d0d5 100644 --- a/src/components/organisms/nav/main-nav/main-nav.stories.tsx +++ b/src/components/organisms/nav/main-nav/main-nav.stories.tsx @@ -1,71 +1,54 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Icon } from '../../../atoms'; import { MainNav } from './main-nav'; -/** - * MainNav - Storybook Meta - */ -export default { - title: 'Organisms/Nav/MainNav', +const meta = { component: MainNav, - argTypes: { - items: { - description: 'The main nav items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof MainNav>; + title: 'Organisms/Nav/MainNav', +} satisfies Meta<typeof MainNav>; + +export default meta; -const Template: ComponentStory<typeof MainNav> = (args) => ( - <MainNav {...args} /> -); +type Story = StoryObj<typeof meta>; -/** - * MainNav Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - items: [ - { id: 'home', label: 'Home', href: '#home' }, - { id: 'blog', label: 'Blog', href: '#blog' }, - { id: 'projects', label: 'Projects', href: '#projects' }, - { id: 'contact', label: 'Contact', href: '#contact' }, - ], +export const Example: Story = { + args: { + items: [ + { id: 'home', label: 'Home', href: '#home' }, + { id: 'blog', label: 'Blog', href: '#blog' }, + { id: 'projects', label: 'Projects', href: '#projects' }, + { id: 'contact', label: 'Contact', href: '#contact' }, + ], + }, }; -/** - * MainNav Stories - WithLogo - */ -export const WithLogo = Template.bind({}); -WithLogo.args = { - items: [ - { - id: 'home', - label: 'Home', - href: '#home', - logo: <Icon aria-hidden shape="home" />, - }, - { - id: 'blog', - label: 'Blog', - href: '#blog', - logo: <Icon aria-hidden shape="posts-stack" />, - }, - { - id: 'projects', - label: 'Projects', - href: '#projects', - logo: <Icon aria-hidden shape="computer" />, - }, - { - id: 'contact', - label: 'Contact', - href: '#contact', - logo: <Icon aria-hidden shape="envelop" />, - }, - ], +export const WithLogo: Story = { + args: { + items: [ + { + id: 'home', + label: 'Home', + href: '#home', + logo: <Icon aria-hidden shape="home" />, + }, + { + id: 'blog', + label: 'Blog', + href: '#blog', + logo: <Icon aria-hidden shape="posts-stack" />, + }, + { + id: 'projects', + label: 'Projects', + href: '#projects', + logo: <Icon aria-hidden shape="computer" />, + }, + { + id: 'contact', + label: 'Contact', + href: '#contact', + logo: <Icon aria-hidden shape="envelop" />, + }, + ], + }, }; diff --git a/src/components/organisms/nav/pagination/pagination.stories.ts b/src/components/organisms/nav/pagination/pagination.stories.ts new file mode 100644 index 0000000..fb1875f --- /dev/null +++ b/src/components/organisms/nav/pagination/pagination.stories.ts @@ -0,0 +1,95 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { + Pagination, + type RenderPaginationItemAriaLabel, + type RenderPaginationLink, +} from './pagination'; + +const meta = { + component: Pagination, + title: 'Organisms/Nav/Pagination', +} satisfies Meta<typeof Pagination>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const renderLink: RenderPaginationLink = (num: number) => `#page-${num}`; + +const renderItemAriaLabel: RenderPaginationItemAriaLabel = ({ + kind, + pageNumber, + isCurrentPage, +}) => { + switch (kind) { + case 'backward': + return 'Go to previous page'; + case 'forward': + return 'Go to next page'; + case 'number': + default: + return isCurrentPage + ? `Current page, page ${pageNumber}` + : `Go to page ${pageNumber}`; + } +}; + +export const RightEllipsis: Story = { + args: { + current: 2, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const LeftEllipsis: Story = { + args: { + current: 49, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const BothEllipsis: Story = { + args: { + current: 25, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const WithoutEllipsis: Story = { + args: { + current: 2, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; + +export const WithoutBackwardLink: Story = { + args: { + current: 1, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; + +export const WithoutForwardLink: Story = { + args: { + current: 5, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; diff --git a/src/components/organisms/nav/pagination/pagination.stories.tsx b/src/components/organisms/nav/pagination/pagination.stories.tsx deleted file mode 100644 index 83f3a63..0000000 --- a/src/components/organisms/nav/pagination/pagination.stories.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { - Pagination, - type RenderPaginationItemAriaLabel, - type RenderPaginationLink, -} from './pagination'; - -/** - * Pagination - Storybook Meta - */ -export default { - title: 'Organisms/Nav/Pagination', - component: Pagination, - args: { - siblings: 1, - }, - argTypes: { - current: { - control: { - type: 'number', - }, - description: 'The current page number.', - type: { - name: 'number', - required: true, - }, - }, - siblings: { - control: { - type: 'number', - }, - description: - 'The number of pages to show next to the current page for one side.', - table: { - category: 'Options', - defaultValue: { summary: 1 }, - }, - type: { - name: 'number', - required: false, - }, - }, - total: { - control: { - type: 'number', - }, - description: 'The total number of items.', - type: { - name: 'number', - required: true, - }, - }, - }, -} as ComponentMeta<typeof Pagination>; - -const Template: ComponentStory<typeof Pagination> = (args) => ( - <Pagination {...args} /> -); - -const renderLink: RenderPaginationLink = (num: number) => `#page-${num}`; - -const renderItemAriaLabel: RenderPaginationItemAriaLabel = ({ - kind, - pageNumber, - isCurrentPage, -}) => { - switch (kind) { - case 'backward': - return 'Go to previous page'; - case 'forward': - return 'Go to next page'; - case 'number': - default: - return isCurrentPage - ? `Current page, page ${pageNumber}` - : `Go to page ${pageNumber}`; - } -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the beginning - */ -export const RightEllipsis = Template.bind({}); -RightEllipsis.args = { - current: 2, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the end - */ -export const LeftEllipsis = Template.bind({}); -LeftEllipsis.args = { - current: 49, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the middle - */ -export const BothEllipsis = Template.bind({}); -BothEllipsis.args = { - current: 25, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - Less than 5 pages - */ -export const WithoutEllipsis = Template.bind({}); -WithoutEllipsis.args = { - current: 2, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; - -/** - * Pagination Stories - First page selected - */ -export const WithoutBackwardLink = Template.bind({}); -WithoutBackwardLink.args = { - current: 1, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; - -/** - * Pagination Stories - Last page selected - */ -export const WithoutForwardLink = Template.bind({}); -WithoutForwardLink.args = { - current: 5, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts b/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts new file mode 100644 index 0000000..6311a95 --- /dev/null +++ b/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { NavbarItem } from './navbar-item'; + +const meta = { + component: NavbarItem, + title: 'Organisms/Navbar/Item', +} satisfies Meta<typeof NavbarItem>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The modal contents.', + icon: 'cog', + id: 'default', + label: 'Open example', + }, +}; + +export const ModalVisibleAfterBreakpoint: Story = { + args: { + children: 'The modal contents.', + icon: 'cog', + id: 'modal-visible', + label: 'Open example', + modalVisibleFrom: 'md', + }, +}; diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx b/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx deleted file mode 100644 index 93b7281..0000000 --- a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { NavbarItem } from './navbar-item'; - -/** - * NavbarItem - Storybook Meta - */ -export default { - title: 'Organisms/Navbar/Item', - component: NavbarItem, - argTypes: {}, -} as ComponentMeta<typeof NavbarItem>; - -const Template: ComponentStory<typeof NavbarItem> = (args) => ( - <NavbarItem {...args} /> -); - -/** - * NavbarItem Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: 'The modal contents.', - icon: 'cog', - id: 'default', - label: 'Open example', -}; - -/** - * NavbarItem Stories - ModalVisibleAfterBreakpoint - */ -export const ModalVisibleAfterBreakpoint = Template.bind({}); -ModalVisibleAfterBreakpoint.args = { - children: 'The modal contents.', - icon: 'cog', - id: 'modal-visible', - label: 'Open example', - modalVisibleFrom: 'md', -}; diff --git a/src/components/organisms/navbar/navbar.stories.tsx b/src/components/organisms/navbar/navbar.stories.tsx index 95b71ef..a52602e 100644 --- a/src/components/organisms/navbar/navbar.stories.tsx +++ b/src/components/organisms/navbar/navbar.stories.tsx @@ -1,77 +1,55 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Navbar as NavbarComponent } from './navbar'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Navbar } from './navbar'; import { NavbarItem } from './navbar-item'; -/** - * Navbar - Storybook Meta - */ -export default { +const meta = { + component: Navbar, title: 'Organisms/Navbar', - component: NavbarComponent, - argTypes: { - children: { - description: 'The navbar items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, - parameters: { - layout: 'fullscreen', - }, -} as ComponentMeta<typeof NavbarComponent>; +} satisfies Meta<typeof Navbar>; -const Template: ComponentStory<typeof NavbarComponent> = (args) => ( - <NavbarComponent {...args} /> -); +export default meta; -/** - * Navbar Stories - 1 item - */ -export const OneItem = Template.bind({}); -OneItem.args = { - children: ( - <NavbarItem icon="hamburger" id="main-nav" label="Nav"> - The main nav contents - </NavbarItem> - ), -}; +type Story = StoryObj<typeof meta>; -/** - * Navbar Stories - 2 items - */ -export const TwoItems = Template.bind({}); -TwoItems.args = { - children: ( - <> +export const OneItem: Story = { + args: { + children: ( <NavbarItem icon="hamburger" id="main-nav" label="Nav"> The main nav contents </NavbarItem> - <NavbarItem icon="magnifying-glass" id="search" label="Search"> - A search form - </NavbarItem> - </> - ), + ), + }, }; -/** - * Navbar Stories - 3 items - */ -export const ThreeItems = Template.bind({}); -ThreeItems.args = { - children: ( - <> - <NavbarItem icon="hamburger" id="main-nav" label="Nav"> - The main nav contents - </NavbarItem> - <NavbarItem icon="magnifying-glass" id="search" label="Search"> - A search form - </NavbarItem> - <NavbarItem icon="cog" id="settings" label="Settings"> - A settings form - </NavbarItem> - </> - ), +export const TwoItems: Story = { + args: { + children: ( + <> + <NavbarItem icon="hamburger" id="main-nav" label="Nav"> + The main nav contents + </NavbarItem> + <NavbarItem icon="magnifying-glass" id="search" label="Search"> + A search form + </NavbarItem> + </> + ), + }, +}; + +export const ThreeItems: Story = { + args: { + children: ( + <> + <NavbarItem icon="hamburger" id="main-nav" label="Nav"> + The main nav contents + </NavbarItem> + <NavbarItem icon="magnifying-glass" id="search" label="Search"> + A search form + </NavbarItem> + <NavbarItem icon="cog" id="settings" label="Settings"> + A settings form + </NavbarItem> + </> + ), + }, }; diff --git a/src/components/organisms/post-preview/post-preview.stories.tsx b/src/components/organisms/post-preview/post-preview.stories.tsx index c22698f..e7edfdb 100644 --- a/src/components/organisms/post-preview/post-preview.stories.tsx +++ b/src/components/organisms/post-preview/post-preview.stories.tsx @@ -1,157 +1,79 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { PostPreview } from './post-preview'; -/** - * PostPreview - Storybook Meta - */ -export default { - title: 'Organisms/PostPreview', +const meta = { component: PostPreview, - argTypes: { - cover: { - description: 'The cover data.', - table: { - category: 'Options', - }, - type: { - name: 'object', - required: false, - value: {}, - }, - }, - excerpt: { - control: { - type: 'text', - }, - description: 'The page excerpt.', - type: { - name: 'string', - required: true, - }, - }, - meta: { - description: 'The page metadata.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - heading: { - control: { - type: 'text', - }, - description: 'The page title', - type: { - name: 'string', - required: true, - }, - }, - headingLvl: { - control: { - type: 'number', - min: 1, - max: 6, - }, - description: 'The page title level (hn)', - table: { - category: 'Options', - defaultValue: { summary: 2 }, - }, - type: { - name: 'number', - required: false, - }, - }, - url: { - control: { - type: 'text', - }, - description: 'The page url.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof PostPreview>; + title: 'Organisms/PostPreview', +} satisfies Meta<typeof PostPreview>; -const Template: ComponentStory<typeof PostPreview> = (args) => ( - <PostPreview {...args} /> -); +export default meta; -/** - * PostPreview Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - url: '#post', +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + url: '#post', + }, }; -/** - * PostPreview Stories - WithCover - */ -export const WithCover = Template.bind({}); -WithCover.args = { - cover: ( - <NextImage - alt="" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - ), - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - url: '#post', +export const WithCover: Story = { + args: { + cover: ( + <NextImage + alt="" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + ), + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + url: '#post', + }, }; -/** - * PostPreview Stories - WithMeta - */ -export const WithMeta = Template.bind({}); -WithMeta.args = { - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - meta: { - publicationDate: '06/11/2023', - thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], - wordsCount: 300, +export const WithMeta: Story = { + args: { + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + meta: { + publicationDate: '06/11/2023', + thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], + wordsCount: 300, + }, + url: '#post', }, - url: '#post', }; -/** - * PostPreview Stories - WithCoverAndMeta - */ -export const WithCoverAndMeta = Template.bind({}); -WithCoverAndMeta.args = { - cover: ( - <NextImage - alt="" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - ), - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - meta: { - publicationDate: '06/11/2023', - wordsCount: 300, - thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], - comments: { - count: 3, - postHeading: 'The post title', - url: '#comments', +export const WithCoverAndMeta: Story = { + args: { + cover: ( + <NextImage + alt="" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + ), + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + meta: { + publicationDate: '06/11/2023', + wordsCount: 300, + thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], + comments: { + count: 3, + postHeading: 'The post title', + url: '#comments', + }, }, + url: '#post', }, - url: '#post', }; diff --git a/src/components/organisms/posts-list/posts-list.stories.tsx b/src/components/organisms/posts-list/posts-list.stories.tsx index 0a00afe..5ed1f44 100644 --- a/src/components/organisms/posts-list/posts-list.stories.tsx +++ b/src/components/organisms/posts-list/posts-list.stories.tsx @@ -1,181 +1,88 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PostsList } from './posts-list'; +import type { Meta, StoryObj } from '@storybook/react'; +import NextImage from 'next/image'; +import { wpPostsFixture } from '../../../../tests/fixtures'; +import { type PostData, PostsList } from './posts-list'; -/** - * PostsList - Storybook Meta - */ -export default { - title: 'Organisms/PostsList', +const meta = { component: PostsList, - args: {}, - argTypes: { - baseUrl: { - control: { - type: 'text', - }, - description: 'The pagination base url.', - table: { - category: 'Options', - defaultValue: { summary: '/page/' }, - }, - type: { - name: 'string', - required: false, - }, - }, - byYear: { - control: { - type: 'boolean', - }, - description: 'True to display the posts by year.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isLoading: { - control: { - type: 'boolean', - }, - description: 'Determine if the data is loading.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - loadMore: { - control: { - type: null, - }, - description: 'A function to load more posts on button click.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - pageNumber: { - control: { - type: 'number', - }, - description: 'The current page number.', - table: { - category: 'Options', - defaultValue: { summary: 1 }, - }, - type: { - name: 'number', - required: false, - }, - }, - posts: { - description: 'The posts data.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - showLoadMoreBtn: { - control: { - type: 'boolean', - }, - description: 'Determine if the load more button should be visible.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - siblings: { - control: { - type: 'number', - }, - description: 'The number of page siblings inside pagination.', - table: { - category: 'Options', - defaultValue: { summary: 1 }, - }, - type: { - name: 'number', - required: false, - }, - }, - titleLevel: { - control: { - type: 'number', - min: 1, - max: 6, - }, - description: 'The title level (hn).', - table: { - category: 'Options', - defaultValue: { summary: 2 }, - }, - type: { - name: 'number', - required: false, - }, - }, - total: { - control: { - type: 'number', - }, - description: 'The number of posts.', - type: { - name: 'number', - required: true, - }, - }, - }, -} as ComponentMeta<typeof PostsList>; + title: 'Organisms/PostsList', +} satisfies Meta<typeof PostsList>; + +export default meta; -const Template: ComponentStory<typeof PostsList> = (args) => ( - <PostsList {...args} /> -); +type Story = StoryObj<typeof meta>; -/** - * PostsList Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - posts: [ - { - excerpt: - 'Omnis voluptatem et sit sit porro possimus quo rerum. Natus et sint cupiditate magnam omnis a consequuntur reprehenderit. Ex omnis voluptatem itaque id laboriosam qui dolorum facilis architecto. Impedit aliquid et qui quae dolorum accusamus rerum.', - heading: 'Post 1', - id: 'post1', - meta: { publicationDate: '2023-11-06' }, - url: '#post1', - }, - { - excerpt: - 'Nobis omnis excepturi deserunt laudantium unde totam quam. Voluptates maiores minima voluptatem nihil ea voluptatem similique. Praesentium ratione necessitatibus et et dolore voluptas illum dignissimos ipsum. Eius tempore ex.', - heading: 'Post 2', - id: 'post2', - meta: { publicationDate: '2023-11-05' }, - url: '#post2', - }, - { - excerpt: - 'Doloremque est dolorum explicabo. Laudantium quos delectus odit esse fugit officiis. Fugit provident vero harum atque. Eos nam qui sit ut minus voluptas. Reprehenderit rerum ut nostrum. Eos dolores mollitia quia ea voluptatem rerum vel.', - heading: 'Post 3', - id: 'post3', - meta: { publicationDate: '2023-11-04' }, - url: '#post3', - }, - ], +export const Example: Story = { + args: { + posts: wpPostsFixture.map((post): PostData => { + return { + ...post, + cover: post.featuredImage ? ( + <NextImage + alt={post.featuredImage.node.altText ?? ''} + height={post.featuredImage.node.mediaDetails.height} + src={post.featuredImage.node.sourceUrl} + title={post.featuredImage.node.title ?? undefined} + width={post.featuredImage.node.mediaDetails.width} + /> + ) : undefined, + excerpt: post.contentParts.beforeMore, + heading: post.title, + id: post.databaseId, + meta: { + author: post.author.node.name, + comments: post.commentCount + ? { + count: post.commentCount, + postHeading: post.title, + } + : undefined, + publicationDate: post.date, + updateDate: post.modified, + wordsCount: post.info.wordsCount, + }, + url: post.slug, + }; + }), + total: wpPostsFixture.length, + }, +}; + +export const WithLoadMoreButton: Story = { + args: { + posts: wpPostsFixture + .map((post): PostData => { + return { + ...post, + cover: post.featuredImage ? ( + <NextImage + alt={post.featuredImage.node.altText ?? ''} + height={post.featuredImage.node.mediaDetails.height} + src={post.featuredImage.node.sourceUrl} + title={post.featuredImage.node.title ?? undefined} + width={post.featuredImage.node.mediaDetails.width} + /> + ) : undefined, + excerpt: post.contentParts.beforeMore, + heading: post.title, + id: post.databaseId, + meta: { + author: post.author.node.name, + comments: post.commentCount + ? { + count: post.commentCount, + postHeading: post.title, + } + : undefined, + publicationDate: post.date, + updateDate: post.modified, + wordsCount: post.info.wordsCount, + }, + url: post.slug, + }; + }) + // eslint-disable-next-line @typescript-eslint/no-magic-numbers + .slice(0, 5), + total: wpPostsFixture.length, + }, }; diff --git a/src/components/organisms/posts-list/posts-list.tsx b/src/components/organisms/posts-list/posts-list.tsx index c4c6fa1..ad5bed5 100644 --- a/src/components/organisms/posts-list/posts-list.tsx +++ b/src/components/organisms/posts-list/posts-list.tsx @@ -230,7 +230,7 @@ const PostsListWithRef: ForwardRefRenderFunction< max={total} /> ) : null} - {onLoadMore ? ( + {onLoadMore && (!total || (total && posts.length < total)) ? ( <Button className={styles.btn} isLoading={isLoading} diff --git a/src/components/organisms/project-overview/project-overview.stories.tsx b/src/components/organisms/project-overview/project-overview.stories.tsx index 0c4138c..d1697f7 100644 --- a/src/components/organisms/project-overview/project-overview.stories.tsx +++ b/src/components/organisms/project-overview/project-overview.stories.tsx @@ -1,78 +1,40 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { type OverviewMeta, ProjectOverview } from './project-overview'; -/** - * ProjectOverview - Storybook Meta - */ -export default { - title: 'Organisms/ProjectOverview', +const meta = { component: ProjectOverview, - argTypes: { - cover: { - description: 'The project cover', - table: { - category: 'Options', - }, - type: { - name: 'object', - required: false, - value: {}, - }, - }, - meta: { - description: 'The overview meta.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - name: { - control: { - type: 'text', - }, - description: 'The project name.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof ProjectOverview>; + title: 'Organisms/ProjectOverview', +} satisfies Meta<typeof ProjectOverview>; -const Template: ComponentStory<typeof ProjectOverview> = (args) => ( - <ProjectOverview {...args} /> -); +export default meta; -const meta = { +type Story = StoryObj<typeof meta>; + +const projectMeta = { creationDate: '2015-09-02', lastUpdateDate: '2023-11-10', license: 'MIT', } satisfies Partial<OverviewMeta>; -/** - * ProjectOverview Stories - Meta - */ -export const Meta = Template.bind({}); -Meta.args = { - meta, - name: 'Your project', +export const Example: Story = { + args: { + meta: projectMeta, + name: 'Your project', + }, }; -/** - * ProjectOverview Stories - With cover - */ -export const WithCover = Template.bind({}); -WithCover.args = { - cover: ( - <NextImage - alt="" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - ), - meta, - name: 'Your project', +export const WithCover: Story = { + args: { + cover: ( + <NextImage + alt="" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + ), + meta: projectMeta, + name: 'Your project', + }, }; diff --git a/src/components/organisms/widgets/image-widget/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget/image-widget.stories.tsx index 33f3e7b..5f302e0 100644 --- a/src/components/organisms/widgets/image-widget/image-widget.stories.tsx +++ b/src/components/organisms/widgets/image-widget/image-widget.stories.tsx @@ -1,55 +1,16 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { Heading } from '../../../atoms'; import { ImageWidget } from './image-widget'; -/** - * ImageWidget - Storybook Meta - */ -export default { - title: 'Organisms/Widgets/Image', +const meta = { component: ImageWidget, - argTypes: { - description: { - control: { - type: 'text', - }, - description: 'Add a caption image.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - img: { - description: 'The image.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - url: { - control: { - type: 'text', - }, - description: 'Add a link to the image.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof ImageWidget>; + title: 'Organisms/Widgets/Image', +} satisfies Meta<typeof ImageWidget>; + +export default meta; -const Template: ComponentStory<typeof ImageWidget> = (args) => ( - <ImageWidget {...args} /> -); +type Story = StoryObj<typeof meta>; const image = { alt: '', @@ -58,58 +19,50 @@ const image = { width: 640, }; -/** - * ImageWidget Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - heading: ( - <Heading isFake level={3}> - Quo et totam - </Heading> - ), - img: <NextImage {...image} />, +export const Example: Story = { + args: { + heading: ( + <Heading isFake level={3}> + Quo et totam + </Heading> + ), + img: <NextImage {...image} />, + }, }; -/** - * ImageWidget Stories - WithDescription - */ -export const WithDescription = Template.bind({}); -WithDescription.args = { - description: 'Any image used as an example', - heading: ( - <Heading isFake level={3}> - Quo et totam - </Heading> - ), - img: <NextImage {...image} />, +export const WithDescription: Story = { + args: { + description: 'Any image used as an example', + heading: ( + <Heading isFake level={3}> + Quo et totam + </Heading> + ), + img: <NextImage {...image} />, + }, }; -/** - * ImageWidget Stories - WithLink - */ -export const WithLink = Template.bind({}); -WithLink.args = { - heading: ( - <Heading isFake level={3}> - Quo et totam - </Heading> - ), - img: <NextImage {...image} />, - url: 'https://www.armandphilippot.com/', +export const WithLink: Story = { + args: { + heading: ( + <Heading isFake level={3}> + Quo et totam + </Heading> + ), + img: <NextImage {...image} />, + url: 'https://www.armandphilippot.com/', + }, }; -/** - * ImageWidget Stories - WithDescriptionAndLink - */ -export const WithDescriptionAndLink = Template.bind({}); -WithDescriptionAndLink.args = { - description: 'Any image used as an example', - heading: ( - <Heading isFake level={3}> - Quo et totam - </Heading> - ), - img: <NextImage {...image} />, - url: 'https://www.armandphilippot.com/', +export const WithDescriptionAndLink: Story = { + args: { + description: 'Any image used as an example', + heading: ( + <Heading isFake level={3}> + Quo et totam + </Heading> + ), + img: <NextImage {...image} />, + url: 'https://www.armandphilippot.com/', + }, }; diff --git a/src/components/organisms/widgets/links-widget/links-widget.stories.tsx b/src/components/organisms/widgets/links-widget/links-widget.stories.tsx index 3a0b027..738278a 100644 --- a/src/components/organisms/widgets/links-widget/links-widget.stories.tsx +++ b/src/components/organisms/widgets/links-widget/links-widget.stories.tsx @@ -1,31 +1,15 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from '../../../atoms'; import { LinksWidget, type LinksWidgetItemData } from './links-widget'; -/** - * LinksWidget - Storybook Meta - */ -export default { - title: 'Organisms/Widgets/Links', +const meta = { component: LinksWidget, - args: { - isOrdered: false, - }, - argTypes: { - items: { - description: 'The links data.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof LinksWidget>; + title: 'Organisms/Widgets/Links', +} satisfies Meta<typeof LinksWidget>; -const Template: ComponentStory<typeof LinksWidget> = (args) => ( - <LinksWidget {...args} /> -); +export default meta; + +type Story = StoryObj<typeof meta>; const items = [ { id: 'item11', label: 'Level 1: Item 1', url: '#' }, @@ -52,29 +36,25 @@ const items = [ { id: 'item14', label: 'Level 1: Item 4', url: '#' }, ] satisfies LinksWidgetItemData[]; -/** - * Links List Widget Stories - Unordered - */ -export const Unordered = Template.bind({}); -Unordered.args = { - heading: ( - <Heading isFake level={3}> - Quo et totam - </Heading> - ), - items, +export const Unordered: Story = { + args: { + heading: ( + <Heading isFake level={3}> + Quo et totam + </Heading> + ), + items, + }, }; -/** - * Links List Widget Stories - Ordered - */ -export const Ordered = Template.bind({}); -Ordered.args = { - heading: ( - <Heading isFake level={3}> - Quo et totam - </Heading> - ), - isOrdered: true, - items, +export const Ordered: Story = { + args: { + heading: ( + <Heading isFake level={3}> + Quo et totam + </Heading> + ), + isOrdered: true, + items, + }, }; diff --git a/src/components/organisms/widgets/sharing-widget/sharing-widget.stories.tsx b/src/components/organisms/widgets/sharing-widget/sharing-widget.stories.tsx index 3e3cb68..773d251 100644 --- a/src/components/organisms/widgets/sharing-widget/sharing-widget.stories.tsx +++ b/src/components/organisms/widgets/sharing-widget/sharing-widget.stories.tsx @@ -1,50 +1,25 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from '../../../atoms'; import { SharingWidget } from './sharing-widget'; -/** - * SharingWidget - Storybook Meta - */ -export default { - title: 'Organisms/Widgets/Sharing', +const meta = { component: SharingWidget, - argTypes: { - data: { - description: 'The page data.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - media: { - control: { - type: null, - }, - description: 'An array of active and ordered sharing medium.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof SharingWidget>; + title: 'Organisms/Widgets/Sharing', +} satisfies Meta<typeof SharingWidget>; + +export default meta; -const Template: ComponentStory<typeof SharingWidget> = (args) => ( - <SharingWidget {...args} /> -); +type Story = StoryObj<typeof meta>; -/** - * SharingWidget Stories - Sharing - */ -export const Sharing = Template.bind({}); -Sharing.args = { - data: { - excerpt: - 'Alias similique eius ducimus laudantium aspernatur. Est rem ut eum temporibus sit reprehenderit aut non molestias. Vel dolorem expedita labore quo inventore aliquid nihil nam. Possimus nobis enim quas corporis eos.', - title: 'Accusantium totam nostrum', - url: 'https://www.example.test', +export const Sharing: Story = { + args: { + data: { + excerpt: + 'Alias similique eius ducimus laudantium aspernatur. Est rem ut eum temporibus sit reprehenderit aut non molestias. Vel dolorem expedita labore quo inventore aliquid nihil nam. Possimus nobis enim quas corporis eos.', + title: 'Accusantium totam nostrum', + url: 'https://www.example.test', + }, + heading: <Heading level={3}>Share</Heading>, + media: ['diaspora', 'facebook', 'linkedin', 'twitter', 'email'], }, - heading: <Heading level={3}>Share</Heading>, - media: ['diaspora', 'facebook', 'linkedin', 'twitter', 'email'], }; diff --git a/src/components/organisms/widgets/social-media-widget/social-media-widget.stories.tsx b/src/components/organisms/widgets/social-media-widget/social-media-widget.stories.tsx index 5c6efb0..983ca48 100644 --- a/src/components/organisms/widgets/social-media-widget/social-media-widget.stories.tsx +++ b/src/components/organisms/widgets/social-media-widget/social-media-widget.stories.tsx @@ -1,43 +1,28 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from '../../../atoms'; -import { SocialMediaWidget, type SocialMediaData } from './social-media-widget'; +import { type SocialMediaData, SocialMediaWidget } from './social-media-widget'; -/** - * SocialMedia - Storybook Meta - */ -export default { - title: 'Organisms/Widgets/SocialMedia', +const meta = { component: SocialMediaWidget, - argTypes: { - media: { - description: 'The social media data.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof SocialMediaWidget>; + title: 'Organisms/Widgets/Social Media', +} satisfies Meta<typeof SocialMediaWidget>; + +export default meta; -const Template: ComponentStory<typeof SocialMediaWidget> = (args) => ( - <SocialMediaWidget {...args} /> -); +type Story = StoryObj<typeof meta>; const media: SocialMediaData[] = [ { icon: 'Github', id: 'github', label: 'Github', url: '#' }, { icon: 'LinkedIn', id: 'gitlab', label: 'Gitlab', url: '#' }, ]; -/** - * Widgets Stories - Social media - */ -export const SocialMedia = Template.bind({}); -SocialMedia.args = { - heading: ( - <Heading isFake level={3}> - Follow me - </Heading> - ), - media, +export const SocialMedia: Story = { + args: { + heading: ( + <Heading isFake level={3}> + Follow me + </Heading> + ), + media, + }, }; diff --git a/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx b/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx index 3563a94..003e787 100644 --- a/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx +++ b/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx @@ -1,46 +1,31 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from '../../../atoms'; import { TocWidget } from './toc-widget'; -/** - * TocWidget - Storybook Meta - */ -export default { - title: 'Organisms/Widgets/Table of Contents', +const meta = { component: TocWidget, - argTypes: { - tree: { - description: 'The headings tree.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof TocWidget>; + title: 'Organisms/Widgets/Table of Contents', +} satisfies Meta<typeof TocWidget>; -const Template: ComponentStory<typeof TocWidget> = (args) => ( - <TocWidget {...args} /> -); +export default meta; -/** - * Widgets Stories - Table of Contents - */ -export const TableOfContents = Template.bind({}); -TableOfContents.args = { - heading: <Heading level={3}>Table of contents</Heading>, - tree: [ - { children: [], depth: 2, id: 'title1', label: 'Title 1' }, - { - children: [ - { children: [], depth: 3, id: 'subtitle1', label: 'Subtitle 1' }, - { children: [], depth: 3, id: 'subtitle2', label: 'Subtitle 2' }, - ], - depth: 2, - id: 'title2', - label: 'Title 2', - }, - { children: [], depth: 2, id: 'title3', label: 'Title 3' }, - ], +type Story = StoryObj<typeof meta>; + +export const TableOfContents: Story = { + args: { + heading: <Heading level={3}>Table of contents</Heading>, + tree: [ + { children: [], depth: 2, id: 'title1', label: 'Title 1' }, + { + children: [ + { children: [], depth: 3, id: 'subtitle1', label: 'Subtitle 1' }, + { children: [], depth: 3, id: 'subtitle2', label: 'Subtitle 2' }, + ], + depth: 2, + id: 'title2', + label: 'Title 2', + }, + { children: [], depth: 2, id: 'title3', label: 'Title 3' }, + ], + }, }; diff --git a/src/components/templates/layout/layout.stories.ts b/src/components/templates/layout/layout.stories.ts new file mode 100644 index 0000000..262da0b --- /dev/null +++ b/src/components/templates/layout/layout.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Layout } from './layout'; + +const meta = { + component: Layout, + title: 'Templates/Layout', +} satisfies Meta<typeof Layout>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + children: 'The contents.', + }, +}; diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx deleted file mode 100644 index 6d55f34..0000000 --- a/src/components/templates/layout/layout.stories.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Layout as LayoutComponent } from './layout'; - -/** - * Layout - Storybook Meta - */ -export default { - title: 'Templates/LayoutBase', - component: LayoutComponent, - args: { - breadcrumbSchema: [], - isHome: false, - }, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The article content.', - type: { - name: 'string', - required: true, - }, - }, - breadcrumbSchema: { - control: { - type: 'null', - }, - description: 'The JSON schema for breadcrumb items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - isHome: { - control: { - type: 'boolean', - }, - description: 'Determine if it is the homepage.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the article element.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - useGrid: { - control: { - type: 'boolean', - }, - description: 'Use the grid layout.', - table: { - category: 'Options', - }, - type: { - name: 'boolean', - required: false, - }, - }, - withExtraPadding: { - control: { - type: 'boolean', - }, - description: 'Set additional padding at the bottom of the page.', - table: { - category: 'Options', - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, - decorators: [ - (Story) => ( - <div - id="__next" - style={{ - flex: 1, - display: 'flex', - flexFlow: 'column nowrap', - minHeight: '100vh', - }} - > - <Story /> - </div> - ), - ], - parameters: { - layout: 'fullscreen', - }, -} as ComponentMeta<typeof LayoutComponent>; - -const Template: ComponentStory<typeof LayoutComponent> = (args) => ( - <LayoutComponent {...args} /> -); - -/** - * Layout Stories - Default - */ -export const LayoutBase = Template.bind({}); diff --git a/src/components/templates/page/loading-page-comments.stories.tsx b/src/components/templates/page/loading-page-comments.stories.tsx index 6069068..1ebb4bd 100644 --- a/src/components/templates/page/loading-page-comments.stories.tsx +++ b/src/components/templates/page/loading-page-comments.stories.tsx @@ -1,22 +1,29 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { LoadingPageComments } from './loading-page-comments'; +import type { Meta, StoryObj } from '@storybook/react'; +import { + LoadingPageComments, + type LoadingPageCommentsProps, +} from './loading-page-comments'; +import { Page } from './page'; -/** - * LoadingPageComments - Storybook Meta - */ -export default { - title: 'Templates/LoadingPageComments', +const WrappedLoadingPageComments = (props: LoadingPageCommentsProps) => ( + <Page> + <LoadingPageComments {...props} /> + </Page> +); + +const meta = { component: LoadingPageComments, + title: 'Templates/Page/LoadingPageComments', + render: WrappedLoadingPageComments, parameters: { layout: 'fullscreen', }, -} as ComponentMeta<typeof LoadingPageComments>; +} satisfies Meta<typeof LoadingPageComments>; -const Template: ComponentStory<typeof LoadingPageComments> = (args) => ( - <LoadingPageComments {...args} /> -); +export default meta; + +type Story = StoryObj<typeof meta>; -/** - * LoadingPageComments Stories - Example - */ -export const Example = Template.bind({}); +export const Default: Story = { + args: {}, +}; diff --git a/src/components/templates/page/loading-page.stories.ts b/src/components/templates/page/loading-page.stories.ts new file mode 100644 index 0000000..a5d9b2b --- /dev/null +++ b/src/components/templates/page/loading-page.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { LoadingPage } from './loading-page'; + +const meta = { + component: LoadingPage, + title: 'Templates/Page/LoadingPage', +} satisfies Meta<typeof LoadingPage>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: {}, +}; diff --git a/src/components/templates/page/loading-page.stories.tsx b/src/components/templates/page/loading-page.stories.tsx deleted file mode 100644 index 2ea0b33..0000000 --- a/src/components/templates/page/loading-page.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { LoadingPage } from './loading-page'; - -/** - * LoadingPage - Storybook Meta - */ -export default { - title: 'Templates/LoadingPage', - component: LoadingPage, - parameters: { - layout: 'fullscreen', - }, -} as ComponentMeta<typeof LoadingPage>; - -const Template: ComponentStory<typeof LoadingPage> = (args) => ( - <LoadingPage {...args} /> -); - -/** - * LoadingPage Stories - Example - */ -export const Example = Template.bind({}); diff --git a/src/components/templates/page/page-comments.stories.tsx b/src/components/templates/page/page-comments.stories.tsx index 362f0a4..ba73747 100644 --- a/src/components/templates/page/page-comments.stories.tsx +++ b/src/components/templates/page/page-comments.stories.tsx @@ -1,45 +1,27 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import type { CommentData } from '../../organisms/comments-list'; +import type { Meta, StoryObj } from '@storybook/react'; +import type { CommentData } from '../../organisms'; import { Page } from './page'; -import { PageComments } from './page-comments'; +import { PageComments, type PageCommentsProps } from './page-comments'; -/** - * PageComments - Storybook Meta - */ -export default { - title: 'Templates/Page/Comments Section', - component: PageComments, - argTypes: { - comments: { - control: { - type: null, - }, - description: 'An array of comments.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - pageId: { - control: { - type: 'number', - }, - description: 'Define the page id in the database.', - type: { - name: 'number', - required: true, - }, - }, - }, -} as ComponentMeta<typeof PageComments>; - -const Template: ComponentStory<typeof PageComments> = (args) => ( +const WrappedPageComments = (props: PageCommentsProps) => ( <Page> - <PageComments {...args} /> + <PageComments {...props} /> </Page> ); +const meta = { + component: PageComments, + title: 'Templates/Page/PageComments', + render: WrappedPageComments, + parameters: { + layout: 'fullscreen', + }, +} satisfies Meta<typeof PageComments>; + +export default meta; + +type Story = StoryObj<typeof meta>; + const comments = [ { author: { @@ -139,32 +121,26 @@ const comments = [ }, ] satisfies CommentData[]; -/** - * PageComments Stories - Without comments - */ -export const WithoutComments = Template.bind({}); -WithoutComments.args = { - comments: [], - pageId: 1, +export const WithoutComments: Story = { + args: { + comments: [], + pageId: 1, + }, }; -/** - * PageComments Stories - With comments - */ -export const WithComments = Template.bind({}); -WithComments.args = { - comments, - depth: 2, - pageId: 1, +export const WithComments: Story = { + args: { + comments, + depth: 2, + pageId: 1, + }, }; -/** - * PageComments Stories - With comments closed - */ -export const WithCommentsClosed = Template.bind({}); -WithCommentsClosed.args = { - areCommentsClosed: true, - comments, - depth: 2, - pageId: 1, +export const WithCommentsClosed: Story = { + args: { + areCommentsClosed: true, + comments, + depth: 2, + pageId: 1, + }, }; diff --git a/src/components/templates/page/page-footer.stories.tsx b/src/components/templates/page/page-footer.stories.tsx index aee8979..5c72583 100644 --- a/src/components/templates/page/page-footer.stories.tsx +++ b/src/components/templates/page/page-footer.stories.tsx @@ -1,41 +1,31 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Page } from './page'; -import { PageFooter } from './page-footer'; +import { PageFooter, type PageFooterProps } from './page-footer'; -/** - * PageFooter - Storybook Meta - */ -export default { - title: 'Templates/Page/Footer', - component: PageFooter, - argTypes: { - readMoreAbout: { - control: { - type: null, - }, - description: 'An array of page links.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof PageFooter>; - -const Template: ComponentStory<typeof PageFooter> = (args) => ( +const WrappedPageFooter = (props: PageFooterProps) => ( <Page> - <PageFooter {...args} /> + <PageFooter {...props} /> </Page> ); -/** - * PageFooter Stories - Footer - */ -export const Footer = Template.bind({}); -Footer.args = { - readMoreAbout: [ - { id: 1, name: 'Topic 1', url: '#topic1' }, - { id: 2, name: 'Topic 2', url: '#topic2' }, - ], +const meta = { + component: PageFooter, + title: 'Templates/Page/PageFooter', + render: WrappedPageFooter, + parameters: { + layout: 'fullscreen', + }, +} satisfies Meta<typeof PageFooter>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + readMoreAbout: [ + { id: 1, name: 'Topic 1', url: '#topic1' }, + { id: 2, name: 'Topic 2', url: '#topic2' }, + ], + }, }; diff --git a/src/components/templates/page/page-header.stories.tsx b/src/components/templates/page/page-header.stories.tsx index 3af9b47..8640823 100644 --- a/src/components/templates/page/page-header.stories.tsx +++ b/src/components/templates/page/page-header.stories.tsx @@ -1,76 +1,60 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Page } from './page'; -import { PageHeader } from './page-header'; +import { PageHeader, type PageHeaderProps } from './page-header'; -/** - * PageHeader - Storybook Meta - */ -export default { - title: 'Templates/Page/Header', - component: PageHeader, - argTypes: { - meta: { - control: { - type: null, - }, - description: 'Define the page meta.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof PageHeader>; - -const Template: ComponentStory<typeof PageHeader> = (args) => ( +const WrappedPageHeader = (props: PageHeaderProps) => ( <Page> - <PageHeader {...args} /> + <PageHeader {...props} /> </Page> ); -/** - * PageHeader Stories - TitleOnly - */ -export const TitleOnly = Template.bind({}); -TitleOnly.args = { - heading: 'The page title', +const meta = { + component: PageHeader, + title: 'Templates/Page/PageHeader', + render: WrappedPageHeader, + parameters: { + layout: 'fullscreen', + }, +} satisfies Meta<typeof PageHeader>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const TitleOnly: Story = { + args: { + heading: 'The page title', + }, }; -/** - * PageHeader Stories - TitleAndIntro - */ -export const TitleAndIntro = Template.bind({}); -TitleAndIntro.args = { - heading: 'The page title', - intro: - 'Eos similique impedit dolor illo. Rerum voluptates corporis quod et molestiae eum. Ut tenetur repellat hic eum. Doloremque et illum sequi aspernatur.', +export const TitleAndIntro: Story = { + args: { + heading: 'The page title', + intro: + 'Eos similique impedit dolor illo. Rerum voluptates corporis quod et molestiae eum. Ut tenetur repellat hic eum. Doloremque et illum sequi aspernatur.', + }, }; -/** - * PageHeader Stories - TitleAndMeta - */ -export const TitleAndMeta = Template.bind({}); -TitleAndMeta.args = { - heading: 'The page title', - meta: { - author: 'Robin_Schroeder77', - publicationDate: '2023-11-15', - updateDate: '2023-11-16', +export const TitleAndMeta: Story = { + args: { + heading: 'The page title', + meta: { + author: 'Robin_Schroeder77', + publicationDate: '2023-11-15', + updateDate: '2023-11-16', + }, }, }; -/** - * PageHeader Stories - All - */ -export const All = Template.bind({}); -All.args = { - heading: 'The page title', - intro: - 'Eos similique impedit dolor illo. Rerum voluptates corporis quod et molestiae eum. Ut tenetur repellat hic eum. Doloremque et illum sequi aspernatur.', - meta: { - author: 'Robin_Schroeder77', - publicationDate: '2023-11-15', - updateDate: '2023-11-16', +export const TitleMetaAndIntro: Story = { + args: { + heading: 'The page title', + intro: + 'Eos similique impedit dolor illo. Rerum voluptates corporis quod et molestiae eum. Ut tenetur repellat hic eum. Doloremque et illum sequi aspernatur.', + meta: { + author: 'Robin_Schroeder77', + publicationDate: '2023-11-15', + updateDate: '2023-11-16', + }, }, }; diff --git a/src/components/templates/page/page.stories.tsx b/src/components/templates/page/page.stories.tsx index 3f03b44..1dbb63a 100644 --- a/src/components/templates/page/page.stories.tsx +++ b/src/components/templates/page/page.stories.tsx @@ -1,7 +1,6 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from '../../atoms'; -import type { CommentData } from '../../organisms/comments-list'; -import { SharingWidget, TocWidget } from '../../organisms/widgets'; +import { type CommentData, SharingWidget, TocWidget } from '../../organisms'; import { Page } from './page'; import { PageBody } from './page-body'; import { PageComments } from './page-comments'; @@ -10,19 +9,17 @@ import { PageHeader } from './page-header'; import { PageSection } from './page-section'; import { PageSidebar } from './page-sidebar'; -/** - * Page - Storybook Meta - */ -export default { - title: 'Templates/Page', +const meta = { component: Page, - argTypes: {}, + title: 'Templates/Page', parameters: { layout: 'fullscreen', }, -} as ComponentMeta<typeof Page>; +} satisfies Meta<typeof Page>; + +export default meta; -const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />; +type Story = StoryObj<typeof meta>; const comments = [ { @@ -123,374 +120,366 @@ const comments = [ }, ] satisfies CommentData[]; -/** - * Page Stories - HeaderBody - */ -export const HeaderBody = Template.bind({}); -HeaderBody.args = { - children: ( - <> - <PageHeader - heading="The page title" - intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." - /> - <PageBody> - <Heading level={2}>Sint debitis blanditiis</Heading> - <p> - Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui - minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi - est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi - facere voluptas. - </p> - <p> - Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias - atque rerum quam eos doloremque dolor dolor non. Rerum laudantium - provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id - quaerat repudiandae sint autem architecto adipisci est. - </p> - <Heading level={2}>Non nisi similique</Heading> - <p> - Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non - necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo - aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et - et rem ipsa nihil. Possimus architecto voluptatibus labore repellat - sint aperiam reprehenderit est ratione. - </p> - <p> - Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore - placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam - tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui - mollitia sapiente eius ratione necessitatibus nobis molestiae. - </p> - </PageBody> - </> - ), +export const HeaderBody: Story = { + args: { + children: ( + <> + <PageHeader + heading="The page title" + intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." + /> + <PageBody> + <Heading level={2}>Sint debitis blanditiis</Heading> + <p> + Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui + minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi + est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi + facere voluptas. + </p> + <p> + Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias + atque rerum quam eos doloremque dolor dolor non. Rerum laudantium + provident eos voluptas minus sit mollitia ex neque. Ea est ut est. + Id quaerat repudiandae sint autem architecto adipisci est. + </p> + <Heading level={2}>Non nisi similique</Heading> + <p> + Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam + non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non + illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta + vel et et rem ipsa nihil. Possimus architecto voluptatibus labore + repellat sint aperiam reprehenderit est ratione. + </p> + <p> + Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non + dolore placeat eos qui praesentium sunt dolores. Consequatur atque + quibusdam tempore aut. Quas officiis adipisci consequatur nisi. + Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis + molestiae. + </p> + </PageBody> + </> + ), + }, }; -/** - * Page Stories - BreadcrumbsHeaderBody - */ -export const BreadcrumbsHeaderBody = Template.bind({}); -BreadcrumbsHeaderBody.args = { - breadcrumbs: [ - { id: 'home', label: 'Home', slug: '#home' }, - { id: 'blog', label: 'Blog', slug: '#blog' }, - ], - children: ( - <> - <PageHeader - heading="The page title" - intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." - /> - <PageBody> - <Heading level={2}>Sint debitis blanditiis</Heading> - <p> - Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui - minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi - est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi - facere voluptas. - </p> - <p> - Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias - atque rerum quam eos doloremque dolor dolor non. Rerum laudantium - provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id - quaerat repudiandae sint autem architecto adipisci est. - </p> - <Heading level={2}>Non nisi similique</Heading> - <p> - Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non - necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo - aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et - et rem ipsa nihil. Possimus architecto voluptatibus labore repellat - sint aperiam reprehenderit est ratione. - </p> - <p> - Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore - placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam - tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui - mollitia sapiente eius ratione necessitatibus nobis molestiae. - </p> - </PageBody> - </> - ), +export const BreadcrumbsHeaderBody: Story = { + args: { + breadcrumbs: [ + { id: 'home', label: 'Home', slug: '#home' }, + { id: 'blog', label: 'Blog', slug: '#blog' }, + ], + children: ( + <> + <PageHeader + heading="The page title" + intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." + /> + <PageBody> + <Heading level={2}>Sint debitis blanditiis</Heading> + <p> + Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui + minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi + est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi + facere voluptas. + </p> + <p> + Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias + atque rerum quam eos doloremque dolor dolor non. Rerum laudantium + provident eos voluptas minus sit mollitia ex neque. Ea est ut est. + Id quaerat repudiandae sint autem architecto adipisci est. + </p> + <Heading level={2}>Non nisi similique</Heading> + <p> + Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam + non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non + illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta + vel et et rem ipsa nihil. Possimus architecto voluptatibus labore + repellat sint aperiam reprehenderit est ratione. + </p> + <p> + Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non + dolore placeat eos qui praesentium sunt dolores. Consequatur atque + quibusdam tempore aut. Quas officiis adipisci consequatur nisi. + Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis + molestiae. + </p> + </PageBody> + </> + ), + }, }; -/** - * Page Stories - HeaderBodyToc - */ -export const HeaderBodyToc = Template.bind({}); -HeaderBodyToc.args = { - children: ( - <> - <PageHeader - heading="The page title" - intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." - /> - <PageSidebar> - <TocWidget - heading={<Heading level={2}>Table of Contents</Heading>} - tree={[ - { - children: [], - depth: 2, - id: 'sint-debitis', - label: 'Sint debitis blanditiis', - }, - { - children: [], - depth: 2, - id: 'non-nisi', - label: 'Non nisi similique', - }, - ]} +export const HeaderBodyToc: Story = { + args: { + children: ( + <> + <PageHeader + heading="The page title" + intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." /> - </PageSidebar> - <PageBody> - <Heading id="sint-debitis" level={2}> - Sint debitis blanditiis - </Heading> - <p> - Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui - minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi - est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi - facere voluptas. - </p> - <p> - Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias - atque rerum quam eos doloremque dolor dolor non. Rerum laudantium - provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id - quaerat repudiandae sint autem architecto adipisci est. - </p> - <Heading id="non-nisi" level={2}> - Non nisi similique - </Heading> - <p> - Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non - necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo - aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et - et rem ipsa nihil. Possimus architecto voluptatibus labore repellat - sint aperiam reprehenderit est ratione. - </p> - <p> - Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore - placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam - tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui - mollitia sapiente eius ratione necessitatibus nobis molestiae. - </p> - </PageBody> - </> - ), + <PageSidebar> + <TocWidget + heading={<Heading level={2}>Table of Contents</Heading>} + tree={[ + { + children: [], + depth: 2, + id: 'sint-debitis', + label: 'Sint debitis blanditiis', + }, + { + children: [], + depth: 2, + id: 'non-nisi', + label: 'Non nisi similique', + }, + ]} + /> + </PageSidebar> + <PageBody> + <Heading id="sint-debitis" level={2}> + Sint debitis blanditiis + </Heading> + <p> + Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui + minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi + est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi + facere voluptas. + </p> + <p> + Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias + atque rerum quam eos doloremque dolor dolor non. Rerum laudantium + provident eos voluptas minus sit mollitia ex neque. Ea est ut est. + Id quaerat repudiandae sint autem architecto adipisci est. + </p> + <Heading id="non-nisi" level={2}> + Non nisi similique + </Heading> + <p> + Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam + non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non + illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta + vel et et rem ipsa nihil. Possimus architecto voluptatibus labore + repellat sint aperiam reprehenderit est ratione. + </p> + <p> + Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non + dolore placeat eos qui praesentium sunt dolores. Consequatur atque + quibusdam tempore aut. Quas officiis adipisci consequatur nisi. + Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis + molestiae. + </p> + </PageBody> + </> + ), + }, }; -/** - * Page Stories - HeaderBodyTocSidebar - */ -export const HeaderBodyTocSidebar = Template.bind({}); -HeaderBodyTocSidebar.args = { - children: ( - <> - <PageHeader - heading="The page title" - intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." - /> - <PageSidebar> - <TocWidget - heading={<Heading level={2}>Table of Contents</Heading>} - tree={[ - { - children: [], - depth: 2, - id: 'sint-debitis', - label: 'Sint debitis blanditiis', - }, - { - children: [], - depth: 2, - id: 'non-nisi', - label: 'Non nisi similique', - }, - ]} - /> - </PageSidebar> - <PageBody> - <Heading id="sint-debitis" level={2}> - Sint debitis blanditiis - </Heading> - <p> - Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui - minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi - est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi - facere voluptas. - </p> - <p> - Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias - atque rerum quam eos doloremque dolor dolor non. Rerum laudantium - provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id - quaerat repudiandae sint autem architecto adipisci est. - </p> - <Heading id="non-nisi" level={2}> - Non nisi similique - </Heading> - <p> - Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non - necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo - aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et - et rem ipsa nihil. Possimus architecto voluptatibus labore repellat - sint aperiam reprehenderit est ratione. - </p> - <p> - Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore - placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam - tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui - mollitia sapiente eius ratione necessitatibus nobis molestiae. - </p> - </PageBody> - <PageSidebar> - <SharingWidget - data={{ - excerpt: - 'Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit.', - title: 'The page title', - url: '#page', - }} - heading={<Heading level={2}>Share</Heading>} - media={['diaspora', 'email', 'facebook']} +export const HeaderBodyTocSidebar: Story = { + args: { + children: ( + <> + <PageHeader + heading="The page title" + intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." /> - </PageSidebar> - </> - ), + <PageSidebar> + <TocWidget + heading={<Heading level={2}>Table of Contents</Heading>} + tree={[ + { + children: [], + depth: 2, + id: 'sint-debitis', + label: 'Sint debitis blanditiis', + }, + { + children: [], + depth: 2, + id: 'non-nisi', + label: 'Non nisi similique', + }, + ]} + /> + </PageSidebar> + <PageBody> + <Heading id="sint-debitis" level={2}> + Sint debitis blanditiis + </Heading> + <p> + Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui + minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi + est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi + facere voluptas. + </p> + <p> + Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias + atque rerum quam eos doloremque dolor dolor non. Rerum laudantium + provident eos voluptas minus sit mollitia ex neque. Ea est ut est. + Id quaerat repudiandae sint autem architecto adipisci est. + </p> + <Heading id="non-nisi" level={2}> + Non nisi similique + </Heading> + <p> + Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam + non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non + illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta + vel et et rem ipsa nihil. Possimus architecto voluptatibus labore + repellat sint aperiam reprehenderit est ratione. + </p> + <p> + Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non + dolore placeat eos qui praesentium sunt dolores. Consequatur atque + quibusdam tempore aut. Quas officiis adipisci consequatur nisi. + Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis + molestiae. + </p> + </PageBody> + <PageSidebar> + <SharingWidget + data={{ + excerpt: + 'Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit.', + title: 'The page title', + url: '#page', + }} + heading={<Heading level={2}>Share</Heading>} + media={['diaspora', 'email', 'facebook']} + /> + </PageSidebar> + </> + ), + }, }; -/** - * Page Stories - HeaderBodyFooter - */ -export const HeaderBodyFooter = Template.bind({}); -HeaderBodyFooter.args = { - children: ( - <> - <PageHeader - heading="The page title" - intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." - /> - <PageBody> - <Heading level={2}>Sint debitis blanditiis</Heading> - <p> - Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui - minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi - est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi - facere voluptas. - </p> - <p> - Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias - atque rerum quam eos doloremque dolor dolor non. Rerum laudantium - provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id - quaerat repudiandae sint autem architecto adipisci est. - </p> - <Heading level={2}>Non nisi similique</Heading> - <p> - Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non - necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo - aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et - et rem ipsa nihil. Possimus architecto voluptatibus labore repellat - sint aperiam reprehenderit est ratione. - </p> - <p> - Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore - placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam - tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui - mollitia sapiente eius ratione necessitatibus nobis molestiae. - </p> - </PageBody> - <PageFooter - readMoreAbout={[ - { id: 1, name: 'Topic 1', url: '#topic1' }, - { id: 2, name: 'Topic 2', url: '#topic2' }, - ]} - /> - </> - ), +export const HeaderBodyFooter: Story = { + args: { + children: ( + <> + <PageHeader + heading="The page title" + intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." + /> + <PageBody> + <Heading level={2}>Sint debitis blanditiis</Heading> + <p> + Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui + minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi + est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi + facere voluptas. + </p> + <p> + Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias + atque rerum quam eos doloremque dolor dolor non. Rerum laudantium + provident eos voluptas minus sit mollitia ex neque. Ea est ut est. + Id quaerat repudiandae sint autem architecto adipisci est. + </p> + <Heading level={2}>Non nisi similique</Heading> + <p> + Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam + non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non + illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta + vel et et rem ipsa nihil. Possimus architecto voluptatibus labore + repellat sint aperiam reprehenderit est ratione. + </p> + <p> + Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non + dolore placeat eos qui praesentium sunt dolores. Consequatur atque + quibusdam tempore aut. Quas officiis adipisci consequatur nisi. + Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis + molestiae. + </p> + </PageBody> + <PageFooter + readMoreAbout={[ + { id: 1, name: 'Topic 1', url: '#topic1' }, + { id: 2, name: 'Topic 2', url: '#topic2' }, + ]} + /> + </> + ), + }, }; -/** - * Page Stories - HeaderBodyComments - */ -export const HeaderBodyComments = Template.bind({}); -HeaderBodyComments.args = { - children: ( - <> - <PageHeader - heading="The page title" - intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." - /> - <PageBody> - <Heading level={2}>Sint debitis blanditiis</Heading> - <p> - Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui - minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi - est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi - facere voluptas. - </p> - <p> - Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias - atque rerum quam eos doloremque dolor dolor non. Rerum laudantium - provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id - quaerat repudiandae sint autem architecto adipisci est. - </p> - <Heading level={2}>Non nisi similique</Heading> - <p> - Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non - necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo - aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et - et rem ipsa nihil. Possimus architecto voluptatibus labore repellat - sint aperiam reprehenderit est ratione. - </p> - <p> - Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore - placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam - tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui - mollitia sapiente eius ratione necessitatibus nobis molestiae. - </p> - </PageBody> - <PageComments comments={comments} pageId={1} /> - </> - ), +export const HeaderBodyComments: Story = { + args: { + children: ( + <> + <PageHeader + heading="The page title" + intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit." + /> + <PageBody> + <Heading level={2}>Sint debitis blanditiis</Heading> + <p> + Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui + minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi + est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi + facere voluptas. + </p> + <p> + Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias + atque rerum quam eos doloremque dolor dolor non. Rerum laudantium + provident eos voluptas minus sit mollitia ex neque. Ea est ut est. + Id quaerat repudiandae sint autem architecto adipisci est. + </p> + <Heading level={2}>Non nisi similique</Heading> + <p> + Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam + non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non + illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta + vel et et rem ipsa nihil. Possimus architecto voluptatibus labore + repellat sint aperiam reprehenderit est ratione. + </p> + <p> + Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non + dolore placeat eos qui praesentium sunt dolores. Consequatur atque + quibusdam tempore aut. Quas officiis adipisci consequatur nisi. + Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis + molestiae. + </p> + </PageBody> + <PageComments comments={comments} pageId={1} /> + </> + ), + }, }; -/** - * Page Stories - SectionedPage - */ -export const SectionedPage = Template.bind({}); -SectionedPage.args = { - children: ( - <> - <PageSection> - <Heading level={2}>A section title</Heading> - <p> - Illo temporibus nihil maiores nesciunt. Veritatis distinctio aperiam - culpa eveniet incidunt eos harum porro labore. Soluta culpa unde - adipisci fugiat voluptas eos. - </p> - </PageSection> - <PageSection variant="dark"> - <Heading level={2}>Another section title</Heading> - <p> - Sint consequatur animi eum beatae. Non corporis quos quia et magnam. - Cumque molestiae blanditiis aut. Et suscipit iusto laudantium iusto - dignissimos. - </p> - </PageSection> - <PageSection> - <Heading level={2}>A third section title</Heading> - <p> - Omnis corporis perferendis animi iste quidem placeat est minus. Enim - autem consequatur voluptatem provident qui culpa. Aliquid aliquam - consequatur non explicabo ut distinctio quis a non. Delectus unde odio - eveniet temporibus omnis. Reprehenderit consequatur minima in - consequatur saepe est sed. Accusantium quia quae magnam expedita nihil - rerum omnis temporibus perspiciatis. - </p> - </PageSection> - </> - ), - hasSections: true, +export const SectionedPage: Story = { + args: { + children: ( + <> + <PageSection> + <Heading level={2}>A section title</Heading> + <p> + Illo temporibus nihil maiores nesciunt. Veritatis distinctio aperiam + culpa eveniet incidunt eos harum porro labore. Soluta culpa unde + adipisci fugiat voluptas eos. + </p> + </PageSection> + <PageSection variant="dark"> + <Heading level={2}>Another section title</Heading> + <p> + Sint consequatur animi eum beatae. Non corporis quos quia et magnam. + Cumque molestiae blanditiis aut. Et suscipit iusto laudantium iusto + dignissimos. + </p> + </PageSection> + <PageSection> + <Heading level={2}>A third section title</Heading> + <p> + Omnis corporis perferendis animi iste quidem placeat est minus. Enim + autem consequatur voluptatem provident qui culpa. Aliquid aliquam + consequatur non explicabo ut distinctio quis a non. Delectus unde + odio eveniet temporibus omnis. Reprehenderit consequatur minima in + consequatur saepe est sed. Accusantium quia quae magnam expedita + nihil rerum omnis temporibus perspiciatis. + </p> + </PageSection> + </> + ), + hasSections: true, + }, }; |