@multiplatform.one/table 6.0.0

package/src/components/DataTableViewOptions/index.tsx

@@ -0,0 +1,592 @@
+import {
+  EyeIcon,
+  EyeSlashIcon,
+  ArrowCounterClockwiseIcon,
+  FloppyDiskIcon,
+  GearIcon,
+} from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useState } from "react";
+import { Button, Input, Slider, Switch } from "@multiplatform.one/forms";
+import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
+import type { TableView } from "../../types";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+export interface DataTableViewOptionsProps {
+  // Column Management
+  columns?: Array<{
+    id: string;
+    label: string;
+    visible: boolean;
+    order: number;
+    width?: number;
+    canHide?: boolean;
+    canResize?: boolean;
+    canReorder?: boolean;
+  }>;
+  onColumnVisibilityChange?: (columnId: string, visible: boolean) => void;
+  onColumnOrderChange?: (columnOrder: string[]) => void;
+  onColumnSizingChange?: (columnSizing: Record<string, number>) => void;
+
+  // View Management
+  views?: TableView[];
+  activeViewId?: string;
+  onSaveView?: (name: string) => void;
+  onLoadView?: (viewId: string) => void;
+  onResetToDefault?: () => void;
+
+  // Options
+  showColumnVisibility?: boolean;
+  showColumnOrdering?: boolean;
+  showColumnResizing?: boolean;
+  showViewManagement?: boolean;
+  compact?: boolean;
+}
+
+export function DataTableViewOptions(props: DataTableViewOptionsProps) {
+  // Try to consume from DataTableStateContext (compound component pattern)
+  const ctx = useDataTableState();
+
+  // Resolve values: explicit props override context values
+  const columns =
+    props.columns ??
+    (ctx
+      ? ctx.table.getAllColumns().map((col, index) => ({
+          id: col.id,
+          label: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id,
+          visible: col.getIsVisible(),
+          order: index,
+          width: col.getSize(),
+          canHide: col.getCanHide(),
+          canResize: col.getCanResize(),
+        }))
+      : []);
+
+  const onColumnVisibilityChange =
+    props.onColumnVisibilityChange ??
+    (ctx
+      ? (columnId: string, visible: boolean) =>
+          ctx.actions.toggleColumnVisibility(columnId, visible)
+      : () => {});
+
+  const onColumnOrderChange =
+    props.onColumnOrderChange ?? (ctx ? ctx.actions.setColumnOrder : () => {});
+
+  const onColumnSizingChange =
+    props.onColumnSizingChange ?? (ctx ? ctx.actions.setColumnSizing : () => {});
+
+  const views = props.views ?? ctx?.state.views ?? [];
+  const activeViewId = props.activeViewId ?? ctx?.state.activeViewId;
+  const onSaveView = props.onSaveView ?? ctx?.actions.saveView ?? (() => {});
+  const onLoadView = props.onLoadView ?? ctx?.actions.loadView ?? (() => {});
+  const onResetToDefault = props.onResetToDefault ?? ctx?.actions.resetToDefault ?? (() => {});
+
+  const {
+    showColumnVisibility = true,
+    showColumnOrdering = false,
+    showColumnResizing = false,
+    showViewManagement = false,
+    compact = false,
+  } = props;
+
+  const { knobProps } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const popoverMaxWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const scrollMaxHeight = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  const [showOptions, setShowOptions] = useState(false);
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>(
+    Object.fromEntries(columns.filter((col) => col.width).map((col) => [col.id, col.width!])),
+  );
+
+  const handleColumnWidthChange = (columnId: string, width: number) => {
+    const newWidths = { ...columnWidths, [columnId]: width };
+    setColumnWidths(newWidths);
+    onColumnSizingChange(newWidths);
+  };
+
+  const visibleColumns = columns.filter((col) => col.visible);
+  const hiddenColumns = columns.filter((col) => !col.visible);
+
+  if (compact) {
+    return (
+      <Popover open={showOptions} onOpenChange={setShowOptions}>
+        <Popover.Trigger asChild>
+          <Button
+            size={knobProps.sizeToken}
+            variant="outlined"
+            icon={<GearIcon size={16} />}
+            aria-label="Open table view options"
+            aria-expanded={showOptions}
+            aria-haspopup="dialog"
+          >
+            View
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content
+          {...knobProps.borderRadius}
+          borderWidth={1}
+          borderColor="$borderColor"
+          enterStyle={{ x: 0, y: -10, opacity: 0 }}
+          exitStyle={{ x: 0, y: -10, opacity: 0 }}
+          transition={[
+            "quick",
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          maxWidth={popoverMaxWidth}
+        >
+          <ViewOptionsContent
+            columns={columns}
+            visibleColumns={visibleColumns}
+            hiddenColumns={hiddenColumns}
+            columnWidths={columnWidths}
+            views={views}
+            activeViewId={activeViewId}
+            onColumnVisibilityChange={onColumnVisibilityChange}
+            onColumnWidthChange={handleColumnWidthChange}
+            onColumnOrderChange={onColumnOrderChange}
+            onColumnSizingChange={onColumnSizingChange}
+            onSaveView={onSaveView}
+            onLoadView={onLoadView}
+            onResetToDefault={onResetToDefault}
+            showColumnVisibility={showColumnVisibility}
+            showColumnOrdering={showColumnOrdering}
+            showColumnResizing={showColumnResizing}
+            showViewManagement={showViewManagement}
+            onClose={() => setShowOptions(false)}
+          />
+        </Popover.Content>
+      </Popover>
+    );
+  }
+
+  return (
+    <YStack
+      {...knobProps.borderRadius}
+      {...knobProps.panelPadding}
+      {...{ backgroundColor: "$background" }}
+      borderColor="$borderColor"
+      aria-label="Table view options"
+      aria-live="polite"
+    >
+      <XStack alignItems="center" justifyContent="space-between">
+        <XStack alignItems="center" gap="$2">
+          <GearIcon size={16} />
+          <Text fontSize="$4" fontWeight="600">
+            View Options
+          </Text>
+        </XStack>
+
+        <Button
+          size={knobProps.sizeToken}
+          variant="outlined"
+          onPress={onResetToDefault}
+          icon={<ArrowCounterClockwiseIcon size={16} />}
+        >
+          Reset
+        </Button>
+      </XStack>
+
+      <Separator />
+
+      <ScrollView maxHeight={scrollMaxHeight}>
+        <YStack gap="$4">
+          {/* Column Visibility */}
+          {showColumnVisibility && (
+            <ColumnVisibilitySection
+              visibleColumns={visibleColumns}
+              hiddenColumns={hiddenColumns}
+              onColumnVisibilityChange={onColumnVisibilityChange}
+            />
+          )}
+
+          {/* Column Resizing */}
+          {showColumnResizing && (
+            <ColumnResizingSection
+              columns={columns.filter((col) => col.canResize)}
+              columnWidths={columnWidths}
+              onColumnWidthChange={handleColumnWidthChange}
+            />
+          )}
+
+          {/* View Management */}
+          {showViewManagement && (
+            <ViewManagementSection
+              views={views}
+              activeViewId={activeViewId}
+              onSaveView={onSaveView}
+              onLoadView={onLoadView}
+            />
+          )}
+        </YStack>
+      </ScrollView>
+    </YStack>
+  );
+}
+
+// View Options Content (for compact popover)
+
+interface ViewOptionsContentProps extends DataTableViewOptionsProps {
+  visibleColumns: Array<{
+    id: string;
+    label: string;
+    visible: boolean;
+    order: number;
+    width?: number;
+    canHide?: boolean;
+    canResize?: boolean;
+    canReorder?: boolean;
+  }>;
+  hiddenColumns: Array<{
+    id: string;
+    label: string;
+    visible: boolean;
+    order: number;
+    width?: number;
+    canHide?: boolean;
+    canResize?: boolean;
+    canReorder?: boolean;
+  }>;
+  columnWidths: Record<string, number>;
+  onColumnWidthChange: (columnId: string, width: number) => void;
+  onClose: () => void;
+}
+
+function ViewOptionsContent({
+  visibleColumns,
+  hiddenColumns,
+  onColumnVisibilityChange,
+  onResetToDefault,
+  showColumnVisibility,
+  onClose,
+}: ViewOptionsContentProps) {
+  const { knobProps } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const compactScrollMaxHeight = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+
+  const handleVisibilityChange = onColumnVisibilityChange ?? (() => {});
+  const handleResetToDefault = onResetToDefault ?? (() => {});
+
+  return (
+    <YStack {...knobProps.panelPadding} gap="$4" minWidth={250}>
+      <Text fontSize="$4" fontWeight="600">
+        View Options
+      </Text>
+
+      <ScrollView maxHeight={compactScrollMaxHeight}>
+        <YStack gap="$4">
+          {/* Column Visibility */}
+          {showColumnVisibility && (
+            <YStack gap="$2">
+              <Text fontSize="$3" fontWeight="500">
+                Column Visibility
+              </Text>
+              <YStack gap="$1">
+                {visibleColumns.map((column) => (
+                  <XStack key={column.id} alignItems="center" justifyContent="space-between">
+                    <XStack alignItems="center" gap="$2">
+                      <EyeIcon size={16} color="$color10" />
+                      <Text fontSize="$3">{column.label}</Text>
+                    </XStack>
+                    <Switch
+                      size="$2"
+                      checked={column.visible}
+                      onCheckedChange={(checked) => handleVisibilityChange(column.id, checked)}
+                    />
+                  </XStack>
+                ))}
+                {hiddenColumns.map((column) => (
+                  <XStack key={column.id} alignItems="center" justifyContent="space-between">
+                    <XStack alignItems="center" gap="$2">
+                      <EyeSlashIcon size={16} color="$color10" />
+                      <Text fontSize="$3" color="$color10">
+                        {column.label}
+                      </Text>
+                    </XStack>
+                    <Switch
+                      size="$2"
+                      checked={column.visible}
+                      onCheckedChange={(checked) => handleVisibilityChange(column.id, checked)}
+                    />
+                  </XStack>
+                ))}
+              </YStack>
+            </YStack>
+          )}
+
+          {/* Quick Actions */}
+          <YStack gap="$2">
+            <Button
+              size={knobProps.sizeToken}
+              variant="outlined"
+              onPress={handleResetToDefault}
+              icon={<ArrowCounterClockwiseIcon size={16} />}
+            >
+              Reset to Default
+            </Button>
+          </YStack>
+        </YStack>
+      </ScrollView>
+
+      <XStack gap="$2" justifyContent="flex-end">
+        <Button size={knobProps.sizeToken} variant="outlined" onPress={onClose}>
+          Close
+        </Button>
+      </XStack>
+    </YStack>
+  );
+}
+
+// Column Visibility Section
+
+interface ColumnVisibilitySectionProps {
+  visibleColumns: Array<{
+    id: string;
+    label: string;
+    visible: boolean;
+    order: number;
+  }>;
+  hiddenColumns: Array<{
+    id: string;
+    label: string;
+    visible: boolean;
+    order: number;
+  }>;
+  onColumnVisibilityChange: (columnId: string, visible: boolean) => void;
+}
+
+function ColumnVisibilitySection({
+  visibleColumns,
+  hiddenColumns,
+  onColumnVisibilityChange,
+}: ColumnVisibilitySectionProps) {
+  return (
+    <YStack gap="$3">
+      <Text fontSize="$4" fontWeight="600">
+        Column Visibility
+      </Text>
+
+      {/* Visible Columns */}
+      {visibleColumns.length > 0 && (
+        <YStack gap="$2">
+          <Text fontSize="$3" fontWeight="500" color="$color10">
+            Visible Columns
+          </Text>
+          <YStack gap="$1">
+            {visibleColumns.map((column) => (
+              <XStack key={column.id} alignItems="center" justifyContent="space-between">
+                <XStack alignItems="center" gap="$2">
+                  <EyeIcon size={16} color="$green10" />
+                  <Text fontSize="$3">{column.label}</Text>
+                </XStack>
+                <Switch
+                  size="$2"
+                  checked={column.visible}
+                  onCheckedChange={(checked) => onColumnVisibilityChange(column.id, checked)}
+                />
+              </XStack>
+            ))}
+          </YStack>
+        </YStack>
+      )}
+
+      {/* Hidden Columns */}
+      {hiddenColumns.length > 0 && (
+        <YStack gap="$2">
+          <Text fontSize="$3" fontWeight="500" color="$color10">
+            Hidden Columns
+          </Text>
+          <YStack gap="$1">
+            {hiddenColumns.map((column) => (
+              <XStack key={column.id} alignItems="center" justifyContent="space-between">
+                <XStack alignItems="center" gap="$2">
+                  <EyeSlashIcon size={16} color="$color10" />
+                  <Text fontSize="$3" color="$color10">
+                    {column.label}
+                  </Text>
+                </XStack>
+                <Switch
+                  size="$2"
+                  checked={column.visible}
+                  onCheckedChange={(checked) => onColumnVisibilityChange(column.id, checked)}
+                />
+              </XStack>
+            ))}
+          </YStack>
+        </YStack>
+      )}
+    </YStack>
+  );
+}
+
+// Column Resizing Section
+
+interface ColumnResizingSectionProps {
+  columns: Array<{
+    id: string;
+    label: string;
+    width?: number;
+  }>;
+  columnWidths: Record<string, number>;
+  onColumnWidthChange: (columnId: string, width: number) => void;
+}
+
+function ColumnResizingSection({
+  columns,
+  columnWidths,
+  onColumnWidthChange,
+}: ColumnResizingSectionProps) {
+  return (
+    <YStack gap="$3">
+      <Text fontSize="$4" fontWeight="600">
+        Column Widths
+      </Text>
+
+      <YStack gap="$3">
+        {columns.map((column) => (
+          <YStack key={column.id} gap="$2">
+            <Text fontSize="$3" fontWeight="500">
+              {column.label}
+            </Text>
+            <XStack alignItems="center" gap="$3">
+              <View flex={1}>
+                <Slider
+                  value={[columnWidths[column.id] || column.width || 100]}
+                  onValueChange={(value) => onColumnWidthChange(column.id, value[0])}
+                  min={50}
+                  max={300}
+                  step={10}
+                />
+              </View>
+              <Text fontSize="$3" color="$color10" minWidth={40} textAlign="right">
+                {columnWidths[column.id] || column.width || 100}px
+              </Text>
+            </XStack>
+          </YStack>
+        ))}
+      </YStack>
+    </YStack>
+  );
+}
+
+// View Management Section
+
+interface ViewManagementSectionProps {
+  views: TableView[];
+  activeViewId?: string;
+  onSaveView: (name: string) => void;
+  onLoadView: (viewId: string) => void;
+}
+
+function ViewManagementSection({
+  views,
+  activeViewId,
+  onSaveView,
+  onLoadView,
+}: ViewManagementSectionProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [viewName, setViewName] = useState("");
+
+  const handleSaveView = () => {
+    if (viewName.trim()) {
+      onSaveView(viewName.trim());
+      setViewName("");
+      setShowSaveDialog(false);
+    }
+  };
+
+  return (
+    <YStack gap="$3">
+      <Text fontSize="$4" fontWeight="600">
+        Saved Views
+      </Text>
+
+      {/* Save Current View */}
+      <Popover open={showSaveDialog} onOpenChange={setShowSaveDialog}>
+        <Popover.Trigger asChild>
+          <Button size={knobProps.sizeToken} variant="outlined" icon={<FloppyDiskIcon size={16} />}>
+            Save Current View
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content
+          {...knobProps.borderRadius}
+          borderWidth={1}
+          borderColor="$borderColor"
+          enterStyle={{ x: 0, y: -10, opacity: 0 }}
+          exitStyle={{ x: 0, y: -10, opacity: 0 }}
+          transition={[
+            "quick",
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        >
+          <YStack {...knobProps.panelPadding} gap="$3" minWidth={250}>
+            <Text fontSize="$4" fontWeight="500">
+              Save View
+            </Text>
+            <Input
+              placeholder="Enter view name..."
+              value={viewName}
+              onChangeText={setViewName}
+              inputProps={{
+                onKeyDown: (e: React.KeyboardEvent) => {
+                  if (e.key === "Enter" && viewName.trim()) handleSaveView();
+                },
+              }}
+            />
+            <XStack gap="$2" justifyContent="flex-end">
+              <Button
+                size={knobProps.sizeToken}
+                variant="outlined"
+                onPress={() => setShowSaveDialog(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                size={knobProps.sizeToken}
+                onPress={handleSaveView}
+                disabled={!viewName.trim()}
+              >
+                Save
+              </Button>
+            </XStack>
+          </YStack>
+        </Popover.Content>
+      </Popover>
+
+      {/* Saved Views List */}
+      {views.length > 0 && (
+        <YStack gap="$1">
+          {views.map((view) => (
+            <XStack
+              key={view.id}
+              alignItems="center"
+              justifyContent="space-between"
+              padding="$2"
+              backgroundColor={activeViewId === view.id ? "$color2" : "transparent"}
+              borderRadius="$2"
+              hoverStyle={{ backgroundColor: "$color1" }}
+            >
+              <Text fontSize="$3">{view.name}</Text>
+              <Button
+                size="$2"
+                variant="outlined"
+                onPress={() => onLoadView(view.id)}
+                disabled={activeViewId === view.id}
+              >
+                Load
+              </Button>
+            </XStack>
+          ))}
+        </YStack>
+      )}
+    </YStack>
+  );
+}

package/src/components/FilterManager.spec.tsx

@@ -0,0 +1,63 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { FilterManager } from "./FilterManager";
+describe("FilterManager", () => {
+  it("renders with generic filter definitions (no Frappe metadata)", () => {
+    const genericFilters: Array<[string, string, any]> = [
+      ["name", "contains", "Pika"],
+      ["type", "is", "Electric"],
+      ["hp", "greaterThan", 50],
+    ];
+    const onSave = vi.fn();
+
+    const { getByText } = renderWithProviders(
+      <FilterManager currentFilters={genericFilters} onSaveFilter={onSave} />,
+    );
+
+    // The component should render the "Save Filter" button showing filter count
+    expect(getByText("Save Filter")).toBeDefined();
+  });
+
+  it("shows filter count from generic filter array", () => {
+    const genericFilters: Array<[string, string, any]> = [
+      ["status", "is", "active"],
+      ["age", "greaterThan", 18],
+    ];
+    const onSave = vi.fn();
+
+    const { container } = renderWithProviders(
+      <FilterManager currentFilters={genericFilters} onSaveFilter={onSave} />,
+    );
+
+    // The component should be rendered (the filter count text is inside the dialog)
+    expect(container.querySelector("button")).toBeDefined();
+  });
+
+  it("disables save button when no filters are active", () => {
+    const onSave = vi.fn();
+
+    const { container } = renderWithProviders(
+      <FilterManager currentFilters={[]} onSaveFilter={onSave} />,
+    );
+
+    const button = container.querySelector("button");
+    expect(button).toBeDefined();
+    expect(button?.getAttribute("disabled")).not.toBeNull();
+  });
+
+  it("accepts canCreateGlobal prop without Frappe-specific config", () => {
+    const genericFilters: Array<[string, string, any]> = [["field1", "equals", "value1"]];
+    const onSave = vi.fn();
+
+    // Should render without errors — no Frappe provider needed
+    const { getByText } = renderWithProviders(
+      <FilterManager
+        currentFilters={genericFilters}
+        onSaveFilter={onSave}
+        canCreateGlobal={true}
+      />,
+    );
+
+    expect(getByText("Save Filter")).toBeDefined();
+  });
+});