refactor(stories): migrate stories to CSF3 format

1 files changed, 263 insertions, 123 deletions

diff --git a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
index 1d1af70..47ded7b 100644
--- a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
@@ -1,130 +1,270 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { type ChangeEvent, useState, useCallback } from 'react';
-import { Input, Label } from '../../../atoms';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ChangeEvent, useCallback, useState } from 'react';
+import {
+  Checkbox,
+  type CheckboxProps,
+  Radio,
+  type RadioProps,
+  Input,
+  type InputProps,
+  type TextAreaProps,
+  TextArea,
+  Label,
+} from '../../../atoms';
+import { ControlledSelect } from '../../../atoms/forms/fields/select/select.stories';
 import { LabelledField } from './labelled-field';
 
-/**
- * LabelledField - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Field',
+const meta = {
+  title: 'Molecules/Forms/Labelled Field',
   component: LabelledField,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    field: {
-      control: {
-        type: null,
-      },
-      description: 'A component: Checkbox, Input, Select, Radio or TextArea.',
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    label: {
-      control: {
-        type: null,
-      },
-      description: 'A Label component.',
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    isInline: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Should the label and the field be inlined?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isReversedOrder: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Should the label and the field be reversed?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof LabelledField>;
-
-const Template: ComponentStory<typeof LabelledField> = ({ ...args }) => {
-  const id = 'sunt';
-  const [value, setValue] = useState<string>('');
-  const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+} satisfies Meta<typeof LabelledField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ControlledCheckbox = ({
+  isChecked: checked = false,
+  ...args
+}: CheckboxProps) => {
+  const [isChecked, setIsChecked] = useState<boolean>(checked);
+
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setIsChecked(e.target.checked);
+  }, []);
+
+  return <Checkbox {...args} isChecked={isChecked} onChange={handleChange} />;
+};
+
+const ControlledInput = ({ value: defaultValue, ...args }: InputProps) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }, []);
+
+  return <Input {...args} onChange={handleChange} value={value} />;
+};
+
+const ControlledRadio = ({
+  isChecked: checked = false,
+  ...args
+}: RadioProps) => {
+  const [isChecked, setIsChecked] = useState<boolean>(checked);
+
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setIsChecked(e.target.checked);
+  }, []);
+
+  return <Radio {...args} isChecked={isChecked} onChange={handleChange} />;
+};
+
+const ControlledTextArea = ({
+  value: defaultValue,
+  ...args
+}: TextAreaProps) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const handleChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.target.value);
   }, []);
 
-  return (
-    <LabelledField
-      {...args}
-      field={
-        <Input
-          id={id}
-          name={id}
-          onChange={updateValue}
-          type="text"
-          value={value}
-        />
-      }
-      label={<Label htmlFor={id}>A label</Label>}
-    />
-  );
-};
-
-/**
- * Labelled Field Stories - Left
- */
-export const Left = Template.bind({});
-Left.args = {
-  isInline: true,
-};
-
-/**
- * Labelled Field Stories - Right
- */
-export const Right = Template.bind({});
-Right.args = {
-  isInline: true,
-  isReversedOrder: true,
-};
-
-/**
- * Labelled Field Stories - Top
- */
-export const Top = Template.bind({});
-Top.args = {};
-
-/**
- * Labelled Field Stories - Bottom
- */
-export const Bottom = Template.bind({});
-Bottom.args = {
-  isReversedOrder: true,
+  return <TextArea {...args} onChange={handleChange} value={value} />;
+};
+
+export const Default: Story = {
+  args: {
+    field: (
+      <ControlledInput id="default-field" name="default-field" type="text" />
+    ),
+    label: <Label>A field label</Label>,
+  },
+};
+
+export const LabelledCheckbox: Story = {
+  name: 'Field: Checkbox',
+  args: {
+    ...Default.args,
+    field: (
+      <ControlledCheckbox
+        id="checkbox-field"
+        name="checkbox-field"
+        value="checkbox-field"
+      />
+    ),
+  },
+};
+
+export const LabelledRadio: Story = {
+  name: 'Field: Radio',
+  args: {
+    ...Default.args,
+    field: (
+      <ControlledRadio
+        id="radio-field"
+        name="radio-field"
+        value="radio-field"
+      />
+    ),
+  },
+};
+
+export const LabelledDateField: Story = {
+  name: 'Field: Date',
+  args: {
+    ...Default.args,
+    field: <ControlledInput id="date-field" name="date-field" type="date" />,
+  },
+};
+
+export const LabelledDateTimeField: Story = {
+  name: 'Field: Datetime',
+  args: {
+    ...Default.args,
+    field: (
+      <ControlledInput
+        id="datetime-field"
+        name="datetime-field"
+        type="datetime-local"
+      />
+    ),
+  },
+};
+
+export const LabelledEmailField: Story = {
+  name: 'Field: Email',
+  args: {
+    ...Default.args,
+    field: <ControlledInput id="email-field" name="email-field" type="email" />,
+  },
+};
+
+export const LabelledMonthField: Story = {
+  name: 'Field: Month',
+  args: {
+    ...Default.args,
+    field: <ControlledInput id="month-field" name="month-field" type="month" />,
+  },
+};
+
+export const LabelledNumberField: Story = {
+  name: 'Field: Number',
+  args: {
+    ...Default.args,
+    field: (
+      <ControlledInput id="number-field" name="number-field" type="number" />
+    ),
+  },
+};
+
+export const LabelledPasswordField: Story = {
+  name: 'Field: Password',
+  args: {
+    ...Default.args,
+    field: (
+      <ControlledInput
+        id="password-field"
+        name="password-field"
+        type="password"
+      />
+    ),
+  },
+};
+
+export const LabelledSearchField: Story = {
+  name: 'Field: Search',
+  args: {
+    ...Default.args,
+    field: (
+      <ControlledInput id="search-field" name="search-field" type="search" />
+    ),
+  },
+};
+
+export const LabelledSelect: Story = {
+  name: 'Field: Select',
+  args: {
+    ...Default.args,
+    field: (
+      <ControlledSelect
+        id="select-field"
+        name="select-field"
+        options={[]}
+        value=""
+      />
+    ),
+  },
+};
+
+export const LabelledTelField: Story = {
+  name: 'Field: Tel',
+  args: {
+    ...Default.args,
+    field: <ControlledInput id="tel-field" name="tel-field" type="tel" />,
+  },
+};
+
+export const LabelledTextField: Story = {
+  name: 'Field: Text',
+  args: {
+    ...Default.args,
+  },
+};
+
+export const LabelledTextArea: Story = {
+  name: 'Field: Textarea',
+  args: {
+    ...Default.args,
+    field: <ControlledTextArea id="textarea-field" name="textarea-field" />,
+  },
+};
+
+export const LabelledTimeField: Story = {
+  name: 'Field: Time',
+  args: {
+    ...Default.args,
+    field: <ControlledInput id="time-field" name="time-field" type="time" />,
+  },
+};
+
+export const LabelledUrlField: Story = {
+  name: 'Field: Url',
+  args: {
+    ...Default.args,
+    field: <ControlledInput id="url-field" name="url-field" type="url" />,
+  },
+};
+
+export const LayoutColumn: Story = {
+  name: 'Layout: Column',
+  args: {
+    ...LabelledCheckbox.args,
+    isInline: false,
+  },
+};
+
+export const LayoutReversedColumn: Story = {
+  name: 'Layout: Reversed column',
+  args: {
+    ...LabelledCheckbox.args,
+    isInline: false,
+    isReversedOrder: true,
+  },
+};
+
+export const LayoutRow: Story = {
+  name: 'Layout: Row',
+  args: {
+    ...LabelledCheckbox.args,
+    isInline: true,
+  },
+};
+
+export const LayoutReversedRow: Story = {
+  name: 'Layout: Reversed row',
+  args: {
+    ...LabelledCheckbox.args,
+    isInline: true,
+    isReversedOrder: true,
+  },
 };