Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146<script module lang="ts"> import { resolve } from "$app/paths"; import { defineMeta } from "@storybook/addon-svelte-csf"; import Select from "$lib/components/ui/Select.svelte"; import type { SelectOption } from "$lib/components/ui/selectField";
const { Story } = defineMeta({ title: "UI/Select", component: Select, tags: ["autodocs"], argTypes: { rich: { control: "boolean" }, error: { control: "boolean" }, disabled: { control: "boolean" } }, args: { rich: false, error: false, disabled: false, label: "Pick one", value: "two", options: [ { value: "one", label: "One" }, { value: "two", label: "Two" }, { value: "three", label: "Three" } ] satisfies SelectOption[] } });
const refs: SelectOption[] = [ { value: "main", hint: "default", group: "Branches" }, { value: "next", group: "Branches" }, { value: "feature/combobox", group: "Branches" }, { value: "feature/storybook", group: "Branches" }, { value: "v1.0.0", group: "Tags" }, { value: "v0.9.0", group: "Tags" } ];
const many: SelectOption[] = Array.from({ length: 60 }, (_, index) => ({ value: index === 0 ? "main" : `renovate/dependency-${index}`, hint: index === 0 ? "default" : undefined, group: "Branches" }));</script>
<!-- the same options render either way: `rich` only changes the control drawn around them --><Story name="Native"> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Rich" args={{ rich: true }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Placeholder" args={{ value: "", placeholder: "Choose one" }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Grouped" args={{ options: refs, value: "main" }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Grouped rich" args={{ rich: true, options: refs, value: "main" }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Rich value outside the options" args={{ rich: true, options: refs, value: "0123456789abcdef" }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Rich scrolling list with a footer" args={{ rich: true, options: many, value: "main" }}> {#snippet template(args)} <div class="w-64"> <Select {...args}> {#snippet footer()} <a href={resolve("/")} class="block p-xs">View all branches</a> {/snippet} </Select> </div> {/snippet}</Story>
<Story name="Disabled options" args={{ rich: true, value: "main", options: [ { value: "main", hint: "default", group: "Branches" }, { value: "next", group: "Branches" }, { value: "No tags found", disabled: true, group: "Tags" } ] }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Right aligned" args={{ rich: true, align: "right" }}> {#snippet template(args)} <div class="flex justify-end"> <div class="w-64"><Select {...args} /></div> </div> {/snippet}</Story>
<Story name="Error" args={{ error: true }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Error rich" args={{ rich: true, error: true }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Disabled" args={{ disabled: true }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>
<Story name="Disabled rich" args={{ rich: true, disabled: true }}> {#snippet template(args)} <div class="w-64"><Select {...args} /></div> {/snippet}</Story>