Establish NODE.DC design system baseline

2026-07-10 02:34:36 +03:00
commit 73629d68c3
63 changed files with 6701 additions and 0 deletions
@@ -0,0 +1,117 @@
+const focusableSelector = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(",");
+
+export interface ModalControllerOptions {
+  overlay: HTMLElement;
+  dialog: HTMLElement;
+  closeControls?: Iterable<HTMLElement>;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  lockBodyScroll?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface ModalController {
+  open: () => void;
+  close: () => void;
+  isOpen: () => boolean;
+  destroy: () => void;
+}
+
+export function createModalController({
+  overlay,
+  dialog,
+  closeControls = [],
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  lockBodyScroll = true,
+  onOpenChange,
+}: ModalControllerOptions): ModalController {
+  let openState = false;
+  let previousFocus: HTMLElement | null = null;
+  let previousOverflow = "";
+  const controls = Array.from(closeControls);
+
+  overlay.classList.add("nodedc-overlay", "nodedc-ui-root");
+  dialog.classList.add("nodedc-window");
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  dialog.tabIndex = -1;
+  overlay.hidden = true;
+
+  const focusFirst = () => {
+    const first = dialog.querySelector<HTMLElement>(focusableSelector);
+    (first ?? dialog).focus();
+  };
+
+  const open = () => {
+    if (openState) return;
+    openState = true;
+    previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    previousOverflow = document.body.style.overflow;
+    if (lockBodyScroll) document.body.style.overflow = "hidden";
+    overlay.hidden = false;
+    requestAnimationFrame(focusFirst);
+    onOpenChange?.(true);
+  };
+
+  const close = () => {
+    if (!openState) return;
+    openState = false;
+    overlay.hidden = true;
+    if (lockBodyScroll) document.body.style.overflow = previousOverflow;
+    previousFocus?.focus();
+    onOpenChange?.(false);
+  };
+
+  const handleOverlayPointerDown = (event: PointerEvent) => {
+    if (closeOnBackdrop && event.target === overlay) close();
+  };
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!openState) return;
+    if (event.key === "Escape" && closeOnEscape) {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(focusableSelector));
+    if (focusable.length === 0) {
+      event.preventDefault();
+      dialog.focus();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  overlay.addEventListener("pointerdown", handleOverlayPointerDown);
+  document.addEventListener("keydown", handleKeyDown);
+  controls.forEach((control) => control.addEventListener("click", close));
+
+  return {
+    open,
+    close,
+    isOpen: () => openState,
+    destroy: () => {
+      close();
+      overlay.removeEventListener("pointerdown", handleOverlayPointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+      controls.forEach((control) => control.removeEventListener("click", close));
+    },
+  };
+}
+