@nordmanai/nif 0.1.0 → 0.2.1

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

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import {
+  NmSegmented,
+  type NmSegmentedItem,
+} from '../nm-segmented/nm-segmented.tsx';
+import type { NmSegmentedTone } from '../../config/nm-segmented.ts';
+import { NM_PANEL_BAR_CLASSES, NM_PANEL_BAR_LAYOUT } from '../../config/nm-panel-bar.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-panel-bar');
+
+export type NmPanelBarProps = {
+  label: string;
+  testId?: string;
+  items: readonly NmSegmentedItem[];
+  active: string;
+  toggleLabel: string;
+  toggleTestId?: string;
+  tone?: NmSegmentedTone;
+  layout?: (typeof NM_PANEL_BAR_LAYOUT)[keyof typeof NM_PANEL_BAR_LAYOUT];
+  onSelect: (id: string) => void;
+  trailing?: ReactNode;
+};
+
+export function NmPanelBar(props: NmPanelBarProps): ReactNode {
+  logger.debug('render', props.active, { items: props.items.length });
+  return (
+    <header
+      className={
+        props.layout === NM_PANEL_BAR_LAYOUT.icons
+          ? `${NM_PANEL_BAR_CLASSES.root} ${NM_PANEL_BAR_CLASSES.icons}`
+          : NM_PANEL_BAR_CLASSES.root
+      }
+      aria-label={props.label}
+      data-testid={props.testId}
+    >
+      <NmSegmented
+        label={props.toggleLabel}
+        active={props.active}
+        testId={props.toggleTestId}
+        tone={props.tone}
+        items={props.items}
+        onSelect={props.onSelect}
+      />
+      {props.trailing ? <div className={NM_PANEL_BAR_CLASSES.actions}>{props.trailing}</div> : null}
+    </header>
+  );
+}

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

@@ -0,0 +1,43 @@
+  .nm-popover__positioner {
+    z-index: var(--nm-menu-z);
+  }
+
+  .nm-popover {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    width: var(--nm-width-popup);
+    padding: var(--nm-panel-pad);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-menu-radius);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    outline: none;
+    transition: opacity 0.12s;
+  }
+
+  .nm-popover[data-starting-style],
+  .nm-popover[data-ending-style] {
+    opacity: 0;
+  }
+
+  .nm-popover__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+  }
+
+  .nm-popover__title {
+    margin: 0;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-popover__description {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }

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

@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'react';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export function NmPopover(props: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+export function NmPopoverTrigger(props: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+export function NmPopoverContent({
+  className,
+  align = 'center',
+  alignOffset = 0,
+  side = 'bottom',
+  sideOffset = 8,
+  ...props
+}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="nm-popover__positioner">
+        <PopoverPrimitive.Popup data-slot="popover-content" className={nmClass('nm-popover', className as string)} {...props} />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export function NmPopoverHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="popover-header" className={nmClass('nm-popover__header', className)} {...props} />;
+}
+
+export function NmPopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return <PopoverPrimitive.Title data-slot="popover-title" className={nmClass('nm-popover__title', className as string)} {...props} />;
+}
+
+export function NmPopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
+  return <PopoverPrimitive.Description data-slot="popover-description" className={nmClass('nm-popover__description', className as string)} {...props} />;
+}

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

@@ -0,0 +1,21 @@
+  .nm-progress {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .nm-progress__track {
+    position: relative;
+    flex: 1 0 100%;
+    height: var(--nm-space-4);
+    overflow: hidden;
+    border-radius: var(--toggle-r);
+    background: var(--nm-panel);
+  }
+
+  .nm-progress__indicator {
+    height: 100%;
+    border-radius: inherit;
+    background: var(--nm-fg);
+    transition: width 0.2s;
+  }

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

@@ -0,0 +1,14 @@
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** Base UI Progress, in the shadcn composition, styled by NIF tokens. */
+export function NmProgress({ className, children, value, ...props }: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root data-slot="progress" value={value} className={nmClass('nm-progress', className as string)} {...props}>
+      {children}
+      <ProgressPrimitive.Track data-slot="progress-track" className="nm-progress__track">
+        <ProgressPrimitive.Indicator data-slot="progress-indicator" className="nm-progress__indicator" />
+      </ProgressPrimitive.Track>
+    </ProgressPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,81 @@
+  .nm-prose {
+    box-sizing: border-box;
+    max-width: var(--nm-width-prose, 48rem);
+    margin: 0 auto;
+    padding: var(--nm-space-24);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    line-height: var(--nm-leading-relaxed);
+  }
+
+  .nm-prose > :first-child {
+    margin-top: 0;
+  }
+
+  .nm-prose :is(h1, h2, h3, h4) {
+    margin: var(--nm-space-24) 0 var(--nm-space-8);
+    font-weight: var(--nm-weight-semibold);
+    line-height: var(--nm-leading-tight);
+  }
+
+  .nm-prose h1 {
+    font-size: var(--nm-type-lede);
+  }
+
+  .nm-prose h2 {
+    font-size: calc(var(--nm-type-ui) * 1.25);
+  }
+
+  .nm-prose :is(h3, h4) {
+    font-size: var(--nm-type-ui);
+  }
+
+  .nm-prose :is(p, ul, ol, blockquote, pre, table) {
+    margin: 0 0 var(--nm-space-12);
+  }
+
+  .nm-prose :is(ul, ol) {
+    padding-inline-start: var(--nm-space-24);
+  }
+
+  .nm-prose li {
+    margin: var(--nm-space-4) 0;
+  }
+
+  .nm-prose blockquote {
+    padding-inline-start: var(--nm-space-12);
+    border-inline-start: var(--nm-space-2) solid var(--nm-line-strong);
+    color: var(--nm-fg-muted);
+  }
+
+  .nm-prose a {
+    color: var(--nm-fg);
+    text-decoration: underline;
+    text-underline-offset: var(--nm-space-2);
+  }
+
+  .nm-prose :not(pre) > code {
+    padding: var(--nm-space-2) var(--nm-space-6);
+    border-radius: var(--nm-radius-sm);
+    background: var(--nm-panel);
+    font-family: var(--nm-font-mono);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-prose hr {
+    margin: var(--nm-space-24) 0;
+    border: 0;
+    border-top: var(--nm-rule) solid var(--nm-divider);
+  }
+
+  .nm-prose table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .nm-prose :is(th, td) {
+    padding: var(--nm-space-8) var(--nm-space-12);
+    border-bottom: var(--nm-rule) solid var(--nm-line);
+    text-align: start;
+  }

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

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/**
+ * Rendered text: markdown, docs and long answers. Headings, paragraphs, lists, quotes, code, rules, links and
+ * tables take their type, space and colour from NIF tokens, so the plain elements inside it need no classes.
+ */
+export function NmProse({ className, ...props }: ComponentProps<'article'>) {
+  return <article data-slot="prose" className={nmClass('nm-prose', className)} {...props} />;
+}

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

@@ -0,0 +1,182 @@
+  .nm-questionnaire {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-16);
+    width: 100%;
+    max-width: var(--nm-width-form);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+  }
+
+  .nm-questionnaire--card {
+    padding: var(--nm-space-24);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+  }
+
+  .nm-questionnaire__progress {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-questionnaire__progress-label {
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-questionnaire__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .nm-questionnaire__item[hidden] {
+    display: none;
+  }
+
+  .nm-questionnaire__title {
+    padding: 0;
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-snug);
+  }
+
+  .nm-questionnaire__description {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    line-height: var(--nm-leading-normal);
+  }
+
+  .nm-questionnaire__choices {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-questionnaire__choice {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nm-space-12);
+    box-sizing: border-box;
+    padding: var(--nm-space-12);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .nm-questionnaire__choice:hover {
+    background: var(--nm-inset);
+  }
+
+  .nm-questionnaire__choice:has(input:checked) {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-questionnaire__choice:has(input:focus-visible) {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-questionnaire__input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .nm-questionnaire__mark {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    margin-top: var(--nm-space-2);
+    border: var(--nm-rule) solid var(--nm-stroke);
+    border-radius: 50%;
+    color: var(--nm-canvas);
+  }
+
+  .nm-questionnaire__choice[data-multiple='true'] .nm-questionnaire__mark {
+    border-radius: var(--nm-radius-sm);
+  }
+
+  .nm-questionnaire__choice:has(input:checked) .nm-questionnaire__mark {
+    border-color: var(--nm-fg);
+    background: var(--nm-fg);
+  }
+
+  .nm-questionnaire__choice-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    min-width: 0;
+  }
+
+  .nm-questionnaire__choice-label {
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-questionnaire__choice-description {
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-questionnaire__key {
+    flex-shrink: 0;
+    min-width: var(--nm-icon-button);
+    padding: 0 var(--nm-space-4);
+    border-radius: var(--nm-radius-sm);
+    background: var(--nm-panel);
+    color: var(--nm-fg-subtle);
+    font-family: var(--nm-font-mono);
+    font-size: var(--nm-type-ui-sm);
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .nm-questionnaire__error {
+    margin: 0;
+    color: var(--nm-destructive);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-questionnaire__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-questionnaire__actions [data-push] {
+    margin-left: auto;
+  }
+
+  .nm-questionnaire__summary {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nm-questionnaire__summary li {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+  }
+
+  .nm-questionnaire__summary li > span:last-child {
+    color: var(--nm-fg-muted);
+  }

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

@@ -0,0 +1,221 @@
+import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import {
+  NM_QUESTIONNAIRE_CLASSES as C,
+  NM_QUESTIONNAIRE_COPY as COPY,
+  type NmQuestion,
+  type NmQuestionAnswer,
+  type NmQuestionnaireAnswers,
+  type NmQuestionnaireShortcuts,
+  type NmQuestionnaireVariant,
+} from '../../config/nm-questionnaire.ts';
+import { NmButton } from '../nm-button/nm-button.tsx';
+import { NmField } from '../nm-field/nm-field.tsx';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NmProgress } from '../nm-progress/nm-progress.tsx';
+
+export type NmQuestionnaireProps = {
+  questions: readonly NmQuestion[];
+  /** Answers so far. Pass them with `onChange` to control the form, or to resume one. */
+  answers?: NmQuestionnaireAnswers;
+  onChange?: (answers: NmQuestionnaireAnswers) => void;
+  onSubmit: (answers: NmQuestionnaireAnswers) => void;
+  /** The step to show first. */
+  defaultStep?: number;
+  shortcuts?: NmQuestionnaireShortcuts;
+  variant?: NmQuestionnaireVariant;
+  submitLabel?: string;
+  /** After submit the form shows what was answered. */
+  submitted?: boolean;
+};
+
+const EMPTY: NmQuestionAnswer = { values: [], text: '' };
+
+function answered(answer: NmQuestionAnswer | undefined): boolean {
+  return answer != null && (answer.values.length > 0 || answer.text.trim() !== '');
+}
+
+function shortcutKey(mode: NmQuestionnaireShortcuts, index: number): string | null {
+  if (mode === 'letters') {
+    return String.fromCharCode(97 + index);
+  }
+  if (mode === 'numbers') {
+    return String(index + 1);
+  }
+  return null;
+}
+
+export function NmQuestionnaire(props: NmQuestionnaireProps): ReactNode {
+  const { questions } = props;
+  const [inner, setInner] = useState<NmQuestionnaireAnswers>({});
+  const answers = props.answers ?? inner;
+  const [step, setStep] = useState(Math.min(props.defaultStep ?? 0, questions.length - 1));
+  const [error, setError] = useState<string | null>(null);
+  const rootRef = useRef<HTMLFormElement>(null);
+  const shortcuts = props.shortcuts ?? 'none';
+  const last = step === questions.length - 1;
+  const question = questions[step];
+
+  useEffect(() => {
+    rootRef.current?.querySelector<HTMLElement>(`[data-step="${step}"] input:checked, [data-step="${step}"] input`)?.focus({ preventScroll: true });
+  }, [step]);
+
+  function update(name: string, next: NmQuestionAnswer): void {
+    const merged = { ...answers, [name]: next };
+    setError(null);
+    setInner(merged);
+    props.onChange?.(merged);
+  }
+
+  function pick(q: NmQuestion, value: string): void {
+    const current = answers[q.name] ?? EMPTY;
+    if (q.multiple === true) {
+      const has = current.values.includes(value);
+      update(q.name, { ...current, values: has ? current.values.filter((v) => v !== value) : [...current.values, value] });
+      return;
+    }
+    update(q.name, { values: [value], text: '' });
+  }
+
+  function type(q: NmQuestion, text: string): void {
+    const current = answers[q.name] ?? EMPTY;
+    update(q.name, { values: q.multiple === true ? current.values : [], text });
+  }
+
+  function valid(q: NmQuestion): boolean {
+    return q.required !== true || answered(answers[q.name]);
+  }
+
+  function go(to: number): void {
+    setError(null);
+    setStep(to);
+  }
+
+  function next(): void {
+    if (!valid(question)) {
+      setError(COPY.required);
+      return;
+    }
+    go(step + 1);
+  }
+
+  function submit(): void {
+    const firstInvalid = questions.findIndex((q) => !valid(q));
+    if (firstInvalid !== -1) {
+      setStep(firstInvalid);
+      setError(COPY.required);
+      return;
+    }
+    props.onSubmit(answers);
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLFormElement>): void {
+    const target = event.target as HTMLElement;
+    if (shortcuts === 'none' || target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'text') {
+      return;
+    }
+    const index = question.choices.findIndex((_, i) => shortcutKey(shortcuts, i) === event.key.toLowerCase());
+    if (index !== -1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+      event.preventDefault();
+      pick(question, question.choices[index].value);
+    }
+  }
+
+  if (props.submitted === true) {
+    return (
+      <div className={`${C.root}${props.variant === 'plain' ? '' : ` ${C.card}`}`}>
+        <ul className={C.summary}>
+          {questions.map((q) => {
+            const a = answers[q.name];
+            const labels = (a?.values ?? []).map((v) => q.choices.find((c) => c.value === v)?.label ?? v);
+            if (a?.text) {
+              labels.push(a.text);
+            }
+            return (
+              <li key={q.name}>
+                <span>{q.title}</span>
+                <span>{labels.length > 0 ? labels.join(', ') : COPY.skipped}</span>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      ref={rootRef}
+      className={`${C.root}${props.variant === 'plain' ? '' : ` ${C.card}`}`}
+      onKeyDown={onKeyDown}
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (last) {
+          submit();
+        } else {
+          next();
+        }
+      }}
+    >
+      <div className={C.progress}>
+        <span className={C.progressLabel}>{COPY.progress(step, questions.length)}</span>
+        <NmProgress value={step + 1} max={questions.length} aria-label={COPY.progress(step, questions.length)} />
+      </div>
+      {questions.map((q, index) => {
+        const answer = answers[q.name] ?? EMPTY;
+        const active = index === step;
+        const describedBy = `${q.name}-description`;
+        return (
+          <fieldset key={q.name} className={C.item} hidden={!active} data-step={index} aria-describedby={describedBy} aria-invalid={active && error != null ? true : undefined}>
+            <legend className={C.title}>{q.title}</legend>
+            {q.description ? <p id={describedBy} className={C.description}>{q.description}</p> : null}
+            <div className={C.choices}>
+              {q.choices.map((choice, i) => {
+                const key = shortcutKey(shortcuts, i);
+                const checked = answer.values.includes(choice.value);
+                return (
+                  <label key={choice.value} className={C.choice} data-multiple={q.multiple === true ? 'true' : undefined}>
+                    <input
+                      className={C.input}
+                      type={q.multiple === true ? 'checkbox' : 'radio'}
+                      name={q.name}
+                      value={choice.value}
+                      checked={checked}
+                      onChange={() => pick(q, choice.value)}
+                    />
+                    <span className={C.mark} aria-hidden="true">{checked ? <NmIcon id="check" /> : null}</span>
+                    <span className={C.choiceBody}>
+                      <span className={C.choiceLabel}>{choice.label}</span>
+                      {choice.description ? <span className={C.choiceDescription}>{choice.description}</span> : null}
+                    </span>
+                    {key ? <kbd className={C.key} aria-hidden="true">{key}</kbd> : null}
+                  </label>
+                );
+              })}
+              {q.input ? (
+                <NmField
+                  label={q.input.label}
+                  caption={q.input.label}
+                  layout="stack"
+                  placeholder={q.input.placeholder}
+                  value={answer.text}
+                  onChange={(text) => type(q, text)}
+                />
+              ) : null}
+            </div>
+            {active && error != null ? <p className={C.error} role="alert">{error}</p> : null}
+          </fieldset>
+        );
+      })}
+      <div className={C.actions}>
+        {step > 0 ? <NmButton label={COPY.previous} tone="outline" size="compact" onClick={() => go(step - 1)} /> : null}
+        <span data-push="" />
+        {question.required !== true && !last ? <NmButton label={COPY.skip} tone="outline" size="compact" onClick={() => go(step + 1)} /> : null}
+        {last ? (
+          <NmButton label={props.submitLabel ?? COPY.submit} tone="filled" size="compact" type="submit" />
+        ) : (
+          <NmButton label={COPY.next} tone="filled" size="compact" type="submit" />
+        )}
+      </div>
+    </form>
+  );
+}