@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Textarea/Textarea.test.tsx

@@ -0,0 +1,89 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Textarea } from "./Textarea.js";
+
+describe("Textarea", () => {
+  it("renders a textarea element", () => {
+    const { container } = render(<Textarea aria-label="Message" />);
+    expect(container.querySelector("textarea")).toBeTruthy();
+  });
+
+  it("displays placeholder text", () => {
+    const { getByPlaceholderText } = render(
+      <Textarea placeholder="Enter message" aria-label="Message" />
+    );
+    expect(getByPlaceholderText("Enter message")).toBeTruthy();
+  });
+
+  it("calls onInput when value changes", () => {
+    const onInput = vi.fn();
+    const { container } = render(
+      <Textarea aria-label="Message" onInput={onInput} />
+    );
+    fireEvent.input(container.querySelector("textarea")!, {
+      target: { value: "hello" },
+    });
+    expect(onInput).toHaveBeenCalled();
+  });
+
+  it("shows character count when showCount and maxLength are set", () => {
+    const { container } = render(
+      <Textarea aria-label="Message" showCount maxLength={100} value="hello" />
+    );
+    const count = container.querySelector(".strand-textarea__count");
+    expect(count).toBeTruthy();
+    expect(count!.textContent).toBe("5/100");
+  });
+
+  it("does not show character count without showCount", () => {
+    const { container } = render(
+      <Textarea aria-label="Message" maxLength={100} value="hello" />
+    );
+    expect(container.querySelector(".strand-textarea__count")).toBeNull();
+  });
+
+  it("applies auto-resize class when autoResize is true", () => {
+    const { container } = render(
+      <Textarea aria-label="Message" autoResize />
+    );
+    expect(
+      container.querySelector(".strand-textarea--auto-resize")
+    ).toBeTruthy();
+  });
+
+  it("applies error class when error is true", () => {
+    const { container } = render(<Textarea aria-label="Message" error />);
+    expect(
+      container.querySelector(".strand-textarea--error")
+    ).toBeTruthy();
+  });
+
+  it("sets aria-invalid when error is true", () => {
+    const { container } = render(<Textarea aria-label="Message" error />);
+    expect(container.querySelector("textarea")).toHaveAttribute(
+      "aria-invalid",
+      "true"
+    );
+  });
+
+  it("sets disabled attribute when disabled", () => {
+    const { container } = render(<Textarea aria-label="Message" disabled />);
+    expect(container.querySelector("textarea")).toBeDisabled();
+  });
+
+  it("applies disabled class when disabled", () => {
+    const { container } = render(<Textarea aria-label="Message" disabled />);
+    expect(
+      container.querySelector(".strand-textarea--disabled")
+    ).toBeTruthy();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Textarea aria-label="Message" className="custom" />
+    );
+    const wrapper = container.querySelector(".strand-textarea");
+    expect(wrapper?.className).toContain("custom");
+    expect(wrapper?.className).toContain("strand-textarea");
+  });
+});

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,102 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useCallback, useRef } from "preact/hooks";
+
+export interface TextareaProps
+  extends Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, "onInput" | "value"> {
+  /** Auto-resize to fit content */
+  autoResize?: boolean;
+  /** Show character count (requires maxLength) */
+  showCount?: boolean;
+  /** Show error styling */
+  error?: boolean;
+  /** Maximum character count */
+  maxLength?: number;
+  /** Input handler */
+  onInput?: JSX.GenericEventHandler<HTMLTextAreaElement>;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Controlled value */
+  value?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      autoResize = false,
+      showCount = false,
+      error = false,
+      maxLength,
+      disabled,
+      className = "",
+      value,
+      onInput,
+      ...rest
+    },
+    ref,
+  ) => {
+    const internalRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const setRef = useCallback(
+      (el: HTMLTextAreaElement | null) => {
+        internalRef.current = el;
+        if (typeof ref === "function") {
+          ref(el);
+        } else if (ref) {
+          (ref as { current: HTMLTextAreaElement | null }).current = el;
+        }
+      },
+      [ref],
+    );
+
+    const handleInput: JSX.GenericEventHandler<HTMLTextAreaElement> = useCallback(
+      (e) => {
+        if (autoResize && internalRef.current) {
+          internalRef.current.style.height = "auto";
+          internalRef.current.style.height = `${internalRef.current.scrollHeight}px`;
+        }
+        if (onInput) {
+          onInput(e);
+        }
+      },
+      [autoResize, onInput],
+    );
+
+    const wrapperClasses = [
+      "strand-textarea",
+      error && "strand-textarea--error",
+      disabled && "strand-textarea--disabled",
+      autoResize && "strand-textarea--auto-resize",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const currentLength =
+      typeof value === "string" ? value.length : 0;
+
+    return (
+      <div className={wrapperClasses}>
+        <textarea
+          ref={setRef}
+          className="strand-textarea__field"
+          disabled={disabled}
+          aria-invalid={error ? "true" : undefined}
+          maxLength={maxLength}
+          value={value}
+          onInput={handleInput}
+          {...rest}
+        />
+        {showCount && maxLength != null && (
+          <span className="strand-textarea__count" aria-live="polite">
+            {currentLength}/{maxLength}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Textarea.displayName = "Textarea";

package/src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from "./Textarea.js";
+export type { TextareaProps } from "./Textarea.js";

package/src/components/Toast/Toast.css

@@ -0,0 +1,103 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Container ── */
+.strand-toast__container {
+  position: fixed;
+  right: var(--strand-space-6);
+  bottom: var(--strand-space-6);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--strand-space-3);
+  pointer-events: none;
+}
+
+/* ── Toast ── */
+.strand-toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 280px;
+  max-width: 420px;
+  padding: var(--strand-space-4) var(--strand-space-5);
+  background: var(--strand-surface-elevated);
+  border-radius: var(--strand-radius-lg);
+  border-left: 4px solid transparent;
+  box-shadow: var(--strand-elevation-3);
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  pointer-events: auto;
+  animation: strand-toast-in var(--strand-duration-normal) var(--strand-ease-out-expo);
+}
+
+/* ── Status accents ── */
+.strand-toast--info {
+  border-left-color: var(--strand-blue-primary);
+}
+
+.strand-toast--success {
+  border-left-color: var(--strand-green-positive);
+}
+
+.strand-toast--warning {
+  border-left-color: var(--strand-amber-caution);
+}
+
+.strand-toast--error {
+  border-left-color: var(--strand-red-alert);
+}
+
+/* ── Message ── */
+.strand-toast__message {
+  flex: 1;
+  min-width: 0;
+  color: var(--strand-gray-900);
+}
+
+/* ── Dismiss button ── */
+.strand-toast__dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: var(--strand-space-3);
+  padding: 0;
+  border: none;
+  border-radius: var(--strand-radius-md);
+  background: transparent;
+  color: var(--strand-gray-500);
+  font-size: var(--strand-text-base);
+  cursor: pointer;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-toast__dismiss:hover {
+  background: var(--strand-gray-200);
+  color: var(--strand-gray-600);
+}
+
+/* ── Animations ── */
+@keyframes strand-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-toast {
+    animation: none;
+  }
+
+  .strand-toast__dismiss {
+    transition: none;
+  }
+}

package/src/components/Toast/Toast.test.tsx

@@ -0,0 +1,219 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { render, fireEvent, act } from "@testing-library/preact";
+import { Toast, ToastProvider, useToast } from "./Toast.js";
+
+/** Helper component that triggers a toast via the hook */
+function TestTrigger({
+  message = "Test message",
+  status,
+  duration,
+}: {
+  message?: string;
+  status?: "info" | "success" | "warning" | "error";
+  duration?: number;
+}) {
+  const { toast } = useToast();
+  return (
+    <button
+      type="button"
+      onClick={() => toast({ message, status, duration })}
+    >
+      Trigger
+    </button>
+  );
+}
+
+describe("Toast", () => {
+  // ── Standalone Toast component ──
+
+  it("renders message text", () => {
+    const { getByText } = render(<Toast message="Hello" />);
+    expect(getByText("Hello")).toBeTruthy();
+  });
+
+  it("applies status class", () => {
+    const { container } = render(<Toast message="OK" status="success" />);
+    expect(
+      container.querySelector(".strand-toast--success"),
+    ).toBeTruthy();
+  });
+
+  it("has role status", () => {
+    const { getByRole } = render(<Toast message="Info" />);
+    expect(getByRole("status")).toBeTruthy();
+  });
+
+  it("error toast has aria-live assertive", () => {
+    const { getByRole } = render(
+      <Toast message="Fail" status="error" />,
+    );
+    expect(getByRole("status")).toHaveAttribute("aria-live", "assertive");
+  });
+
+  it("info toast has aria-live polite", () => {
+    const { getByRole } = render(
+      <Toast message="Note" status="info" />,
+    );
+    expect(getByRole("status")).toHaveAttribute("aria-live", "polite");
+  });
+
+  it("warning toast has aria-live assertive", () => {
+    const { getByRole } = render(
+      <Toast message="Warn" status="warning" />,
+    );
+    expect(getByRole("status")).toHaveAttribute("aria-live", "assertive");
+  });
+
+  it("renders dismiss button when onDismiss provided", () => {
+    const onDismiss = vi.fn();
+    const { getByLabelText } = render(
+      <Toast message="Bye" onDismiss={onDismiss} />,
+    );
+    fireEvent.click(getByLabelText("Dismiss"));
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Toast message="Styled" className="custom-toast" />,
+    );
+    const el = container.querySelector(".strand-toast")!;
+    expect(el.className).toContain("custom-toast");
+  });
+
+  it("defaults to info status", () => {
+    const { container } = render(<Toast message="Default" />);
+    expect(
+      container.querySelector(".strand-toast--info"),
+    ).toBeTruthy();
+  });
+});
+
+describe("ToastProvider + useToast", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(
+      <ToastProvider>
+        <p>App content</p>
+      </ToastProvider>,
+    );
+    expect(getByText("App content")).toBeTruthy();
+  });
+
+  it("useToast adds a toast that renders message", () => {
+    const { getByText } = render(
+      <ToastProvider>
+        <TestTrigger message="Hello toast" />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    expect(getByText("Hello toast")).toBeTruthy();
+  });
+
+  it("toast has correct status class", () => {
+    const { getByText, container } = render(
+      <ToastProvider>
+        <TestTrigger message="Error occurred" status="error" />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    expect(
+      container.querySelector(".strand-toast--error"),
+    ).toBeTruthy();
+  });
+
+  it("toast has role status", () => {
+    const { getByText, getAllByRole } = render(
+      <ToastProvider>
+        <TestTrigger message="Status toast" />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    const statuses = getAllByRole("status");
+    expect(statuses.length).toBeGreaterThan(0);
+  });
+
+  it("error toast in provider has aria-live assertive", () => {
+    const { getByText, container } = render(
+      <ToastProvider>
+        <TestTrigger message="Err" status="error" />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    const toast = container.querySelector(".strand-toast--error")!;
+    expect(toast.getAttribute("aria-live")).toBe("assertive");
+  });
+
+  it("toast auto-dismisses after duration", () => {
+    const { getByText, queryByText } = render(
+      <ToastProvider>
+        <TestTrigger message="Vanishing" duration={3000} />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    expect(getByText("Vanishing")).toBeTruthy();
+
+    act(() => {
+      vi.advanceTimersByTime(3000);
+    });
+
+    expect(queryByText("Vanishing")).toBeNull();
+  });
+
+  it("dismiss button removes toast", () => {
+    const { getByText, getByLabelText, queryByText } = render(
+      <ToastProvider>
+        <TestTrigger message="Dismissable" />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    expect(getByText("Dismissable")).toBeTruthy();
+
+    fireEvent.click(getByLabelText("Dismiss"));
+    expect(queryByText("Dismissable")).toBeNull();
+  });
+
+  it("defaults to info status when none provided", () => {
+    const { getByText, container } = render(
+      <ToastProvider>
+        <TestTrigger message="Default info" />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    expect(
+      container.querySelector(".strand-toast--info"),
+    ).toBeTruthy();
+  });
+
+  it("multiple toasts stack", () => {
+    const { getByText, container } = render(
+      <ToastProvider>
+        <TestTrigger message="First" />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    fireEvent.click(getByText("Trigger"));
+    const toasts = container.querySelectorAll(".strand-toast");
+    expect(toasts.length).toBe(2);
+  });
+
+  it("custom className on provider container", () => {
+    const { getByText, container } = render(
+      <ToastProvider className="custom-provider">
+        <TestTrigger message="Styled" />
+      </ToastProvider>,
+    );
+    fireEvent.click(getByText("Trigger"));
+    const toastContainer = container.querySelector(
+      ".strand-toast__container",
+    )!;
+    expect(toastContainer.className).toContain("custom-provider");
+  });
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,177 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { createContext } from "preact";
+import { forwardRef } from "preact/compat";
+import { useState, useContext, useEffect, useCallback, useRef } from "preact/hooks";
+
+export type ToastStatus = "info" | "success" | "warning" | "error";
+
+export interface ToastOptions {
+  message: string;
+  status?: ToastStatus;
+  duration?: number;
+}
+
+interface ToastEntry extends Required<Omit<ToastOptions, "duration">> {
+  id: number;
+  duration: number;
+}
+
+interface ToastContextValue {
+  toast: (options: ToastOptions) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return ctx;
+}
+
+let toastIdCounter = 0;
+
+export interface ToastProviderProps {
+  children?: ComponentChildren;
+  className?: string;
+}
+
+export const ToastProvider = ({ children, className = "" }: ToastProviderProps) => {
+  const [toasts, setToasts] = useState<ToastEntry[]>([]);
+
+  const removeToast = useCallback((id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const addToast = useCallback((options: ToastOptions) => {
+    const entry: ToastEntry = {
+      id: ++toastIdCounter,
+      message: options.message,
+      status: options.status ?? "info",
+      duration: options.duration ?? 5000,
+    };
+    setToasts((prev) => [...prev, entry]);
+  }, []);
+
+  const containerClasses = ["strand-toast__container", className]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <ToastContext.Provider value={{ toast: addToast }}>
+      {children}
+      {toasts.length > 0 && (
+        <div className={containerClasses}>
+          {toasts.map((entry) => (
+            <ToastItem
+              key={entry.id}
+              entry={entry}
+              onDismiss={() => removeToast(entry.id)}
+            />
+          ))}
+        </div>
+      )}
+    </ToastContext.Provider>
+  );
+};
+
+ToastProvider.displayName = "ToastProvider";
+
+/* ── Individual toast item ── */
+
+interface ToastItemProps {
+  entry: ToastEntry;
+  onDismiss: () => void;
+}
+
+function ToastItem({ entry, onDismiss }: ToastItemProps) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (entry.duration > 0) {
+      timerRef.current = setTimeout(onDismiss, entry.duration);
+    }
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [entry.duration, onDismiss]);
+
+  const isUrgent = entry.status === "error" || entry.status === "warning";
+
+  const classes = ["strand-toast", `strand-toast--${entry.status}`]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div
+      className={classes}
+      role="status"
+      aria-live={isUrgent ? "assertive" : "polite"}
+    >
+      <span className="strand-toast__message">{entry.message}</span>
+      <button
+        type="button"
+        className="strand-toast__dismiss"
+        aria-label="Dismiss"
+        onClick={onDismiss}
+      >
+        &#215;
+      </button>
+    </div>
+  );
+}
+
+/* ── Standalone Toast (for direct rendering) ── */
+
+export interface ToastProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "status"> {
+  /** Visual status */
+  status?: ToastStatus;
+  /** Toast message text */
+  message: string;
+  /** Called when dismiss button is clicked */
+  onDismiss?: () => void;
+}
+
+export const Toast = forwardRef<HTMLDivElement, ToastProps>(
+  ({ status = "info", message, onDismiss, className = "", ...rest }, ref) => {
+    const isUrgent = status === "error" || status === "warning";
+
+    const classes = [
+      "strand-toast",
+      `strand-toast--${status}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div
+        ref={ref}
+        className={classes}
+        role="status"
+        aria-live={isUrgent ? "assertive" : "polite"}
+        {...rest}
+      >
+        <span className="strand-toast__message">{message}</span>
+        {onDismiss && (
+          <button
+            type="button"
+            className="strand-toast__dismiss"
+            aria-label="Dismiss"
+            onClick={onDismiss}
+          >
+            &#215;
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+Toast.displayName = "Toast";

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast, ToastProvider, useToast } from "./Toast.js";
+export type { ToastProps, ToastProviderProps, ToastOptions, ToastStatus } from "./Toast.js";