docs: autogenerate API docs for Input

Author: ariser

src/components/Input/PasswordField.stories.tsx

@@ -1,46 +1,33 @@
 import { useEffect, useState } from "react";
-import { PasswordField as PasswordFieldInput, PasswordFieldProps } from "./PasswordField";
-import { Container } from "../Container/Container";
 
-const PasswordField = ({
-  value: valueProp,
-  ...props
-}: Omit<PasswordFieldProps, "onChange">) => {
-  const [value, setValue] = useState(valueProp);
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
+import { Meta, StoryObj } from "@storybook/react";
 
-  return (
-    <Container maxWidth="75%">
-      <PasswordFieldInput
-        value={value}
-        onChange={(inputValue: string) => {
-          setValue(inputValue);
-        }}
-        {...props}
-      />
-    </Container>
-  );
-};
+import { PasswordField } from "./PasswordField";
 
-export default {
+const meta: Meta<typeof PasswordField> = {
   component: PasswordField,
   title: "Forms/Input/PasswordField",
   tags: ["form-field", "input", "autodocs"],
-  argTypes: {
-    value: { control: "text" },
-    label: { control: "text" },
-    error: { control: "text" },
-    disabled: { control: "boolean" },
-    placeholder: { control: "text" },
-    readOnly: { control: "boolean" },
-    orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
-    dir: { control: "inline-radio", options: ["start", "end"] },
+  render: ({ value: valueProp, ...props }) => {
+    const [value, setValue] = useState(valueProp);
+
+    useEffect(() => {
+      setValue(valueProp);
+    }, [valueProp]);
+
+    return (
+      <PasswordField
+        {...props}
+        value={value}
+        onChange={setValue}
+      />
+    );
   },
 };
 
-export const Playground = {
+export default meta;
+
+export const Playground: StoryObj<typeof PasswordField> = {
   args: {
     label: "Label",
     disabled: false,

src/components/Input/SearchField.stories.tsx

@@ -1,56 +1,39 @@
 import { useEffect, useState } from "react";
-import { SearchField as SearchFieldInput, SearchFieldProps } from "./SearchField";
+
+import { Meta, StoryObj } from "@storybook/react";
+
 import { Container } from "../Container/Container";
 
-const SearchField = ({
-  value: valueProp,
-  ...props
-}: Omit<SearchFieldProps, "onChange">) => {
-  const [value, setValue] = useState(valueProp);
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
-
-  return (
-    <Container maxWidth="350px">
-      <SearchFieldInput
-        value={value}
-        onChange={(inputValue: string) => {
-          setValue(inputValue);
-        }}
-        {...props}
-      />
-    </Container>
-  );
-};
+import { SearchField } from "./SearchField";
 
-export default {
+const meta: Meta<typeof SearchField> = {
   component: SearchField,
   title: "Forms/Input/SearchField",
   tags: ["form-field", "input", "autodocs"],
-  argTypes: {
-    value: { control: "text" },
-    clear: { control: "boolean" },
-    label: { control: "text" },
-    error: { control: "text" },
-    disabled: { control: "boolean" },
-    placeholder: { control: "text" },
-    readOnly: { control: "boolean" },
-    orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
-    dir: { control: "inline-radio", options: ["start", "end"] },
-    isFilter: { control: "boolean" },
+  render: ({ value: valueProp, ...props }) => {
+    const [value, setValue] = useState(valueProp);
+
+    useEffect(() => {
+      setValue(valueProp);
+    }, [valueProp]);
+
+    return (
+      <Container maxWidth="350px">
+        <SearchField
+          {...props}
+          value={value}
+          onChange={setValue}
+        />
+      </Container>
+    );
   },
 };
 
-export const Playground = {
+export default meta;
+
+export const Playground: StoryObj<typeof SearchField> = {
   args: {
     label: "Label",
-    disabled: false,
     placeholder: "Placeholder",
-    clear: false,
-    readOnly: false,
-    isFilter: false,
-    value: "",
-    error: "",
   },
 };

src/components/Input/TextField.stories.tsx

@@ -1,67 +1,45 @@
-import { ChangeEvent, useEffect, useState } from "react";
-import { TextField as TextFieldInput, TextFieldProps } from "./TextField";
-import { Container } from "../Container/Container";
+import { useEffect, useState } from "react";
 
-const TextField = ({ value: valueProp, ...props }: Omit<TextFieldProps, "onChange">) => {
-  const [value, setValue] = useState(valueProp);
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
+import { Meta, StoryObj } from "@storybook/react";
 
-  return (
-    <Container maxWidth="75%">
-      <TextFieldInput
-        value={value}
-        onChange={(inputValue: string, e?: ChangeEvent<HTMLInputElement>) => {
-          if (e) {
-            e.preventDefault();
-          }
-          setValue(inputValue);
-        }}
-        {...props}
-      />
-    </Container>
-  );
-};
+import { TextField } from "./TextField";
 
-export default {
+const meta: Meta<typeof TextField> = {
   component: TextField,
   title: "Forms/Input/TextField",
   tags: ["form-field", "input", "autodocs"],
-  argTypes: {
-    type: {
-      control: "inline-radio",
-      options: ["text", "email", "tel", "url"],
-    },
-    value: { control: "text" },
-    clear: { control: "boolean" },
-    label: { control: "text" },
-    error: { control: "text" },
-    disabled: { control: "boolean" },
-    placeholder: { control: "text" },
-    readOnly: { control: "boolean" },
-    orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
-    dir: { control: "inline-radio", options: ["start", "end"] },
+  render: ({ value: valueProp, ...props }) => {
+    const [value, setValue] = useState(valueProp);
+
+    useEffect(() => {
+      setValue(valueProp);
+    }, [valueProp]);
+
+    return (
+      <TextField
+        {...props}
+        value={value}
+        onChange={setValue}
+      />
+    );
   },
 };
 
-export const Playground = {
+export default meta;
+
+export const Playground: StoryObj<typeof TextField> = {
   args: {
     label: "Label",
-    clear: false,
     type: "text",
-    disabled: false,
     placeholder: "Placeholder",
   },
 };
 
-export const LabelColor = {
+export const LabelColor: StoryObj<typeof TextField> = {
   args: {
     label: "Label",
     labelColor: "rgb(193, 0, 0)",
-    clear: false,
     type: "text",
-    disabled: false,
     placeholder: "Placeholder",
   },
 };