chore(Textarea): migrate from CSF2 to CSF3

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import { RESIZE_OPTIONS } from "./consts";
@@ -7,185 +8,114 @@ import { SPACINGS_AFTER } from "../common/consts";
 
 import Textarea from ".";
 
-export default {
+const meta: Meta<typeof Textarea> = {
   title: "Textarea",
-};
-
-export const Default = ({ label, value, placeholder }) => {
-  return (
-    <Textarea label={label} placeholder={placeholder} onChange={action("change")} value={value} />
-  );
-};
+  component: Textarea,
 
-Default.story = {
   parameters: {
-    info: "Some description about this type of textarea in general.",
+    info: "Textarea component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onChange"],
+    },
   },
-};
-
-Default.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-};
-
-export const WithLabel = ({ label, value, placeholder }) => {
-  return (
-    <Textarea label={label} placeholder={placeholder} onChange={action("change")} value={value} />
-  );
-};
-
-WithLabel.story = {
-  name: "With label",
 
-  parameters: {
-    info: "Some description about this type of textarea in general.",
+  args: {
+    name: "Textarea",
+    value: "Textarea",
+    onChange: action("onChange"),
   },
 };
 
-WithLabel.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-};
+type Story = StoryObj<typeof Textarea>;
 
-export const WithHelp = ({ value, placeholder, help }) => {
-  return (
-    <Textarea placeholder={placeholder} help={help} onChange={action("change")} value={value} />
-  );
-};
+export default meta;
 
-WithHelp.story = {
-  name: "With help",
+export const Default: Story = {};
 
-  parameters: {
-    info: "Some description about this type of textarea in general.",
+export const WithLabel: Story = {
+  args: {
+    label: "Label",
   },
 };
 
-WithHelp.args = {
-  value: "Something",
-  placeholder: "Placeholder",
-  help: "Everything is fine.",
+export const WithHelp: Story = {
+  args: {
+    help: "Everything is fine.",
+    helpClosable: false,
+  },
 };
 
-export const WithError = ({ value, placeholder, error }) => {
-  return (
-    <Textarea placeholder={placeholder} error={error} onChange={action("change")} value={value} />
-  );
+export const WithError: Story = {
+  args: {
+    error: "Something went wrong.",
+  },
 };
 
-WithError.story = {
-  name: "With error",
+export const Controlled: Story = {
+  args: {
+    defaultValue: "defaultValue",
+    value: undefined,
+  },
 
   parameters: {
-    info: "Some description about this type of textarea in general.",
+    info: "Controlled version of Textarea component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onChange", "value"],
+    },
   },
 };
 
-WithError.args = {
-  value: "Something",
-  placeholder: "Placeholder",
-  error: "Something went wrong.",
-};
-
-export const Playground = ({
-  label,
-  value,
-  fullHeight,
-  placeholder,
-  help,
-  error,
-  rows,
-  required,
-  disabled,
-  readOnly,
-  maxLength,
-  resize,
-  dataTest,
-  spaceAfter,
-}) => {
-  return (
-    <Textarea
-      label={label}
-      value={value}
-      fullHeight={fullHeight}
-      placeholder={placeholder}
-      help={help}
-      error={error}
-      rows={rows}
-      required={required}
-      disabled={disabled}
-      readOnly={readOnly}
-      maxLength={maxLength}
-      resize={resize}
-      onChange={action("change")}
-      onFocus={action("focus")}
-      onBlur={action("blur")}
-      dataTest={dataTest}
-      spaceAfter={spaceAfter}
-    />
-  );
-};
-
-Playground.story = {
+export const Playground: Story = {
   parameters: {
-    info: "Some description about this type of textarea in general.",
+    info: "Playground of Textarea component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onChange", "onFocus", "onBlur"],
+    },
   },
-};
 
-Playground.args = {
-  label: "Label",
-  value: "",
-  fullHeight: true,
-  placeholder: "Placeholder",
-  help: "",
-  error: "Something went wrong.",
-  disabled: false,
-  readOnly: false,
-  resize: RESIZE_OPTIONS.VERTICAL,
-  maxLength: Infinity,
-  dataTest: "test",
-  rows: 3,
-  required: false,
-  spaceAfter: SPACINGS_AFTER.MEDIUM,
-};
-
-Playground.argTypes = {
-  resize: {
-    options: Object.values(RESIZE_OPTIONS),
-    control: { type: "select" },
+  args: {
+    ...WithLabel.args,
+    ...WithHelp.args,
+    ...WithError.args,
+    id: "textarea-id",
+    fullHeight: true,
+    placeholder: "Placeholder",
+    disabled: false,
+    readOnly: false,
+    resize: RESIZE_OPTIONS.VERTICAL,
+    maxLength: Infinity,
+    rows: 3,
+    required: false,
+    spaceAfter: SPACINGS_AFTER.MEDIUM,
+    tabIndex: 0,
+    dataAttrs: {
+      "data-story-example": "Storybook-playground",
+    },
+    onChange: action("onChange"),
+    onFocus: action("onFocus"),
+    onBlur: action("onBlur"),
   },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: { type: "select" },
+
+  argTypes: {
+    resize: {
+      options: Object.values(RESIZE_OPTIONS),
+      control: { type: "select" },
+    },
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: { type: "select" },
+    },
   },
 };
 
-export const Rtl = ({ label, help, error }) => {
-  return (
+export const Rtl: Story = {
+  render: args => (
     <RenderInRtl>
-      <Textarea
-        label={label}
-        help={help}
-        error={error}
-        placeholder="My placeholder"
-        value="Content of the Textarea"
-      />
+      <Textarea {...args} />
     </RenderInRtl>
-  );
-};
-
-Rtl.story = {
-  name: "RTL",
+  ),
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
   },
 };
-
-Rtl.args = {
-  label: "Label",
-  help: "",
-  error: "Something went wrong.",
-};