@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/view-formulas.d.ts

@@ -0,0 +1,61 @@
+import { type ViewFormat, type ViewFormula, type ViewOwnTile } from '@columenlabs/lumen-ui-types/views';
+import { type LucideIcon } from 'lucide-react';
+import { type LumenOption } from './lumen-selector.js';
+import { type ViewDomain, type ViewField } from './view-model.js';
+export declare const MAX_FORMULAS = 20;
+/**
+ * A format's short name, short enough for the field list's Format column, and how it reads
+ *. ± marks the signed, gain/loss coloured ones.
+ */
+export declare const FORMAT_LABELS: Record<ViewFormat, string>;
+/** A field's type as a short chip, its full name on hover. */
+export declare function FormatChip({ format, icon }: {
+    format: ViewFormat;
+    icon?: LucideIcon;
+}): import("react").JSX.Element;
+/** The number formats as picker options, each with how it reads. */
+export declare const formatOptions: () => LumenOption<ViewFormula['format']>[];
+/**
+ * A formula as it shows: a Text one has no sum or average of words, so its
+ * group and Total rows are blank unless they count, or show the first or last value. Its format is
+ * the person's pick; a number format on words just shows the words.
+ */
+export declare function shownFormula(f: ViewFormula): ViewFormula;
+/**
+ * Fields as LumenSelector options, grouped by the domain's field groups (Holding, Symbol, Account,
+ * Formulas) when it has them; without a domain or groups they are one list.
+ */
+export declare function fieldOptions<T>(fields: ViewField<T>[], domain?: ViewDomain<T>): LumenOption[];
+/** A view's formulas as fields: shown, sorted and rolled up like the domain's own. */
+export declare function formulaFields<T>(formulas: ViewFormula[]): ViewField<T>[];
+/**
+ * What is wrong with each formula on a domain (its fields, not its formulas); null where nothing.
+ * A formula reads fields by name and any other formula by its key, never in a loop.
+ */
+export declare function formulaIssues<T>(formulas: ViewFormula[], domain: ViewDomain<T>): (string | null)[];
+/**
+ * The fields and formulas a formula can read, as picker options: each field's name as the value
+ * (`symbol.price`), grouped as in the Columns tree; the formulas by key, but `except`.
+ */
+export declare function formulaOptions<T>(domain: ViewDomain<T>, formulas: ViewFormula[], except?: string): LumenOption[];
+/** The DOM id of the FormulaForm field an issue from `formulaIssues` is about. */
+export declare const formulaIssueTarget: (key: string, issue: string) => string;
+export declare const AGG_LABELS: Record<ViewOwnTile['agg'], string>;
+export declare const MAX_TILES = 8;
+/**
+ * One formula's form, under its row in the Fields list: label and key, the expression (fields
+ * offered as you type), its format and how group and Total rows roll it up.
+ */
+export declare function FormulaForm({ formula: f, issue, blank, fields, onChange, onRemove, onDone, }: {
+    formula: ViewFormula;
+    issue: string | null;
+    /** Why it is blank on some of the page's rows (`blank on 3 of 24 rows: x is empty`). */
+    blank?: string | null;
+    /** The fields and formulas it can read, by name, as picker options (`formulaOptions`). */
+    fields: LumenOption[];
+    onChange: (p: Partial<ViewFormula>) => void;
+    /** Remove and Done, for a formula opened in a list. Left out (a dialog with its own footer), the
+     *  form is bare: no row actions, no row tint or indent. */
+    onRemove?: () => void;
+    onDone?: () => void;
+}): import("react").JSX.Element;

package/dist/view-formulas.js

@@ -0,0 +1,247 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Formula columns and tiles on a custom view: a view computes its own columns
+// from the domain's fields (`config.formulas`, Jexl, `@columenlabs/lumen-ui-types/views`) and rolls fields up
+// into its own tiles (`config.tiles`). Each formula is a row of the Edit dialog's Fields list; its
+// pencil opens this form under the row.
+import { checkViewFormula, compileViewFormula, formulaLoops, formulaReads, viewAggs, viewFormulaIsText, viewNumberFormats, } from '@columenlabs/lumen-ui-types/views';
+import { CalendarCheckIcon, CalendarClockIcon, CalendarDaysIcon, CalendarFoldIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, CircleAlertIcon, SigmaIcon, Trash2Icon, WandSparklesIcon, } from 'lucide-react';
+import { LumenConfirm } from './confirm.js';
+import { FormulaInput, guessField, swapWord } from './formula-input.js';
+import { IconButton } from './icon-button.js';
+import { LumenSelector } from './lumen-selector.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Input } from './ui/input.js';
+import { Label } from './ui/label.js';
+import { FORMULAS_GROUP, fieldName, groupOf } from './view-model.js';
+export const MAX_FORMULAS = 20;
+/**
+ * A format's short name, short enough for the field list's Format column, and how it reads
+ *. ± marks the signed, gain/loss coloured ones.
+ */
+export const FORMAT_LABELS = {
+    number: 'Number',
+    rounded: 'Rounded',
+    integer: 'Integer',
+    compact: 'Compact',
+    signed: 'Number ±',
+    price: 'Currency',
+    price_rounded: 'Rounded $',
+    price_signed: 'Currency ±',
+    weight: 'Percent',
+    percent: 'Percent ±',
+    text: 'Text',
+};
+/**
+ * A format as a chip glyph for the field list: $ the currency (USD, the only
+ * one the views draw), # a number, % a percent, Aa text, ± the signed ones.
+ */
+const FORMAT_GLYPHS = {
+    number: '#',
+    rounded: '#',
+    integer: '#',
+    compact: '#',
+    signed: '±#',
+    price: '$',
+    price_rounded: '$',
+    price_signed: '±$',
+    weight: '%',
+    percent: '±%',
+    text: 'Aa',
+};
+/** Text fields whose icon is a calendar are dates (no date format exists; the icon says it). */
+const DATE_ICONS = new Set([
+    CalendarIcon,
+    CalendarDaysIcon,
+    CalendarRangeIcon,
+    CalendarClockIcon,
+    CalendarCheckIcon,
+    CalendarFoldIcon,
+]);
+/** A field's type as a short chip, its full name on hover. */
+export function FormatChip({ format, icon }) {
+    const date = format === 'text' && !!icon && DATE_ICONS.has(icon);
+    return (_jsx(Badge, { variant: "outline", className: "h-5 min-w-7 justify-center px-1.5 font-mono text-[0.7rem] font-normal text-muted-foreground", title: date ? 'Date' : FORMAT_LABELS[format], "aria-label": date ? 'Date' : FORMAT_LABELS[format], children: date ? _jsx(CalendarDaysIcon, { className: "size-3" }) : FORMAT_GLYPHS[format] }));
+}
+const FORMAT_EXAMPLES = {
+    number: '1,234.56',
+    rounded: '1,235',
+    integer: '2026',
+    compact: '1.2K · 10B',
+    signed: '+1,234.56',
+    price: '$1,234.56',
+    price_rounded: '$1,235',
+    price_signed: '+$1,234.56',
+    weight: '12.3%',
+    percent: '+12.3%',
+    text: 'Abc',
+};
+/** The number formats as picker options, each with how it reads. */
+export const formatOptions = () => viewNumberFormats.map((v) => ({
+    value: v,
+    label: FORMAT_LABELS[v],
+    detail: FORMAT_EXAMPLES[v],
+}));
+const NO_ROLLUP = '_none';
+/** What a text formula's group and Total rows can show: no sum or average of words. */
+const TEXT_AGGS = ['count', 'distinct', 'first', 'last'];
+const isTextAgg = (a) => TEXT_AGGS.includes(a);
+/**
+ * A formula as it shows: a Text one has no sum or average of words, so its
+ * group and Total rows are blank unless they count, or show the first or last value. Its format is
+ * the person's pick; a number format on words just shows the words.
+ */
+export function shownFormula(f) {
+    if (f.format !== 'text')
+        return f;
+    return { ...f, agg: isTextAgg(f.agg) ? f.agg : 'none' };
+}
+/**
+ * Fields as LumenSelector options, grouped by the domain's field groups (Holding, Symbol, Account,
+ * Formulas) when it has them; without a domain or groups they are one list.
+ */
+export function fieldOptions(fields, domain) {
+    const labels = new Map((domain?.groups ?? []).map((g) => [g.id, g.label]));
+    const grouped = !!domain && (labels.size > 1 || fields.some((f) => f.group === FORMULAS_GROUP));
+    return fields.map((f) => {
+        const g = domain ? groupOf(domain, f) : f.group;
+        return {
+            value: f.key,
+            label: f.label,
+            icon: f.icon,
+            group: grouped
+                ? g === FORMULAS_GROUP
+                    ? 'Formulas'
+                    : (labels.get(g ?? '') ?? undefined)
+                : undefined,
+        };
+    });
+}
+/** A view's formulas as fields: shown, sorted and rolled up like the domain's own. */
+export function formulaFields(formulas) {
+    return formulas.map(shownFormula).map((f) => {
+        let run;
+        try {
+            run = compileViewFormula(f.expr);
+        }
+        catch {
+            run = null;
+        }
+        return {
+            key: f.key,
+            label: f.label,
+            group: FORMULAS_GROUP,
+            icon: SigmaIcon,
+            value: () => null,
+            format: f.format,
+            formula: f.expr,
+            // A formula can work out dollars from amounts; only a share (%) stays under Hide amounts.
+            amount: f.format !== 'percent' && f.format !== 'weight' && f.format !== 'text',
+            // `none` leaves group and Total rows blank: neither a roll-up nor the formula again.
+            aggregate: f.agg && f.agg !== 'none' ? f.agg : undefined,
+            rollFormula: f.agg === null,
+            compute: (_, scope) => (run ? run(scope) : null),
+        };
+    });
+}
+/**
+ * What is wrong with each formula on a domain (its fields, not its formulas); null where nothing.
+ * A formula reads fields by name and any other formula by its key, never in a loop.
+ */
+export function formulaIssues(formulas, domain) {
+    const keys = domain.fields.map((f) => f.key);
+    const names = [...domain.fields.map((f) => fieldName(domain, f)), ...formulas.map((f) => f.key)];
+    const loops = formulaLoops(formulas);
+    return formulas.map((f, i) => {
+        if (!/^[a-z][a-z0-9_]{0,31}$/.test(f.key))
+            return 'Key: lowercase letters, digits and _';
+        if (keys.includes(f.key) || formulas.slice(0, i).some((x) => x.key === f.key))
+            return `Key ${f.key} is taken`;
+        if (!f.label.trim())
+            return 'Give it a label';
+        if (!f.expr.trim())
+            return 'Write an expression';
+        const issue = checkViewFormula(f.expr, names);
+        if (issue)
+            return issue;
+        if (!loops.has(f.key))
+            return null;
+        const via = formulaReads(f.expr).filter((k) => loops.has(k) && k !== f.key);
+        return `${f.key} loops back to itself${via.length ? ` through ${via.join(', ')}` : ''}`;
+    });
+}
+/**
+ * The fields and formulas a formula can read, as picker options: each field's name as the value
+ * (`symbol.price`), grouped as in the Columns tree; the formulas by key, but `except`.
+ */
+export function formulaOptions(domain, formulas, except) {
+    const fields = domain.fields.filter((f) => groupOf(domain, f) !== FORMULAS_GROUP);
+    return [
+        ...fieldOptions(fields, domain).map((o, i) => {
+            const f = fields[i];
+            return { ...o, value: fieldName(domain, f) };
+        }),
+        ...formulas
+            .filter((f) => f.key !== except)
+            .map((f) => ({ value: f.key, label: f.label || f.key, group: 'Formulas' })),
+    ];
+}
+/** The DOM id of the FormulaForm field an issue from `formulaIssues` is about. */
+export const formulaIssueTarget = (key, issue) => `formula-${key}-${issue.startsWith('Key') ? 'key' : issue === 'Give it a label' ? 'label' : 'expr'}`;
+export const AGG_LABELS = {
+    sum: 'Sum',
+    mean: 'Average',
+    min: 'Min',
+    max: 'Max',
+    count: 'Count',
+    distinct: 'Distinct count',
+    first: 'First',
+    last: 'Last',
+};
+export const MAX_TILES = 8;
+/**
+ * One formula's form, under its row in the Fields list: label and key, the expression (fields
+ * offered as you type), its format and how group and Total rows roll it up.
+ */
+export function FormulaForm({ formula: f, issue, blank, fields, onChange, onRemove, onDone, }) {
+    const id = `formula-${f.key}`;
+    const row = !!(onRemove && onDone);
+    const shown = shownFormula(f);
+    const text = shown.format === 'text';
+    const words = viewFormulaIsText(f.expr);
+    // Text is the default for words, never a lock: the format moves only when
+    // the expression starts or stops giving words, and the picker can change it any time.
+    const setExpr = (expr) => {
+        const now = viewFormulaIsText(expr);
+        if (now === words)
+            return onChange({ expr });
+        onChange(now
+            ? { expr, format: 'text', agg: shownFormula({ ...f, format: 'text' }).agg }
+            : { expr, format: 'number', agg: null });
+    };
+    // `unknown field Price`: the field each name most likely means, offered as a one-tap fix.
+    const unknown = issue?.startsWith('unknown field ')
+        ? issue.slice('unknown field '.length).split(', ')
+        : [];
+    const fixes = unknown.flatMap((name) => {
+        const to = guessField(name, fields);
+        return to ? [{ name, to }] : [];
+    });
+    return (_jsxs("div", { className: row ? 'col-span-full grid gap-3 border-t bg-muted/30 px-3 py-3 md:pl-10' : 'grid gap-3 p-4', children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-label`, children: "Label" }), _jsx(Input, { id: `${id}-label`, value: f.label, onChange: (e) => onChange({ label: e.target.value }) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-key`, children: "Key" }), _jsx(Input, { id: `${id}-key`, className: "font-mono text-xs", value: f.key, onChange: (e) => onChange({ key: e.target.value }) })] })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-expr`, children: "Expression" }), _jsx(FormulaInput, { id: `${id}-expr`, invalid: !!issue, fields: fields, placeholder: 'Type a field: market_value / group_sum("market_value") * 100', value: f.expr, onChange: setExpr }), issue ? (_jsxs("p", { role: "alert", className: "flex flex-wrap items-center gap-1.5 text-xs text-destructive", children: [_jsx(CircleAlertIcon, { className: "size-3.5" }), fixes.length
+                                ? fixes.map(({ name, to }) => (_jsxs("span", { className: "flex items-center gap-1.5", children: ["No field ", name, ". Did you mean ", _jsx("code", { className: "font-mono", children: to.value }), " (", to.label, ")?", _jsxs(Button, { variant: "outline", size: "xs", onClick: () => setExpr(swapWord(f.expr, name, to.value)), children: [_jsx(WandSparklesIcon, {}), "Fix"] })] }, name)))
+                                : issue] })) : blank ? (_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-warning", children: [_jsx(CircleAlertIcon, { className: "size-3.5" }), "Reads fine, but ", blank] })) : (_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-gain", children: [_jsx(CheckIcon, { className: "size-3.5" }), "Reads fine"] }))] }), _jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { children: "Format" }), _jsx(LumenSelector, { label: "Format", size: "sm", className: "w-40", options: [
+                                    ...formatOptions(),
+                                    { value: 'text', label: FORMAT_LABELS.text, detail: FORMAT_EXAMPLES.text },
+                                ], value: shown.format, onChange: (v) => onChange(v === 'text'
+                                    ? { format: v, agg: shownFormula({ ...f, format: v }).agg }
+                                    : { format: v, agg: text ? null : f.agg }) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { children: "Group and Total rows" }), _jsx(LumenSelector, { label: "Group and Total rows", size: "sm", className: "w-40", options: text
+                                    ? [
+                                        { value: 'none', label: 'None' },
+                                        ...TEXT_AGGS.map((a) => ({ value: a, label: AGG_LABELS[a] })),
+                                    ]
+                                    : [
+                                        { value: NO_ROLLUP, label: 'Same formula' },
+                                        ...viewAggs.map((a) => ({ value: a, label: AGG_LABELS[a] })),
+                                        { value: 'none', label: 'None' },
+                                    ], value: shown.agg ?? NO_ROLLUP, onChange: (v) => onChange({ agg: v === NO_ROLLUP ? null : v }) })] }), onRemove && onDone && (_jsxs("div", { className: "ml-auto flex gap-2", children: [_jsx(LumenConfirm, { title: `Remove formula ${f.label || f.key}?`, description: "It leaves this view when you save.", action: "Remove", onConfirm: onRemove, children: _jsx(IconButton, { icon: Trash2Icon, label: "Remove formula", variant: "destructive" }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: onDone, children: [_jsx(CheckIcon, {}), "Done"] })] }))] })] }));
+}

package/dist/view-icons.d.ts

@@ -0,0 +1,20 @@
+import type { ViewIcon, ViewIconName, ViewShape } from '@columenlabs/lumen-ui-types/views';
+import { type LucideIcon } from 'lucide-react';
+import { iconNames } from 'lucide-react/dynamic';
+import type { NavIcon } from './nav.js';
+export declare const VIEW_ICONS: Record<ViewIconName, LucideIcon>;
+/** A view's sidebar icon: its own pick (a lucide name or an emoji), else its shape's. */
+export declare const viewIcon: (config: {
+    icon?: ViewIcon | null;
+    shape: ViewShape;
+}) => NavIcon;
+/** A picked icon (a lucide name or an emoji) as a component; `fallback` when none or unknown. */
+export declare const iconOf: (icon: ViewIcon | null | undefined, fallback: NavIcon) => NavIcon;
+/** Any lucide icon by name, loaded on first use (lucide's own DynamicIcon). */
+export declare const lucideIcon: (name: string) => NavIcon;
+/** An emoji drawn where an icon goes. */
+export declare const emojiIcon: (emoji: string) => NavIcon;
+/** Every lucide icon name, for the icon picker's search. */
+export { iconNames as lucideIconNames };
+/** A shape's own icon (the Edit dialog's Shape picker). */
+export declare const shapeIcon: (shape: ViewShape) => LucideIcon;

package/dist/view-icons.js

@@ -0,0 +1,70 @@
+import { BanknoteIcon, BriefcaseIcon, CalendarIcon, ChartBarIcon, ChartLineIcon, ChartPieIcon, ClockIcon, CoinsIcon, FlameIcon, Grid3x3Icon, LandmarkIcon, LayersIcon, ListTreeIcon, PiggyBankIcon, ReceiptIcon, ShieldIcon, StarIcon, TableIcon, TagIcon, TargetIcon, TrendingDownIcon, TrendingUpIcon, WalletIcon, ZapIcon, } from 'lucide-react';
+import { DynamicIcon, iconNames } from 'lucide-react/dynamic';
+import { createElement } from 'react';
+import { cn } from './lib/utils.js';
+export const VIEW_ICONS = {
+    table: TableIcon,
+    'list-tree': ListTreeIcon,
+    grid: Grid3x3Icon,
+    wallet: WalletIcon,
+    receipt: ReceiptIcon,
+    briefcase: BriefcaseIcon,
+    landmark: LandmarkIcon,
+    'piggy-bank': PiggyBankIcon,
+    banknote: BanknoteIcon,
+    coins: CoinsIcon,
+    'chart-line': ChartLineIcon,
+    'chart-bar': ChartBarIcon,
+    'chart-pie': ChartPieIcon,
+    'trending-up': TrendingUpIcon,
+    'trending-down': TrendingDownIcon,
+    target: TargetIcon,
+    shield: ShieldIcon,
+    star: StarIcon,
+    zap: ZapIcon,
+    flame: FlameIcon,
+    calendar: CalendarIcon,
+    clock: ClockIcon,
+    layers: LayersIcon,
+    tag: TagIcon,
+};
+const SHAPE_ICONS = {
+    table: TableIcon,
+    group: ListTreeIcon,
+    pivot: Grid3x3Icon,
+};
+/** A view's sidebar icon: its own pick (a lucide name or an emoji), else its shape's. */
+export const viewIcon = (config) => iconOf(config.icon, SHAPE_ICONS[config.shape]);
+/** A picked icon (a lucide name or an emoji) as a component; `fallback` when none or unknown. */
+export const iconOf = (icon, fallback) => {
+    if (!icon)
+        return fallback;
+    if (icon in VIEW_ICONS)
+        return VIEW_ICONS[icon];
+    if (/^[a-z]/.test(icon))
+        return lucideNames.has(icon) ? lucideIcon(icon) : fallback;
+    return emojiIcon(icon);
+};
+const lucideNames = new Set(iconNames);
+const made = new Map();
+/** One component per pick, so React keeps it between renders. */
+const once = (key, make) => {
+    let Icon = made.get(key);
+    if (!Icon) {
+        Icon = make();
+        made.set(key, Icon);
+    }
+    return Icon;
+};
+/** Any lucide icon by name, loaded on first use (lucide's own DynamicIcon). */
+export const lucideIcon = (name) => once(`lucide:${name}`, () => (props) => createElement(DynamicIcon, { name: name, ...props }));
+/** An emoji drawn where an icon goes. */
+export const emojiIcon = (emoji) => once(`emoji:${emoji}`, () => ({ className }) => createElement('span', {
+    'aria-hidden': true,
+    'data-slot': 'view-emoji',
+    className: cn('inline-grid size-4 shrink-0 place-items-center text-sm leading-none', className),
+}, emoji));
+/** Every lucide icon name, for the icon picker's search. */
+export { iconNames as lucideIconNames };
+/** A shape's own icon (the Edit dialog's Shape picker). */
+export const shapeIcon = (shape) => SHAPE_ICONS[shape];