Sarka/storybook migration b5

packages/orbit-components/src/OrbitProvider/OrbitProvider.stories.tsx

@@ -1,50 +1,68 @@
 import * as React from "react";
 import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import Button from "../Button";
 import getTokens from "../getTokens";
 
 import OrbitProvider from ".";
 
-export function OwnTheme({ orbitTheme, customTheme }) {
-  return (
-    <OrbitProvider
-      theme={{ orbit: { ...getTokens(orbitTheme), ...customTheme } }}
-      useId={React.useId}
-    >
-      <Button onClick={action("onClick")}>Hello World!</Button>
-    </OrbitProvider>
-  );
+interface OrbitThemeCustomProps {
+  orbitTheme: {
+    palette: {
+      [key: string]: {
+        [colorName: string]: string;
+      };
+    };
+  };
+  customTheme: {
+    [key: string]: string;
+  };
 }
 
-OwnTheme.story = {
-  name: "Own theme",
+type OrbitProviderPropsAndCustomArgs = React.ComponentProps<typeof OrbitProvider> &
+  OrbitThemeCustomProps;
+
+const meta: Meta<OrbitProviderPropsAndCustomArgs> = {
+  title: "OrbitProvider",
+  component: OrbitProvider,
 
   parameters: {
-    info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
+    info: "Example how OrbitProvider component can be used. Visit Orbit.Kiwi for more detailed guidelines.",
   },
-};
 
-OwnTheme.args = {
-  orbitTheme: {
-    palette: {
-      product: {
-        light: "#ff9999",
-        lightHover: "#ff7f7f",
-        lightActive: "#ff6666",
-        normal: "#ff0000",
-        normalHover: "#e50000",
-        normalActive: "#cc0000",
-        dark: "#990000",
-        darkHover: "#720000",
-        darkActive: "#630000",
-        darker: "#530000",
+  args: {
+    orbitTheme: {
+      palette: {
+        product: {
+          light: "#ff9999",
+          lightHover: "#ff7f7f",
+          lightActive: "#ff6666",
+          normal: "#ff0000",
+          normalHover: "#e50000",
+          normalActive: "#cc0000",
+          dark: "#990000",
+          darkHover: "#720000",
+          darkActive: "#630000",
+          darker: "#530000",
+        },
       },
     },
+    customTheme: { black: "#000" },
   },
-  customTheme: { black: "#000" },
 };
 
-export default {
-  title: "OrbitProvider",
+type Story = StoryObj<OrbitProviderPropsAndCustomArgs>;
+
+export default meta;
+
+export const Default: Story = {
+  render: ({ orbitTheme, customTheme }) => (
+    <OrbitProvider
+      theme={{ orbit: { ...getTokens(orbitTheme), ...customTheme } }}
+      useId={React.useId}
+    >
+      <Button onClick={action("onClick")}>Hello World!</Button>
+    </OrbitProvider>
+  ),
 };

packages/orbit-components/src/Pagination/Pagination.stories.tsx

@@ -1,215 +1,94 @@
 import * as React from "react";
 import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 import { SIZES } from "./consts";
 
 import Pagination from ".";
 
-export default {
+const meta: Meta<typeof Pagination> = {
   title: "Pagination",
-};
+  component: Pagination,
 
-export const Default = ({ selectedPage, pageCount, labelPrev, labelNext, labelProgress }) => {
-  return (
-    <Pagination
-      labelPrev={labelPrev}
-      labelNext={labelNext}
-      labelProgress={`${selectedPage} ${labelProgress} ${pageCount}`}
-      pageCount={pageCount}
-      onPageChange={action("onPageChange")}
-    />
-  );
-};
+  args: {
+    pageCount: 6,
+    labelPrev: "prev",
+    labelNext: "next",
+    onPageChange: action("onPageChange"),
+  },
 
-Default.args = {
-  selectedPage: 1,
-  pageCount: 6,
-  labelPrev: "prev",
-  labelNext: "next",
-  labelProgress: "of",
+  parameters: {
+    info: "Pagination component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onPageChange"],
+    },
+  },
 };
 
-export const WithALotOfPages = ({
-  selectedPage,
-  pageCount,
-  labelPrev,
-  labelNext,
-  labelProgress,
-}) => {
-  return (
-    <Pagination
-      labelPrev={labelPrev}
-      labelNext={labelNext}
-      labelProgress={`${selectedPage} ${labelProgress} ${pageCount}`}
-      pageCount={pageCount}
-      selectedPage={selectedPage}
-      onPageChange={action("onPageChange")}
-    />
-  );
-};
+type Story = StoryObj<typeof Pagination>;
 
-WithALotOfPages.story = {
-  name: "With a lot of pages",
-};
+export default meta;
 
-WithALotOfPages.args = {
-  selectedPage: 44,
-  pageCount: 100,
-  labelPrev: "prev",
-  labelNext: "next",
-  labelProgress: "of",
-};
-
-export const SmallSize = ({
-  selectedPage,
-  size,
-  pageCount,
-  labelPrev,
-  labelNext,
-  labelProgress,
-}) => {
-  return (
+export const Default: Story = {
+  render: ({ pageCount, ...args }) => (
     <Pagination
-      labelPrev={labelPrev}
-      labelNext={labelNext}
-      labelProgress={`${selectedPage} ${labelProgress} ${pageCount}`}
+      {...args}
+      labelProgress={<span>{`Numbers of pages: ${pageCount}`}</span>}
       pageCount={pageCount}
-      size={size}
-      onPageChange={action("onPageChange")}
     />
-  );
-};
-
-SmallSize.story = {
-  name: "Small size",
-};
+  ),
 
-SmallSize.args = {
-  selectedPage: 1,
-  size: SIZES.SMALL,
-  pageCount: 100,
-  labelPrev: "prev",
-  labelNext: "next",
-  labelProgress: "of",
-};
-
-SmallSize.argTypes = {
-  size: {
-    options: Object.values(SIZES),
-    control: {
-      type: "select",
+  parameters: {
+    controls: {
+      exclude: ["onPageChange", "selectedPage", "hideLabels", "size"],
     },
   },
 };
 
-export const Playground = ({
-  dataTest,
-  pageCount,
-  selectedPage,
-  hideLabels,
-  size,
-  labelPrev,
-  labelNext,
-  labelProgress,
-}) => {
-  return (
+export const Playground: Story = {
+  render: ({ selectedPage, pageCount, ...args }) => (
     <Pagination
-      labelPrev={labelPrev}
-      labelNext={labelNext}
-      labelProgress={`${selectedPage} ${labelProgress} ${pageCount}`}
-      dataTest={dataTest}
+      {...args}
+      labelProgress={<span>{`${selectedPage} of ${pageCount}`}</span>}
       pageCount={pageCount}
       selectedPage={selectedPage}
-      onPageChange={action("onPageChange")}
-      hideLabels={hideLabels}
-      size={size}
     />
-  );
-};
+  ),
 
-Playground.args = {
-  dataTest: "test",
-  pageCount: 6,
-  selectedPage: 2,
-  hideLabels: false,
-  size: SIZES.NORMAL,
-  labelPrev: "prev",
-  labelNext: "next",
-  labelProgress: "of",
-};
+  args: {
+    selectedPage: 1,
+    pageCount: 99,
+    size: SIZES.NORMAL,
+    hideLabels: false,
+  },
 
-Playground.argTypes = {
-  size: {
-    options: Object.values(SIZES),
-    control: {
-      type: "select",
+  argTypes: {
+    size: {
+      options: Object.values(SIZES),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const Rtl = ({ pageCount, selectedPage, hideLabels, size, labelProgress }) => {
-  return (
+export const Rtl: Story = {
+  render: args => (
     <RenderInRtl>
-      <Pagination
-        labelPrev="Prev"
-        labelNext="Next"
-        labelProgress={labelProgress}
-        pageCount={pageCount}
-        selectedPage={selectedPage}
-        onPageChange={action("onPageChange")}
-        hideLabels={hideLabels}
-        size={size}
-      />
+      <Pagination {...args} />
     </RenderInRtl>
-  );
-};
+  ),
 
-Rtl.story = {
-  name: "RTL",
   parameters: {
-    info: (
-      <div dir="ltr">
-        <p className="mb-400">
-          Note that when you use bidirectional text (including both RTL and LTR words) for{" "}
-          <code>labelProgress</code> prop, it may not render properly due to how in-browser unicode
-          bidirectional algorithm works.
-        </p>
-        <p className="mb-400">
-          If that’s the case, you should wrap every given word properly to ensure correct rendering.
-          Eg.{" "}
-          <code>
-            &lt;span dir=&quot;rtl&quot;&gt;שלום &lt;span
-            dir=&quot;ltr&quot;&gt;world!&lt;/span&gt;&lt;/span&gt;
-          </code>
-        </p>
-        <p>
-          <a
-            href="https://www.w3.org/International/articles/inline-bidi-markup/"
-            target="_blank"
-            rel="noreferrer"
-          >
-            More info
-          </a>
-        </p>
-      </div>
-    ),
+    info: "This is a preview of this component in RTL setup.",
   },
-};
 
-Rtl.args = {
-  pageCount: 6,
-  selectedPage: 2,
-  hideLabels: false,
-  size: SIZES.NORMAL,
-  labelProgress: "2 מתוך 6",
-};
+  args: {
+    ...Playground.args,
+  },
 
-Rtl.argTypes = {
-  size: {
-    options: Object.values(SIZES),
-    control: {
-      type: "select",
-    },
+  argTypes: {
+    ...Playground.argTypes,
   },
 };