@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/components/nm-modal/nm-modal.tsx

@@ -0,0 +1,497 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_MODAL_ACTION,
+  NM_MODAL_CLASSES,
+  NM_MODAL_FOOTER,
+  NM_MODAL_SCROLL_IDLE_MS,
+  NM_MODAL_SIZE,
+  NM_MODAL_TITLE,
+  type NmModalActionTone,
+  type NmModalFooter,
+  type NmModalSize,
+  type NmModalTitleSize,
+} from '../../config/nm-modal.ts';
+import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
+import { NM_ICON_BUTTON_TONES } from '../../config/nm-icon-button.ts';
+import { nmModalSavedLabel } from '../../content/nm-modal.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import './nm-modal.css';
+import { useNordmanUiLocale } from '../../lib/nordman-ui-locale.ts';
+
+const logger = createLogger('interface-nm-modal');
+const SAVE_CONFIRMED_MS = 1200;
+const SAVE_SPINNER_MS = 400;
+
+type SavePhase = 'idle' | 'saving' | 'saved';
+
+const SavePhaseContext = createContext<{
+  phase: SavePhase;
+  track: <T>(work: Promise<T>) => Promise<T>;
+}>({
+  phase: 'idle',
+  track: async (work) => work,
+});
+
+const openTracks: Array<<T>(work: Promise<T>) => Promise<T>> = [];
+
+const SaveDirtyContext = createContext(false);
+const dirtyReporters: Array<(dirty: boolean) => void> = [];
+const dirtyWatchers = new Map<number, boolean>();
+let dirtyWatcherId = 0;
+
+function reportedDirty(): boolean {
+  return [...dirtyWatchers.values()].some((changed) => changed);
+}
+
+function publishDirty(): void {
+  const dirty = reportedDirty();
+  dirtyReporters[dirtyReporters.length - 1]?.(dirty);
+}
+
+export function useReportSaveDirty(dirty: boolean, enabled = true): void {
+  const watcher = useRef(0);
+  if (watcher.current === 0) {
+    dirtyWatcherId += 1;
+    watcher.current = dirtyWatcherId;
+  }
+  useLayoutEffect(() => {
+    const id = watcher.current;
+    if (!enabled) {
+      dirtyWatchers.delete(id);
+      publishDirty();
+      return () => {
+        dirtyWatchers.delete(id);
+        publishDirty();
+      };
+    }
+    dirtyWatchers.set(id, dirty);
+    publishDirty();
+    return () => {
+      dirtyWatchers.delete(id);
+      publishDirty();
+    };
+  }, [dirty, enabled]);
+}
+
+export function useTrackSave(): <T>(work: Promise<T>) => Promise<T> {
+  const local = useContext(SavePhaseContext).track;
+  return (work) => (openTracks[openTracks.length - 1] ?? local)(work);
+}
+
+function SavePhaseProvider(props: { children: ReactNode }): ReactNode {
+  const [phase, setPhase] = useState<SavePhase>('idle');
+  const [dirty, setDirty] = useState(false);
+  const reportDirty = useCallback((next: boolean) => {
+    setDirty((current) => (current === next ? current : next));
+  }, []);
+  const timer = useRef<number | null>(null);
+
+  const clearTimer = () => {
+    if (timer.current != null) {
+      window.clearTimeout(timer.current);
+      timer.current = null;
+    }
+  };
+
+  useEffect(() => clearTimer, []);
+
+  const track = useCallback(<T,>(work: Promise<T>) => {
+    clearTimer();
+    setPhase('saving');
+    const started = Date.now();
+    logger.debug('save', 'start');
+    return work.then(
+      (value) =>
+        new Promise<T>((resolve) => {
+          const remaining = Math.max(0, SAVE_SPINNER_MS - (Date.now() - started));
+          timer.current = window.setTimeout(() => {
+            logger.info('save', 'confirmed');
+            setPhase('saved');
+            timer.current = window.setTimeout(() => {
+              setPhase('idle');
+              timer.current = null;
+              resolve(value);
+            }, SAVE_CONFIRMED_MS);
+          }, remaining);
+        }),
+      (error: unknown) => {
+        logger.warn('save', 'failed', { error });
+        setPhase('idle');
+        throw error;
+      },
+    );
+  }, []);
+
+  useEffect(() => {
+    openTracks.push(track);
+    return () => {
+      const index = openTracks.lastIndexOf(track);
+      if (index >= 0) {
+        openTracks.splice(index, 1);
+      }
+    };
+  }, [track]);
+
+  useLayoutEffect(() => {
+    dirtyReporters.push(reportDirty);
+    reportDirty(reportedDirty());
+    return () => {
+      const index = dirtyReporters.lastIndexOf(reportDirty);
+      if (index >= 0) {
+        dirtyReporters.splice(index, 1);
+      }
+    };
+  }, [reportDirty]);
+
+  return (
+    <SavePhaseContext.Provider value={{ phase, track }}>
+      <SaveDirtyContext.Provider value={dirty}>{props.children}</SaveDirtyContext.Provider>
+    </SavePhaseContext.Provider>
+  );
+}
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export type NmModalProps = {
+  open: boolean;
+  title: string;
+  titleSize?: NmModalTitleSize;
+  size?: NmModalSize;
+  footer?: NmModalFooter;
+  paneTitle?: ReactNode;
+  titleEnd?: ReactNode;
+  leading?: ReactNode;
+  onClose: () => void;
+  children: ReactNode;
+  menu?: ReactNode;
+  actions?: ReactNode;
+  testId?: string;
+};
+
+function focusableIn(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((node) => node.tabIndex !== -1);
+}
+
+export function NmModal(props: NmModalProps): ReactNode {
+  const { open, onClose, title } = props;
+  const titleId = useId();
+  const panelRef = useRef<HTMLDivElement>(null);
+  const restoreFocus = useRef<HTMLElement | null>(null);
+  const size = props.size ?? (props.menu != null ? NM_MODAL_SIZE.menu : NM_MODAL_SIZE.simple);
+  const footer = props.footer ?? NM_MODAL_FOOTER.modal;
+  const titleSize =
+    props.titleSize ??
+    (size === NM_MODAL_SIZE.simple ? NM_MODAL_TITLE.section : NM_MODAL_TITLE.page);
+  const panelClass = [
+    NM_MODAL_CLASSES.root,
+    size === NM_MODAL_SIZE.simple ? NM_MODAL_CLASSES.simple : '',
+    size === NM_MODAL_SIZE.menu || size === NM_MODAL_SIZE.wide ? NM_MODAL_CLASSES.menu : '',
+    size === NM_MODAL_SIZE.wide ? NM_MODAL_CLASSES.wide : '',
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+  const titleClass = [
+    NM_MODAL_CLASSES.title,
+    titleSize === NM_MODAL_TITLE.page ? NM_MODAL_CLASSES.titlePage : '',
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+  const footerClass = [
+    NM_MODAL_CLASSES.footer,
+    footer === NM_MODAL_FOOTER.pane ? NM_MODAL_CLASSES.footerPane : '',
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+
+  useEffect(() => {
+    logger.debug('presence', title, { open, size, footer });
+  }, [open, title, size, footer]);
+
+  useEffect(() => {
+    const root = panelRef.current;
+    if (!open || root == null) {
+      return;
+    }
+    const idle = new Map<HTMLElement, number>();
+    const bound = new Set<HTMLElement>();
+    const onScroll = (event: Event) => {
+      const node = event.currentTarget;
+      if (!(node instanceof HTMLElement)) {
+        return;
+      }
+      node.dataset.scrolling = 'true';
+      const pending = idle.get(node);
+      if (pending != null) {
+        window.clearTimeout(pending);
+      }
+      idle.set(
+        node,
+        window.setTimeout(() => {
+          delete node.dataset.scrolling;
+          idle.delete(node);
+        }, NM_MODAL_SCROLL_IDLE_MS),
+      );
+    };
+    const bind = () => {
+      const nodes = [
+        root,
+        ...root.querySelectorAll<HTMLElement>(
+          '.nm-modal__layout, .nm-modal__menu, .nm-modal__body, .nm-modal__list, .nm-modal__groups, .nm-field__menu',
+        ),
+      ];
+      for (const node of nodes) {
+        if (bound.has(node)) {
+          continue;
+        }
+        node.addEventListener('scroll', onScroll);
+        bound.add(node);
+      }
+    };
+    bind();
+    const observer = new MutationObserver(bind);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      for (const node of bound) {
+        node.removeEventListener('scroll', onScroll);
+        delete node.dataset.scrolling;
+      }
+      for (const timer of idle.values()) {
+        window.clearTimeout(timer);
+      }
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== 'Escape') {
+        return;
+      }
+      event.preventDefault();
+      onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  useLayoutEffect(() => {
+    if (!props.open) {
+      return;
+    }
+    const panel = panelRef.current;
+    if (panel == null) {
+      return;
+    }
+    const active = document.activeElement;
+    restoreFocus.current = active instanceof HTMLElement ? active : null;
+    const first = focusableIn(panel)[0];
+    (first ?? panel).focus({ preventScroll: true });
+    return () => {
+      restoreFocus.current?.focus({ preventScroll: true });
+      restoreFocus.current = null;
+    };
+  }, [props.open]);
+
+  const hasPaneTitle = props.paneTitle != null;
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!props.open || panel == null) {
+      return;
+    }
+    panel.scrollTop = 0;
+    for (const node of panel.querySelectorAll<HTMLElement>('.nm-modal__layout, .nm-modal__body')) {
+      node.scrollTop = 0;
+    }
+  }, [props.open, size, footer, hasPaneTitle]);
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Tab') {
+      return;
+    }
+    const panel = panelRef.current;
+    if (panel == null) {
+      return;
+    }
+    const items = focusableIn(panel);
+    if (items.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (first == null || last == null) {
+      event.preventDefault();
+      return;
+    }
+    const active = document.activeElement;
+    if (event.shiftKey && (active === first || active === panel)) {
+      event.preventDefault();
+      last.focus({ preventScroll: true });
+      return;
+    }
+    if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus({ preventScroll: true });
+    }
+  };
+
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  const showFooter = props.actions != null || props.leading != null;
+  const body = (
+    <>
+      {props.paneTitle != null ? (
+        <div className={NM_MODAL_CLASSES.paneTitle}>{props.paneTitle}</div>
+      ) : null}
+      <div className={NM_MODAL_CLASSES.body}>{props.children}</div>
+    </>
+  );
+
+  return createPortal(
+    props.open ? (
+      <SavePhaseProvider>
+        <div className={NM_MODAL_CLASSES.layer}>
+          <div
+            className={NM_MODAL_CLASSES.backdrop}
+            aria-hidden="true"
+            onMouseDown={props.onClose}
+          />
+          <div
+            ref={panelRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            tabIndex={-1}
+            className={panelClass}
+            data-testid={props.testId}
+            data-size={size}
+            data-footer={footer}
+            onKeyDown={onKeyDown}
+            onMouseDown={(event) => event.stopPropagation()}
+          >
+            <div className={NM_MODAL_CLASSES.titleBar}>
+              <h2 id={titleId} className={titleClass}>
+                {props.title}
+              </h2>
+              {props.titleEnd}
+            </div>
+            {props.menu != null ? (
+              <div className={NM_MODAL_CLASSES.layout}>
+                <div className={NM_MODAL_CLASSES.nav}>{props.menu}</div>
+                <div className={NM_MODAL_CLASSES.main}>{body}</div>
+              </div>
+            ) : (
+              body
+            )}
+            {showFooter ? (
+              <div className={footerClass}>
+                {footer === NM_MODAL_FOOTER.pane ? props.leading : null}
+                <div className={NM_MODAL_CLASSES.actionsEnd}>{props.actions}</div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </SavePhaseProvider>
+    ) : null,
+    document.body,
+  );
+}
+
+export function NmModalAction(props: {
+  label?: string;
+  accessibleName?: string;
+  icon: NmIconId;
+  tone?: NmModalActionTone;
+  type?: 'button' | 'submit';
+  form?: string;
+  disabled?: boolean;
+  requireChange?: boolean;
+  testId?: string;
+  onClick?: () => void;
+}): ReactNode {
+  useNordmanUiLocale();
+
+  const tone = props.tone ?? NM_MODAL_ACTION.quiet;
+  const phase = useContext(SavePhaseContext).phase;
+  const dirty = useContext(SaveDirtyContext);
+  const confirmsSave = props.icon === 'check' && tone === NM_MODAL_ACTION.primary;
+  const saving = confirmsSave && phase === 'saving';
+  const saved = confirmsSave && phase === 'saved';
+  const unchanged = Boolean(props.requireChange) && !dirty && !saved;
+  const icon = saving ? 'loader' : props.icon;
+  const label = saved ? nmModalSavedLabel() : props.label;
+  const iconOnly = label == null || label.length === 0;
+  const className = [
+    NM_MODAL_CLASSES.action,
+    iconOnly ? NM_MODAL_CLASSES.actionIcon : '',
+    tone === NM_MODAL_ACTION.primary
+      ? NM_MODAL_CLASSES.actionPrimary
+      : NM_MODAL_CLASSES.actionQuiet,
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+  let accessibleLabel: string | undefined;
+  if (iconOnly) {
+    accessibleLabel = props.accessibleName ?? props.icon;
+    return (
+      <NordmanIconButton
+        glyph={icon}
+        label={accessibleLabel}
+        tone={
+          tone === NM_MODAL_ACTION.primary
+            ? NM_ICON_BUTTON_TONES.invert
+            : NM_ICON_BUTTON_TONES.panel
+        }
+        type={props.type ?? 'button'}
+        form={props.form}
+        disabled={props.disabled || saving || unchanged}
+        data-save={confirmsSave ? phase : undefined}
+        testId={props.testId}
+        busy={saving || undefined}
+        className={NM_MODAL_CLASSES.action}
+        onClick={props.onClick}
+      />
+    );
+  }
+  if (saved) {
+    accessibleLabel = label;
+  }
+  return (
+    <button
+      className={className}
+      type={props.type ?? 'button'}
+      form={props.form}
+      disabled={props.disabled || saving || unchanged}
+      data-save={confirmsSave ? phase : undefined}
+      data-testid={props.testId}
+      aria-busy={saving || undefined}
+      aria-label={accessibleLabel}
+      onClick={props.onClick}
+    >
+      <NmIcon id={icon} />
+      {iconOnly ? null : label}
+    </button>
+  );
+}
+
+export { NM_MODAL_ACTION, NM_MODAL_CLASSES, NM_MODAL_FOOTER, NM_MODAL_SIZE, NM_MODAL_TITLE };

package/registry/ui/components/nm-native-select/nm-native-select.css

@@ -0,0 +1,47 @@
+  .nm-native-select {
+    position: relative;
+    width: 100%;
+  }
+
+  .nm-native-select__control {
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--nm-field-h);
+    padding: 0 calc(var(--control-px) + var(--nm-icon-button) + var(--nm-space-8)) 0 var(--control-px);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-r);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    color-scheme: inherit;
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    appearance: none;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .nm-native-select__control:hover:not(:disabled) {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-native-select__control:focus-visible {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-native-select__control:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-native-select__control[aria-invalid='true'] {
+    border-color: var(--nm-destructive);
+  }
+
+  .nm-native-select__icon {
+    position: absolute;
+    top: 50%;
+    right: var(--control-px);
+    color: var(--nm-fg-subtle);
+    pointer-events: none;
+    transform: translateY(-50%);
+  }

package/registry/ui/components/nm-native-select/nm-native-select.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+/** The browser's own select, styled by NIF. Use it where the platform picker is the right control, such as on a phone. */
+export function NmNativeSelect({ className, children, ...props }: ComponentProps<'select'>) {
+  return (
+    <div className="nm-native-select">
+      <select data-slot="native-select" className={nmClass('nm-native-select__control', className)} {...props}>
+        {children}
+      </select>
+      <NmIcon id="chevron" className="nm-native-select__icon" />
+    </div>
+  );
+}
+
+export function NmNativeSelectOption(props: ComponentProps<'option'>) {
+  return <option data-slot="native-select-option" {...props} />;
+}
+
+export function NmNativeSelectOptGroup(props: ComponentProps<'optgroup'>) {
+  return <optgroup data-slot="native-select-optgroup" {...props} />;
+}

package/registry/ui/components/nm-panel/nm-panel.css

@@ -0,0 +1,73 @@
+  .nm-panel-region {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+  }
+
+  .nm-panel-region[data-variant='inset'] {
+    background: var(--nm-inset);
+  }
+
+  .nm-panel-region[data-variant='plain'] {
+    border-radius: 0;
+    background: var(--nm-canvas);
+  }
+
+  .nm-panel-region__header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-12) var(--nm-space-16);
+  }
+
+  .nm-panel-region__title {
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-semibold);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-panel-region__description {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-panel-region__actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-4);
+    margin-inline-start: auto;
+  }
+
+  .nm-panel-region__content {
+    flex: 1;
+    min-height: 0;
+    padding: var(--nm-space-16);
+    overflow: auto;
+  }
+
+  .nm-panel-region__header + .nm-panel-region__content {
+    padding-top: 0;
+  }
+
+  .nm-panel-region__footer {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-12) var(--nm-space-16);
+  }

package/registry/ui/components/nm-panel/nm-panel.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export const NM_PANEL_VARIANTS = ['default', 'inset', 'plain'] as const;
+export type NmPanelVariant = (typeof NM_PANEL_VARIANTS)[number];
+
+/** A region of the app, such as an inspector or a side panel: a header, content that scrolls, and a footer. */
+export function NmPanel({ className, variant = 'default', ...props }: ComponentProps<'section'> & { variant?: NmPanelVariant }) {
+  return <section data-slot="panel" data-variant={variant} className={nmClass('nm-panel-region', className)} {...props} />;
+}
+
+export function NmPanelHeader({ className, ...props }: ComponentProps<'header'>) {
+  return <header data-slot="panel-header" className={nmClass('nm-panel-region__header', className)} {...props} />;
+}
+
+export function NmPanelTitle({ className, ...props }: ComponentProps<'h2'>) {
+  return <h2 data-slot="panel-title" className={nmClass('nm-panel-region__title', className)} {...props} />;
+}
+
+export function NmPanelDescription({ className, ...props }: ComponentProps<'p'>) {
+  return <p data-slot="panel-description" className={nmClass('nm-panel-region__description', className)} {...props} />;
+}
+
+/** Buttons at the end of the header. */
+export function NmPanelActions({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="panel-actions" className={nmClass('nm-panel-region__actions', className)} {...props} />;
+}
+
+export function NmPanelContent({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="panel-content" className={nmClass('nm-panel-region__content', className)} {...props} />;
+}
+
+export function NmPanelFooter({ className, ...props }: ComponentProps<'footer'>) {
+  return <footer data-slot="panel-footer" className={nmClass('nm-panel-region__footer', className)} {...props} />;
+}

package/registry/ui/components/nm-panel-bar/nm-panel-bar.css

@@ -0,0 +1,20 @@
+  .nm-panel-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    padding: var(--nm-space-12) var(--nm-space-24);
+    border-bottom: var(--nm-rule) solid var(--nm-raised);
+    background: var(--nm-canvas);
+  }
+
+  .nm-panel-bar--icons {
+    padding: var(--nm-space-12);
+  }
+
+  .nm-panel-bar__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+