@multiplatform.one/table 6.0.0

package/src/components/FilterManager.tsx

@@ -0,0 +1,144 @@
+import { FloppyDiskIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type React from "react";
+import { useState } from "react";
+import { Button, Checkbox, Input } from "@multiplatform.one/forms";
+import { Text, XStack, YStack } from "tamagui";
+import {
+  KnobDialog,
+  KnobDialogContent,
+  KnobDialogTrigger,
+  KnobDialogTitle,
+  KnobDialogDescription,
+  KnobDialogClose,
+} from "./KnobDialog";
+
+export interface FilterManagerProps {
+  currentFilters: Array<[string, string, any]>;
+  onSaveFilter: (filterName: string, isGlobal: boolean) => Promise<void> | void;
+  disabled?: boolean;
+  canCreateGlobal?: boolean;
+  trigger?: React.ReactNode;
+}
+
+export function FilterManager({
+  currentFilters,
+  onSaveFilter,
+  disabled = false,
+  canCreateGlobal = false,
+  trigger,
+}: FilterManagerProps) {
+  const { knobProps } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const dialogMinWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  const [open, setOpen] = useState(false);
+  const [filterName, setFilterName] = useState("");
+  const [isGlobal, setIsGlobal] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const hasFilters = currentFilters && currentFilters.length > 0;
+
+  const handleSave = async () => {
+    if (!filterName.trim()) {
+      setError("Filter name is required");
+      return;
+    }
+
+    setIsSaving(true);
+    setError(null);
+
+    try {
+      await onSaveFilter(filterName.trim(), isGlobal);
+      setFilterName("");
+      setIsGlobal(false);
+      setOpen(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to save filter");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <KnobDialog open={open} onOpenChange={setOpen}>
+      <KnobDialogTrigger asChild>
+        {trigger || (
+          <Button
+            size={knobProps.sizeToken}
+            icon={FloppyDiskIcon}
+            disabled={disabled || !hasFilters}
+            aria-label="Save filter"
+          >
+            Save Filter
+          </Button>
+        )}
+      </KnobDialogTrigger>
+
+      <KnobDialogContent minWidth={dialogMinWidth}>
+        <KnobDialogTitle>Save Filter</KnobDialogTitle>
+        <KnobDialogDescription>
+          Save the current filter configuration for quick access later.
+        </KnobDialogDescription>
+
+        <YStack gap="$3">
+          <Input
+            label="Filter Name"
+            value={filterName}
+            onChangeText={setFilterName}
+            placeholder="e.g., Big Pokemon"
+            disabled={isSaving}
+          />
+
+          {canCreateGlobal && (
+            <Checkbox
+              label="Make this filter global (visible to all users)"
+              checked={isGlobal}
+              onCheckedChange={(checked) => setIsGlobal(checked === true)}
+              disabled={isSaving}
+            />
+          )}
+
+          {error && (
+            <Text color="$red10" fontSize="$2">
+              {error}
+            </Text>
+          )}
+
+          <Text color="$color10" fontSize="$2">
+            Current filters: {currentFilters.length} active
+          </Text>
+        </YStack>
+
+        <XStack gap="$3" justifyContent="flex-end">
+          <KnobDialogClose asChild>
+            <Button size={knobProps.sizeToken} variant="outlined" disabled={isSaving}>
+              Cancel
+            </Button>
+          </KnobDialogClose>
+          <Button
+            size={knobProps.sizeToken}
+            theme="active"
+            icon={FloppyDiskIcon}
+            onPress={handleSave}
+            disabled={isSaving || !filterName.trim()}
+          >
+            {isSaving ? "Saving..." : "Save Filter"}
+          </Button>
+        </XStack>
+
+        <KnobDialogClose asChild>
+          <Button
+            position="absolute"
+            top="$3"
+            right="$3"
+            size="$2"
+            circular
+            icon={XIcon}
+            aria-label="Close dialog"
+          />
+        </KnobDialogClose>
+      </KnobDialogContent>
+    </KnobDialog>
+  );
+}

package/src/components/KnobDialog.tsx

@@ -0,0 +1,76 @@
+/**
+ * KnobDialog - Tamagui Dialog wrapped with knob-wired styling.
+ *
+ * Since no shared Dialog component exists in the codebase, this internal
+ * wrapper applies useResolvedKnobs to Tamagui's Dialog for consistent
+ * borderRadius, elevation, and sizing across the table package.
+ */
+
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type React from "react";
+import { Dialog } from "tamagui";
+
+export interface KnobDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  modal?: boolean;
+  children: React.ReactNode;
+}
+
+export function KnobDialog({ open, onOpenChange, modal = true, children }: KnobDialogProps) {
+  return (
+    <Dialog modal={modal} open={open} onOpenChange={onOpenChange}>
+      {children}
+    </Dialog>
+  );
+}
+
+export interface KnobDialogContentProps {
+  children: React.ReactNode;
+  minWidth?: number;
+}
+
+export function KnobDialogContent({ children, minWidth }: KnobDialogContentProps) {
+  const { knobProps } = useResolvedKnobs();
+
+  return (
+    <Dialog.Portal>
+      <Dialog.Overlay
+        key="overlay"
+        transition="quick"
+        opacity={0.5}
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+
+      <Dialog.Content
+        {...knobProps.borderRadius}
+        borderWidth={1}
+        borderColor="$borderColor"
+        key="content"
+        animateOnly={["transform", "opacity"]}
+        transition={[
+          "quick",
+          {
+            opacity: {
+              overshootClamping: true,
+            },
+          },
+        ]}
+        enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+        exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+        {...knobProps.gapLg}
+        elevation={knobProps.elevation}
+        {...(minWidth ? { minWidth } : {})}
+      >
+        {children}
+      </Dialog.Content>
+    </Dialog.Portal>
+  );
+}
+
+// Re-export Dialog sub-components for convenience
+export const KnobDialogTrigger = Dialog.Trigger;
+export const KnobDialogTitle = Dialog.Title;
+export const KnobDialogDescription = Dialog.Description;
+export const KnobDialogClose = Dialog.Close;

package/src/components/SavedFilterDropdown.spec.tsx

@@ -0,0 +1,99 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import type { ParsedFilter } from "../hooks/useSavedFilters";
+import { SavedFilterDropdown } from "./SavedFilterDropdown";
+const mockFilters: ParsedFilter[] = [
+  {
+    name: "filter-1",
+    filter_name: "Active Users",
+    for_user: "user@example.com",
+    filters: [["status", "is", "active"]],
+    isGlobal: false,
+  },
+  {
+    name: "filter-2",
+    filter_name: "High Priority",
+    for_user: "",
+    filters: [["priority", "is", "high"]],
+    isGlobal: true,
+  },
+  {
+    name: "filter-3",
+    filter_name: "Recent Items",
+    for_user: "user@example.com",
+    filters: [
+      ["created", "after", "2024-01-01"],
+      ["status", "isNot", "archived"],
+    ],
+    isGlobal: false,
+  },
+];
+
+describe("SavedFilterDropdown", () => {
+  it("renders saved filter list and calls onSelect", () => {
+    const onSelect = vi.fn();
+
+    const { container } = renderWithProviders(
+      <SavedFilterDropdown filters={mockFilters} onSelectFilter={onSelect} />,
+    );
+
+    // The dropdown trigger should be rendered
+    const trigger = container.querySelector("button");
+    expect(trigger).toBeDefined();
+  });
+
+  it("returns null when filters list is empty", () => {
+    const onSelect = vi.fn();
+
+    const { container } = renderWithProviders(
+      <SavedFilterDropdown filters={[]} onSelectFilter={onSelect} />,
+    );
+
+    // When no filters, the component renders no Select/button elements
+    expect(container.querySelector("button")).toBeNull();
+    expect(container.querySelector('[role="combobox"]')).toBeNull();
+  });
+
+  it("renders with selected filter", () => {
+    const onSelect = vi.fn();
+
+    const { container } = renderWithProviders(
+      <SavedFilterDropdown
+        filters={mockFilters}
+        selectedFilter={mockFilters[0]}
+        onSelectFilter={onSelect}
+      />,
+    );
+
+    // Should render with the selected filter
+    expect(container.querySelector("button")).toBeDefined();
+  });
+
+  it("accepts onDeleteFilter callback without Frappe dependency", () => {
+    const onSelect = vi.fn();
+    const onDelete = vi.fn();
+
+    const { container } = renderWithProviders(
+      <SavedFilterDropdown
+        filters={mockFilters}
+        onSelectFilter={onSelect}
+        onDeleteFilter={onDelete}
+      />,
+    );
+
+    // Should render without errors — no Frappe provider required
+    expect(container.querySelector("button")).toBeDefined();
+  });
+
+  it("renders in disabled state", () => {
+    const onSelect = vi.fn();
+
+    const { container } = renderWithProviders(
+      <SavedFilterDropdown filters={mockFilters} onSelectFilter={onSelect} disabled={true} />,
+    );
+
+    const trigger = container.querySelector("button");
+    expect(trigger).toBeDefined();
+    expect(trigger?.getAttribute("disabled")).not.toBeNull();
+  });
+});

package/src/components/SavedFilterDropdown.tsx

@@ -0,0 +1,56 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { Select } from "@multiplatform.one/forms";
+import type { ParsedFilter } from "../hooks/useSavedFilters";
+
+export interface SavedFilterDropdownProps {
+  filters: ParsedFilter[];
+  selectedFilter?: ParsedFilter | null;
+  onSelectFilter: (filter: ParsedFilter | null) => void;
+  onDeleteFilter?: (filterName: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export function SavedFilterDropdown({
+  filters,
+  selectedFilter,
+  onSelectFilter,
+  onDeleteFilter: _onDeleteFilter,
+  placeholder = "Saved Filters",
+  disabled = false,
+}: SavedFilterDropdownProps) {
+  const { knobProps } = useResolvedKnobs();
+
+  if (filters.length === 0) {
+    return null;
+  }
+
+  // Convert filters to forms Select options
+  const options = useMemo(
+    () =>
+      filters.map((filter) => ({
+        value: filter.name,
+        label: filter.filter_name + (filter.isGlobal ? " (Global)" : ""),
+      })),
+    [filters],
+  );
+
+  return (
+    <Select
+      value={selectedFilter?.name || ""}
+      onValueChange={(value) => {
+        if (typeof value === "string") {
+          const filter = filters.find((f) => f.name === value);
+          onSelectFilter(filter || null);
+        }
+      }}
+      options={options}
+      placeholder={placeholder}
+      disabled={disabled}
+      size={knobProps.sizeToken}
+      compact
+      aria-label="Saved filters"
+    />
+  );
+}

package/src/components/SimpleTable/index.tsx

@@ -0,0 +1,230 @@
+/**
+ * SimpleTable - lightweight read-only table with zero TanStack Table dependency.
+ *
+ * Renders data as a table using Layer 1 Table primitives with a thin
+ * data-mapping loop. Supports column alignment, intent props on rows
+ * via `_intent` property in data objects, and responsive card layout
+ * on mobile via `useMedia`.
+ *
+ * No filtering, sorting, pagination, or state management -- just render data.
+ */
+
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ViewProps } from "tamagui";
+import { Text, View, useMedia } from "tamagui";
+import { Table } from "@multiplatform.one/table-primitives";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+type IntentName = "accent" | "error" | "warning" | "success";
+
+export interface SimpleTableColumn {
+  /** Key to access the value from each data object */
+  accessorKey: string;
+  /** Header label to display */
+  header: string;
+  /** Text alignment for the column */
+  align?: "left" | "center" | "right";
+}
+
+export interface SimpleTableProps extends ViewProps {
+  /** Array of data objects to render */
+  data: Array<Record<string, any>>;
+  /** Column configuration */
+  columns: SimpleTableColumn[];
+  /** Accessible label for the table */
+  "aria-label"?: string;
+}
+
+// ===========================================================================
+// Helpers
+// ===========================================================================
+
+function alignToFlex(align?: "left" | "center" | "right"): "flex-start" | "center" | "flex-end" {
+  switch (align) {
+    case "center":
+      return "center";
+    case "right":
+      return "flex-end";
+    default:
+      return "flex-start";
+  }
+}
+
+// ===========================================================================
+// Mobile Card Layout
+// ===========================================================================
+
+interface SimpleTableMobileCardsProps {
+  data: Array<Record<string, any>>;
+  columns: SimpleTableColumn[];
+}
+
+function SimpleTableMobileCards({ data, columns }: SimpleTableMobileCardsProps) {
+  if (data.length === 0) {
+    return (
+      <View
+        padding="$8"
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor="$color1"
+        borderRadius="$4"
+        aria-live="polite"
+      >
+        <Text color="$color10" fontSize="$4">
+          No data available
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View flexDirection="column" gap="$2">
+      {data.map((row, rowIndex) => {
+        const intent = row._intent as IntentName | undefined;
+
+        return (
+          <View
+            key={rowIndex}
+            backgroundColor="$color1"
+            borderRadius="$4"
+            borderWidth={1}
+            borderColor="$color6"
+            padding="$3"
+            {...(intent ? { theme: intent } : {})}
+          >
+            {columns.map((col) => (
+              <View
+                key={col.accessorKey}
+                flexDirection="row"
+                alignItems="center"
+                paddingVertical="$1.5"
+                gap="$2"
+              >
+                <Text fontSize="$3" color="$color10" fontWeight="500" width="40%" flexShrink={0}>
+                  {col.header}
+                </Text>
+                <View flex={1}>
+                  <Text fontSize="$3" color="$color12" textAlign={col.align ?? "left"}>
+                    {String(row[col.accessorKey] ?? "")}
+                  </Text>
+                </View>
+              </View>
+            ))}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+// ===========================================================================
+// Desktop Table Layout
+// ===========================================================================
+
+export interface SimpleTableDesktopProps extends ViewProps {
+  /** Array of data objects to render */
+  data: Array<Record<string, any>>;
+  /** Column configuration */
+  columns: SimpleTableColumn[];
+  /** Accessible label for the table */
+  "aria-label"?: string;
+}
+
+/** Desktop table layout using Layer 1 Table primitives. Exported for testing. */
+export function SimpleTableDesktop({ data, columns, ...props }: SimpleTableDesktopProps) {
+  const { knobProps } = useResolvedKnobs({ component: "SimpleTable" });
+
+  return (
+    <View {...props}>
+      <Table aria-label={props["aria-label"]} {...knobProps.borderRadius}>
+        <Table.Head>
+          <Table.Row>
+            {columns.map((col, colIndex) => (
+              <Table.HeaderCell
+                key={col.accessorKey}
+                justifyContent={alignToFlex(col.align)}
+                cellLocation={
+                  colIndex === 0 ? "first" : colIndex === columns.length - 1 ? "last" : "middle"
+                }
+                data-align={col.align ?? "left"}
+              >
+                <Text fontWeight="600" fontSize="$3">
+                  {col.header}
+                </Text>
+              </Table.HeaderCell>
+            ))}
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {data.length === 0 ? (
+            <Table.Row>
+              <Table.Cell>
+                <Text color="$color10" textAlign="center" padding="$4">
+                  No data available
+                </Text>
+              </Table.Cell>
+            </Table.Row>
+          ) : (
+            data.map((row, rowIndex) => {
+              const intent = row._intent as IntentName | undefined;
+              const intentProps = intent ? { [intent]: true } : {};
+
+              return (
+                <Table.Row
+                  key={rowIndex}
+                  rowLocation={
+                    rowIndex === 0 ? "first" : rowIndex === data.length - 1 ? "last" : "middle"
+                  }
+                  {...intentProps}
+                >
+                  {columns.map((col, colIndex) => (
+                    <Table.Cell
+                      key={col.accessorKey}
+                      justifyContent={alignToFlex(col.align)}
+                      cellLocation={
+                        colIndex === 0
+                          ? "first"
+                          : colIndex === columns.length - 1
+                            ? "last"
+                            : "middle"
+                      }
+                      data-align={col.align ?? "left"}
+                    >
+                      <Text fontSize="$3" color="$color12">
+                        {String(row[col.accessorKey] ?? "")}
+                      </Text>
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              );
+            })
+          )}
+        </Table.Body>
+      </Table>
+    </View>
+  );
+}
+
+// ===========================================================================
+// Main Component
+// ===========================================================================
+
+export function SimpleTable({ data, columns, ...props }: SimpleTableProps) {
+  const { knobProps } = useResolvedKnobs({ component: "SimpleTable" });
+  const { sm } = useMedia();
+
+  // Mobile card layout when sm breakpoint is not met
+  if (sm === false) {
+    return (
+      <View {...knobProps.borderRadius} {...props} testID="simple-table-cards">
+        <SimpleTableMobileCards data={data} columns={columns} />
+      </View>
+    );
+  }
+
+  // Desktop/tablet: standard table layout using Layer 1 primitives
+  return <SimpleTableDesktop data={data} columns={columns} {...props} />;
+}