{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "rule-builder", "type": "registry:component", "title": "Rule Builder", "description": "A nested query builder that reads like a sentence: Where, and, or, groups inside groups, drag or arrow-key rules into place, undo anything, and watch the parameterised SQL, JSON and plain English rewrite themselves as you type.", "categories": [ "component", "Filters" ], "dependencies": [ "@qnot/core", "@qnot/react", "lucide-react", "motion" ], "registryDependencies": [ "utils", "https://coss.com/ui/r/button.json", "https://coss.com/ui/r/input.json", "https://coss.com/ui/r/menu.json", "https://coss.com/ui/r/select.json", "https://coss.com/ui/r/tabs.json", "https://coss.com/ui/r/tooltip.json" ], "files": [ { "path": "registry/devl/rule-builder.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport {\n type AnyFieldDef,\n compile,\n type EditorSpec,\n encode,\n type Fields,\n fieldLabel,\n formatInput,\n formatList,\n type Issue,\n type PathIssue,\n parseInput,\n parseList,\n type Query,\n type QueryNode,\n type QueryOf,\n validateQuery,\n} from \"@qnot/core\";\nimport { sqlFormat } from \"@qnot/core/formats/sql\";\nimport { textFormat } from \"@qnot/core/formats/text\";\nimport {\n QueryProvider,\n useDragHandle,\n useDropTarget,\n useGroup,\n useGroupDropZone,\n useHistory,\n useNode,\n useQuery,\n useQueryStore,\n useRule,\n useStore,\n} from \"@qnot/react\";\nimport {\n CalendarIcon,\n CheckIcon,\n ChevronsUpDownIcon,\n CopyIcon,\n CopyPlusIcon,\n EllipsisIcon,\n FolderPlusIcon,\n GripVerticalIcon,\n HashIcon,\n ListIcon,\n PlusIcon,\n Redo2Icon,\n TagsIcon,\n ToggleLeftIcon,\n Trash2Icon,\n TypeIcon,\n Undo2Icon,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type KeyboardEvent, memo, type ReactNode, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n Menu,\n MenuCheckboxItem,\n MenuItem,\n MenuPopup,\n MenuSeparator,\n MenuTrigger,\n} from \"@/components/ui/menu\";\nimport { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Tabs, TabsList, TabsTab } from \"@/components/ui/tabs\";\nimport { Tooltip, TooltipPopup, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface RuleBuilderProps {\n fields: Fields;\n defaultQuery?: Query;\n rows?: readonly Record[];\n table?: string;\n noun?: { one: string; many: string };\n maxDepth?: number;\n onChange?: (query: Query) => void;\n className?: string;\n}\n\ntype OutputTab = \"sql\" | \"json\" | \"text\";\n\nconst postgres = sqlFormat({ dialect: \"postgres\", params: \"numbered\" });\nconst english = textFormat();\nconst easeOut = [0.23, 1, 0.32, 1] as const;\nconst glide = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\nconst emptyQuery: Query = { kind: \"group\", combinator: \"and\", children: [] };\n\nconst kindIcons: Record = {\n text: TypeIcon,\n number: HashIcon,\n enum: ListIcon,\n multiEnum: TagsIcon,\n boolean: ToggleLeftIcon,\n date: CalendarIcon,\n};\n\nexport function RuleBuilder({\n fields,\n defaultQuery = emptyQuery,\n rows,\n table = \"accounts\",\n noun = { one: \"account\", many: \"accounts\" },\n maxDepth = 2,\n onChange,\n className,\n}: RuleBuilderProps) {\n const store = useQueryStore({\n fields,\n initial: defaultQuery as QueryOf,\n settings: useMemo(() => ({ maxDepth }), [maxDepth]),\n onChange: onChange as ((q: QueryOf) => void) | undefined,\n });\n\n const onKeyDown = (e: KeyboardEvent) => {\n const target = e.target as HTMLElement;\n if (target.closest(\"input, textarea\")) return;\n if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== \"z\") return;\n e.preventDefault();\n if (e.shiftKey) store.redo();\n else store.undo();\n };\n\n return (\n \n \n
\n
\n \n
\n \n \n \n );\n}\n\nfunction Header({ rows, noun }: { rows?: readonly Record[]; noun: { one: string; many: string } }) {\n const store = useStore();\n const query = useQuery();\n const { canUndo, canRedo, undo, redo } = useHistory();\n const count = useMemo(() => {\n if (!rows) return null;\n const issues = validateQuery(store.fields, query);\n if (issues.some((i) => i.severity === \"error\" && i.code !== \"required\")) return null;\n const test = compile(store.fields, query);\n return rows.filter((row) => test(row as never)).length;\n }, [rows, store, query]);\n\n return (\n
\n
\n

Filter {noun.many}

\n

\n {rows\n ? count === null\n ? \"Fix the highlighted rule to see matches\"\n : `${count} of ${rows.length} ${rows.length === 1 ? noun.one : noun.many} match`\n : `${store.ruleCount} ${store.ruleCount === 1 ? \"rule\" : \"rules\"}`}\n

\n
\n
\n \n \n \n \n \n \n
\n
\n );\n}\n\nfunction IconAction({\n label,\n shortcut,\n disabled,\n onClick,\n children,\n}: {\n label: string;\n shortcut?: string;\n disabled?: boolean;\n onClick: () => void;\n children: ReactNode;\n}) {\n return (\n \n }\n >\n {children}\n \n \n {label}\n {shortcut && {shortcut}}\n \n \n );\n}\n\nconst GroupView = memo(function GroupView({ id, depth }: { id: string; depth: number }) {\n const reduce = useReducedMotion();\n const { group, isRoot, can, setCombinator, setNot, addRule, addGroup, clone, remove } = useGroup(id);\n const { isOver, zoneProps } = useGroupDropZone(id);\n const { isDragging, handleProps } = useDragHandle(id);\n const { position, dropProps } = useDropTarget(id);\n const other = group.combinator === \"and\" ? \"or\" : \"and\";\n const summary = group.not ? \"None of these\" : group.combinator === \"and\" ? \"All of these\" : \"Any of these\";\n\n const list = (\n
\n \n {group.children.map((child, index) => (\n \n setCombinator(other) : undefined}\n value={group.combinator}\n />\n
\n \n
\n \n ))}\n \n {group.children.length === 0 && (\n \n {isRoot ? \"No rules yet, so every row matches.\" : \"Empty group. Add a rule or drop one here.\"}\n
\n )}\n \n );\n\n if (isRoot) {\n return (\n
\n {list}\n
0 && \"ps-[2.875rem] @lg:ps-[3.375rem]\")}>\n \n \n
\n
\n );\n }\n\n return (\n \n \n
\n \n {summary}\n \n addRule()}\n size=\"icon-sm\"\n variant=\"ghost\"\n />\n }\n >\n \n \n Add rule\n \n \n }>\n \n \n \n addGroup()}>\n \n Add nested group\n \n clone()}>\n \n Duplicate group\n \n setNot(v)}>\n Match none of these\n \n \n \n \n Delete group\n \n \n \n
\n
{list}
\n \n );\n});\n\nfunction NodeView({ id, depth }: { id: string; depth: number }) {\n const node = useNode(id);\n if (!node) return null;\n return node.kind === \"group\" ? : ;\n}\n\nfunction Connector({\n id,\n index,\n value,\n onToggle,\n}: {\n id: string;\n index: number;\n value: \"and\" | \"or\";\n onToggle?: () => void;\n}) {\n const isGroup = useNode(id)?.kind === \"group\";\n const base = cn(\"flex h-8 w-10 shrink-0 items-center text-xs sm:h-7 @lg:w-12\", isGroup && \"mt-[0.4375rem]\");\n if (index === 0) return Where;\n if (index === 1 && onToggle) {\n return (\n \n \n \n {value}\n \n \n \n \n );\n }\n return {value};\n}\n\nfunction DropLine({ position }: { position: \"before\" | \"after\" | \"inside\" | null }) {\n if (position !== \"before\" && position !== \"after\") return null;\n return (\n \n );\n}\n\nfunction DragHandle({\n id,\n label,\n handleProps,\n}: {\n id: string;\n label: string;\n handleProps: ReturnType[\"handleProps\"];\n}) {\n const store = useStore();\n const nudge = (delta: -1 | 1) => {\n const node = store.get(id);\n if (!node?.parent) return;\n const siblings = store.getGroup(node.parent).children;\n const index = siblings.indexOf(id);\n const target = delta < 0 ? index - 1 : index + 2;\n if (target < 0 || target > siblings.length) return;\n store.move(id, node.parent, target);\n };\n return (\n {\n if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n e.preventDefault();\n nudge(e.key === \"ArrowUp\" ? -1 : 1);\n }\n }}\n type=\"button\"\n {...handleProps}\n >\n \n \n );\n}\n\nconst RuleRow = memo(function RuleRow({ id }: { id: string }) {\n const reduce = useReducedMotion();\n const { rule, def, fields, editor, operators, fieldOptions, issues, can, setField, setOperator, setValue, clone, remove } =\n useRule(id);\n const { isDragging, handleProps } = useDragHandle(id);\n const { position, dropProps } = useDropTarget(id);\n const [unreadable, setUnreadable] = useState(false);\n const messages = unreadable\n ? [\"Enter a number\"]\n : issues.filter((i) => i.severity === \"error\" && i.code !== \"required\").map((i) => i.message);\n const field = typeof rule.field === \"string\" ? rule.field : \"\";\n const label = def ? fieldLabel(field, def) : field;\n const FieldIcon = kindIcons[def?.kind ?? \"text\"] ?? TypeIcon;\n const fieldItems = fieldOptions.map((o) => ({ value: o.value, label: o.label }));\n\n return (\n
\n \n
\n \n v && setField(v)}\n value={field}\n >\n \n \n \n \n \n \n \n {fieldOptions.map((o) => {\n const Icon = kindIcons[fields[o.value]?.kind ?? \"text\"] ?? TypeIcon;\n return (\n \n \n \n {o.label}\n \n \n );\n })}\n \n \n v && setOperator(v)}\n value={rule.operator}\n >\n \n \n \n \n {operators.map((o) => (\n \n {o.label}\n \n ))}\n \n \n \n \n
\n \n \n }\n >\n \n \n \n clone()}>\n \n Duplicate\n \n \n \n \n Delete rule\n \n \n \n
\n \n {messages.length > 0 && (\n \n {messages.join(\" · \")}\n \n )}\n \n \n );\n});\n\nfunction ValueEditor({\n editor,\n def,\n value,\n issues,\n label,\n disabled,\n onChange,\n onUnreadable,\n}: {\n editor: EditorSpec;\n def: AnyFieldDef | undefined;\n value: unknown;\n issues: readonly Issue[];\n label: string;\n disabled?: boolean;\n onChange: (value: unknown) => void;\n onUnreadable: (unreadable: boolean) => void;\n}) {\n const invalidAt = (index?: number) =>\n issues.some((i) => i.severity === \"error\" && i.code !== \"required\" && (index === undefined || i.index === undefined || i.index === index));\n\n if (editor.arity === \"none\") return null;\n\n if (editor.arity === \"two\") {\n const pair = Array.isArray(value) ? value : [null, null];\n return (\n
\n onChange([v, pair[1] ?? null])}\n onUnreadable={onUnreadable}\n value={pair[0]}\n />\n and\n onChange([pair[0] ?? null, v])}\n onUnreadable={onUnreadable}\n value={pair[1]}\n />\n
\n );\n }\n\n if (editor.type === \"multiselect\") {\n const options = editor.options ?? [];\n const selected = Array.isArray(value) ? value.map(String) : [];\n return (\n ({ value: String(o.value), label: o.label }))}\n multiple\n onValueChange={(next) => onChange((next as string[]).map((raw) => parseInput(def, raw)))}\n value={selected}\n >\n \n \n {(vals: string[]) =>\n vals.length === 0\n ? \"Choose…\"\n : vals.map((v) => options.find((o) => String(o.value) === v)?.label ?? v).join(\", \")\n }\n \n \n \n {options.map((o) => (\n \n {o.label}\n \n ))}\n \n \n );\n }\n\n if (editor.type === \"list\") {\n return (\n parseList(def, raw)}\n placeholder=\"Comma, separated\"\n value={value}\n />\n );\n }\n\n return (\n \n );\n}\n\nfunction Scalar({\n editor,\n def,\n value,\n invalid,\n label,\n disabled,\n onChange,\n onUnreadable,\n}: {\n editor: EditorSpec;\n def: AnyFieldDef | undefined;\n value: unknown;\n invalid: boolean;\n label: string;\n disabled?: boolean;\n onChange: (value: unknown) => void;\n onUnreadable: (unreadable: boolean) => void;\n}) {\n if (editor.type === \"select\" || editor.type === \"boolean\") {\n const items =\n editor.type === \"boolean\"\n ? [\n { value: \"true\", label: \"Yes\" },\n { value: \"false\", label: \"No\" },\n ]\n : (editor.options ?? []).map((o) => ({ value: String(o.value), label: o.label }));\n return (\n raw !== null && onChange(parseInput(def, String(raw)))}\n value={value === null || value === undefined ? null : String(value)}\n >\n \n \n \n \n {items.map((o) => (\n \n {o.label}\n \n ))}\n \n \n );\n }\n\n if (editor.type === \"date\") {\n return (\n onChange(parseInput(def, e.target.value))}\n size=\"sm\"\n type=\"date\"\n value={formatInput(value)}\n />\n );\n }\n\n return (\n parseInput(def, raw)}\n placeholder={editor.type === \"number\" ? \"0\" : \"Value\"}\n value={value}\n />\n );\n}\n\nfunction DraftInput({\n value,\n parse,\n format,\n invalid,\n label,\n placeholder,\n inputMode,\n disabled,\n onChange,\n onUnreadable,\n}: {\n value: unknown;\n parse: (raw: string) => unknown;\n format: (value: unknown) => string;\n invalid: boolean;\n label: string;\n placeholder?: string;\n inputMode?: \"decimal\";\n disabled?: boolean;\n onChange: (value: unknown) => void;\n onUnreadable: (unreadable: boolean) => void;\n}) {\n const [draft, setDraft] = useState(null);\n const unreadable = draft !== null && draft.trim() !== \"\" && parse(draft) === null;\n useEffect(() => {\n onUnreadable(unreadable);\n return () => onUnreadable(false);\n }, [unreadable, onUnreadable]);\n return (\n setDraft(null)}\n onChange={(e) => {\n setDraft(e.target.value);\n onChange(parse(e.target.value));\n }}\n onFocus={() => setDraft(format(value))}\n placeholder={placeholder}\n size=\"sm\"\n value={draft ?? format(value)}\n />\n );\n}\n\nfunction OutputPanel({ fields, table }: { fields: Fields; table: string }) {\n const query = useQuery();\n const [tab, setTab] = useState(\"sql\");\n const issues = useMemo(() => validateQuery(fields, query), [fields, query]);\n const incomplete = issues.filter((i) => i.code === \"required\").length;\n const blocking = issues.filter((i) => i.severity === \"error\" && i.code !== \"required\");\n\n const output = useMemo(() => {\n if (blocking.length) return null;\n try {\n const { sql, params } = encode(postgres, query, fields);\n return {\n sql: sql === \"1 = 1\" ? `SELECT * FROM ${table}` : `SELECT * FROM ${table}\\nWHERE ${prettyWhere(sql)}`,\n params,\n json: JSON.stringify(query, null, 2),\n text: encode(english, query, fields) || \"Every row\",\n };\n } catch {\n return null;\n }\n }, [blocking.length, query, fields, table]);\n\n const copyText = output ? (tab === \"sql\" ? output.sql : tab === \"json\" ? output.json : output.text) : \"\";\n\n return (\n
\n
\n setTab(v as OutputTab)} value={tab}>\n \n \n SQL\n \n \n JSON\n \n \n Plain English\n \n \n \n \n \n
\n
\n {output ? (\n tab === \"sql\" ? (\n
\n 
{highlightSql(output.sql)}
\n {incomplete > 0 && (\n

\n Skipping {incomplete} incomplete {incomplete === 1 ? \"rule\" : \"rules\"} until {incomplete === 1 ? \"it has\" : \"they have\"} a value.\n

\n )}\n {output.params.length > 0 && (\n
\n {output.params.map((p, i) => (\n \n ${i + 1}\n {JSON.stringify(p)}\n \n ))}\n
\n )}\n
\n ) : tab === \"json\" ? (\n 
{highlightJson(output.json)}
\n ) : (\n

{output.text}

\n )\n ) : (\n \n )}\n
\n
\n );\n}\n\nfunction BlockingIssues({ issues, query, fields }: { issues: PathIssue[]; query: Query; fields: Fields }) {\n return (\n
\n

\n Fix {issues.length} {issues.length === 1 ? \"rule\" : \"rules\"} to export this filter\n

\n
    \n {issues.map((issue) => (\n
  • \n \n {nodeLabel(fields, query, issue.path)}\n {issue.message}\n
    • \n ))}\n
\n
\n );\n}\n\nfunction nodeLabel(fields: Fields, query: Query, path: readonly number[]) {\n let node: QueryNode | undefined = query;\n for (const index of path) node = node && node.kind === \"group\" ? node.children[index] : undefined;\n if (!node) return \"Rule\";\n if (node.kind === \"group\") return \"Group\";\n const name = typeof node.field === \"string\" ? node.field : \"Function\";\n return fields[name] ? fieldLabel(name, fields[name]) : name;\n}\n\nfunction CopyButton({ text, disabled }: { text: string; disabled?: boolean }) {\n const [copied, setCopied] = useState(false);\n const timer = useRef | null>(null);\n useEffect(() => () => {\n if (timer.current) clearTimeout(timer.current);\n }, []);\n return (\n {\n navigator.clipboard?.writeText(text).catch(() => {});\n setCopied(true);\n if (timer.current) clearTimeout(timer.current);\n timer.current = setTimeout(() => setCopied(false), 1400);\n }}\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n \n \n {copied ? : }\n \n \n \n );\n}\n\nfunction prettyWhere(sql: string) {\n let depth = 0;\n let quoted = false;\n let out = \"\";\n for (let i = 0; i < sql.length; i++) {\n const ch = sql[i];\n if (ch === \"'\") quoted = !quoted;\n if (!quoted && ch === \"(\") depth++;\n if (!quoted && ch === \")\") depth--;\n if (!quoted && depth === 0) {\n const rest = sql.slice(i);\n const joiner = rest.startsWith(\" AND \") ? \"AND\" : rest.startsWith(\" OR \") ? \"OR\" : null;\n if (joiner) {\n out += `\\n ${joiner} `;\n i += joiner.length + 1;\n continue;\n }\n }\n out += ch;\n }\n return out;\n}\n\nconst sqlKeywords = /^(SELECT|FROM|WHERE|AND|OR|NOT|IN|LIKE|ILIKE|ESCAPE|BETWEEN|IS|NULL|TRUE|FALSE)$/;\n\nfunction highlightSql(sql: string) {\n return sql.split(/(\\$\\d+|'(?:[^']|'')*'|\\b[A-Z]+\\b)/g).map((part, i) => {\n if (/^\\$\\d+$/.test(part))\n return (\n \n {part}\n \n );\n if (part.startsWith(\"'\"))\n return (\n \n {part}\n \n );\n if (sqlKeywords.test(part))\n return (\n \n {part}\n \n );\n return part;\n });\n}\n\nfunction highlightJson(json: string) {\n return json.split(/(\"(?:[^\"\\\\]|\\\\.)*\"(?:\\s*:)?|\\b-?\\d+(?:\\.\\d+)?\\b|\\btrue\\b|\\bfalse\\b|\\bnull\\b)/g).map((part, i) => {\n if (/^\".*:$/.test(part))\n return (\n \n {part}\n \n );\n if (part.startsWith('\"'))\n return (\n \n {part}\n \n );\n if (/^(-?\\d|true|false|null)/.test(part))\n return (\n \n {part}\n \n );\n return part;\n });\n}\n" } ] }