Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import GraphCell, { type Band } from "$lib/components/ui/GraphCell.svelte";
const run: Band[] = ["first", "middle", "middle", "last"]; // where the accent overlay starts and stops within that run const overlay: Band[] = ["none", "first", "middle", "last"];
// what RangeSelector puts on its root, so the accent examples below resolve const palette = "--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle)";
const accent = "--graph-line: var(--range-accent); --graph-fill: var(--range-fill)";
const { Story } = defineMeta({ title: "UI/GraphCell", component: GraphCell, tags: ["autodocs"], argTypes: { band: { control: { type: "inline-radio" }, options: ["none", "first", "middle", "last", "only"] }, direction: { control: { type: "inline-radio" }, options: ["vertical", "horizontal"] }, fill: { control: "boolean" }, tail: { control: "boolean" }, // colour is CSS -- try `--graph-dot: tomato; --graph-line: gray; --graph-fill: papayawhip` style: { control: "text" }, class: { control: "text" } }, args: { band: "middle", direction: "vertical", fill: false, tail: false, style: accent } });</script>
<Story name="GraphCell"> {#snippet template(args)} <div class="flex bg-background-default p-md" style={palette}> <GraphCell {...args} /> </div> {/snippet}</Story>
<!-- every band: a run of four, then the two loners. band comes from the run, the rest from controls --><Story name="Bands"> {#snippet template(args)} <div class="flex gap-2xl bg-background-default p-md" style={palette}> <div class="flex flex-col"> {#each run as band, i (i)} <GraphCell {...args} {band} /> {/each} </div> <div class="flex flex-col"> <GraphCell {...args} band="only" /> <GraphCell {...args} band="none" /> </div> </div> {/snippet}</Story>
<!-- how RangeSelectorRow uses it: a neutral rail with an accent run painted over it --><Story name="Stacked"> {#snippet template()} <div class="flex flex-col bg-background-default p-md" style={palette}> {#each run as band, i (i)} <div class="relative flex"> <GraphCell {band} /> <GraphCell band={overlay[i]} fill={overlay[i] !== "middle"} style={accent} class="absolute inset-y-0 left-0" /> </div> {/each} </div> {/snippet}</Story>
<!-- the vars inherit, so one ancestor recolours a whole graph --><Story name="Inherited"> {#snippet template()} <div class="flex flex-col bg-background-default p-md" style="--graph-line: tomato; --graph-fill: papayawhip" > {#each run as band, i (i)} <GraphCell {band} fill={band !== "middle"} /> {/each} </div> {/snippet}</Story>
<!-- the run carries on below the last visible row, so its lower line trails off --><Story name="Tail"> {#snippet template()} <div class="flex flex-col bg-background-default p-md"> <GraphCell band="first" /> <GraphCell band="middle" /> <GraphCell band="last" tail /> </div> {/snippet}</Story>
<!-- --graph-dot falls back to --graph-line, so setting it splits the node off the rail --><Story name="DotVsLine"> {#snippet template()} <div class="flex flex-col bg-background-default p-md" style="--graph-line: var(--color-border-strong); --graph-dot: tomato; --graph-fill: papayawhip" > {#each run as band, i (i)} <GraphCell {band} fill={band !== "middle"} /> {/each} </div> {/snippet}</Story>