alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Textarea from "./Textarea.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Textarea",
7 component: Textarea,
8 tags: ["autodocs"],
9 argTypes: {
10 error: { control: "boolean" },
11 disabled: { control: "boolean" },
12 loading: { control: "boolean" },
13 readonly: { control: "boolean" },
14 placeholder: { control: "text" },
15 rows: { control: "number" }
16 },
17 args: {
18 error: false,
19 disabled: false,
20 loading: false,
21 readonly: false,
22 placeholder: "Placeholder"
23 }
24 });
25</script>
26
27<Story name="Default" />
28<Story name="Focus" args={{ autofocus: true }} />
29<Story name="Filled" args={{ value: "Some notes go here" }} />
30<Story name="Error" args={{ error: true, value: "Invalid value" }} />
31<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
32<Story name="Read-only" args={{ readonly: true, value: "Read-only content" }} />
33<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
34
35<Story name="States">
36 <div class="flex w-64 flex-col gap-3">
37 <Textarea placeholder="Default" />
38 <Textarea placeholder="Filled" value="Some notes go here" />
39 <Textarea placeholder="Error" error value="Invalid value" />
40 <Textarea placeholder="Disabled" disabled value="Can't edit this" />
41 <Textarea placeholder="Read-only" readonly value="Read-only content" />
42 <Textarea placeholder="Loading" loading value="Checking..." />
43 </div>
44</Story>