♻️(react) migrate to Storybook 7

This new release comes with breaking changes for stories and mdx docs.
2023-05-12 16:03:16 +02:00
parent e7fc782b1c
commit 77721c3b6d
24 changed files with 2639 additions and 4187 deletions
--- a/packages/react/src/components/Forms/Checkbox/index.stories.mdx
+++ b/packages/react/src/components/Forms/Checkbox/index.stories.mdx
@@ -17,13 +17,13 @@ The `label` props is optional, but you can use it to provide a description of th

 **Without label**

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--default"/>
 </Canvas>

 **With label**

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--with-label"/>
 </Canvas>

@@ -31,7 +31,7 @@ The `label` props is optional, but you can use it to provide a description of th

 You can set the value of the checkbox in 3 different ways.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--default"/>
  <Story id="components-forms-checkbox--indeterminate"/>
  <Story id="components-forms-checkbox--checked"/>
@@ -41,7 +41,7 @@ You can set the value of the checkbox in 3 different ways.

 As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--with-texts"/>
 </Canvas>

@@ -49,7 +49,7 @@ As the component uses [Field](?path=/story/components-forms-field-doc--page), yo

 As a regular checkbox, you can disable it by using the `disabled` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--disabled"/>
 </Canvas>

@@ -57,15 +57,15 @@ As a regular checkbox, you can disable it by using the `disabled` props.

 You can use the following props to change the state of the Input component by using the `state` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--with-texts"/>
 </Canvas>

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--success"/>
 </Canvas>

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--error"/>
 </Canvas>

@@ -73,13 +73,13 @@ You can use the following props to change the state of the Input component by us

 It will happen often that you will need to use multiple grouped checkboxes. You can use the `CheckboxGroup` component to do so.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--group"/>
 </Canvas>

 You can also define `state`, `text` props on the group component

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--group-error"/>
  <Story id="components-forms-checkbox--group-success"/>
 </Canvas>
--- a/packages/react/src/components/Forms/Checkbox/index.stories.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
@@ -1,74 +1,103 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
 import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";

 export default {
  title: "Components/Forms/Checkbox",
  component: Checkbox,
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;

-const Template: ComponentStory<typeof Checkbox> = (args) => (
+const Template: StoryFn<typeof Checkbox> = (args) => (
  <Checkbox {...args} aria-label="Checkbox" />
 );

-export const Default = Template.bind({});
-Default.args = {};
-
-export const Checked = Template.bind({});
-Checked.args = {
-  checked: true,
+export const Default = {
+  render: Template,
+  args: {},
 };

-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-  indeterminate: true,
+export const Checked = {
+  render: Template,
+
+  args: {
+    checked: true,
+  },
 };

-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  label: "Label",
+export const Indeterminate = {
+  render: Template,
+
+  args: {
+    indeterminate: true,
+  },
 };

-export const LabelChecked = Template.bind({});
-LabelChecked.args = {
-  checked: true,
-  label: "Label",
+export const WithLabel = {
+  render: Template,
+
+  args: {
+    label: "Label",
+  },
 };

-export const WithTexts = Template.bind({});
-WithTexts.args = {
-  checked: true,
-  label: "Label",
-  text: "This is an optional text",
+export const LabelChecked = {
+  render: Template,
+
+  args: {
+    checked: true,
+    label: "Label",
+  },
 };

-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  label: "Label",
+export const WithTexts = {
+  render: Template,
+
+  args: {
+    checked: true,
+    label: "Label",
+    text: "This is an optional text",
+  },
 };

-export const DisabledChecked = Template.bind({});
-DisabledChecked.args = {
-  checked: true,
-  disabled: true,
-  label: "Label",
+export const Disabled = {
+  render: Template,
+
+  args: {
+    disabled: true,
+    label: "Label",
+  },
 };

-export const Error = Template.bind({});
-Error.args = {
-  checked: true,
-  label: "Label",
-  text: "This is an optional text",
-  state: "error",
+export const DisabledChecked = {
+  render: Template,
+
+  args: {
+    checked: true,
+    disabled: true,
+    label: "Label",
+  },
 };

-export const Success = Template.bind({});
-Success.args = {
-  checked: true,
-  label: "Label",
-  text: "This is an optional text",
-  state: "success",
+export const Error = {
+  render: Template,
+
+  args: {
+    checked: true,
+    label: "Label",
+    text: "This is an optional text",
+    state: "error",
+  },
+};
+
+export const Success = {
+  render: Template,
+
+  args: {
+    checked: true,
+    label: "Label",
+    text: "This is an optional text",
+    state: "success",
+  },
 };

 export const Group = () => (
--- a/packages/react/src/components/Forms/Field/index.stories.tsx
+++ b/packages/react/src/components/Forms/Field/index.stories.tsx
@@ -1,34 +1,43 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
 import { Field } from ":/components/Forms/Field/index";

 export default {
  title: "Components/Forms/Field",
  component: Field,
-} as ComponentMeta<typeof Field>;
+} as Meta<typeof Field>;

-const Template: ComponentStory<typeof Field> = (args) => (
+const Template: StoryFn<typeof Field> = (args) => (
  <Field {...args}>
    <strong>Any children</strong>
  </Field>
 );

-export const Default = Template.bind({});
-Default.args = {
-  text: "This is an optional text",
-  rightText: "Right text",
+export const Default = {
+  render: Template,
+
+  args: {
+    text: "This is an optional text",
+    rightText: "Right text",
+  },
 };

-export const Success = Template.bind({});
-Success.args = {
-  state: "success",
-  text: "This is an optional success message",
-  rightText: "Right text",
+export const Success = {
+  render: Template,
+
+  args: {
+    state: "success",
+    text: "This is an optional success message",
+    rightText: "Right text",
+  },
 };

-export const Error = Template.bind({});
-Error.args = {
-  state: "error",
-  text: "This is an optional error message",
-  rightText: "Right text",
+export const Error = {
+  render: Template,
+
+  args: {
+    state: "error",
+    text: "This is an optional error message",
+    rightText: "Right text",
+  },
 };
--- a/packages/react/src/components/Forms/Input/index.stories.mdx
+++ b/packages/react/src/components/Forms/Input/index.stories.mdx
@@ -24,15 +24,15 @@ Cunningham provides a versatile Input component that you can use in your forms.

 You can use the following props to change the state of the Input component by using the `state` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--default"/>
 </Canvas>

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--success"/>
 </Canvas>

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--error"/>
 </Canvas>

@@ -40,7 +40,7 @@ You can use the following props to change the state of the Input component by us

 As a regular input, you can disable it by using the `disabled` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--disabled-empty"/>
  <Story id="components-forms-input--disabled-filled"/>
 </Canvas>
@@ -49,13 +49,13 @@ As a regular input, you can disable it by using the `disabled` props.

 You can define an icon that will appear on the left side of the input by using the `icon` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--icon"/>
 </Canvas>

 You can also independently add an icon on the right side by using the `rightIcon` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--icon-right"/>
 </Canvas>

@@ -63,13 +63,13 @@ You can also independently add an icon on the right side by using the `rightIcon

 You can define a text that will appear below the input by using the `text` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--with-text"/>
 </Canvas>

 You can also independently add a text on the right side by using the `rightText` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--with-both-texts"/>
 </Canvas>

@@ -77,7 +77,7 @@ You can also independently add a text on the right side by using the `rightText`

 By default, the input has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--full-width"/>
 </Canvas>

@@ -86,7 +86,7 @@ By default, the input has a default width, like all inputs. But you can force it
 You can display a counter of the number of characters entered in the input by using the `charsCounter` props. Please bare
 in mind to also define `charCounterMax`.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--char-counter"/>
 </Canvas>

@@ -95,7 +95,7 @@ in mind to also define `charCounterMax`.
 Like a native input, you can use the Input component in a controlled or non controlled way. You can see the example below
 using the component in a controlled way.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--controlled"/>
 </Canvas>

@@ -103,7 +103,7 @@ using the component in a controlled way.

 You can use the `ref` props to get a reference to the input element. The ref to the native input is nested inside the `input` attribute.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-input--with-ref"/>
 </Canvas>

--- a/packages/react/src/components/Forms/Input/index.stories.tsx
+++ b/packages/react/src/components/Forms/Input/index.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import React, { useRef } from "react";
 import { Input, InputRefType } from ":/components/Forms/Input/index";
 import { Button } from ":/components/Button";
@@ -6,121 +6,134 @@ import { Button } from ":/components/Button";
 export default {
  title: "Components/Forms/Input",
  component: Input,
-} as ComponentMeta<typeof Input>;
+} as Meta<typeof Input>;

-const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  defaultValue: "Hello world",
-  label: "Your name",
+export const Default = {
+  args: {
+    defaultValue: "Hello world",
+    label: "Your name",
+  },
 };

-export const Success = Template.bind({});
-Success.args = {
-  defaultValue: "Hello world",
-  label: "Your name",
-  state: "success",
-  icon: <span className="material-icons">person</span>,
-  text: "This is an optional success message",
+export const Success = {
+  args: {
+    defaultValue: "Hello world",
+    label: "Your name",
+    state: "success",
+    icon: <span className="material-icons">person</span>,
+    text: "This is an optional success message",
+  },
 };

-export const Error = Template.bind({});
-Error.args = {
-  defaultValue: "Hello world",
-  label: "Your name",
-  state: "error",
-  icon: <span className="material-icons">person</span>,
-  text: "This is an optional error message",
+export const Error = {
+  args: {
+    defaultValue: "Hello world",
+    label: "Your name",
+    state: "error",
+    icon: <span className="material-icons">person</span>,
+    text: "This is an optional error message",
+  },
 };

-export const DisabledEmpty = Template.bind({});
-DisabledEmpty.args = {
-  label: "Your name",
-  icon: <span className="material-icons">person</span>,
-  disabled: true,
+export const DisabledEmpty = {
+  args: {
+    label: "Your name",
+    icon: <span className="material-icons">person</span>,
+    disabled: true,
+  },
 };

-export const DisabledFilled = Template.bind({});
-DisabledFilled.args = {
-  label: "Your name",
-  defaultValue: "John Doe",
-  icon: <span className="material-icons">person</span>,
-  disabled: true,
+export const DisabledFilled = {
+  args: {
+    label: "Your name",
+    defaultValue: "John Doe",
+    icon: <span className="material-icons">person</span>,
+    disabled: true,
+  },
 };

-export const Empty = Template.bind({});
-Empty.args = {
-  label: "Your email",
+export const Empty = {
+  args: {
+    label: "Your email",
+  },
 };

-export const Icon = Template.bind({});
-Icon.args = {
-  label: "Account balance",
-  icon: <span className="material-icons">attach_money</span>,
-  defaultValue: "1000",
+export const Icon = {
+  args: {
+    label: "Account balance",
+    icon: <span className="material-icons">attach_money</span>,
+    defaultValue: "1000",
+  },
 };

-export const IconRight = Template.bind({});
-IconRight.args = {
-  label: "Account balance",
-  rightIcon: <span className="material-icons">attach_money</span>,
-  defaultValue: "1000",
+export const IconRight = {
+  args: {
+    label: "Account balance",
+    rightIcon: <span className="material-icons">attach_money</span>,
+    defaultValue: "1000",
+  },
 };

-export const IconBoth = Template.bind({});
-IconBoth.args = {
-  label: "Not a recommended use",
-  icon: <span className="material-icons">attach_money</span>,
-  rightIcon: <span className="material-icons">attach_money</span>,
-  defaultValue: "Is isn't recommended to use both icons",
+export const IconBoth = {
+  args: {
+    label: "Not a recommended use",
+    icon: <span className="material-icons">attach_money</span>,
+    rightIcon: <span className="material-icons">attach_money</span>,
+    defaultValue: "Is isn't recommended to use both icons",
+  },
 };

-export const OverflowingText = Template.bind({});
-OverflowingText.args = {
-  label: "Your name",
-  icon: <span className="material-icons">attach_money</span>,
-  defaultValue: "John Dave Mike Smith Doe Junior Senior Yoda Skywalker",
+export const OverflowingText = {
+  args: {
+    label: "Your name",
+    icon: <span className="material-icons">attach_money</span>,
+    defaultValue: "John Dave Mike Smith Doe Junior Senior Yoda Skywalker",
+  },
 };

-export const WithText = Template.bind({});
-WithText.args = {
-  defaultValue: "Hello world",
-  label: "Your name",
-  text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+export const WithText = {
+  args: {
+    defaultValue: "Hello world",
+    label: "Your name",
+    text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+  },
 };

-export const WithTextRight = Template.bind({});
-WithTextRight.args = {
-  defaultValue: "Hello world",
-  label: "Your name",
-  rightText: "0/300",
+export const WithTextRight = {
+  args: {
+    defaultValue: "Hello world",
+    label: "Your name",
+    rightText: "0/300",
+  },
 };

-export const WithBothTexts = Template.bind({});
-WithBothTexts.args = {
-  defaultValue: "Hello world",
-  label: "Your name",
-  text: "This is a text, you can display anything you want here like warnings, informations or errors.",
-  rightText: "0/300",
+export const WithBothTexts = {
+  args: {
+    defaultValue: "Hello world",
+    label: "Your name",
+    text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+    rightText: "0/300",
+  },
 };

-export const FullWidth = Template.bind({});
-FullWidth.args = {
-  defaultValue: "Hello world",
-  label: "Your name",
-  fullWidth: true,
-  text: "This is a text, you can display anything you want here like warnings, informations or errors.",
-  rightText: "0/300",
+export const FullWidth = {
+  args: {
+    defaultValue: "Hello world",
+    label: "Your name",
+    fullWidth: true,
+    text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+    rightText: "0/300",
+  },
 };

-export const CharCounter = Template.bind({});
-CharCounter.args = {
-  defaultValue: "CEO",
-  label: "Job title",
-  text: "This is a text, you can display anything you want here like warnings, informations or errors.",
-  charCounter: true,
-  charCounterMax: 30,
+export const CharCounter = {
+  args: {
+    defaultValue: "CEO",
+    label: "Job title",
+    text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+    charCounter: true,
+    charCounterMax: 30,
+  },
 };

 export const Controlled = () => {
--- a/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
+++ b/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
@@ -1,20 +1,23 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
 import { LabelledBox } from ":/components/Forms/LabelledBox/index";

 export default {
  title: "Components/Forms/LabelledBox",
  component: LabelledBox,
-} as ComponentMeta<typeof LabelledBox>;
+} as Meta<typeof LabelledBox>;

-const Template: ComponentStory<typeof LabelledBox> = (args) => (
+const Template: StoryFn<typeof LabelledBox> = (args) => (
  <div style={{ height: "3.5rem" }}>
    <LabelledBox {...args} />
  </div>
 );

-export const Default = Template.bind({});
-Default.args = {
-  label: "Your label here",
-  children: <span className="clr-greyscale-800">Hello world</span>,
+export const Default = {
+  render: Template,
+
+  args: {
+    label: "Your label here",
+    children: <span className="clr-greyscale-800">Hello world</span>,
+  },
 };
--- a/packages/react/src/components/Forms/Radio/index.stories.mdx
+++ b/packages/react/src/components/Forms/Radio/index.stories.mdx
@@ -17,13 +17,13 @@ The `label` props is optional, but you can use it to provide a description of th

 **Without label**

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--default"/>
 </Canvas>

 **With label**

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--with-label"/>
 </Canvas>

@@ -31,7 +31,7 @@ The `label` props is optional, but you can use it to provide a description of th

 You can set the value of the radio with the `checked` attribute.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--default"/>
  <Story id="components-forms-radio--checked"/>
 </Canvas>
@@ -40,7 +40,7 @@ You can set the value of the radio with the `checked` attribute.

 As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the radio.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--with-text"/>
 </Canvas>

@@ -48,7 +48,7 @@ As the component uses [Field](?path=/story/components-forms-field-doc--page), yo

 As a regular radio, you can disable it by using the `disabled` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--disabled"/>
 </Canvas>

@@ -56,15 +56,15 @@ As a regular radio, you can disable it by using the `disabled` props.

 You can use the following props to change the state of the Input component by using the `state` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--with-text"/>
 </Canvas>

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--success"/>
 </Canvas>

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--error"/>
 </Canvas>

@@ -72,13 +72,13 @@ You can use the following props to change the state of the Input component by us

 Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--group"/>
 </Canvas>

 You can also define `state`, `text` props on the group component

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-radio--group-error"/>
  <Story id="components-forms-radio--group-success"/>
 </Canvas>
--- a/packages/react/src/components/Forms/Radio/index.stories.tsx
+++ b/packages/react/src/components/Forms/Radio/index.stories.tsx
@@ -1,69 +1,95 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
 import { Radio, RadioGroup } from ":/components/Forms/Radio/index";

 export default {
  title: "Components/Forms/Radio",
  component: Radio,
-} as ComponentMeta<typeof Radio>;
+} as Meta<typeof Radio>;

-const Template: ComponentStory<typeof Radio> = (args) => (
+const Template: StoryFn<typeof Radio> = (args) => (
  <Radio {...args} aria-label="Radio" />
 );

-export const Default = Template.bind({});
-Default.args = {};
-
-export const Checked = Template.bind({});
-Checked.args = {
-  checked: true,
+export const Default = {
+  render: Template,
+  args: {},
 };

-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  label: "Label",
+export const Checked = {
+  render: Template,
+
+  args: {
+    checked: true,
+  },
 };

-export const WithLabelChecked = Template.bind({});
-WithLabelChecked.args = {
-  label: "Label",
-  checked: true,
+export const WithLabel = {
+  render: Template,
+
+  args: {
+    label: "Label",
+  },
 };

-export const WithText = Template.bind({});
-WithText.args = {
-  label: "Label",
-  text: "Some optional text",
+export const WithLabelChecked = {
+  render: Template,
+
+  args: {
+    label: "Label",
+    checked: true,
+  },
 };

-export const Disabled = Template.bind({});
-Disabled.args = {
-  label: "Label",
-  disabled: true,
+export const WithText = {
+  render: Template,
+
+  args: {
+    label: "Label",
+    text: "Some optional text",
+  },
 };

-export const DisabledChecked = Template.bind({});
-DisabledChecked.args = {
-  label: "Label",
-  disabled: true,
-  checked: true,
-  text: "Some optional text",
+export const Disabled = {
+  render: Template,
+
+  args: {
+    label: "Label",
+    disabled: true,
+  },
 };

-export const Error = Template.bind({});
-Error.args = {
-  checked: true,
-  label: "Label",
-  text: "This is an optional text",
-  state: "error",
+export const DisabledChecked = {
+  render: Template,
+
+  args: {
+    label: "Label",
+    disabled: true,
+    checked: true,
+    text: "Some optional text",
+  },
 };

-export const Success = Template.bind({});
-Success.args = {
-  checked: true,
-  label: "Label",
-  text: "This is an optional text",
-  state: "success",
+export const Error = {
+  render: Template,
+
+  args: {
+    checked: true,
+    label: "Label",
+    text: "This is an optional text",
+    state: "error",
+  },
+};
+
+export const Success = {
+  render: Template,
+
+  args: {
+    checked: true,
+    label: "Label",
+    text: "This is an optional text",
+    state: "success",
+  },
 };

 export const Group = () => {
--- a/packages/react/src/components/Forms/Select/index.stories.mdx
+++ b/packages/react/src/components/Forms/Select/index.stories.mdx
@@ -36,7 +36,7 @@ As you can see the `value` is optional, if not provided, the `label` will be use

 You can enable the text live filtering simply by using the `searchable` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-select-mono--searchable-uncontrolled"/>
 </Canvas>

@@ -44,11 +44,11 @@ You can enable the text live filtering simply by using the `searchable` props.

 You can use the following props to change the state of the Select component by using the `state` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-select-mono--success"/>
 </Canvas>

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-select-mono--error"/>
 </Canvas>

@@ -56,7 +56,7 @@ You can use the following props to change the state of the Select component by u

 As a regular select, you can disable it by using the `disabled` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-select-mono--disabled"/>
 </Canvas>

@@ -64,7 +64,7 @@ As a regular select, you can disable it by using the `disabled` props.

 As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-select-mono--with-text"/>
 </Canvas>

@@ -72,7 +72,7 @@ As the component uses [Field](?path=/story/components-forms-field-doc--page), yo

 By default, the select has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-select-mono--full-width"/>
 </Canvas>

@@ -81,7 +81,7 @@ By default, the select has a default width, like all inputs. But you can force i
 Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
 using the component in a controlled way.

-<Canvas withSource="open">
+<Canvas sourceState="shown">
  <Story id="components-forms-select-mono--controlled"/>
 </Canvas>

--- a/packages/react/src/components/Forms/Select/mono.stories.tsx
+++ b/packages/react/src/components/Forms/Select/mono.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
 import { faker } from "@faker-js/faker";
 import { Select } from ":/components/Forms/Select";
@@ -8,9 +8,9 @@ import { CunninghamProvider } from ":/components/Provider";
 export default {
  title: "Components/Forms/Select/Mono",
  component: Select,
-} as ComponentMeta<typeof Select>;
+} as Meta<typeof Select>;

-const Template: ComponentStory<typeof Select> = (args) => (
+const Template: StoryFn<typeof Select> = (args) => (
  <div style={{ paddingBottom: "200px" }}>
    <CunninghamProvider>
      <Select {...args} />
@@ -24,28 +24,38 @@ const OPTIONS = CITIES.map((city) => ({
  value: city.toLowerCase(),
 }));

-export const Uncontrolled = Template.bind({});
-Uncontrolled.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  defaultValue: OPTIONS[4].value,
+export const Uncontrolled = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    defaultValue: OPTIONS[4].value,
+  },
 };

-export const Disabled = Template.bind({});
-Disabled.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  defaultValue: OPTIONS[4].value,
-  disabled: true,
+export const Disabled = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    defaultValue: OPTIONS[4].value,
+    disabled: true,
+  },
 };

-export const WithText = Template.bind({});
-WithText.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  defaultValue: OPTIONS[4].value,
-  text: "This is a text, you can display anything you want here like warnings, information or errors.",
+export const WithText = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    defaultValue: OPTIONS[4].value,
+    text: "This is a text, you can display anything you want here like warnings, information or errors.",
+  },
 };
+
 export const Controlled = () => {
  const [value, setValue] = useState(OPTIONS[8].value);
  return (
@@ -66,40 +76,52 @@ export const Controlled = () => {
  );
 };

-export const Overflow = Template.bind({});
-Overflow.args = {
-  label: "Select a city",
-  options: [
-    {
-      value: "1",
-      label: "Very long long long long long long long city name",
-    },
-  ],
-  defaultValue: "1",
+export const Overflow = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: [
+      {
+        value: "1",
+        label: "Very long long long long long long long city name",
+      },
+    ],
+    defaultValue: "1",
+  },
 };

-export const SearchableEmpty = Template.bind({});
-SearchableEmpty.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  searchable: true,
+export const SearchableEmpty = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    searchable: true,
+  },
 };

-export const SearchableUncontrolled = Template.bind({});
-SearchableUncontrolled.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  defaultValue: OPTIONS[4].value,
-  searchable: true,
+export const SearchableUncontrolled = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    defaultValue: OPTIONS[4].value,
+    searchable: true,
+  },
 };

-export const SearchableDisabled = Template.bind({});
-SearchableDisabled.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  defaultValue: OPTIONS[4].value,
-  searchable: true,
-  disabled: true,
+export const SearchableDisabled = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    defaultValue: OPTIONS[4].value,
+    searchable: true,
+    disabled: true,
+  },
 };

 export const SearchableControlled = () => {
@@ -123,27 +145,36 @@ export const SearchableControlled = () => {
  );
 };

-export const FullWidth = Template.bind({});
-FullWidth.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  fullWidth: true,
+export const FullWidth = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    fullWidth: true,
+  },
 };

-export const Success = Template.bind({});
-Success.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  state: "success",
-  text: "Well done",
+export const Success = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    state: "success",
+    text: "Well done",
+  },
 };

-export const Error = Template.bind({});
-Error.args = {
-  label: "Select a city",
-  options: OPTIONS,
-  state: "error",
-  text: "Something went wrong",
+export const Error = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    state: "error",
+    text: "Something went wrong",
+  },
 };

 export const FormExample = () => {