@multiplatform.one/table 6.0.0

package/src/components/DataTableBulkActions/index.tsx

@@ -0,0 +1,415 @@
+import { DotsThreeIcon } from "@phosphor-icons/react";
+import { downloadBlob } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type React from "react";
+import { useState } from "react";
+import { Button, zIndex } from "@multiplatform.one/forms";
+import { Popover, Text, View, XStack, YStack } from "tamagui";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+export interface BulkAction<T = any> {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  confirmMessage?: string;
+  confirmTitle?: string;
+  variant?: "default" | "destructive" | "secondary";
+  onExecute: (selectedItems: T[], clearSelection: () => void) => void | Promise<void>;
+  requiresConfirmation?: boolean;
+  disabled?: boolean;
+}
+
+export interface DataTableBulkActionsProps<T = any> {
+  selectedItems?: T[];
+  onClearSelection?: () => void;
+  actions: BulkAction<T>[];
+  maxVisibleActions?: number;
+  showSelectionCount?: boolean;
+  selectionKey?: keyof T;
+}
+
+export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T>) {
+  // Try to consume from DataTableStateContext (compound component pattern)
+  const ctx = useDataTableState();
+
+  // Resolve values: explicit props override context values
+  // For BulkActions, the table's row selection model provides selected rows
+  const selectedItems =
+    props.selectedItems ??
+    (ctx ? (ctx.table.getSelectedRowModel().rows.map((r: any) => r.original) as T[]) : []);
+
+  const onClearSelection =
+    props.onClearSelection ?? (ctx ? () => ctx.table.resetRowSelection() : () => {});
+
+  const {
+    actions,
+    maxVisibleActions = 3,
+    showSelectionCount = true,
+    selectionKey: _selectionKey = "id" as keyof T,
+  } = props;
+
+  const [confirmAction, setConfirmAction] = useState<BulkAction<T> | null>(null);
+  const [isExecuting, setIsExecuting] = useState<string | null>(null);
+  const { knobProps } = useResolvedKnobs();
+
+  const handleExecuteAction = async (action: BulkAction<T>) => {
+    if (action.requiresConfirmation) {
+      setConfirmAction(action);
+      return;
+    }
+
+    await executeAction(action);
+  };
+
+  const executeAction = async (action: BulkAction<T>) => {
+    setIsExecuting(action.id);
+    try {
+      await action.onExecute(selectedItems, onClearSelection);
+    } catch (error) {
+      console.error("Bulk action failed:", error);
+    } finally {
+      setIsExecuting(null);
+    }
+  };
+
+  const handleConfirmAction = async () => {
+    if (confirmAction) {
+      await executeAction(confirmAction);
+      setConfirmAction(null);
+    }
+  };
+
+  const visibleActions = actions.slice(0, maxVisibleActions);
+  const overflowActions = actions.slice(maxVisibleActions);
+
+  if (selectedItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <View
+        flexDirection="row"
+        alignItems="center"
+        {...knobProps.borderRadius}
+        {...knobProps.panelPadding}
+        gap="$3"
+        backgroundColor="$color2"
+        borderColor="$color6"
+      >
+        {showSelectionCount && (
+          <Text fontSize="$3" fontWeight="600" color="$accentColor">
+            {selectedItems.length} selected
+          </Text>
+        )}
+
+        <XStack gap="$2" flex={1}>
+          {visibleActions.map((action) => (
+            <Button
+              key={action.id}
+              size={knobProps.sizeToken}
+              variant="outlined"
+              theme={action.variant === "destructive" ? "red" : undefined}
+              disabled={action.disabled || isExecuting === action.id}
+              onPress={() => handleExecuteAction(action)}
+              {...knobProps.borderRadius}
+            >
+              {isExecuting === action.id ? "..." : action.label}
+            </Button>
+          ))}
+
+          {overflowActions.length > 0 && (
+            <BulkActionsOverflowMenu
+              actions={overflowActions}
+              selectedItems={selectedItems}
+              onExecuteAction={handleExecuteAction}
+              isExecuting={isExecuting}
+            />
+          )}
+        </XStack>
+
+        <Button
+          size={knobProps.sizeToken}
+          variant="outlined"
+          onPress={onClearSelection}
+          aria-label="Clear selection"
+          {...knobProps.borderRadius}
+        >
+          Clear
+        </Button>
+      </View>
+
+      {/* Confirmation Dialog */}
+      {confirmAction && (
+        <BulkActionConfirmationDialog
+          action={confirmAction}
+          selectedCount={selectedItems.length}
+          onConfirm={handleConfirmAction}
+          onCancel={() => setConfirmAction(null)}
+          isExecuting={isExecuting === confirmAction.id}
+        />
+      )}
+    </>
+  );
+}
+
+// Bulk Actions Overflow Menu
+
+interface BulkActionsOverflowMenuProps<T = any> {
+  actions: BulkAction<T>[];
+  selectedItems: T[];
+  onExecuteAction: (action: BulkAction<T>) => void;
+  isExecuting: string | null;
+}
+
+function BulkActionsOverflowMenu<T = any>({
+  actions,
+  selectedItems: _selectedItems,
+  onExecuteAction,
+  isExecuting,
+}: BulkActionsOverflowMenuProps<T>) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button
+          size={knobProps.sizeToken}
+          variant="outlined"
+          icon={<DotsThreeIcon size={16} />}
+          aria-label="More bulk actions"
+          {...knobProps.borderRadius}
+        />
+      </Popover.Trigger>
+
+      <Popover.Content
+        {...{
+          bw: 1,
+          bc: "$borderColor",
+          gap: knobProps.gap.gap,
+          py: knobProps.panelPadding.padding,
+          w: "100%",
+          h: "100%",
+        }}
+        {...knobProps.borderRadius}
+        borderWidth={1}
+        borderColor="$borderColor"
+        enterStyle={{ x: 0, y: -10, opacity: 0 }}
+        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+      >
+        <YStack gap="$1" padding="$2" minWidth={200}>
+          {actions.map((action) => (
+            <Button
+              key={action.id}
+              size={knobProps.sizeToken}
+              variant="outlined"
+              justifyContent="flex-start"
+              disabled={action.disabled || isExecuting === action.id}
+              onPress={() => onExecuteAction(action)}
+              {...knobProps.borderRadius}
+            >
+              {isExecuting === action.id ? "..." : action.label}
+            </Button>
+          ))}
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+// Bulk Action Confirmation Dialog
+
+interface BulkActionConfirmationDialogProps<T = any> {
+  action: BulkAction<T>;
+  selectedCount: number;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isExecuting: boolean;
+}
+
+function BulkActionConfirmationDialog<T = any>({
+  action,
+  selectedCount,
+  onConfirm,
+  onCancel,
+  isExecuting,
+}: BulkActionConfirmationDialogProps<T>) {
+  const { knobProps } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const dialogMaxWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  return (
+    <View
+      position="absolute"
+      top={0}
+      left={0}
+      right={0}
+      bottom={0}
+      backgroundColor="$shadowColor"
+      alignItems="center"
+      justifyContent="center"
+      zIndex={zIndex.loading}
+      padding="$4"
+    >
+      <View
+        backgroundColor="$background"
+        {...knobProps.borderRadius}
+        {...knobProps.panelPadding}
+        maxWidth={dialogMaxWidth}
+        width="100%"
+        borderColor="$borderColor"
+      >
+        <YStack {...knobProps.gapLg}>
+          <Text fontSize="$5" fontWeight="600">
+            {action.confirmTitle || `Confirm ${action.label}`}
+          </Text>
+
+          <Text fontSize="$3" color="$color10">
+            {action.confirmMessage ||
+              `Are you sure you want to ${action.label.toLowerCase()} ${selectedCount} item${
+                selectedCount > 1 ? "s" : ""
+              }?`}
+          </Text>
+
+          <XStack gap="$3" justifyContent="flex-end">
+            <Button
+              size={knobProps.sizeToken}
+              variant="outlined"
+              onPress={onCancel}
+              disabled={isExecuting}
+            >
+              Cancel
+            </Button>
+            <Button
+              size={knobProps.sizeToken}
+              theme={action.variant === "destructive" ? "red" : undefined}
+              onPress={onConfirm}
+              disabled={isExecuting}
+            >
+              {isExecuting ? "..." : action.label}
+            </Button>
+          </XStack>
+        </YStack>
+      </View>
+    </View>
+  );
+}
+
+// Row Selection Hook
+
+export interface UseRowSelectionOptions<T = any> {
+  data: T[];
+  selectionKey?: keyof T;
+  initialSelection?: T[];
+  onSelectionChange?: (selectedItems: T[]) => void;
+}
+
+export interface UseRowSelectionReturn<T = any> {
+  selectedItems: T[];
+  selectedIds: Set<string | number>;
+  isSelected: (item: T) => boolean;
+  isAllSelected: boolean;
+  isIndeterminate: boolean;
+  toggleItem: (item: T) => void;
+  toggleAll: () => void;
+  selectItems: (items: T[]) => void;
+  clearSelection: () => void;
+  selectAll: () => void;
+}
+
+export function useRowSelection<T = any>({
+  data,
+  selectionKey = "id" as keyof T,
+  initialSelection = [],
+  onSelectionChange,
+}: UseRowSelectionOptions<T>): UseRowSelectionReturn<T> {
+  const [selectedItems, setSelectedItems] = useState<T[]>(initialSelection);
+
+  const selectedIds = new Set(selectedItems.map((item) => item[selectionKey] as string | number));
+
+  const isSelected = (item: T): boolean => {
+    return selectedIds.has(item[selectionKey] as string | number);
+  };
+
+  const isAllSelected = data.length > 0 && selectedItems.length === data.length;
+  const isIndeterminate = selectedItems.length > 0 && selectedItems.length < data.length;
+
+  const toggleItem = (item: T) => {
+    const itemId = item[selectionKey] as string | number;
+    const newSelection = isSelected(item)
+      ? selectedItems.filter((selected) => selected[selectionKey] !== itemId)
+      : [...selectedItems, item];
+
+    setSelectedItems(newSelection);
+    onSelectionChange?.(newSelection);
+  };
+
+  const toggleAll = () => {
+    if (isAllSelected) {
+      setSelectedItems([]);
+      onSelectionChange?.([]);
+    } else {
+      setSelectedItems([...data]);
+      onSelectionChange?.([...data]);
+    }
+  };
+
+  const selectItems = (items: T[]) => {
+    setSelectedItems(items);
+    onSelectionChange?.(items);
+  };
+
+  const clearSelection = () => {
+    setSelectedItems([]);
+    onSelectionChange?.([]);
+  };
+
+  const selectAll = () => {
+    setSelectedItems([...data]);
+    onSelectionChange?.([...data]);
+  };
+
+  return {
+    selectedItems,
+    selectedIds,
+    isSelected,
+    isAllSelected,
+    isIndeterminate,
+    toggleItem,
+    toggleAll,
+    selectItems,
+    clearSelection,
+    selectAll,
+  };
+}
+
+// Bulk Actions Helper
+// Note: Removed hardcoded default actions. Users should define their own actions based on their specific needs.
+
+// Utility Functions
+
+export function convertToCSV<T extends object = any>(data: T[]): string {
+  if (data.length === 0) return "";
+
+  const headers = Object.keys(data[0]);
+  const csvRows = [
+    headers.join(","),
+    ...data.map((row) =>
+      headers
+        .map((header) => {
+          const value = row[header as keyof T];
+          // Escape commas and quotes in CSV
+          const stringValue = String(value || "");
+          return stringValue.includes(",") || stringValue.includes('"')
+            ? `"${stringValue.replace(/"/g, '""')}"`
+            : stringValue;
+        })
+        .join(","),
+    ),
+  ];
+
+  return csvRows.join("\n");
+}
+
+export function downloadCSV(content: string, filename: string): void {
+  const blob = new Blob([content], { type: "text/csv;charset=utf-8;" });
+  downloadBlob(blob, filename);
+}

package/src/components/DataTableCell/CellModalEditor.tsx

@@ -0,0 +1,92 @@
+/**
+ * CellModalEditor — wraps tall field types (FileUpload, Signature, RichText,
+ * etc.) in a Tamagui Dialog that opens on cell click. Cell shows a compact
+ * `FieldDisplay` summary; click opens a centered modal with the full editor.
+ *
+ * The inner field calls the row's `onChange` directly (live commits) — the
+ * modal is a presentation container, not a staging buffer. "Done" just closes;
+ * changes are already saved. This matches Airtable / Notion edit-modal UX.
+ */
+
+import { FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useState, type ReactNode } from "react";
+import { Button, Dialog, Text, View, XStack, YStack } from "tamagui";
+
+export interface CellModalEditorProps {
+  field: FieldDisplayType;
+  value: any;
+  fieldProps?: Record<string, any>;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** Full editor mounted inside the modal. */
+  children: ReactNode;
+  /** Title shown in the modal header. */
+  title?: string;
+}
+
+export function CellModalEditor({
+  field,
+  value,
+  fieldProps,
+  disabled,
+  readOnly,
+  children,
+  title,
+}: CellModalEditorProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = useCallback(() => {
+    if (disabled || readOnly) return;
+    setOpen(true);
+  }, [disabled, readOnly]);
+
+  return (
+    <>
+      <View
+        onPress={handleOpen}
+        cursor={disabled || readOnly ? "default" : "pointer"}
+        opacity={disabled ? 0.5 : 1}
+        flexDirection="row"
+        alignItems="center"
+        width="100%"
+        paddingHorizontal="$1"
+        paddingVertical="$1"
+        borderRadius="$2"
+        hoverStyle={!disabled && !readOnly ? { backgroundColor: "$backgroundHover" } : undefined}
+      >
+        <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
+      </View>
+      <Dialog open={open} onOpenChange={setOpen} modal>
+        <Dialog.Portal>
+          <Dialog.Overlay opacity={0.5} enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
+          <Dialog.Content
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation={knobProps.elevation}
+            enterStyle={{ y: -10, opacity: 0, scale: 0.96 }}
+            exitStyle={{ y: 10, opacity: 0, scale: 0.96 }}
+            maxWidth={720}
+            maxHeight="80vh"
+            width="90vw"
+          >
+            <Dialog.Title>
+              <Text fontSize="$5" fontWeight="600">
+                {title ?? "Edit"}
+              </Text>
+            </Dialog.Title>
+            <YStack flex={1} minHeight={0} marginTop="$3" marginBottom="$4">
+              {children}
+            </YStack>
+            <XStack gap="$2" justifyContent="flex-end">
+              <Dialog.Close asChild>
+                <Button>Done</Button>
+              </Dialog.Close>
+            </XStack>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    </>
+  );
+}

package/src/components/DataTableCell/DataTableCell.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack, Text } from "tamagui";
+
+const meta: Meta = {
+  title: "Table/DataTableCell",
+  parameters: {
+    status: { type: "stable" },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  name: "Main",
+  render: () => (
+    <YStack padding="$4">
+      <Text fontSize="$2" color="$color10">
+        DataTableCell renders field components based on column fieldType. It requires a DataTable
+        context to function. See DataTable stories for usage examples.
+      </Text>
+    </YStack>
+  ),
+};