refactor(stories): migrate stories to CSF3 format

1 files changed, 75 insertions, 125 deletions

diff --git a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
index 21214bd..d98dfe3 100644
--- a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
+++ b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
@@ -1,136 +1,86 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { type ChangeEvent, useCallback, useState } from 'react';
-import { TextArea as TextAreaComponent } from './text-area';
+import { useArgs } from '@storybook/client-api';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ChangeEvent, useCallback } from 'react';
+import { TextArea, type TextAreaProps } from './text-area';
 
-/**
- * TextArea - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms/Fields',
-  component: TextAreaComponent,
+const meta = {
+  component: TextArea,
+  title: 'Atoms/Forms/Fields/TextArea',
+  excludeStories: /Controlled.*$/,
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ControlledTextArea = ({ value, ...args }: TextAreaProps) => {
+  const [_, updateArgs] = useArgs<TextAreaProps>();
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      updateArgs({ ...args, value: e.target.value });
+    },
+    [args, updateArgs]
+  );
+
+  return <TextArea {...args} onChange={handleChange} value={value} />;
+};
+
+const TextAreaTemplate: Story = {
   args: {
+    id: 'default',
     isDisabled: false,
+    isReadOnly: false,
     isRequired: false,
+    name: 'default',
+    value: '',
   },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'TextArea id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'TextArea state: either enabled or disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isRequired: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'TextArea name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    placeholder: {
-      control: {
-        type: 'text',
-      },
-      description: 'A placeholder value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'TextArea value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
+  render: ControlledTextArea,
+};
+
+export const IsEditable: Story = {
+  ...TextAreaTemplate,
+  name: 'State: Editable',
+  args: {
+    ...TextAreaTemplate.args,
+    'aria-label': 'Example of a default text area',
+    id: 'disabled',
+    name: 'disabled',
   },
-} as ComponentMeta<typeof TextAreaComponent>;
+};
 
-const Template: ComponentStory<typeof TextAreaComponent> = ({
-  value: initialValue,
-  onChange: _onChange,
-  ...args
-}) => {
-  const [value, setValue] = useState(initialValue);
-  const updateValue = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(e.target.value);
-  }, []);
+export const IsDisabled: Story = {
+  ...TextAreaTemplate,
+  name: 'State: Disabled',
+  args: {
+    ...TextAreaTemplate.args,
+    'aria-label': 'Example of a disabled text area',
+    id: 'disabled',
+    isDisabled: true,
+    name: 'disabled',
+  },
+};
 
-  return <TextAreaComponent value={value} onChange={updateValue} {...args} />;
+export const IsReadOnly: Story = {
+  ...TextAreaTemplate,
+  name: 'State: Readonly',
+  args: {
+    ...TextAreaTemplate.args,
+    'aria-label': 'Example of a read-only text area',
+    id: 'readonly',
+    isReadOnly: true,
+    name: 'readonly',
+  },
 };
 
-/**
- * TextArea Story - TextArea
- */
-export const TextArea = Template.bind({});
-TextArea.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
+export const IsRequired: Story = {
+  ...TextAreaTemplate,
+  name: 'State: Required',
+  args: {
+    ...TextAreaTemplate.args,
+    'aria-label': 'Example of a required text area',
+    id: 'required',
+    isRequired: true,
+    name: 'required',
+  },
 };