@runwisp/ui 1.0.1 → 1.2.0

package/src/lib/utils/theme.svelte.test.ts

@@ -0,0 +1,142 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+interface BrowserStub {
+    media: { matches: boolean };
+    classList: Set<string>;
+    fireMediaChange: () => void;
+}
+
+function stubBrowser(
+    options: {
+        matches?: boolean;
+        storage?: Record<string, string>;
+        throwOnStorage?: boolean;
+    } = {},
+): BrowserStub {
+    const { matches = false, storage = {}, throwOnStorage = false } = options;
+    const listeners: (() => void)[] = [];
+    const media = { matches };
+    const classList = new Set<string>();
+
+    vi.stubGlobal("window", {});
+    vi.stubGlobal("matchMedia", () => ({
+        get matches() {
+            return media.matches;
+        },
+        addEventListener: (_event: string, cb: () => void) => {
+            listeners.push(cb);
+        },
+    }));
+    vi.stubGlobal("localStorage", {
+        getItem: (key: string) => {
+            if (throwOnStorage) throw new Error("blocked");
+            return storage[key] ?? null;
+        },
+        setItem: (key: string, value: string) => {
+            if (throwOnStorage) throw new Error("blocked");
+            storage[key] = value;
+        },
+    });
+    vi.stubGlobal("document", {
+        documentElement: {
+            classList: {
+                toggle: (cls: string, on: boolean) => {
+                    if (on) classList.add(cls);
+                    else classList.delete(cls);
+                },
+            },
+        },
+    });
+
+    return {
+        media,
+        classList,
+        fireMediaChange: () => {
+            listeners.forEach((cb) => {
+                cb();
+            });
+        },
+    };
+}
+
+describe("themeStore", () => {
+    beforeEach(() => {
+        vi.resetModules();
+    });
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    it("degrades outside a browser", async () => {
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.preference).toBe("auto");
+        expect(themeStore.resolved).toBe("light");
+    });
+
+    it("resolves auto to the OS preference", async () => {
+        stubBrowser({ matches: true });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.resolved).toBe("dark");
+    });
+
+    it("reads a stored preference over auto", async () => {
+        stubBrowser({ storage: { "runwisp:theme": "dark" } });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.preference).toBe("dark");
+        expect(themeStore.resolved).toBe("dark");
+    });
+
+    it("falls back to the legacy storage key", async () => {
+        stubBrowser({ storage: { "runwisp-theme": "light" } });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.preference).toBe("light");
+    });
+
+    it("ignores an invalid stored value", async () => {
+        stubBrowser({ storage: { "runwisp:theme": "purple" } });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.preference).toBe("auto");
+    });
+
+    it("re-resolves live when the OS preference changes while in auto", async () => {
+        const env = stubBrowser({ matches: false });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.resolved).toBe("light");
+        env.media.matches = true;
+        env.fireMediaChange();
+        expect(themeStore.resolved).toBe("dark");
+    });
+
+    it("ignores OS changes once a manual preference is set", async () => {
+        const env = stubBrowser({ matches: false });
+        const { themeStore } = await import("./theme.svelte.js");
+        themeStore.set("light");
+        env.media.matches = true;
+        env.fireMediaChange();
+        expect(themeStore.resolved).toBe("light");
+    });
+
+    it("persists an explicit preference and toggles the dark class", async () => {
+        const env = stubBrowser();
+        const { themeStore } = await import("./theme.svelte.js");
+        themeStore.set("dark");
+        expect(themeStore.resolved).toBe("dark");
+        expect(env.classList.has("dark")).toBe(true);
+        expect(localStorage.getItem("runwisp:theme")).toBe("dark");
+
+        themeStore.set("light");
+        expect(env.classList.has("dark")).toBe(false);
+    });
+
+    it("still applies the preference for this page when storage write throws", async () => {
+        stubBrowser({ throwOnStorage: true });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(() => {
+            themeStore.set("dark");
+        }).not.toThrow();
+        expect(themeStore.resolved).toBe("dark");
+    });
+});

package/src/lib/utils/theme.svelte.ts

@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+export type ThemePreference = "auto" | "light" | "dark";
+export type ResolvedTheme = "light" | "dark";
+
+// Shared by every RunWisp surface. Keep byte-for-byte in sync with the
+// no-flash <head> scripts in each app's app.html / layout.
+export const THEME_STORAGE_KEY = "runwisp:theme";
+// The daemon dashboard used this key before the store moved here.
+const LEGACY_STORAGE_KEY = "runwisp-theme";
+
+function isPreference(value: string | null): value is ThemePreference {
+    return value === "auto" || value === "light" || value === "dark";
+}
+
+function readStored(): string | null {
+    try {
+        return localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem(LEGACY_STORAGE_KEY);
+    } catch {
+        return null; // private mode / embedded contexts
+    }
+}
+
+function createThemeStore() {
+    const browser = typeof window !== "undefined";
+    let preference = $state<ThemePreference>("auto");
+    let resolved = $state<ResolvedTheme>("light");
+
+    const media = browser ? globalThis.matchMedia("(prefers-color-scheme: dark)") : null;
+
+    function apply(): void {
+        if (!browser) return;
+        if (preference === "auto") {
+            resolved = media?.matches === true ? "dark" : "light";
+        } else {
+            resolved = preference;
+        }
+        document.documentElement.classList.toggle("dark", resolved === "dark");
+    }
+
+    if (browser) {
+        const stored = readStored();
+        if (isPreference(stored)) preference = stored;
+        apply();
+        // Re-resolve live when the OS preference changes while in `auto`.
+        media?.addEventListener("change", () => {
+            if (preference === "auto") apply();
+        });
+    }
+
+    return {
+        get preference(): ThemePreference {
+            return preference;
+        },
+        get resolved(): ResolvedTheme {
+            return resolved;
+        },
+        set(pref: ThemePreference): void {
+            preference = pref;
+            try {
+                localStorage.setItem(THEME_STORAGE_KEY, pref);
+            } catch {
+                // not persisted; still applied for this page
+            }
+            apply();
+        },
+    };
+}
+
+export const themeStore = createThemeStore();

package/src/stories/DataGrid.stories.svelte

@@ -6,6 +6,9 @@
     import DataGrid from "$lib/components/DataGrid.svelte";
     import StatusIndicator from "$lib/components/StatusIndicator.svelte";
     import Dropdown from "$lib/components/Dropdown.svelte";
+    import FilterBar from "$lib/components/FilterBar.svelte";
+    import { seedValues } from "$lib/components/filter-spec.js";
+    import { applyFilters } from "$lib/utils/filter.js";
     import { Play, Pause, Trash2, SquarePen } from "@lucide/svelte";
 
     const { Story } = defineMeta({
@@ -14,8 +17,10 @@
         tags: ["autodocs"],
     });
 
+    const nameColumn = { key: "name", label: "Task Name", sortable: true };
+
     const columns = [
-        { key: "name", label: "Task Name", sortable: true },
+        nameColumn,
         { key: "schedule", label: "Schedule" },
         { key: "lastRun", label: "Last Run", sortable: true },
         { key: "status", label: "Status" },
@@ -72,6 +77,31 @@
         { divider: true },
         { label: "Delete", icon: Trash2, danger: true },
     ];
+
+    /** @type {import("$lib/components/filter-spec.js").FilterField[]} */
+    const filterFields = [
+        { type: "search", key: "q", fields: ["name", "schedule"], placeholder: "Search tasks..." },
+        {
+            type: "select",
+            key: "status",
+            label: "Status",
+            primary: true,
+            options: [
+                { value: "all", label: "All" },
+                { value: "success", label: "Success" },
+                { value: "failed", label: "Failed" },
+                { value: "running", label: "Running" },
+            ],
+        },
+    ];
+</script>
+
+<script>
+    let filterValues = $state(seedValues(filterFields));
+    /** @type {any[]} */
+    let selected = $state([]);
+    let clicked = $state("");
+    const filtered = $derived(applyFilters(tasks, filterFields, filterValues));
 </script>
 
 {#snippet statusCell(/** @type {any} */ row)}
@@ -115,6 +145,39 @@
 
 <Story name="Paginated" args={{ columns, data: tasks, paginate: true, pageSize: 2 }} />
 
+<Story name="Filters, Sort, Selection, Pagination" asChild>
+    <div class="flex flex-col gap-3">
+        <FilterBar fields={filterFields} bind:values={filterValues} />
+        <DataGrid
+            {columns}
+            data={filtered}
+            selectable
+            bind:selectedRows={selected}
+            sortKey="name"
+            sortDirection="asc"
+            paginate
+            pageSize={3}
+            pageSizeOptions={[3, 5, 10]}
+            onRowClick={(row) => (clicked = row.name)}
+            emptyMessage="No tasks match these filters"
+        />
+        <p class="font-mono text-xs text-on-surface-muted">
+            selected: {selected.map((r) => r.name).join(", ") || "none"} · last row click: {clicked ||
+                "none"}
+        </p>
+    </div>
+</Story>
+
+<Story name="Bare With Footer, No Header" asChild>
+    <div class="rounded-[4px] border border-outline">
+        <DataGrid columns={[nameColumn]} data={tasks} bare showHeader={false}>
+            {#snippet footer()}
+                <button class="font-mono text-xs text-primary hover:underline">Load more</button>
+            {/snippet}
+        </DataGrid>
+    </div>
+</Story>
+
 <Story name="Striped" args={{ columns, data: tasks, striped: true }} />
 
 <Story name="Compact" args={{ columns, data: tasks, compact: true }} />

package/src/stories/FilterBar.stories.svelte

@@ -0,0 +1,61 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import FilterBar from "$lib/components/FilterBar.svelte";
+    import { seedValues } from "$lib/components/filter-spec.js";
+
+    const { Story } = defineMeta({
+        title: "Data/FilterBar",
+        component: FilterBar,
+        tags: ["autodocs"],
+    });
+
+    /** @type {import("$lib/components/filter-spec.js").FilterField} */
+    const searchField = {
+        type: "search",
+        key: "q",
+        fields: ["name"],
+        placeholder: "Search tasks...",
+    };
+
+    /** @type {import("$lib/components/filter-spec.js").FilterField[]} */
+    const fields = [
+        searchField,
+        {
+            type: "select",
+            key: "status",
+            label: "Status",
+            primary: true,
+            options: [
+                { value: "all", label: "All" },
+                { value: "success", label: "Success" },
+                { value: "failed", label: "Failed" },
+                { value: "running", label: "Running" },
+            ],
+        },
+        { type: "number", key: "exitCode", label: "Exit code" },
+        { type: "daterange", key: "lastRun", label: "Last run" },
+    ];
+</script>
+
+<script>
+    let values = $state(seedValues(fields));
+    let preset = $state(seedValues(fields, { status: "failed", exitCode: "1" }));
+</script>
+
+<Story name="Default" asChild>
+    <div class="flex flex-col gap-4">
+        <FilterBar {fields} bind:values />
+        <pre class="font-mono text-xs text-on-surface-muted">{JSON.stringify(values, null, 2)}</pre>
+    </div>
+</Story>
+
+<Story name="Pre-filled (URL restore)" asChild>
+    <FilterBar {fields} bind:values={preset} />
+</Story>
+
+<Story name="Search Only" asChild>
+    <FilterBar fields={[searchField]} values={seedValues([searchField])} />
+</Story>

package/src/stories/Welcome.mdx

@@ -185,7 +185,7 @@ import Logo from "../../static/runwisp_c.svg";
         </div>
         <div className="rw-card">
             <h3>Data</h3>
-            <p>DataGrid, Avatar, StatusIndicator, StatCard, EmptyState</p>
+            <p>DataGrid, FilterBar, Avatar, StatusIndicator, StatCard, EmptyState</p>
         </div>
         <div className="rw-card">
             <h3>Navigation</h3>

package/src/astro/CTABand.astro

@@ -1,39 +0,0 @@
----
-// SPDX-FileCopyrightText: PoppyCake, s.r.o.
-// SPDX-License-Identifier: Apache-2.0
-
-interface Props {
-    heading: string;
-    sub?: string;
-    tone?: "default" | "primary";
-    class?: string;
-}
-
-const { heading, sub, tone = "default", class: className = "" } = Astro.props;
-
-const surface =
-    tone === "primary" ? "bg-primary text-on-primary" : "bg-surface-raised text-on-surface";
-const subTone = tone === "primary" ? "text-on-primary/80" : "text-on-surface-muted";
-const hasCtas = Astro.slots.has("ctas");
----
-
-<section class:list={[className]}>
-    <div class="mx-auto max-w-5xl px-6 py-16 sm:py-20">
-        <div
-            class:list={[
-                surface,
-                "rounded-[4px] border border-outline px-6 py-12 text-center shadow-sm sm:px-10",
-            ]}
-        >
-            <h2 class="font-mono text-3xl font-extrabold sm:text-4xl">{heading}</h2>
-            {sub && <p class:list={[subTone, "mt-4 font-sans text-lg"]}>{sub}</p>}
-            {
-                hasCtas && (
-                    <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
-                        <slot name="ctas" />
-                    </div>
-                )
-            }
-        </div>
-    </div>
-</section>

package/src/astro/Hero.astro

@@ -1,58 +0,0 @@
----
-// SPDX-FileCopyrightText: PoppyCake, s.r.o.
-// SPDX-License-Identifier: Apache-2.0
-
-interface Props {
-    headline: string;
-    sub?: string;
-    eyebrow?: string;
-    align?: "left" | "center";
-    size?: "md" | "lg";
-    class?: string;
-}
-
-const { headline, sub, eyebrow, align = "left", size = "lg", class: className = "" } = Astro.props;
-
-const padding = size === "lg" ? "py-20 sm:py-24 lg:py-32" : "py-14 sm:py-16 lg:py-20";
-const headlineSize =
-    size === "lg" ? "text-4xl sm:text-5xl lg:text-6xl" : "text-3xl sm:text-4xl lg:text-5xl";
-const hasMedia = Astro.slots.has("media");
-const hasCtas = Astro.slots.has("ctas");
-const layout = hasMedia ? "grid items-center gap-12 lg:grid-cols-2 lg:gap-16" : "mx-auto max-w-3xl";
-const textAlign = align === "center" && !hasMedia ? "text-center" : "";
-const ctaAlign = align === "center" && !hasMedia ? "justify-center" : "";
----
-
-<section class:list={["relative isolate overflow-hidden", className]}>
-    <div class:list={["mx-auto max-w-6xl px-6", padding]}>
-        <div class={layout}>
-            <div class={textAlign}>
-                {
-                    eyebrow && (
-                        <p class="text-info mb-4 font-mono text-[11.5px] font-medium tracking-[0.16em] uppercase">
-                            {eyebrow}
-                        </p>
-                    )
-                }
-                <h1 class:list={["text-on-surface font-mono font-extrabold", headlineSize]}>
-                    {headline}
-                </h1>
-                {sub && <p class="text-on-surface-muted mt-6 font-sans text-lg sm:text-xl">{sub}</p>}
-                {
-                    hasCtas && (
-                        <div class:list={["mt-8 flex flex-wrap items-center gap-3", ctaAlign]}>
-                            <slot name="ctas" />
-                        </div>
-                    )
-                }
-            </div>
-            {
-                hasMedia && (
-                    <div class="lg:justify-self-end">
-                        <slot name="media" />
-                    </div>
-                )
-            }
-        </div>
-    </div>
-</section>

package/src/astro/SiteHeader.astro

@@ -1,46 +0,0 @@
----
-// SPDX-FileCopyrightText: PoppyCake, s.r.o.
-// SPDX-License-Identifier: Apache-2.0
-import { Logo } from "@runwisp/ui";
-
-interface Props {
-    homeHref?: string;
-    wordmark?: string;
-    class?: string;
-}
-
-const { homeHref = "/", wordmark = "RunWisp", class: className = "" } = Astro.props;
-
-const hasNav = Astro.slots.has("nav");
-const hasActions = Astro.slots.has("actions");
----
-
-<header class:list={["rw-bg-glass sticky top-0 z-40 border-b border-outline", className]}>
-    <div class="mx-auto flex h-[52px] max-w-6xl items-center justify-between gap-6 px-6">
-        <a
-            href={homeHref}
-            class="text-on-surface flex items-center gap-2"
-            aria-label={`${wordmark} home`}
-        >
-            <Logo size="md" />
-            <span class="font-mono font-bold tracking-tight">{wordmark}</span>
-        </a>
-        {
-            hasNav && (
-                <nav
-                    class="text-on-surface-muted hidden gap-6 font-mono text-sm sm:flex [&_a]:[&_a:hover]:text-primary"
-                    aria-label="Primary"
-                >
-                    <slot name="nav" />
-                </nav>
-            )
-        }
-        {
-            hasActions && (
-                <div class="flex items-center gap-2">
-                    <slot name="actions" />
-                </div>
-            )
-        }
-    </div>
-</header>