alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { resolve } from "$app/paths";
3 import { defineMeta } from "@storybook/addon-svelte-csf";
4 import Select from "./Select.svelte";
5 import type { SelectOption } from "./selectField";
6
7 const { Story } = defineMeta({
8 title: "UI/Select",
9 component: Select,
10 tags: ["autodocs"],
11 argTypes: {
12 rich: { control: "boolean" },
13 error: { control: "boolean" },
14 disabled: { control: "boolean" }
15 },
16 args: {
17 rich: false,
18 error: false,
19 disabled: false,
20 label: "Pick one",
21 value: "two",
22 options: [
23 { value: "one", label: "One" },
24 { value: "two", label: "Two" },
25 { value: "three", label: "Three" }
26 ] satisfies SelectOption[]
27 }
28 });
29
30 const refs: SelectOption[] = [
31 { value: "main", hint: "default", group: "Branches" },
32 { value: "next", group: "Branches" },
33 { value: "feature/combobox", group: "Branches" },
34 { value: "feature/storybook", group: "Branches" },
35 { value: "v1.0.0", group: "Tags" },
36 { value: "v0.9.0", group: "Tags" }
37 ];
38
39 const many: SelectOption[] = Array.from({ length: 60 }, (_, index) => ({
40 value: index === 0 ? "main" : `renovate/dependency-${index}`,
41 hint: index === 0 ? "default" : undefined,
42 group: "Branches"
43 }));
44</script>
45
46<!-- the same options render either way: `rich` only changes the control drawn around them -->
47<Story name="Native">
48 {#snippet template(args)}
49 <div class="w-64"><Select {...args} /></div>
50 {/snippet}
51</Story>
52
53<Story name="Rich" args={{ rich: true }}>
54 {#snippet template(args)}
55 <div class="w-64"><Select {...args} /></div>
56 {/snippet}
57</Story>
58
59<Story name="Placeholder" args={{ value: "", placeholder: "Choose one" }}>
60 {#snippet template(args)}
61 <div class="w-64"><Select {...args} /></div>
62 {/snippet}
63</Story>
64
65<Story name="Grouped" args={{ options: refs, value: "main" }}>
66 {#snippet template(args)}
67 <div class="w-64"><Select {...args} /></div>
68 {/snippet}
69</Story>
70
71<Story name="Grouped rich" args={{ rich: true, options: refs, value: "main" }}>
72 {#snippet template(args)}
73 <div class="w-64"><Select {...args} /></div>
74 {/snippet}
75</Story>
76
77<Story
78 name="Rich value outside the options"
79 args={{ rich: true, options: refs, value: "0123456789abcdef" }}
80>
81 {#snippet template(args)}
82 <div class="w-64"><Select {...args} /></div>
83 {/snippet}
84</Story>
85
86<Story name="Rich scrolling list with a footer" args={{ rich: true, options: many, value: "main" }}>
87 {#snippet template(args)}
88 <div class="w-64">
89 <Select {...args}>
90 {#snippet footer()}
91 <a href={resolve("/")} class="block p-2">View all branches</a>
92 {/snippet}
93 </Select>
94 </div>
95 {/snippet}
96</Story>
97
98<Story
99 name="Disabled options"
100 args={{
101 rich: true,
102 value: "main",
103 options: [
104 { value: "main", hint: "default", group: "Branches" },
105 { value: "next", group: "Branches" },
106 { value: "No tags found", disabled: true, group: "Tags" }
107 ]
108 }}
109>
110 {#snippet template(args)}
111 <div class="w-64"><Select {...args} /></div>
112 {/snippet}
113</Story>
114
115<Story name="Right aligned" args={{ rich: true, align: "right" }}>
116 {#snippet template(args)}
117 <div class="flex justify-end">
118 <div class="w-64"><Select {...args} /></div>
119 </div>
120 {/snippet}
121</Story>
122
123<Story name="Error" args={{ error: true }}>
124 {#snippet template(args)}
125 <div class="w-64"><Select {...args} /></div>
126 {/snippet}
127</Story>
128
129<Story name="Error rich" args={{ rich: true, error: true }}>
130 {#snippet template(args)}
131 <div class="w-64"><Select {...args} /></div>
132 {/snippet}
133</Story>
134
135<Story name="Disabled" args={{ disabled: true }}>
136 {#snippet template(args)}
137 <div class="w-64"><Select {...args} /></div>
138 {/snippet}
139</Story>
140
141<Story name="Disabled rich" args={{ rich: true, disabled: true }}>
142 {#snippet template(args)}
143 <div class="w-64"><Select {...args} /></div>
144 {/snippet}
145</Story>