@clef-sh/ui 0.1.20 → 0.1.21

package/src/client/primitives/Field.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Input, Textarea } from "./Input";
+
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+  hint?: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  htmlFor?: string;
+}
+
+export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function FieldLabel({ required, className, children, ...rest }: FieldLabelProps) {
+  return (
+    <label
+      className={joinClasses(
+        "font-sans text-[11px] font-medium text-ash uppercase tracking-[0.08em]",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+      {required ? <span className="text-stop-500"> *</span> : null}
+    </label>
+  );
+}
+
+export interface FieldHintProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function FieldHint({ className, children, ...rest }: FieldHintProps) {
+  return (
+    <div className={joinClasses("font-sans text-[11px] text-ash-dim mt-1", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export interface FieldErrorProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function FieldError({ className, children, ...rest }: FieldErrorProps) {
+  return (
+    <div
+      role="alert"
+      className={joinClasses("font-sans text-[11px] text-stop-500 mt-1", className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+const FieldRoot = React.forwardRef<HTMLDivElement, FieldProps>(function Field(
+  { label, hint, error, required, className, children, htmlFor, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={joinClasses("flex flex-col gap-1.5", className)} {...rest}>
+      <FieldLabel required={required} htmlFor={htmlFor}>
+        {label}
+      </FieldLabel>
+      <div>{children}</div>
+      {error ? <FieldError>{error}</FieldError> : hint ? <FieldHint>{hint}</FieldHint> : null}
+    </div>
+  );
+});
+
+type FieldCompound = typeof FieldRoot & {
+  Label: typeof FieldLabel;
+  Hint: typeof FieldHint;
+  Error: typeof FieldError;
+};
+
+const Field = FieldRoot as FieldCompound;
+Field.Label = FieldLabel;
+Field.Hint = FieldHint;
+Field.Error = FieldError;
+
+export { Field, Input, Textarea };

package/src/client/primitives/Input.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const INPUT_BASE =
+  "w-full bg-ink-950 border border-edge rounded-md px-2.5 py-1.5 font-mono text-[12px] text-bone outline-none focus-visible:border-gold-500 placeholder:text-ash-dim disabled:text-ash-dim disabled:bg-ink-900";
+
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, ...rest },
+  ref,
+) {
+  return <input ref={ref} className={joinClasses(INPUT_BASE, className)} {...rest} />;
+});
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { className, ...rest },
+  ref,
+) {
+  return <textarea ref={ref} className={joinClasses(INPUT_BASE, className)} {...rest} />;
+});

package/src/client/primitives/Stat.test.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Stat } from "./Stat";
+
+describe("Stat", () => {
+  it("renders label and value", () => {
+    render(<Stat label="Healthy" value={12} data-testid="s" />);
+    expect(screen.getByText("Healthy")).toBeInTheDocument();
+    expect(screen.getByText("12")).toBeInTheDocument();
+    expect(screen.getByTestId("s")).toHaveAttribute("data-tone", "default");
+  });
+
+  it("applies tone bar class for go tone", () => {
+    render(<Stat label="OK" value="100%" tone="go" data-testid="s" />);
+    const root = screen.getByTestId("s");
+    expect(root).toHaveAttribute("data-tone", "go");
+    const bar = root.querySelector("span[aria-hidden]");
+    expect(bar?.className).toContain("bg-go-500");
+  });
+
+  it("applies stop tone bar class", () => {
+    render(<Stat label="Down" value={3} tone="stop" data-testid="s" />);
+    const bar = screen.getByTestId("s").querySelector("span[aria-hidden]");
+    expect(bar?.className).toContain("bg-stop-500");
+  });
+
+  it("renders icon slot", () => {
+    render(<Stat label="X" value={1} icon={<span data-testid="ico">i</span>} />);
+    expect(screen.getByTestId("ico")).toBeInTheDocument();
+  });
+});

package/src/client/primitives/Stat.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+export type StatTone = "default" | "go" | "warn" | "stop" | "gold";
+
+export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+  value: string | number;
+  tone?: StatTone;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+const TONE_BAR: Record<StatTone, string> = {
+  default: "bg-ash-deep",
+  go: "bg-go-500",
+  warn: "bg-warn-500",
+  stop: "bg-stop-500",
+  gold: "bg-gold-500",
+};
+
+export const Stat = React.forwardRef<HTMLDivElement, StatProps>(function Stat(
+  { label, value, tone = "default", icon, className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-tone={tone}
+      className={joinClasses(
+        "bg-ink-850 border border-edge rounded-card p-4 relative overflow-hidden",
+        className,
+      )}
+      {...rest}
+    >
+      <span
+        aria-hidden
+        className={joinClasses("absolute inset-y-0 left-0 w-[3px]", TONE_BAR[tone])}
+      />
+      <div className="flex items-start justify-between">
+        <div className="font-mono text-[10px] uppercase tracking-[0.08em] text-ash-dim">
+          {label}
+        </div>
+        {icon ? <div className="text-ash-dim">{icon}</div> : null}
+      </div>
+      <div className="font-mono text-[28px] text-bone mt-2">{value}</div>
+    </div>
+  );
+});

package/src/client/primitives/Table.test.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Table } from "./Table";
+
+describe("Table", () => {
+  it("renders header cells and body cells", () => {
+    render(
+      <Table data-testid="tbl">
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Env</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <tbody>
+          <Table.Row>
+            <Table.Cell>auth</Table.Cell>
+            <Table.Cell>prod</Table.Cell>
+          </Table.Row>
+        </tbody>
+      </Table>,
+    );
+    expect(screen.getByTestId("tbl")).toBeInTheDocument();
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("auth")).toBeInTheDocument();
+    expect(screen.getByText("prod")).toBeInTheDocument();
+  });
+
+  it("applies interactive classes to rows when interactive prop set", () => {
+    render(
+      <Table>
+        <tbody>
+          <Table.Row interactive data-testid="row">
+            <Table.Cell>x</Table.Cell>
+          </Table.Row>
+        </tbody>
+      </Table>,
+    );
+    const row = screen.getByTestId("row");
+    expect(row.className).toContain("hover:bg-ink-800");
+    expect(row.className).toContain("cursor-pointer");
+  });
+
+  it("applies drift tone shadow class", () => {
+    render(
+      <Table>
+        <tbody>
+          <Table.Row tone="drift" data-testid="row">
+            <Table.Cell>drifted</Table.Cell>
+          </Table.Row>
+        </tbody>
+      </Table>,
+    );
+    const row = screen.getByTestId("row");
+    expect(row.className).toContain("shadow-[inset_4px_0_0_0_var(--color-stop-500)]");
+  });
+});

package/src/client/primitives/Table.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const TableRoot = React.forwardRef<HTMLDivElement, TableProps>(function Table(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={joinClasses(
+        "bg-ink-850 border border-edge rounded-card overflow-hidden",
+        className,
+      )}
+      {...rest}
+    >
+      <table className="w-full border-collapse">{children}</table>
+    </div>
+  );
+});
+
+export interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function TableHeader({ className, children, ...rest }: TableHeaderProps) {
+  return (
+    <thead className={joinClasses("bg-ink-800 border-b border-edge", className)} {...rest}>
+      {children}
+    </thead>
+  );
+}
+
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function TableHeaderCell({ className, children, ...rest }: TableHeaderCellProps) {
+  return (
+    <th
+      className={joinClasses(
+        "px-5 py-3 font-sans text-[11px] font-semibold text-ash-dim uppercase tracking-[0.08em] text-left",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </th>
+  );
+}
+
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  interactive?: boolean;
+  tone?: "drift";
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function TableRow({ interactive, tone, className, children, ...rest }: TableRowProps) {
+  const interactiveClasses = interactive ? "hover:bg-ink-800 cursor-pointer transition-colors" : "";
+  const toneClasses = tone === "drift" ? "shadow-[inset_4px_0_0_0_var(--color-stop-500)]" : "";
+  return (
+    <tr
+      className={joinClasses(
+        "border-b border-edge last:border-0",
+        interactiveClasses,
+        toneClasses,
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </tr>
+  );
+}
+
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function TableCell({ className, children, ...rest }: TableCellProps) {
+  return (
+    <td className={joinClasses("px-5 py-3 font-sans text-[12px] text-bone", className)} {...rest}>
+      {children}
+    </td>
+  );
+}
+
+type TableCompound = typeof TableRoot & {
+  Header: typeof TableHeader;
+  Row: typeof TableRow;
+  HeaderCell: typeof TableHeaderCell;
+  Cell: typeof TableCell;
+};
+
+const Table = TableRoot as TableCompound;
+Table.Header = TableHeader;
+Table.Row = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+
+export { Table };

package/src/client/primitives/Tabs.test.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Tabs } from "./Tabs";
+
+function Harness({ initial = "a" }: { initial?: string }) {
+  const [v, setV] = useState(initial);
+  return (
+    <Tabs value={v} onChange={setV}>
+      <Tabs.List>
+        <Tabs.Tab value="a">A</Tabs.Tab>
+        <Tabs.Tab value="b">B</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="a">panel-a-content</Tabs.Panel>
+      <Tabs.Panel value="b">panel-b-content</Tabs.Panel>
+    </Tabs>
+  );
+}
+
+describe("Tabs", () => {
+  it("shows active panel and active tab class", () => {
+    render(<Harness initial="a" />);
+    expect(screen.getByText("panel-a-content")).toBeInTheDocument();
+    expect(screen.queryByText("panel-b-content")).not.toBeInTheDocument();
+    const tabA = screen.getByRole("tab", { name: "A" });
+    expect(tabA.className).toContain("text-gold-500");
+    expect(tabA).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("switches panels when a tab is clicked", () => {
+    render(<Harness initial="a" />);
+    fireEvent.click(screen.getByRole("tab", { name: "B" }));
+    expect(screen.getByText("panel-b-content")).toBeInTheDocument();
+    expect(screen.queryByText("panel-a-content")).not.toBeInTheDocument();
+  });
+
+  it("inactive tab uses non-active classes", () => {
+    render(<Harness initial="a" />);
+    const tabB = screen.getByRole("tab", { name: "B" });
+    expect(tabB.className).toContain("text-ash");
+    expect(tabB.className).toContain("border-transparent");
+    expect(tabB).toHaveAttribute("aria-selected", "false");
+  });
+});

package/src/client/primitives/Tabs.tsx

@@ -0,0 +1,100 @@
+import React, { createContext, useContext } from "react";
+
+interface TabsContextValue {
+  value: string;
+  onChange: (v: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext(componentName: string): TabsContextValue {
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error(`${componentName} must be used inside <Tabs>`);
+  }
+  return ctx;
+}
+
+export interface TabsProps {
+  value: string;
+  onChange: (v: string) => void;
+  children?: React.ReactNode;
+}
+
+function TabsRoot({ value, onChange, children }: TabsProps) {
+  return <TabsContext.Provider value={{ value, onChange }}>{children}</TabsContext.Provider>;
+}
+
+export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+function TabsList({ children, className, ...rest }: TabsListProps) {
+  return (
+    <div
+      role="tablist"
+      className={["flex gap-1 border-b border-edge", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface TabsTabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+  value: string;
+  children?: React.ReactNode;
+}
+
+function TabsTab({ value, children, className, onClick, ...rest }: TabsTabProps) {
+  const ctx = useTabsContext("Tabs.Tab");
+  const active = ctx.value === value;
+  const stateClasses = active
+    ? "text-gold-500 border-b-2 border-gold-500 -mb-px"
+    : "text-ash hover:text-bone border-b-2 border-transparent";
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      className={["px-4 py-2 font-sans text-[12px] font-medium", stateClasses, className]
+        .filter(Boolean)
+        .join(" ")}
+      onClick={(e) => {
+        ctx.onChange(value);
+        if (onClick) onClick(e);
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+
+export interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  children?: React.ReactNode;
+}
+
+function TabsPanel({ value, children, ...rest }: TabsPanelProps) {
+  const ctx = useTabsContext("Tabs.Panel");
+  if (ctx.value !== value) return null;
+  return (
+    <div role="tabpanel" {...rest}>
+      {children}
+    </div>
+  );
+}
+
+type TabsCompound = typeof TabsRoot & {
+  List: typeof TabsList;
+  Tab: typeof TabsTab;
+  Panel: typeof TabsPanel;
+};
+
+const Tabs = TabsRoot as TabsCompound;
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Panel = TabsPanel;
+
+export { Tabs };

package/src/client/primitives/Toast.test.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ToastProvider, useToast } from "./Toast";
+
+function Trigger({
+  message,
+  tone,
+}: {
+  message: string;
+  tone?: "default" | "go" | "warn" | "stop";
+}) {
+  const { show } = useToast();
+  return <button onClick={() => show(message, tone ? { tone } : undefined)}>fire</button>;
+}
+
+describe("Toast", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("shows a toast with default border when fired", () => {
+    render(
+      <ToastProvider>
+        <Trigger message="hello" />
+      </ToastProvider>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText("fire"));
+    });
+    const toast = screen.getByTestId("toast");
+    expect(toast).toHaveTextContent("hello");
+    expect(toast.className).toContain("border-edge");
+  });
+
+  it("applies tone border class for warn", () => {
+    render(
+      <ToastProvider>
+        <Trigger message="careful" tone="warn" />
+      </ToastProvider>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText("fire"));
+    });
+    expect(screen.getByTestId("toast").className).toContain("border-warn-500/40");
+  });
+
+  it("auto-dismisses after default 3000ms", () => {
+    render(
+      <ToastProvider>
+        <Trigger message="bye" />
+      </ToastProvider>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText("fire"));
+    });
+    expect(screen.getByTestId("toast")).toBeInTheDocument();
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+    expect(screen.queryByTestId("toast")).not.toBeInTheDocument();
+  });
+
+  it("throws helpful error when useToast called outside provider", () => {
+    function Bad() {
+      useToast();
+      return null;
+    }
+    // suppress React error boundary console
+    const spy = jest.spyOn(console, "error").mockImplementation(() => {});
+    expect(() => render(<Bad />)).toThrow(/ToastProvider/);
+    spy.mockRestore();
+  });
+});

package/src/client/primitives/Toast.tsx

@@ -0,0 +1,89 @@
+import React, { createContext, useCallback, useContext, useRef, useState } from "react";
+
+export type ToastTone = "default" | "go" | "warn" | "stop";
+
+export interface ToastOptions {
+  tone?: ToastTone;
+  durationMs?: number;
+}
+
+interface ToastItem {
+  id: number;
+  message: string;
+  tone: ToastTone;
+}
+
+interface ToastContextValue {
+  show: (message: string, opts?: ToastOptions) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+function toneBorderClass(tone: ToastTone): string {
+  switch (tone) {
+    case "go":
+      return "border-go-500/40";
+    case "warn":
+      return "border-warn-500/40";
+    case "stop":
+      return "border-stop-500/40";
+    default:
+      return "border-edge";
+  }
+}
+
+export interface ToastProviderProps {
+  children?: React.ReactNode;
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const idRef = useRef(0);
+
+  const dismiss = useCallback((id: number) => {
+    setToasts((list) => list.filter((t) => t.id !== id));
+  }, []);
+
+  const show = useCallback(
+    (message: string, opts?: ToastOptions) => {
+      const id = ++idRef.current;
+      const tone: ToastTone = opts?.tone ?? "default";
+      const durationMs = opts?.durationMs ?? 3000;
+      setToasts((list) => [...list, { id, message, tone }]);
+      setTimeout(() => dismiss(id), durationMs);
+    },
+    [dismiss],
+  );
+
+  return (
+    <ToastContext.Provider value={{ show }}>
+      {children}
+      <div
+        data-testid="toast-container"
+        className="fixed bottom-5 right-5 z-50 flex flex-col gap-2 pointer-events-none"
+      >
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            role="status"
+            data-testid="toast"
+            className={[
+              "flex items-center gap-2 bg-ink-850 border rounded-md px-3 py-2 shadow-soft-drop font-sans text-[12px] pointer-events-auto",
+              toneBorderClass(t.tone),
+            ].join(" ")}
+          >
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used inside <ToastProvider>");
+  }
+  return ctx;
+}