refactor(stories): migrate stories to CSF3 format

1 files changed, 117 insertions, 173 deletions

diff --git a/src/components/atoms/lists/list/list.stories.tsx b/src/components/atoms/lists/list/list.stories.tsx
index 538947a..6e7d254 100644
--- a/src/components/atoms/lists/list/list.stories.tsx
+++ b/src/components/atoms/lists/list/list.stories.tsx
@@ -1,196 +1,140 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { List, type ListProps } from './list';
+import type { Meta, StoryObj } from '@storybook/react';
+import { List } from './list';
 import { ListItem } from './list-item';
 
-/**
- * List - Storybook Meta
- */
-export default {
-  title: 'Atoms/Lists',
+const meta = {
   component: List,
-  args: {},
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the list wrapper',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof List>;
+  title: 'Atoms/Lists/List',
+} satisfies Meta<typeof List>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const Template: ComponentStory<typeof List> = <
-  O extends boolean,
-  H extends boolean,
->(
-  args: ListProps<O, H>
-) => <List {...args} />;
+export const Default: Story = {
+  args: {
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">Item 2</ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+  },
+};
 
-/**
- * List Stories - Hierarchical list
- */
-export const Hierarchical = Template.bind({});
-Hierarchical.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List isHierarchical isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isHierarchical isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List isHierarchical isOrdered>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
-  isHierarchical: true,
+export const OrderedList: Story = {
+  args: {
+    ...Default.args,
+    isOrdered: true,
+  },
 };
 
-/**
- * List Stories - Ordered list
- */
-export const Ordered = Template.bind({});
-Ordered.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List isOrdered>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
-  isOrdered: true,
+export const UnorderedList: Story = {
+  args: {
+    ...Default.args,
+    isOrdered: false,
+  },
 };
 
-/**
- * List Stories - Unordered list
- */
-export const Unordered = Template.bind({});
-Unordered.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
+export const Nested: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List isOrdered>
+          <ListItem>Nested item 1</ListItem>
+          <ListItem>Nested item 2</ListItem>
+          <ListItem>
+            Nested item 3
+            <List>
+              <ListItem>Deeper item 1</ListItem>
+              <ListItem>Deeper item 2</ListItem>
+              <ListItem>Deeper item 3</ListItem>
+            </List>
+          </ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    isOrdered: false,
+  },
 };
 
-const items = [
-  { id: 'item-1', label: 'Item 1' },
-  { id: 'item-2', label: 'Item 2' },
-  {
-    id: 'item-3',
-    label: (
-      <>
-        Item 3
-        <List>
+export const HierarchicalList: Story = {
+  args: {
+    ...OrderedList.args,
+    children: [
+      <ListItem key="item-1">
+        Item 1
+        <List isHierarchical isOrdered>
           <ListItem>Subitem 1</ListItem>
           <ListItem>Subitem 2</ListItem>
         </List>
-      </>
-    ),
+      </ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List isHierarchical isOrdered>
+          <ListItem>Subitem 1</ListItem>
+          <ListItem>
+            Subitem 2
+            <List isHierarchical isOrdered>
+              <ListItem>Nested item 1</ListItem>
+              <ListItem>Nested item 2</ListItem>
+            </List>
+          </ListItem>
+          <ListItem>Subitem 3</ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    isHierarchical: true,
   },
-  { id: 'item-4', label: 'Item 4' },
-  { id: 'item-5', label: 'Item 5' },
-];
+};
 
-/**
- * List Stories - Inline and ordered list
- */
-export const InlineOrdered = Template.bind({});
-InlineOrdered.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  isInline: true,
-  isOrdered: true,
-  spacing: 'sm',
+export const WithMarker: Story = {
+  args: {
+    ...Default.args,
+    hideMarker: false,
+  },
 };
 
-/**
- * List Stories - Inline and unordered list
- */
-export const InlineUnordered = Template.bind({});
-InlineUnordered.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  isInline: true,
-  spacing: 'sm',
+export const WithoutMarker: Story = {
+  args: {
+    ...Default.args,
+    hideMarker: true,
+  },
 };
 
-/**
- * List Stories - Ordered list without marker
- */
-export const OrderedHideMarker = Template.bind({});
-OrderedHideMarker.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  hideMarker: true,
-  isOrdered: true,
+export const InlineList: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="sep-1">{'>'}</ListItem>,
+      <ListItem key="item-2">Item 2</ListItem>,
+      <ListItem key="sep-2">{'>'}</ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    hideMarker: true,
+    isInline: true,
+    spacing: 'xs',
+  },
 };
 
-/**
- * List Stories - Unordered list without marker
- */
-export const UnorderedHideMarker = Template.bind({});
-UnorderedHideMarker.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  hideMarker: true,
+export const ListInInlineList: Story = {
+  args: {
+    ...InlineList.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List>
+          <ListItem>Nested item 1</ListItem>
+          <ListItem>Nested item 2</ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+  },
 };