@optilogic/core 1.0.0-beta.0

package/src/components/data-grid/components/FilterPopover.tsx

@@ -0,0 +1,459 @@
+/**
+ * FilterPopover Component
+ *
+ * Renders filter UI based on column filter type:
+ * - Text: Input with operator selection
+ * - Number: Input with comparison operators
+ * - Date: DatePicker with calendar and range support
+ * - Select: Multi-select from predefined options
+ * - Boolean: Checkbox toggle
+ */
+
+import * as React from "react";
+import { format, parseISO, isValid } from "date-fns";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../button";
+import { Input } from "../../input";
+import { Label } from "../../label";
+import { Checkbox } from "../../checkbox";
+import { Switch } from "../../switch";
+import { DatePicker } from "../../date-picker";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../select";
+import type {
+  ColumnDef,
+  FilterConfig,
+  FilterType,
+  TextFilterOperator,
+  NumberFilterOperator,
+  FilterOperator,
+  CellValue,
+  FilterValue,
+} from "../types";
+
+export interface FilterPopoverProps<T = Record<string, CellValue>> {
+  /** Column definition */
+  column: ColumnDef<T>;
+  /** Current filter value */
+  filter?: FilterConfig;
+  /** Callback when filter changes */
+  onFilterChange: (filter: FilterConfig | null) => void;
+}
+
+/** Text filter operators */
+const TEXT_OPERATORS: { value: TextFilterOperator; label: string }[] = [
+  { value: "contains", label: "Contains" },
+  { value: "notContains", label: "Does not contain" },
+  { value: "equals", label: "Equals" },
+  { value: "notEquals", label: "Does not equal" },
+  { value: "startsWith", label: "Starts with" },
+  { value: "endsWith", label: "Ends with" },
+  { value: "isEmpty", label: "Is empty" },
+  { value: "isNotEmpty", label: "Is not empty" },
+];
+
+/** Number filter operators */
+const NUMBER_OPERATORS: { value: NumberFilterOperator; label: string }[] = [
+  { value: "equals", label: "Equals" },
+  { value: "notEquals", label: "Does not equal" },
+  { value: "gt", label: "Greater than" },
+  { value: "gte", label: "Greater than or equal" },
+  { value: "lt", label: "Less than" },
+  { value: "lte", label: "Less than or equal" },
+  { value: "between", label: "Between" },
+  { value: "isEmpty", label: "Is empty" },
+  { value: "isNotEmpty", label: "Is not empty" },
+];
+
+/** Date filter operators */
+const DATE_OPERATORS: { value: string; label: string }[] = [
+  { value: "equals", label: "Equals" },
+  { value: "notEquals", label: "Does not equal" },
+  { value: "before", label: "Before" },
+  { value: "after", label: "After" },
+  { value: "between", label: "Between" },
+  { value: "isEmpty", label: "Is empty" },
+  { value: "isNotEmpty", label: "Is not empty" },
+];
+
+/**
+ * Check if operator requires no value input
+ */
+function isNoValueOperator(operator: string): boolean {
+  return operator === "isEmpty" || operator === "isNotEmpty";
+}
+
+/**
+ * Check if operator requires two values (between)
+ */
+function isBetweenOperator(operator: string): boolean {
+  return operator === "between";
+}
+
+/**
+ * FilterPopover Component
+ */
+export function FilterPopover<T = Record<string, CellValue>>({
+  column,
+  filter,
+  onFilterChange,
+}: FilterPopoverProps<T>) {
+  const filterType = column.filterType || "text";
+
+  const [operator, setOperator] = React.useState<FilterOperator>(
+    filter?.operator || getDefaultOperator(filterType)
+  );
+  const [value, setValue] = React.useState<FilterValue>(filter?.value ?? "");
+  const [valueTo, setValueTo] = React.useState<FilterValue>(filter?.valueTo ?? "");
+
+  function getDefaultOperator(type: FilterType): FilterOperator {
+    switch (type) {
+      case "text":
+        return "contains";
+      case "number":
+        return "equals";
+      case "date":
+        return "equals";
+      case "select":
+        return "equals";
+      case "boolean":
+        return "equals";
+      default:
+        return "contains";
+    }
+  }
+
+  const handleApply = () => {
+    if (isNoValueOperator(operator)) {
+      onFilterChange({
+        columnKey: column.key,
+        operator,
+        value: null,
+      });
+      return;
+    }
+
+    if (isBetweenOperator(operator)) {
+      if (value !== "" && valueTo !== "") {
+        onFilterChange({
+          columnKey: column.key,
+          operator,
+          value,
+          valueTo,
+        });
+      }
+      return;
+    }
+
+    if (value !== "" && value !== null && value !== undefined) {
+      onFilterChange({
+        columnKey: column.key,
+        operator,
+        value,
+      });
+    }
+  };
+
+  const handleClear = () => {
+    setOperator(getDefaultOperator(filterType));
+    setValue("");
+    setValueTo("");
+    onFilterChange(null);
+  };
+
+  /**
+   * Get operators based on filter type
+   */
+  const getOperators = () => {
+    switch (filterType) {
+      case "text":
+        return TEXT_OPERATORS;
+      case "number":
+        return NUMBER_OPERATORS;
+      case "date":
+        return DATE_OPERATORS;
+      default:
+        return TEXT_OPERATORS;
+    }
+  };
+
+  /**
+   * Render text filter
+   */
+  const renderTextFilter = () => (
+    <div className="space-y-3">
+      <div className="space-y-1.5">
+        <Label className="text-xs">Condition</Label>
+        <Select
+          value={operator}
+          onValueChange={(val) => setOperator(val as TextFilterOperator)}
+        >
+          <SelectTrigger className="h-8 text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {TEXT_OPERATORS.map((op) => (
+              <SelectItem key={op.value} value={op.value}>
+                {op.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {!isNoValueOperator(operator) && (
+        <div className="space-y-1.5">
+          <Label className="text-xs">Value</Label>
+          <Input
+            type="text"
+            value={value != null && !Array.isArray(value) ? String(value) : ""}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="Enter value..."
+            className="h-8 text-sm"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleApply();
+              }
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+
+  /**
+   * Render number filter
+   */
+  const renderNumberFilter = () => (
+    <div className="space-y-3">
+      <div className="space-y-1.5">
+        <Label className="text-xs">Condition</Label>
+        <Select
+          value={operator}
+          onValueChange={(val) => setOperator(val as NumberFilterOperator)}
+        >
+          <SelectTrigger className="h-8 text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {NUMBER_OPERATORS.map((op) => (
+              <SelectItem key={op.value} value={op.value}>
+                {op.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {!isNoValueOperator(operator) && (
+        <>
+          <div className="space-y-1.5">
+            <Label className="text-xs">
+              {isBetweenOperator(operator) ? "From" : "Value"}
+            </Label>
+            <Input
+              type="number"
+              value={value != null && !Array.isArray(value) ? String(value) : ""}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder="Enter number..."
+              className="h-8 text-sm"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !isBetweenOperator(operator)) {
+                  e.preventDefault();
+                  handleApply();
+                }
+              }}
+            />
+          </div>
+
+          {isBetweenOperator(operator) && (
+            <div className="space-y-1.5">
+              <Label className="text-xs">To</Label>
+              <Input
+                type="number"
+                value={valueTo != null && !Array.isArray(valueTo) ? String(valueTo) : ""}
+                onChange={(e) => setValueTo(e.target.value)}
+                placeholder="Enter number..."
+                className="h-8 text-sm"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    handleApply();
+                  }
+                }}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+
+  const renderDateFilter = () => {
+    const dateValue = React.useMemo(() => {
+      if (!value) return undefined;
+      if (value instanceof Date) return value;
+      if (typeof value === "string") {
+        const parsed = parseISO(value);
+        return isValid(parsed) ? parsed : undefined;
+      }
+      return undefined;
+    }, [value]);
+
+    const dateToValue = React.useMemo(() => {
+      if (!valueTo) return undefined;
+      if (valueTo instanceof Date) return valueTo;
+      if (typeof valueTo === "string") {
+        const parsed = parseISO(valueTo);
+        return isValid(parsed) ? parsed : undefined;
+      }
+      return undefined;
+    }, [valueTo]);
+
+    const handleDateChange = (date: Date | undefined) => {
+      setValue(date ? format(date, "yyyy-MM-dd") : "");
+    };
+
+    const handleDateToChange = (date: Date | undefined) => {
+      setValueTo(date ? format(date, "yyyy-MM-dd") : "");
+    };
+
+    return (
+      <div className="space-y-3">
+        <div className="space-y-1.5">
+          <Label className="text-xs">Condition</Label>
+          <Select
+            value={operator}
+            onValueChange={(val) => setOperator(val as FilterOperator)}
+          >
+            <SelectTrigger className="h-8 text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {DATE_OPERATORS.map((op) => (
+                <SelectItem key={op.value} value={op.value}>
+                  {op.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {!isNoValueOperator(operator) && (
+          <>
+            <div className="space-y-1.5">
+              <Label className="text-xs">
+                {isBetweenOperator(operator) ? "From" : "Date"}
+              </Label>
+              <DatePicker
+                value={dateValue}
+                onChange={handleDateChange}
+                placeholder="Select date..."
+                className="h-8 text-sm"
+              />
+            </div>
+
+            {isBetweenOperator(operator) && (
+              <div className="space-y-1.5">
+                <Label className="text-xs">To</Label>
+                <DatePicker
+                  value={dateToValue}
+                  onChange={handleDateToChange}
+                  placeholder="Select date..."
+                  className="h-8 text-sm"
+                  minDate={dateValue}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    );
+  };
+
+  const renderSelectFilter = () => {
+    const options = column.filterOptions || [];
+
+    return (
+      <div className="space-y-3">
+        <div className="space-y-1.5">
+          <Label className="text-xs">Select value</Label>
+          <Select value={value != null && !Array.isArray(value) ? String(value) : undefined} onValueChange={setValue}>
+            <SelectTrigger className="h-8 text-sm">
+              <SelectValue placeholder="Select..." />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    );
+  };
+
+  const renderBooleanFilter = () => (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <Label className="text-sm">{column.header}</Label>
+        <Switch
+          checked={value === true}
+          onCheckedChange={(checked) => setValue(checked)}
+        />
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Filter rows where this value is {value ? "true" : "false"}
+      </p>
+    </div>
+  );
+
+  const renderFilter = () => {
+    switch (filterType) {
+      case "text":
+        return renderTextFilter();
+      case "number":
+        return renderNumberFilter();
+      case "date":
+        return renderDateFilter();
+      case "select":
+        return renderSelectFilter();
+      case "boolean":
+        return renderBooleanFilter();
+      default:
+        return renderTextFilter();
+    }
+  };
+
+  return (
+    <div className="p-3 space-y-4">
+      <div className="font-medium text-sm">
+        Filter: {typeof column.header === "string" ? column.header : "Column"}
+      </div>
+
+      {renderFilter()}
+
+      <div className="flex gap-2 pt-2 border-t border-border">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleClear}
+          className="flex-1"
+        >
+          Clear
+        </Button>
+        <Button size="sm" onClick={handleApply} className="flex-1">
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/data-grid/components/HeaderCell.tsx

@@ -0,0 +1,207 @@
+/**
+ * HeaderCell Component
+ *
+ * Renders a single header cell with:
+ * - Sort indicator and click-to-sort
+ * - Filter trigger (popover)
+ * - Resize handle (drag to resize)
+ */
+
+import * as React from "react";
+import { ChevronUp, ChevronDown, Filter, X, GripVertical } from "lucide-react";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../button";
+import { Popover, PopoverTrigger, PopoverContent } from "../../popover";
+import type { ColumnDef, SortConfig, FilterConfig } from "../types";
+import { FilterPopover } from "./FilterPopover";
+
+export interface HeaderCellProps<T = any> {
+  /** Column definition */
+  column: ColumnDef<T>;
+  /** Column index */
+  columnIndex: number;
+  /** Current width of the column */
+  width: number;
+  /** Current sort config for this column (if sorted) */
+  sorting?: SortConfig;
+  /** Current filter config for this column (if filtered) */
+  filter?: FilterConfig;
+  /** Whether this column is resizable */
+  isResizable: boolean;
+  /** Callback when sort is toggled */
+  onSort?: () => void;
+  /** Callback when filter changes */
+  onFilterChange?: (filter: FilterConfig | null) => void;
+  /** Resize handle mouse down handler */
+  onResizeMouseDown?: (event: React.MouseEvent) => void;
+  /** Resize handle double click handler */
+  onResizeDoubleClick?: (event: React.MouseEvent) => void;
+  /** Whether currently resizing this column */
+  isResizing?: boolean;
+}
+
+/**
+ * HeaderCell Component
+ */
+export function HeaderCell<T = any>({
+  column,
+  columnIndex,
+  width,
+  sorting,
+  filter,
+  isResizable,
+  onSort,
+  onFilterChange,
+  onResizeMouseDown,
+  onResizeDoubleClick,
+  isResizing,
+}: HeaderCellProps<T>) {
+  const [filterOpen, setFilterOpen] = React.useState(false);
+
+  const isSorted = sorting?.field === column.key;
+  const isFiltered = !!filter;
+  const isSortable = column.sortable && onSort;
+  const isFilterable = column.filterable && onFilterChange;
+
+  const handleHeaderClick = () => {
+    if (isSortable) {
+      onSort();
+    }
+  };
+
+  const handleFilterChange = (newFilter: FilterConfig | null) => {
+    onFilterChange?.(newFilter);
+    if (!newFilter) {
+      setFilterOpen(false);
+    }
+  };
+
+  const handleClearFilter = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onFilterChange?.(null);
+  };
+
+  const renderSortIndicator = () => {
+    if (!column.sortable) return null;
+
+    const Icon = isSorted && sorting?.direction === "desc" ? ChevronDown : ChevronUp;
+
+    return (
+      <Icon
+        className={cn(
+          "w-4 h-4 flex-shrink-0 transition-opacity",
+          isSorted
+            ? "opacity-100 text-foreground"
+            : "opacity-30 hover:opacity-60 text-muted-foreground"
+        )}
+      />
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative flex-shrink-0 border-r border-border last:border-r-0",
+        "bg-muted select-none",
+        isResizing && "bg-accent/20"
+      )}
+      style={{ width }}
+    >
+      <div
+        className={cn(
+          "flex items-center gap-1 px-3 py-2 h-full",
+          isResizable && "pr-6", // Extra padding to create space for resize handle
+          isSortable && "cursor-pointer hover:bg-accent/10",
+          column.align === "center" && "justify-center",
+          column.align === "right" && "justify-end"
+        )}
+        onClick={handleHeaderClick}
+        role={isSortable ? "button" : undefined}
+        tabIndex={isSortable ? 0 : undefined}
+        onKeyDown={(e) => {
+          if (isSortable && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            handleHeaderClick();
+          }
+        }}
+      >
+        <span className="text-sm font-medium truncate flex-1">
+          {column.header}
+        </span>
+
+        {renderSortIndicator()}
+
+        {isFilterable && (
+          <Popover open={filterOpen} onOpenChange={setFilterOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "h-6 w-6 p-0",
+                  isFiltered && "text-primary"
+                )}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setFilterOpen(!filterOpen);
+                }}
+                aria-label={`Filter ${column.header}`}
+              >
+                <Filter className="w-3.5 h-3.5" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              align="start"
+              className="w-72 p-0"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <FilterPopover
+                column={column}
+                filter={filter}
+                onFilterChange={handleFilterChange}
+              />
+            </PopoverContent>
+          </Popover>
+        )}
+
+        {isFiltered && !filterOpen && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 p-0 text-primary hover:text-destructive"
+            onClick={handleClearFilter}
+            aria-label="Clear filter"
+          >
+            <X className="w-3 h-3" />
+          </Button>
+        )}
+      </div>
+
+      {isResizable && (
+        <div
+          className={cn(
+            "absolute top-0 right-0 w-4 h-full cursor-col-resize z-10",
+            "flex items-center justify-center",
+            "hover:bg-accent/50 transition-colors",
+            "group",
+            isResizing && "bg-accent"
+          )}
+          onMouseDown={onResizeMouseDown}
+          onDoubleClick={onResizeDoubleClick}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label={`Resize column ${column.header}`}
+        >
+          <GripVertical
+            className={cn(
+              "w-3 h-4 transition-colors",
+              "text-muted-foreground/40",
+              "group-hover:text-primary",
+              isResizing && "text-primary"
+            )}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/data-grid/components/index.ts

@@ -0,0 +1,14 @@
+/**
+ * DataGrid Components
+ *
+ * Export all sub-components used by the DataGrid
+ */
+
+export { HeaderCell } from "./HeaderCell";
+export type { HeaderCellProps } from "./HeaderCell";
+
+export { FilterPopover } from "./FilterPopover";
+export type { FilterPopoverProps } from "./FilterPopover";
+
+export { CellEditor } from "./CellEditor";
+export type { CellEditorProps } from "./CellEditor";

package/src/components/data-grid/hooks/index.ts

@@ -0,0 +1,28 @@
+/**
+ * DataGrid Hooks
+ *
+ * Export all hooks used by the DataGrid component
+ */
+
+export { useDataGridState } from "./useDataGridState";
+export type {
+  UseDataGridStateOptions,
+  UseDataGridStateReturn,
+} from "./useDataGridState";
+
+export { useKeyboardNavigation } from "./useKeyboardNavigation";
+export type {
+  UseKeyboardNavigationOptions,
+  UseKeyboardNavigationReturn,
+} from "./useKeyboardNavigation";
+
+export {
+  useColumnResize,
+  useColumnResizeManager,
+} from "./useColumnResize";
+export type {
+  UseColumnResizeOptions,
+  UseColumnResizeReturn,
+  UseColumnResizeManagerOptions,
+  UseColumnResizeManagerReturn,
+} from "./useColumnResize";