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 Search from "$icon/search";
4 import Mail from "$icon/mail";
5 import Button from "./Button.svelte";
6 import Input from "./Input.svelte";
7
8 const { Story } = defineMeta({
9 title: "UI/Input",
10 component: Input,
11 tags: ["autodocs"],
12 argTypes: {
13 size: {
14 control: { type: "inline-radio" },
15 options: ["sm", "md", "lg"]
16 },
17 error: { control: "boolean" },
18 disabled: { control: "boolean" },
19 loading: { control: "boolean" },
20 placeholder: { control: "text" }
21 },
22 args: {
23 size: "md",
24 error: false,
25 disabled: false,
26 loading: false,
27 placeholder: "Placeholder"
28 }
29 });
30</script>
31
32<Story name="Default" />
33<Story name="Focus" args={{ autofocus: true }} />
34<Story name="Filled" args={{ value: "Filled value" }} />
35<Story name="Error" args={{ error: true, value: "Invalid value" }} />
36<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
37<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
38<Story name="With left icon" args={{ iconLeft: Search, placeholder: "Search" }} />
39<Story name="With right icon" args={{ iconRight: Mail, placeholder: "you@example.com" }} />
40
41<!-- 32/36/40, the same heights Button's sm/md/lg draw, so the two align in a row. -->
42<Story name="Sizes" asChild>
43 <div class="flex items-center gap-3">
44 <Input size="sm" placeholder="Small" />
45 <Input size="md" placeholder="Medium" />
46 <Input size="lg" placeholder="Large" />
47 </div>
48</Story>
49
50<!-- the icon rides the size variant's gap and steps up to size-5 at lg, as in Button. -->
51<Story name="Icon sizes" asChild>
52 <div class="flex items-center gap-3">
53 <Input size="sm" iconLeft={Search} placeholder="Small" />
54 <Input size="md" iconLeft={Search} placeholder="Medium" />
55 <Input size="lg" iconLeft={Search} placeholder="Large" />
56 </div>
57</Story>
58
59<!-- proof of the alignment claim: matched sizes, identical box heights. -->
60<Story name="With Button" asChild>
61 <div class="flex flex-col items-start gap-3">
62 {#each ["sm", "md", "lg"] as const as s (s)}
63 <div class="flex items-center gap-2">
64 <Input size={s} placeholder="Repository name" />
65 <Button size={s}>Create</Button>
66 </div>
67 {/each}
68 </div>
69</Story>