@nordmanai/nif 0.1.0 → 0.2.1

package/registry/ui/components/nm-message/nm-trace.tsx

@@ -0,0 +1,219 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+import {
+  NM_MESSAGE_CLASSES,
+  NM_MESSAGE_ICON_SRC,
+  NM_TRACE_GLYPH_PATHS,
+  type NmTraceGlyphKind,
+  type NmTraceStatus,
+} from '../../config/nm-message.ts';
+import { NmTextShimmer } from './nm-text-shimmer.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-trace');
+
+type NmTraceCollapsibleContextValue = {
+  open: boolean;
+  toggle: () => void;
+};
+
+const NmTraceCollapsibleContext = createContext<NmTraceCollapsibleContextValue | null>(null);
+
+export function NmTraceGlyph(props: { kind: NmTraceGlyphKind; spin?: boolean }): ReactNode {
+  const path = NM_TRACE_GLYPH_PATHS[props.kind];
+  const className =
+    props.spin === true
+      ? `${NM_MESSAGE_CLASSES.traceIcon} ${NM_MESSAGE_CLASSES.traceIconSpin}`
+      : NM_MESSAGE_CLASSES.traceIcon;
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" className={className}>
+      <path
+        d={path}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function NmTrace(props: {
+  children: ReactNode;
+  testId?: string;
+  ariaLabel?: string;
+  role?: 'region' | 'group';
+}): ReactNode {
+  return (
+    <section
+      className={`${NM_MESSAGE_CLASSES.tools} ${NM_MESSAGE_CLASSES.trace}`}
+      data-testid={props.testId}
+      aria-label={props.ariaLabel}
+      role={props.role}
+    >
+      {props.children}
+    </section>
+  );
+}
+
+export function NmTraceCollapsible(props: {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  testId?: string;
+}): ReactNode {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen === true);
+  const isControlled = props.open !== undefined;
+  const open = isControlled ? props.open === true : uncontrolledOpen;
+
+  const toggle = () => {
+    const next = !open;
+    logger.debug('toggle', props.testId ?? 'trace-collapsible', { open: next });
+    if (!isControlled) {
+      setUncontrolledOpen(next);
+    }
+    props.onOpenChange?.(next);
+  };
+
+  return (
+    <NmTraceCollapsibleContext.Provider value={{ open, toggle }}>
+      <div className={NM_MESSAGE_CLASSES.traceCollapsible} data-testid={props.testId}>
+        {props.children}
+      </div>
+    </NmTraceCollapsibleContext.Provider>
+  );
+}
+
+export function NmTraceCollapsibleTrigger(props: {
+  children: ReactNode;
+  ariaLabel?: string;
+  action?: ReactNode;
+  testId?: string;
+}): ReactNode {
+  const ctx = useContext(NmTraceCollapsibleContext);
+  const open = ctx?.open === true;
+  const button = (
+    <button
+      type="button"
+      className={NM_MESSAGE_CLASSES.traceTrigger}
+      aria-expanded={open}
+      aria-label={props.ariaLabel}
+      onClick={() => ctx?.toggle()}
+      data-testid={props.testId}
+    >
+      {props.children}
+      <img src={NM_MESSAGE_ICON_SRC.chevron} alt="" aria-hidden="true" />
+    </button>
+  );
+  if (props.action != null) {
+    return (
+      <div className={NM_MESSAGE_CLASSES.traceHeader}>
+        {button}
+        <div className={NM_MESSAGE_CLASSES.traceAction}>{props.action}</div>
+      </div>
+    );
+  }
+  return button;
+}
+
+export function NmTraceCollapsibleContent(props: {
+  children: ReactNode;
+  keepMounted?: boolean;
+  asList?: boolean;
+  testId?: string;
+}): ReactNode {
+  const ctx = useContext(NmTraceCollapsibleContext);
+  const open = ctx?.open === true;
+  if (!open && props.keepMounted !== true) {
+    return null;
+  }
+  if (props.asList === true) {
+    return (
+      <ul hidden={!open} className={NM_MESSAGE_CLASSES.traceContent} data-testid={props.testId}>
+        {props.children}
+      </ul>
+    );
+  }
+  return (
+    <div hidden={!open} className={NM_MESSAGE_CLASSES.traceContent} data-testid={props.testId}>
+      {props.children}
+    </div>
+  );
+}
+
+export function NmTraceLine(props: {
+  children: ReactNode;
+  status?: NmTraceStatus;
+  as?: 'div' | 'span' | 'li';
+  testId?: string;
+  role?: 'status';
+  ariaLive?: 'polite';
+}): ReactNode {
+  const Tag = props.as ?? 'div';
+  const className =
+    Tag === 'div' || Tag === 'span'
+      ? `${NM_MESSAGE_CLASSES.toolLine} ${NM_MESSAGE_CLASSES.traceLine}`
+      : NM_MESSAGE_CLASSES.traceLine;
+  return (
+    <Tag
+      className={className}
+      data-status={props.status}
+      data-testid={props.testId}
+      role={props.role}
+      aria-live={props.ariaLive}
+    >
+      {props.children}
+    </Tag>
+  );
+}
+
+export function NmTraceIcon(props: { children: ReactNode }): ReactNode {
+  return (
+    <span className={NM_MESSAGE_CLASSES.traceIcon} aria-hidden="true">
+      {props.children}
+    </span>
+  );
+}
+
+export function NmTraceTitle(props: { children: ReactNode; shimmer?: boolean }): ReactNode {
+  if (props.shimmer === true && typeof props.children === 'string') {
+    return (
+      <span className={NM_MESSAGE_CLASSES.traceTitle}>
+        <NmTextShimmer>{props.children}</NmTextShimmer>
+      </span>
+    );
+  }
+  return <span className={NM_MESSAGE_CLASSES.traceTitle}>{props.children}</span>;
+}
+
+export function NmTraceDescription(props: {
+  children: ReactNode;
+  ariaHidden?: boolean;
+  testId?: string;
+}): ReactNode {
+  return (
+    <span
+      className={NM_MESSAGE_CLASSES.traceDescription}
+      aria-hidden={props.ariaHidden === true ? 'true' : undefined}
+      data-testid={props.testId}
+    >
+      {props.children}
+    </span>
+  );
+}
+
+export function NmTraceBadges(props: { children: ReactNode; ariaHidden?: boolean }): ReactNode {
+  return (
+    <span
+      className={NM_MESSAGE_CLASSES.traceBadges}
+      aria-hidden={props.ariaHidden === true ? 'true' : undefined}
+    >
+      {props.children}
+    </span>
+  );
+}
+
+export function NmTraceBadge(props: { children: ReactNode }): ReactNode {
+  return <span className={NM_MESSAGE_CLASSES.traceBadge}>{props.children}</span>;
+}