@nucel/ui 0.2.0 → 0.10.0

package/src/lib/components/ui/StatusBadge.test.ts

@@ -1,150 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import StatusBadge from "./StatusBadge.svelte";
-
-describe("StatusBadge — label rendering", () => {
-  it("renders 'open' as the label for status=open", () => {
-    render(StatusBadge, { props: { status: "open" } });
-    expect(screen.getByText("open")).toBeInTheDocument();
-  });
-
-  it("renders 'closed' as the label for status=closed", () => {
-    render(StatusBadge, { props: { status: "closed" } });
-    expect(screen.getByText("closed")).toBeInTheDocument();
-  });
-
-  it("renders 'running' as the label for status=running", () => {
-    render(StatusBadge, { props: { status: "running" } });
-    expect(screen.getByText("running")).toBeInTheDocument();
-  });
-
-  it("renders 'succeeded' as the label for status=succeeded", () => {
-    render(StatusBadge, { props: { status: "succeeded" } });
-    expect(screen.getByText("succeeded")).toBeInTheDocument();
-  });
-
-  it("renders 'failed' as the label for status=failed", () => {
-    render(StatusBadge, { props: { status: "failed" } });
-    expect(screen.getByText("failed")).toBeInTheDocument();
-  });
-
-  it("renders 'merged' as the label for status=merged", () => {
-    render(StatusBadge, { props: { status: "merged" } });
-    expect(screen.getByText("merged")).toBeInTheDocument();
-  });
-
-  it("renders custom label when label prop is provided", () => {
-    render(StatusBadge, { props: { status: "open", label: "In Progress" } });
-    expect(screen.getByText("In Progress")).toBeInTheDocument();
-  });
-
-  it("custom label overrides the default status label", () => {
-    render(StatusBadge, { props: { status: "open", label: "My Label" } });
-    expect(screen.queryByText("open")).not.toBeInTheDocument();
-    expect(screen.getByText("My Label")).toBeInTheDocument();
-  });
-
-  it("renders without crashing for any known status", () => {
-    const statuses = ["open", "closed", "running", "succeeded", "failed", "merged"];
-    for (const status of statuses) {
-      expect(() => render(StatusBadge, { props: { status } })).not.toThrow();
-    }
-  });
-});
-
-describe("StatusBadge — color classes", () => {
-  it("applies success color classes for status=open", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-success");
-  });
-
-  it("applies purple color classes for status=merged", () => {
-    const { container } = render(StatusBadge, { props: { status: "merged" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-purple-400");
-  });
-
-  it("applies blue color classes for status=running", () => {
-    const { container } = render(StatusBadge, { props: { status: "running" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-blue-400");
-  });
-
-  it("applies success color classes for status=succeeded", () => {
-    const { container } = render(StatusBadge, { props: { status: "succeeded" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-success");
-  });
-
-  it("applies destructive color classes for status=failed", () => {
-    const { container } = render(StatusBadge, { props: { status: "failed" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-destructive");
-  });
-
-  it("uses secondary variant for status=closed", () => {
-    // closed maps to secondary variant (no extraClass)
-    const { container } = render(StatusBadge, { props: { status: "closed" } });
-    expect(container.firstElementChild).not.toBeNull();
-  });
-});
-
-describe("StatusBadge — structure", () => {
-  it("renders an inline-flex element", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("inline-flex");
-  });
-
-  it("renders items-center class", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("items-center");
-  });
-
-  it("contains a span with the label text", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const span = container.querySelector("span");
-    expect(span).not.toBeNull();
-  });
-
-  it("renders without crashing for unknown status", () => {
-    expect(() => render(StatusBadge, { props: { status: "unknown" } })).not.toThrow();
-  });
-
-  it("renders custom label for any status", () => {
-    render(StatusBadge, { props: { status: "failed", label: "Broken" } });
-    expect(screen.getByText("Broken")).toBeInTheDocument();
-  });
-
-  it("background color class is present for status=open", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-success/10");
-  });
-
-  it("background color class is present for status=merged", () => {
-    const { container } = render(StatusBadge, { props: { status: "merged" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-purple-500/10");
-  });
-
-  it("background color class is present for status=running", () => {
-    const { container } = render(StatusBadge, { props: { status: "running" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-blue-500/10");
-  });
-
-  it("background color class is present for status=failed", () => {
-    const { container } = render(StatusBadge, { props: { status: "failed" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-destructive/10");
-  });
-
-  it("background color class is present for status=succeeded", () => {
-    const { container } = render(StatusBadge, { props: { status: "succeeded" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-success/10");
-  });
-});

package/src/lib/components/ui/StatusPill.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-  import { Check, X, Loader2, CircleSlash, Clock, AlertTriangle } from '@lucide/svelte';
-
-  type Status = 'success' | 'failure' | 'running' | 'pending' | 'cancelled' | 'warning';
-
-  let {
-    status,
-    label,
-    size = 'sm',
-  }: {
-    status: Status;
-    label?: string;
-    size?: 'xs' | 'sm';
-  } = $props();
-
-  const defaults: Record<Status, string> = {
-    success: 'passed',
-    failure: 'failed',
-    running: 'running',
-    pending: 'pending',
-    cancelled: 'cancelled',
-    warning: 'warning',
-  };
-
-  const styles: Record<Status, string> = {
-    success: 'border-green-500/30 bg-green-500/10 text-green-500',
-    failure: 'border-destructive/30 bg-destructive/10 text-destructive',
-    running: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
-    pending: 'border-yellow-500/30 bg-yellow-500/10 text-yellow-500',
-    cancelled: 'border-border/60 bg-muted text-muted-foreground',
-    warning: 'border-amber-500/30 bg-amber-500/10 text-amber-500',
-  };
-
-  let text = $derived(label ?? defaults[status]);
-  let sizeCls = $derived(size === 'xs' ? 'text-[10px] px-1.5 py-0.5' : 'text-[11px] px-2 py-0.5');
-  let iconSize = $derived(size === 'xs' ? 'h-2.5 w-2.5' : 'h-3 w-3');
-</script>
-
-<span class="inline-flex items-center gap-1 rounded-full border font-medium {sizeCls} {styles[status]}">
-  {#if status === 'success'}
-    <Check class={iconSize} />
-  {:else if status === 'failure'}
-    <X class={iconSize} />
-  {:else if status === 'running'}
-    <Loader2 class="{iconSize} animate-spin" />
-  {:else if status === 'cancelled'}
-    <CircleSlash class={iconSize} />
-  {:else if status === 'warning'}
-    <AlertTriangle class={iconSize} />
-  {:else}
-    <Clock class={iconSize} />
-  {/if}
-  {text}
-</span>

package/src/lib/components/ui/StatusPill.test.ts

@@ -1,125 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import StatusPill from "./StatusPill.svelte";
-
-describe("StatusPill", () => {
-  it("renders default label 'passed' for status=success", () => {
-    render(StatusPill, { props: { status: "success" } });
-    expect(screen.getByText("passed")).toBeInTheDocument();
-  });
-
-  it("renders default label 'failed' for status=failure", () => {
-    render(StatusPill, { props: { status: "failure" } });
-    expect(screen.getByText("failed")).toBeInTheDocument();
-  });
-
-  it("renders default label 'running' for status=running", () => {
-    render(StatusPill, { props: { status: "running" } });
-    expect(screen.getByText("running")).toBeInTheDocument();
-  });
-
-  it("renders default label 'pending' for status=pending", () => {
-    render(StatusPill, { props: { status: "pending" } });
-    expect(screen.getByText("pending")).toBeInTheDocument();
-  });
-
-  it("renders default label 'cancelled' for status=cancelled", () => {
-    render(StatusPill, { props: { status: "cancelled" } });
-    expect(screen.getByText("cancelled")).toBeInTheDocument();
-  });
-
-  it("renders default label 'warning' for status=warning", () => {
-    render(StatusPill, { props: { status: "warning" } });
-    expect(screen.getByText("warning")).toBeInTheDocument();
-  });
-
-  it("renders custom label when label prop is provided", () => {
-    render(StatusPill, { props: { status: "success", label: "Deployed" } });
-    expect(screen.getByText("Deployed")).toBeInTheDocument();
-  });
-
-  it("custom label overrides the default label", () => {
-    render(StatusPill, { props: { status: "success", label: "Custom" } });
-    expect(screen.queryByText("passed")).not.toBeInTheDocument();
-    expect(screen.getByText("Custom")).toBeInTheDocument();
-  });
-
-  it("size='xs' applies text-[10px] class", () => {
-    const { container } = render(StatusPill, { props: { status: "success", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span).not.toBeNull();
-    expect(span!.className).toContain("text-[10px]");
-  });
-
-  it("size='xs' applies px-1.5 class", () => {
-    const { container } = render(StatusPill, { props: { status: "success", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("px-1.5");
-  });
-
-  it("size='sm' (default) applies text-[11px] class", () => {
-    const { container } = render(StatusPill, { props: { status: "success" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-[11px]");
-  });
-
-  it("size='sm' applies px-2 class", () => {
-    const { container } = render(StatusPill, { props: { status: "success", size: "sm" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("px-2");
-  });
-
-  it("size='xs' does not apply text-[11px] class", () => {
-    const { container } = render(StatusPill, { props: { status: "running", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span!.className).not.toContain("text-[11px]");
-  });
-
-  it("root element is a span", () => {
-    const { container } = render(StatusPill, { props: { status: "success" } });
-    expect(container.firstElementChild?.tagName.toLowerCase()).toBe("span");
-  });
-
-  it("applies green color classes for success status", () => {
-    const { container } = render(StatusPill, { props: { status: "success" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-green-500");
-  });
-
-  it("applies destructive color classes for failure status", () => {
-    const { container } = render(StatusPill, { props: { status: "failure" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-destructive");
-  });
-
-  it("applies blue color classes for running status", () => {
-    const { container } = render(StatusPill, { props: { status: "running" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-blue-400");
-  });
-
-  it("applies yellow color classes for pending status", () => {
-    const { container } = render(StatusPill, { props: { status: "pending" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-yellow-500");
-  });
-
-  it("applies amber color classes for warning status", () => {
-    const { container } = render(StatusPill, { props: { status: "warning" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-amber-500");
-  });
-
-  it("applies muted color classes for cancelled status", () => {
-    const { container } = render(StatusPill, { props: { status: "cancelled" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-muted-foreground");
-  });
-
-  it("renders without crashing for all statuses", () => {
-    const statuses = ["success", "failure", "running", "pending", "cancelled", "warning"] as const;
-    for (const status of statuses) {
-      expect(() => render(StatusPill, { props: { status } })).not.toThrow();
-    }
-  });
-});