From 0f936ec0e7606cb79434d94096b6e113a7ce78eb Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 15 Dec 2023 18:35:16 +0100 Subject: refactor(stories): migrate stories to CSF3 format --- .../post-preview/post-preview.stories.tsx | 204 +++++++-------------- 1 file changed, 63 insertions(+), 141 deletions(-) (limited to 'src/components/organisms/post-preview/post-preview.stories.tsx') 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; + title: 'Organisms/PostPreview', +} satisfies Meta; -const Template: ComponentStory = (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; + +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: ( - - ), - 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: ( + + ), + 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: ( - - ), - 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: ( + + ), + 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', }; -- cgit v1.2.3