@attrus-ds/core 0.1.1 → 0.2.0

package/dist/react/DataTable/DataTable.tsx

@@ -0,0 +1,308 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS DataTable — typed wrapper over the canonical `.dt` system
+ * (preview/components/table.css). CSS stays the visual source of truth.
+ *
+ * Renders the full anatomy: .dt-wrap > [.dt-toolbar] + .dt-responsive >
+ * table.dt + [.dt-pagination]. Below 560px (container query) rows
+ * collapse to label:value cards — string headers feed each td's
+ * data-label automatically.
+ */
+
+export type SortDir = 'asc' | 'desc';
+export type DataTableSize = 'sm' | 'md' | 'lg';
+export type RowState = 'muted' | 'error' | undefined;
+
+export interface DataTableColumn<T> {
+  /** Unique column id — also what onSort receives. */
+  key: string;
+  /** Column header. Strings also become the responsive data-label. */
+  header: React.ReactNode;
+  /** Right-aligned tabular numerals (.dt-num). */
+  numeric?: boolean;
+  /** Monospace identifier (.dt-id). */
+  id?: boolean;
+  /** Sortable header (.dt-th-sort with chevron). */
+  sortable?: boolean;
+  /** Cell renderer — defaults to String(row[key]). */
+  render?: (row: T) => React.ReactNode;
+}
+
+export interface DataTableProps<T> {
+  columns: Array<DataTableColumn<T>>;
+  rows: T[];
+  /** Stable row identity. */
+  rowKey: (row: T) => string;
+  /** Makes rows hoverable + clickable (tr.hov). */
+  onRowClick?: (row: T) => void;
+  /** Row tint: 'muted' (cancelled) or 'error' (danger). */
+  rowState?: (row: T) => RowState;
+  /** Keys of persistently selected rows (.is-selected). */
+  selectedKeys?: string[];
+  /** Renders the `.col-select` checkbox column; called with the row key. Pair with selectedKeys. */
+  onSelectToggle?: (key: string) => void;
+  /** Header checkbox — toggle all (checked when every row key is in selectedKeys). */
+  onSelectAll?: () => void;
+  /** Loading state — renders `.dt-skeleton` shimmer rows instead of the body. */
+  loading?: boolean;
+  /** How many skeleton rows. Default 4. */
+  loadingRows?: number;
+  /** sm | md (default) | lg — .dt--sm / .dt--lg. */
+  size?: DataTableSize;
+  zebra?: boolean;
+  sticky?: boolean;
+  bordered?: boolean;
+  /** Dark-surface treatment (.dt.on-inverse). */
+  onInverse?: boolean;
+  /** Toolbar slot (.dt-toolbar) above the table. */
+  toolbar?: React.ReactNode;
+  /** Pagination slot (.dt-pagination) below the table. */
+  pagination?: React.ReactNode;
+  /** Surrounding card (.dt-wrap). Default true; disable inside a Card. */
+  wrap?: boolean;
+  /** Responsive card-collapse wrapper (.dt-responsive). Default true. */
+  responsive?: boolean;
+  /** Zero state when rows is empty. */
+  empty?: { icon?: React.ReactNode; title: React.ReactNode; sub?: React.ReactNode };
+  /** Controlled sorting (visual). */
+  sortKey?: string;
+  sortDir?: SortDir;
+  onSort?: (key: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Chev: React.FC = () => (
+  <span className="chev" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </span>
+);
+
+const SelectBox: React.FC<{ checked: boolean; onChange: () => void; label: string }> = ({ checked, onChange, label }) => (
+  <label className="check" onClick={(e) => e.stopPropagation()}>
+    <input type="checkbox" checked={checked} onChange={onChange} aria-label={label} />
+    <span className="check-box">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    </span>
+  </label>
+);
+
+export function DataTable<T>({
+  columns,
+  rows,
+  rowKey,
+  onRowClick,
+  rowState,
+  selectedKeys,
+  onSelectToggle,
+  onSelectAll,
+  loading = false,
+  loadingRows = 4,
+  size = 'md',
+  zebra = false,
+  sticky = false,
+  bordered = false,
+  onInverse = false,
+  toolbar,
+  pagination,
+  wrap = true,
+  responsive = true,
+  empty,
+  sortKey,
+  sortDir,
+  onSort,
+  className,
+  style,
+}: DataTableProps<T>): React.ReactElement {
+  const tableCls = [
+    'dt',
+    size === 'sm' ? 'dt--sm' : '',
+    size === 'lg' ? 'dt--lg' : '',
+    zebra ? 'dt--zebra' : '',
+    sticky ? 'dt--sticky' : '',
+    bordered ? 'dt--bordered' : '',
+    onInverse ? 'on-inverse' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const selectable = Boolean(onSelectToggle);
+  const colCount = columns.length + (selectable ? 1 : 0);
+  const allSelected = selectable && rows.length > 0 && rows.every((r) => (selectedKeys || []).indexOf(rowKey(r)) !== -1);
+
+  const SKW = ['w-lg', 'w-md', 'w-sm'];
+  const table = (
+    <table className={tableCls} aria-busy={loading || undefined}>
+      <thead>
+        <tr>
+          {selectable ? (
+            <th className="col-select">
+              {onSelectAll ? <SelectBox checked={allSelected} onChange={onSelectAll} label="Select all rows" /> : null}
+            </th>
+          ) : null}
+          {columns.map((c) => {
+            const sortCls = c.sortable
+              ? ['dt-th-sort', sortKey === c.key && sortDir === 'asc' ? 'is-asc' : '', sortKey === c.key && sortDir === 'desc' ? 'is-desc' : '']
+                  .filter(Boolean)
+                  .join(' ')
+              : undefined;
+            return (
+              <th
+                key={c.key}
+                className={[c.numeric ? 'dt-num' : '', sortCls || ''].filter(Boolean).join(' ') || undefined}
+                onClick={c.sortable && onSort ? () => onSort(c.key) : undefined}
+                aria-sort={sortKey === c.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}
+              >
+                {c.header}
+                {c.sortable ? <Chev /> : null}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {loading ? (
+          Array.from({ length: loadingRows }, (_, i) => (
+            <tr key={`sk-${i}`} className="dt-skeleton" aria-hidden="true">
+              {selectable ? <td className="col-select"><span className="w-sm" style={{ width: 16 }} /></td> : null}
+              {columns.map((c, ci) => (
+                <td key={c.key}><span className={SKW[(i + ci) % SKW.length]} /></td>
+              ))}
+            </tr>
+          ))
+        ) : rows.length === 0 && empty ? (
+          <tr className="dt-empty">
+            <td colSpan={colCount}>
+              {empty.icon ? <span className="ic">{empty.icon}</span> : null}
+              <span className="ttl">{empty.title}</span>
+              {empty.sub ? <span className="sub">{empty.sub}</span> : null}
+            </td>
+          </tr>
+        ) : (
+          rows.map((row) => {
+            const k = rowKey(row);
+            const state = rowState ? rowState(row) : undefined;
+            const cls = [
+              onRowClick ? 'hov' : '',
+              state === 'muted' ? 'is-muted' : '',
+              state === 'error' ? 'is-error' : '',
+              selectedKeys && selectedKeys.indexOf(k) !== -1 ? 'is-selected' : '',
+            ]
+              .filter(Boolean)
+              .join(' ');
+            return (
+              <tr
+                key={k}
+                className={cls || undefined}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+                style={onRowClick ? { cursor: 'pointer' } : undefined}
+              >
+                {selectable ? (
+                  <td className="col-select" data-label="">
+                    <SelectBox
+                      checked={(selectedKeys || []).indexOf(k) !== -1}
+                      onChange={() => onSelectToggle!(k)}
+                      label="Select row"
+                    />
+                  </td>
+                ) : null}
+                {columns.map((c) => (
+                  <td
+                    key={c.key}
+                    className={[c.numeric ? 'dt-num' : '', c.id ? 'dt-id' : ''].filter(Boolean).join(' ') || undefined}
+                    data-label={typeof c.header === 'string' ? c.header : undefined}
+                  >
+                    {c.render ? c.render(row) : String((row as Record<string, unknown>)[c.key] ?? '')}
+                  </td>
+                ))}
+              </tr>
+            );
+          })
+        )}
+      </tbody>
+    </table>
+  );
+
+  const inner = responsive ? <div className="dt-responsive">{table}</div> : table;
+
+  if (!wrap) return inner;
+
+  return (
+    <div className={['dt-wrap', className || ''].filter(Boolean).join(' ')} style={style}>
+      {toolbar ? <div className="dt-toolbar">{toolbar}</div> : null}
+      {inner}
+      {pagination ? <div className="dt-pagination">{pagination}</div> : null}
+    </div>
+  );
+}
+
+export default DataTable;
+
+/* ----------------------------------------------------------------
+   Typed cell-pattern helpers — compose inside a column's render().
+   ---------------------------------------------------------------- */
+
+/** Stacked primary + secondary lines — `.dt-cell-stack` (.pri / .sec). */
+export const DTCellStack: React.FC<{ pri: React.ReactNode; sec?: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>> = ({ pri, sec, className, ...rest }) => (
+  <div className={['dt-cell-stack', className || ''].filter(Boolean).join(' ')} {...rest}>
+    <span className="pri">{pri}</span>
+    {sec != null ? <span className="sec">{sec}</span> : null}
+  </div>
+);
+
+/** Leading avatar/icon + stacked label — `.dt-cell-lead`. */
+export const DTCellLead: React.FC<{ lead: React.ReactNode; pri: React.ReactNode; sec?: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>> = ({ lead, pri, sec, className, ...rest }) => (
+  <div className={['dt-cell-lead', className || ''].filter(Boolean).join(' ')} {...rest}>
+    {lead}
+    <div className="dt-cell-stack">
+      <span className="pri">{pri}</span>
+      {sec != null ? <span className="sec">{sec}</span> : null}
+    </div>
+  </div>
+);
+
+/** Trailing actions cluster — `.dt-actions` (ghost icon buttons). */
+export const DTActions: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...rest }) => (
+  <div className={['dt-actions', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+
+export interface DTPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Left-side mono range text (e.g. "1–10 of 42"). */
+  range?: React.ReactNode;
+  /** Current page (1-based). */
+  page: number;
+  /** Total pages. */
+  pages: number;
+  onPage?: (page: number) => void;
+}
+/** Canonical pagination row — `.range` + `.pager` with `.page-btn`s (prev · numbered · next).
+    Pass as the DataTable `pagination` slot. */
+export const DTPagination: React.FC<DTPaginationProps> = ({ range, page, pages, onPage, className, ...rest }) => (
+  <div className={className} style={{ display: 'contents' }} {...rest}>
+    {range != null ? <span className="range">{range}</span> : null}
+    <nav className="pager" aria-label="Pagination">
+      <button type="button" className="page-btn" disabled={page <= 1} onClick={() => onPage && onPage(page - 1)} aria-label="Previous page">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
+      </button>
+      {Array.from({ length: pages }, (_, i) => i + 1).map((p) => (
+        <button
+          key={p}
+          type="button"
+          className={p === page ? 'page-btn is-current' : 'page-btn'}
+          aria-current={p === page ? 'page' : undefined}
+          onClick={() => onPage && onPage(p)}
+        >
+          {p}
+        </button>
+      ))}
+      <button type="button" className="page-btn" disabled={page >= pages} onClick={() => onPage && onPage(page + 1)} aria-label="Next page">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+      </button>
+    </nav>
+  </div>
+);

package/dist/react/Drawer/Drawer.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+export type DrawerSide = 'right' | 'left' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface DrawerProps {
+  open: boolean;
+  onClose?: () => void;
+  side?: DrawerSide;
+  /** Width preset for right/left drawers. */
+  size?: DrawerSize;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** 40×40 header lead tile — caller sets bg/color via leadStyle. */
+  lead?: React.ReactNode;
+  leadStyle?: React.CSSProperties;
+  /** Sticky footer row — canonical Buttons. */
+  footer?: React.ReactNode;
+  /** Left-side footer aux (total, agreement note) — switches the footer to space-between. */
+  footerAux?: React.ReactNode;
+  /** Second header row (search pill, tabs) — `.drawer-header-extra`. */
+  headerExtra?: React.ReactNode;
+  /** Tight header chrome for utility drawers (`.drawer-header.is-dense`). */
+  denseHeader?: boolean;
+  /** Drag handle bar (bottom drawers) — swipe-down past ~80px dismisses. */
+  handle?: boolean;
+  /** Gallery/doc rendering: panel only (no scrim), overlay behaviours off
+      (focus trap, scroll-lock, Esc). Position it inside a relative frame. */
+  static?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/dist/react/Drawer/Drawer.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Drawer — typed wrapper over the canonical `.drawer` + `.scrim`
+ * (preview/components/overlays.css). Slide-in panel from right/left/
+ * bottom with sticky glassy header/footer, lead tile and sizes sm→xl.
+ *
+ * Open/close: same proven pattern as Modal — internal flag flips
+ * `.is-open` via setTimeout (not rAF). Esc and scrim-click call onClose.
+ * Exit: when `open` flips false the panel stays MOUNTED for the exit
+ * transition (slide back + fade, --duration-slow = 320ms) and only then
+ * unmounts — so closing plays the exact reverse of opening.
+ */
+
+export type DrawerSide = 'right' | 'left' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface DrawerProps {
+  open: boolean;
+  onClose?: () => void;
+  side?: DrawerSide;
+  /** Width preset for right/left drawers. */
+  size?: DrawerSize;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** 40×40 header lead tile — caller sets bg/color via leadStyle. */
+  lead?: React.ReactNode;
+  leadStyle?: React.CSSProperties;
+  /** Sticky footer row — canonical Buttons. */
+  footer?: React.ReactNode;
+  /** Left-side footer aux (total, agreement note) — switches the footer to space-between. */
+  footerAux?: React.ReactNode;
+  /** Second header row (search pill, tabs) — `.drawer-header-extra`. */
+  headerExtra?: React.ReactNode;
+  /** Tight header chrome for utility drawers (`.drawer-header.is-dense`). */
+  denseHeader?: boolean;
+  /** Drag handle bar (bottom drawers). */
+  handle?: boolean;
+  /** Gallery/doc rendering: panel only (no scrim), overlay behaviours off
+      (focus trap, scroll-lock, Esc). Position it inside a relative frame. */
+  static?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const XGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" aria-hidden="true">
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+export const Drawer: React.FC<DrawerProps> = ({
+  open,
+  onClose,
+  side = 'right',
+  size,
+  title,
+  subtitle,
+  lead,
+  leadStyle,
+  footer,
+  footerAux,
+  headerExtra,
+  denseHeader = false,
+  handle = false,
+  static: isStatic = false,
+  children,
+  className,
+}) => {
+  const [shown, setShown] = React.useState(false);
+  const [mounted, setMounted] = React.useState(open);
+  const panelRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return undefined;
+    }
+    // Closing: drop .is-open first so the CSS exit transition (reverse
+    // slide + fade) plays, THEN unmount after it finishes (320ms exit).
+    setShown(false);
+    const t = setTimeout(() => setMounted(false), 320);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  // Entry: after the CLOSED state is committed to the DOM, force a layout
+  // flush (offsetHeight) so the browser computes the start position, then
+  // flip .is-open — guarantees the slide-in transition plays every time.
+  // (A bare 10ms timer was flaky: when it fired before first style calc,
+  // the panel appeared already open — no animation.)
+  React.useEffect(() => {
+    if (!open || !mounted || shown) return;
+    void panelRef.current?.offsetHeight;
+    setShown(true);
+  }, [open, mounted, shown]);
+
+  React.useEffect(() => {
+    if (!open || isStatic) return undefined;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && onClose) onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose, isStatic]);
+
+  // Body scroll-lock while open (doc a11y contract).
+  React.useEffect(() => {
+    if (!open || !mounted || isStatic) return undefined;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = prev; };
+  }, [open, mounted]);
+
+  // Focus management: remember the opener, move focus into the panel on
+  // open, restore it after close. Tab cycles inside (light focus trap).
+  const prevFocus = React.useRef<HTMLElement | null>(null);
+  React.useEffect(() => {
+    if (isStatic) return;
+    if (shown) {
+      prevFocus.current = document.activeElement as HTMLElement | null;
+      const first = panelRef.current?.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      (first || panelRef.current)?.focus?.();
+    } else if (prevFocus.current) {
+      prevFocus.current.focus?.();
+      prevFocus.current = null;
+    }
+  }, [shown]);
+
+  const onTrapKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== 'Tab' || !panelRef.current) return;
+    const focusables = Array.from(
+      panelRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((el) => !el.hasAttribute('disabled'));
+    if (!focusables.length) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+  };
+
+  // Bottom drawer: swipe-down on the handle dismisses past a threshold.
+  const touchY = React.useRef<number | null>(null);
+  const onHandleTouchStart = (e: React.TouchEvent) => { touchY.current = e.touches[0].clientY; };
+  const onHandleTouchMove = (e: React.TouchEvent) => {
+    if (touchY.current == null || !panelRef.current) return;
+    const dy = Math.max(0, e.touches[0].clientY - touchY.current);
+    panelRef.current.style.transform = `translateY(${dy}px)`;
+    panelRef.current.style.transition = 'none';
+  };
+  const onHandleTouchEnd = (e: React.TouchEvent) => {
+    if (touchY.current == null || !panelRef.current) return;
+    const dy = e.changedTouches[0].clientY - touchY.current;
+    panelRef.current.style.transform = '';
+    panelRef.current.style.transition = '';
+    touchY.current = null;
+    if (dy > 80 && onClose) onClose();
+  };
+
+  if (!mounted) return null;
+
+  const cls = [
+    'drawer',
+    `drawer-${side}`,
+    size && side !== 'bottom' ? `drawer-${size}` : '',
+    shown ? 'is-open' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <React.Fragment>
+      {isStatic ? null : <div className={['scrim', shown ? 'is-open' : ''].filter(Boolean).join(' ')} onClick={onClose} />}
+      <div
+        ref={panelRef}
+        className={cls}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        onKeyDown={onTrapKeyDown}
+      >
+        {handle ? (
+          <div
+            className="drawer-handle"
+            onTouchStart={onHandleTouchStart}
+            onTouchMove={onHandleTouchMove}
+            onTouchEnd={onHandleTouchEnd}
+          />
+        ) : null}
+        {title != null || subtitle != null || lead != null || onClose ? (
+          <div className={['drawer-header', denseHeader ? 'is-dense' : '', headerExtra != null ? 'has-extra' : ''].filter(Boolean).join(' ')}>
+            {lead != null ? (
+              <span className="drawer-lead" style={leadStyle}>
+                {lead}
+              </span>
+            ) : null}
+            <div className="drawer-header-text">
+              {title != null ? <div className="drawer-title">{title}</div> : null}
+              {subtitle != null ? <div className="drawer-subtitle">{subtitle}</div> : null}
+            </div>
+            {onClose ? (
+              <button type="button" className="drawer-close" aria-label="Close" onClick={onClose}>
+                <XGlyph />
+              </button>
+            ) : null}
+            {headerExtra != null ? <div className="drawer-header-extra">{headerExtra}</div> : null}
+          </div>
+        ) : null}
+        {children != null ? <div className="drawer-body">{children}</div> : null}
+        {footer != null || footerAux != null ? (
+          <div className="drawer-footer" style={footerAux != null ? { justifyContent: 'space-between' } : undefined}>
+            {footerAux != null ? <span className="drawer-footer-aux">{footerAux}</span> : null}
+            {footer != null ? (footerAux != null ? <span style={{ display: 'inline-flex', gap: 'var(--space-3)' }}>{footer}</span> : footer) : null}
+          </div>
+        ) : null}
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default Drawer;