@entropy-softworks/ui 2026.7.31

package/src/components/data-table.tsx

@@ -0,0 +1,223 @@
+import React from "react";
+import { FlatList, Pressable, View, type ListRenderItem, type ViewStyle } from "react-native";
+import { cn } from "../utils/cn";
+import { MutedText, Text } from "./text";
+import { Skeleton } from "./skeleton";
+
+export interface DataTableColumn<T> {
+  /** Stable identifier for the column; also the default cell value source. */
+  key: string;
+  /** Header label. */
+  header: string;
+  /** Fixed width (px). Mutually exclusive with `flex`; `width` wins if both set. */
+  width?: number;
+  /** Flex grow factor when no fixed `width` is given. Defaults to 1. */
+  flex?: number;
+  /** Custom cell renderer. Receives the whole row. */
+  render?: (row: T) => React.ReactNode;
+  /** Cell + header horizontal alignment. Defaults to "left". */
+  align?: "left" | "center" | "right";
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  data: T[];
+  /** Stable key for each row — required by the underlying list. */
+  keyExtractor: (row: T, index: number) => string;
+  /** Row press handler; when set, rows become pressable. */
+  onRowPress?: (row: T) => void;
+  /** Replaces the body with skeleton rows while true. */
+  loading?: boolean;
+  /** Number of skeleton rows to show while loading. Defaults to 5. */
+  loadingRowCount?: number;
+  /** Rendered when `data` is empty and not loading. */
+  emptyState?: React.ReactNode;
+  /** Fallback empty message when `emptyState` is not provided. */
+  emptyMessage?: string;
+  className?: string;
+}
+
+const alignClass = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+} as const;
+
+const alignItems: Record<
+  NonNullable<DataTableColumn<unknown>["align"]>,
+  ViewStyle["alignItems"]
+> = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+};
+
+/**
+ * Resolve a column's layout style. `width` (fixed px) takes precedence over
+ * `flex` (grow factor, default 1). Kept pure so layout rules are unit-testable
+ * without a render host.
+ */
+export function resolveColumnStyle<T>(column: DataTableColumn<T>): ViewStyle {
+  const align = column.align ?? "left";
+  const base: ViewStyle = {
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    justifyContent: "center",
+    alignItems: alignItems[align],
+  };
+  if (typeof column.width === "number") {
+    return { ...base, width: column.width };
+  }
+  return { ...base, flex: column.flex ?? 1 };
+}
+
+/** Which body the table renders: skeleton rows, an empty placeholder, or data. */
+export type DataTableBodyMode = "loading" | "empty" | "data";
+
+/**
+ * Decide the body mode from the loading flag + row count. Loading wins over
+ * everything; an empty data set (when not loading) shows the empty state.
+ * Pure so the branch logic is unit-testable without a render host.
+ */
+export function dataTableBodyMode(loading: boolean, rowCount: number): DataTableBodyMode {
+  if (loading) {
+    return "loading";
+  }
+  return rowCount === 0 ? "empty" : "data";
+}
+
+function HeaderRowInner<T>({ columns }: { columns: DataTableColumn<T>[] }) {
+  return (
+    <View
+      className={cn(
+        "flex-row border-b border-border bg-card dark:border-neutral-800 dark:bg-neutral-900/50"
+      )}
+      accessibilityRole="header"
+    >
+      {columns.map((column) => (
+        <View key={column.key} style={resolveColumnStyle(column)}>
+          <Text
+            className={cn(
+              "text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+              alignClass[column.align ?? "left"]
+            )}
+            numberOfLines={1}
+          >
+            {column.header}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+// Memoized so an unchanged row (stable `columns` + `onPress` identity) skips
+// re-rendering when the FlatList recycles. `React.memo` on a generic function
+// erases the type parameter, so we cast back to a generic-preserving signature.
+const HeaderRow = React.memo(HeaderRowInner) as typeof HeaderRowInner;
+
+function DataRowInner<T>({
+  row,
+  columns,
+  onPress,
+}: {
+  row: T;
+  columns: DataTableColumn<T>[];
+  onPress?: (row: T) => void;
+}) {
+  const cells = (
+    <>
+      {columns.map((column) => (
+        <View key={column.key} style={resolveColumnStyle(column)}>
+          {column.render ? (
+            column.render(row)
+          ) : (
+            <Text className={cn("text-sm text-foreground", alignClass[column.align ?? "left"])}>
+              {String((row as Record<string, unknown>)[column.key] ?? "")}
+            </Text>
+          )}
+        </View>
+      ))}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        className="flex-row border-b border-border active:bg-accent dark:border-neutral-800"
+        onPress={() => onPress(row)}
+        accessibilityRole="button"
+      >
+        {cells}
+      </Pressable>
+    );
+  }
+
+  return <View className="flex-row border-b border-border dark:border-neutral-800">{cells}</View>;
+}
+
+const DataRow = React.memo(DataRowInner) as typeof DataRowInner;
+
+/**
+ * Generic, typed data table for admin dashboards. Renders a sticky-ish header
+ * row above a virtualised `FlatList` body (react-native's built-in list — the
+ * package does not depend on `@shopify/flash-list`, and adding a runtime dep is
+ * out of scope). Works on RN web (the primary admin target) and native.
+ *
+ * Loading shows skeleton rows; an empty data set shows `emptyState` (or
+ * `emptyMessage`). Columns size by fixed `width` or `flex`, support custom
+ * `render`, and alignment.
+ */
+export function DataTable<T>({
+  columns,
+  data,
+  keyExtractor,
+  onRowPress,
+  loading = false,
+  loadingRowCount = 5,
+  emptyState,
+  emptyMessage = "No data",
+  className,
+}: DataTableProps<T>) {
+  const mode = dataTableBodyMode(loading, data.length);
+  // Stable `renderItem` identity (only re-created when `columns`/`onRowPress`
+  // change) so the memoized `DataRow` can recycle. `extraData` tells FlatList
+  // to re-render rows when either of those closed-over deps change.
+  const renderItem = React.useCallback<ListRenderItem<T>>(
+    ({ item }) => <DataRow row={item} columns={columns} onPress={onRowPress} />,
+    [columns, onRowPress]
+  );
+  return (
+    <View
+      className={cn(
+        "overflow-hidden rounded-lg border border-border dark:border-neutral-800",
+        className
+      )}
+    >
+      <HeaderRow columns={columns} />
+      {mode === "loading" ? (
+        <View>
+          {Array.from({ length: loadingRowCount }).map((_, i) => (
+            <View
+              key={i}
+              className="flex-row items-center border-b border-border px-3 py-3 dark:border-neutral-800"
+            >
+              <Skeleton className="h-4 flex-1" />
+            </View>
+          ))}
+        </View>
+      ) : mode === "empty" ? (
+        <View className="items-center justify-center px-4 py-12">
+          {emptyState ?? <MutedText className="text-sm">{emptyMessage}</MutedText>}
+        </View>
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={keyExtractor}
+          renderItem={renderItem}
+          extraData={[columns, onRowPress]}
+        />
+      )}
+    </View>
+  );
+}

package/src/components/dialog.tsx

@@ -0,0 +1,376 @@
+import React, { useRef, useState } from "react";
+import {
+  type LayoutChangeEvent,
+  PanResponder,
+  Platform,
+  Pressable,
+  Text as RNText,
+  type TextStyle,
+  useWindowDimensions,
+  View,
+  type ViewStyle,
+} from "react-native";
+import * as DialogPrimitive from "@rn-primitives/dialog";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { cn } from "../utils/cn";
+
+// ── Main Dialog ──
+
+interface DialogProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  showCloseButton?: boolean;
+  draggable?: boolean;
+  maxWidth?: number;
+  /**
+   * When false, clicking the backdrop does NOT dismiss the dialog —
+   * required for any dialog that holds an unrecoverable input
+   * (master password, step-up confirmation, half-typed import). An
+   * accidental drag-then-click on the backdrop otherwise loses the
+   * user's typing with no undo. Defaults to true to keep the simple
+   * "click outside to cancel" pattern for non-input dialogs.
+   */
+  dismissOnBackdrop?: boolean;
+}
+
+export function Dialog({
+  visible,
+  onClose,
+  title,
+  children,
+  showCloseButton = true,
+  draggable = false,
+  maxWidth = 400,
+  dismissOnBackdrop = true,
+}: DialogProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const { width: winW, height: winH } = useWindowDimensions();
+
+  // Drag state
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const dragStart = useRef({ x: 0, y: 0 });
+
+  // Reset position when the dialog opens.
+  const prevVisible = useRef(visible);
+  if (visible && !prevVisible.current) {
+    offsetRef.current = { x: 0, y: 0 };
+    setOffset({ x: 0, y: 0 });
+  }
+  prevVisible.current = visible;
+
+  const winWRef = useRef(winW);
+  const winHRef = useRef(winH);
+  const maxWidthRef = useRef(maxWidth);
+  winWRef.current = winW;
+  winHRef.current = winH;
+  maxWidthRef.current = maxWidth;
+
+  const dialogLayoutRef = useRef({ width: 0, height: 0 });
+  // Measured height also lives in state: the centering transform reads it at
+  // render time, and a ref alone never re-renders after onLayout — so tall
+  // dialogs (e.g. the legal popup) stayed pinned at the fallback height and
+  // rendered vertically off-center until a drag forced a re-render.
+  const [dialogH, setDialogH] = useState(0);
+  const onDialogLayout = React.useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    dialogLayoutRef.current = { width, height };
+    if (height > 0) {
+      setDialogH(height);
+    }
+  }, []);
+
+  const clampOffset = (raw: { x: number; y: number }) => {
+    const w = winWRef.current;
+    const h = winHRef.current;
+    const dw = dialogLayoutRef.current.width || Math.min(maxWidthRef.current, w * 0.9);
+    const dh = dialogLayoutRef.current.height || 200;
+    const pad = 0.25;
+    const maxX = (w - dw * pad) / 2;
+    const maxY = (h - dh * pad) / 2;
+    return {
+      x: Math.max(-maxX, Math.min(maxX, raw.x)),
+      y: Math.max(-maxY, Math.min(maxY, raw.y)),
+    };
+  };
+
+  const activePanResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: (evt) => {
+        if (Platform.OS === "web") {
+          const webEvent = evt.nativeEvent as unknown as { target?: HTMLElement };
+          const target = webEvent.target;
+          if (target && typeof target.closest === "function") {
+            const interactive = target.closest(
+              'input, textarea, select, button, a, label, [role="button"], [role="textbox"], [contenteditable="true"]'
+            );
+            if (interactive) {
+              return false;
+            }
+          }
+        }
+        return true;
+      },
+      onMoveShouldSetPanResponder: (_, gesture) =>
+        Math.abs(gesture.dx) > 8 || Math.abs(gesture.dy) > 8,
+      onPanResponderGrant: () => {
+        dragStart.current = { x: offsetRef.current.x, y: offsetRef.current.y };
+      },
+      onPanResponderMove: (_, gesture) => {
+        const next = {
+          x: dragStart.current.x + gesture.dx,
+          y: dragStart.current.y + gesture.dy,
+        };
+        const clamped = clampOffset(next);
+        offsetRef.current = clamped;
+        setOffset(clamped);
+      },
+    })
+  ).current;
+
+  return (
+    <DialogPrimitive.Root
+      open={visible}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay
+          className="absolute inset-0 bg-black/50"
+          closeOnPress={dismissOnBackdrop}
+        />
+        <DialogPrimitive.Content
+          onLayout={onDialogLayout}
+          className={cn(
+            "absolute self-center rounded-xl p-5",
+            isDark ? "bg-neutral-900" : "bg-white",
+            Platform.OS === "web" && "shadow-lg"
+          )}
+          style={
+            {
+              width: "90%",
+              maxWidth,
+              top: "50%",
+              left: "50%",
+              // Web: center with a CSS percentage translate of the element's
+              // OWN size — no height measurement (onLayout doesn't reliably
+              // fire for the portaled content, which left tall dialogs like the
+              // legal popup pinned to a stale fallback height and off-center).
+              // Native: RN has no % translate, so keep the measured math.
+              transform:
+                Platform.OS === "web"
+                  ? `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`
+                  : [
+                      { translateX: -(Math.min(maxWidth, winW * 0.9) / 2) + offset.x },
+                      { translateY: -(dialogH || 100) / 2 + offset.y },
+                    ],
+            } as ViewStyle & Record<string, unknown>
+          }
+        >
+          {/* Radix accessibility: always render a Title. */}
+          {title ? null : (
+            <DialogPrimitive.Title
+              className="absolute h-px w-px overflow-hidden"
+              style={{ clip: "rect(0,0,0,0)" } as TextStyle & Record<string, unknown>}
+            >
+              Dialog
+            </DialogPrimitive.Title>
+          )}
+
+          {title || showCloseButton ? (
+            <View
+              className="mb-4 flex-row items-center justify-between"
+              {...(draggable ? activePanResponder.panHandlers : {})}
+              {...(draggable && Platform.OS === "web"
+                ? {
+                    draggable: false,
+                    onDragStart: (e: { preventDefault?: () => void }) => {
+                      e.preventDefault?.();
+                    },
+                  }
+                : {})}
+              style={
+                draggable
+                  ? ({
+                      cursor: "grab",
+                      userSelect: "none",
+                      WebkitUserDrag: "none",
+                      userDrag: "none",
+                    } as unknown as ViewStyle)
+                  : undefined
+              }
+            >
+              {title ? (
+                <DialogPrimitive.Title className="flex-1 text-xl font-bold text-foreground dark:text-white">
+                  {title}
+                </DialogPrimitive.Title>
+              ) : null}
+              {showCloseButton ? (
+                <DialogPrimitive.Close asChild>
+                  <Pressable
+                    onPress={onClose}
+                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                    className="rounded p-2 active:opacity-70"
+                  >
+                    <Ionicons name="close" size={24} color={isDark ? "#999999" : "#666666"} />
+                  </Pressable>
+                </DialogPrimitive.Close>
+              ) : null}
+            </View>
+          ) : null}
+
+          {children}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}
+
+// ── Sub-components ──
+
+interface DialogContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogContent({ children, className }: DialogContentProps) {
+  return <View className={cn("py-2", className)}>{children}</View>;
+}
+
+interface DialogFooterProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: ViewStyle;
+}
+
+export function DialogFooter({ children, className, style }: DialogFooterProps) {
+  return (
+    <View className={cn("mt-5 flex-row items-center justify-end gap-3", className)} style={style}>
+      {children}
+    </View>
+  );
+}
+
+interface DialogButtonProps {
+  onPress: () => void;
+  variant?: "primary" | "secondary" | "ghost" | "destructive";
+  children: React.ReactNode;
+  accessibilityLabel?: string;
+  accessibilityRole?: "button" | "link" | "none";
+}
+
+export function DialogButton({
+  onPress,
+  variant = "primary",
+  children,
+  accessibilityLabel,
+  accessibilityRole,
+}: DialogButtonProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  const base = "rounded-lg px-4 py-2.5 active:opacity-70";
+
+  const variantClass = (() => {
+    switch (variant) {
+      case "primary":
+        return isDark ? "bg-white" : "bg-black";
+      case "secondary":
+        return cn("border", isDark ? "border-neutral-600" : "border-neutral-300");
+      case "ghost":
+        return "";
+      case "destructive":
+        return "bg-destructive";
+    }
+  })();
+
+  const textColor = (() => {
+    switch (variant) {
+      case "primary":
+        return isDark ? "#000000" : "#FFFFFF";
+      case "secondary":
+      case "ghost":
+        return isDark ? "#FFFFFF" : "#000000";
+      case "destructive":
+        return "#FFFFFF";
+    }
+  })();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      className={cn(base, variantClass)}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+    >
+      <RNText style={{ color: textColor, fontSize: 14, fontWeight: "600", textAlign: "center" }}>
+        {children}
+      </RNText>
+    </Pressable>
+  );
+}
+
+// ── ConfirmDialog ──
+//
+// Cross-platform replacement for `window.confirm` / `Alert.alert`. The
+// browser-native variants look out of place in our UI and split web vs.
+// native flows; this gives both platforms one consistent prompt.
+
+interface ConfirmDialogProps {
+  visible: boolean;
+  title: string;
+  message?: string;
+  /** Confirm-button label. Defaults to "Confirm". */
+  confirmLabel?: string;
+  /** Cancel-button label. Defaults to "Cancel". */
+  cancelLabel?: string;
+  /** Render the confirm button in the destructive (red) style. */
+  destructive?: boolean;
+  /** Hide the cancel button — useful for one-button info prompts. */
+  hideCancel?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmDialog({
+  visible,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  hideCancel = false,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  return (
+    <Dialog visible={visible} onClose={onCancel} title={title} maxWidth={400}>
+      {message ? (
+        <DialogContent>
+          <RNText className="text-sm text-foreground dark:text-white">{message}</RNText>
+        </DialogContent>
+      ) : null}
+      <DialogFooter>
+        {!hideCancel && (
+          <DialogButton variant="secondary" onPress={onCancel} accessibilityLabel={cancelLabel}>
+            {cancelLabel}
+          </DialogButton>
+        )}
+        <DialogButton
+          variant={destructive ? "destructive" : "primary"}
+          onPress={onConfirm}
+          accessibilityLabel={confirmLabel}
+        >
+          {confirmLabel}
+        </DialogButton>
+      </DialogFooter>
+    </Dialog>
+  );
+}