Feat: component textarea

packages/frappe-ui-react/src/components/textarea/tests/textarea.tsx

@@ -1,49 +1,19 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-
 import Textarea from "../textarea";
 
 describe("Textarea", () => {
-  it("renders with label and placeholder", () => {
-    render(
-      <Textarea
-        label="Description"
-        placeholder="Type here..."
-        value=""
-        onChange={() => {}}
-      />
-    );
-    expect(screen.getByText("Description")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("Type here...")).toBeInTheDocument();
-  });
-
-  it("renders with initial value", () => {
-    render(<Textarea value="Initial text" onChange={() => {}} />);
-    expect(screen.getByDisplayValue("Initial text")).toBeInTheDocument();
-  });
-
   it("calls onChange when typing", () => {
     const handleChange = jest.fn();
     render(<Textarea value="" onChange={handleChange} />);
     const textarea = screen.getByRole("textbox");
     fireEvent.change(textarea, { target: { value: "Hello" } });
     expect(handleChange).toHaveBeenCalled();
-    expect(handleChange.mock.calls[0][0].target.value).toBe("Hello");
   });
 
   it("is disabled when disabled prop is true", () => {
     render(<Textarea value="" onChange={() => {}} disabled />);
     expect(screen.getByRole("textbox")).toBeDisabled();
   });
-
-  it("renders with custom rows", () => {
-    render(<Textarea value="" onChange={() => {}} rows={5} />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("rows", "5");
-  });
-
-  it("renders with custom id", () => {
-    render(<Textarea value="" onChange={() => {}} htmlId="custom-id" />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("id", "custom-id");
-  });
 });

packages/frappe-ui-react/src/components/textarea/textarea.stories.tsx

@@ -1,82 +1,132 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { TextareaProps } from "./types";
-import TextArea from "./textarea";
+import Textarea from "./textarea";
 
-export default {
-  title: "Components/TextArea",
-  component: TextArea,
-  parameters: { docs: { source: { type: "dynamic" } }, layout: "centered" },
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Textarea",
+  component: Textarea,
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+    layout: "centered",
+  },
   tags: ["autodocs"],
   argTypes: {
-    label: { control: "text", description: "Label for the textarea" },
+    size: {
+      options: ["sm", "md", "lg"],
+      control: { type: "select" },
+      description: "Size of the textarea",
+      table: { defaultValue: { summary: "md" } },
+    },
+    variant: {
+      options: ["subtle", "outline", "ghost", "underline"],
+      control: { type: "select" },
+      description: "Visual variant of the textarea",
+      table: { defaultValue: { summary: "subtle" } },
+    },
+    state: {
+      options: [undefined, "success", "warning", "error"],
+      control: { type: "select" },
+      description: "Visual state (colors)",
+    },
     placeholder: {
       control: "text",
-      description: "Placeholder text for the textarea",
+      description: "Placeholder text",
     },
     disabled: {
       control: "boolean",
-      description: "If true, disables the textarea",
+      description: "Disables the textarea",
     },
-    variant: {
-      control: { type: "select", options: ["outline", "subtle"] },
-      description: "Visual variant of the textarea",
-    },
-    size: {
-      control: { type: "select", options: ["sm", "md", "lg"] },
-      description: "Size of the textarea",
+    loading: {
+      control: "boolean",
+      description: "Shows loading state (disabled)",
     },
-    id: { control: "text", description: "HTML id attribute for the textarea" },
-    value: { control: "text", description: "Current value of the textarea" },
     rows: {
       control: "number",
-      description: "Number of visible text lines for the textarea",
+      description: "Number of visible lines",
+    },
+    value: {
+      control: "text",
+      description: "Current value",
     },
     onChange: {
       action: "changed",
-      description: "Callback function when the textarea value changes",
+      description: "Callback function",
+    },
+    htmlId: {
+      control: "text",
+      description: "HTML id attribute",
     },
     debounce: {
       control: "number",
-      description: "Debounce time in milliseconds for the onChange event",
+      description: "Debounce delay in milliseconds",
     },
-    htmlId: {
-      control: "text",
-      description: "HTML id attribute for the text input",
+    required: {
+      control: "boolean",
+      description: "Marks the textarea as required",
     },
   },
-} as Meta<typeof TextArea>;
+};
 
-const Template: StoryObj<TextareaProps> = {
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+const Template: Story = {
   render: (args) => {
     const [value, setValue] = useState(args.value || "");
-
     return (
-      <div className="p-4 w-[300px]">
-        <TextArea
+      <div className="w-72">
+        <Textarea
           {...args}
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(e) => {
+            setValue(e.target.value);
+            args.onChange?.(e);
+          }}
         />
       </div>
     );
   },
 };
 
-export const SubtleVariant = {
+export const Subtle: Story = {
   ...Template,
   args: {
-    placeholder: "Placeholder",
+    placeholder: "Tell us about yourself...",
+    rows: 4,
     variant: "subtle",
-    value: "",
+    size: "md",
   },
 };
 
-export const OutlineVariant = {
+export const Outline: Story = {
   ...Template,
   args: {
-    placeholder: "Placeholder",
+    placeholder: "Tell us about yourself...",
+    rows: 4,
     variant: "outline",
-    value: "",
+    size: "md",
+  },
+};
+
+export const Ghost: Story = {
+  ...Template,
+  args: {
+    placeholder: "Tell us about yourself...",
+    rows: 4,
+    variant: "ghost",
+    size: "md",
+  },
+};
+
+export const Underline: Story = {
+  ...Template,
+  args: {
+    placeholder: "Tell us about yourself...",
+    rows: 4,
+    variant: "underline",
+    size: "md",
   },
 };