From 949a04fe4c2238b34126108ad5d30f1d158fe72e Mon Sep 17 00:00:00 2001
From: Dominika Hustinova <domi.hustinova@gmail.com>
Date: Mon, 9 Sep 2024 09:52:59 +0200
Subject: [PATCH] chore(Skeleton): migrate stories from CSF2 to CSF3

---
 .../src/Skeleton/Skeleton.stories.tsx         | 177 ++++++++----------
 1 file changed, 79 insertions(+), 98 deletions(-)

diff --git a/packages/orbit-components/src/Skeleton/Skeleton.stories.tsx b/packages/orbit-components/src/Skeleton/Skeleton.stories.tsx
index 9b8e642692..7aaba1353f 100644
--- a/packages/orbit-components/src/Skeleton/Skeleton.stories.tsx
+++ b/packages/orbit-components/src/Skeleton/Skeleton.stories.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import defaultTheme from "../defaultTheme";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
@@ -6,10 +7,6 @@ import { SPACINGS_AFTER } from "../common/consts";
 
 import Skeleton from ".";
 
-export default {
-  title: "Skeleton",
-};
-
 enum PRESETS {
   List = "List",
   Image = "Image",
@@ -18,100 +15,86 @@ enum PRESETS {
   Text = "Text",
 }
 
-export const Default = () => {
-  return <Skeleton height="150px" width="500px" />;
+const meta: Meta<typeof Skeleton> = {
+  title: "Skeleton",
+  component: Skeleton,
 };
 
-Default.story = {
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  render: () => <Skeleton height="150px" width="500px" />,
+
   parameters: {
     info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      disable: true,
+    },
   },
 };
 
-export const Playground = ({
-  animate,
-  height,
-  maxHeight,
-  rowBorderRadius,
-  rowHeight,
-  rowOffset,
-  rows,
-  spaceAfter,
-  viewBox,
-  width,
-  title,
-  color,
-}) => {
-  return (
-    <Skeleton
-      animate={animate}
-      color={color}
-      height={height}
-      maxHeight={maxHeight}
-      title={title}
-      rowBorderRadius={rowBorderRadius}
-      rowHeight={rowHeight}
-      rowOffset={rowOffset}
-      rows={rows}
-      spaceAfter={spaceAfter}
-      viewBox={viewBox}
-      width={width}
-    />
-  );
-};
-
-Playground.story = {
+export const Playground: Story = {
   parameters: {
     info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
   },
-};
 
-Playground.args = {
-  animate: true,
-  height: "",
-  maxHeight: "",
-  rowBorderRadius: 3,
-  rowHeight: 21,
-  rowOffset: 30,
-  rows: 10,
-  spaceAfter: SPACINGS_AFTER.NONE,
-  viewBox: "",
-  width: "",
-  title: "Loading",
-  color: "",
-};
+  args: {
+    animate: true,
+    rowBorderRadius: 3,
+    rowHeight: 21,
+    rowOffset: 30,
+    rows: 10,
+    title: "Loading",
+    viewBox: "",
+    width: "",
+    height: "",
+    maxHeight: "",
+    color: "",
+    spaceAfter: SPACINGS_AFTER.NONE,
+  },
 
-Playground.argTypes = {
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
+  argTypes: {
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: {
+        type: "select",
+      },
     },
-  },
-  color: {
-    options: Object.keys(defaultTheme.orbit).filter(t => t.startsWith("palette")),
-    control: {
-      type: "select",
+    color: {
+      options: Object.keys(defaultTheme.orbit).filter(t => t.startsWith("palette")),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const RTL = () => (
-  <RenderInRtl>
-    <Skeleton height="100px" width="500px" viewBox="0 0 500 100">
-      <rect x="48" y="8" rx="3" ry="3" width="88" height="6" />
-      <rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
-      <rect x="0" y="56" rx="3" ry="3" width="410" height="6" />
-      <rect x="0" y="72" rx="3" ry="3" width="380" height="6" />
-      <rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
-      <circle cx="20" cy="20" r="20" />
-    </Skeleton>
-  </RenderInRtl>
-);
+export const RTL: Story = {
+  render: () => (
+    <RenderInRtl>
+      <Skeleton height="100px" width="500px" viewBox="0 0 500 100">
+        <rect x="48" y="8" rx="3" ry="3" width="88" height="6" />
+        <rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
+        <rect x="0" y="56" rx="3" ry="3" width="410" height="6" />
+        <rect x="0" y="72" rx="3" ry="3" width="380" height="6" />
+        <rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
+        <circle cx="20" cy="20" r="20" />
+      </Skeleton>
+    </RenderInRtl>
+  ),
 
-export const Custom = ({ height, viewBox, width }) => {
-  return (
-    <Skeleton height={height} width={width} viewBox={viewBox}>
+  parameters: {
+    info: "This is a preview of this component in RTL setup.",
+    controls: {
+      disable: true,
+    },
+  },
+};
+
+export const Custom: Story = {
+  render: args => (
+    <Skeleton {...args}>
       <rect x="48" y="8" rx="3" ry="3" width="88" height="6" />
       <rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
       <rect x="0" y="56" rx="3" ry="3" width="410" height="6" />
@@ -119,28 +102,26 @@ export const Custom = ({ height, viewBox, width }) => {
       <rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
       <circle cx="20" cy="20" r="20" />
     </Skeleton>
-  );
-};
-
-Custom.args = {
-  height: "100px",
-  viewBox: "0 0 500 100",
-  width: "500px",
-};
+  ),
 
-export const Presets = ({ presets }) => {
-  return <Skeleton preset={presets} />;
+  args: {
+    height: "100px",
+    viewBox: "0 0 500 100",
+    width: "500px",
+  },
 };
 
-Presets.args = {
-  preset: PRESETS.List,
-};
+export const Presets: Story = {
+  args: {
+    preset: PRESETS.List,
+  },
 
-Presets.argTypes = {
-  preset: {
-    options: PRESETS,
-    control: {
-      type: "select",
+  argTypes: {
+    preset: {
+      options: Object.values(PRESETS),
+      control: {
+        type: "select",
+      },
     },
   },
 };