@xenide-io/the-old-ui-theme 0.2.9 → 0.3.1

package/src/components/ui/Tag.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type TagType = "default" | "primary" | "success" | "warning" | "danger" | "info" | "muted" | "highlight";
+
+export interface TagProps extends HTMLAttributes<HTMLDivElement> {
+  type?: TagType;
+  size?: "sm" | "md";
+  icon?: ReactNode;
+  closable?: boolean;
+  onClose?: () => void;
+  children: ReactNode;
+}
+
+const typeClass: Record<TagType, string> = {
+  default: "ph-tag-default",
+  primary: "ph-tag-primary",
+  success: "ph-tag-success",
+  warning: "ph-tag-warning",
+  danger: "ph-tag-danger",
+  info: "ph-tag-info",
+  muted: "ph-tag-muted",
+  highlight: "ph-tag-highlight",
+};
+
+export const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag({
+  type = "default",
+  size = "md",
+  icon,
+  closable = false,
+  onClose,
+  className,
+  children,
+  ...props
+}, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "ph-tag",
+        typeClass[type],
+        size === "sm" && "ph-tag-sm",
+        className
+      )}
+      {...props}
+    >
+      {icon && <span className="ph-tag__icon">{icon}</span>}
+      <span className="ph-tag__text">{children}</span>
+      {closable && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onClose?.(); }}
+          className="ph-tag__close"
+          aria-label="Remove"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M3 3l6 6M9 3l-6 6" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+});
+
+Tag.displayName = "Tag";

package/src/components/ui/Toggle.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton({
+  pressed = false,
+  onPressedChange,
+  icon,
+  children,
+  className,
+  ...props
+}, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={pressed}
+      onClick={() => onPressedChange?.(!pressed)}
+      className={cn(
+        "ph-toggle-btn",
+        pressed && "ph-toggle-btn--pressed",
+        className
+      )}
+      {...props}
+    >
+      {icon && <span className="ph-toggle-btn__icon">{icon}</span>}
+      {children}
+    </button>
+  );
+});
+
+ToggleButton.displayName = "ToggleButton";
+
+export interface ToggleGroupProps {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ToggleGroup({
+  type = "single",
+  value,
+  onValueChange,
+  children,
+  className,
+}: ToggleGroupProps) {
+  return (
+    <div className={cn("ph-toggle-group", className)} role="group">
+      {children}
+    </div>
+  );
+}
+
+ToggleGroup.displayName = "ToggleGroup";

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

@@ -0,0 +1,58 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+import { Tooltip, TooltipProvider } from "@/components/ui/Tooltip";
+
+afterEach(cleanup);
+
+describe("Tooltip", () => {
+  it("opens when its trigger is hovered", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tooltip content="Hover details" delayDuration={0}>
+        <button type="button">Hover target</button>
+      </Tooltip>,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Hover target" }));
+
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("Hover details");
+  });
+
+  it("opens on keyboard focus and exposes its description to assistive technology", async () => {
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip content="Keyboard details" side="bottom">
+          <button type="button">Focus target</button>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+
+    await user.tab();
+
+    const trigger = screen.getByRole("button", { name: "Focus target" });
+    const tooltip = await screen.findByRole("tooltip");
+    expect(trigger).toHaveFocus();
+    expect(tooltip).toHaveTextContent("Keyboard details");
+    expect(trigger).toHaveAttribute("aria-describedby", tooltip.id);
+  });
+
+  it("dismisses an open tooltip with Escape without moving focus", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tooltip content="Dismissible details">
+        <button type="button">Dismiss target</button>
+      </Tooltip>,
+    );
+
+    await user.tab();
+    const trigger = screen.getByRole("button", { name: "Dismiss target" });
+    expect(await screen.findByRole("tooltip")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
+    expect(trigger).toHaveFocus();
+  });
+});

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import {
+  cloneElement,
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/cn";
+
+export type TooltipSide = "top" | "right" | "bottom" | "left";
+export type TooltipAlign = "start" | "center" | "end";
+
+export interface TooltipProviderProps {
+  children: ReactNode;
+  delayDuration?: number;
+}
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactElement<HTMLAttributes<HTMLElement>>;
+  side?: TooltipSide;
+  align?: TooltipAlign;
+  sideOffset?: number;
+  collisionPadding?: number;
+  className?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  delayDuration?: number;
+  disableHoverableContent?: boolean;
+}
+
+const TooltipDelayContext = createContext(0);
+
+export function TooltipProvider({
+  children,
+  delayDuration = 0,
+}: TooltipProviderProps) {
+  return (
+    <TooltipDelayContext.Provider value={delayDuration}>
+      {children}
+    </TooltipDelayContext.Provider>
+  );
+}
+
+function tooltipPosition(
+  trigger: DOMRect,
+  side: TooltipSide,
+  align: TooltipAlign,
+  offset: number,
+) {
+  const horizontal =
+    align === "start"
+      ? trigger.left
+      : align === "end"
+        ? trigger.right
+        : trigger.left + trigger.width / 2;
+  const vertical =
+    align === "start"
+      ? trigger.top
+      : align === "end"
+        ? trigger.bottom
+        : trigger.top + trigger.height / 2;
+  if (side === "top")
+    return {
+      left: horizontal,
+      top: trigger.top - offset,
+      transform: "translate(-50%, -100%)",
+    };
+  if (side === "bottom")
+    return {
+      left: horizontal,
+      top: trigger.bottom + offset,
+      transform: "translate(-50%, 0)",
+    };
+  if (side === "left")
+    return {
+      left: trigger.left - offset,
+      top: vertical,
+      transform: "translate(-100%, -50%)",
+    };
+  return {
+    left: trigger.right + offset,
+    top: vertical,
+    transform: "translate(0, -50%)",
+  };
+}
+
+export function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 7,
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  delayDuration,
+}: TooltipProps) {
+  const providerDelay = useContext(TooltipDelayContext);
+  const generatedId = useId().replace(/:/g, "");
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [position, setPosition] = useState<ReturnType<
+    typeof tooltipPosition
+  > | null>(null);
+  const isOpen = open ?? internalOpen;
+  const triggerId = children.props.id;
+  const tooltipId = triggerId
+    ? `${triggerId}-tooltip`
+    : `ph-tooltip-${generatedId}`;
+
+  function setOpen(next: boolean) {
+    if (open === undefined) setInternalOpen(next);
+    onOpenChange?.(next);
+  }
+
+  function clearTimer() {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }
+
+  function updatePosition() {
+    if (!triggerRef.current) return;
+    setPosition(
+      tooltipPosition(
+        triggerRef.current.getBoundingClientRect(),
+        side,
+        align,
+        sideOffset,
+      ),
+    );
+  }
+
+  function show(immediate: boolean) {
+    clearTimer();
+    updatePosition();
+    const delay = immediate ? 0 : (delayDuration ?? providerDelay);
+    if (!delay) setOpen(true);
+    else timerRef.current = setTimeout(() => setOpen(true), delay);
+  }
+
+  function hide() {
+    clearTimer();
+    setOpen(false);
+  }
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const reposition = () => updatePosition();
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  });
+
+  useEffect(() => () => clearTimer(), []);
+
+  const describedBy = [children.props["aria-describedby"], tooltipId]
+    .filter(Boolean)
+    .join(" ");
+  const trigger = cloneElement(children, { "aria-describedby": describedBy });
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        className="inline-flex"
+        onMouseEnter={() => show(false)}
+        onMouseLeave={hide}
+        onFocusCapture={() => show(true)}
+        onBlurCapture={hide}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") hide();
+        }}
+      >
+        {trigger}
+      </span>
+      {isOpen && position && typeof document !== "undefined"
+        ? createPortal(
+            <span
+              style={{ position: "fixed", ...position }}
+              className="pointer-events-none z-[200]"
+            >
+              <span
+                id={tooltipId}
+                role="tooltip"
+                data-side={side}
+                className={cn("ph-tooltip-content", className)}
+              >
+                {content}
+              </span>
+            </span>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}

package/src/components/ui/Widget.tsx

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface WidgetProps {
+  title: ReactNode;
+  onClose?: () => void;
+  actions?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Widget({ title, onClose, actions, children, className }: WidgetProps) {
+  return (
+    <div className={cn("ph-widget", className)}>
+      <div className="ph-widget__header">
+        <span className="ph-widget__title">{title}</span>
+        {actions}
+        {onClose && (
+          <button type="button" onClick={onClose} className="ph-widget__close" aria-label="Close">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M3 3l8 8M11 3l-8 8" />
+            </svg>
+          </button>
+        )}
+      </div>
+      <div className="ph-widget__content">{children}</div>
+    </div>
+  );
+}
+
+Widget.displayName = "Widget";

package/src/components/ui/first-slice.test.tsx

@@ -0,0 +1,98 @@
+import { createRef, useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Alert } from "@/components/ui/Alert";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { Input } from "@/components/ui/Input";
+import { Modal } from "@/components/ui/Modal";
+
+describe("first-slice components", () => {
+  it("forwards a button ref and exposes loading state", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref} loading>Save changes</Button>);
+
+    expect(ref.current).toBe(screen.getByRole("button", { name: "Save changes" }));
+    expect(ref.current).toBeDisabled();
+    expect(ref.current).toHaveAttribute("aria-busy", "true");
+  });
+
+  it("uses the same tactile chrome for every filled variant", () => {
+    const { rerender } = render(<Button variant="signal">Launch</Button>);
+    expect(screen.getByRole("button", { name: "Launch" })).toHaveClass("ph-btn-raised");
+    expect(screen.getByRole("button", { name: "Launch" }).querySelector(".ph-btn-chrome")).toBeInTheDocument();
+
+    rerender(<Button variant="danger">Delete</Button>);
+    expect(screen.getByRole("button", { name: "Delete" }).querySelector(".ph-btn-chrome")).toBeInTheDocument();
+  });
+
+  it("associates input help and error messages", () => {
+    const { rerender } = render(
+      <Input label="Email" helperText="Use your work address" />,
+    );
+
+    expect(screen.getByLabelText("Email")).toHaveAccessibleDescription("Use your work address");
+
+    rerender(<Input label="Email" error="Enter a valid email address" />);
+    const input = screen.getByLabelText("Email");
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAccessibleErrorMessage("Enter a valid email address");
+  });
+
+  it("keeps cards static unless explicitly interactive", () => {
+    const { rerender } = render(<Card title="Static card" />);
+    expect(screen.getByText("Static card").closest(".ph-card")).not.toHaveClass("ph-card-interactive");
+
+    rerender(<Card title="Interactive card" interactive />);
+    expect(screen.getByText("Interactive card").closest(".ph-card")).toHaveClass("ph-card-interactive");
+  });
+
+  it("forwards badge attributes and keeps static alerts out of live regions", () => {
+    render(
+      <>
+        <Badge data-testid="badge">Live</Badge>
+        <Alert title="Saved" />
+        <Alert title="Background sync complete" live="polite" />
+      </>,
+    );
+
+    expect(screen.getByTestId("badge")).toHaveTextContent("Live");
+    expect(screen.getByText("Saved").closest(".ph-alert")).not.toHaveAttribute("role");
+    expect(screen.getByRole("status")).toHaveTextContent("Background sync complete");
+  });
+
+  it("closes the modal with Escape and restores trigger focus", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+
+    function Fixture() {
+      const [open, setOpen] = useState(false);
+
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>Open settings</button>
+          <Modal
+            open={open}
+            onClose={() => {
+              onClose();
+              setOpen(false);
+            }}
+            title="Workspace settings"
+          >
+            <button type="button">Save settings</button>
+          </Modal>
+        </>
+      );
+    }
+
+    render(<Fixture />);
+    const trigger = screen.getByRole("button", { name: "Open settings" });
+    await user.click(trigger);
+    expect(screen.getByRole("dialog", { name: "Workspace settings" })).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(trigger).toHaveFocus();
+  });
+});