@multiplatform.one/table 6.0.0

package/src/components/DataTableSearch/index.tsx

@@ -0,0 +1,535 @@
+import { CaretDownIcon, MagnifyingGlassIcon, GearIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button, Checkbox, Input } from "@multiplatform.one/forms";
+import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+export interface SearchOptions {
+  searchTerm: string;
+  columns: string[];
+  caseSensitive: boolean;
+  wholeWord: boolean;
+  regex: boolean;
+  highlightResults: boolean;
+}
+
+export interface DataTableSearchProps<T = any> {
+  data?: T[];
+  columns?: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    searchable?: boolean;
+  }>;
+  onSearchResults?: (results: T[], searchOptions: SearchOptions) => void;
+  onHighlightText?: (text: string) => void;
+  placeholder?: string;
+  debounceMs?: number;
+  showAdvancedOptions?: boolean;
+  defaultSearchColumns?: string[];
+  disabled?: boolean;
+}
+
+export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
+  // Try to consume from DataTableStateContext (compound component pattern)
+  const ctx = useDataTableState();
+
+  // Resolve values: explicit props override context values
+  const data = props.data ?? (ctx?.computed.filteredData as T[]) ?? [];
+  const columns = props.columns ?? [];
+
+  const {
+    onSearchResults,
+    placeholder = "Search across all columns...",
+    debounceMs = 300,
+    showAdvancedOptions = true,
+    defaultSearchColumns,
+    disabled = false,
+  } = props;
+
+  const { knobProps } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const searchMaxWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [searchOptions, setSearchOptions] = useState<SearchOptions>({
+    searchTerm: "",
+    columns: defaultSearchColumns || columns.map((col) => col.accessorKey || col.id || ""),
+    caseSensitive: false,
+    wholeWord: false,
+    regex: false,
+    highlightResults: true,
+  });
+
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm, debounceMs]);
+
+  // Perform search when debounced term changes
+  useEffect(() => {
+    if (debouncedSearchTerm.trim()) {
+      const results = performSearch(data, {
+        ...searchOptions,
+        searchTerm: debouncedSearchTerm,
+      });
+      onSearchResults?.(results, {
+        ...searchOptions,
+        searchTerm: debouncedSearchTerm,
+      });
+    } else {
+      // Return all data when search is cleared
+      onSearchResults?.(data, {
+        ...searchOptions,
+        searchTerm: "",
+      });
+    }
+  }, [debouncedSearchTerm, data, searchOptions, onSearchResults]);
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+  };
+
+  const handleClearSearch = () => {
+    setSearchTerm("");
+    setDebouncedSearchTerm("");
+  };
+
+  const handleOptionsChange = (newOptions: Partial<SearchOptions>) => {
+    setSearchOptions((prev) => ({ ...prev, ...newOptions }));
+  };
+
+  const searchableColumns = columns.filter((col) => col.searchable !== false);
+  const selectedColumnCount = searchOptions.columns.length;
+  const totalColumnCount = searchableColumns.length;
+
+  return (
+    <XStack gap="$2" alignItems="center" flex={1} maxWidth={searchMaxWidth}>
+      <View flex={1}>
+        <Input
+          value={searchTerm}
+          onChangeText={handleSearchChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          leftIcon={<MagnifyingGlassIcon size={16} />}
+          rightIcon={
+            searchTerm ? (
+              <View
+                padding="$1"
+                borderRadius="$2"
+                cursor="pointer"
+                hoverStyle={{ backgroundColor: "$color4" }}
+                pressStyle={{ backgroundColor: "$color5" }}
+                onPress={handleClearSearch}
+                aria-label="Clear search"
+              >
+                <XIcon size={14} />
+              </View>
+            ) : undefined
+          }
+        />
+      </View>
+
+      {showAdvancedOptions && (
+        <SearchOptionsPopover
+          searchOptions={searchOptions}
+          onOptionsChange={handleOptionsChange}
+          columns={searchableColumns}
+          selectedColumnCount={selectedColumnCount}
+          totalColumnCount={totalColumnCount}
+          disabled={disabled}
+        />
+      )}
+
+      {debouncedSearchTerm && (
+        <View paddingHorizontal="$2">
+          <Text fontSize="$2" color="$color10">
+            {
+              performSearch(data, {
+                ...searchOptions,
+                searchTerm: debouncedSearchTerm,
+              }).length
+            }{" "}
+            results
+          </Text>
+        </View>
+      )}
+    </XStack>
+  );
+}
+
+// Search Options Popover
+
+interface SearchOptionsPopoverProps {
+  searchOptions: SearchOptions;
+  onOptionsChange: (options: Partial<SearchOptions>) => void;
+  columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    searchable?: boolean;
+  }>;
+  selectedColumnCount: number;
+  totalColumnCount: number;
+  disabled: boolean;
+}
+
+function SearchOptionsPopover({
+  searchOptions,
+  onOptionsChange,
+  columns,
+  selectedColumnCount,
+  totalColumnCount,
+  disabled,
+}: SearchOptionsPopoverProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(() => {
+    const visibility: Record<string, boolean> = {};
+    columns.forEach((col) => {
+      const key = col.accessorKey || col.id || "";
+      visibility[key] = searchOptions.columns.includes(key);
+    });
+    return visibility;
+  });
+
+  const handleColumnToggle = (columnKey: string, checked: boolean) => {
+    const newVisibility = { ...columnVisibility, [columnKey]: checked };
+    setColumnVisibility(newVisibility);
+
+    const selectedColumns = Object.entries(newVisibility)
+      .filter(([_, isVisible]) => isVisible)
+      .map(([key]) => key);
+
+    onOptionsChange({ columns: selectedColumns });
+  };
+
+  const handleSelectAllColumns = () => {
+    const allColumns = columns.map((col) => col.accessorKey || col.id || "");
+    setColumnVisibility(Object.fromEntries(allColumns.map((key) => [key, true])));
+    onOptionsChange({ columns: allColumns });
+  };
+
+  const handleSelectNoColumns = () => {
+    setColumnVisibility(
+      Object.fromEntries(columns.map((col) => [col.accessorKey || col.id || "", false])),
+    );
+    onOptionsChange({ columns: [] });
+  };
+
+  return (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button
+          size={knobProps.sizeToken}
+          variant="outlined"
+          icon={<GearIcon size={16} />}
+          disabled={disabled}
+          aria-label="Search options"
+        >
+          <CaretDownIcon size={16} />
+        </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 }}
+        minWidth={280}
+      >
+        <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
+          <Text fontSize="$5" fontWeight="600">
+            Search Options
+          </Text>
+
+          {/* Search Settings */}
+          <YStack {...knobProps.gap}>
+            <Text fontSize="$4" fontWeight="500">
+              Search Settings
+            </Text>
+
+            <Checkbox
+              label="Case sensitive"
+              checked={searchOptions.caseSensitive}
+              onCheckedChange={(checked) => onOptionsChange({ caseSensitive: checked as boolean })}
+            />
+
+            <Checkbox
+              label="Whole word only"
+              checked={searchOptions.wholeWord}
+              onCheckedChange={(checked) => onOptionsChange({ wholeWord: checked as boolean })}
+            />
+
+            <Checkbox
+              label="Use regex"
+              checked={searchOptions.regex}
+              onCheckedChange={(checked) => onOptionsChange({ regex: checked as boolean })}
+            />
+
+            <Checkbox
+              label="Highlight results"
+              checked={searchOptions.highlightResults}
+              onCheckedChange={(checked) =>
+                onOptionsChange({ highlightResults: checked as boolean })
+              }
+            />
+          </YStack>
+
+          <Separator />
+
+          {/* Column Selection */}
+          <YStack {...knobProps.gap}>
+            <XStack justifyContent="space-between" alignItems="center">
+              <Text fontSize="$4" fontWeight="500">
+                Search Columns
+              </Text>
+              <Text fontSize="$2" color="$color10">
+                {selectedColumnCount} of {totalColumnCount}
+              </Text>
+            </XStack>
+
+            <XStack gap="$2">
+              <Button size="$2" variant="outlined" onPress={handleSelectAllColumns}>
+                All
+              </Button>
+              <Button size="$2" variant="outlined" onPress={handleSelectNoColumns}>
+                None
+              </Button>
+            </XStack>
+
+            <ScrollView maxHeight={200}>
+              <YStack gap="$1">
+                {columns.map((col) => {
+                  const key = col.accessorKey || col.id || "";
+                  return (
+                    <Checkbox
+                      key={key}
+                      label={col.header || key}
+                      checked={columnVisibility[key] || false}
+                      onCheckedChange={(checked) => handleColumnToggle(key, checked as boolean)}
+                    />
+                  );
+                })}
+              </YStack>
+            </ScrollView>
+          </YStack>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+// Search Utilities
+
+export function performSearch<T>(data: T[], options: SearchOptions): T[] {
+  const { searchTerm, columns, caseSensitive, wholeWord, regex } = options;
+
+  if (!searchTerm.trim()) {
+    return data;
+  }
+
+  let searchPattern: RegExp;
+
+  try {
+    if (regex) {
+      searchPattern = new RegExp(searchTerm, caseSensitive ? "g" : "gi");
+    } else {
+      const pattern = wholeWord ? `\\b${escapeRegex(searchTerm)}\\b` : escapeRegex(searchTerm);
+      searchPattern = new RegExp(pattern, caseSensitive ? "g" : "gi");
+    }
+  } catch {
+    // Invalid regex, return empty results
+    return [];
+  }
+
+  return data.filter((item) => {
+    return columns.some((columnKey) => {
+      const value = (item as any)[columnKey];
+      if (value == null) return false;
+
+      const stringValue = String(value);
+      return searchPattern.test(stringValue);
+    });
+  });
+}
+
+function escapeRegex(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// Text Highlighting Utility
+
+export interface HighlightOptions {
+  searchTerm: string;
+  caseSensitive?: boolean;
+  wholeWord?: boolean;
+  regex?: boolean;
+  highlightClassName?: string;
+  highlightStyle?: React.CSSProperties;
+}
+
+export function highlightText(text: string, options: HighlightOptions): React.ReactNode {
+  const {
+    searchTerm,
+    caseSensitive = false,
+    wholeWord = false,
+    regex = false,
+    highlightClassName = "search-highlight",
+    highlightStyle: _highlightStyle = {
+      backgroundColor: "var(--color-yellow3)",
+      padding: "2px 4px",
+      borderRadius: "3px",
+      fontWeight: "bold",
+    },
+  } = options;
+
+  if (!searchTerm.trim() || !text) {
+    return text;
+  }
+
+  let searchPattern: RegExp;
+
+  try {
+    if (regex) {
+      searchPattern = new RegExp(searchTerm, caseSensitive ? "g" : "gi");
+    } else {
+      const pattern = wholeWord ? `\\b${escapeRegex(searchTerm)}\\b` : escapeRegex(searchTerm);
+      searchPattern = new RegExp(pattern, caseSensitive ? "g" : "gi");
+    }
+  } catch {
+    return text;
+  }
+
+  const parts = text.split(searchPattern);
+
+  if (parts.length === 1) {
+    return text;
+  }
+
+  const matches = text.match(searchPattern) || [];
+  const result: React.ReactNode[] = [];
+
+  parts.forEach((part, index) => {
+    result.push(part);
+
+    if (index < parts.length - 1 && matches[index]) {
+      result.push(
+        <Text
+          key={`highlight-${index}`}
+          className={highlightClassName}
+          backgroundColor="$yellow3"
+          paddingHorizontal="$1"
+          borderRadius="$1"
+          fontWeight="bold"
+        >
+          {matches[index]}
+        </Text>,
+      );
+    }
+  });
+
+  return result;
+}
+
+// Hook for Full-Text Search
+
+export interface UseFullTextSearchOptions<T = any> {
+  data: T[];
+  columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    searchable?: boolean;
+  }>;
+  debounceMs?: number;
+  defaultSearchColumns?: string[];
+}
+
+export interface UseFullTextSearchReturn<T = any> {
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+  searchResults: T[];
+  searchOptions: SearchOptions;
+  setSearchOptions: React.Dispatch<React.SetStateAction<SearchOptions>>;
+  isSearching: boolean;
+  clearSearch: () => void;
+  highlightText: (text: string) => React.ReactNode;
+}
+
+export function useFullTextSearch<T = any>({
+  data,
+  columns,
+  debounceMs = 300,
+  defaultSearchColumns,
+}: UseFullTextSearchOptions<T>): UseFullTextSearchReturn<T> {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [searchOptions, setSearchOptions] = useState<SearchOptions>({
+    searchTerm: "",
+    columns: defaultSearchColumns || columns.map((col) => col.accessorKey || col.id || ""),
+    caseSensitive: false,
+    wholeWord: false,
+    regex: false,
+    highlightResults: true,
+  });
+
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm, debounceMs]);
+
+  // Perform search
+  const searchResults = useMemo(() => {
+    if (!debouncedSearchTerm.trim()) {
+      return data;
+    }
+
+    return performSearch(data, {
+      ...searchOptions,
+      searchTerm: debouncedSearchTerm,
+    });
+  }, [data, debouncedSearchTerm, searchOptions]);
+
+  const clearSearch = useCallback(() => {
+    setSearchTerm("");
+    setDebouncedSearchTerm("");
+  }, []);
+
+  const highlightTextFunction = useCallback(
+    (text: string) => {
+      if (!searchOptions.highlightResults || !debouncedSearchTerm.trim()) {
+        return text;
+      }
+
+      return highlightText(text, {
+        searchTerm: debouncedSearchTerm,
+        caseSensitive: searchOptions.caseSensitive,
+        wholeWord: searchOptions.wholeWord,
+        regex: searchOptions.regex,
+      });
+    },
+    [debouncedSearchTerm, searchOptions],
+  );
+
+  return {
+    searchTerm,
+    setSearchTerm,
+    searchResults,
+    searchOptions,
+    setSearchOptions,
+    isSearching: debouncedSearchTerm !== searchTerm,
+    clearSearch,
+    highlightText: highlightTextFunction,
+  };
+}