@multiplatform.one/table 6.0.0

package/src/components/DataTableFilters/index.tsx

@@ -0,0 +1,680 @@
+import {
+  CalendarBlankIcon,
+  CheckSquareIcon,
+  FunnelIcon,
+  HashIcon,
+  PlusIcon,
+  TextTIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState, useMemo } from "react";
+import { Button, Input, Select } from "@multiplatform.one/forms";
+import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
+import type {
+  DataTableColumnType,
+  FacetedFilterOption,
+  FilterOperator,
+  FilterValue,
+  TableFilter,
+} from "../../types";
+import { getFilterDescription } from "../../utils/filterUtils";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+export interface DataTableFiltersProps {
+  filters?: TableFilter[];
+  onFiltersChange?: (filters: TableFilter[]) => void;
+  onAddFilter?: (filter: Omit<TableFilter, "id">) => void;
+  onRemoveFilter?: (filterId: string) => void;
+  onClearFilters?: () => void;
+  availableColumns?: Array<{
+    id: string;
+    label: string;
+    type: DataTableColumnType;
+    options?: FacetedFilterOption[];
+  }>;
+  maxFilters?: number;
+  showFilterCount?: boolean;
+  compact?: boolean;
+}
+
+export function DataTableFilters(props: DataTableFiltersProps) {
+  // Try to consume from DataTableStateContext (compound component pattern)
+  const ctx = useDataTableState();
+
+  // Resolve values: explicit props override context values
+  const filters = props.filters ?? ctx?.state.filters ?? [];
+  const onFiltersChange = props.onFiltersChange ?? ctx?.actions.setFilters ?? (() => {});
+  const onAddFilter = props.onAddFilter ?? ctx?.actions.addFilter ?? (() => {});
+  const onRemoveFilter = props.onRemoveFilter ?? ctx?.actions.removeFilter ?? (() => {});
+  const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
+  const availableColumns = props.availableColumns ?? [];
+
+  const { maxFilters = 10, showFilterCount = true, compact = false } = props;
+
+  const [showFilterBuilder, setShowFilterBuilder] = useState(false);
+  const { knobProps } = useResolvedKnobs();
+
+  const canAddMoreFilters = filters.length < maxFilters;
+
+  const handleAddFilter = (filter: Omit<TableFilter, "id">) => {
+    onAddFilter(filter);
+    setShowFilterBuilder(false);
+  };
+
+  const handleUpdateFilter = (filterId: string, updates: Partial<TableFilter>) => {
+    const updatedFilters = filters.map((filter) =>
+      filter.id === filterId ? { ...filter, ...updates } : filter,
+    );
+    onFiltersChange(updatedFilters);
+  };
+
+  if (compact) {
+    return (
+      <XStack alignItems="center" gap="$2">
+        {filters.length > 0 && showFilterCount && (
+          <View
+            backgroundColor={"$accentBackground"}
+            paddingHorizontal="$2"
+            paddingVertical="$1"
+            borderRadius={knobProps.borderRadius.borderRadius}
+          >
+            <Text color="$accentColor" fontSize="$2">
+              {filters.length}
+            </Text>
+          </View>
+        )}
+
+        <Popover open={showFilterBuilder} onOpenChange={setShowFilterBuilder}>
+          <Popover.Trigger asChild>
+            <Button
+              size={knobProps.sizeToken}
+              variant="outlined"
+              icon={<PlusIcon size={16} />}
+              disabled={!canAddMoreFilters}
+            >
+              Add Filter
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            {...knobProps.borderRadius}
+            borderWidth={1}
+            borderColor="$color6"
+            backgroundColor="$background"
+            enterStyle={{ x: 0, y: -10, opacity: 0 }}
+            exitStyle={{ x: 0, y: -10, opacity: 0 }}
+            transition={[
+              "quick",
+              {
+                opacity: {
+                  overshootClamping: true,
+                },
+              },
+            ]}
+          >
+            <FilterBuilder
+              availableColumns={availableColumns}
+              onAddFilter={handleAddFilter}
+              onCancel={() => setShowFilterBuilder(false)}
+            />
+          </Popover.Content>
+        </Popover>
+
+        {filters.length > 0 && (
+          <Button
+            size={knobProps.sizeToken}
+            variant="outlined"
+            onPress={onClearFilters}
+            icon={<XIcon size={16} />}
+          >
+            Clear
+          </Button>
+        )}
+      </XStack>
+    );
+  }
+
+  return (
+    <YStack
+      {...knobProps.borderRadius}
+      gap="$4"
+      padding="$4"
+      backgroundColor="$background"
+      borderWidth={1}
+      borderColor="$color6"
+      aria-label="Table filters"
+      aria-live="polite"
+    >
+      {/* Header */}
+      <XStack alignItems="center" justifyContent="space-between">
+        <XStack alignItems="center" gap="$2">
+          <FunnelIcon size={16} aria-hidden />
+          <Text fontSize="$4" fontWeight="600" id="filters-heading">
+            Filters
+          </Text>
+          {showFilterCount && filters.length > 0 && (
+            <View
+              backgroundColor={"$accentBackground"}
+              paddingHorizontal="$2"
+              paddingVertical="$1"
+              borderRadius={knobProps.borderRadius.borderRadius}
+              aria-label={`${filters.length} active filters`}
+            >
+              <Text color="$accentColor" fontSize="$2">
+                {filters.length}
+              </Text>
+            </View>
+          )}
+        </XStack>
+
+        <XStack
+          {...({ tag: "fieldset" } as object)}
+          alignItems="center"
+          gap="$2"
+          aria-label="Filter management actions"
+        >
+          <Popover open={showFilterBuilder} onOpenChange={setShowFilterBuilder}>
+            <Popover.Trigger asChild>
+              <Button
+                size={knobProps.sizeToken}
+                variant="outlined"
+                icon={<PlusIcon size={16} />}
+                disabled={!canAddMoreFilters}
+                aria-label="Add new filter"
+                aria-expanded={showFilterBuilder}
+                aria-haspopup="dialog"
+              >
+                Add Filter
+              </Button>
+            </Popover.Trigger>
+            <Popover.Content
+              {...knobProps.borderRadius}
+              borderWidth={1}
+              borderColor="$color6"
+              backgroundColor="$background"
+              enterStyle={{ x: 0, y: -10, opacity: 0 }}
+              exitStyle={{ x: 0, y: -10, opacity: 0 }}
+              transition={[
+                "quick",
+                {
+                  opacity: {
+                    opacity: {
+                      overshootClamping: true,
+                    },
+                  },
+                },
+              ]}
+              maxWidth={400}
+            >
+              <FilterBuilder
+                availableColumns={availableColumns}
+                onAddFilter={handleAddFilter}
+                onCancel={() => setShowFilterBuilder(false)}
+              />
+            </Popover.Content>
+          </Popover>
+
+          {filters.length > 0 && (
+            <Button
+              size={knobProps.sizeToken}
+              variant="outlined"
+              onPress={onClearFilters}
+              icon={<XIcon size={16} />}
+              aria-label="Clear all filters"
+            >
+              Clear All
+            </Button>
+          )}
+        </XStack>
+      </XStack>
+
+      <Separator />
+
+      {/* Active Filters */}
+      {filters.length > 0 ? (
+        <ScrollView maxHeight={200}>
+          <YStack
+            {...({ tag: "ul" } as object)}
+            gap="$2"
+            padding={0}
+            margin={0}
+            aria-label="Active filters"
+            aria-describedby="filters-heading"
+          >
+            {filters.map((filter, index) => (
+              <ActiveFilter
+                key={filter.id}
+                filter={filter}
+                availableColumns={availableColumns}
+                onUpdate={(updates) => handleUpdateFilter(filter.id, updates)}
+                onRemove={() => onRemoveFilter(filter.id)}
+                index={index}
+              />
+            ))}
+          </YStack>
+        </ScrollView>
+      ) : (
+        <View
+          {...({ tag: "output" } as object)}
+          padding="$4"
+          alignItems="center"
+          aria-live="polite"
+        >
+          <Text fontSize="$3" color="$color10">
+            No filters applied
+          </Text>
+        </View>
+      )}
+    </YStack>
+  );
+}
+
+// Filter Builder Component
+
+interface FilterBuilderProps {
+  availableColumns: Array<{
+    id: string;
+    label: string;
+    type: DataTableColumnType;
+    options?: FacetedFilterOption[];
+  }>;
+  onAddFilter: (filter: Omit<TableFilter, "id">) => void;
+  onCancel: () => void;
+}
+
+function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilderProps) {
+  const { knobProps } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const builderMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const [selectedColumnId, setSelectedColumnId] = useState<string>("");
+  const [selectedOperator, setSelectedOperator] = useState<FilterOperator>("is");
+  const [filterValue, setFilterValue] = useState<any>("");
+  const [filterValues, setFilterValues] = useState<any[]>([]);
+
+  const selectedColumn = availableColumns.find((col) => col.id === selectedColumnId);
+
+  const availableOperators = useMemo(() => {
+    if (!selectedColumn) return [];
+
+    const baseOperators: FilterOperator[] = ["is", "isNot"];
+
+    switch (selectedColumn.type) {
+      case "text":
+        return [
+          ...baseOperators,
+          "contains",
+          "doesNotContain",
+          "startsWith",
+          "endsWith",
+          "isEmpty",
+          "isNotEmpty",
+        ];
+      case "number":
+        return [
+          ...baseOperators,
+          "isLessThan",
+          "isGreaterThan",
+          "isLessThanOrEqual",
+          "isGreaterThanOrEqual",
+          "isBetween",
+          "isNotBetween",
+        ];
+      case "date":
+        return [
+          ...baseOperators,
+          "isBefore",
+          "isAfter",
+          "isOnOrBefore",
+          "isOnOrAfter",
+          "isBetween",
+          "isNotBetween",
+        ];
+      case "boolean":
+        return baseOperators;
+      default:
+        return baseOperators;
+    }
+  }, [selectedColumn]);
+
+  // Convert to forms Select options
+  const columnOptions = useMemo(
+    () =>
+      availableColumns.map((col) => ({
+        value: col.id,
+        label: col.label,
+      })),
+    [availableColumns],
+  );
+
+  const operatorOptions = useMemo(
+    () =>
+      availableOperators.map((op) => ({
+        value: op,
+        label: getOperatorLabel(op as FilterOperator),
+      })),
+    [availableOperators],
+  );
+
+  const handleAddFilter = () => {
+    if (!selectedColumnId || !selectedOperator) return;
+
+    const filterValueObj: FilterValue = {
+      operator: selectedOperator,
+      value: null,
+    };
+
+    // Handle different operator types
+    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
+      filterValueObj.values = filterValues;
+    } else if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
+      filterValueObj.values = filterValues;
+    } else if (!["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
+      filterValueObj.value = filterValue;
+    }
+
+    onAddFilter({
+      columnId: selectedColumnId,
+      value: filterValueObj,
+      label: selectedColumn?.label,
+    });
+
+    // Reset form
+    setSelectedColumnId("");
+    setSelectedOperator("is");
+    setFilterValue("");
+    setFilterValues([]);
+  };
+
+  const renderValueInput = () => {
+    if (!selectedColumn || ["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
+      return null;
+    }
+
+    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
+      return (
+        <XStack gap="$2">
+          <Input
+            placeholder="Min value"
+            value={filterValues[0] || ""}
+            onChangeText={(text) => {
+              const newValues = [...filterValues];
+              newValues[0] = text;
+              setFilterValues(newValues);
+            }}
+          />
+          <Input
+            placeholder="Max value"
+            value={filterValues[1] || ""}
+            onChangeText={(text) => {
+              const newValues = [...filterValues];
+              newValues[1] = text;
+              setFilterValues(newValues);
+            }}
+          />
+        </XStack>
+      );
+    }
+
+    if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
+      // For select columns with predefined options
+      if (selectedColumn.options) {
+        return (
+          <ScrollView maxHeight={120}>
+            <YStack gap="$1">
+              {selectedColumn.options.map((option) => (
+                <XStack key={String(option.value)} alignItems="center" gap="$2">
+                  <input
+                    type="checkbox"
+                    checked={filterValues.includes(option.value)}
+                    onChange={(e) => {
+                      if (e.target.checked) {
+                        setFilterValues([...filterValues, option.value]);
+                      } else {
+                        setFilterValues(filterValues.filter((v) => v !== option.value));
+                      }
+                    }}
+                  />
+                  <Text fontSize="$3">{option.label}</Text>
+                  <View
+                    backgroundColor="$color5"
+                    paddingHorizontal="$1"
+                    paddingVertical="$0.5"
+                    borderRadius="$1"
+                  >
+                    <Text color="$color10" fontSize="$1">
+                      {option.count}
+                    </Text>
+                  </View>
+                </XStack>
+              ))}
+            </YStack>
+          </ScrollView>
+        );
+      }
+
+      return (
+        <Input
+          placeholder="Enter values separated by commas"
+          value={filterValues.join(", ")}
+          onChangeText={(text) => {
+            setFilterValues(text.split(",").map((v) => v.trim()));
+          }}
+        />
+      );
+    }
+
+    // Single value input
+    if (selectedColumn.type === "date") {
+      return (
+        <Input
+          label="Value"
+          placeholder="YYYY-MM-DD"
+          value={filterValue}
+          onChangeText={setFilterValue}
+        />
+      );
+    }
+
+    if (selectedColumn.type === "boolean") {
+      return (
+        <Select
+          label="Value"
+          value={filterValue}
+          onValueChange={(v) => {
+            if (typeof v === "string") {
+              setFilterValue(v);
+            }
+          }}
+          options={[
+            { value: "true", label: "True" },
+            { value: "false", label: "False" },
+          ]}
+          placeholder="Select value"
+        />
+      );
+    }
+
+    if (selectedColumn.options) {
+      return (
+        <Select
+          label="Value"
+          value={filterValue}
+          onValueChange={(v) => {
+            if (typeof v === "string") {
+              setFilterValue(v);
+            }
+          }}
+          options={selectedColumn.options.map((option) => ({
+            value: option.value.toString(),
+            label: option.label,
+          }))}
+          placeholder="Select value"
+        />
+      );
+    }
+
+    return (
+      <Input
+        label="Value"
+        placeholder="Enter value"
+        value={filterValue}
+        onChangeText={setFilterValue}
+        {...(selectedColumn.type === "number" && { keyboardType: "numeric" })}
+      />
+    );
+  };
+
+  return (
+    <YStack {...knobProps.panelPadding} gap="$4" minWidth={builderMinWidth}>
+      <Text fontSize="$4" fontWeight="600">
+        Add Filter
+      </Text>
+
+      {/* Column Selection */}
+      <Select
+        label="Column"
+        value={selectedColumnId}
+        onValueChange={(v) => {
+          if (typeof v === "string") {
+            setSelectedColumnId(v);
+          }
+        }}
+        options={columnOptions}
+        placeholder="Select column"
+      />
+
+      {/* Operator Selection */}
+      {selectedColumnId && (
+        <Select
+          label="Condition"
+          value={selectedOperator}
+          onValueChange={(v) => {
+            if (typeof v === "string") {
+              setSelectedOperator(v as FilterOperator);
+            }
+          }}
+          options={operatorOptions}
+        />
+      )}
+
+      {/* Value Input */}
+      {selectedColumnId && renderValueInput()}
+
+      {/* Actions */}
+      <XStack gap="$2" justifyContent="flex-end">
+        <Button size={knobProps.sizeToken} variant="outlined" onPress={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          size={knobProps.sizeToken}
+          onPress={handleAddFilter}
+          disabled={!selectedColumnId || !selectedOperator}
+        >
+          Add Filter
+        </Button>
+      </XStack>
+    </YStack>
+  );
+}
+
+// Active Filter Component
+
+interface ActiveFilterProps {
+  filter: TableFilter;
+  availableColumns: Array<{
+    id: string;
+    label: string;
+    type: DataTableColumnType;
+    options?: FacetedFilterOption[];
+  }>;
+  onUpdate: (updates: Partial<TableFilter>) => void;
+  onRemove: () => void;
+  index: number;
+}
+
+function ActiveFilter({
+  filter,
+  availableColumns,
+  onUpdate: _onUpdate,
+  onRemove,
+  index,
+}: ActiveFilterProps) {
+  const { knobProps } = useResolvedKnobs();
+  const column = availableColumns.find((col) => col.id === filter.columnId);
+
+  return (
+    <XStack
+      {...({ tag: "li" } as object)}
+      alignItems="center"
+      justifyContent="space-between"
+      padding="$3"
+      {...{ backgroundColor: "$color2" }}
+      {...knobProps.borderRadius}
+      borderColor="$color6"
+      aria-label={`Filter ${index + 1}: ${getFilterDescription(filter)}`}
+    >
+      <XStack alignItems="center" gap="$2" flex={1}>
+        <ColumnTypeIcon type={column?.type || "text"} size={14} />
+        <Text fontSize="$3" color="$color10">
+          {getFilterDescription(filter)}
+        </Text>
+      </XStack>
+
+      <Button
+        size="$2"
+        variant="outlined"
+        onPress={onRemove}
+        icon={<XIcon size={16} />}
+        aria-label={`Remove filter: ${getFilterDescription(filter)}`}
+      />
+    </XStack>
+  );
+}
+
+// Helper Components
+
+function ColumnTypeIcon({ type, size }: { type: DataTableColumnType; size: number }) {
+  switch (type) {
+    case "text":
+      return <TextTIcon size={size} color="$color10" />;
+    case "number":
+      return <HashIcon size={size} color="$color10" />;
+    case "date":
+      return <CalendarBlankIcon size={size} color="$color10" />;
+    case "boolean":
+      return <CheckSquareIcon size={size} color="$color10" />;
+    default:
+      return <TextTIcon size={size} color="$color10" />;
+  }
+}
+
+function getOperatorLabel(operator: FilterOperator): string {
+  const labels: Record<FilterOperator, string> = {
+    // Text
+    contains: "Contains",
+    doesNotContain: "Does not contain",
+    is: "Is",
+    isNot: "Is not",
+    startsWith: "Starts with",
+    endsWith: "Ends with",
+    isEmpty: "Is empty",
+    isNotEmpty: "Is not empty",
+    // Number
+    isLessThan: "Is less than",
+    isGreaterThan: "Is greater than",
+    isLessThanOrEqual: "Is less than or equal to",
+    isGreaterThanOrEqual: "Is greater than or equal to",
+    isBetween: "Is between",
+    isNotBetween: "Is not between",
+    // Date
+    isBefore: "Is before",
+    isAfter: "Is after",
+    isOnOrBefore: "Is on or before",
+    isOnOrAfter: "Is on or after",
+    // Option
+    isAnyOf: "Is any of",
+    isNoneOf: "Is none of",
+  };
+
+  return labels[operator] || operator;
+}