@dillingerstaffing/strand-ui 0.1.0 → 0.1.1

package/src/components/Dialog/Dialog.test.tsx

@@ -0,0 +1,203 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Dialog } from "./Dialog.js";
+
+describe("Dialog", () => {
+  const defaultProps = {
+    open: true,
+    onClose: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    // Ensure body overflow is restored
+    document.body.style.overflow = "";
+  });
+
+  // ── Rendering ──
+
+  it("renders nothing when closed", () => {
+    const { container } = render(
+      <Dialog open={false} onClose={defaultProps.onClose}>
+        Content
+      </Dialog>,
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders dialog when open", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(getByRole("dialog")).toBeTruthy();
+  });
+
+  it("renders children inside the dialog", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>
+        <p>Dialog content</p>
+      </Dialog>,
+    );
+    expect(getByRole("dialog")).toHaveTextContent("Dialog content");
+  });
+
+  // ── ARIA ──
+
+  it("has role dialog", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(getByRole("dialog")).toBeTruthy();
+  });
+
+  it("has aria-modal true", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+  });
+
+  it("renders title with aria-labelledby linkage", () => {
+    const { getByRole, getByText } = render(
+      <Dialog {...defaultProps} title="My Dialog">
+        Content
+      </Dialog>,
+    );
+    const dialog = getByRole("dialog");
+    const titleEl = getByText("My Dialog");
+    const titleId = titleEl.getAttribute("id");
+    expect(dialog).toHaveAttribute("aria-labelledby", titleId);
+  });
+
+  it("does not set aria-labelledby when no title", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(getByRole("dialog").hasAttribute("aria-labelledby")).toBe(false);
+  });
+
+  // ── Title ──
+
+  it("renders the title text", () => {
+    const { getByText } = render(
+      <Dialog {...defaultProps} title="Confirm Action">
+        Content
+      </Dialog>,
+    );
+    expect(getByText("Confirm Action")).toBeTruthy();
+  });
+
+  // ── Close button ──
+
+  it("close button calls onClose", () => {
+    const onClose = vi.fn();
+    const { getByLabelText } = render(
+      <Dialog open={true} onClose={onClose}>
+        Content
+      </Dialog>,
+    );
+    fireEvent.click(getByLabelText("Close"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Escape key ──
+
+  it("Escape key calls onClose", () => {
+    const onClose = vi.fn();
+    const { getByRole } = render(
+      <Dialog open={true} onClose={onClose}>
+        Content
+      </Dialog>,
+    );
+    fireEvent.keyDown(getByRole("dialog").parentElement!, {
+      key: "Escape",
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("Escape key does not call onClose when closeOnEscape is false", () => {
+    const onClose = vi.fn();
+    const { getByRole } = render(
+      <Dialog open={true} onClose={onClose} closeOnEscape={false}>
+        Content
+      </Dialog>,
+    );
+    fireEvent.keyDown(getByRole("dialog").parentElement!, {
+      key: "Escape",
+    });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  // ── Outside click ──
+
+  it("clicking backdrop calls onClose", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <Dialog open={true} onClose={onClose}>
+        Content
+      </Dialog>,
+    );
+    const backdrop = container.querySelector(".strand-dialog__backdrop")!;
+    fireEvent.click(backdrop);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("clicking inside dialog does not call onClose", () => {
+    const onClose = vi.fn();
+    const { getByRole } = render(
+      <Dialog open={true} onClose={onClose}>
+        Content
+      </Dialog>,
+    );
+    fireEvent.click(getByRole("dialog"));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("backdrop click disabled when closeOnOutsideClick is false", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <Dialog open={true} onClose={onClose} closeOnOutsideClick={false}>
+        Content
+      </Dialog>,
+    );
+    const backdrop = container.querySelector(".strand-dialog__backdrop")!;
+    fireEvent.click(backdrop);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps} className="custom-dialog">
+        Content
+      </Dialog>,
+    );
+    const dialog = getByRole("dialog");
+    expect(dialog.className).toContain("strand-dialog__panel");
+    expect(dialog.className).toContain("custom-dialog");
+  });
+
+  // ── Scroll lock ──
+
+  it("sets body overflow hidden when open", () => {
+    render(<Dialog {...defaultProps}>Content</Dialog>);
+    expect(document.body.style.overflow).toBe("hidden");
+  });
+
+  it("restores body overflow when closed", () => {
+    const { rerender } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(document.body.style.overflow).toBe("hidden");
+    rerender(
+      <Dialog open={false} onClose={defaultProps.onClose}>
+        Content
+      </Dialog>,
+    );
+    expect(document.body.style.overflow).toBe("");
+  });
+});

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,179 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useEffect, useRef, useCallback } from "preact/hooks";
+
+export interface DialogProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "title" | "open"> {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Called when the dialog should close */
+  onClose: () => void;
+  /** Optional title rendered in the dialog header */
+  title?: string;
+  /** Close when clicking the backdrop */
+  closeOnOutsideClick?: boolean;
+  /** Close when pressing Escape */
+  closeOnEscape?: boolean;
+  /** Dialog content */
+  children?: ComponentChildren;
+}
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])';
+
+let dialogIdCounter = 0;
+
+export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  (
+    {
+      open,
+      onClose,
+      title,
+      closeOnOutsideClick = true,
+      closeOnEscape = true,
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const panelRef = useRef<HTMLDivElement>(null);
+    const previousFocusRef = useRef<Element | null>(null);
+    const idRef = useRef(`strand-dialog-title-${++dialogIdCounter}`);
+    const titleId = idRef.current;
+
+    // Focus trap and focus restoration
+    useEffect(() => {
+      if (!open) return;
+
+      previousFocusRef.current = document.activeElement;
+
+      // Small delay to allow the DOM to render before querying focusable elements
+      const raf = requestAnimationFrame(() => {
+        const panel = panelRef.current;
+        if (!panel) return;
+        const focusable = panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else {
+          panel.focus();
+        }
+      });
+
+      return () => {
+        cancelAnimationFrame(raf);
+        const prev = previousFocusRef.current;
+        if (prev && prev instanceof HTMLElement) {
+          prev.focus();
+        }
+      };
+    }, [open]);
+
+    // Scroll lock
+    useEffect(() => {
+      if (!open) return;
+
+      const original = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+
+      return () => {
+        document.body.style.overflow = original;
+      };
+    }, [open]);
+
+    // Keyboard handler
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === "Escape" && closeOnEscape) {
+          e.stopPropagation();
+          onClose();
+          return;
+        }
+
+        if (e.key === "Tab") {
+          const panel = panelRef.current;
+          if (!panel) return;
+
+          const focusable = Array.from(
+            panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+          );
+          if (focusable.length === 0) return;
+
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+
+          if (e.shiftKey) {
+            if (document.activeElement === first) {
+              e.preventDefault();
+              last.focus();
+            }
+          } else {
+            if (document.activeElement === last) {
+              e.preventDefault();
+              first.focus();
+            }
+          }
+        }
+      },
+      [closeOnEscape, onClose],
+    );
+
+    const handleBackdropClick = useCallback(
+      (e: MouseEvent) => {
+        if (closeOnOutsideClick && e.target === e.currentTarget) {
+          onClose();
+        }
+      },
+      [closeOnOutsideClick, onClose],
+    );
+
+    if (!open) return null;
+
+    const classes = ["strand-dialog__panel", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div
+        className="strand-dialog__backdrop"
+        onClick={handleBackdropClick}
+        onKeyDown={handleKeyDown}
+      >
+        <div
+          ref={(el) => {
+            (panelRef as { current: HTMLDivElement | null }).current = el;
+            if (typeof ref === "function") ref(el);
+            else if (ref) (ref as { current: HTMLDivElement | null }).current = el;
+          }}
+          className={classes}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? titleId : undefined}
+          tabIndex={-1}
+          {...rest}
+        >
+          {title && (
+            <div className="strand-dialog__header">
+              <h2 id={titleId} className="strand-dialog__title">
+                {title}
+              </h2>
+            </div>
+          )}
+          <button
+            type="button"
+            className="strand-dialog__close"
+            aria-label="Close"
+            onClick={onClose}
+          >
+            &#215;
+          </button>
+          <div className="strand-dialog__body">{children}</div>
+        </div>
+      </div>
+    );
+  },
+);
+
+Dialog.displayName = "Dialog";

package/src/components/Dialog/index.ts

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

package/src/components/Divider/Divider.css

@@ -0,0 +1,44 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-divider {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Horizontal (hr) ── */
+.strand-divider--horizontal {
+  width: 100%;
+  border-top: 1px solid var(--strand-gray-200);
+}
+
+/* ── Vertical ── */
+.strand-divider--vertical {
+  align-self: stretch;
+  border-left: 1px solid var(--strand-gray-200);
+}
+
+/* ── Labeled ── */
+.strand-divider--labeled {
+  display: flex;
+  align-items: center;
+  gap: var(--strand-space-3);
+  border-top: 0;
+}
+
+.strand-divider__line {
+  flex: 1;
+  height: 0;
+  border-top: 1px solid var(--strand-gray-200);
+}
+
+.strand-divider__label {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-gray-400);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  white-space: nowrap;
+}

package/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Divider } from "./Divider.js";
+
+describe("Divider", () => {
+  // ── Rendering ──
+
+  it("renders with separator role", () => {
+    const { getByRole } = render(<Divider />);
+    expect(getByRole("separator")).toBeTruthy();
+  });
+
+  // ── Direction ──
+
+  it("renders horizontal direction by default", () => {
+    const { getByRole } = render(<Divider />);
+    expect(getByRole("separator").className).toContain(
+      "strand-divider--horizontal",
+    );
+  });
+
+  it("renders vertical direction", () => {
+    const { getByRole } = render(<Divider direction="vertical" />);
+    expect(getByRole("separator").className).toContain(
+      "strand-divider--vertical",
+    );
+  });
+
+  // ── Aria orientation ──
+
+  it("sets aria-orientation to horizontal by default", () => {
+    const { getByRole } = render(<Divider />);
+    expect(getByRole("separator")).toHaveAttribute(
+      "aria-orientation",
+      "horizontal",
+    );
+  });
+
+  it("sets aria-orientation to vertical", () => {
+    const { getByRole } = render(<Divider direction="vertical" />);
+    expect(getByRole("separator")).toHaveAttribute(
+      "aria-orientation",
+      "vertical",
+    );
+  });
+
+  // ── Label ──
+
+  it("renders label text", () => {
+    const { getByText } = render(<Divider label="OR" />);
+    expect(getByText("OR")).toBeTruthy();
+  });
+
+  it("label has monospace styling class", () => {
+    const { getByText } = render(<Divider label="SECTION" />);
+    expect(getByText("SECTION").className).toContain(
+      "strand-divider__label",
+    );
+  });
+
+  it("labeled divider still has separator role", () => {
+    const { getByRole } = render(<Divider label="OR" />);
+    expect(getByRole("separator")).toBeTruthy();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(<Divider className="custom" />);
+    const el = getByRole("separator");
+    expect(el.className).toContain("strand-divider");
+    expect(el.className).toContain("custom");
+  });
+
+  // ── Element types ──
+
+  it("renders hr element for horizontal without label", () => {
+    const { getByRole } = render(<Divider />);
+    expect(getByRole("separator").tagName).toBe("HR");
+  });
+
+  it("renders div element for vertical", () => {
+    const { getByRole } = render(<Divider direction="vertical" />);
+    expect(getByRole("separator").tagName).toBe("DIV");
+  });
+});

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,81 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface DividerProps {
+  /** Separator direction */
+  direction?: "horizontal" | "vertical";
+  /** Optional label text displayed in the middle of the line */
+  label?: string;
+  /** Additional CSS class */
+  className?: string;
+}
+
+export const Divider = forwardRef<HTMLElement, DividerProps>(
+  ({ direction = "horizontal", label, className = "" }, ref) => {
+    const isVertical = direction === "vertical";
+
+    if (isVertical) {
+      const classes = [
+        "strand-divider",
+        "strand-divider--vertical",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return (
+        <div
+          ref={ref as preact.Ref<HTMLDivElement>}
+          role="separator"
+          aria-orientation="vertical"
+          className={classes}
+        />
+      );
+    }
+
+    if (label) {
+      const classes = [
+        "strand-divider",
+        "strand-divider--horizontal",
+        "strand-divider--labeled",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return (
+        <div
+          ref={ref as preact.Ref<HTMLDivElement>}
+          role="separator"
+          aria-orientation="horizontal"
+          className={classes}
+        >
+          <span className="strand-divider__line" />
+          <span className="strand-divider__label">{label}</span>
+          <span className="strand-divider__line" />
+        </div>
+      );
+    }
+
+    const classes = [
+      "strand-divider",
+      "strand-divider--horizontal",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <hr
+        ref={ref as preact.Ref<HTMLHRElement>}
+        role="separator"
+        aria-orientation="horizontal"
+        className={classes}
+      />
+    );
+  },
+);
+
+Divider.displayName = "Divider";

package/src/components/Divider/index.ts

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

package/src/components/FormField/FormField.css

@@ -0,0 +1,47 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--strand-space-1);
+}
+
+/* ── Label ── */
+.strand-form-field__label {
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-gray-700);
+  line-height: var(--strand-leading-snug);
+}
+
+/* ── Required indicator ── */
+.strand-form-field__required {
+  color: var(--strand-red-alert);
+  margin-left: var(--strand-space-1);
+}
+
+/* ── Control wrapper ── */
+.strand-form-field__control {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Hint ── */
+.strand-form-field__hint {
+  margin: 0;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-xs);
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-normal);
+}
+
+/* ── Error message ── */
+.strand-form-field__error {
+  margin: 0;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-xs);
+  color: var(--strand-red-alert);
+  line-height: var(--strand-leading-normal);
+}