refactor(stories): migrate stories to CSF3 format

1 files changed, 45 insertions, 62 deletions

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