"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { PlusIcon, XIcon } from "@kineticui/icons"; export type FilterField = | { key: string; label: string; type: "text" } | { key: string; label: string; type: "number" } | { key: string; label: string; type: "select"; options: { value: string; label: string }[] } | { key: string; label: string; type: "date" }; export type FilterRule = { id: string; field: string; op: string; value: string }; export type FilterGroup = { join: "and" | "or"; rules: FilterRule[] }; const OPS: Record = { text: [{ value: "contains", label: "contains" }, { value: "is", label: "is" }, { value: "not", label: "is not" }, { value: "starts", label: "starts with" }, { value: "empty", label: "is empty" }], number: [{ value: "eq", label: "=" }, { value: "gt", label: ">" }, { value: "lt", label: "<" }, { value: "gte", label: "≥" }, { value: "lte", label: "≤" }], select: [{ value: "is", label: "is" }, { value: "not", label: "is not" }], date: [{ value: "before", label: "is before" }, { value: "after", label: "is after" }, { value: "on", label: "is on" }], }; /** Evaluates a filter group against a record. Use it client-side or mirror the rules on your server. */ export function applyFilters>(rows: T[], g: FilterGroup, fields: FilterField[]): T[] { const test = (row: T, r: FilterRule) => { const f = fields.find((x) => x.key === r.field); const raw = row[r.field]; if (!f) return true; if (r.op === "empty") return raw == null || raw === ""; if (r.value === "") return true; if (f.type === "number") { const a = Number(raw); const b = Number(r.value); return { eq: a === b, gt: a > b, lt: a < b, gte: a >= b, lte: a <= b }[r.op as "eq"] ?? true; } if (f.type === "date") { const a = new Date(String(raw)).getTime(); const b = new Date(r.value).getTime(); return r.op === "before" ? a < b : r.op === "after" ? a > b : new Date(a).toDateString() === new Date(b).toDateString(); } const s = String(raw ?? "").toLowerCase(); const v = r.value.toLowerCase(); return { contains: s.includes(v), is: s === v, not: s !== v, starts: s.startsWith(v) }[r.op as "is"] ?? true; }; if (!g.rules.length) return rows; return rows.filter((row) => (g.join === "and" ? g.rules.every((r) => test(row, r)) : g.rules.some((r) => test(row, r)))); } export type FilterBuilderProps = { fields: FilterField[]; value: FilterGroup; onChange: (g: FilterGroup) => void; className?: string; }; const sel = "h-9 rounded-lg border border-border bg-background px-2 text-sm outline-none focus:border-accent"; /** Notion-style filter builder: field / operator / value rows joined by AND / OR, with summary chips. */ export function FilterBuilder({ fields, value, onChange, className }: FilterBuilderProps) { const [open, setOpen] = React.useState(true); const set = (rules: FilterRule[]) => onChange({ ...value, rules }); const add = () => { const f = fields[0]!; set([...value.rules, { id: Math.random().toString(36).slice(2, 8), field: f.key, op: OPS[f.type][0]!.value, value: "" }]); setOpen(true); }; const label = (r: FilterRule) => { const f = fields.find((x) => x.key === r.field); const op = f ? OPS[f.type].find((o) => o.value === r.op)?.label : r.op; const v = f?.type === "select" ? f.options.find((o) => o.value === r.value)?.label : r.value; return `${f?.label ?? r.field} ${op}${r.op === "empty" ? "" : ` ${v || "…"}`}`; }; return (

{value.rules.map((r, i) => ( {i ? {value.join} : null} ))} {value.rules.length ? ( <> ) : null}

{open && value.rules.length ? (

{value.rules.map((r, i) => { const f = fields.find((x) => x.key === r.field) ?? fields[0]!; return ( {i === 0 ? "Where" : i === 1 ? ( ) : value.join} {r.op === "empty" ? null : f.type === "select" ? ( ) : ( set(value.rules.map((x) => (x.id === r.id ? { ...x, value: e.target.value } : x)))} /> )} ); })}

) : null}

); }

Filter Builder

Installation

Exports