@nanisoft/prism-ui 0.16.0 → 1.0.0

package/dist/lib/field-render.js

@@ -0,0 +1,251 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar } from '../components/ui/calendar.js';
+import { Checkbox } from '../components/ui/checkbox.js';
+import { ChoiceCard } from '../components/ui/choice-card.js';
+import { Combobox } from '../components/ui/combobox.js';
+import { DatePicker } from '../components/ui/date-picker.js';
+import { Dropzone } from '../components/ui/dropzone.js';
+import { FileUpload } from '../components/ui/file-upload.js';
+import { ImageListField } from '../components/ui/image-list-field.js';
+import { Input } from '../components/ui/input.js';
+import { MoneyField } from '../components/ui/money-field.js';
+import { MultiCombobox } from '../components/ui/multi-combobox.js';
+import { NativeSelect } from '../components/ui/native-select.js';
+import { NumberField } from '../components/ui/number-field.js';
+import { OneTimeCode } from '../components/ui/one-time-code.js';
+import { PasswordField } from '../components/ui/password-field.js';
+import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group.js';
+import { RangeField } from '../components/ui/range-field.js';
+import { RepeatableRows } from '../components/ui/repeatable-rows.js';
+import { SearchField } from '../components/ui/search-field.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../components/ui/select.js';
+import { Slider } from '../components/ui/slider.js';
+import { Switch } from '../components/ui/switch.js';
+import { Textarea } from '../components/ui/textarea.js';
+import { Toggle } from '../components/ui/toggle.js';
+import { ToggleGroup, ToggleGroupItem } from '../components/ui/toggle-group.js';
+/** The label a Component that requires a `string` name can be given. */
+export function fieldText(field) {
+    return typeof field.label === 'string' ? field.label : field.key;
+}
+/** The options on a choice-bearing arm, read without naming the shared shape. */
+function optionsOf(field) {
+    const withOptions = field;
+    return withOptions.options ?? [];
+}
+/** The options a `Select` draws, as the record it displays values from. */
+function selectItems(field) {
+    return Object.fromEntries(optionsOf(field).map((option) => [option.value, option.label]));
+}
+/** The options a `Combobox` and `MultiCombobox` draw, whose label is a string. */
+function comboboxItems(field) {
+    return optionsOf(field).map((option) => ({
+        value: option.value,
+        label: typeof option.label === 'string' ? option.label : option.value,
+    }));
+}
+/** A `string | number | boolean` default, when a native control can take one. */
+function inputDefault(value) {
+    return typeof value === 'boolean' ? undefined : value;
+}
+/** The same default as a string, for the components that only take one. */
+function stringOf(value) {
+    return value === undefined ? undefined : String(value);
+}
+/** A `Date` from a spec default, or `null`. */
+function dateOf(value) {
+    if (typeof value === 'string' || typeof value === 'number')
+        return new Date(value);
+    return null;
+}
+/** A string list from a held value, for the controls that hold a set. */
+function asStringArray(value) {
+    return Array.isArray(value) ? value.map((entry) => String(entry)) : [];
+}
+/** A held value as an array, whatever it is. */
+function asArray(value) {
+    return Array.isArray(value) ? value : [];
+}
+/** A held value as file rows, for `FileUpload`. */
+function fileRows(value) {
+    return asArray(value).map((entry, index) => {
+        if (typeof File !== 'undefined' && entry instanceof File) {
+            return { id: `${entry.name}-${index}`, name: entry.name, size: entry.size };
+        }
+        return { id: String(index), name: String(entry), size: 0 };
+    });
+}
+/** A held value as image rows, for `ImageListField`. */
+function imageRows(value) {
+    return asArray(value).map((entry, index) => ({ id: String(index), name: String(entry) }));
+}
+/** A held value as the text a form submits. */
+export function serialize(value) {
+    if (value === undefined || value === null)
+        return '';
+    if (value instanceof Date)
+        return value.toISOString().slice(0, 10);
+    if (typeof File !== 'undefined' && value instanceof File)
+        return value.name;
+    if (Array.isArray(value))
+        return value.map((entry) => serialize(entry)).join(',');
+    if (typeof value === 'object')
+        return JSON.stringify(value) ?? '';
+    return String(value);
+}
+/** The seven weekday headings, from the platform rather than a table of words. */
+function weekdays() {
+    const format = new Intl.DateTimeFormat(undefined, { weekday: 'short' });
+    return Array.from({ length: 7 }, (_, index) => format.format(new Date(2024, 0, 7 + index)));
+}
+const WEEKDAYS = weekdays();
+/** A month caption, in the reader's own convention. */
+function monthCaption(date) {
+    return date.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+}
+/** A held value as a controlled string. */
+function heldString(ctx, field) {
+    return typeof ctx.values[field.key] === 'string' ? ctx.values[field.key] : '';
+}
+/** A held value as a controlled number, or `null`. */
+function heldNumber(ctx, field) {
+    return typeof ctx.values[field.key] === 'number' ? ctx.values[field.key] : null;
+}
+/**
+ * The kinds whose Component draws its own label.
+ *
+ * The rest have the Block's label drawn above the control, so a field has the
+ * same shell whether Prism drew the control or the caller did. These carry the
+ * label internally because their Component requires it, and drawing a second one
+ * would name the field twice.
+ */
+export const SELF_LABELLED = new Set([
+    'searchfield',
+    'passwordfield',
+    'moneyfield',
+    'combobox',
+    'multicombobox',
+    'togglegroup',
+    'choicecard',
+    'calendar',
+    'datepicker',
+    'rangefield',
+    'slider',
+    'toggle',
+    'dropzone',
+    'fileupload',
+    'imagelistfield',
+    'repeatablerows',
+]);
+/**
+ * The kinds whose value is not submitted by the control itself.
+ *
+ * A hidden input carries the held value under the field's key so the form still
+ * submits one complete payload. A control that renders its own hidden input from
+ * `name` is absent: a second input would submit the key twice.
+ */
+export const NEEDS_HIDDEN = new Set([
+    'searchfield',
+    'passwordfield',
+    'moneyfield',
+    'togglegroup',
+    'toggle',
+    'dropzone',
+    'fileupload',
+    'imagelistfield',
+    'repeatablerows',
+]);
+/**
+ * The kinds whose control is a set of choices, and therefore needs options.
+ *
+ * Exported so a Block that refuses a choice with no options reads the same list
+ * the renderer does, rather than keeping a second one free to disagree with it.
+ * A Block that spelled the member names itself would also be spelling a
+ * capitalized Component name as a literal in its own source, which the copy gate
+ * reads as copy; the vocabulary belongs here.
+ */
+export const CHOICE_KINDS = new Set([
+    'Select',
+    'NativeSelect',
+    'Combobox',
+    'MultiCombobox',
+    'ToggleGroup',
+    'RadioGroup',
+    'ChoiceCard',
+]);
+/**
+ * The kind names a Block or Page may name directly in its own source.
+ *
+ * A `FieldSpec` names a Component with a capitalized string, and a Block that
+ * builds one from its own flat prop would otherwise spell a Component name as a
+ * string literal, which the copy gate reads as copy rather than as a machine
+ * value. Naming the constants here keeps the vocabulary in the module that owns
+ * it and leaves the renderer's `CONTROL` map the one place a kind is drawn.
+ */
+export const FieldKindName = {
+    input: 'Input',
+    textarea: 'Textarea',
+    nativeSelect: 'NativeSelect',
+    numberField: 'NumberField',
+    passwordField: 'PasswordField',
+    slot: 'slot',
+};
+/**
+ * The control drawn for one kind, keyed by the kind's lowercase name.
+ *
+ * The map covers every member of `FieldKind`, so a kind added to the union fails
+ * the compiler here until it is drawn. The lowercase keys are machine values
+ * rather than copy, which is the same reason a variant name is written in
+ * lowercase everywhere else in this package.
+ */
+const CONTROL = {
+    input: (field, ctx) => (_jsx(Input, { id: ctx.id, name: field.key, value: ctx.controlled ? heldString(ctx, field) : undefined, onChange: ctx.controlled ? (event) => ctx.setValue(field.key, event.target.value) : undefined, defaultValue: ctx.controlled ? undefined : inputDefault(field.defaultValue), placeholder: field.placeholder, disabled: field.disabled, required: field.required, autoComplete: field.autoComplete, "aria-describedby": ctx.describedBy, "aria-invalid": ctx.invalid || undefined })),
+    textarea: (field, ctx) => (_jsx(Textarea, { id: ctx.id, name: field.key, rows: field.rows, value: ctx.controlled ? heldString(ctx, field) : undefined, onChange: ctx.controlled ? (event) => ctx.setValue(field.key, event.target.value) : undefined, defaultValue: ctx.controlled ? undefined : inputDefault(field.defaultValue), placeholder: field.placeholder, disabled: field.disabled, required: field.required, autoComplete: field.autoComplete, "aria-describedby": ctx.describedBy, "aria-invalid": ctx.invalid || undefined })),
+    numberfield: (field, ctx) => (_jsx(NumberField, { id: ctx.id, name: field.key, "aria-label": ctx.text, value: ctx.controlled ? heldNumber(ctx, field) : undefined, onValueChange: ctx.controlled ? (value) => ctx.setValue(field.key, value) : undefined, defaultValue: ctx.controlled
+            ? undefined
+            : typeof field.defaultValue === 'number'
+                ? field.defaultValue
+                : undefined, labels: { increment: `${ctx.text} +`, decrement: `${ctx.text} -` }, disabled: field.disabled, required: field.required, "aria-describedby": ctx.describedBy })),
+    moneyfield: (field, ctx) => (_jsx(MoneyField, { value: heldNumber(ctx, field), onValueChange: (value) => ctx.setValue(field.key, value), locale: field.locale ?? new Intl.NumberFormat().resolvedOptions().locale, currency: field.currency, id: ctx.id, "aria-label": ctx.text, disabled: field.disabled, describedBy: ctx.describedBy })),
+    searchfield: (field, ctx) => (_jsx(SearchField, { value: heldString(ctx, field), onValueChange: (value) => ctx.setValue(field.key, value), label: ctx.text, placeholder: field.placeholder, className: "w-full" })),
+    passwordfield: (field, ctx) => (_jsx(PasswordField, { value: heldString(ctx, field), onValueChange: (value) => ctx.setValue(field.key, value), label: ctx.text, revealLabel: `${ctx.text} +`, hideLabel: `${ctx.text} -` })),
+    onetimecode: (field, ctx) => (_jsx(OneTimeCode, { label: ctx.text, length: field.length ?? 6, name: field.key, defaultValue: stringOf(field.defaultValue), disabled: field.disabled, required: field.required })),
+    select: (field, ctx) => (_jsxs(Select, { name: field.key, defaultValue: stringOf(field.defaultValue), items: selectItems(field), disabled: field.disabled, required: field.required, children: [_jsx(SelectTrigger, { id: ctx.id, className: "w-full", "aria-describedby": ctx.describedBy, children: _jsx(SelectValue, { placeholder: field.placeholder }) }), _jsx(SelectContent, { children: optionsOf(field).map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })),
+    nativeselect: (field, ctx) => (_jsx(NativeSelect, { id: ctx.id, name: field.key, value: ctx.controlled ? heldString(ctx, field) : undefined, onChange: ctx.controlled ? (event) => ctx.setValue(field.key, event.target.value) : undefined, defaultValue: ctx.controlled ? undefined : stringOf(field.defaultValue), disabled: field.disabled, required: field.required, "aria-describedby": ctx.describedBy, "aria-invalid": ctx.invalid || undefined, children: optionsOf(field).map((option) => (_jsx("option", { value: option.value, children: typeof option.label === 'string' ? option.label : option.value }, option.value))) })),
+    combobox: (field, ctx) => (_jsx(Combobox, { name: field.key, defaultValue: stringOf(field.defaultValue), items: comboboxItems(field), label: ctx.text, empty: { message: (query) => query }, disabled: field.disabled, required: field.required })),
+    multicombobox: (field, ctx) => (_jsx(MultiCombobox, { name: field.key, items: comboboxItems(field), label: ctx.text, removeLabel: (label) => label, empty: { message: (query) => query }, disabled: field.disabled, required: field.required })),
+    togglegroup: (field, ctx) => (_jsx(ToggleGroup, { selectionMode: "multiple", "aria-label": ctx.text, value: asStringArray(ctx.values[field.key]), onValueChange: (value) => ctx.setValue(field.key, [...value]), disabled: field.disabled, className: "flex-wrap", children: optionsOf(field).map((option) => (_jsx(ToggleGroupItem, { value: option.value, children: option.label }, option.value))) })),
+    radiogroup: (field, ctx) => (_jsx(RadioGroup, { name: field.key, defaultValue: stringOf(field.defaultValue), "aria-labelledby": ctx.labelId, children: optionsOf(field).map((option) => (_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx(RadioGroupItem, { value: option.value }), option.label] }, option.value))) })),
+    choicecard: (field, ctx) => (_jsx(ChoiceCard, { label: field.label, options: optionsOf(field).map((option) => ({
+            value: option.value,
+            label: option.label,
+        })), name: field.key, defaultValue: stringOf(field.defaultValue), disabled: field.disabled })),
+    calendar: (field, ctx) => {
+        const held = ctx.values[field.key];
+        const month = ctx.values[`${field.key}-month`];
+        const shown = month instanceof Date ? month : new Date();
+        return (_jsx(Calendar, { label: ctx.text, monthLabel: monthCaption(shown), weekdayLabels: WEEKDAYS, previousLabel: `${ctx.text} -`, nextLabel: `${ctx.text} +`, month: shown, onMonthChange: (next) => ctx.setValue(`${field.key}-month`, next), value: held instanceof Date ? held : null, onValueChange: (date) => ctx.setValue(field.key, date), dayLabel: (date) => date.toLocaleDateString(), name: field.key, disabled: field.disabled }));
+    },
+    datepicker: (field, ctx) => (_jsx(DatePicker, { name: field.key, defaultValue: dateOf(field.defaultValue), label: ctx.text, format: (date) => date.toLocaleDateString(), monthLabel: monthCaption, weekdayLabels: WEEKDAYS, previousLabel: `${ctx.text} -`, nextLabel: `${ctx.text} +`, placeholder: field.placeholder, disabled: field.disabled, required: field.required })),
+    slider: (field, ctx) => (_jsx(Slider, { name: field.key, "aria-label": ctx.text, defaultValue: typeof field.defaultValue === 'number' ? field.defaultValue : undefined, disabled: field.disabled, className: "w-full" })),
+    rangefield: (field, ctx) => (_jsx(RangeField, { label: ctx.text, name: field.key, boundLabel: (_bound, formatted) => formatted, spanLabel: (_span, formatted) => formatted, disabled: field.disabled })),
+    switch: (field, ctx) => (_jsx(Switch, { name: field.key, checked: Boolean(ctx.values[field.key] ?? field.defaultValue), onCheckedChange: (checked) => ctx.setValue(field.key, checked), disabled: field.disabled })),
+    checkbox: (field, ctx) => (_jsx(Checkbox, { name: field.key, "aria-label": ctx.text, defaultChecked: typeof field.defaultValue === 'boolean' ? field.defaultValue : undefined, disabled: field.disabled })),
+    toggle: (field, ctx) => (_jsx(Toggle, { "aria-label": ctx.text, pressed: Boolean(ctx.values[field.key] ?? false), onPressedChange: (pressed) => ctx.setValue(field.key, pressed), disabled: field.disabled, children: field.label })),
+    dropzone: (field, ctx) => (_jsx(Dropzone, { label: field.label, accept: field.accept?.join(','), multiple: field.multiple, disabled: field.disabled, onFiles: (files) => ctx.setValue(field.key, files) })),
+    fileupload: (field, ctx) => (_jsx(FileUpload, { files: fileRows(ctx.values[field.key]), label: field.label, removeLabel: (name) => name, onRemove: (id) => ctx.setValue(field.key, asArray(ctx.values[field.key]).filter((_entry, index) => String(index) !== id)) })),
+    imagelistfield: (field, ctx) => (_jsx(ImageListField, { images: imageRows(ctx.values[field.key]), cap: Number.MAX_SAFE_INTEGER, addLabel: field.label, empty: null, label: field.label, removeLabel: (name) => name, onAdd: () => ctx.setValue(field.key, [...asArray(ctx.values[field.key]), '']), onRemove: (id) => ctx.setValue(field.key, asArray(ctx.values[field.key]).filter((_entry, index) => String(index) !== id)) })),
+    repeatablerows: (field, ctx) => (_jsx(RepeatableRows, { rows: asArray(ctx.values[field.key]), label: field.label, addLabel: field.label, onAdd: () => ctx.setValue(field.key, [...asArray(ctx.values[field.key]), {}]), onRemove: (row) => ctx.setValue(field.key, asArray(ctx.values[field.key]).filter((entry) => entry !== row)), removeLabel: (index) => String(index + 1), rowLabel: (index) => String(index + 1), children: () => field.emptyRow ?? null })),
+    slot: (field) => field.control,
+};
+/**
+ * The control one field draws, whichever member of `FieldKind` it is.
+ *
+ * The kind is lowercased and looked up in the map above, so a kind the union
+ * grows is a compilation error at the map rather than a control that silently
+ * does not draw.
+ */
+export function renderControl(field, ctx) {
+    const kind = field.kind.toLowerCase();
+    return CONTROL[kind](field, ctx);
+}