@dillingerstaffing/strand-ui 0.1.0 → 0.1.1

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";

package/src/components/Tooltip/Tooltip.css

@@ -0,0 +1,63 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Wrapper ── */
+.strand-tooltip__wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ── Tooltip ── */
+.strand-tooltip {
+  position: absolute;
+  z-index: 1200;
+  padding: var(--strand-space-1) var(--strand-space-2);
+  background: var(--strand-gray-900);
+  color: #fff;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-xs);
+  border-radius: var(--strand-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--strand-duration-fast) ease;
+}
+
+.strand-tooltip--visible {
+  opacity: 1;
+}
+
+/* ── Positions ── */
+.strand-tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: var(--strand-space-2);
+}
+
+.strand-tooltip--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--strand-space-2);
+}
+
+.strand-tooltip--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--strand-space-2);
+}
+
+.strand-tooltip--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--strand-space-2);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-tooltip {
+    transition: none;
+  }
+}

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,196 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { render, fireEvent, act } from "@testing-library/preact";
+import { Tooltip } from "./Tooltip.js";
+
+describe("Tooltip", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(
+      <Tooltip content="Hint">
+        <button type="button">Hover me</button>
+      </Tooltip>,
+    );
+    expect(getByText("Hover me")).toBeTruthy();
+  });
+
+  it("renders tooltip content text", () => {
+    const { container } = render(
+      <Tooltip content="Helpful tip">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]');
+    expect(tooltip).toBeTruthy();
+    expect(tooltip!.textContent).toBe("Helpful tip");
+  });
+
+  it("tooltip is hidden by default", () => {
+    const { container } = render(
+      <Tooltip content="Hidden">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]');
+    expect(tooltip).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("shows tooltip on mouseenter after delay", () => {
+    const { container } = render(
+      <Tooltip content="Visible" delay={100}>
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const wrapper = container.querySelector(".strand-tooltip__wrapper")!;
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+
+    fireEvent.mouseEnter(wrapper);
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(tooltip).toHaveAttribute("aria-hidden", "false");
+  });
+
+  it("hides tooltip on mouseleave", () => {
+    const { container } = render(
+      <Tooltip content="Gone" delay={100}>
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const wrapper = container.querySelector(".strand-tooltip__wrapper")!;
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+
+    fireEvent.mouseEnter(wrapper);
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+    expect(tooltip).toHaveAttribute("aria-hidden", "false");
+
+    fireEvent.mouseLeave(wrapper);
+    expect(tooltip).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("wrapper has onFocus handler for keyboard accessibility", () => {
+    const { container } = render(
+      <Tooltip content="Focused" delay={100}>
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const wrapper = container.querySelector(".strand-tooltip__wrapper")!;
+    // Verify the wrapper element exists and tooltip is associated
+    expect(wrapper).toBeTruthy();
+    expect(wrapper.getAttribute("aria-describedby")).toBeTruthy();
+  });
+
+  it("wrapper has onBlur handler for keyboard accessibility", () => {
+    const { container } = render(
+      <Tooltip content="Blurred" delay={100}>
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const wrapper = container.querySelector(".strand-tooltip__wrapper")!;
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+    // Tooltip starts hidden and wrapper is properly configured
+    expect(tooltip).toHaveAttribute("aria-hidden", "true");
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("tooltip has role tooltip", () => {
+    const { container } = render(
+      <Tooltip content="Accessible">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    expect(container.querySelector('[role="tooltip"]')).toBeTruthy();
+  });
+
+  it("trigger has aria-describedby pointing to tooltip id", () => {
+    const { container } = render(
+      <Tooltip content="Described">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const wrapper = container.querySelector(".strand-tooltip__wrapper")!;
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+    const tooltipId = tooltip.getAttribute("id");
+    expect(wrapper).toHaveAttribute("aria-describedby", tooltipId);
+  });
+
+  it("applies top position class by default", () => {
+    const { container } = render(
+      <Tooltip content="Top">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+    expect(tooltip.className).toContain("strand-tooltip--top");
+  });
+
+  it("applies right position class", () => {
+    const { container } = render(
+      <Tooltip content="Right" position="right">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+    expect(tooltip.className).toContain("strand-tooltip--right");
+  });
+
+  it("applies bottom position class", () => {
+    const { container } = render(
+      <Tooltip content="Bottom" position="bottom">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+    expect(tooltip.className).toContain("strand-tooltip--bottom");
+  });
+
+  it("applies left position class", () => {
+    const { container } = render(
+      <Tooltip content="Left" position="left">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+    expect(tooltip.className).toContain("strand-tooltip--left");
+  });
+
+  it("merges custom className on wrapper", () => {
+    const { container } = render(
+      <Tooltip content="Styled" className="custom-tip">
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const wrapper = container.querySelector(".strand-tooltip__wrapper")!;
+    expect(wrapper.className).toContain("custom-tip");
+  });
+
+  it("cancels show if mouseleave before delay completes", () => {
+    const { container } = render(
+      <Tooltip content="Cancelled" delay={300}>
+        <button type="button">Target</button>
+      </Tooltip>,
+    );
+    const wrapper = container.querySelector(".strand-tooltip__wrapper")!;
+    const tooltip = container.querySelector('[role="tooltip"]')!;
+
+    fireEvent.mouseEnter(wrapper);
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+    fireEvent.mouseLeave(wrapper);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(tooltip).toHaveAttribute("aria-hidden", "true");
+  });
+});