@runwisp/ui 1.0.0 → 1.1.0

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>