refactor(stories): migrate stories to CSF3 format

1 files changed, 60 insertions, 89 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> },
+    ],
+  },
 };