Sarka/storybook migration b7

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

@@ -1,136 +1,98 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
+import RenderInRtl from "../utils/rtl/RenderInRtl";
 import StatelessStepper from "./StepperStateless";
 
 import Stepper from ".";
 
-export default {
+const meta: Meta<typeof Stepper> = {
   title: "Stepper",
+  component: Stepper,
 };
 
-export const Default = ({ titleIncrement, titleDecrement }) => {
-  return (
-    <Stepper
-      titleIncrement={titleIncrement}
-      titleDecrement={titleDecrement}
-      onChange={action("onChange")}
-    />
-  );
-};
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
 
-Default.story = {
+export const Default: Story = {
   parameters: {
-    info: "Some description about this type of Stepper in general.",
+    info: "Default settings of Stepper component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      disable: true,
+    },
   },
 };
 
-Default.args = {
-  titleIncrement: "Add a passenger",
-  titleDecrement: "Remove a passenger",
-};
-
-export const Stateless = ({
-  min,
-  max,
-  value,
-  name,
-  disabled,
-  dataTest,
-  disabledIncrement,
-  disabledDecrement,
-  titleIncrement,
-  titleDecrement,
-  active,
-}) => {
-  return (
-    <StatelessStepper
-      dataTest={dataTest}
-      value={value}
-      active={active}
-      name={name}
-      maxValue={max}
-      minValue={min}
-      disabled={disabled}
-      disabledIncrement={disabledIncrement}
-      disabledDecrement={disabledDecrement}
-      titleIncrement={titleIncrement}
-      titleDecrement={titleDecrement}
-      onFocus={action("onFocus")}
-      onBlur={action("onBlur")}
-      onChange={action("onChange")}
-      onKeyDown={action("onKeyDown")}
-      onIncrement={action("onIncrement")}
-      onDecrement={action("onDecrement")}
-    />
-  );
-};
+export const Playground: Story = {
+  args: {
+    id: "stepper-ID",
+    name: "Passengers number",
+    step: 1,
+    minValue: 0,
+    maxValue: 20,
+    defaultValue: 0,
+    active: false,
+    disabled: false,
+    maxWidth: 120,
+    titleIncrement: "Add a passenger",
+    titleDecrement: "Remove a passenger",
+    onChange: action("onChange"),
+    onFocus: action("onFocus"),
+    onBlur: action("onBlur"),
+  },
 
-Stateless.story = {
   parameters: {
-    info: "Here you can try StatelessStepper component with additional functionality.",
+    info: "Playground of Stepper component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onFocus", "onBlur", "onChange"],
+    },
   },
 };
 
-Stateless.args = {
-  min: 1,
-  max: 10,
-  value: "2 adults",
-  name: "name",
-  disabled: false,
-  dataTest: "test",
-  disabledIncrement: false,
-  disabledDecrement: false,
-  titleIncrement: "Add a passenger",
-  titleDecrement: "Remove a passenger",
-  active: false,
-};
+export const Stateless: Story & StoryObj<typeof StatelessStepper> = {
+  render: args => <StatelessStepper {...args} />,
+
+  args: {
+    ...Playground.args,
+    defaultValue: undefined,
+    onChange: undefined,
+    value: 0,
+    disabledIncrement: false,
+    disabledDecrement: false,
+    onKeyDown: action("onKeyDown"),
+    onIncrement: action("onIncrement"),
+    onDecrement: action("onDecrement"),
+  },
 
-export const Playground = ({
-  min,
-  max,
-  step,
-  defaultValue,
-  name,
-  disabled,
-  dataTest,
-  titleIncrement,
-  titleDecrement,
-  active,
-}) => {
-  return (
-    <Stepper
-      defaultValue={defaultValue}
-      step={step}
-      active={active}
-      name={name}
-      maxValue={max}
-      minValue={min}
-      disabled={disabled}
-      dataTest={dataTest}
-      titleIncrement={titleIncrement}
-      titleDecrement={titleDecrement}
-      onChange={action("onChange")}
-      onFocus={action("onFocus")}
-      onBlur={action("onBlur")}
-    />
-  );
-};
-Playground.story = {
   parameters: {
-    info: "Here you can try Stepper component with additional functionality.",
+    info: "Stepper stateless component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: [
+        "onFocus",
+        "onBlur",
+        "onChange",
+        "onKeyDown",
+        "onIncrement",
+        "onDecrement",
+        "defaultValue",
+      ],
+    },
   },
 };
 
-Playground.args = {
-  min: 1,
-  max: 10,
-  step: 2,
-  defaultValue: 4,
-  name: "name",
-  disabled: false,
-  dataTest: "test",
-  titleIncrement: "Add a passenger",
-  titleDecrement: "Remove a passenger",
-  active: false,
+export const Rtl: Story = {
+  render: () => (
+    <RenderInRtl>
+      <Stepper />
+    </RenderInRtl>
+  ),
+
+  parameters: {
+    info: "This is a preview of Stepper component in RTL setup.",
+    controls: {
+      disable: true,
+    },
+  },
 };

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

@@ -1,65 +1,48 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import STOPS from "./consts";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 import StopoverArrow from ".";
 
-export default {
+const meta: Meta<typeof StopoverArrow> = {
   title: "StopoverArrow",
-};
-
-export const Playground = ({ stops, dataTest, id }) => {
-  return <StopoverArrow stops={stops} dataTest={dataTest} id={id} />;
-};
+  component: StopoverArrow,
 
-Playground.story = {
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  args: {
+    stops: STOPS.ZERO,
+    id: "ID",
   },
-};
-
-Playground.args = {
-  stops: STOPS.ZERO,
-  dataTest: "test",
-  id: "ID",
-};
 
-Playground.argTypes = {
-  stops: {
-    options: Object.values(STOPS),
-    control: {
-      type: "select",
+  argTypes: {
+    stops: {
+      options: Object.values(STOPS),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const InRtl = ({ stops, dataTest }) => {
-  return (
-    <RenderInRtl>
-      <StopoverArrow stops={stops} dataTest={dataTest} />
-    </RenderInRtl>
-  );
-};
+type Story = StoryObj<typeof StopoverArrow>;
 
-InRtl.story = {
-  name: "In RTL",
+export default meta;
 
+export const Playground: Story = {
   parameters: {
     info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
   },
 };
 
-InRtl.args = {
-  stops: STOPS.THREE,
-  dataTest: "test",
-};
+export const Rtl: Story = {
+  render: args => (
+    <RenderInRtl>
+      <StopoverArrow {...args} />
+    </RenderInRtl>
+  ),
 
-InRtl.argTypes = {
-  stops: {
-    options: Object.values(STOPS),
-    control: {
-      type: "select",
-    },
+  parameters: {
+    info: "This is a preview of StopoverArrow component in RTL setup.",
   },
 };