Textarea

1import type { Meta, StoryObj } from "@storybook/web-components-vite";
2import { html } from "lit";
3 
4type TextareaArgs = HTMLTextAreaElement & { children?: string };
5 
6const meta: Meta<TextareaArgs> = {
7  title: "ui/Textarea",
8  component: "textarea",
9  tags: ["autodocs"],
10  argTypes: {
11    placeholder: {
12      control: "text",
13      description: "Placeholder text shown when empty",
14    },
15    disabled: {
16      control: "boolean",
17      description: "Whether textarea is disabled",
18    },
19    required: {
20      control: "boolean",
21      description: "Whether textarea is required",
22    },
23    rows: {
24      control: "number",
25      description: "Number of visible text rows",
26    },
27    maxLength: {
28      control: "number",
29      description: "Maximum character length",
30    },
31  },
32  args: {
33    placeholder: "Type your message here.",
34    disabled: false,
35    required: false,
36    rows: 3,
37  },
38  parameters: {
39    layout: "centered",
40  },
41  render: (args) => html`
42    <textarea
43      placeholder=${args.placeholder}
44      ?disabled=${args.disabled}
45      ?required=${args.required}
46      rows=${args.rows || 3}
47      maxlength=${args.maxLength}
48      class="ui-textarea w-96"
49    ></textarea>
50  `,
51};
52 
53export default meta;
54type Story = StoryObj<TextareaArgs>;
55 
56export const Default: Story = {};
57 
58export const Disabled: Story = {
59  args: { disabled: true },
60};
61 
62export const WithLabel: Story = {
63  render: (args) => html`
64    <div class="grid w-full gap-3">
65      <label class="ui-label" for="message">Your message</label>
66      <textarea
67        id="message"
68        placeholder=${args.placeholder}
69        ?disabled=${args.disabled}
70        class="ui-textarea w-96"
71      ></textarea>
72    </div>
73  `,
74};
75 
76export const WithHelperText: Story = {
77  render: (args) => html`
78    <div class="grid w-full gap-3">
79      <label class="ui-label" for="message-2">Your Message</label>
80      <textarea
81        id="message-2"
82        placeholder=${args.placeholder || ""}
83        ?disabled=${args.disabled}
84        class="ui-textarea w-96"
85      ></textarea>
86      <p class="text-sm text-muted-foreground">
87        Your message will be copied to the support team.
88      </p>
89    </div>
90  `,
91};
92 
93export const WithCustomRows: Story = {
94  args: {
95    rows: 10,
96  },
97};
98 
99export const WithMaxLength: Story = {
100  args: {
101    maxLength: 500,
102    placeholder: "Max 500 characters...",
103  },
104};
105 
106export const NoResize: Story = {
107  render: () => html`
108    <textarea
109      placeholder="Type your message here."
110// … truncated