refactor(stories): migrate stories to CSF3 format

16 files changed, 160 insertions, 228 deletions

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({});