@hydralms/components 0.1.2 → 0.2.0

package/src/ui/drawer.tsx

@@ -0,0 +1,600 @@
+import * as React from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useId,
+  useCallback,
+} from "react";
+import { createPortal } from "react-dom";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+import { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
+
+/* --------------------------------- Context -------------------------------- */
+
+interface DrawerContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  side: "left" | "right";
+  titleId: string;
+  descriptionId: string;
+  hasNav: boolean;
+  setHasNav: (v: boolean) => void;
+}
+
+/* ------------------------------ Nav Context ------------------------------- */
+
+interface DrawerNavContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const DrawerNavContext = createContext<DrawerNavContextValue | null>(null);
+
+function useDrawerNavContext() {
+  const ctx = useContext(DrawerNavContext);
+  if (!ctx)
+    throw new Error(
+      "DrawerNavItem must be used within <DrawerNav>",
+    );
+  return ctx;
+}
+
+const DrawerContext = createContext<DrawerContextValue | null>(null);
+
+function useDrawerContext() {
+  const ctx = useContext(DrawerContext);
+  if (!ctx)
+    throw new Error("Drawer compound components must be used within <Drawer>");
+  return ctx;
+}
+
+/* ------------------------------- Focus Trap ------------------------------- */
+
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+
+function useFocusTrap(
+  containerRef: React.RefObject<HTMLElement | null>,
+  active: boolean,
+) {
+  const previousFocusRef = useRef<Element | null>(null);
+
+  useEffect(() => {
+    if (!active || !containerRef.current) return;
+
+    previousFocusRef.current = document.activeElement;
+
+    const focusable =
+      containerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+
+    return () => {
+      if (previousFocusRef.current instanceof HTMLElement) {
+        previousFocusRef.current.focus();
+      }
+    };
+  }, [active, containerRef]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key !== "Tab" || !containerRef.current) return;
+
+      const focusable = Array.from(
+        containerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+      );
+      if (focusable.length === 0) return;
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    },
+    [containerRef],
+  );
+
+  return handleKeyDown;
+}
+
+/* ------------------------------- Scroll Lock ------------------------------ */
+
+function useScrollLock(active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [active]);
+}
+
+/* ------------------------------ Variants --------------------------------- */
+
+const drawerContentVariants = cva(
+  "bg-background fixed inset-y-0 z-50 flex flex-col shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        right:
+          "right-0 border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
+        left: "left-0 border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+      },
+      size: {
+        sm: "w-80",
+        default: "w-100",
+        lg: "w-128",
+        xl: "w-160",
+        full: "w-full",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+      size: "default",
+    },
+  },
+);
+
+/* -------------------------------- Drawer --------------------------------- */
+
+/**
+ * A slide-in side panel for contextual content like navigation, settings, or detail views.
+ *
+ * @example
+ * ```tsx
+ * <Drawer open={open} onOpenChange={setOpen} side="right">
+ *   <DrawerContent>
+ *     <DrawerHeader><DrawerTitle>Panel</DrawerTitle></DrawerHeader>
+ *     <DrawerBody>Content</DrawerBody>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+interface DrawerProps {
+  /** Compound component children (DrawerContent, DrawerTrigger, etc.) */
+  children: React.ReactNode;
+  /** Whether the drawer is open. */
+  open: boolean;
+  /** Callback fired when the drawer should open or close. */
+  onOpenChange: (open: boolean) => void;
+  /** Which edge of the viewport the drawer slides in from. */
+  side?: "left" | "right";
+}
+
+function Drawer({ children, open, onOpenChange, side = "right" }: DrawerProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const [hasNav, setHasNav] = useState(false);
+
+  return (
+    <DrawerContext.Provider
+      value={{ open, onOpenChange, side, titleId, descriptionId, hasNav, setHasNav }}
+    >
+      {children}
+    </DrawerContext.Provider>
+  );
+}
+
+/* ------------------------------ DrawerTrigger ----------------------------- */
+
+function DrawerTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<"button">) {
+  const { onOpenChange } = useDrawerContext();
+
+  return (
+    <button
+      type="button"
+      data-slot="drawer-trigger"
+      className={className}
+      onClick={(e) => {
+        onOpenChange(true);
+        onClick?.(e);
+      }}
+      {...props}
+    />
+  );
+}
+
+/* ------------------------------- DrawerPortal ----------------------------- */
+
+function DrawerPortal({ children }: { children: React.ReactNode }) {
+  return createPortal(children, document.body);
+}
+
+/* ----------------------------- DrawerBackdrop ----------------------------- */
+
+function DrawerBackdrop({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { onOpenChange } = useDrawerContext();
+
+  return (
+    <div
+      data-slot="drawer-backdrop"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+        className,
+      )}
+      data-state="open"
+      onClick={() => onOpenChange(false)}
+      {...props}
+    />
+  );
+}
+
+/* ----------------------------- DrawerContent ------------------------------ */
+
+interface DrawerContentProps
+  extends Omit<React.ComponentProps<"div">, "size"> {
+  /** Width preset for the drawer panel. */
+  size?: "sm" | "default" | "lg" | "xl" | "full";
+  /** Whether to lock body scroll when the drawer is open. */
+  scrollLock?: boolean;
+}
+
+function DrawerContent({
+  className,
+  children,
+  size = "default",
+  scrollLock: scrollLockProp = true,
+  ...props
+}: DrawerContentProps) {
+  const { open, onOpenChange, side, titleId, descriptionId, hasNav } =
+    useDrawerContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleFocusTrap = useFocusTrap(contentRef, open);
+  useScrollLock(open && scrollLockProp);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onOpenChange]);
+
+  if (!open) return null;
+
+  return (
+    <DrawerPortal>
+      <DrawerBackdrop />
+      <div
+        ref={contentRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+        data-slot="drawer-content"
+        data-state="open"
+        className={cn(drawerContentVariants({ side, size }), hasNav && "flex-row", className)}
+        onKeyDown={handleFocusTrap}
+        {...props}
+      >
+        {children}
+      </div>
+    </DrawerPortal>
+  );
+}
+
+/* -------------------------------- Layout --------------------------------- */
+
+function DrawerHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("flex flex-col gap-1.5 border-b px-6 py-4 shrink-0", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerBody({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-body"
+      className={cn("flex-1 overflow-y-auto px-6 py-4", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn(
+        "flex items-center gap-2 border-t px-6 py-4 shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* ------------------------------- Title/Desc ------------------------------ */
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<"h2">) {
+  const { titleId } = useDrawerContext();
+
+  return (
+    <h2
+      id={titleId}
+      data-slot="drawer-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  const { descriptionId } = useDrawerContext();
+
+  return (
+    <p
+      id={descriptionId}
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+/* -------------------------------- Close ---------------------------------- */
+
+function DrawerClose({
+  className,
+  children,
+  onClick,
+  ...props
+}: React.ComponentProps<"button">) {
+  const { onOpenChange } = useDrawerContext();
+
+  return (
+    <button
+      type="button"
+      data-slot="drawer-close"
+      className={cn(buttonVariants({ variant: "ghost", size: "sm" }), className)}
+      onClick={(e) => {
+        onOpenChange(false);
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {children ?? <X className="h-4 w-4" />}
+    </button>
+  );
+}
+
+/* --------------------------------- Nav ----------------------------------- */
+
+/**
+ * A vertical icon rail for switching between views inside a Drawer.
+ * Provides controlled navigation state to DrawerNavItem children.
+ *
+ * @example
+ * ```tsx
+ * <DrawerNav value={activeView} onValueChange={setActiveView}>
+ *   <DrawerNavItem value="notes" icon={<FileText />} label="Notes" />
+ *   <DrawerNavItem value="bookmarks" icon={<Bookmark />} label="Bookmarks" />
+ * </DrawerNav>
+ * ```
+ */
+interface DrawerNavProps extends React.ComponentProps<"nav"> {
+  /** The value of the currently active nav item. */
+  value: string;
+  /** Callback fired when the active nav item changes. */
+  onValueChange: (value: string) => void;
+}
+
+function DrawerNav({
+  value,
+  onValueChange,
+  className,
+  children,
+  ...props
+}: DrawerNavProps) {
+  const { setHasNav } = useDrawerContext();
+  const navRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    setHasNav(true);
+    return () => setHasNav(false);
+  }, [setHasNav]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) return;
+
+    const nav = navRef.current;
+    if (!nav) return;
+
+    const items = Array.from(
+      nav.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([disabled])'),
+    );
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    if (current === -1) return;
+
+    e.preventDefault();
+    let next: number;
+    switch (e.key) {
+      case "ArrowDown":
+        next = (current + 1) % items.length;
+        break;
+      case "ArrowUp":
+        next = (current - 1 + items.length) % items.length;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    items[next].focus();
+  };
+
+  return (
+    <DrawerNavContext.Provider value={{ value, onValueChange }}>
+      <nav
+        ref={navRef}
+        role="tablist"
+        aria-orientation="vertical"
+        data-slot="drawer-nav"
+        className={cn(
+          "flex shrink-0 flex-col items-center gap-1 border-r bg-muted/30 px-1.5 py-2",
+          className,
+        )}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        {children}
+      </nav>
+    </DrawerNavContext.Provider>
+  );
+}
+
+/* ------------------------------ DrawerNavItem ----------------------------- */
+
+/**
+ * An icon button inside a DrawerNav rail. Renders a tooltip on hover.
+ */
+interface DrawerNavItemProps
+  extends Omit<React.ComponentProps<"button">, "value"> {
+  /** Unique value identifying this view. Must match a DrawerViewport's conditional content. */
+  value: string;
+  /** Icon element to render (e.g., `<FileText />`). */
+  icon: React.ReactNode;
+  /** Accessible label shown in the tooltip. */
+  label: string;
+}
+
+function DrawerNavItem({
+  value,
+  icon,
+  label,
+  className,
+  ...props
+}: DrawerNavItemProps) {
+  const { value: activeValue, onValueChange } = useDrawerNavContext();
+  const { side } = useDrawerContext();
+  const isActive = activeValue === value;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <button
+          role="tab"
+          type="button"
+          aria-selected={isActive}
+          aria-label={label}
+          data-slot="drawer-nav-item"
+          {...(isActive ? { "data-active": "" } : {})}
+          className={cn(
+            "relative flex cursor-pointer items-center justify-center rounded-md size-9 transition-colors",
+            "text-muted-foreground hover:text-foreground hover:bg-accent",
+            isActive && "text-foreground bg-accent/50",
+            className,
+          )}
+          onClick={() => onValueChange(value)}
+          {...props}
+        >
+          {isActive && (
+            <span
+              aria-hidden="true"
+              className={cn(
+                "absolute top-1 bottom-1 w-0.5 rounded-full bg-primary",
+                side === "left" ? "right-0 -mr-1.5" : "left-0 -ml-1.5",
+              )}
+            />
+          )}
+          {icon}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/* ----------------------------- DrawerViewport ----------------------------- */
+
+/**
+ * Content panel paired with a DrawerNav rail. Wraps header/body/footer in the
+ * remaining space beside the icon rail.
+ */
+function DrawerViewport({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="tabpanel"
+      data-slot="drawer-viewport"
+      className={cn("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className)}
+      {...props}
+    />
+  );
+}
+
+/* -------------------------------- Exports -------------------------------- */
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  DrawerNav,
+  DrawerNavItem,
+  DrawerViewport,
+  drawerContentVariants,
+};

package/src/ui/index.ts

@@ -18,6 +18,23 @@ export {
   AlertDialogCancel,
 } from "./alert-dialog";
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  DrawerNav,
+  DrawerNavItem,
+  DrawerViewport,
+  drawerContentVariants,
+} from "./drawer";
 export {
   Card,
   CardHeader,
@@ -42,3 +59,5 @@ export {
 } from "./table";
 export { Skeleton } from "./skeleton";
 export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
+export { RichTextEditor } from "./rich-text-editor";
+export type { RichTextEditorProps, RichTextEditorVariant } from "./rich-text-editor";