@lotics/ui 2.4.1 → 2.6.0

package/src/alert_row.tsx

@@ -1,81 +0,0 @@
-import { type ReactNode } from "react";
-import { View, StyleSheet } from "react-native";
-import { Text } from "./text";
-import { Metric, type MetricSize, type MetricTone } from "./metric";
-import { colors } from "./colors";
-import { SPACE } from "./spacing";
-
-interface AlertRowProps {
-  /** Leading icon (lucide-react `<AlertCircle />`, `<CheckCircle2 />`, etc.).
-   * Sized 18px in the host. Caller controls color so different severities
-   * can use different palettes. */
-  icon: ReactNode;
-  label: string;
-  /** The count or quantity. `null` while loading → renders as `emptyLabel`. */
-  count: number | string | null;
-  /** Small text below the count — unit ("Hồ sơ"), amount caption
-   * ("12.000.000 đ"), or short hint. */
-  hint?: string;
-  /** Number size. Default `lg` keeps the row scannable; `md` for denser
-   * lists where many rows compete. */
-  size?: MetricSize;
-  /** Auto-set: non-zero count = danger (red), zero = default. Override for
-   * status semantics (e.g., when down is good). */
-  tone?: MetricTone;
-  /** Suppress the bottom hairline. Set on the last row of a list. */
-  last?: boolean;
-}
-
-/**
- * One row of a prioritized action list — icon + label on the left, count
- * + hint on the right. The Mercury / Linear "needs attention" pattern.
- *
- * Layout enforces two-column rhythm: left side flex-grows with the label,
- * right side is fixed-width and right-aligned. Without enforcement, rows
- * drift into "label centered, count floating left of right edge" which
- * makes the list unscannable.
- */
-export function AlertRow(props: AlertRowProps) {
-  const { icon, label, count, hint, size = "lg", tone, last } = props;
-  const hasIssue = typeof count === "number" && count > 0;
-  const resolvedTone: MetricTone = tone ?? (hasIssue ? "danger" : "default");
-  return (
-    <View style={[styles.row, !last && styles.divider]}>
-      <View style={styles.leftCol}>
-        {icon}
-        <Text size="sm">{label}</Text>
-      </View>
-      <View style={styles.rightCol}>
-        <Metric value={count} size={size} tone={resolvedTone} />
-        {hint && (
-          <Text size="xs" color="muted">
-            {hint}
-          </Text>
-        )}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: SPACE.md,
-  },
-  divider: {
-    borderBottomWidth: 1,
-    borderBottomColor: colors.zinc[100],
-  },
-  leftCol: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.md,
-    flex: 1,
-  },
-  rightCol: {
-    alignItems: "flex-end",
-    minWidth: 100,
-  },
-});

package/src/table.web.tsx

@@ -1,235 +0,0 @@
-import { CSSProperties, Fragment, useState } from "react";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { colors } from "./colors";
-import type { Column, TableProps } from "./table_types";
-
-export type { SortDir, TableSort, Column, TableProps } from "./table_types";
-
-// Web table. Built from raw <div>s (not RN Pressable) so a click-to-expand row
-// can legally contain interactive controls: the row is a <div role="row">, never
-// a <button>. A row click toggles expansion EXCEPT when it lands on an actual
-// interactive element — those keep their own behaviour. This is the web mirror of
-// RN's responder model (the innermost control wins): only the control suppresses
-// the toggle, so empty space anywhere in the row — including around a control in a
-// wide action column — still expands. No stopPropagation, no nested <button>, no
-// absolute overlay, no dead zones. The detail panel renders full-width below.
-
-const CHEVRON_W = 44;
-
-// Clicks landing on (or inside) one of these keep their own behaviour instead of
-// toggling the row — the standard interactive HTML tags + ARIA interactive roles,
-// plus an explicit [data-interactive] escape hatch for a non-element control.
-const INTERACTIVE_SELECTOR =
-  'a[href], button, input, select, textarea, label, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="radio"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="tab"], [role="slider"], [role="spinbutton"], [contenteditable="true"], [data-interactive]';
-
-function colWidth<TRow extends Record<string, unknown>>(col: Column<TRow>): CSSProperties {
-  return col.width ? { width: col.width, flexShrink: 0 } : { flex: 1, minWidth: 0 };
-}
-
-export function Table<TRow extends Record<string, unknown>>(props: TableProps<TRow>) {
-  const { columns, rows, rowKey, rowStyle, sort, onSortChange, renderDetail, expandedKeys, onToggleRow, onRowPress } = props;
-  const [internal, setInternal] = useState<Set<string>>(() => new Set());
-  const [hoverKey, setHoverKey] = useState<string | null>(null);
-  const expanded = expandedKeys ?? internal;
-  const expandable = !!renderDetail;
-  // A row reacts to clicks for one of two reasons: expansion (renderDetail) or
-  // selection (onRowPress). Expansion wins if both are set.
-  const pressable = expandable || !!onRowPress;
-
-  const toggle = (key: string, row: TRow) => {
-    onToggleRow?.(key, row);
-    if (expandedKeys === undefined) {
-      setInternal((prev) => {
-        const next = new Set(prev);
-        if (next.has(key)) next.delete(key);
-        else next.add(key);
-        return next;
-      });
-    }
-  };
-
-  const visibleRows = rows.filter((r): r is TRow => Boolean(r));
-
-  return (
-    <div style={containerStyle} role="table">
-      {/* Header */}
-      <div style={headerRowStyle} role="row">
-        {columns.map((col) => {
-          const sortable = col.sortable && !!onSortChange;
-          const active = sort?.key === col.key;
-          const style: CSSProperties = {
-            ...headerCellStyle,
-            ...colWidth(col),
-            justifyContent: col.align === "right" ? "flex-end" : "flex-start",
-            cursor: sortable ? "pointer" : "default",
-          };
-          const inner = (
-            <>
-              <Text size="xs" weight="medium" color="muted" numberOfLines={1} userSelect="none" transform="uppercase">
-                {col.label}
-              </Text>
-              {sortable ? (
-                <Icon
-                  name={active ? (sort?.dir === "asc" ? "chevron-up" : "chevron-down") : "chevrons-up-down"}
-                  size={14}
-                  color={active ? colors.zinc[700] : colors.zinc[400]}
-                />
-              ) : null}
-            </>
-          );
-          return sortable ? (
-            <div
-              key={col.key as string}
-              role="columnheader"
-              aria-sort={active ? (sort?.dir === "asc" ? "ascending" : "descending") : undefined}
-              tabIndex={0}
-              onClick={() => onSortChange?.(col.key)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onSortChange?.(col.key);
-                }
-              }}
-              style={style}
-            >
-              {inner}
-            </div>
-          ) : (
-            <div key={col.key as string} role="columnheader" style={style}>
-              {inner}
-            </div>
-          );
-        })}
-        {expandable ? <div style={{ width: CHEVRON_W, flexShrink: 0 }} /> : null}
-      </div>
-
-      {/* Body */}
-      {visibleRows.map((row, i) => {
-        const key = rowKey ? String(row[rowKey]) : String(i);
-        const isOpen = expanded.has(key);
-        const extra = (rowStyle?.(row) as CSSProperties | undefined) ?? undefined;
-        const rowStyleFinal: CSSProperties = {
-          ...bodyRowStyle,
-          cursor: pressable ? "pointer" : "default",
-          background: hoverKey === key && pressable ? colors.zinc[50] : colors.white,
-          ...extra,
-        };
-        return (
-          <Fragment key={key}>
-            <div
-              role="row"
-              onClick={
-                pressable
-                  ? (e: React.MouseEvent) => {
-                      // Whole-row click acts (expand or select), EXCEPT when it lands on an
-                      // actual interactive element — those keep their own behaviour. The
-                      // disclosure chevron is the keyboard/AT affordance for expansion.
-                      if ((e.target as HTMLElement).closest(INTERACTIVE_SELECTOR)) return;
-                      if (expandable) toggle(key, row);
-                      else onRowPress?.(row);
-                    }
-                  : undefined
-              }
-              onMouseEnter={pressable ? () => setHoverKey(key) : undefined}
-              onMouseLeave={pressable ? () => setHoverKey((k) => (k === key ? null : k)) : undefined}
-              style={rowStyleFinal}
-            >
-              {columns.map((col) => (
-                <div
-                  key={col.key as string}
-                  role="cell"
-                  style={{
-                    ...bodyCellStyle,
-                    ...colWidth(col),
-                    alignItems: col.align === "right" ? "flex-end" : "flex-start",
-                  }}
-                >
-                  {col.renderCell ? (
-                    col.renderCell({ row, column: col })
-                  ) : (
-                    <Text numberOfLines={1}>{row[col.key] != null ? String(row[col.key]) : ""}</Text>
-                  )}
-                </div>
-              ))}
-              {expandable ? (
-                <button
-                  type="button"
-                  data-interactive
-                  aria-expanded={isOpen}
-                  aria-label={isOpen ? "Collapse row" : "Expand row"}
-                  onClick={() => toggle(key, row)}
-                  style={chevronButtonStyle}
-                >
-                  <Icon name={isOpen ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
-                </button>
-              ) : null}
-            </div>
-            {expandable && isOpen ? (
-              <div role="row" style={detailRowStyle}>
-                <div role="cell" style={detailCellStyle}>
-                  {renderDetail!(row)}
-                </div>
-              </div>
-            ) : null}
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-}
-
-// `maxHeight: 100%` is a no-op in a content-sized parent (a card grows to its
-// rows) but caps the table to a bounded parent (a modal's flex region), so
-// `overflow: auto` then scrolls and the sticky header engages.
-const containerStyle: CSSProperties = { width: "100%", maxHeight: "100%", overflow: "auto" };
-const headerRowStyle: CSSProperties = {
-  display: "flex",
-  position: "sticky",
-  top: 0,
-  zIndex: 1,
-  background: colors.white,
-  borderBottom: `1px solid ${colors.border}`,
-};
-const headerCellStyle: CSSProperties = {
-  minHeight: 40,
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: 4,
-  padding: "10px 12px",
-  boxSizing: "border-box",
-};
-const bodyRowStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "stretch",
-  borderBottom: `1px solid ${colors.border}`,
-};
-const bodyCellStyle: CSSProperties = {
-  minHeight: 44,
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  padding: 12,
-  boxSizing: "border-box",
-};
-const chevronButtonStyle: CSSProperties = {
-  width: CHEVRON_W,
-  flexShrink: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  background: "transparent",
-  border: "none",
-  padding: 0,
-  cursor: "pointer",
-};
-const detailRowStyle: CSSProperties = {
-  background: colors.zinc[50],
-  borderBottom: `1px solid ${colors.border}`,
-};
-const detailCellStyle: CSSProperties = {
-  padding: "4px 16px 18px",
-  width: "100%",
-  boxSizing: "border-box",
-};

package/src/table_picker.tsx

@@ -1,305 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { SearchInput } from "./search_input";
-import { ActivityIndicator } from "./activity_indicator";
-import { Dialog } from "./dialog";
-import { Table } from "@lotics/ui/table";
-import type { Column, TableSort } from "@lotics/ui/table_types";
-import { Pagination } from "./pagination";
-import { ColumnFilter, type FilterableColumn, type ColumnFilterValue } from "./column_filter";
-
-/** A grid column the picker displays. Sorting is opt-in per column. */
-export interface PickerColumn<TRow extends Record<string, unknown>> {
-  key: string;
-  label: string;
-  /** Fixed pixel width. Omit to flex. */
-  width?: number;
-  align?: "left" | "right";
-  /** Show a sortable header for this column. Requires `sort`/`onSortChange`. */
-  sortable?: boolean;
-  /** Cell content. Default: the row's value at `key` rendered as text. */
-  renderCell?: (row: TRow) => React.ReactNode;
-}
-
-/** Single-column sort state — the picker sorts by one column at a time. */
-export interface TablePickerSort {
-  key: string;
-  order: "asc" | "desc";
-}
-
-export interface TablePickerProps<TRow extends Record<string, unknown>> {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** Heading shown above the search box. */
-  title?: string;
-
-  columns: PickerColumn<TRow>[];
-  /** Rows of the current page (the consumer paginates). */
-  rows: TRow[];
-  /** The field holding each row's stable id — returned by selection and used to
-   *  highlight the picked row (e.g. `"__source_record_id"`). */
-  rowKey: keyof TRow & string;
-
-  /** Currently selected row id, or null. Highlights the matching row. */
-  value: string | null;
-  /** Called with the picked row id. */
-  onValueChange: (id: string) => void;
-  /** Close the dialog after a pick. Default `true`. */
-  closeOnSelect?: boolean;
-
-  /** Controlled search term. The consumer owns it and re-queries. */
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  searchPlaceholder?: string;
-
-  /**
-   * Controlled single-column sort. Omit `onSortChange` to disable sorting.
-   * Toggling a column cycles asc → desc → off.
-   */
-  sort?: TablePickerSort | null;
-  onSortChange?: (sort: TablePickerSort | null) => void;
-
-  /**
-   * Per-column filter pills. The consumer holds `filterValues` (keyed by column
-   * key) and maps them to query conditions via `columnFilterToConditions`.
-   */
-  filters?: FilterableColumn[];
-  filterValues?: Record<string, ColumnFilterValue>;
-  onFilterChange?: (key: string, value: ColumnFilterValue | undefined) => void;
-  /** Accessible name for the per-filter clear control. Pass a translated string. */
-  clearLabel?: string;
-
-  /** Pagination (page-model — the consumer owns the page cursor). */
-  page: number;
-  pageSize: number;
-  /** Total rows across all pages, when known — drives "Page 1 of N". */
-  total?: number;
-  hasMore: boolean;
-  onPageChange: (page: number) => void;
-
-  /** A request is in flight. */
-  loading?: boolean;
-  /** Message when there are no rows and nothing is loading. */
-  emptyLabel?: string;
-  /** Max dialog width — a browse table needs more room than a form dialog.
-   *  Default 1080. */
-  maxWidth?: number | `${number}%`;
-  testID?: string;
-}
-
-/** Render an arbitrary cell value as a single line when no `renderCell` is given. */
-function defaultCellText(value: unknown): string {
-  if (value == null) return "";
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  if (Array.isArray(value)) return value.map(defaultCellText).filter(Boolean).join(", ");
-  if (typeof value === "object") {
-    const o = value as { label?: unknown; display?: unknown; name?: unknown };
-    for (const k of [o.label, o.display, o.name]) {
-      if (typeof k === "string") return k;
-    }
-  }
-  return "";
-}
-
-/**
- * A data-agnostic record-style picker: a modal holding a table the user can
- * browse (numbered pages), search, sort, and filter, then pick one row. It knows
- * nothing about records/tables/fields — the consumer supplies `columns` + `rows`
- * (one page) and owns the search/sort/filter/page state (so the same component
- * drives a server query, an in-memory list, or any other source). Compose it
- * with a domain hook (e.g. an app's `usePaginatedQuery`) to build a record
- * picker, or with any other row source for a different purpose.
- *
- * Single-select: clicking a row picks its id; the selected row is highlighted;
- * `closeOnSelect` (default) dismisses the modal on pick.
- */
-export function TablePicker<TRow extends Record<string, unknown>>(
-  props: TablePickerProps<TRow>,
-) {
-  const {
-    open,
-    onOpenChange,
-    title,
-    columns,
-    rows,
-    rowKey,
-    value,
-    onValueChange,
-    closeOnSelect = true,
-    searchQuery,
-    onSearchChange,
-    searchPlaceholder,
-    sort = null,
-    onSortChange,
-    filters,
-    filterValues,
-    onFilterChange,
-    clearLabel,
-    page,
-    pageSize,
-    total,
-    hasMore,
-    onPageChange,
-    loading = false,
-    emptyLabel,
-    maxWidth = 1080,
-    testID,
-  } = props;
-
-  const handleSelect = useCallback(
-    (row: TRow) => {
-      onValueChange(String(row[rowKey]));
-      if (closeOnSelect) onOpenChange(false);
-    },
-    [onValueChange, rowKey, closeOnSelect, onOpenChange],
-  );
-
-  // Toggle this column's sort: asc → desc → off. The consumer holds the state.
-  const toggleSort = useCallback(
-    (key: string) => {
-      if (!onSortChange) return;
-      if (!sort || sort.key !== key) onSortChange({ key, order: "asc" });
-      else if (sort.order === "asc") onSortChange({ key, order: "desc" });
-      else onSortChange(null);
-    },
-    [sort, onSortChange],
-  );
-
-  const tableColumns = useMemo<Column<TRow>[]>(
-    () =>
-      columns.map((col) => ({
-        key: col.key,
-        label: col.label,
-        width: col.width,
-        align: col.align,
-        sortable: col.sortable && !!onSortChange,
-        renderCell: ({ row }: { row: TRow }) =>
-          col.renderCell ? (
-            col.renderCell(row)
-          ) : (
-            <Text size="sm" color="zinc-900" numberOfLines={1}>
-              {defaultCellText(row[col.key])}
-            </Text>
-          ),
-      })),
-    [columns, onSortChange],
-  );
-
-  const tableSort = useMemo<TableSort<TRow> | null>(
-    () => (sort ? { key: sort.key, dir: sort.order } : null),
-    [sort],
-  );
-
-  const rowStyle = useCallback(
-    (row: TRow) =>
-      value != null && String(row[rowKey]) === value ? { backgroundColor: colors.blue["50"] } : undefined,
-    [value, rowKey],
-  );
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange} height="90%" maxWidth={maxWidth} testID={testID}>
-      <View style={styles.root}>
-        {title ? (
-          <Text size="lg" weight="semibold" color="zinc-900" style={styles.title}>
-            {title}
-          </Text>
-        ) : null}
-
-        <SearchInput
-          testID="table-picker-search"
-          value={searchQuery}
-          onChangeText={onSearchChange}
-          placeholder={searchPlaceholder}
-          style={styles.search}
-        />
-
-        {filters && filters.length > 0 ? (
-          <View style={styles.filterRow}>
-            {filters.map((f) => (
-              <ColumnFilter
-                key={f.key}
-                column={f}
-                value={filterValues?.[f.key]}
-                onChange={(v) => onFilterChange?.(f.key, v)}
-                clearLabel={clearLabel}
-              />
-            ))}
-          </View>
-        ) : null}
-
-        <View style={styles.gridArea}>
-          {rows.length > 0 ? (
-            <Table<TRow>
-              columns={tableColumns}
-              rows={rows}
-              rowKey={rowKey}
-              sort={tableSort}
-              onSortChange={onSortChange ? (key) => toggleSort(key as string) : undefined}
-              onRowPress={handleSelect}
-              rowStyle={rowStyle}
-            />
-          ) : (
-            <View style={styles.center}>
-              {loading ? (
-                <ActivityIndicator />
-              ) : (
-                <Text size="sm" color="zinc-500">
-                  {emptyLabel ?? "No results"}
-                </Text>
-              )}
-            </View>
-          )}
-        </View>
-
-        <Pagination
-          page={page}
-          pageSize={pageSize}
-          rowCount={rows.length}
-          hasMore={hasMore}
-          total={total}
-          loading={loading}
-          onPageChange={onPageChange}
-        />
-      </View>
-    </Dialog>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    width: "100%",
-    gap: 12,
-    // Match the Dialog's own horizontal inset (the close button sits at 24) so
-    // the content isn't flush against the dialog edges.
-    paddingHorizontal: 24,
-    paddingBottom: 8,
-  },
-  title: {},
-  search: {
-    width: "100%",
-  },
-  filterRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: 8,
-  },
-  gridArea: {
-    flex: 1,
-    minHeight: 0,
-    borderWidth: 1,
-    borderColor: colors.border,
-    borderRadius: 12,
-    overflow: "hidden",
-  },
-  center: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 24,
-  },
-});

package/src/table_types.ts

@@ -1,47 +0,0 @@
-import type { ReactNode } from "react";
-import type { ViewStyle } from "react-native";
-
-export type SortDir = "asc" | "desc";
-
-export interface TableSort<TRow extends Record<string, unknown>> {
-  key: keyof TRow;
-  dir: SortDir;
-}
-
-export interface Column<TRow extends Record<string, unknown>> {
-  key: keyof TRow;
-  label: string;
-  width?: number;
-  /** Horizontal alignment of header + cell content. Default "left". */
-  align?: "left" | "right";
-  /** When true (and `onSortChange` is set), the header is pressable + shows a
-   *  sort arrow when this column is the active `sort`. */
-  sortable?: boolean;
-  renderCell?: (params: { row: TRow; column: Column<TRow> }) => ReactNode;
-}
-
-export interface TableProps<TRow extends Record<string, unknown>> {
-  columns: Column<TRow>[];
-  rows: (TRow | null | false)[];
-  /** Stable per-row key. Required when `renderDetail` is set (expansion is
-   *  tracked by this key, not row index, so it survives sort/filter). */
-  rowKey?: keyof TRow;
-  rowStyle?: (row: TRow) => ViewStyle | undefined;
-  /** Current sort. Pair with `onSortChange` to render sortable headers; the
-   *  parent owns the actual sorting of `rows` — this only drives the indicator. */
-  sort?: TableSort<TRow> | null;
-  onSortChange?: (key: keyof TRow) => void;
-  /** Click-to-select: pressing a row (except its interactive controls) calls
-   *  this — e.g. a picker that returns the chosen row. Mutually exclusive with
-   *  `renderDetail` (a row either expands or selects); `renderDetail` wins if
-   *  both are set. Pair with `rowStyle` to highlight the selected row. */
-  onRowPress?: (row: TRow) => void;
-  /** Render an inline detail panel, full-width below the row. When set, the
-   *  whole row (except its interactive controls) is click-to-expand. The row
-   *  detects controls by element/role, so cells need no special marking. */
-  renderDetail?: (row: TRow) => ReactNode;
-  /** Controlled set of expanded row keys. Omit for internal (uncontrolled) state. */
-  expandedKeys?: Set<string>;
-  /** Called when a row's expand state toggles (with its `rowKey` value). */
-  onToggleRow?: (key: string, row: TRow) => void;
-}