@fiestaboard/ui 3.0.1 → 3.2.0

package/dist/components/editor/formatting-picker-content.js

@@ -0,0 +1,154 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Badge as t } from "../feedback/badge.js";
+import { Button as n } from "../forms/button.js";
+import { Input as r } from "../forms/input.js";
+import { Box as i } from "../layout/box.js";
+import { Flex as a } from "../layout/flex.js";
+import { Grid as o } from "../layout/grid.js";
+import { Text as s } from "../typography/text.js";
+import { Stack as c } from "../layout/stack.js";
+import { Tooltip as l, TooltipContent as u, TooltipProvider as d, TooltipTrigger as f } from "../overlays/tooltip.js";
+import { AVAILABLE_COLORS as p, COLOR_DISPLAY as m } from "../../lib/board-colors.js";
+import { FILL_SPACE_REPEAT_VAR as h } from "./constants.js";
+import { ChevronRight as g, ChevronsLeftRight as _ } from "lucide-react";
+import v from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/editor/formatting-picker-content.tsx
+var x = {
+	noFormattingAvailable: "No formatting options available",
+	back: "← Back",
+	selectColor: "Select color:",
+	orCustomPattern: "Or custom pattern:",
+	use: "Use",
+	customPatternPlaceholder: "e.g. - or =-",
+	colorNames: {
+		red: "Red",
+		orange: "Orange",
+		yellow: "Yellow",
+		green: "Green",
+		blue: "Blue",
+		violet: "Violet",
+		white: "White",
+		black: "Black"
+	},
+	colorOptionLabel: (e) => `${e} color`
+};
+function S({ formatting: S = {}, onInsert: C, labels: w }) {
+	let T = {
+		...x,
+		...w
+	}, [E, D] = v.useState(!1), [O, k] = v.useState(""), A = v.useId(), j = Object.entries(S).map(([e, t]) => ({
+		name: e.replace(/_/g, " "),
+		syntax: t.syntax,
+		description: t.description
+	}));
+	if (j.length === 0) return /* @__PURE__ */ y(s, {
+		tone: "muted",
+		className: "p-3",
+		children: T.noFormattingAvailable
+	});
+	let M = (e) => {
+		e.syntax.includes("fill_space_repeat") ? D(!0) : C(e.syntax);
+	}, N = (e) => {
+		C(`{{${h}:${e}}}`), D(!1), k("");
+	};
+	return E ? /* @__PURE__ */ y(d, { children: /* @__PURE__ */ b(i, {
+		className: "p-2 min-w-[240px] max-w-[280px]",
+		children: [
+			/* @__PURE__ */ y("button", {
+				type: "button",
+				onClick: () => D(!1),
+				className: "text-xs text-muted-foreground hover:text-foreground mb-2 flex items-center gap-1",
+				children: T.back
+			}),
+			/* @__PURE__ */ y(s, {
+				size: "xs",
+				tone: "muted",
+				weight: "medium",
+				className: "mb-2",
+				children: T.selectColor
+			}),
+			/* @__PURE__ */ y(o, {
+				cols: "4",
+				gap: "2",
+				className: "mb-3",
+				children: p.map((t) => /* @__PURE__ */ b(l, { children: [/* @__PURE__ */ y(f, {
+					asChild: !0,
+					children: /* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: () => N(t),
+						className: e("h-10 rounded-md text-xs font-medium transition-all hover:scale-105 hover:shadow-md", "flex items-center justify-center", m[t].bg, m[t].text),
+						"aria-label": T.colorOptionLabel(T.colorNames[t]),
+						children: T.colorNames[t]
+					})
+				}), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(s, { children: T.colorNames[t] }) })] }, t))
+			}),
+			/* @__PURE__ */ b(i, {
+				className: "pt-2 border-t border-border",
+				children: [/* @__PURE__ */ y(s, {
+					size: "xs",
+					tone: "muted",
+					className: "mb-1.5",
+					id: A,
+					children: T.orCustomPattern
+				}), /* @__PURE__ */ b(i, {
+					as: "form",
+					onSubmit: (e) => {
+						e.preventDefault(), O && N(O);
+					},
+					className: "flex gap-1.5",
+					children: [/* @__PURE__ */ y(r, {
+						type: "text",
+						value: O,
+						onChange: (e) => k(e.target.value),
+						placeholder: T.customPatternPlaceholder,
+						maxLength: 10,
+						"aria-labelledby": A,
+						className: "flex-1 font-mono"
+					}), /* @__PURE__ */ y(n, {
+						type: "submit",
+						size: "sm",
+						disabled: !O,
+						children: T.use
+					})]
+				})]
+			})
+		]
+	}) }) : /* @__PURE__ */ y(d, { children: /* @__PURE__ */ y(i, {
+		className: "p-1.5 min-w-[240px] max-w-[280px]",
+		children: /* @__PURE__ */ y(c, {
+			gap: "0.5",
+			children: j.map((n) => {
+				let r = n.syntax.includes(h);
+				return /* @__PURE__ */ b(l, { children: [/* @__PURE__ */ y(f, {
+					asChild: !0,
+					children: /* @__PURE__ */ b("button", {
+						type: "button",
+						onClick: () => M(n),
+						className: e("w-full text-left px-2.5 py-1.5 rounded-md text-sm", "hover:bg-accent hover:text-accent-foreground transition-colors", "flex items-center justify-between gap-2 group"),
+						children: [/* @__PURE__ */ b(a, {
+							align: "center",
+							gap: "2",
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ y(_, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }), /* @__PURE__ */ y(s, {
+								as: "span",
+								weight: "medium",
+								className: "capitalize truncate group-hover:text-accent-foreground",
+								children: n.name
+							})]
+						}), r ? /* @__PURE__ */ y(g, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }) : /* @__PURE__ */ y(t, {
+							variant: "secondary",
+							className: "font-mono text-[10px] px-1.5 py-0 flex-shrink-0",
+							children: n.syntax
+						})]
+					})
+				}), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(s, { children: n.description ?? n.name }) })] }, n.syntax);
+			})
+		})
+	}) });
+}
+//#endregion
+export { x as DEFAULT_FORMATTING_PICKER_LABELS, S as FormattingPickerContent };
+
+//# sourceMappingURL=formatting-picker-content.js.map

package/dist/components/editor/formatting-picker-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatting-picker-content.js","names":[],"sources":["../../../src/components/editor/formatting-picker-content.tsx"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,IAAa,IAA2D;CACtE,uBAAuB;CACvB,MAAM;CACN,aAAa;CACb,iBAAiB;CACjB,KAAK;CACL,0BAA0B;CAC1B,YAAY;EACV,KAAK;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,MAAM;EACN,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,mBAAmB,MAAc,GAAG,EAAU;AAChD;AAaA,SAAgB,EAAwB,EAAE,gBAAa,CAAC,GAAG,aAAU,aAAwC;CAC3G,IAAM,IAAI;EAAE,GAAG;EAAkC,GAAG;CAAO,GACrD,CAAC,GAAuB,KAA4B,EAAM,SAAS,EAAK,GACxE,CAAC,GAAY,KAAiB,EAAM,SAAS,EAAE,GAI/C,IAAoB,EAAM,MAAM,GAEhC,IAA8B,OAAO,QAAQ,CAAU,CAAC,CAAC,KAAK,CAAC,GAAM,QAAW;EACpF,MAAM,EAAK,QAAQ,MAAM,GAAG;EAC5B,QAAQ,EAAK;EACb,aAAa,EAAK;CACpB,EAAE;CAEF,IAAI,EAAQ,WAAW,GACrB,OACE,kBAAC,GAAD;EAAM,MAAK;EAAQ,WAAU;EAC1B,UAAA,EAAE;CACC,CAAA;CAIV,IAAM,KAAqB,MAA6B;EAEtD,AAAI,EAAO,OAAO,SAAA,mBAA8B,IAC9C,EAAyB,EAAI,IAE7B,EAAS,EAAO,MAAM;CAE1B,GAEM,KAAqB,MAAsB;EAG/C,AAFA,EAAS,KAAK,EAAsB,GAAG,EAAU,GAAG,GACpD,EAAyB,EAAK,GAC9B,EAAc,EAAE;CAClB;CAiFA,OAvEI,IAEA,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAyB,EAAK;IAC7C,WAAU;IAET,UAAA,EAAE;GACG,CAAA;GAGR,kBAAC,GAAD;IAAM,MAAK;IAAK,MAAK;IAAQ,QAAO;IAAS,WAAU;IACpD,UAAA,EAAE;GACC,CAAA;GAEN,kBAAC,GAAD;IAAM,MAAK;IAAI,KAAI;IAAI,WAAU;IAC9B,UAAA,EAAiB,KAAK,MACrB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAgB,SAAA;KACd,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAkB,CAAS;MAC1C,WAAW,EACT,sFACA,oCAIA,EAAc,EAAU,CAAC,IACzB,EAAc,EAAU,CAAC,IAC3B;MACA,cAAY,EAAE,iBAAiB,EAAE,WAAW,EAAU;MAErD,UAAA,EAAE,WAAW;KACR,CAAA;IACM,CAAA,GAChB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAO,EAAE,WAAW,GAAiB,CAAA,EACvB,CAAA,CACT,EAAA,GAtBK,CAsBL,CACV;GACG,CAAA;GAGN,kBAAC,GAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAM,MAAK;KAAK,MAAK;KAAQ,WAAU;KAAS,IAAI;KACjD,UAAA,EAAE;IACC,CAAA,GACN,kBAAC,GAAD;KAAK,IAAG;KAAO,WA1DO,MAAuB;MAErD,AADA,EAAE,eAAe,GACb,KACF,EAAkB,CAAU;KAEhC;KAqD2D,WAAU;KAA3D,UAAA,CACE,kBAAC,GAAD;MACE,MAAK;MACL,OAAO;MACP,WAAW,MAAM,EAAc,EAAE,OAAO,KAAK;MAC7C,aAAa,EAAE;MACf,WAAW;MACX,mBAAiB;MACjB,WAAU;KACX,CAAA,GACD,kBAAC,GAAD;MAAQ,MAAK;MAAS,MAAK;MAAK,UAAU,CAAC;MACxC,UAAA,EAAE;KACG,CAAA,CACL;IACF,CAAA,CAAA;;EACF;CACU,CAAA,EAAA,CAAA,IAMnB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAK,WAAU;EACb,UAAA,kBAAC,GAAD;GAAO,KAAI;GACR,UAAA,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAW,EAAO,OAAO,SAAS,CAAqB;IAE7D,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAgB,SAAA;KACd,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAkB,CAAM;MACvC,WAAW,EACT,qDACA,kEACA,+CACF;MAPF,UAAA,CASE,kBAAC,GAAD;OAAM,OAAM;OAAS,KAAI;OAAI,WAAU;OAAvC,UAAA,CACE,kBAAC,GAAD,EAAmB,WAAU,qFAAsF,CAAA,GACnH,kBAAC,GAAD;QACE,IAAG;QACH,QAAO;QACP,WAAU;QAET,UAAA,EAAO;OACJ,CAAA,CACF;MACL,CAAA,GAAA,IACC,kBAAC,GAAD,EAAc,WAAU,qFAAsF,CAAA,IAE9G,kBAAC,GAAD;OAAO,SAAQ;OAAY,WAAU;OAClC,UAAA,EAAO;MACH,CAAA,CAEH;;IACM,CAAA,GAChB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAO,EAAO,eAAe,EAAO,KAAW,CAAA,EACjC,CAAA,CACT,EAAA,GAjCK,EAAO,MAiCZ;GAEb,CAAC;EACI,CAAA;CACJ,CAAA,EACU,CAAA;AAErB"}

package/dist/components/editor/formula/formula-editor-panel.d.ts

@@ -0,0 +1,102 @@
+import { type ReactNode } from "react";
+/**
+ * One built-in formula function, as the app's `getFormulaFunctions` describes
+ * it. Declared structurally here so a host can type-check its own payload
+ * without this package depending on the FiestaBoard API client.
+ */
+export interface FormulaFunction {
+    /** Uppercase call name, e.g. `IF`. */
+    name: string;
+    /** Grouping key. The five FiestaBoard categories get an icon and an accent
+     *  colour; anything else still renders, in a neutral group after them. */
+    category: string;
+    /** Human-readable call shape, e.g. `IF(cond, then, else)`. */
+    signature: string;
+    /** One-line description, shown in the hover tooltip. */
+    summary: string;
+}
+/** Result of an injected expression validation round-trip. */
+export interface FormulaValidationResult {
+    valid: boolean;
+    /** Message to show under the editor when `valid` is false. */
+    error?: string;
+}
+export interface FormulaEditorLabels {
+    /** Tab that lists the built-in functions. */
+    functionsTab: string;
+    /** Tab that hosts the injected variable picker. */
+    variablesTab: string;
+    /** Accessible name for the function-list loading placeholder. */
+    loading: string;
+    /** Field label above the CodeMirror input. */
+    formulaExpression: string;
+    /** Confirm button, `mode="create"`. */
+    insert: string;
+    /** Confirm button, `mode="edit"`. */
+    done: string;
+    /** Dismiss button when the panel opened empty. */
+    cancel: string;
+    /** Dismiss button when the panel opened on an existing formula. */
+    close: string;
+    categoryLogic: string;
+    categoryMath: string;
+    categoryText: string;
+    categoryConversion: string;
+    categoryColor: string;
+}
+export declare const DEFAULT_FORMULA_EDITOR_LABELS: FormulaEditorLabels;
+export interface FormulaEditorPanelProps {
+    /**
+     * Pre-populated expression body (no {{= }}). Used in edit mode.
+     *
+     * Read when the CodeMirror document is created, i.e. at mount: changing it
+     * afterwards does not rewrite what the user is editing. To reopen the panel
+     * on a different formula, give it a new `key`.
+     */
+    initialExpr?: string;
+    /** "create" → Insert button; "edit" → Done button + Cancel */
+    mode: "create" | "edit";
+    /** Called with the bare expression when the user confirms. */
+    onConfirm: (expr: string) => void;
+    /** Called when the user cancels (edit mode only). */
+    onCancel?: () => void;
+    /**
+     * Built-in function reference, already resolved by the host. Grouped by
+     * `category` and sorted by name for display.
+     */
+    formulaFunctions?: FormulaFunction[];
+    /** Show placeholders in the Functions tab while the host fetches. */
+    isLoadingFunctions?: boolean;
+    /**
+     * Validates the **bare expression body** — no `{{=` / `}}` wrapper, already
+     * trimmed. A host backed by a whole-template validator wraps it itself:
+     * `validateExpression={(e) => api.validateTemplate(`{{= ${e} }}`)}`.
+     *
+     * Calls are debounced 300 ms and results for a stale expression are
+     * discarded, so an implementation only has to be idempotent, not cancelable.
+     *
+     * Omitting it turns validation off entirely: the state indicator stays
+     * blank and Confirm enables on any non-empty expression. That is deliberate
+     * — a panel with no validator must not present a permanently disabled
+     * Confirm button.
+     */
+    validateExpression?: (expr: string) => Promise<FormulaValidationResult>;
+    /**
+     * Renders the Variables tab. Omitted, the tab strip disappears and the panel
+     * shows only functions — never a placeholder.
+     *
+     * A slot rather than a direct import of the group's `VariablePickerContent`:
+     * that component pulls in lucide-react's full `icons` barrel, and injecting
+     * it lets the host hand over the *same* lazy chunk its toolbar already
+     * loaded instead of duplicating the barrel into this already
+     * CodeMirror-heavy panel (FiestaBoard #1575). This panel wraps the slot in
+     * its own `<Suspense>`, so a bare `lazy()` component can be passed straight
+     * in.
+     */
+    renderVariablePicker?: (ctx: {
+        onInsert: (variable: string) => void;
+    }) => ReactNode;
+    labels?: Partial<FormulaEditorLabels>;
+    className?: string;
+}
+export declare function FormulaEditorPanel({ initialExpr, mode, onConfirm, onCancel, formulaFunctions, isLoadingFunctions, validateExpression, renderVariablePicker, labels, className, }: FormulaEditorPanelProps): import("react").JSX.Element;