@lotics/ui 2.4.0 → 2.5.0

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;
-}