docs: use ComponentDecorator (#800)

Related to #702

front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx

@@ -1,23 +1,31 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconCalendar } from '@tabler/icons-react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { DateEditableField } from '../DateEditableField';
 
 const meta: Meta<typeof DateEditableField> = {
   title: 'UI/EditableField/DateEditableField',
   component: DateEditableField,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconCalendar />,
+        false: undefined,
+      },
+    },
+    value: { control: { type: 'date' } },
+  },
+  args: {
+    value: new Date().toISOString(),
+    icon: true,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof DateEditableField>;
 
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <DateEditableField
-      value={new Date().toISOString()}
-      icon={<IconCalendar />}
-    />,
-  ),
-};
+export const Default: Story = {};

front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx

@@ -1,24 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconCurrencyDollar } from '@tabler/icons-react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { NumberEditableField } from '../NumberEditableField';
 
 const meta: Meta<typeof NumberEditableField> = {
   title: 'UI/EditableField/NumberEditableField',
   component: NumberEditableField,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconCurrencyDollar />,
+        false: undefined,
+      },
+    },
+    value: { control: { type: 'number' } },
+  },
+  args: {
+    value: 10,
+    icon: true,
+    placeholder: 'Number',
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof NumberEditableField>;
 
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <NumberEditableField
-      value={10}
-      icon={<IconCurrencyDollar />}
-      placeholder="Number"
-    />,
-  ),
-};
+export const Default: Story = {};

front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx

@@ -2,26 +2,38 @@ import { BrowserRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconPhone } from '@tabler/icons-react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { PhoneEditableField } from '../PhoneEditableField';
 
 const meta: Meta<typeof PhoneEditableField> = {
   title: 'UI/EditableField/PhoneEditableField',
   component: PhoneEditableField,
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+    ComponentDecorator,
+  ],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconPhone />,
+        false: undefined,
+      },
+    },
+  },
+  args: {
+    value: '+33714446494',
+    icon: true,
+    placeholder: 'Phone',
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof PhoneEditableField>;
 
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <BrowserRouter>
-      <PhoneEditableField
-        value={'+33714446494'}
-        icon={<IconPhone />}
-        placeholder="Phone"
-      />
-    </BrowserRouter>,
-  ),
-};
+export const Default: Story = {};

front/src/modules/ui/editable-field/variants/components/__stories__/TextEditableField.stories.tsx

@@ -1,24 +1,31 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconUser } from '@tabler/icons-react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { TextEditableField } from '../TextEditableField';
 
 const meta: Meta<typeof TextEditableField> = {
   title: 'UI/EditableField/TextEditableField',
   component: TextEditableField,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconUser />,
+        false: undefined,
+      },
+    },
+  },
+  args: {
+    value: 'John Doe',
+    icon: true,
+    placeholder: 'Name',
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof TextEditableField>;
 
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <TextEditableField
-      value={'John Doe'}
-      icon={<IconUser />}
-      placeholder="Name"
-    />,
-  ),
-};
+export const Default: Story = {};