@runwisp/ui 1.3.0 → 1.5.0

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);
-        }
-    });
-});