refactor: improve stories organization

.storybook/preview.tsx

@@ -29,6 +29,9 @@ const ENV_PARAMETERS = {
     options: {
       storySort: STORY_SORT,
     },
+    docs: {
+      source: { excludeDecorators: true },
+    },
   },
   production: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -37,6 +40,9 @@ const ENV_PARAMETERS = {
     options: {
       storySort: STORY_SORT,
     },
+    docs: {
+      source: { excludeDecorators: true },
+    },
   },
 }
 export const parameters =

src/components/CheckboxField/__stories__/BooleanChecked.stories.tsx

@@ -0,0 +1,9 @@
+import { Story } from '@storybook/react'
+import { CheckboxField } from '..'
+import { Form, FormProps } from '../../Form'
+
+export const BooleanChecked: Story<FormProps> = ({ errors }) => (
+  <Form errors={errors} initialValues={{ foo: true }}>
+    <CheckboxField name="foo">Default Checked Boolean Item</CheckboxField>
+  </Form>
+)

src/components/CheckboxField/__stories__/Checked.stories.tsx

@@ -0,0 +1,15 @@
+import { Story } from '@storybook/react'
+import { CheckboxField } from '..'
+import { FormProps } from '../..'
+import { Form } from '../../Form'
+
+export const Checked: Story<FormProps> = ({ errors }) => (
+  <Form errors={errors} initialValues={{ foo: ['bar'] }}>
+    <CheckboxField name="foo" value="bar">
+      Checked Item
+    </CheckboxField>
+    <CheckboxField name="foo" value="nope">
+      Not Checked Item
+    </CheckboxField>
+  </Form>
+)

src/components/CheckboxField/__stories__/Disabled.stories.tsx

@@ -0,0 +1,9 @@
+import { Template } from './Template.stories'
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  ...Template.args,
+  disabled: true,
+  name: 'disabled',
+}

src/components/CheckboxField/__stories__/Playground.stories.tsx

@@ -0,0 +1,7 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+  name: 'playground',
+}

src/components/CheckboxField/__stories__/Required.stories.tsx

@@ -0,0 +1,17 @@
+import { Stack } from '@scaleway/ui'
+import { Story } from '@storybook/react'
+import { ComponentProps } from 'react'
+import { CheckboxField } from '..'
+import { Submit } from '../../Submit'
+
+export const Required: Story<ComponentProps<typeof CheckboxField>> = args => (
+  <Stack gap={1}>
+    <CheckboxField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Required.args = {
+  name: 'required',
+  required: true,
+}

src/components/CheckboxField/__stories__/Template.stories.tsx

@@ -0,0 +1,6 @@
+import { ComponentStory } from '@storybook/react'
+import { CheckboxField } from '..'
+
+export const Template: ComponentStory<typeof CheckboxField> = args => (
+  <CheckboxField {...args}>Checkbox</CheckboxField>
+)

src/components/CheckboxField/__stories__/index.stories.tsx

@@ -1,6 +1,5 @@
-import { Meta, Story } from '@storybook/react'
-import { ComponentProps } from 'react'
-import { CheckboxField, Form, FormProps, Submit } from '../..'
+import { Meta } from '@storybook/react'
+import { CheckboxField, Form } from '../..'
 import { mockErrors } from '../../../mocks'
 
 export default {
@@ -11,57 +10,17 @@ export default {
       description: {
         component: 'A checkbox field',
       },
-      source: { excludeDecorators: true },
     },
   },
   title: 'Components/Fields/CheckboxField',
 } as Meta
 
-const Template: Story<ComponentProps<typeof CheckboxField>> = args => (
-  <CheckboxField {...args}>Checkbox</CheckboxField>
-)
+export { Playground } from './Playground.stories'
 
-export const Default = Template.bind({})
+export { Checked } from './Checked.stories'
 
-Default.args = {
-  name: 'default',
-}
+export { BooleanChecked } from './BooleanChecked.stories'
 
-export const Checked: Story<FormProps> = ({ errors }) => (
-  <Form errors={errors} initialValues={{ foo: ['bar'] }}>
-    <CheckboxField name="foo" value="bar">
-      Checked Item
-    </CheckboxField>
-    <CheckboxField name="foo" value="nope">
-      Not Checked Item
-    </CheckboxField>
-  </Form>
-)
+export { Disabled } from './Disabled.stories'
 
-export const BooleanChecked: Story<FormProps> = ({ errors }) => (
-  <Form errors={errors} initialValues={{ foo: true }}>
-    <CheckboxField name="foo">Default Checked Boolean Item</CheckboxField>
-  </Form>
-)
-
-export const Disabled = Template.bind({})
-
-Disabled.args = {
-  ...Template.args,
-  disabled: true,
-  name: 'disabled',
-}
-
-export const Required: Story<ComponentProps<typeof CheckboxField>> = args => (
-  <>
-    <CheckboxField {...args} />
-    <div style={{ marginTop: 8 }}>
-      <Submit>Submit</Submit>
-    </div>
-  </>
-)
-
-Required.args = {
-  name: 'required',
-  required: true,
-}
+export { Required } from './Required.stories'

src/components/DateField/__stories__/Disabled.stories.tsx

@@ -0,0 +1,8 @@
+import { Template } from './Template.stories'
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  disabled: true,
+  name: 'disabled',
+}

src/components/DateField/__stories__/MinMaxDate.stories.tsx

@@ -0,0 +1,19 @@
+import { Stack } from '@scaleway/ui'
+import { Story } from '@storybook/react'
+import { ComponentProps } from 'react'
+import { DateField } from '..'
+import { Submit } from '../../Submit'
+
+export const MinMaxDate: Story<ComponentProps<typeof DateField>> = args => (
+  <Stack gap={1}>
+    <DateField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+MinMaxDate.args = {
+  maxDate: new Date('2021-12-31'),
+  minDate: new Date('2021-01-01'),
+  name: 'date',
+  required: true,
+}

src/components/DateField/__stories__/MinMaxWithTimeField.stories.tsx

@@ -0,0 +1,30 @@
+import { Stack } from '@scaleway/ui'
+import { Story } from '@storybook/react'
+import { ComponentProps } from 'react'
+import { DateField } from '..'
+import { Submit } from '../../Submit'
+import { TimeField } from '../../TimeField'
+
+const now = new Date()
+
+export const MinMaxDateWithTimeField: Story<
+  ComponentProps<typeof DateField>
+> = ({ name, minDate, maxDate, required }) => (
+  <Stack gap={1}>
+    <DateField
+      name={name}
+      minDate={minDate}
+      initialValue={now}
+      maxDate={maxDate}
+      required={required}
+    />
+    <TimeField name={name} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+MinMaxDateWithTimeField.args = {
+  maxDate: new Date(),
+  name: 'date and input',
+  required: true,
+}

src/components/DateField/__stories__/Playground.stories.tsx

@@ -0,0 +1,7 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+  name: 'default',
+}

src/components/DateField/__stories__/Required.stories.tsx

@@ -0,0 +1,17 @@
+import { Stack } from '@scaleway/ui'
+import { Story } from '@storybook/react'
+import { ComponentProps } from 'react'
+import { DateField } from '..'
+import { Submit } from '../../Submit'
+
+export const Required: Story<ComponentProps<typeof DateField>> = args => (
+  <Stack gap={1}>
+    <DateField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Required.args = {
+  name: 'required',
+  required: true,
+}

src/components/DateField/__stories__/Template.stories.tsx

@@ -0,0 +1,11 @@
+import { Story } from '@storybook/react'
+import { ComponentProps } from 'react'
+import { DateField } from '..'
+
+export const Template: Story<ComponentProps<typeof DateField>> = args => (
+  <DateField {...args} />
+)
+
+Template.args = {
+  name: 'template',
+}

src/components/DateField/__stories__/index.stories.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled'
-import { Meta, Story } from '@storybook/react'
-import { ComponentProps } from 'react'
-import { DateField, Form, Submit, TimeField } from '../..'
+import { Meta } from '@storybook/react'
+import { DateField, Form } from '../..'
 import { mockErrors } from '../../../mocks'
 
 const Container = styled.div`
@@ -22,88 +21,13 @@ export default {
         component:
           'DateField is a component used in Form to pick a date. This component is a Wrapper of DateInput https://github.com/scaleway/scaleway-ui/tree/main/src/components/DateInput',
       },
-      source: { excludeDecorators: true },
     },
   },
   title: 'Components/Fields/DateField',
 } as Meta
 
-const Template: Story<ComponentProps<typeof DateField>> = args => (
-  <DateField {...args} />
-)
-
-Template.args = {
-  name: 'template',
-}
-
-export const Default = Template.bind({})
-
-Default.args = {
-  name: 'default',
-}
-
-export const Disabled = Template.bind({})
-
-Disabled.args = {
-  ...Template.args,
-  disabled: true,
-  name: 'disabled',
-}
-
-export const Required: Story<ComponentProps<typeof DateField>> = args => (
-  <>
-    <DateField {...args} />
-    <div style={{ marginTop: 8 }}>
-      <Submit>Submit</Submit>
-    </div>
-  </>
-)
-
-Required.args = {
-  name: 'required',
-  required: true,
-}
-
-export const MinMaxDate: Story<ComponentProps<typeof DateField>> = args => (
-  <>
-    <DateField {...args} />
-    <div style={{ marginTop: 8 }}>
-      <Submit>Submit</Submit>
-    </div>
-  </>
-)
-
-MinMaxDate.args = {
-  maxDate: new Date('2021-12-31'),
-  minDate: new Date('2021-01-01'),
-  name: 'date',
-  required: true,
-}
-
-const now = new Date()
-
-export const MinMaxDateWithTimeField: Story<
-  ComponentProps<typeof DateField>
-> = ({ name, minDate, maxDate, required }) => (
-  <>
-    <DateField
-      name={name}
-      minDate={minDate}
-      initialValue={now}
-      maxDate={maxDate}
-      required={required}
-    />
-    <div style={{ marginTop: 8 }}>
-      <TimeField name={name} />
-    </div>
-    <div style={{ marginTop: 8 }}>
-      <Submit>Submit</Submit>
-    </div>
-  </>
-)
-
-MinMaxDateWithTimeField.args = {
-  maxDate: new Date(),
-  name: 'date and input',
-  required: true,
-}
+export { Playground } from './Playground.stories'
+export { Disabled } from './Disabled.stories'
+export { Required } from './Required.stories'
+export { MinMaxDate } from './MinMaxDate.stories'
+export { MinMaxDateWithTimeField } from './MinMaxWithTimeField.stories'