refactor(stories): migrate stories to CSF3 format

5 files changed, 131 insertions, 253 deletions

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' },
+    ],
+  },
 };