@multiplatform.one/table 6.0.0

package/src/components/DataTableToolbar/index.tsx

@@ -0,0 +1,266 @@
+import { EyeIcon, FloppyDiskIcon, MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import type React from "react";
+import { useState } from "react";
+import { Button, Input } from "@multiplatform.one/forms";
+import { Popover, Separator, Text, View, XStack, YStack, styled } from "tamagui";
+import type { TableView } from "../../types";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+export interface DataTableToolbarProps {
+  // Search
+  globalFilter?: string;
+  onGlobalFilterChange?: (value: string) => void;
+
+  // Filters
+  onClearFilters?: () => void;
+  /** Number of active column filters for badge display */
+  activeFilterCount?: number;
+
+  // Views
+  onSaveView?: (name: string) => void;
+  onLoadView?: (viewId: string) => void;
+  views?: TableView[];
+  activeViewId?: string;
+
+  // Feature flags
+  enableViews?: boolean;
+  enableGlobalSearch?: boolean;
+  enableFiltering?: boolean;
+
+  // Customization
+  showFilterCount?: boolean;
+  showViewSelector?: boolean;
+  customActions?: React.ReactNode;
+
+  // Sizing
+  size?: string;
+  compact?: boolean;
+}
+
+// Icon wrapper for the search icon
+const SearchIconWrapperFrame = styled(View, {
+  name: "DataTableSearchIconFrame",
+  paddingLeft: "$3",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+// Clear button wrapper
+const ClearButtonWrapperFrame = styled(View, {
+  name: "DataTableClearButtonFrame",
+  paddingRight: "$2",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+// Toolbar separator
+const ToolbarDividerFrame = styled(View, {
+  name: "DataTableToolbarDividerFrame",
+  width: 1,
+  alignSelf: "stretch",
+  backgroundColor: "$color6",
+});
+
+export function DataTableToolbar(props: DataTableToolbarProps) {
+  // Try to consume from DataTableStateContext (compound component pattern)
+  const ctx = useDataTableState();
+
+  // Resolve values: explicit props override context values
+  const globalFilter = props.globalFilter ?? ctx?.state.globalFilter ?? "";
+  const onGlobalFilterChange =
+    props.onGlobalFilterChange ?? ctx?.actions.setGlobalFilter ?? (() => {});
+  const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
+  const onSaveView = props.onSaveView ?? ctx?.actions.saveView ?? (() => {});
+  const views = props.views ?? ctx?.state.views ?? [];
+  const activeViewId = props.activeViewId ?? ctx?.state.activeViewId;
+
+  const {
+    enableViews = false,
+    enableGlobalSearch = true,
+    enableFiltering: _enableFiltering = true,
+    showFilterCount: _showFilterCount = true,
+    showViewSelector = true,
+    customActions,
+    size,
+    compact: _compact = true,
+  } = props;
+
+  const [showSaveViewDialog, setShowSaveViewDialog] = useState(false);
+  const [newViewName, setNewViewName] = useState("");
+
+  const activeView = views.find((v) => v.id === activeViewId);
+
+  const handleSaveView = () => {
+    if (newViewName.trim()) {
+      onSaveView(newViewName.trim());
+      setNewViewName("");
+      setShowSaveViewDialog(false);
+    }
+  };
+
+  const { knobProps } = useResolvedKnobs({ size, compact: true });
+
+  return (
+    <XStack
+      alignItems="stretch"
+      backgroundColor="$color3"
+      borderWidth={1}
+      borderBottomWidth={0}
+      borderColor="$color6"
+      borderTopLeftRadius={knobProps.borderRadius.borderRadius}
+      borderTopRightRadius={knobProps.borderRadius.borderRadius}
+      overflow="hidden"
+      role="toolbar"
+      aria-label="Table toolbar"
+    >
+      {/* Search Section - fills available space */}
+      {enableGlobalSearch && (
+        <XStack flex={1} alignItems="center">
+          <SearchIconWrapperFrame>
+            <MagnifyingGlassIcon size={16} />
+          </SearchIconWrapperFrame>
+          <View flex={1}>
+            <Input
+              value={globalFilter}
+              onChangeText={onGlobalFilterChange}
+              placeholder="Search..."
+              aria-label="Search table data"
+              chromeless
+              compact
+              size="$3"
+            />
+          </View>
+          {globalFilter && (
+            <ClearButtonWrapperFrame>
+              <Button
+                chromeless
+                circular
+                size="$2"
+                padding="$1"
+                onPress={() => {
+                  onGlobalFilterChange("");
+                  onClearFilters();
+                }}
+                icon={<XIcon size={14} />}
+                aria-label="Clear search"
+              />
+            </ClearButtonWrapperFrame>
+          )}
+        </XStack>
+      )}
+
+      {/* Right Section - Actions with roving focus for keyboard navigation */}
+      {(customActions || enableViews) && (
+        <>
+          <ToolbarDividerFrame />
+          <RovingFocusGroup orientation="horizontal" loop asChild>
+            <XStack alignItems="center" paddingHorizontal="$2" gap="$1">
+              {/* Custom Actions */}
+              {customActions}
+
+              {/* View Management */}
+              {enableViews && showViewSelector && (
+                <>
+                  {/* Save View Button */}
+                  <RovingFocusGroup.Item focusable asChild>
+                    <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
+                      <Popover.Trigger asChild>
+                        <Button
+                          chromeless
+                          size="$2"
+                          icon={<FloppyDiskIcon size={16} />}
+                          aria-label="Save view"
+                          focusStyle={{ outlineColor: "$accentBackground", outlineWidth: 2 }}
+                        />
+                      </Popover.Trigger>
+                      <Popover.Content
+                        {...knobProps.borderRadius}
+                        borderColor="$color6"
+                        enterStyle={{ x: 0, y: -10, opacity: 0 }}
+                        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+                      >
+                        <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={250}>
+                          <Text fontWeight="600">Save Current View</Text>
+                          <Input
+                            placeholder="Enter view name..."
+                            value={newViewName}
+                            onChangeText={setNewViewName}
+                            size="$3"
+                            compact
+                            inputProps={{
+                              onKeyDown: (e: React.KeyboardEvent) => {
+                                if (e.key === "Enter") handleSaveView();
+                              },
+                            }}
+                          />
+                          <XStack gap="$2" justifyContent="flex-end">
+                            <Button
+                              size="$2"
+                              variant="outlined"
+                              onPress={() => setShowSaveViewDialog(false)}
+                            >
+                              Cancel
+                            </Button>
+                            <Button
+                              size="$2"
+                              onPress={handleSaveView}
+                              disabled={!newViewName.trim()}
+                            >
+                              Save
+                            </Button>
+                          </XStack>
+                        </YStack>
+                      </Popover.Content>
+                    </Popover>
+                  </RovingFocusGroup.Item>
+
+                  {/* Active View Indicator */}
+                  {activeView && (
+                    <XStack alignItems="center" gap="$1" paddingHorizontal="$2">
+                      <EyeIcon size={14} />
+                      <Text fontSize="$2" color="$color10">
+                        {activeView.name}
+                      </Text>
+                    </XStack>
+                  )}
+                </>
+              )}
+            </XStack>
+          </RovingFocusGroup>
+        </>
+      )}
+    </XStack>
+  );
+}
+
+// Additional Toolbar Components
+
+export interface DataTableToolbarActionsProps {
+  children: React.ReactNode;
+}
+
+export function DataTableToolbarActions({ children }: DataTableToolbarActionsProps) {
+  return (
+    <XStack alignItems="center" gap="$1">
+      {children}
+    </XStack>
+  );
+}
+
+export interface DataTableToolbarSeparatorProps {
+  orientation?: "horizontal" | "vertical";
+}
+
+export function DataTableToolbarSeparator({
+  orientation = "vertical",
+}: DataTableToolbarSeparatorProps) {
+  return (
+    <Separator
+      vertical={orientation === "vertical"}
+      marginHorizontal={orientation === "vertical" ? "$1" : 0}
+      marginVertical={orientation === "horizontal" ? "$1" : 0}
+    />
+  );
+}

package/src/components/DataTableViewOptions/DataTableViewOptions.spec.tsx

@@ -0,0 +1,162 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import "@testing-library/jest-dom";
+import { DataTableViewOptions } from "./index";
+
+// Test columns
+const mockColumns = [
+  {
+    id: "name",
+    label: "Name",
+    visible: true,
+    order: 0,
+    canHide: true,
+    canResize: true,
+    canReorder: true,
+  },
+  {
+    id: "email",
+    label: "Email",
+    visible: true,
+    order: 1,
+    canHide: true,
+    canResize: true,
+    canReorder: true,
+  },
+  {
+    id: "status",
+    label: "Status",
+    visible: true,
+    order: 2,
+    canHide: true,
+    canResize: true,
+    canReorder: true,
+  },
+  {
+    id: "createdAt",
+    label: "Created At",
+    visible: true,
+    order: 3,
+    canHide: true,
+    canResize: true,
+    canReorder: true,
+  },
+];
+
+describe("DataTableViewOptions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders view options button", () => {
+    renderWithProviders(
+      <DataTableViewOptions
+        columns={mockColumns}
+        onColumnVisibilityChange={vi.fn()}
+        onColumnOrderChange={vi.fn()}
+        onColumnSizingChange={vi.fn()}
+        onSaveView={vi.fn()}
+        onLoadView={vi.fn()}
+        onResetToDefault={vi.fn()}
+        compact={true}
+      />,
+    );
+
+    expect(screen.getByText("View")).toBeInTheDocument();
+  });
+
+  it("opens popover when clicked", async () => {
+    renderWithProviders(
+      <DataTableViewOptions
+        columns={mockColumns}
+        onColumnVisibilityChange={vi.fn()}
+        onColumnOrderChange={vi.fn()}
+        onColumnSizingChange={vi.fn()}
+        onSaveView={vi.fn()}
+        onLoadView={vi.fn()}
+        onResetToDefault={vi.fn()}
+        compact={true}
+      />,
+    );
+
+    const button = screen.getByText("View");
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText("Column Visibility")).toBeInTheDocument();
+    });
+  });
+
+  it("displays column visibility toggles", async () => {
+    renderWithProviders(
+      <DataTableViewOptions
+        columns={mockColumns}
+        onColumnVisibilityChange={vi.fn()}
+        onColumnOrderChange={vi.fn()}
+        onColumnSizingChange={vi.fn()}
+        onSaveView={vi.fn()}
+        onLoadView={vi.fn()}
+        onResetToDefault={vi.fn()}
+        compact={true}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("View"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Name")).toBeInTheDocument();
+      expect(screen.getByText("Email")).toBeInTheDocument();
+      expect(screen.getByText("Status")).toBeInTheDocument();
+    });
+  });
+
+  it("calls onColumnVisibilityChange when column is toggled", async () => {
+    const mockOnChange = vi.fn();
+
+    renderWithProviders(
+      <DataTableViewOptions
+        columns={mockColumns}
+        onColumnVisibilityChange={mockOnChange}
+        onColumnOrderChange={vi.fn()}
+        onColumnSizingChange={vi.fn()}
+        onSaveView={vi.fn()}
+        onLoadView={vi.fn()}
+        onResetToDefault={vi.fn()}
+        compact={true}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("View"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Column Visibility")).toBeInTheDocument();
+    });
+
+    // Find the switch for the first column (Name)
+    const switches = screen.getAllByRole("switch");
+    expect(switches.length).toBeGreaterThan(0);
+
+    // Click the first switch
+    fireEvent.click(switches[0]);
+
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
+  it("handles empty columns array", () => {
+    renderWithProviders(
+      <DataTableViewOptions
+        columns={[]}
+        onColumnVisibilityChange={vi.fn()}
+        onColumnOrderChange={vi.fn()}
+        onColumnSizingChange={vi.fn()}
+        onSaveView={vi.fn()}
+        onLoadView={vi.fn()}
+        onResetToDefault={vi.fn()}
+        compact={true}
+      />,
+    );
+
+    expect(screen.getByText("View")).toBeInTheDocument();
+  });
+});