@runwisp/ui 0.4.0

package/src/stories/Badge.stories.svelte

@@ -0,0 +1,76 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Badge from "$lib/components/Badge.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Badge",
+        component: Badge,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: {
+                control: "select",
+                options: ["default", "primary", "success", "warning", "danger", "info"],
+            },
+            size: {
+                control: "select",
+                options: ["sm", "md", "lg"],
+            },
+        },
+    });
+</script>
+
+<Story name="Default" args={{ variant: "default" }}>Default</Story>
+
+<Story name="All Variants" asChild>
+    <div class="flex flex-wrap items-center gap-2">
+        <Badge variant="default">Default</Badge>
+        <Badge variant="primary">Primary</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="warning">Warning</Badge>
+        <Badge variant="danger">Danger</Badge>
+        <Badge variant="info">Info</Badge>
+    </div>
+</Story>
+
+<Story name="Outline Variants" asChild>
+    <div class="flex flex-wrap items-center gap-2">
+        <Badge variant="default" outline>Default</Badge>
+        <Badge variant="primary" outline>Primary</Badge>
+        <Badge variant="success" outline>Success</Badge>
+        <Badge variant="warning" outline>Warning</Badge>
+        <Badge variant="danger" outline>Danger</Badge>
+        <Badge variant="info" outline>Info</Badge>
+    </div>
+</Story>
+
+<Story name="With Dot Indicator" asChild>
+    <div class="flex flex-wrap items-center gap-2">
+        <Badge variant="default" dot>Inactive</Badge>
+        <Badge variant="primary" dot>Scheduled</Badge>
+        <Badge variant="success" dot>Running</Badge>
+        <Badge variant="warning" dot>Pending</Badge>
+        <Badge variant="danger" dot>Failed</Badge>
+        <Badge variant="info" dot>Processing</Badge>
+    </div>
+</Story>
+
+<Story name="Sizes" asChild>
+    <div class="flex flex-wrap items-center gap-2">
+        <Badge size="sm" variant="primary">Small</Badge>
+        <Badge size="md" variant="primary">Medium</Badge>
+        <Badge size="lg" variant="primary">Large</Badge>
+    </div>
+</Story>
+
+<Story name="Task Status Example" asChild>
+    <div class="flex flex-wrap items-center gap-2">
+        <Badge variant="success" dot>Completed</Badge>
+        <Badge variant="primary" dot>Running</Badge>
+        <Badge variant="warning" dot>Queued</Badge>
+        <Badge variant="danger" dot>Failed</Badge>
+        <Badge variant="default" dot>Cancelled</Badge>
+    </div>
+</Story>

package/src/stories/Breadcrumb.stories.svelte

@@ -0,0 +1,64 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Breadcrumb from "$lib/components/Breadcrumb.svelte";
+    import { House } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Navigation/Breadcrumb",
+        component: Breadcrumb,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story
+    name="Default"
+    args={{
+        items: [
+            { label: "Dashboard", href: "/" },
+            { label: "Tasks", href: "/tasks" },
+            { label: "backup-database" },
+        ],
+    }}
+/>
+
+<Story
+    name="With Home Icon"
+    args={{
+        items: [
+            { label: "Home", href: "/", icon: House },
+            { label: "Schedules", href: "/schedules" },
+            { label: "Create New" },
+        ],
+    }}
+/>
+
+<Story
+    name="Long Path"
+    args={{
+        items: [
+            { label: "Home", href: "/" },
+            { label: "Projects", href: "/projects" },
+            { label: "RunWisp", href: "/projects/runwisp" },
+            { label: "Tasks", href: "/projects/runwisp/tasks" },
+            { label: "backup-database" },
+        ],
+    }}
+/>
+
+<Story name="In Page Context" asChild>
+    <div class="rounded-xl border border-mist-200 bg-white p-6">
+        <Breadcrumb
+            items={[
+                { label: "Dashboard", href: "/" },
+                { label: "Tasks", href: "/tasks" },
+                { label: "backup-database" },
+            ]}
+            class="mb-4"
+        />
+        <h1 class="text-2xl font-semibold text-mist-900">backup-database</h1>
+        <p class="mt-1 text-mist-500">Daily database backup task</p>
+    </div>
+</Story>

package/src/stories/Button.stories.svelte

@@ -0,0 +1,101 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Button from "$lib/components/Button.svelte";
+    import { Play, Plus, ArrowRight, Download, Trash2 } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Button",
+        component: Button,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: {
+                control: "select",
+                options: ["primary", "secondary", "ghost", "danger", "success"],
+            },
+            size: {
+                control: "select",
+                options: ["xs", "sm", "md", "lg"],
+            },
+        },
+    });
+</script>
+
+<Story name="Primary" args={{ variant: "primary" }}>Primary Button</Story>
+
+<Story name="Secondary" args={{ variant: "secondary" }}>Secondary Button</Story>
+
+<Story name="Ghost" args={{ variant: "ghost" }}>Ghost Button</Story>
+
+<Story name="Danger" args={{ variant: "danger" }}>Danger Button</Story>
+
+<Story name="Success" args={{ variant: "success" }}>Success Button</Story>
+
+<Story name="All Variants" asChild>
+    <div class="flex flex-wrap items-center gap-3">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="success">Success</Button>
+    </div>
+</Story>
+
+<Story name="Sizes" asChild>
+    <div class="flex flex-wrap items-center gap-3">
+        <Button size="xs">Extra Small</Button>
+        <Button size="sm">Small</Button>
+        <Button size="md">Medium</Button>
+        <Button size="lg">Large</Button>
+    </div>
+</Story>
+
+<Story name="With Icons" asChild>
+    <div class="flex flex-wrap items-center gap-3">
+        <Button variant="primary">
+            {#snippet icon()}<Play size={16} />{/snippet}
+            Run Task
+        </Button>
+        <Button variant="secondary">
+            {#snippet icon()}<Plus size={16} />{/snippet}
+            Add Schedule
+        </Button>
+        <Button variant="ghost">
+            {#snippet iconRight()}<ArrowRight size={16} />{/snippet}
+            View Details
+        </Button>
+        <Button variant="primary">
+            {#snippet icon()}<Download size={16} />{/snippet}
+            Export
+        </Button>
+        <Button variant="danger">
+            {#snippet icon()}<Trash2 size={16} />{/snippet}
+            Delete
+        </Button>
+    </div>
+</Story>
+
+<Story name="Loading State" asChild>
+    <div class="flex flex-wrap items-center gap-3">
+        <Button variant="primary" loading>Loading...</Button>
+        <Button variant="secondary" loading>Processing</Button>
+        <Button variant="danger" loading>Deleting</Button>
+    </div>
+</Story>
+
+<Story name="Disabled" asChild>
+    <div class="flex flex-wrap items-center gap-3">
+        <Button variant="primary" disabled>Disabled Primary</Button>
+        <Button variant="secondary" disabled>Disabled Secondary</Button>
+        <Button variant="ghost" disabled>Disabled Ghost</Button>
+    </div>
+</Story>
+
+<Story name="Full Width" asChild>
+    <div class="max-w-sm space-y-3">
+        <Button variant="primary" fullWidth>Full Width Primary</Button>
+        <Button variant="secondary" fullWidth>Full Width Secondary</Button>
+    </div>
+</Story>

package/src/stories/Card.stories.svelte

@@ -0,0 +1,106 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Card from "$lib/components/Card.svelte";
+    import Button from "$lib/components/Button.svelte";
+    import Badge from "$lib/components/Badge.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Card",
+        component: Card,
+        tags: ["autodocs"],
+        argTypes: {
+            padding: {
+                control: "select",
+                options: ["none", "sm", "md", "lg"],
+            },
+            shadow: {
+                control: "select",
+                options: ["none", "sm", "md", "lg"],
+            },
+        },
+    });
+</script>
+
+<Story name="Default" args={{}}>
+    <h3 class="mb-2 text-lg font-semibold text-mist-900">Card Title</h3>
+    <p class="text-mist-600">This is a basic card component with default padding and styling.</p>
+</Story>
+
+<Story name="With Header and Footer" asChild>
+    <Card>
+        {#snippet header()}
+            <div class="flex items-center justify-between">
+                <h3 class="font-semibold text-mist-900">Task Configuration</h3>
+                <Badge variant="success" dot>Active</Badge>
+            </div>
+        {/snippet}
+
+        <div class="space-y-3">
+            <p class="text-sm text-mist-600">
+                Configure your scheduled task settings and execution parameters.
+            </p>
+            <div class="text-sm">
+                <span class="text-mist-500">Schedule:</span>
+                <span class="ml-2 font-mono text-mist-800">*/5 * * * *</span>
+            </div>
+        </div>
+
+        {#snippet footer()}
+            <div class="flex justify-end gap-2">
+                <Button variant="ghost" size="sm">Cancel</Button>
+                <Button variant="primary" size="sm">Save Changes</Button>
+            </div>
+        {/snippet}
+    </Card>
+</Story>
+
+<Story name="Hoverable" asChild>
+    <div class="grid max-w-3xl grid-cols-3 gap-4">
+        <Card hover>
+            <h4 class="mb-1 font-semibold text-mist-900">Total Tasks</h4>
+            <p class="text-2xl font-bold text-wisp-600">156</p>
+        </Card>
+        <Card hover>
+            <h4 class="mb-1 font-semibold text-mist-900">Active</h4>
+            <p class="text-2xl font-bold text-success-600">142</p>
+        </Card>
+        <Card hover>
+            <h4 class="mb-1 font-semibold text-mist-900">Failed</h4>
+            <p class="text-2xl font-bold text-danger-600">3</p>
+        </Card>
+    </div>
+</Story>
+
+<Story name="Different Padding" asChild>
+    <div class="max-w-md space-y-4">
+        <Card padding="sm">
+            <p class="text-sm text-mist-600">Small padding card</p>
+        </Card>
+        <Card padding="md">
+            <p class="text-sm text-mist-600">Medium padding card (default)</p>
+        </Card>
+        <Card padding="lg">
+            <p class="text-sm text-mist-600">Large padding card</p>
+        </Card>
+    </div>
+</Story>
+
+<Story name="Different Shadows" asChild>
+    <div class="flex gap-4">
+        <Card shadow="none">
+            <p class="text-sm text-mist-600">No shadow</p>
+        </Card>
+        <Card shadow="sm">
+            <p class="text-sm text-mist-600">Small shadow</p>
+        </Card>
+        <Card shadow="md">
+            <p class="text-sm text-mist-600">Medium shadow</p>
+        </Card>
+        <Card shadow="lg">
+            <p class="text-sm text-mist-600">Large shadow</p>
+        </Card>
+    </div>
+</Story>

package/src/stories/Checkbox.stories.svelte

@@ -0,0 +1,77 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Checkbox from "$lib/components/Checkbox.svelte";
+
+    const { Story } = defineMeta({
+        title: "Forms/Checkbox",
+        component: Checkbox,
+        tags: ["autodocs"],
+        argTypes: {
+            size: {
+                control: "select",
+                options: ["sm", "md", "lg"],
+            },
+        },
+    });
+</script>
+
+<Story name="Default" />
+
+<Story name="With Label" args={{ label: "Enable notifications" }} />
+
+<Story
+    name="With Description"
+    args={{
+        label: "Email notifications",
+        description: "Receive email alerts when tasks fail or complete",
+    }}
+/>
+
+<Story name="Checked" args={{ label: "Auto-retry failed tasks", checked: true }} />
+
+<Story
+    name="Indeterminate"
+    args={{ label: "Select all tasks", indeterminate: true, checked: true }}
+/>
+
+<Story name="Sizes" asChild>
+    <div class="space-y-4">
+        <Checkbox size="sm" label="Small checkbox" />
+        <Checkbox size="md" label="Medium checkbox (default)" />
+        <Checkbox size="lg" label="Large checkbox" />
+    </div>
+</Story>
+
+<Story name="Disabled" asChild>
+    <div class="space-y-4">
+        <Checkbox label="Unchecked disabled" disabled />
+        <Checkbox label="Checked disabled" checked disabled />
+    </div>
+</Story>
+
+<Story name="Settings Example" asChild>
+    <div class="max-w-md space-y-4 rounded-xl border border-mist-200 bg-white p-4">
+        <h3 class="font-semibold text-mist-900">Notification Preferences</h3>
+        <div class="space-y-3">
+            <Checkbox
+                label="Task completion alerts"
+                description="Get notified when scheduled tasks complete successfully"
+                checked
+            />
+            <Checkbox
+                label="Failure alerts"
+                description="Receive immediate notifications on task failures"
+                checked
+            />
+            <Checkbox label="Weekly digest" description="Weekly summary of all task executions" />
+            <Checkbox
+                label="Performance warnings"
+                description="Alert when task execution time exceeds threshold"
+                checked
+            />
+        </div>
+    </div>
+</Story>

package/src/stories/DataGrid.stories.svelte

@@ -0,0 +1,130 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import DataGrid from "$lib/components/DataGrid.svelte";
+    import StatusIndicator from "$lib/components/StatusIndicator.svelte";
+    import Dropdown from "$lib/components/Dropdown.svelte";
+    import { Play, Pause, Trash2, SquarePen } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Data/DataGrid",
+        component: DataGrid,
+        tags: ["autodocs"],
+    });
+
+    const columns = [
+        { key: "name", label: "Task Name", sortable: true },
+        { key: "schedule", label: "Schedule" },
+        { key: "lastRun", label: "Last Run", sortable: true },
+        { key: "status", label: "Status" },
+        { key: "duration", label: "Duration", align: /** @type {'right'} */ ("right") },
+    ];
+
+    const tasks = [
+        {
+            id: "1",
+            name: "backup-database",
+            schedule: "0 2 * * *",
+            lastRun: "2024-01-15 02:00",
+            status: "success",
+            duration: "45s",
+        },
+        {
+            id: "2",
+            name: "cleanup-logs",
+            schedule: "*/30 * * * *",
+            lastRun: "2024-01-15 10:30",
+            status: "running",
+            duration: "12s",
+        },
+        {
+            id: "3",
+            name: "sync-data",
+            schedule: "0 */4 * * *",
+            lastRun: "2024-01-15 08:00",
+            status: "failed",
+            duration: "2m 15s",
+        },
+        {
+            id: "4",
+            name: "generate-report",
+            schedule: "0 9 * * 1",
+            lastRun: "2024-01-08 09:00",
+            status: "success",
+            duration: "1m 30s",
+        },
+        {
+            id: "5",
+            name: "send-notifications",
+            schedule: "0 8 * * *",
+            lastRun: "2024-01-15 08:00",
+            status: "success",
+            duration: "8s",
+        },
+    ];
+
+    const menuItems = [
+        { label: "Edit", icon: SquarePen },
+        { label: "Run Now", icon: Play },
+        { label: "Pause", icon: Pause },
+        { divider: true },
+        { label: "Delete", icon: Trash2, danger: true },
+    ];
+</script>
+
+{#snippet statusCell(/** @type {any} */ row)}
+    <div class="inline-flex items-center">
+        <StatusIndicator status={row.status} size="sm" />
+    </div>
+{/snippet}
+
+{#snippet durationCell(/** @type {any} */ row)}
+    <span class="font-mono text-mist-700">{row.duration}</span>
+{/snippet}
+
+<Story name="Basic" args={{ columns, data: tasks }} />
+
+<Story name="With Custom Rendering" asChild>
+    <DataGrid
+        columns={[
+            { key: "name", label: "Task Name", sortable: true },
+            { key: "schedule", label: "Schedule" },
+            { key: "lastRun", label: "Last Run", sortable: true },
+            { key: "status", label: "Status", render: statusCell },
+            {
+                key: "duration",
+                label: "Duration",
+                align: /** @type {'right'} */ ("right"),
+                render: durationCell,
+            },
+        ]}
+        data={tasks}
+    />
+</Story>
+
+<Story name="Selectable" args={{ columns, data: tasks, selectable: true }} />
+
+<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="Striped" args={{ columns, data: tasks, striped: true }} />
+
+<Story name="Compact" args={{ columns, data: tasks, compact: true }} />
+
+<Story name="Empty State" args={{ columns, data: [], emptyMessage: "No scheduled tasks found" }} />
+
+<Story name="With Row Actions" asChild>
+    <DataGrid {columns} data={tasks}>
+        {#snippet rowAction()}
+            <Dropdown items={menuItems} />
+        {/snippet}
+    </DataGrid>
+</Story>

package/src/stories/Dropdown.stories.svelte

@@ -0,0 +1,81 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Dropdown from "$lib/components/Dropdown.svelte";
+    import { Play, Pause, SquarePen, Copy, Trash2, Settings, ChevronDown } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Dropdown",
+        component: Dropdown,
+        tags: ["autodocs"],
+        argTypes: {
+            align: {
+                control: "select",
+                options: ["left", "right"],
+            },
+        },
+    });
+
+    const taskActions = [
+        { label: "Run Now", icon: Play, onClick: () => console.log("Run") },
+        { label: "Edit", icon: SquarePen, onClick: () => console.log("Edit") },
+        { label: "Duplicate", icon: Copy, onClick: () => console.log("Duplicate") },
+        { label: "Pause", icon: Pause, onClick: () => console.log("Pause") },
+        { divider: true },
+        { label: "Delete", icon: Trash2, danger: true, onClick: () => console.log("Delete") },
+    ];
+
+    const settingsMenu = [
+        { label: "Profile Settings", href: "/settings/profile" },
+        { label: "Team Settings", href: "/settings/team" },
+        { label: "Notifications", href: "/settings/notifications" },
+        { divider: true },
+        { label: "API Keys", href: "/settings/api" },
+        { label: "Billing", href: "/settings/billing" },
+    ];
+</script>
+
+<Story name="Default" args={{ items: taskActions }} />
+
+<Story name="Custom Trigger" asChild>
+    <div class="flex justify-center py-8">
+        <Dropdown items={settingsMenu}>
+            {#snippet trigger()}
+                <div class="flex items-center gap-2">
+                    <Settings size={18} />
+                    <span class="text-sm">Settings</span>
+                    <ChevronDown size={16} />
+                </div>
+            {/snippet}
+        </Dropdown>
+    </div>
+</Story>
+
+<Story name="Align Left" args={{ items: taskActions, align: "left" }} />
+
+<Story
+    name="With Disabled Items"
+    args={{
+        items: [
+            { label: "Run Now", icon: Play },
+            { label: "Edit", icon: SquarePen },
+            { label: "Duplicate", icon: Copy, disabled: true },
+            { divider: true },
+            { label: "Delete", icon: Trash2, danger: true, disabled: true },
+        ],
+    }}
+/>
+
+<Story name="In Context" asChild>
+    <div class="max-w-md rounded-xl border border-mist-200 bg-white p-4">
+        <div class="flex items-center justify-between">
+            <div>
+                <h3 class="font-semibold text-mist-900">backup-database</h3>
+                <p class="text-sm text-mist-500">Daily at 2:00 AM</p>
+            </div>
+            <Dropdown items={taskActions} />
+        </div>
+    </div>
+</Story>