@coffer-org/web-ui 4.0.0

package/dist/render/core/range.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Input } from "../../components/ui/input.js";
+import { registerRenderer } from "../../registry.js";
+import { partValueKeys } from '@coffer-org/sdk/fields';
+import { FieldFrame } from "../field-frame.js";
+import { Dash } from "../shared.js";
+function rangeSlots(field) {
+    const slots = partValueKeys(field.parts ?? []);
+    return { fromKey: slots['from'] ?? 'from', toKey: slots['to'] ?? 'to' };
+}
+function parseRange(v, field) {
+    const { fromKey, toKey } = rangeSlots(field);
+    const obj = v && typeof v === 'object'
+        ? v
+        : (() => {
+            try {
+                const o = JSON.parse(String(v ?? ''));
+                return o && typeof o === 'object' ? o : null;
+            }
+            catch {
+                return null;
+            }
+        })();
+    if (!obj)
+        return {};
+    return { from: obj[fromKey], to: obj[toKey] };
+}
+function RangeInput({ field, value, onChange, }) {
+    const r = useMemo(() => parseRange(value, field), [value, field]);
+    const h = field.hints;
+    const num = (s) => (s === '' ? undefined : Number(s));
+    const { fromKey, toKey } = rangeSlots(field);
+    const fromPart = field.parts?.find((p) => p.role === 'from');
+    const fromFixed = fromPart != null && fromPart.mode !== 'stored';
+    const toPart = field.parts?.find((p) => p.role === 'to');
+    const toFixed = toPart != null && toPart.mode !== 'stored';
+    const set = (next) => onChange(next.from == null && next.to == null
+        ? ''
+        : { [fromKey]: next.from, [toKey]: next.to });
+    return (_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [fromFixed ? (_jsx("div", { className: "flex flex-1 min-w-0 items-center rounded-lg border border-transparent px-3 text-sm text-muted", children: r.from ?? _jsx(Dash, {}) })) : (_jsx(Input, { type: "number", className: "flex-1 min-w-0", placeholder: "\u0432\u0456\u0434", value: r.from ?? '', min: h.min, max: h.max, step: h.step, onChange: (e) => set({ from: num(e.target.value), to: r.to }) })), _jsx("span", { className: "text-muted", children: "\u2013" }), toFixed ? (_jsx("div", { className: "flex flex-1 min-w-0 items-center rounded-lg border border-transparent px-3 text-sm text-muted", children: r.to ?? _jsx(Dash, {}) })) : (_jsx(Input, { type: "number", className: "flex-1 min-w-0", placeholder: "\u0434\u043E", value: r.to ?? '', min: h.min, max: h.max, step: h.step, onChange: (e) => set({ from: r.from, to: num(e.target.value) }) }))] }));
+}
+function RangeView({ value, field }) {
+    const r = parseRange(value, field);
+    if (r.from == null && r.to == null)
+        return _jsx(Dash, {});
+    return (_jsxs("span", { className: "tabular-nums", children: [r.from ?? '…', "\u2013", r.to ?? '…'] }));
+}
+function RangePage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-48", bare: p.bare, view: (v) => _jsx(RangeView, { value: v, field: p.field }), edit: (value, onChange) => (_jsx(RangeInput, { field: p.field, value: value, onChange: onChange })) }));
+}
+function RangeInline({ value, field }) {
+    return _jsx(RangeView, { value: value, field: field });
+}
+registerRenderer({ kinds: ['numberRange', 'realRange'], Page: RangePage, Inline: RangeInline });

package/dist/render/core/reminder.d.ts

@@ -0,0 +1,2 @@
+export type Tone = 'overdue' | 'today' | 'soon' | 'neutral';
+export declare function reminderTone(value: string, lead: number, today?: string): Tone;

package/dist/render/core/reminder.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Input } from "../../components/ui/input.js";
+import { registerRenderer } from "../../registry.js";
+import { DatePickerBody } from "./datetime.js";
+import { isoToDisplay } from "../../lib/date-format.js";
+import { FieldFrame } from "../field-frame.js";
+import { Dash } from "../shared.js";
+function todayISO() {
+    return new Date().toISOString().slice(0, 10);
+}
+function daysBetween(a, b) {
+    return Math.round((Date.parse(a) - Date.parse(b)) / 86_400_000);
+}
+export function reminderTone(value, lead, today = todayISO()) {
+    if (!value)
+        return 'neutral';
+    const diff = daysBetween(value, today);
+    if (diff < 0)
+        return 'overdue';
+    if (diff === 0)
+        return 'today';
+    if (diff <= lead)
+        return 'soon';
+    return 'neutral';
+}
+const TONE_CLS = {
+    overdue: 'text-red-600',
+    today: 'text-primary font-medium',
+    soon: 'text-amber-600',
+    neutral: '',
+};
+function ReminderView({ field, value }) {
+    const { t } = useTranslation();
+    const s = String(value ?? '');
+    if (!s)
+        return _jsx(Dash, {});
+    const lead = field.hints['lead'] ?? 30;
+    const tone = reminderTone(s, lead);
+    const diff = daysBetween(s, todayISO());
+    const note = tone === 'today'
+        ? t('reminder.today')
+        : tone === 'overdue'
+            ? t('reminder.overdue', { days: Math.abs(diff) })
+            : tone === 'soon'
+                ? t('reminder.inDays', { days: diff })
+                : null;
+    return (_jsxs("span", { className: `tabular-nums ${TONE_CLS[tone]}`, children: [isoToDisplay(s), note ? _jsx("span", { className: "ml-2 text-xs", children: note }) : null] }));
+}
+function ReminderPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-40", bare: p.bare, view: (v) => _jsx(ReminderView, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(Input, { type: "date", value: String(value ?? ''), onChange: (e) => onChange(e.target.value) })) }));
+}
+function ReminderInline({ field, value }) {
+    return _jsx(ReminderView, { field: field, value: value });
+}
+registerRenderer({ kinds: ['reminder'], Page: ReminderPage, Inline: ReminderInline, Picker: DatePickerBody });

package/dist/render/core/source.d.ts

@@ -0,0 +1,3 @@
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export declare function sourceFileName(label: string | undefined, ext: string): string;
+export declare function sourceDisplayName(field: FieldMeta, label: string | undefined, ext: string): string;

package/dist/render/core/source.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FileCode, FileX, Download } from 'lucide-react';
+import { Button } from "../../components/ui/button.js";
+import { registerRenderer } from "../../registry.js";
+import { useTranslation, UploadButton, Dash } from "../shared.js";
+import { FieldFrame } from "../field-frame.js";
+export function sourceFileName(label, ext) {
+    const base = (label ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^\p{L}\p{N}.-]+/gu, '-')
+        .replace(/^-+|-+$/g, '');
+    return `${base || 'file'}.${ext}`;
+}
+export function sourceDisplayName(field, label, ext) {
+    const key = field.hints['fileName'];
+    if (typeof key === 'string' && key !== '')
+        return `${key}.${ext}`;
+    return sourceFileName(label, ext);
+}
+function textOf(value) {
+    return typeof value === 'string' ? value : '';
+}
+function SourceCard({ field, label, value, onChange, }) {
+    const { t } = useTranslation();
+    const [busy, setBusy] = useState(false);
+    const ext = field.hints['ext'] ?? 'txt';
+    const name = sourceDisplayName(field, label ?? field.label, ext);
+    const content = textOf(value);
+    const filled = content.length > 0;
+    const pick = async (file) => {
+        if (!file)
+            return;
+        setBusy(true);
+        try {
+            const text = await file.text();
+            await onChange?.(text);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const download = () => {
+        const url = URL.createObjectURL(new Blob([content], { type: 'text/plain;charset=utf-8' }));
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = name;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 0);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border px-3 py-2", children: [filled ? (_jsx(FileCode, { size: 16, className: "shrink-0 text-muted" })) : (_jsx(FileX, { size: 16, className: "shrink-0 text-muted" })), _jsx("span", { className: "min-w-0 flex-1 truncate text-sm", children: filled ? name : t('source.empty') }), _jsx(Button, { type: "button", variant: "ghost", size: "iconSm", disabled: !filled, onClick: download, title: t('source.download'), "aria-label": t('source.download'), children: _jsx(Download, { size: 15 }) })] }), _jsx(UploadButton, { accept: `.${ext},text/*`, busy: busy, error: null, onPick: (f) => void pick(f), compact: true })] }));
+}
+function SourcePage(p) {
+    const card = (value, onChange) => (_jsx(SourceCard, { field: p.field, label: p.label, value: value, onChange: onChange }));
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "none", bare: p.bare, view: (v, commit) => card(v, commit), edit: (v, onChange) => card(v, onChange) }));
+}
+function SourceInline({ field, value }) {
+    const { t } = useTranslation();
+    const ext = field.hints['ext'] ?? 'txt';
+    if (!textOf(value))
+        return _jsx(Dash, {});
+    return _jsx("span", { className: "truncate font-mono text-xs", children: sourceDisplayName(field, t(field.label), ext) });
+}
+registerRenderer({ kinds: ['source'], layout: 'scalar', Page: SourcePage, Inline: SourceInline });

package/dist/render/core/stepper.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/render/core/stepper.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../components/Icon.js";
+import { optionLabel } from "../../lib/format.js";
+import { FieldFrame } from "../field-frame.js";
+import { OptionValue, OptionInput, fieldOptions } from "../option-value.js";
+import { useTranslation } from "../shared.js";
+function stand(field, value) {
+    const v = String(value ?? '');
+    const options = fieldOptions(field);
+    if (!options.length)
+        return { state: 'unlisted', value: v };
+    if (v === '')
+        return { state: 'empty' };
+    const index = options.findIndex((o) => o.value === v);
+    return index === -1 ? { state: 'unknown', value: v } : { state: 'reached', index };
+}
+function UnknownStage({ value }) {
+    const { t } = useTranslation();
+    return (_jsxs("span", { className: "inline-flex min-w-0 flex-wrap items-center gap-1.5 text-danger", "data-testid": "stepper-unknown", children: [_jsx(Icon, { name: "lucide:alert-triangle", size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-pre font-mono text-[13px]", children: value }), _jsx("span", { className: "text-xs", children: t('form.unknownStage', 'Stage not in the list') })] }));
+}
+function UnlistedStage({ value }) {
+    if (value === '')
+        return _jsx("span", { className: "text-muted", children: "\u2014" });
+    return (_jsx("span", { className: "inline-block max-w-full overflow-hidden text-ellipsis whitespace-pre align-bottom", "data-testid": "stepper-unlisted", children: value }));
+}
+function StepperRail({ field, value }) {
+    const { t } = useTranslation();
+    const s = stand(field, value);
+    if (s.state === 'unlisted')
+        return _jsx(UnlistedStage, { value: s.value });
+    if (s.state === 'unknown')
+        return _jsx(UnknownStage, { value: s.value });
+    const options = fieldOptions(field);
+    const reached = s.state === 'reached' ? s.index : -1;
+    return (_jsx("ol", { className: "flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1.5", "data-testid": "stepper-rail", children: options.map((o, i) => {
+            const state = i < reached ? 'passed' : i === reached ? 'current' : 'remaining';
+            return (_jsxs("li", { className: "flex min-w-0 items-center gap-1", children: [i > 0 && _jsx("span", { "aria-hidden": true, className: "h-px w-2 shrink-0 bg-border" }), _jsx("span", { "data-testid": `stepper-stage-${state}`, "data-stage": o.value, className: cn('min-w-0 truncate rounded-full border px-2 py-0.5 text-[11px] leading-4', state === 'passed' && 'border-accent bg-accent text-accent-foreground', state === 'current' &&
+                            'border-accent bg-accent text-accent-foreground font-semibold ring-1 ring-accent2', state === 'remaining' && 'border-border text-muted'), children: t(o.title) })] }, o.value));
+        }) }));
+}
+function StepperValue({ field, value }) {
+    const s = stand(field, value);
+    if (s.state === 'unknown')
+        return _jsx(UnknownStage, { value: s.value });
+    return _jsx(OptionValue, { field: field, value: value });
+}
+function StepperPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "none", width: "w-full", bare: p.bare, view: (v) => _jsx(StepperRail, { field: p.field, value: v }), edit: (v, onChange) => (_jsx(OptionInput, { field: p.field, value: v, onChange: onChange, offered: p.selectOptions })) }));
+}
+function StepperInline({ field, value }) {
+    const { t } = useTranslation();
+    const s = stand(field, value);
+    if (s.state === 'unlisted')
+        return _jsx(UnlistedStage, { value: s.value });
+    if (s.state === 'empty')
+        return _jsx("span", { className: "truncate", children: "\u2014" });
+    if (s.state === 'unknown')
+        return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1 text-danger", "data-testid": "stepper-inline-unknown", children: [_jsx(Icon, { name: "lucide:alert-triangle", size: 13, className: "shrink-0" }), _jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-pre font-mono", children: s.value })] }));
+    const total = fieldOptions(field).length;
+    return (_jsxs("span", { className: "truncate", children: [optionLabel(t, field, value), " ", _jsx("span", { className: "text-muted text-xs", children: `${s.index + 1}/${total}` })] }));
+}
+function stepperKeys(value, field, ctx) {
+    if (value == null || value === '')
+        return [];
+    const s = stand(field, value);
+    const code = String(value);
+    const label = optionLabel(ctx.t, field, code);
+    const sort = s.state === 'reached' ? String(s.index).padStart(3, '0') : s.state === 'unlisted' ? label : `999${code}`;
+    return [{ value: code, rawValue: value, label, sort }];
+}
+registerRenderer({
+    kinds: ['stepper'],
+    layout: 'block',
+    Page: StepperPage,
+    Inline: StepperInline,
+    Value: StepperValue,
+    editor: 'popover',
+    keys: stepperKeys,
+});

package/dist/render/core/storage-group.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/render/core/storage-group.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNamedField } from '@coffer-org/sdk/fields';
+import { registerRenderer } from "../../registry.js";
+import { GroupField } from "../widgets/group-field.js";
+import { FieldCell } from "../dispatch.js";
+import { useSlot } from "../slot.js";
+function CollectionPage({ el, value, recordCtx, mode }) {
+    const { write } = useSlot();
+    return (_jsx(GroupField, { group: el, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode === 'view' ? 'view' : 'edit' }));
+}
+function EmbeddedPage({ el, value, recordCtx, mode }) {
+    const { write } = useSlot();
+    return (_jsx(GroupField, { group: el, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode === 'view' ? 'view' : 'edit' }));
+}
+function CollectionValue({ el, value }) {
+    const group = el;
+    const row = (value && typeof value === 'object' ? value : {});
+    const subs = (group?.fields ?? []).filter((f) => isNamedField(f));
+    if (!subs.length)
+        return null;
+    return (_jsx("span", { className: "inline-flex min-w-0 items-center gap-2", children: subs.map((f) => (_jsx(FieldCell, { field: f.type, value: row[f.key] }, f.key))) }));
+}
+registerRenderer({
+    kinds: ['collection'],
+    layout: 'block',
+    Page: CollectionPage,
+    Value: CollectionValue,
+    editor: 'custom',
+});
+registerRenderer({ kinds: ['embedded'], layout: 'block', Page: EmbeddedPage, editor: 'custom' });

package/dist/render/core/text.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+interface FieldInputProps {
+    name: string;
+    field: FieldMeta;
+    value: string;
+    onChange: (v: string) => void;
+    selectOptions?: import('@coffer-org/sdk/fields').OptionItem[];
+    excludeValues?: string[];
+}
+interface MultiCapableInputProps extends Omit<FieldInputProps, 'value'> {
+    value: string | string[];
+}
+export declare function ColorInput({ value, onChange, field }: MultiCapableInputProps): React.JSX.Element;
+export {};