@runwisp/ui 1.4.0 → 1.5.0

package/src/stories/DataGrid.stories.svelte

@@ -138,11 +138,6 @@
 
 <Story name="Sortable" args={{ columns, data: tasks, sortKey: "name", sortDirection: "asc" }} />
 
-<Story
-    name="Filterable"
-    args={{ columns, data: tasks, filterable: true, filterPlaceholder: "Filter tasks…" }}
-/>
-
 <Story name="Paginated" args={{ columns, data: tasks, paginate: true, pageSize: 2 }} />
 
 <Story name="Filters, Sort, Selection, Pagination" asChild>

package/src/stories/Heading.stories.svelte

@@ -0,0 +1,31 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Heading from "$lib/components/Heading.svelte";
+    import Text from "$lib/components/Text.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Heading",
+        component: Heading,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story name="Levels" asChild>
+    <div class="space-y-3">
+        <Heading level={1}>Level 1</Heading>
+        <Heading level={2}>Level 2</Heading>
+        <Heading level={3}>Level 3</Heading>
+        <Heading level={4}>Level 4</Heading>
+    </div>
+</Story>
+
+<!-- A card title: the semantic level stays, the size shrinks. -->
+<Story name="Card title" asChild>
+    <div class="max-w-sm rounded-[4px] border border-outline bg-surface-raised p-4">
+        <Heading level={2} size="sm" id="resources-title">System resources</Heading>
+        <Text size="sm" color="muted" class="mt-2">CPU and memory over the last hour.</Text>
+    </div>
+</Story>

package/src/stories/Kbd.stories.svelte

@@ -0,0 +1,36 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Kbd from "$lib/components/Kbd.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Kbd",
+        component: Kbd,
+        tags: ["autodocs"],
+        argTypes: {
+            size: { control: "select", options: ["xs", "sm"] },
+            tone: { control: "select", options: ["default", "faint", "console"] },
+        },
+    });
+</script>
+
+<Story name="Default" args={{ keys: ["Ctrl", "K"] }} />
+
+<Story name="Faint in an input" asChild>
+    <div
+        class="flex h-9 max-w-xs items-center justify-between rounded-[3px] border border-outline bg-surface-sunken/60 px-3 font-mono text-sm text-on-surface-faint"
+    >
+        Search tasks…
+        <Kbd keys="⌘K" size="xs" tone="faint" />
+    </div>
+</Story>
+
+<Story name="Console" asChild>
+    <div
+        class="flex items-center gap-1.5 bg-[var(--rw-con-bg)] px-3 py-2 font-mono text-xs text-[var(--rw-con-dim)]"
+    >
+        Restore <Kbd keys="Esc" size="xs" tone="console" />
+    </div>
+</Story>

package/src/stories/Link.stories.svelte

@@ -0,0 +1,38 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Link from "$lib/components/Link.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Link",
+        component: Link,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: { control: "select", options: ["default", "muted", "primary", "danger"] },
+            underline: { control: "select", options: ["always", "hover", "none"] },
+        },
+    });
+</script>
+
+<Story name="Variants" asChild>
+    <div class="flex flex-col gap-2 text-sm">
+        <Link href="#tasks">Default</Link>
+        <Link href="#tasks" variant="muted">Muted</Link>
+        <Link href="#tasks" variant="primary">Primary</Link>
+        <Link href="#tasks" variant="danger">Danger</Link>
+    </div>
+</Story>
+
+<Story name="External" asChild>
+    <Link
+        href="https://docs.runwisp.com/configuration/tasks/"
+        external
+        variant="primary"
+        title="Opens in a new tab"
+        class="text-sm font-medium"
+    >
+        Task configuration docs →
+    </Link>
+</Story>

package/src/stories/PageHeader.stories.svelte

@@ -0,0 +1,31 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import PageHeader from "$lib/components/PageHeader.svelte";
+    import Button from "$lib/components/Button.svelte";
+
+    const { Story } = defineMeta({
+        title: "Layout/PageHeader",
+        component: PageHeader,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story
+    name="Default"
+    args={{ title: "Tasks", subtitle: "Scheduled tasks and background processes." }}
+/>
+
+<Story name="Rich subtitle and actions" asChild>
+    <PageHeader title="Notifications">
+        {#snippet subtitle()}
+            Recent notifications across all tasks ·
+            <span class="font-mono font-medium text-primary-soft-text tabular-nums">3 unread</span>
+        {/snippet}
+        {#snippet actions()}
+            <Button size="sm" variant="secondary">Mark all read</Button>
+        {/snippet}
+    </PageHeader>
+</Story>

package/src/stories/Progress.stories.svelte

@@ -63,3 +63,29 @@
         <p class="text-sm text-on-surface-muted">Processing 847 of 1,234 records</p>
     </div>
 </Story>
+
+<Story name="Thresholds" asChild>
+    <div class="max-w-md space-y-4">
+        <Progress
+            value={42}
+            size="sm"
+            thresholds={{ warning: 70, danger: 90 }}
+            label="CPU"
+            showLabel
+        />
+        <Progress
+            value={76}
+            size="sm"
+            thresholds={{ warning: 70, danger: 90 }}
+            label="Memory"
+            showLabel
+        />
+        <Progress
+            value={95}
+            size="sm"
+            thresholds={{ warning: 70, danger: 90 }}
+            label="Disk"
+            showLabel
+        />
+    </div>
+</Story>

package/src/stories/RadioGroup.stories.svelte

@@ -0,0 +1,43 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Radio from "$lib/components/Radio.svelte";
+    import RadioGroup from "$lib/components/RadioGroup.svelte";
+
+    const { Story } = defineMeta({
+        title: "Forms/RadioGroup",
+        component: RadioGroup,
+        tags: ["autodocs"],
+    });
+</script>
+
+<script lang="ts">
+    let policy = $state("queue");
+</script>
+
+<Story name="Default" asChild>
+    <div class="space-y-3">
+        <RadioGroup name="concurrency" label="When a run is already active" bind:value={policy}>
+            <Radio value="queue" label="Queue" description="Start after the current run ends." />
+            <Radio value="skip" label="Skip" description="Drop the new firing." />
+            <Radio value="replace" label="Replace" description="Stop the current run first." />
+        </RadioGroup>
+        <p class="font-mono text-xs text-on-surface-muted">selected: {policy}</p>
+    </div>
+</Story>
+
+<Story name="Horizontal" asChild>
+    <RadioGroup
+        name="theme"
+        label="Theme"
+        value="auto"
+        orientation="horizontal"
+        hint="Follows your OS by default."
+    >
+        <Radio value="auto" label="Auto" />
+        <Radio value="light" label="Light" />
+        <Radio value="dark" label="Dark" />
+    </RadioGroup>
+</Story>

package/src/stories/Table.stories.svelte

@@ -0,0 +1,69 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Table from "$lib/components/Table.svelte";
+    import TableBody from "$lib/components/TableBody.svelte";
+    import TableCell from "$lib/components/TableCell.svelte";
+    import TableHead from "$lib/components/TableHead.svelte";
+    import TableRow from "$lib/components/TableRow.svelte";
+
+    const { Story } = defineMeta({
+        title: "Data/Table",
+        component: Table,
+        tags: ["autodocs"],
+    });
+
+    const runs = [
+        { id: "01J9Z3", task: "backup-db", status: "success", duration: "12s" },
+        { id: "01J9Z4", task: "sync-files", status: "failed", duration: "3m 1s" },
+        { id: "01J9Z5", task: "cleanup", status: "success", duration: "800ms" },
+    ];
+</script>
+
+<Story name="Default" asChild>
+    <Table class="max-w-xl">
+        <TableHead>
+            <TableCell header>Task</TableCell>
+            <TableCell header aria-sort="descending">Status</TableCell>
+            <TableCell header align="right">Duration</TableCell>
+        </TableHead>
+        <TableBody>
+            {#each runs as run (run.id)}
+                <TableRow border="faint" hoverable>
+                    <TableCell class="font-mono">{run.task}</TableCell>
+                    <TableCell class="text-on-surface-muted">{run.status}</TableCell>
+                    <TableCell align="right" class="font-mono">{run.duration}</TableCell>
+                </TableRow>
+            {/each}
+        </TableBody>
+    </Table>
+</Story>
+
+<Story name="Compact, two-row header" asChild>
+    <Table class="max-w-xl">
+        <TableHead row={false}>
+            <TableRow border="faint">
+                <TableCell header density="compact" colspan={2}>Run</TableCell>
+                <TableCell header density="compact" align="right">Timing</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell header density="compact">Id</TableCell>
+                <TableCell header density="compact">Task</TableCell>
+                <TableCell header density="compact" align="right">Duration</TableCell>
+            </TableRow>
+        </TableHead>
+        <TableBody>
+            {#each runs as run (run.id)}
+                <TableRow border="faint">
+                    <TableCell density="compact" class="font-mono">{run.id}</TableCell>
+                    <TableCell density="compact" class="font-mono">{run.task}</TableCell>
+                    <TableCell density="compact" align="right" class="font-mono"
+                        >{run.duration}</TableCell
+                    >
+                </TableRow>
+            {/each}
+        </TableBody>
+    </Table>
+</Story>

package/src/svelte-shims.d.ts

@@ -7,11 +7,6 @@ declare module "*.svelte" {
     export default component;
 }
 
-declare module "*.css?inline" {
-    const css: string;
-    export default css;
-}
-
 declare module "*.svg?raw" {
     const svg: string;
     export default svg;

package/src/lib/components/dashboard/status-config.test.ts

@@ -1,18 +0,0 @@
-// Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0
-
-import { describe, expect, it } from "vitest";
-import { RUN_STATUSES } from "@runwisp/common";
-import { RUN_STATUS_CONFIG } from "./status-config.js";
-
-describe("RUN_STATUS_CONFIG", () => {
-    it("has a non-empty description for every run status", () => {
-        for (const status of RUN_STATUSES) {
-            const config = RUN_STATUS_CONFIG[status];
-            expect(config, `missing config for status "${status}"`).toBeDefined();
-            expect(
-                config.description.trim().length,
-                `empty description for status "${status}"`,
-            ).toBeGreaterThan(0);
-        }
-    });
-});