@stll/workspace-ui 0.0.1-placeholder.0 → 0.2.0

package/dist/conditions/builder.js

@@ -0,0 +1,447 @@
+import { appendChild, asGroup, buildLeaf, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, removeChild, replaceChild, valueEditorFor } from "./logic.js";
+import { panic } from "better-result";
+import { PlusIcon, XIcon } from "lucide-react";
+import { Button } from "@stll/ui/button";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@stll/ui/utils";
+import { createContext, use } from "react";
+import { DatePickerPopover } from "@stll/ui/date-picker-popover";
+import { Input } from "@stll/ui/input";
+import { Select, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue } from "@stll/ui/select";
+//#region src/conditions/builder.tsx
+const BuilderContext = createContext(null);
+/**
+* A context rather than a prop on every row because the builder is recursive:
+* threading one object through six nested components would put it in every
+* signature and still arrive at the same leaf.
+*/
+const useBuilderContext = () => {
+	const context = use(BuilderContext);
+	if (!context) panic("ConditionBuilder rendered outside its own provider");
+	return context;
+};
+const useLabels = () => useBuilderContext().labels;
+/** The formula leaf's left operand carries no field type, so its operators come
+*  from the numeric set and its value editor is the int input. */
+const FORMULA_VALUE_TYPE = "int";
+/** Sentinel select value that switches a leaf to a formula operand. Leads with a
+*  space so it never collides with a real field index. */
+const FORMULA_OPTION = " formula";
+const ConditionBuilder = ({ value, onChange, capabilities, labels, locale }) => /* @__PURE__ */ jsx(BuilderContext, {
+	value: {
+		labels,
+		locale
+	},
+	children: /* @__PURE__ */ jsx(ConditionBuilderTree, {
+		capabilities,
+		onChange,
+		value
+	})
+});
+const ConditionBuilderTree = ({ value, onChange, capabilities }) => {
+	const labels = useLabels();
+	const group = asGroup(value);
+	const { fields, allowNesting = false } = capabilities;
+	const firstField = fields.at(0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2",
+			children: group.children.map((child, index) => {
+				if (child.type === "group" && allowNesting) return /* @__PURE__ */ jsx(NestedGroupRow, {
+					capabilities,
+					combinator: group.combinator,
+					index,
+					onChange: (next) => onChange(replaceChild(group, index, next)),
+					onRemove: () => onChange(removeChild(group, index)),
+					onSetCombinator: (combinator) => onChange({
+						...group,
+						combinator
+					}),
+					value: child
+				}, index);
+				return /* @__PURE__ */ jsx(LeafRow, {
+					capabilities,
+					combinator: group.combinator,
+					index,
+					node: child,
+					onChange: (next) => onChange(replaceChild(group, index, next)),
+					onRemove: () => onChange(removeChild(group, index)),
+					onSetCombinator: (combinator) => onChange({
+						...group,
+						combinator
+					})
+				}, index);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "ms-[5.375rem] flex flex-wrap gap-1",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				className: "w-fit justify-start",
+				disabled: !firstField,
+				onClick: () => {
+					if (firstField) onChange(appendChild(group, leafFromField(firstField)));
+				},
+				size: "xs",
+				type: "button",
+				variant: "ghost",
+				children: [/* @__PURE__ */ jsx(PlusIcon, {}), labels.addCondition]
+			}), allowNesting && /* @__PURE__ */ jsxs(Button, {
+				className: "w-fit justify-start",
+				disabled: !firstField,
+				onClick: () => {
+					if (firstField) onChange(appendChild(group, {
+						type: "group",
+						combinator: "and",
+						children: [leafFromField(firstField)]
+					}));
+				},
+				size: "xs",
+				type: "button",
+				variant: "ghost",
+				children: [/* @__PURE__ */ jsx(PlusIcon, {}), labels.addGroup]
+			})]
+		})]
+	});
+};
+/** Left gutter: row 0 reads "When", row 1 carries the editable And/Or that sets
+*  the group's combinator, later rows echo it read-only. A single-child group
+*  shows no combinator word at all. */
+const ConditionGutter = ({ index, combinator, onCombinator }) => {
+	const labels = useLabels();
+	const gutterClass = "w-20 shrink-0 text-muted-foreground text-xs";
+	if (index === 0) return /* @__PURE__ */ jsx("span", {
+		className: cn(gutterClass, "ps-1"),
+		children: labels.when
+	});
+	if (index === 1) return /* @__PURE__ */ jsxs(Select, {
+		onValueChange: (next) => onCombinator(next === "or" ? "or" : "and"),
+		value: combinator,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"aria-label": labels.match,
+			className: "h-7 min-h-0 w-20 min-w-0 shrink-0 text-xs",
+			size: "sm",
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsxs(SelectPopup, { children: [/* @__PURE__ */ jsx(SelectItem, {
+			value: "and",
+			children: labels.and
+		}), /* @__PURE__ */ jsx(SelectItem, {
+			value: "or",
+			children: labels.or
+		})] })]
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(gutterClass, "ps-1"),
+		children: combinator === "or" ? labels.or : labels.and
+	});
+};
+const NestedGroupRow = ({ value, capabilities, index, combinator, onChange, onRemove, onSetCombinator }) => {
+	const removeLabel = useLabels().remove;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-2",
+		children: [/* @__PURE__ */ jsx(ConditionGutter, {
+			combinator,
+			index,
+			onCombinator: onSetCombinator
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "border-border/70 bg-muted/20 flex flex-1 items-start gap-2 rounded-md border p-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1",
+				children: /* @__PURE__ */ jsx(ConditionBuilderTree, {
+					capabilities,
+					onChange,
+					value
+				})
+			}), /* @__PURE__ */ jsx(Button, {
+				"aria-label": removeLabel,
+				onClick: onRemove,
+				size: "icon-xs",
+				tooltip: removeLabel,
+				type: "button",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})]
+		})]
+	});
+};
+const LeafRow = ({ node, capabilities, index, combinator, onChange, onRemove, onSetCombinator }) => {
+	const labels = useLabels();
+	const { fields, allowFormula = false } = capabilities;
+	const operand = leafOperand(node);
+	if (operand?.type === "formula") return /* @__PURE__ */ jsx(FormulaLeafRow, {
+		capabilities,
+		combinator,
+		expr: operand.expr,
+		index,
+		node,
+		onChange,
+		onRemove,
+		onSetCombinator
+	});
+	const opsFor = capabilities.operatorsFor ?? operatorsFor;
+	const editorFor = capabilities.valueEditorFor ?? valueEditorFor;
+	const fieldIndex = operand ? fields.findIndex((f) => operandsEqual(f.operand, operand)) : -1;
+	const field = fields[fieldIndex];
+	if (!field) return null;
+	const operator = leafOperator(node) ?? opsFor(field.valueType).at(0);
+	if (!operator) return null;
+	const operators = opsFor(field.valueType);
+	const editorKind = editorFor(field.valueType, operator);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx(ConditionGutter, {
+				combinator,
+				index,
+				onCombinator: onSetCombinator
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ jsxs(Select, {
+						onValueChange: (next) => {
+							if (next === null) return;
+							if (next === FORMULA_OPTION) {
+								onChange(buildLeaf({
+									operand: {
+										type: "formula",
+										expr: ""
+									},
+									operator: opsFor(FORMULA_VALUE_TYPE).at(0) ?? "eq",
+									value: ""
+								}));
+								return;
+							}
+							const nextField = fields[Number(next)];
+							if (nextField) onChange(leafFromField(nextField));
+						},
+						value: String(fieldIndex),
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "h-7 min-h-0 w-auto max-w-56 text-xs",
+							size: "sm",
+							children: /* @__PURE__ */ jsx(SelectValue, {
+								placeholder: labels.fieldPlaceholder,
+								children: field.label
+							})
+						}), /* @__PURE__ */ jsxs(SelectPopup, {
+							alignItemWithTrigger: false,
+							children: [fields.map((option, optionIndex) => /* @__PURE__ */ jsx(SelectItem, {
+								value: String(optionIndex),
+								children: option.label
+							}, JSON.stringify(option.operand))), allowFormula && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SelectSeparator, {}), /* @__PURE__ */ jsx(SelectItem, {
+								value: FORMULA_OPTION,
+								children: labels.useFormula
+							})] })]
+						})]
+					}),
+					/* @__PURE__ */ jsx(OperatorSelect, {
+						field,
+						node,
+						onChange,
+						operator,
+						operators
+					}),
+					/* @__PURE__ */ jsx(LeafValueEditor, {
+						capabilities,
+						editorKind,
+						field,
+						node,
+						onChange,
+						operator
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(RemoveButton, { onRemove })
+		]
+	});
+};
+const FormulaLeafRow = ({ node, expr, capabilities, index, combinator, onChange, onRemove, onSetCombinator }) => {
+	const labels = useLabels();
+	const { fields, formulaNumberFields = [] } = capabilities;
+	const opsFor = capabilities.operatorsFor ?? operatorsFor;
+	const operator = leafOperator(node) ?? opsFor(FORMULA_VALUE_TYPE).at(0) ?? "eq";
+	const operators = opsFor(FORMULA_VALUE_TYPE);
+	const firstField = fields.at(0);
+	const formulaOperand = {
+		type: "formula",
+		expr
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx(ConditionGutter, {
+				combinator,
+				index,
+				onCombinator: onSetCombinator
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-1.5",
+				children: [
+					capabilities.renderFormulaCell?.({
+						expr,
+						numberFields: formulaNumberFields,
+						onChangeExpr: (nextExpr) => onChange(buildLeaf({
+							operand: {
+								type: "formula",
+								expr: nextExpr
+							},
+							operator,
+							value: leafValueString(node)
+						})),
+						onUseField: () => {
+							if (firstField) onChange(leafFromField(firstField));
+						}
+					}),
+					/* @__PURE__ */ jsx(OperatorSelectFormula, {
+						node,
+						onChange,
+						operand: formulaOperand,
+						operator,
+						operators
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						"aria-label": labels.valuePlaceholder,
+						className: "h-7! w-24 text-xs",
+						onChange: (e) => onChange(buildLeaf({
+							operand: formulaOperand,
+							operator,
+							value: e.currentTarget.value
+						})),
+						placeholder: labels.valuePlaceholder,
+						size: "sm",
+						type: "number",
+						value: leafValueString(node)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(RemoveButton, { onRemove })
+		]
+	});
+};
+const OperatorSelect = ({ field, node, operator, operators, onChange }) => {
+	const labels = useLabels();
+	return /* @__PURE__ */ jsxs(Select, {
+		onValueChange: (next) => {
+			if (next === null || !isConditionOperator(next)) return;
+			onChange(buildLeaf({
+				operand: field.operand,
+				operator: next,
+				value: isMultiValue(next) ? leafValueList(node) : leafValueString(node)
+			}));
+		},
+		value: operator,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: "h-7 min-h-0 w-auto min-w-24 text-xs",
+			size: "sm",
+			children: /* @__PURE__ */ jsx(SelectValue, { children: () => labels.operator(field.valueType, operator) })
+		}), /* @__PURE__ */ jsx(SelectPopup, {
+			alignItemWithTrigger: false,
+			children: operators.map((op) => /* @__PURE__ */ jsx(SelectItem, {
+				value: op,
+				children: labels.operator(field.valueType, op)
+			}, op))
+		})]
+	});
+};
+const OperatorSelectFormula = ({ node, operand, operator, operators, onChange }) => {
+	const labels = useLabels();
+	return /* @__PURE__ */ jsxs(Select, {
+		onValueChange: (next) => {
+			if (next === null || !isConditionOperator(next)) return;
+			onChange(buildLeaf({
+				operand,
+				operator: next,
+				value: leafValueString(node)
+			}));
+		},
+		value: operator,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: "h-7 min-h-0 w-auto min-w-24 text-xs",
+			size: "sm",
+			children: /* @__PURE__ */ jsx(SelectValue, { children: () => labels.operator(FORMULA_VALUE_TYPE, operator) })
+		}), /* @__PURE__ */ jsx(SelectPopup, {
+			alignItemWithTrigger: false,
+			children: operators.map((op) => /* @__PURE__ */ jsx(SelectItem, {
+				value: op,
+				children: labels.operator(FORMULA_VALUE_TYPE, op)
+			}, op))
+		})]
+	});
+};
+const RemoveButton = ({ onRemove }) => {
+	const labels = useLabels();
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": labels.remove,
+		onClick: onRemove,
+		size: "icon-xs",
+		type: "button",
+		variant: "ghost",
+		children: /* @__PURE__ */ jsx(XIcon, {})
+	});
+};
+const LeafValueEditor = ({ capabilities, editorKind, field, node, operator, onChange }) => {
+	const { labels, locale } = useBuilderContext();
+	const emit = (value) => {
+		onChange(buildLeaf({
+			operand: field.operand,
+			operator,
+			value
+		}));
+	};
+	const injected = capabilities.renderValueEditor?.({
+		editorKind,
+		field,
+		node,
+		operator,
+		emit
+	});
+	if (injected !== null && injected !== void 0) return injected;
+	if (editorKind === "none") return null;
+	if (editorKind === "select") return /* @__PURE__ */ jsxs(Select, {
+		multiple: isMultiValue(operator),
+		onValueChange: (next) => {
+			if (next !== null) emit(next);
+		},
+		value: isMultiValue(operator) ? leafValueList(node) : leafValueString(node),
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: "h-7 min-h-0 w-auto min-w-28 text-xs",
+			size: "sm",
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: labels.valuePlaceholder })
+		}), /* @__PURE__ */ jsx(SelectPopup, {
+			alignItemWithTrigger: false,
+			children: field.options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		})]
+	});
+	if (editorKind === "int") return /* @__PURE__ */ jsx(Input, {
+		"aria-label": labels.valuePlaceholder,
+		className: "h-7! w-24 text-xs",
+		onChange: (e) => emit(e.currentTarget.value),
+		placeholder: labels.valuePlaceholder,
+		size: "sm",
+		type: "number",
+		value: leafValueString(node)
+	});
+	if (editorKind === "date") return /* @__PURE__ */ jsx("div", {
+		className: "border-input bg-background min-w-28 rounded-md border px-1",
+		children: /* @__PURE__ */ jsx(DatePickerPopover, {
+			clearLabel: labels.clearDate,
+			locale,
+			onChange: (next) => emit(next ?? ""),
+			placeholderLabel: labels.selectDate,
+			todayLabel: labels.today,
+			value: leafValueString(node) || null
+		})
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		"aria-label": labels.valuePlaceholder,
+		className: "h-7! w-32 text-xs",
+		onChange: (e) => emit(e.currentTarget.value),
+		placeholder: labels.valuePlaceholder,
+		size: "sm",
+		value: leafValueString(node)
+	});
+};
+//#endregion
+export { ConditionBuilder };

package/dist/conditions/index.d.ts

@@ -0,0 +1,3 @@
+import { CONDITION_OPERATORS, ConditionOperator, FieldOption, FieldOptionChoice, FieldValueType, ValueEditorKind, appendChild, asGroup, buildLeaf, fieldForNode, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, removeChild, replaceChild, valueEditorFor } from "./logic.js";
+import { ConditionBuilder, ConditionBuilderLabels, ConditionCapabilities, FormulaCellRenderCtx, ValueEditorRenderCtx } from "./builder.js";
+export { CONDITION_OPERATORS, ConditionBuilder, type ConditionBuilderLabels, type ConditionCapabilities, type ConditionOperator, type FieldOption, type FieldOptionChoice, type FieldValueType, type FormulaCellRenderCtx, type ValueEditorKind, type ValueEditorRenderCtx, appendChild, asGroup, buildLeaf, fieldForNode, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, removeChild, replaceChild, valueEditorFor };

package/dist/conditions/index.js

@@ -0,0 +1,3 @@
+import { CONDITION_OPERATORS, appendChild, asGroup, buildLeaf, fieldForNode, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, removeChild, replaceChild, valueEditorFor } from "./logic.js";
+import { ConditionBuilder } from "./builder.js";
+export { CONDITION_OPERATORS, ConditionBuilder, appendChild, asGroup, buildLeaf, fieldForNode, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, removeChild, replaceChild, valueEditorFor };

package/dist/conditions/logic.d.ts

@@ -0,0 +1,70 @@
+import { PropertyIconType } from "../property-icon.js";
+import { ConditionNode, GroupNode, RefOperand } from "@stll/conditions";
+//#region src/conditions/logic.d.ts
+/**
+ * Context-agnostic description of one operand the builder may filter
+ * on. `valueType` drives both the operator set (`operatorsFor`) and
+ * the value editor; `options` supplies the choices for any select-like
+ * value type.
+ */
+type FieldValueType = "text" | "single-select" | "multi-select" | "date" | "int" | "money" | "person" | "kind" | "status" | "priority";
+type FieldOptionChoice = {
+  value: string;
+  label: string;
+  color?: string;
+};
+type FieldOption = {
+  operand: RefOperand;
+  label: string;
+  valueType: FieldValueType;
+  /** Drives the property-type icon shown in chips and the picker. */
+  type: PropertyIconType;
+  options?: FieldOptionChoice[];
+};
+/**
+ * The surface operators the builder exposes. A subset maps to
+ * `compare` nodes (binary comparisons against a literal); the rest map
+ * to `predicate` nodes. `operatorKind` is the single place that
+ * decides which AST node each operator builds.
+ */
+declare const CONDITION_OPERATORS: readonly ["eq", "neq", "contains", "not_contains", "starts_with", "ends_with", "contains_all", "in", "gt", "lt", "gte", "lte", "is_empty", "is_not_empty"];
+type ConditionOperator = (typeof CONDITION_OPERATORS)[number];
+declare const isConditionOperator: (value: string) => value is ConditionOperator;
+declare const operatorsFor: (valueType: FieldValueType) => readonly ConditionOperator[];
+/** How a value type renders its value editor. */
+type ValueEditorKind = "none" | "text" | "int" | "date" | "select";
+declare const valueEditorFor: (valueType: FieldValueType, operator: ConditionOperator) => ValueEditorKind;
+/** Whether the value editor accepts multiple selections. */
+declare const isMultiValue: (operator: ConditionOperator) => boolean;
+/** Compares two ref operands for the field-matching needed by the row. */
+declare const operandsEqual: (a: RefOperand, b: RefOperand) => boolean;
+/** Reads the ref operand a leaf node filters on, or null for a group. */
+declare const leafOperand: (node: ConditionNode) => RefOperand | null;
+/** Reads the surface operator a leaf node represents. */
+declare const leafOperator: (node: ConditionNode) => ConditionOperator | null;
+/** Reads a leaf's value as a string (scalar editors). */
+declare const leafValueString: (node: ConditionNode) => string;
+/** Reads a leaf's value as a string list (multi editors). */
+declare const leafValueList: (node: ConditionNode) => string[];
+type BuildLeafArgs = {
+  operand: RefOperand;
+  operator: ConditionOperator;
+  value: string | string[];
+};
+/**
+ * Rebuilds a leaf node from its editor state. `compare` operators
+ * produce a literal right operand; predicate operators carry their
+ * payload (or none, for `is_empty`).
+ */
+declare const buildLeaf: ({ operand, operator, value }: BuildLeafArgs) => ConditionNode;
+/** A fresh leaf for a newly added row, with the field's first operator. */
+declare const leafFromField: (field: FieldOption) => ConditionNode;
+/** Finds the field a leaf node targets, or null when none matches. */
+declare const fieldForNode: (node: ConditionNode, fields: FieldOption[]) => FieldOption | null;
+/** Normalizes the controlled `value` prop into a concrete group root. */
+declare const asGroup: (value: ConditionNode | null) => GroupNode;
+declare const replaceChild: (group: GroupNode, index: number, child: ConditionNode) => GroupNode;
+declare const removeChild: (group: GroupNode, index: number) => GroupNode;
+declare const appendChild: (group: GroupNode, child: ConditionNode) => GroupNode;
+//#endregion
+export { CONDITION_OPERATORS, ConditionOperator, FieldOption, FieldOptionChoice, FieldValueType, ValueEditorKind, appendChild, asGroup, buildLeaf, fieldForNode, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, removeChild, replaceChild, valueEditorFor };