♻️(react) migrate to Storybook 7

This new release comes with breaking changes for stories and mdx docs.

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>

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 = () => (