refactor(stories): migrate stories to CSF3 format

1 files changed, 24 insertions, 39 deletions

diff --git a/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx b/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx
index 3563a94..003e787 100644
--- a/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx
+++ b/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx
@@ -1,46 +1,31 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Heading } from '../../../atoms';
 import { TocWidget } from './toc-widget';
 
-/**
- * TocWidget - Storybook Meta
- */
-export default {
-  title: 'Organisms/Widgets/Table of Contents',
+const meta = {
   component: TocWidget,
-  argTypes: {
-    tree: {
-      description: 'The headings tree.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-  },
-} as ComponentMeta<typeof TocWidget>;
+  title: 'Organisms/Widgets/Table of Contents',
+} satisfies Meta<typeof TocWidget>;
 
-const Template: ComponentStory<typeof TocWidget> = (args) => (
-  <TocWidget {...args} />
-);
+export default meta;
 
-/**
- * Widgets Stories - Table of Contents
- */
-export const TableOfContents = Template.bind({});
-TableOfContents.args = {
-  heading: <Heading level={3}>Table of contents</Heading>,
-  tree: [
-    { children: [], depth: 2, id: 'title1', label: 'Title 1' },
-    {
-      children: [
-        { children: [], depth: 3, id: 'subtitle1', label: 'Subtitle 1' },
-        { children: [], depth: 3, id: 'subtitle2', label: 'Subtitle 2' },
-      ],
-      depth: 2,
-      id: 'title2',
-      label: 'Title 2',
-    },
-    { children: [], depth: 2, id: 'title3', label: 'Title 3' },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const TableOfContents: Story = {
+  args: {
+    heading: <Heading level={3}>Table of contents</Heading>,
+    tree: [
+      { children: [], depth: 2, id: 'title1', label: 'Title 1' },
+      {
+        children: [
+          { children: [], depth: 3, id: 'subtitle1', label: 'Subtitle 1' },
+          { children: [], depth: 3, id: 'subtitle2', label: 'Subtitle 2' },
+        ],
+        depth: 2,
+        id: 'title2',
+        label: 'Title 2',
+      },
+      { children: [], depth: 2, id: 'title3', label: 'Title 3' },
+    ],
+  },
 };