@handled-ai/design-system 0.15.1 → 0.16.1

package/src/components/data-table-condition-filter.tsx

@@ -0,0 +1,513 @@
+"use client"
+
+import * as React from "react"
+import {
+  CalendarDays,
+  DollarSign,
+  Eye,
+  Hash,
+  MoreHorizontal,
+  Plus,
+  Trash2,
+  Type,
+} from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select"
+
+// ── Types ──────────────────────────────────────────────────────
+
+export type ConditionOperator =
+  | "eq"
+  | "neq"
+  | "gt"
+  | "gte"
+  | "lt"
+  | "lte"
+  | "in"
+  | "is_null"
+  | "is_not_null"
+
+export interface ConditionFieldDef {
+  /** Unique field key (e.g., "Account_Balance__c") */
+  id: string
+  /** Display label (e.g., "Account Balance") */
+  label: string
+  /** Field data type — determines which operators are available and how the value input renders */
+  type: "text" | "number" | "currency" | "date"
+  /** Allowed operators for this field. Defaults based on type if not provided. */
+  operators?: ConditionOperator[]
+}
+
+export interface ConditionFilterValue {
+  /** Stable identity — used as React key to avoid stale-state bugs on removal */
+  id: string
+  field: string
+  operator: ConditionOperator
+  value: string | number | null
+}
+
+interface DataTableConditionFilterProps {
+  /** Available fields the user can filter on */
+  fields: ConditionFieldDef[]
+  /** Current active conditions */
+  conditions: ConditionFilterValue[]
+  /** Called when conditions change (add, update, remove) */
+  onConditionsChange: (conditions: ConditionFilterValue[]) => void
+  className?: string
+}
+
+// ── Constants ──────────────────────────────────────────────────
+
+const OPERATOR_LABELS: Record<ConditionOperator, string> = {
+  eq: "=",
+  neq: "≠",
+  gt: ">",
+  gte: "≥",
+  lt: "<",
+  lte: "≤",
+  in: "contains",
+  is_null: "is empty",
+  is_not_null: "is not empty",
+}
+
+const NUMERIC_OPERATORS: ConditionOperator[] = [
+  "eq",
+  "neq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "is_null",
+  "is_not_null",
+]
+
+const DEFAULT_OPERATORS: Record<ConditionFieldDef["type"], ConditionOperator[]> = {
+  text: ["eq", "neq", "is_null", "is_not_null"],
+  number: NUMERIC_OPERATORS,
+  currency: NUMERIC_OPERATORS,
+  date: ["gt", "gte", "lt", "lte", "eq", "neq", "is_null", "is_not_null"],
+}
+
+/** Generate a stable unique ID for a new condition row. */
+function generateConditionId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID()
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+// ── Helpers ────────────────────────────────────────────────────
+
+function getOperators(field: ConditionFieldDef): ConditionOperator[] {
+  return (field.operators ?? DEFAULT_OPERATORS[field.type]).filter((op) => op !== "in")
+}
+
+function isUnaryOperator(op: ConditionOperator): boolean {
+  return op === "is_null" || op === "is_not_null"
+}
+
+function getDefaultOperator(field: ConditionFieldDef): ConditionOperator {
+  return getOperators(field)[0] ?? "eq"
+}
+
+function createDraftCondition(field: ConditionFieldDef): ConditionFilterValue {
+  return {
+    id: generateConditionId(),
+    field: field.id,
+    operator: getDefaultOperator(field),
+    value: null,
+  }
+}
+
+function normalizeCondition(
+  condition: ConditionFilterValue,
+  fields: ConditionFieldDef[],
+): ConditionFilterValue {
+  const field = fields.find((f) => f.id === condition.field) ?? fields[0]
+  if (!field) return condition
+
+  const operators = getOperators(field)
+  const operator = operators.includes(condition.operator)
+    ? condition.operator
+    : getDefaultOperator(field)
+
+  return {
+    ...condition,
+    field: field.id,
+    operator,
+    value: isUnaryOperator(operator) ? null : condition.value,
+  }
+}
+
+function parseConditionValue(
+  raw: string,
+  fieldType: ConditionFieldDef["type"],
+): string | number | null {
+  if (raw === "") return null
+  if (fieldType === "number" || fieldType === "currency") {
+    const parsed = Number(raw)
+    return Number.isNaN(parsed) ? null : parsed
+  }
+  return raw
+}
+
+function isCompleteCondition(
+  condition: ConditionFilterValue,
+  fields: ConditionFieldDef[],
+): boolean {
+  const field = fields.find((f) => f.id === condition.field)
+  if (!field) return false
+  if (!getOperators(field).includes(condition.operator)) return false
+  if (isUnaryOperator(condition.operator)) return true
+  return condition.value !== null && condition.value !== ""
+}
+
+function getFieldIcon(type: ConditionFieldDef["type"]) {
+  if (type === "currency") return DollarSign
+  if (type === "number") return Hash
+  if (type === "date") return CalendarDays
+  return Type
+}
+
+// ── Condition Row ──────────────────────────────────────────────
+
+interface ConditionRowProps {
+  condition: ConditionFilterValue
+  fields: ConditionFieldDef[]
+  index: number
+  onChange: (updated: ConditionFilterValue) => void
+  onRemove: () => void
+  onCommit: () => void
+}
+
+function ConditionRow({
+  condition,
+  fields,
+  index,
+  onChange,
+  onRemove,
+  onCommit,
+}: ConditionRowProps) {
+  const fieldDef = fields.find((f) => f.id === condition.field) ?? fields[0]
+  const operators = getOperators(fieldDef)
+  const isUnary = isUnaryOperator(condition.operator)
+  const FieldIcon = getFieldIcon(fieldDef.type)
+
+  const handleFieldChange = (newFieldId: string) => {
+    const newFieldDef = fields.find((f) => f.id === newFieldId) ?? fields[0]
+    if (!newFieldDef) return
+    onChange({
+      ...condition,
+      field: newFieldDef.id,
+      operator: getDefaultOperator(newFieldDef),
+      value: null,
+    })
+  }
+
+  const handleOperatorChange = (newOp: ConditionOperator) => {
+    onChange({
+      ...condition,
+      operator: newOp,
+      value: isUnaryOperator(newOp) ? null : condition.value,
+    })
+  }
+
+  const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({
+      ...condition,
+      value: parseConditionValue(event.target.value, fieldDef.type),
+    })
+  }
+
+  return (
+    <div
+      className="grid grid-cols-[52px_minmax(150px,1fr)_120px_minmax(140px,1fr)_auto] items-center gap-2 rounded-lg border border-border/70 bg-background p-2 shadow-sm"
+      data-slot="condition-row"
+    >
+      <div className="text-xs font-medium text-muted-foreground">
+        {index === 0 ? "Where" : "And"}
+      </div>
+
+      <Select value={condition.field} onValueChange={handleFieldChange}>
+        <SelectTrigger className="h-8 w-full justify-start gap-2" size="sm">
+          <FieldIcon className="h-3.5 w-3.5 text-muted-foreground" />
+          <SelectValue placeholder={fieldDef.label} />
+        </SelectTrigger>
+        <SelectContent>
+          {fields.map((field) => {
+            const Icon = getFieldIcon(field.type)
+            return (
+              <SelectItem key={field.id} value={field.id}>
+                <span className="inline-flex items-center gap-2">
+                  <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+                  {field.label}
+                </span>
+              </SelectItem>
+            )
+          })}
+        </SelectContent>
+      </Select>
+
+      <Select
+        value={condition.operator}
+        onValueChange={(value) => handleOperatorChange(value as ConditionOperator)}
+      >
+        <SelectTrigger className="h-8 w-full" size="sm">
+          <SelectValue placeholder="Operator" />
+        </SelectTrigger>
+        <SelectContent>
+          {operators.map((op) => (
+            <SelectItem key={op} value={op}>
+              {OPERATOR_LABELS[op]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {isUnary ? (
+        <div className="h-8 rounded-md border border-dashed border-border/70 bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground">
+          No value needed
+        </div>
+      ) : (
+        <div className="relative flex items-center">
+          {fieldDef.type === "currency" ? (
+            <span className="pointer-events-none absolute left-2 text-sm text-muted-foreground">
+              $
+            </span>
+          ) : null}
+          <Input
+            type={
+              fieldDef.type === "number" || fieldDef.type === "currency"
+                ? "number"
+                : fieldDef.type === "date"
+                  ? "date"
+                  : "text"
+            }
+            value={condition.value != null ? String(condition.value) : ""}
+            onChange={handleValueChange}
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) => {
+              event.stopPropagation()
+              if (event.key === "Enter") {
+                onCommit()
+              }
+            }}
+            placeholder={
+              fieldDef.type === "currency"
+                ? "Amount"
+                : fieldDef.type === "number"
+                  ? "Enter number..."
+                  : fieldDef.type === "date"
+                    ? ""
+                    : "Enter value..."
+            }
+            className={cn("h-8", fieldDef.type === "currency" && "pl-6")}
+          />
+        </div>
+      )}
+
+      <div className="flex items-center gap-1">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-muted-foreground"
+          aria-label="Toggle condition visibility"
+          onClick={(event) => event.preventDefault()}
+        >
+          <Eye className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-muted-foreground"
+          aria-label="More condition actions"
+          onClick={(event) => event.preventDefault()}
+        >
+          <MoreHorizontal className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-muted-foreground hover:text-destructive"
+          onClick={onRemove}
+          aria-label="Remove condition"
+        >
+          <Trash2 className="size-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// ── Main Component ─────────────────────────────────────────────
+
+function DataTableConditionFilter({
+  fields,
+  conditions,
+  onConditionsChange,
+  className,
+}: DataTableConditionFilterProps) {
+  const [drafts, setDrafts] = React.useState<ConditionFilterValue[]>(() =>
+    conditions.map((condition) => normalizeCondition(condition, fields)),
+  )
+
+  React.useEffect(() => {
+    setDrafts(conditions.map((condition) => normalizeCondition(condition, fields)))
+  }, [conditions, fields])
+
+  const commitDrafts = React.useCallback(
+    (nextDrafts: ConditionFilterValue[] = drafts) => {
+      onConditionsChange(
+        nextDrafts
+          .map((condition) => normalizeCondition(condition, fields))
+          .filter((condition) => isCompleteCondition(condition, fields)),
+      )
+    },
+    [drafts, fields, onConditionsChange],
+  )
+
+  const handleAdd = () => {
+    const firstField = fields[0]
+    if (!firstField) return
+    const committedDrafts = drafts.filter((condition) =>
+      isCompleteCondition(condition, fields),
+    )
+    const nextDrafts = [...committedDrafts, createDraftCondition(firstField)]
+    setDrafts(nextDrafts)
+    commitDrafts(committedDrafts)
+  }
+
+  const handleUpdate = (index: number, updated: ConditionFilterValue) => {
+    setDrafts((current) => {
+      const next = [...current]
+      next[index] = normalizeCondition(updated, fields)
+      return next
+    })
+  }
+
+  const handleRemove = (index: number) => {
+    setDrafts((current) => {
+      const next = current.filter((_, currentIndex) => currentIndex !== index)
+      commitDrafts(next)
+      return next
+    })
+  }
+
+  const handleClear = () => {
+    setDrafts([])
+    onConditionsChange([])
+  }
+
+  const hasAppliedConditions = conditions.length > 0
+  const hasDrafts = drafts.length > 0
+
+  return (
+    <div
+      className={cn(
+        "w-[min(760px,calc(100vw-2rem))] rounded-xl border border-border bg-background p-3 text-foreground shadow-xl",
+        className,
+      )}
+      data-slot="condition-filter"
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        if (event.key !== "Escape") {
+          event.stopPropagation()
+        }
+      }}
+    >
+      <div className="mb-3 flex items-center justify-between gap-3 border-b border-border/70 pb-3">
+        <div>
+          <div className="text-sm font-semibold">Filter builder</div>
+          <div className="text-xs text-muted-foreground">
+            Build field, operator, and value conditions.
+          </div>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-8 text-xs text-destructive hover:text-destructive"
+          onClick={handleClear}
+          disabled={!hasAppliedConditions && !hasDrafts}
+        >
+          Clear filters
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {drafts.map((condition, index) => (
+          <ConditionRow
+            key={condition.id}
+            condition={condition}
+            fields={fields}
+            index={index}
+            onChange={(updated) => handleUpdate(index, updated)}
+            onRemove={() => handleRemove(index)}
+            onCommit={() => commitDrafts()}
+          />
+        ))}
+      </div>
+
+      {!hasDrafts ? (
+        <div className="rounded-lg border border-dashed border-border/80 bg-muted/20 px-3 py-5 text-center text-xs text-muted-foreground">
+          No builder filters yet. Add a filter to start a condition row.
+        </div>
+      ) : null}
+
+      <div className="mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-border/70 pt-3">
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-8 text-xs text-muted-foreground"
+            onClick={handleAdd}
+          >
+            <Plus className="mr-1 size-3.5" />
+            Add filter
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-8 text-xs text-muted-foreground opacity-60"
+            disabled
+            aria-disabled="true"
+          >
+            <Plus className="mr-1 size-3.5" />
+            Add filter group
+          </Button>
+        </div>
+        <Button
+          type="button"
+          size="sm"
+          className="h-8 text-xs"
+          onClick={() => commitDrafts()}
+        >
+          Apply
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export {
+  DataTableConditionFilter,
+  OPERATOR_LABELS,
+  DEFAULT_OPERATORS,
+  generateConditionId,
+  getOperators,
+}
+export type { DataTableConditionFilterProps }