@optilogic/core 1.0.0-beta.0

package/src/components/data-grid/utils/dataProcessing.ts

@@ -0,0 +1,277 @@
+/**
+ * Data Processing Utilities
+ *
+ * Functions for sorting and filtering data internally in uncontrolled mode.
+ * Also exports helper functions for use in controlled mode.
+ */
+
+import type {
+  ColumnDef,
+  SortConfig,
+  FilterConfig,
+  FilterOperator,
+  FilterType,
+  CellValue,
+  FilterValue,
+} from "../types";
+
+/**
+ * Get a value from a row using column accessor or key
+ */
+export function getCellValue<T>(row: T, column: ColumnDef<T>): CellValue {
+  if (column.accessor) {
+    return column.accessor(row);
+  }
+  // Dynamic property access - row is expected to be an object with string keys
+  return (row as Record<string, CellValue>)[column.key];
+}
+
+/**
+ * Apply sorting to data
+ */
+export function applySorting<T>(
+  data: T[],
+  sorting: SortConfig[],
+  columns: ColumnDef<T>[]
+): T[] {
+  if (sorting.length === 0) return data;
+
+  const result = [...data];
+
+  // Apply sorts in order (primary, secondary, etc.)
+  for (const sort of sorting) {
+    const column = columns.find((c) => c.key === sort.field);
+    if (!column) continue;
+
+    result.sort((a, b) => {
+      // Use custom comparator if provided
+      if (column.sortComparator) {
+        const cmp = column.sortComparator(a, b);
+        return sort.direction === "asc" ? cmp : -cmp;
+      }
+
+      // Default comparison
+      const aVal = getCellValue(a, column);
+      const bVal = getCellValue(b, column);
+
+      // Handle null/undefined
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return sort.direction === "asc" ? 1 : -1;
+      if (bVal == null) return sort.direction === "asc" ? -1 : 1;
+
+      // Compare based on type
+      let comparison = 0;
+
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        comparison = aVal.localeCompare(bVal);
+      } else if (typeof aVal === "number" && typeof bVal === "number") {
+        comparison = aVal - bVal;
+      } else if (aVal instanceof Date && bVal instanceof Date) {
+        comparison = aVal.getTime() - bVal.getTime();
+      } else if (typeof aVal === "boolean" && typeof bVal === "boolean") {
+        comparison = aVal === bVal ? 0 : aVal ? 1 : -1;
+      } else {
+        // Fallback: convert to string
+        comparison = String(aVal).localeCompare(String(bVal));
+      }
+
+      return sort.direction === "asc" ? comparison : -comparison;
+    });
+  }
+
+  return result;
+}
+
+/**
+ * Extract a single CellValue from a FilterValue (handles arrays for single-value operations)
+ */
+function extractSingleValue(filterValue: FilterValue): CellValue {
+  if (Array.isArray(filterValue)) {
+    return filterValue[0];
+  }
+  return filterValue;
+}
+
+/**
+ * Parse a value as a Date, handling various input formats
+ */
+function parseDate(value: CellValue): Date | null {
+  if (value == null || value === "") return null;
+  if (value instanceof Date) return value;
+  if (typeof value === "string" || typeof value === "number") {
+    const date = new Date(value);
+    return isNaN(date.getTime()) ? null : date;
+  }
+  return null;
+}
+
+/**
+ * Compare two dates (ignoring time component for date-only comparisons)
+ */
+function compareDates(date1: Date, date2: Date): number {
+  // Normalize to start of day for comparison
+  const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+  const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+  return d1.getTime() - d2.getTime();
+}
+
+/**
+ * Apply a single filter operator to a value.
+ * Can be used in controlled mode to filter data with the same logic as internal filtering.
+ * 
+ * @param value - The cell value to test
+ * @param filterValue - The filter value to compare against
+ * @param filterValueTo - Secondary value for 'between' operator
+ * @param operator - The filter operator to apply
+ * @param filterType - Optional filter type hint (text, number, date, boolean)
+ * @returns true if the value passes the filter, false otherwise
+ * 
+ * @example
+ * // Using in controlled mode
+ * const filteredData = data.filter(row => 
+ *   applyFilterOperator(row.name, "john", undefined, "contains", "text")
+ * );
+ */
+export function applyFilterOperator(
+  value: CellValue,
+  filterValue: FilterValue,
+  filterValueTo: FilterValue,
+  operator: FilterOperator,
+  filterType?: string
+): boolean {
+  // Handle isEmpty/isNotEmpty first (works for any type)
+  if (operator === "isEmpty") {
+    return value === "" || value == null;
+  }
+  if (operator === "isNotEmpty") {
+    return value !== "" && value != null;
+  }
+
+  // Handle null/undefined values for other operators
+  if (value == null) {
+    return false;
+  }
+
+  // Date-specific operators
+  if (filterType === "date" || operator === "before" || operator === "after") {
+    const dateValue = parseDate(value);
+    const dateFilterValue = parseDate(extractSingleValue(filterValue));
+    const dateFilterValueTo = parseDate(extractSingleValue(filterValueTo));
+
+    if (!dateValue) return false;
+
+    switch (operator) {
+      case "equals":
+        return dateFilterValue ? compareDates(dateValue, dateFilterValue) === 0 : false;
+      case "notEquals":
+        return dateFilterValue ? compareDates(dateValue, dateFilterValue) !== 0 : false;
+      case "before":
+        return dateFilterValue ? compareDates(dateValue, dateFilterValue) < 0 : false;
+      case "after":
+        return dateFilterValue ? compareDates(dateValue, dateFilterValue) > 0 : false;
+      case "between":
+        if (!dateFilterValue || !dateFilterValueTo) return false;
+        return (
+          compareDates(dateValue, dateFilterValue) >= 0 &&
+          compareDates(dateValue, dateFilterValueTo) <= 0
+        );
+      default:
+        return true;
+    }
+  }
+
+  // Number-specific operators
+  if (filterType === "number" || ["gt", "gte", "lt", "lte", "between"].includes(operator)) {
+    const numValue = Number(value);
+    const singleFilterValue = extractSingleValue(filterValue);
+    const numFilterValue = Number(singleFilterValue);
+    
+    if (isNaN(numValue)) return false;
+
+    switch (operator) {
+      case "equals":
+        return numValue === numFilterValue;
+      case "notEquals":
+        return numValue !== numFilterValue;
+      case "gt":
+        return numValue > numFilterValue;
+      case "gte":
+        return numValue >= numFilterValue;
+      case "lt":
+        return numValue < numFilterValue;
+      case "lte":
+        return numValue <= numFilterValue;
+      case "between":
+        const singleFilterValueTo = extractSingleValue(filterValueTo);
+        const numFilterValueTo = Number(singleFilterValueTo);
+        return numValue >= numFilterValue && numValue <= numFilterValueTo;
+      default:
+        return true;
+    }
+  }
+
+  // Boolean filter
+  if (filterType === "boolean") {
+    const boolValue = value === true || value === "true" || value === 1;
+    const singleBoolFilterValue = extractSingleValue(filterValue);
+    const boolFilterValue = singleBoolFilterValue === true || singleBoolFilterValue === "true" || singleBoolFilterValue === 1;
+    return boolValue === boolFilterValue;
+  }
+
+  // Text/string operators (default)
+  const strValue = String(value).toLowerCase();
+  const singleStrFilterValue = extractSingleValue(filterValue);
+  const strFilterValue = singleStrFilterValue != null ? String(singleStrFilterValue).toLowerCase() : "";
+
+  switch (operator) {
+    case "contains":
+      return strValue.includes(strFilterValue);
+    case "notContains":
+      return !strValue.includes(strFilterValue);
+    case "equals":
+      return strValue === strFilterValue;
+    case "notEquals":
+      return strValue !== strFilterValue;
+    case "startsWith":
+      return strValue.startsWith(strFilterValue);
+    case "endsWith":
+      return strValue.endsWith(strFilterValue);
+    default:
+      return true;
+  }
+}
+
+/**
+ * Apply filters to data
+ */
+export function applyFilters<T>(
+  data: T[],
+  filters: FilterConfig[],
+  columns: ColumnDef<T>[]
+): T[] {
+  if (filters.length === 0) return data;
+
+  return data.filter((row) => {
+    // All filters must pass (AND logic)
+    return filters.every((filter) => {
+      const column = columns.find((c) => c.key === filter.columnKey);
+      if (!column) return true;
+
+      const value = getCellValue(row, column);
+
+      // Use custom filter function if provided
+      if (column.filterFn) {
+        return column.filterFn(row, filter.value, filter.operator);
+      }
+
+      // Use default filter logic with filter type for better handling
+      return applyFilterOperator(
+        value,
+        filter.value,
+        filter.valueTo,
+        filter.operator,
+        column.filterType
+      );
+    });
+  });
+}

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

@@ -0,0 +1,12 @@
+/**
+ * DataGrid Utilities
+ *
+ * Export data processing utilities
+ */
+
+export {
+  getCellValue,
+  applySorting,
+  applyFilters,
+  applyFilterOperator,
+} from "./dataProcessing";

package/src/components/date-picker.tsx

@@ -0,0 +1,366 @@
+/**
+ * DatePicker Component
+ *
+ * A complete date picker combining an input field with a calendar popover.
+ * Built using library primitives for consistent styling.
+ *
+ * Features:
+ * - Input field with formatted date display
+ * - Calendar popover for date selection
+ * - Controlled and uncontrolled modes
+ * - Clearable option
+ * - Min/max date constraints
+ * - Custom date formatting
+ * - Keyboard accessible
+ */
+
+import * as React from "react";
+import { format, parse, isValid } from "date-fns";
+import { Calendar as CalendarIcon, X } from "lucide-react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+import { Calendar } from "./calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface DatePickerProps {
+  /** Selected date value */
+  value?: Date;
+  /** Default value for uncontrolled mode */
+  defaultValue?: Date;
+  /** Callback when date changes */
+  onChange?: (date: Date | undefined) => void;
+  /** Placeholder text when no date selected */
+  placeholder?: string;
+  /** Whether the picker is disabled */
+  disabled?: boolean;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Date format string (date-fns format) */
+  dateFormat?: string;
+  /** Whether to show a clear button */
+  clearable?: boolean;
+  /** Additional class name */
+  className?: string;
+  /** Input ID for label association */
+  id?: string;
+  /** Input name for form submission */
+  name?: string;
+  /** Alignment of the popover */
+  align?: "start" | "center" | "end";
+  /** Side of the popover */
+  side?: "top" | "right" | "bottom" | "left";
+  /** Whether the popover should match the trigger width */
+  matchTriggerWidth?: boolean;
+  /** Callback when the popover opens/closes */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * DatePicker Component
+ *
+ * A date input with calendar popover for easy date selection.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [date, setDate] = useState<Date>();
+ * <DatePicker value={date} onChange={setDate} />
+ * ```
+ *
+ * @example With constraints
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={setDate}
+ *   minDate={new Date()}
+ *   maxDate={addMonths(new Date(), 3)}
+ *   placeholder="Select a date"
+ * />
+ * ```
+ *
+ * @example Custom format
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={setDate}
+ *   dateFormat="dd/MM/yyyy"
+ * />
+ * ```
+ */
+function DatePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  minDate,
+  maxDate,
+  dateFormat = "PPP",
+  clearable = false,
+  className,
+  id,
+  name,
+  align = "start",
+  side = "bottom",
+  matchTriggerWidth = false,
+  onOpenChange,
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState<Date | undefined>(
+    defaultValue
+  );
+
+  // Controlled vs uncontrolled
+  const isControlled = value !== undefined;
+  const selectedDate = isControlled ? value : internalValue;
+
+  const handleSelect = (date: Date | undefined) => {
+    if (!isControlled) {
+      setInternalValue(date);
+    }
+    onChange?.(date);
+    setOpen(false);
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    handleSelect(undefined);
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    onOpenChange?.(newOpen);
+  };
+
+  // Format the selected date for display
+  const formattedDate = selectedDate
+    ? format(selectedDate, dateFormat)
+    : undefined;
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          variant="outline"
+          disabled={disabled}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !selectedDate && "text-muted-foreground",
+            className
+          )}
+          aria-expanded={open}
+          aria-haspopup="dialog"
+        >
+          <CalendarIcon className="mr-2 h-4 w-4 shrink-0" />
+          <span className="flex-1 truncate">
+            {formattedDate ?? placeholder}
+          </span>
+          {clearable && selectedDate && (
+            <X
+              className="ml-2 h-4 w-4 shrink-0 opacity-50 hover:opacity-100"
+              onClick={handleClear}
+              aria-label="Clear date"
+            />
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto p-0", matchTriggerWidth && "w-[var(--radix-popover-trigger-width)]")}
+        align={align}
+        side={side}
+      >
+        <Calendar
+          mode="single"
+          selected={selectedDate}
+          onSelect={handleSelect}
+          disabled={(date) => {
+            if (minDate && date < minDate) return true;
+            if (maxDate && date > maxDate) return true;
+            return false;
+          }}
+          initialFocus
+        />
+        {name && selectedDate && (
+          <input
+            type="hidden"
+            name={name}
+            value={format(selectedDate, "yyyy-MM-dd")}
+          />
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+DatePicker.displayName = "DatePicker";
+
+/**
+ * DatePickerInput Component
+ *
+ * A variant that looks more like a traditional input field.
+ * Useful for inline editing or compact layouts.
+ */
+export interface DatePickerInputProps extends Omit<DatePickerProps, "className"> {
+  /** Additional class name for the input wrapper */
+  className?: string;
+  /** Size variant */
+  size?: "sm" | "default" | "lg";
+}
+
+function DatePickerInput({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  minDate,
+  maxDate,
+  dateFormat = "yyyy-MM-dd",
+  clearable = false,
+  className,
+  id,
+  name,
+  align = "start",
+  side = "bottom",
+  onOpenChange,
+  size = "default",
+}: DatePickerInputProps) {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState<Date | undefined>(
+    defaultValue
+  );
+  const [inputValue, setInputValue] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Controlled vs uncontrolled
+  const isControlled = value !== undefined;
+  const selectedDate = isControlled ? value : internalValue;
+
+  // Sync input value with selected date
+  React.useEffect(() => {
+    if (selectedDate) {
+      setInputValue(format(selectedDate, dateFormat));
+    } else {
+      setInputValue("");
+    }
+  }, [selectedDate, dateFormat]);
+
+  const handleSelect = (date: Date | undefined) => {
+    if (!isControlled) {
+      setInternalValue(date);
+    }
+    onChange?.(date);
+    setOpen(false);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+
+    // Try to parse the date
+    if (newValue) {
+      const parsed = parse(newValue, dateFormat, new Date());
+      if (isValid(parsed)) {
+        if (!isControlled) {
+          setInternalValue(parsed);
+        }
+        onChange?.(parsed);
+      }
+    } else {
+      handleSelect(undefined);
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Reset to the valid date on blur if input is invalid
+    if (selectedDate) {
+      setInputValue(format(selectedDate, dateFormat));
+    }
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    handleSelect(undefined);
+    setInputValue("");
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    onOpenChange?.(newOpen);
+  };
+
+  const sizeClasses = {
+    sm: "h-8 text-xs px-2",
+    default: "h-9 text-sm px-3",
+    lg: "h-10 text-base px-4",
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <div className={cn("relative", className)}>
+        <PopoverTrigger asChild>
+          <div
+            className={cn(
+              "flex items-center rounded-md border border-input bg-background ring-offset-background",
+              "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+              disabled && "opacity-50 cursor-not-allowed",
+              sizeClasses[size]
+            )}
+          >
+            <input
+              ref={inputRef}
+              id={id}
+              type="text"
+              value={inputValue}
+              onChange={handleInputChange}
+              onBlur={handleInputBlur}
+              placeholder={placeholder}
+              disabled={disabled}
+              className={cn(
+                "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                "disabled:cursor-not-allowed"
+              )}
+            />
+            {clearable && selectedDate && (
+              <X
+                className="h-4 w-4 mx-1 cursor-pointer opacity-50 hover:opacity-100"
+                onClick={handleClear}
+                aria-label="Clear date"
+              />
+            )}
+            <CalendarIcon
+              className="h-4 w-4 opacity-50 cursor-pointer hover:opacity-100"
+              onClick={() => !disabled && setOpen(true)}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align={align} side={side}>
+          <Calendar
+            mode="single"
+            selected={selectedDate}
+            onSelect={handleSelect}
+            disabled={(date) => {
+              if (minDate && date < minDate) return true;
+              if (maxDate && date > maxDate) return true;
+              return false;
+            }}
+            initialFocus
+          />
+        </PopoverContent>
+        {name && selectedDate && (
+          <input
+            type="hidden"
+            name={name}
+            value={format(selectedDate, "yyyy-MM-dd")}
+          />
+        )}
+      </div>
+    </Popover>
+  );
+}
+
+DatePickerInput.displayName = "DatePickerInput";
+
+export { DatePicker, DatePickerInput };