2 files changed, 76 insertions, 122 deletions
diff --git a/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx b/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx
index 3ddb8f1..9b1596a 100644
--- a/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx
+++ b/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx
@@ -1,108 +1,79 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Link } from '../../../atoms';
 import { MetaItem } from './meta-item';
 
-/**
- * MetaItem - Storybook Meta
- */
-export default {
-  title: 'Molecules/MetaList/Item',
+const meta = {
   component: MetaItem,
-  argTypes: {
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'The item label.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof MetaItem>;
+  title: 'Molecules/MetaList/Item',
+} satisfies Meta<typeof MetaItem>;
 
-const Template: ComponentStory<typeof MetaItem> = (args) => (
-  <MetaItem {...args} />
-);
+export default meta;
 
-/**
- * MetaItem Stories - SingleValue
- */
-export const SingleValue = Template.bind({});
-SingleValue.args = {
-  label: 'Comments',
-  value: 'No comments',
+type Story = StoryObj<typeof meta>;
+
+export const SingleValue: Story = {
+  args: {
+    label: 'Comments',
+    value: 'No comments',
+  },
 };
 
-/**
- * MetaItem Stories - MultipleValues
- */
-export const MultipleValues = Template.bind({});
-MultipleValues.args = {
-  label: 'Tags',
-  value: [
-    { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
-    { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> },
-  ],
+export const MultipleValues: Story = {
+  args: {
+    label: 'Tags',
+    value: [
+      { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
+      { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> },
+    ],
+  },
 };
 
-/**
- * MetaItem Stories - SingleValueBordered
- */
-export const SingleValueBordered = Template.bind({});
-SingleValueBordered.args = {
-  hasBorderedValues: true,
-  label: 'Comments',
-  value: 'No comments',
+export const SingleValueBordered: Story = {
+  args: {
+    hasBorderedValues: true,
+    label: 'Comments',
+    value: 'No comments',
+  },
 };
 
-/**
- * MetaItem Stories - MultipleValuesBordered
- */
-export const MultipleValuesBordered = Template.bind({});
-MultipleValuesBordered.args = {
-  hasBorderedValues: true,
-  label: 'Tags',
-  value: [
-    { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
-    { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> },
-  ],
+export const MultipleValuesBordered: Story = {
+  args: {
+    hasBorderedValues: true,
+    label: 'Tags',
+    value: [
+      { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
+      { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> },
+    ],
+  },
 };
 
-/**
- * MetaItem Stories - SingleValueInlined
- */
-export const SingleValueInlined = Template.bind({});
-SingleValueInlined.args = {
-  isInline: true,
-  label: 'Comments',
-  value: 'No comments',
+export const SingleValueInlined: Story = {
+  args: {
+    isInline: true,
+    label: 'Comments',
+    value: 'No comments',
+  },
 };
 
-/**
- * MetaItem Stories - MultipleValuesInlined
- */
-export const MultipleValuesInlined = Template.bind({});
-MultipleValuesInlined.args = {
-  isInline: true,
-  label: 'Tags',
-  value: [
-    { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
-    { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> },
-  ],
+export const MultipleValuesInlined: Story = {
+  args: {
+    isInline: true,
+    label: 'Tags',
+    value: [
+      { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
+      { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> },
+    ],
+  },
 };
 
-/**
- * MetaItem Stories - InlinedValues
- */
-export const InlinedValues = Template.bind({});
-InlinedValues.args = {
-  hasInlinedValues: true,
-  label: 'Tags',
-  value: [
-    { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
-    { id: 'tag2', value: <Link href="#tag2">A long tag 2</Link> },
-    { id: 'tag3', value: <Link href="#tag3">Tag 3</Link> },
-  ],
+export const InlinedValues: Story = {
+  args: {
+    hasInlinedValues: true,
+    label: 'Tags',
+    value: [
+      { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> },
+      { id: 'tag2', value: <Link href="#tag2">A long tag 2</Link> },
+      { id: 'tag3', value: <Link href="#tag3">Tag 3</Link> },
+    ],
+  },
 };
diff --git a/src/components/molecules/meta-list/meta-list.stories.tsx b/src/components/molecules/meta-list/meta-list.stories.tsx
index d73c5b9..f6015bd 100644
--- a/src/components/molecules/meta-list/meta-list.stories.tsx
+++ b/src/components/molecules/meta-list/meta-list.stories.tsx
@@ -1,29 +1,16 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Link } from '../../atoms';
 import { MetaItem } from './meta-item';
 import { MetaList } from './meta-list';
 
-/**
- * MetaList - Storybook Meta
- */
-export default {
-  title: 'Molecules/MetaList',
+const meta = {
   component: MetaList,
-  argTypes: {
-    items: {
-      description: 'The meta items.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-  },
-} as ComponentMeta<typeof MetaList>;
+  title: 'Molecules/MetaList',
+} satisfies Meta<typeof MetaList>;
 
-const Template: ComponentStory<typeof MetaList> = (args) => (
-  <MetaList {...args} />
-);
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const items = [
   { id: 'comments', label: 'Comments', value: 'No comments.' },
@@ -53,19 +40,15 @@ const items = [
   },
 ];
 
-/**
- * MetaList Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />),
+export const Example: Story = {
+  args: {
+    children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />),
+  },
 };
 
-/**
- * MetaList Stories - Inlined
- */
-export const Inlined = Template.bind({});
-Inlined.args = {
-  children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />),
-  isInline: true,
+export const Inlined: Story = {
+  args: {
+    children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />),
+    isInline: true,
+  },
 };