@runwisp/ui 0.4.0

package/src/stories/EmptyState.stories.svelte

@@ -0,0 +1,74 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import EmptyState from "$lib/components/EmptyState.svelte";
+    import Button from "$lib/components/Button.svelte";
+    import { Calendar, Search, TriangleAlert, Plus, RefreshCw } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/EmptyState",
+        component: EmptyState,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story name="Default" args={{ title: "No data", description: "There's nothing here yet." }} />
+
+<Story name="No Tasks" asChild>
+    <EmptyState
+        icon={Calendar}
+        title="No scheduled tasks"
+        description="Create your first scheduled task to start automating tasks."
+    >
+        {#snippet actions()}
+            <Button variant="primary">
+                {#snippet icon()}<Plus size={16} />{/snippet}
+                Create Task
+            </Button>
+        {/snippet}
+    </EmptyState>
+</Story>
+
+<Story name="No Search Results" asChild>
+    <EmptyState
+        icon={Search}
+        title="No results found"
+        description="Try adjusting your search terms or filters to find what you're looking for."
+    >
+        {#snippet actions()}
+            <Button variant="secondary">Clear Filters</Button>
+        {/snippet}
+    </EmptyState>
+</Story>
+
+<Story name="Error State" asChild>
+    <EmptyState
+        icon={TriangleAlert}
+        title="Something went wrong"
+        description="We couldn't load the data. Please try again or contact support if the problem persists."
+    >
+        {#snippet actions()}
+            <Button variant="primary">
+                {#snippet icon()}<RefreshCw size={16} />{/snippet}
+                Try Again
+            </Button>
+            <Button variant="ghost">Contact Support</Button>
+        {/snippet}
+    </EmptyState>
+</Story>
+
+<Story name="In Card Context" asChild>
+    <div class="max-w-lg rounded-xl border border-mist-200 bg-white p-6">
+        <EmptyState
+            icon={Calendar}
+            title="No upcoming executions"
+            description="All scheduled tasks are either paused or have completed."
+        >
+            {#snippet actions()}
+                <Button variant="secondary" size="sm">View All Tasks</Button>
+            {/snippet}
+        </EmptyState>
+    </div>
+</Story>

package/src/stories/Input.stories.svelte

@@ -0,0 +1,88 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Input from "$lib/components/Input.svelte";
+    import { Search, Mail, Lock, User, Calendar, Clock } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Forms/Input",
+        component: Input,
+        tags: ["autodocs"],
+        argTypes: {
+            size: {
+                control: "select",
+                options: ["sm", "md", "lg"],
+            },
+        },
+    });
+</script>
+
+<Story name="Default" args={{ placeholder: "Enter text..." }} />
+
+<Story name="With Label" args={{ label: "Task Name", placeholder: "my-scheduled-task" }} />
+
+<Story
+    name="With Hint"
+    args={{
+        label: "Cron Expression",
+        placeholder: "*/5 * * * *",
+        hint: "Use standard cron syntax. Minimum interval is 1 minute.",
+    }}
+/>
+
+<Story
+    name="With Error"
+    args={{
+        label: "Email Address",
+        placeholder: "user@example.com",
+        value: "invalid-email",
+        error: "Please enter a valid email address",
+    }}
+/>
+
+<Story name="With Icons" asChild>
+    <div class="max-w-sm space-y-4">
+        <Input placeholder="Search tasks...">
+            {#snippet leadingIcon()}<Search size={18} />{/snippet}
+        </Input>
+        <Input label="Email" type="email" placeholder="you@example.com">
+            {#snippet leadingIcon()}<Mail size={18} />{/snippet}
+        </Input>
+        <Input label="Password" type="password" placeholder="Enter password">
+            {#snippet leadingIcon()}<Lock size={18} />{/snippet}
+        </Input>
+        <Input label="Username" placeholder="Enter username">
+            {#snippet leadingIcon()}<User size={18} />{/snippet}
+        </Input>
+    </div>
+</Story>
+
+<Story name="Sizes" asChild>
+    <div class="max-w-sm space-y-4">
+        <Input size="sm" label="Small" placeholder="Small input" />
+        <Input size="md" label="Medium" placeholder="Medium input (default)" />
+        <Input size="lg" label="Large" placeholder="Large input" />
+    </div>
+</Story>
+
+<Story
+    name="Disabled"
+    args={{ label: "Disabled Input", value: "Cannot edit this", disabled: true }}
+/>
+
+<Story name="Input Types" asChild>
+    <div class="max-w-sm space-y-4">
+        <Input label="Text" type="text" placeholder="Regular text" />
+        <Input label="Email" type="email" placeholder="user@example.com" />
+        <Input label="Password" type="password" placeholder="••••••••" />
+        <Input label="Number" type="number" placeholder="0" />
+        <Input label="Date" type="date">
+            {#snippet leadingIcon()}<Calendar size={18} />{/snippet}
+        </Input>
+        <Input label="Time" type="time">
+            {#snippet leadingIcon()}<Clock size={18} />{/snippet}
+        </Input>
+    </div>
+</Story>

package/src/stories/Logo.stories.svelte

@@ -0,0 +1,82 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Logo from "$lib/components/Logo.svelte";
+
+    const { Story } = defineMeta({
+        title: "Brand/Logo",
+        component: Logo,
+        tags: ["autodocs"],
+        argTypes: {
+            size: {
+                control: "select",
+                options: ["xs", "sm", "md", "lg", "xl"],
+            },
+        },
+    });
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="Sizes" asChild>
+    <div class="flex items-center gap-8 rounded-lg bg-mist-50 p-8">
+        <div class="flex flex-col items-center gap-2">
+            <Logo size="xs" />
+            <span class="text-xs text-mist-600">XS</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+            <Logo size="sm" />
+            <span class="text-xs text-mist-600">SM</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+            <Logo size="md" />
+            <span class="text-xs text-mist-600">MD</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+            <Logo size="lg" />
+            <span class="text-xs text-mist-600">LG</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+            <Logo size="xl" />
+            <span class="text-xs text-mist-600">XL</span>
+        </div>
+    </div>
+</Story>
+
+<Story name="On Gradient Background" asChild>
+    <div
+        class="flex items-center gap-4 rounded-lg bg-gradient-to-br from-wisp-500 to-aurora-500 p-8 text-white"
+    >
+        <Logo size="lg" />
+        <span class="text-2xl font-bold">RunWisp</span>
+    </div>
+</Story>
+
+<Story name="Dark Background" asChild>
+    <div class="flex items-center gap-4 rounded-lg bg-mist-900 p-8 text-white">
+        <Logo size="lg" />
+        <span class="text-2xl font-bold">RunWisp</span>
+    </div>
+</Story>
+
+<Story name="With Custom Class" asChild>
+    <div class="flex items-center gap-4 rounded-lg bg-mist-50 p-8">
+        <Logo size="lg" class="text-wisp-600" />
+        <span class="text-lg font-semibold text-mist-900">Custom Color</span>
+    </div>
+</Story>
+
+<Story name="In Header Style" asChild>
+    <div
+        class="flex items-center gap-4 rounded-lg bg-gradient-to-br from-wisp-500 to-aurora-500 p-4 text-white"
+    >
+        <div
+            class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 backdrop-blur-sm"
+        >
+            <Logo size="sm" />
+        </div>
+        <span class="text-lg font-semibold">RunWisp</span>
+    </div>
+</Story>

package/src/stories/Modal.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 Modal from "$lib/components/Modal.svelte";
+    import Button from "$lib/components/Button.svelte";
+    import Input from "$lib/components/Input.svelte";
+    import Select from "$lib/components/Select.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Modal",
+        component: Modal,
+        tags: ["autodocs"],
+        argTypes: {
+            size: {
+                control: "select",
+                options: ["sm", "md", "lg", "xl", "full"],
+            },
+        },
+    });
+
+    let basicOpen = $state(false);
+    let formOpen = $state(false);
+    let confirmOpen = $state(false);
+    let largeOpen = $state(false);
+
+    const scheduleTypes = [
+        { value: "cron", label: "Cron Expression" },
+        { value: "interval", label: "Fixed Interval" },
+    ];
+</script>
+
+<Story name="Basic" asChild>
+    <Button onclick={() => (basicOpen = true)}>Open Modal</Button>
+    <Modal
+        bind:open={basicOpen}
+        title="Modal Title"
+        description="This is a description of the modal."
+    >
+        <p class="text-mist-600">This is the modal content. You can put any content here.</p>
+    </Modal>
+</Story>
+
+<Story name="With Form" asChild>
+    <Button onclick={() => (formOpen = true)}>Create New Task</Button>
+    <Modal bind:open={formOpen} title="Create New Task" size="lg">
+        <div class="space-y-4">
+            <Input label="Task Name" placeholder="my-scheduled-task" />
+            <Select label="Schedule Type" options={scheduleTypes} placeholder="Select type..." />
+            <Input label="Cron Expression" placeholder="*/5 * * * *" hint="Standard cron syntax" />
+        </div>
+        {#snippet footer()}
+            <div class="flex justify-end gap-3">
+                <Button variant="ghost" onclick={() => (formOpen = false)}>Cancel</Button>
+                <Button variant="primary">Create Task</Button>
+            </div>
+        {/snippet}
+    </Modal>
+</Story>
+
+<Story name="Confirmation Dialog" asChild>
+    <Button variant="danger" onclick={() => (confirmOpen = true)}>Delete Task</Button>
+    <Modal bind:open={confirmOpen} title="Delete Task?" size="sm">
+        <p class="text-mist-600">
+            Are you sure you want to delete <strong>backup-database</strong>? This action cannot be
+            undone.
+        </p>
+        {#snippet footer()}
+            <div class="flex justify-end gap-3">
+                <Button variant="ghost" onclick={() => (confirmOpen = false)}>Cancel</Button>
+                <Button variant="danger" onclick={() => (confirmOpen = false)}>Delete</Button>
+            </div>
+        {/snippet}
+    </Modal>
+</Story>
+
+<Story name="Large Modal" asChild>
+    <Button onclick={() => (largeOpen = true)}>View Task Logs</Button>
+    <Modal bind:open={largeOpen} title="Task Execution Logs" size="full">
+        <div
+            class="max-h-96 overflow-auto rounded-lg bg-mist-900 p-4 font-mono text-sm text-mist-100"
+        >
+            <p class="text-aurora-400">Starting task execution...</p>
+            <p class="text-mist-300">Connecting to database...</p>
+            <p class="text-mist-300">Connection established</p>
+            <p class="text-mist-300">Running backup query...</p>
+            <p class="text-mist-300">Processing 1,234 records...</p>
+            <p class="text-mist-300">Compressing backup file...</p>
+            <p class="text-mist-300">Uploading to storage...</p>
+            <p class="text-success-400">Task completed successfully</p>
+            <p class="text-mist-500">Total execution time: 90s</p>
+        </div>
+        {#snippet footer()}
+            <div class="flex justify-between">
+                <Button variant="ghost">Download Logs</Button>
+                <Button variant="primary" onclick={() => (largeOpen = false)}>Close</Button>
+            </div>
+        {/snippet}
+    </Modal>
+</Story>

package/src/stories/Progress.stories.svelte

@@ -0,0 +1,65 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Progress from "$lib/components/Progress.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Progress",
+        component: Progress,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: {
+                control: "select",
+                options: ["default", "success", "warning", "danger"],
+            },
+            size: {
+                control: "select",
+                options: ["sm", "md", "lg"],
+            },
+        },
+    });
+</script>
+
+<Story name="Default" args={{ value: 65 }} />
+
+<Story name="With Label" args={{ value: 75, showLabel: true, label: "Upload progress" }} />
+
+<Story name="Variants" asChild>
+    <div class="max-w-md space-y-4">
+        <Progress value={80} label="Default" showLabel />
+        <Progress value={80} variant="success" label="Success" showLabel />
+        <Progress value={80} variant="warning" label="Warning" showLabel />
+        <Progress value={80} variant="danger" label="Danger" showLabel />
+    </div>
+</Story>
+
+<Story name="Sizes" asChild>
+    <div class="max-w-md space-y-4">
+        <Progress value={60} size="sm" label="Small" showLabel />
+        <Progress value={60} size="md" label="Medium" showLabel />
+        <Progress value={60} size="lg" label="Large" showLabel />
+    </div>
+</Story>
+
+<Story name="Usage 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">Resource Usage</h3>
+        <Progress value={45} label="CPU Usage" showLabel />
+        <Progress value={72} label="Memory" showLabel variant="warning" />
+        <Progress value={23} label="Storage" showLabel variant="success" />
+        <Progress value={89} label="API Requests" showLabel variant="danger" />
+    </div>
+</Story>
+
+<Story name="Task Execution Progress" asChild>
+    <div class="max-w-md space-y-4 rounded-xl border border-mist-200 bg-white p-4">
+        <div class="flex items-center justify-between">
+            <h3 class="font-semibold text-mist-900">backup-database</h3>
+            <span class="text-sm text-mist-500">Running...</span>
+        </div>
+        <Progress value={67} showLabel />
+        <p class="text-sm text-mist-500">Processing 847 of 1,234 records</p>
+    </div>
+</Story>

package/src/stories/Select.stories.svelte

@@ -0,0 +1,158 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Select from "$lib/components/Select.svelte";
+    import { Globe, Clock, Zap, Cloud, Cpu, Database } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Forms/Select",
+        component: Select,
+        tags: ["autodocs"],
+        argTypes: {
+            size: {
+                control: "select",
+                options: ["sm", "md", "lg"],
+            },
+            searchable: {
+                control: "boolean",
+            },
+            disabled: {
+                control: "boolean",
+            },
+        },
+    });
+
+    const simpleOptions = [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+    ];
+
+    const richOptions = [
+        {
+            value: "load-balanced",
+            label: "Load Balanced",
+            description: "Distribute tasks evenly across available runners based on load.",
+            icon: Zap,
+        },
+        {
+            value: "round-robin",
+            label: "Round Robin",
+            description: "Cycle through runners sequentially.",
+            icon: Clock,
+        },
+        {
+            value: "geodistributed",
+            label: "Geo-Distributed",
+            description: "Route to the nearest available daemon.",
+            icon: Globe,
+        },
+        {
+            value: "fan-out",
+            label: "Fan Out",
+            description: "Execute on all connected runners simultaneously.",
+            icon: Database,
+            disabled: true,
+        },
+    ];
+
+    const groupedOptions = [
+        { value: "us-east-1", label: "US East (N. Virginia)", group: "Americas", icon: Cloud },
+        { value: "us-west-1", label: "US West (N. California)", group: "Americas", icon: Cloud },
+        { value: "eu-west-1", label: "EU (Ireland)", group: "Europe", icon: Globe },
+        { value: "eu-central-1", label: "EU (Frankfurt)", group: "Europe", icon: Globe },
+        {
+            value: "ap-southeast-1",
+            label: "Asia Pacific (Singapore)",
+            group: "Asia Pacific",
+            icon: Globe,
+        },
+        {
+            value: "ap-northeast-1",
+            label: "Asia Pacific (Tokyo)",
+            group: "Asia Pacific",
+            icon: Globe,
+        },
+        { value: "local", label: "Local Machine", group: "Development", icon: Cpu },
+    ];
+</script>
+
+<Story
+    name="Default"
+    args={{
+        options: simpleOptions,
+        placeholder: "Select an option...",
+    }}
+/>
+
+<Story
+    name="With Label & Hint"
+    args={{
+        label: "Deployment Strategy",
+        options: richOptions,
+        placeholder: "Choose strategy...",
+        hint: "Select how tasks are distributed to runners.",
+    }}
+/>
+
+<Story
+    name="Searchable"
+    args={{
+        label: "Region",
+        options: groupedOptions,
+        searchable: true,
+        placeholder: "Search regions...",
+        description: "Filter by region name.",
+    }}
+/>
+
+<Story
+    name="With Error"
+    args={{
+        label: "Required Field",
+        options: simpleOptions,
+        error: "This field is required.",
+        placeholder: "Select...",
+    }}
+/>
+
+<Story name="Sizes" asChild>
+    <div class="max-w-sm space-y-6">
+        <Select size="sm" label="Small Size" options={simpleOptions} placeholder="Small" />
+        <Select
+            size="md"
+            label="Medium Size"
+            options={richOptions}
+            placeholder="Medium with Icons"
+        />
+        <Select
+            size="lg"
+            label="Large Size"
+            options={groupedOptions}
+            placeholder="Large with Groups"
+            searchable={true}
+        />
+    </div>
+</Story>
+
+<Story
+    name="Rich Content"
+    args={{
+        label: "Complex Selection",
+        options: richOptions,
+        placeholder: "Select with icons & descriptions...",
+        class: "max-w-md",
+    }}
+/>
+
+<Story
+    name="Disabled"
+    args={{
+        label: "Disabled Input",
+        options: simpleOptions,
+        value: "option1",
+        disabled: true,
+    }}
+/>

package/src/stories/Tabs.stories.svelte

@@ -0,0 +1,103 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Tabs from "$lib/components/Tabs.svelte";
+    import { Calendar, ListTodo, Activity, Settings } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Tabs",
+        component: Tabs,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: {
+                control: "select",
+                options: ["underline", "pills", "enclosed"],
+            },
+        },
+    });
+
+    const basicTabs = [
+        { id: "overview", label: "Overview" },
+        { id: "details", label: "Details" },
+        { id: "logs", label: "Logs" },
+        { id: "settings", label: "Settings" },
+    ];
+
+    const iconTabs = [
+        { id: "schedules", label: "Schedules", icon: Calendar },
+        { id: "tasks", label: "Tasks", icon: ListTodo, badge: 3 },
+        { id: "monitoring", label: "Monitoring", icon: Activity },
+        { id: "settings", label: "Settings", icon: Settings },
+    ];
+
+    const disabledTabs = [
+        { id: "active", label: "Active" },
+        { id: "completed", label: "Completed" },
+        { id: "failed", label: "Failed" },
+        { id: "archived", label: "Archived", disabled: true },
+    ];
+</script>
+
+<Story name="Underline (Default)" asChild>
+    <Tabs tabs={basicTabs} variant="underline">
+        {#snippet children(activeTab)}
+            <div class="rounded-lg border border-mist-200 bg-white p-4">
+                <p class="text-mist-600">Content for <strong>{activeTab}</strong> tab</p>
+            </div>
+        {/snippet}
+    </Tabs>
+</Story>
+
+<Story name="Pills" asChild>
+    <Tabs tabs={basicTabs} variant="pills">
+        {#snippet children(activeTab)}
+            <div class="rounded-lg border border-mist-200 bg-white p-4">
+                <p class="text-mist-600">Content for <strong>{activeTab}</strong> tab</p>
+            </div>
+        {/snippet}
+    </Tabs>
+</Story>
+
+<Story name="Enclosed" asChild>
+    <Tabs tabs={basicTabs} variant="enclosed">
+        {#snippet children(activeTab)}
+            <div class="rounded-lg border border-mist-200 bg-white p-4">
+                <p class="text-mist-600">Content for <strong>{activeTab}</strong> tab</p>
+            </div>
+        {/snippet}
+    </Tabs>
+</Story>
+
+<Story name="With Icons and Badges" asChild>
+    <Tabs tabs={iconTabs} variant="underline">
+        {#snippet children(activeTab)}
+            <div class="rounded-lg border border-mist-200 bg-white p-4">
+                <p class="text-mist-600">You're viewing the <strong>{activeTab}</strong> section</p>
+            </div>
+        {/snippet}
+    </Tabs>
+</Story>
+
+<Story name="Full Width" asChild>
+    <div class="max-w-md">
+        <Tabs tabs={basicTabs} variant="pills" fullWidth>
+            {#snippet children(activeTab)}
+                <div class="rounded-lg border border-mist-200 bg-white p-4">
+                    <p class="text-mist-600">Content for <strong>{activeTab}</strong> tab</p>
+                </div>
+            {/snippet}
+        </Tabs>
+    </div>
+</Story>
+
+<Story name="With Disabled Tab" asChild>
+    <Tabs tabs={disabledTabs} variant="underline">
+        {#snippet children(activeTab)}
+            <div class="rounded-lg border border-mist-200 bg-white p-4">
+                <p class="text-mist-600">Showing <strong>{activeTab}</strong> tasks</p>
+            </div>
+        {/snippet}
+    </Tabs>
+</Story>