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