refactor(stories): migrate stories to CSF3 format

39 files changed, 838 insertions, 1477 deletions

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