♻️(react) migrate to Storybook 7

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

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>

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