chore(Toast): migrate stories from CSF2 to CSF3

kiwicom · Sep 25, 2024 · 871a21a · 871a21a
1 parent 5da7fd9
commit 871a21a
Showing 1 changed file with 129 additions and 79 deletions.
diff --git a/packages/orbit-components/src/Toast/Toast.stories.tsx b/packages/orbit-components/src/Toast/Toast.stories.tsx
@@ -1,15 +1,12 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import Button from "../Button";
 import Notification from "../icons/Notification";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 import { ToastRoot, createToast, createToastPromise } from ".";
 
-export default {
-  title: "Toast",
-};
-
 enum PLACEMENTS {
   TOP_LEFT = "top-left",
   TOP_CENTER = "top-center",
@@ -19,97 +16,150 @@ enum PLACEMENTS {
   BOTTOM_RIGHT = "bottom-right",
 }
 
-export const Default = ({
-  message,
-  placement,
-  topOffset,
-  bottomOffset,
-  leftOffset,
-  rightOffset,
-  dismissTimeout,
-  gutter,
-}) => {
-  const toast = () => createToast(message, { icon: <Notification /> });
-
-  return (
-    <>
-      <Button onClick={toast}>Add toast</Button>
-      <ToastRoot
-        placement={placement}
-        dismissTimeout={dismissTimeout}
-        topOffset={topOffset}
-        gutter={gutter}
-        bottomOffset={bottomOffset}
-        leftOffset={leftOffset}
-        rightOffset={rightOffset}
-      />
-    </>
-  );
+type ToastPropsAndCustomArgs = React.ComponentProps<typeof ToastRoot> & {
+  message: string;
 };
 
-Default.args = {
-  message: "Thank you for feedback",
-  placement: PLACEMENTS.TOP_CENTER,
-  topOffset: 8,
-  bottomOffset: 8,
-  leftOffset: 8,
-  rightOffset: 8,
-  dismissTimeout: 5000,
-  gutter: 8,
+const meta: Meta<ToastPropsAndCustomArgs> = {
+  title: "Toast",
+  component: ToastRoot,
 };
 
-Default.argTypes = {
-  placement: {
-    options: Object.values(PLACEMENTS),
-    control: {
-      type: "select",
+export default meta;
+type Story = StoryObj<ToastPropsAndCustomArgs>;
+
+export const Default: Story = {
+  render: ({ message }) => {
+    const toast = () => createToast(message, { icon: <Notification /> });
+
+    return (
+      <>
+        <Button onClick={toast}>Add toast</Button>
+        <ToastRoot />
+      </>
+    );
+  },
+
+  parameters: {
+    controls: {
+      exclude: [
+        "topOffset",
+        "leftOffset",
+        "rightOffset",
+        "bottomOffset",
+        "gutter",
+        "dismissTimeout",
+        "placement",
+      ],
     },
   },
+
+  args: {
+    message: "Thank you for feedback",
+  },
 };
 
-export const WithPromise = () => {
-  const notify = () => {
-    const promise = new Promise((res, rej) => {
-      setTimeout(Math.random() > 0.5 ? res : rej, 3000);
-    });
-
-    createToastPromise(
-      promise,
-      {
-        loading: "...Loading",
-        success: "Freddy Krueger has nightmares about Chuck Norris!",
-        error: "Chuck did not come",
-      },
-      {
-        success: {
-          icon: <Notification />,
+export const WithPromise: Story = {
+  render: () => {
+    const notify = () => {
+      const promise = new Promise((res, rej) => {
+        setTimeout(Math.random() > 0.5 ? res : rej, 3000);
+      });
+
+      createToastPromise(
+        promise,
+        {
+          loading: "...Loading",
+          success: "Freddy Krueger has nightmares about Chuck Norris!",
+          error: "Chuck did not come",
         },
-      },
+        {
+          success: {
+            icon: <Notification />,
+          },
+        },
+      );
+    };
+
+    return (
+      <>
+        <Button onClick={notify}>Add toast</Button>
+        <ToastRoot />
+      </>
     );
-  };
-
-  return (
-    <>
-      <Button onClick={notify}>Add toast</Button>
-      <ToastRoot />
-    </>
-  );
+  },
+
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
 };
 
-export const RTL = ({ message }) => {
-  const toast = () => createToast(message, { icon: <Notification /> });
+export const Playground: Story = {
+  render: ({ message, ...args }) => {
+    const toast = () => createToast(message, { icon: <Notification /> });
 
-  return (
-    <RenderInRtl>
+    return (
       <>
         <Button onClick={toast}>Add toast</Button>
-        <ToastRoot />
+        <ToastRoot {...args} />
       </>
-    </RenderInRtl>
-  );
+    );
+  },
+
+  args: {
+    message: "Thank you for feedback",
+    id: "ID",
+    topOffset: 8,
+    leftOffset: 8,
+    rightOffset: 8,
+    bottomOffset: 8,
+    gutter: 8,
+    dismissTimeout: 5000,
+    placement: PLACEMENTS.TOP_CENTER,
+  },
+
+  argTypes: {
+    placement: {
+      options: Object.values(PLACEMENTS),
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
-RTL.args = {
-  message:
-    "When the Tooth fairy comes to your house she takes your tooth and gives you money. When Chuck Norris comes to your house he breaks your tooth and takes your money.",
+export const RTL: Story = {
+  render: ({ message }) => {
+    const toast = () => createToast(message, { icon: <Notification /> });
+
+    return (
+      <RenderInRtl>
+        <>
+          <Button onClick={toast}>Add toast</Button>
+          <ToastRoot />
+        </>
+      </RenderInRtl>
+    );
+  },
+
+  parameters: {
+    controls: {
+      exclude: [
+        "topOffset",
+        "leftOffset",
+        "rightOffset",
+        "bottomOffset",
+        "gutter",
+        "dismissTimeout",
+        "placement",
+      ],
+    },
+  },
+
+  args: {
+    message:
+      "When the Tooth fairy comes to your house she takes your tooth and gives you money. When Chuck Norris comes to your house he breaks your tooth and takes your money.",
+  },
 };