@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/components/nm-list-item/nm-list-item.tsx

@@ -0,0 +1,112 @@
+import type { ReactNode } from 'react';
+import {
+  NM_DROPDOWN_ALIGN,
+  NM_DROPDOWN_CLASSES,
+  NM_DROPDOWN_REVEAL,
+  NM_DROPDOWN_TRIGGER,
+} from '../../config/nm-dropdown.ts';
+import { NmDropdown, type NmDropdownItem } from '../nm-dropdown/nm-dropdown.tsx';
+import { NM_LIST_ITEM_CLASSES } from '../../config/nm-list-item.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+const logger = createLogger('interface-nm-list-item');
+
+export type NmListItemProps = {
+  title: string;
+  detail?: string;
+  /** Brand mark or face shown beside the title. */
+  leading?: ReactNode;
+  /** `mark` is a 20px app logo. `icon` is a tool glyph. `face` is the companion portrait. */
+  leadingSize?: 'mark' | 'icon' | 'face';
+  /** Connect or disconnect control. Stays visible; it does not collapse into the menu. */
+  action?: ReactNode;
+  menuLabel?: string;
+  /** Ellipsis menu. The shared dropdown, usually edit and delete. */
+  menuItems?: readonly NmDropdownItem[];
+  onMenuSelect?: (id: string) => void;
+  locked?: boolean;
+  /** Lock shown at rest. Hover replaces it with the menu. */
+  resting?: 'lock';
+  onMenu?: () => void;
+  /** Opens the row. The title becomes the control. */
+  onOpen?: () => void;
+};
+
+export function NmListItem(props: NmListItemProps): ReactNode {
+  logger.debug('render', props.title);
+  const face = props.leading != null && props.leadingSize === 'face';
+  const icon = props.leading != null && props.leadingSize === 'icon';
+  const marked = props.leading != null && !face && !icon;
+  const className = [
+    NM_LIST_ITEM_CLASSES.root,
+    marked ? NM_LIST_ITEM_CLASSES.marked : '',
+    icon ? NM_LIST_ITEM_CLASSES.icon : '',
+    face ? NM_LIST_ITEM_CLASSES.face : '',
+  ]
+    .filter((name) => name.length > 0)
+    .join(' ');
+  let menu: ReactNode = null;
+  if (props.menuItems != null && props.menuItems.length > 0) {
+    menu = (
+      <span className={NM_LIST_ITEM_CLASSES.menu}>
+        <NmDropdown
+          label={props.menuLabel ?? props.title}
+          trigger={NM_DROPDOWN_TRIGGER.iconButton}
+          icon="ellipsis"
+          align={NM_DROPDOWN_ALIGN.end}
+          reveal={NM_DROPDOWN_REVEAL.hover}
+          items={props.menuItems}
+          onSelect={(id) => props.onMenuSelect?.(id)}
+        />
+      </span>
+    );
+  } else if (props.onMenu != null) {
+    menu = (
+      <button
+        className={`${NM_LIST_ITEM_CLASSES.menu} ${NM_DROPDOWN_CLASSES.revealHover}`}
+        type="button"
+        aria-label={props.menuLabel ?? props.title}
+        onClick={props.onMenu}
+      >
+        <NmIcon id="ellipsis" />
+      </button>
+    );
+  }
+  return (
+    <li className={className} data-nm-menu="">
+      <span className={NM_LIST_ITEM_CLASSES.identity}>
+        {props.leading != null ? (
+          <span className={NM_LIST_ITEM_CLASSES.lead}>{props.leading}</span>
+        ) : null}
+        {props.onOpen ? (
+          <button type="button" className={NM_LIST_ITEM_CLASSES.open} onClick={props.onOpen}>
+            <span className={NM_LIST_ITEM_CLASSES.title}>{props.title}</span>
+          </button>
+        ) : (
+          <span className={NM_LIST_ITEM_CLASSES.title}>{props.title}</span>
+        )}
+      </span>
+      <span>
+        {props.locked ? (
+          <NmIcon id="lock" />
+        ) : (
+          <>
+            {props.action ? (
+              <span className={NM_LIST_ITEM_CLASSES.action}>{props.action}</span>
+            ) : null}
+            {props.detail ? (
+              <span className={NM_LIST_ITEM_CLASSES.detail}>{props.detail}</span>
+            ) : null}
+            {props.resting === 'lock' ? (
+              <span className={NM_LIST_ITEM_CLASSES.rest}>
+                <NmIcon id="lock" />
+              </span>
+            ) : null}
+            {menu}
+          </>
+        )}
+      </span>
+    </li>
+  );
+}

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

@@ -0,0 +1,32 @@
+  .nm-menubar {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-2);
+    font-family: var(--nm-font);
+  }
+
+  .nm-menubar__trigger {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    height: var(--control-h-sm);
+    padding: 0 var(--nm-space-12);
+    border: 0;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg-muted);
+    font: inherit;
+    font-size: var(--nm-type-ui);
+    cursor: pointer;
+  }
+
+  .nm-menubar__trigger:hover,
+  .nm-menubar__trigger[data-popup-open] {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+
+  .nm-menubar__trigger:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }

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

@@ -0,0 +1,19 @@
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/**
+ * Base UI Menubar, in the shadcn composition. A row of menus that open on click and then on hover.
+ * Each menu is an NmDropdownMenu, so its content and items are the dropdown parts.
+ */
+export function NmMenubar({ className, ...props }: MenubarPrimitive.Props) {
+  return <MenubarPrimitive data-slot="menubar" className={nmClass('nm-menubar', className as string)} {...props} />;
+}
+
+export function NmMenubarMenu(props: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="menubar-menu" {...props} />;
+}
+
+export function NmMenubarTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="menubar-trigger" className={nmClass('nm-menubar__trigger', className as string)} {...props} />;
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { NM_MESSAGE_CLASSES } from '../../config/nm-message.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-message-actions');
+
+export type NmMessageActionsProps = {
+  children: ReactNode;
+  testId?: string;
+  revealOnHover?: boolean;
+};
+
+export function NmMessageActions(props: NmMessageActionsProps): ReactNode {
+  logger.debug('render', 'actions', { revealOnHover: props.revealOnHover === true });
+  const className =
+    props.revealOnHover === true
+      ? `${NM_MESSAGE_CLASSES.actions} ${NM_MESSAGE_CLASSES.actionsReveal}`
+      : NM_MESSAGE_CLASSES.actions;
+  return (
+    <div className={className} data-testid={props.testId}>
+      {props.children}
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { NM_MESSAGE_CLASSES, NM_MESSAGE_ICON_SRC } from '../../config/nm-message.ts';
+import { NmTextShimmer } from './nm-text-shimmer.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-message-meta');
+
+export type NmMessageMetaProps = {
+  label: string;
+  testId?: string;
+  expandable?: boolean;
+  expanded?: boolean;
+  onToggle?: () => void;
+  live?: boolean;
+};
+
+export function NmMessageMeta(props: NmMessageMetaProps): ReactNode {
+  logger.debug('render', props.label, { expandable: props.expandable === true });
+  const label = props.live === true ? <NmTextShimmer>{props.label}</NmTextShimmer> : props.label;
+  if (props.expandable === true && props.onToggle != null) {
+    return (
+      <button
+        type="button"
+        className={NM_MESSAGE_CLASSES.meta}
+        aria-expanded={props.expanded === true}
+        onClick={props.onToggle}
+        data-testid={props.testId}
+      >
+        <span className={NM_MESSAGE_CLASSES.metaLabel}>{label}</span>
+        <img
+          className={NM_MESSAGE_CLASSES.metaChevron}
+          src={NM_MESSAGE_ICON_SRC.chevron}
+          alt=""
+          data-open={props.expanded === true ? 'true' : 'false'}
+        />
+      </button>
+    );
+  }
+  return (
+    <div className={NM_MESSAGE_CLASSES.meta} data-testid={props.testId}>
+      <p
+        className={NM_MESSAGE_CLASSES.metaLabel}
+        aria-live={props.live === true ? 'polite' : undefined}
+      >
+        {label}
+      </p>
+    </div>
+  );
+}