refactor(stories): migrate stories to CSF3 format

5 files changed, 176 insertions, 267 deletions

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,
-};