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 Pencil from "$icon/pencil";
4 import Sun from "$icon/sun";
5 import Textarea from "./Textarea.svelte";
6
7 const { Story } = defineMeta({
8 title: "UI/Textarea",
9 component: Textarea,
10 tags: ["autodocs"],
11 argTypes: {
12 error: { control: "boolean" },
13 disabled: { control: "boolean" },
14 loading: { control: "boolean" },
15 readonly: { control: "boolean" },
16 resizeable: { control: "boolean" },
17 placeholder: { control: "text" },
18 rows: { control: "number" }
19 },
20 args: {
21 error: false,
22 disabled: false,
23 loading: false,
24 readonly: false,
25 resizeable: false,
26 placeholder: "Placeholder"
27 }
28 });
29</script>
30
31<Story name="Default" />
32<Story name="Focus" args={{ autofocus: true, resizeable: false }} />
33<Story name="Filled" args={{ value: "Some notes go here" }} />
34<Story name="Error" args={{ error: true, value: "Invalid value" }} />
35<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
36<Story name="Read-only" args={{ readonly: true, value: "Read-only content" }} />
37<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
38<Story name="With left icon" args={{ iconLeft: Pencil, placeholder: "Write something" }} />
39<Story name="With right icon" args={{ iconRight: Sun, placeholder: "Write something" }} />
40
41<Story name="States">
42 <div class="flex w-64 flex-col gap-3">
43 <Textarea placeholder="Default" />
44 <Textarea placeholder="Filled" value="Some notes go here" />
45 <Textarea placeholder="Error" error value="Invalid value" />
46 <Textarea placeholder="Disabled" disabled value="Can't edit this" />
47 <Textarea placeholder="Read-only" readonly value="Read-only content" />
48 <Textarea placeholder="Loading" loading value="Checking..." />
49 </div>
50</Story>