@vertebr/react 0.2.0 → 0.3.0

package/dist/components/config/ImagePickerModal.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ImageUploadControl } from "../resources/ImageUploadControl";
+export function ImagePickerModal({ recordImages = [], galleryUpload, onListGallery, onUploadGallery, onClose, onInsert, }) {
+    const hasGallery = Boolean(onListGallery);
+    const [tab, setTab] = useState(recordImages.length ? "record" : "gallery");
+    const [gallery, setGallery] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [selected, setSelected] = useState({});
+    const [url, setUrl] = useState("");
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previous;
+        };
+    }, [onClose]);
+    useEffect(() => {
+        if (!hasGallery)
+            return;
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        void onListGallery()
+            .then((items) => {
+            if (!cancelled)
+                setGallery(items);
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setError(err instanceof Error ? err.message : "Could not load gallery");
+            }
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [hasGallery, onListGallery]);
+    const recordTiles = useMemo(() => recordImages.map((image) => ({
+        id: `record:${image.id}`,
+        url: image.url,
+        name: image.name,
+        source: "record",
+    })), [recordImages]);
+    const galleryTiles = useMemo(() => gallery.map((item) => ({
+        id: `gallery:${item.id}`,
+        url: item.url,
+        name: item.name ?? item.id,
+        source: "gallery",
+    })), [gallery]);
+    const tiles = tab === "record" ? recordTiles : galleryTiles;
+    const picked = Object.values(selected);
+    const canGalleryUpload = Boolean(galleryUpload && onUploadGallery);
+    const toggle = (image) => {
+        setSelected((current) => {
+            const next = { ...current };
+            if (next[image.id])
+                delete next[image.id];
+            else
+                next[image.id] = image;
+            return next;
+        });
+    };
+    const addUrl = () => {
+        const href = url.trim();
+        if (!href)
+            return;
+        const image = {
+            id: `url:${href}`,
+            url: href,
+            name: "Image",
+            source: "url",
+        };
+        setSelected((current) => ({ ...current, [image.id]: image }));
+        setUrl("");
+    };
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal", role: "dialog", "aria-modal": "true", "aria-label": "Insert images", onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: "Media" }), _jsx("h2", { children: "Insert images" })] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, children: "Close" })] }), _jsxs("div", { className: "vertebr-modal-body vertebr-picker-body", children: [recordImages.length > 0 && hasGallery ? (_jsxs("div", { className: "vertebr-picker-tabs", role: "tablist", children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "record", "data-active": tab === "record" || undefined, onClick: () => setTab("record"), children: ["Product photos", _jsx("span", { children: recordTiles.length })] }), _jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "gallery", "data-active": tab === "gallery" || undefined, onClick: () => setTab("gallery"), children: ["Gallery", _jsx("span", { children: loading ? "…" : galleryTiles.length })] })] })) : null, tab === "gallery" && canGalleryUpload ? (_jsx(ImageUploadControl, { meta: {
+                                field: "gallery",
+                                accept: galleryUpload.accept,
+                                maxBytes: galleryUpload.maxBytes,
+                            }, multiple: true, label: "Drop images to add them to the gallery", onUpload: async (files) => {
+                                const items = await onUploadGallery(files);
+                                setGallery((current) => [...items, ...current]);
+                                setSelected((current) => {
+                                    const next = { ...current };
+                                    for (const item of items) {
+                                        const image = {
+                                            id: `gallery:${item.id}`,
+                                            url: item.url,
+                                            name: item.name ?? item.id,
+                                            source: "gallery",
+                                        };
+                                        next[image.id] = image;
+                                    }
+                                    return next;
+                                });
+                            } })) : null, _jsxs("label", { className: "vertebr-field", children: [_jsx("span", { children: "Or paste an image URL" }), _jsxs("div", { className: "vertebr-picker-url", children: [_jsx("input", { type: "url", value: url, placeholder: "https://", onChange: (event) => setUrl(event.target.value), onKeyDown: (event) => {
+                                                if (event.key === "Enter") {
+                                                    event.preventDefault();
+                                                    addUrl();
+                                                }
+                                            } }), _jsx("button", { type: "button", className: "vertebr-btn", disabled: !url.trim(), onClick: addUrl, children: "Add" })] })] }), error ? (_jsx("p", { className: "vertebr-status", "data-tone": "danger", children: error })) : null, loading && tab === "gallery" ? (_jsx("div", { className: "vertebr-empty", children: "Loading gallery\u2026" })) : tiles.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: tab === "record"
+                                ? "No product photos on this record yet."
+                                : hasGallery
+                                    ? "No images in the gallery yet."
+                                    : "No gallery is configured. Paste a URL or add product photos." })) : (_jsx("div", { className: "vertebr-picker-grid", children: tiles.map((image) => {
+                                const active = Boolean(selected[image.id]);
+                                return (_jsxs("button", { type: "button", className: "vertebr-picker-tile", "data-selected": active || undefined, onClick: () => toggle(image), children: [_jsx("span", { className: "vertebr-picker-thumb", children: _jsx("img", { src: image.url, alt: "" }) }), _jsx("span", { className: "vertebr-picker-name", children: image.name })] }, image.id));
+                            }) }))] }), _jsxs("footer", { className: "vertebr-picker-foot", children: [_jsxs("span", { className: "vertebr-picker-count", children: [picked.length, " selected"] }), _jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: picked.length === 0, onClick: () => onInsert(picked), children: ["Insert ", picked.length || "", picked.length === 1 ? " image" : " images"] })] })] }) }));
+}

package/dist/components/config/PriceInput.d.ts

@@ -0,0 +1,12 @@
+export type PriceInputProps = {
+    id: string;
+    name?: string;
+    value: unknown;
+    asCents?: boolean;
+    readOnly?: boolean;
+    onBlur?: () => void;
+    onChange: (next: number | undefined) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
+};
+export declare function PriceInput({ id, name, value, asCents, readOnly, onBlur, onChange, inputRef, }: PriceInputProps): import("react").JSX.Element;
+//# sourceMappingURL=PriceInput.d.ts.map

package/dist/components/config/PriceInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/PriceInput.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,OAAc,EACd,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,+BAwCjB"}

package/dist/components/config/PriceInput.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { formatPrice, formatPriceInput, parsePriceInput, } from "../../lib/price";
+export function PriceInput({ id, name, value, asCents = true, readOnly, onBlur, onChange, inputRef, }) {
+    const [draft, setDraft] = useState(() => formatPriceInput(value, asCents));
+    useEffect(() => {
+        setDraft(formatPriceInput(value, asCents));
+    }, [value, asCents]);
+    const preview = typeof value === "number" && Number.isFinite(value)
+        ? formatPrice(value, { asCents })
+        : null;
+    return (_jsxs("div", { className: "vertebr-field-money", children: [_jsx("span", { className: "vertebr-field-money-prefix", "aria-hidden": "true", children: "$" }), _jsx("input", { id: id, name: name, ref: inputRef, type: "text", inputMode: "decimal", autoComplete: "off", readOnly: readOnly, value: draft, placeholder: "0.00", "aria-label": preview ? `Price ${preview}` : "Price", onChange: (event) => {
+                    const next = event.target.value;
+                    setDraft(next);
+                    onChange(parsePriceInput(next, asCents));
+                }, onBlur: () => {
+                    setDraft(formatPriceInput(value, asCents));
+                    onBlur?.();
+                } })] }));
+}

package/dist/components/config/form/ConfigField.d.ts

@@ -0,0 +1,21 @@
+import { type UseFormReturn } from "react-hook-form";
+import type { FieldSchema, ResourceUploadMeta } from "@vertebr/client";
+import type { ConfigFormVariant, GalleryHandlers } from "./types";
+export type ConfigFieldProps = GalleryHandlers & {
+    fieldKey: string;
+    field: FieldSchema;
+    groupLabel: string;
+    variant: ConfigFormVariant;
+    schema: Record<string, FieldSchema>;
+    watched: Record<string, unknown>;
+    form: UseFormReturn<Record<string, unknown>>;
+    uploads?: Record<string, ResourceUploadMeta>;
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    hideImagePreview?: boolean;
+    hideUpload?: boolean;
+};
+export declare function ConfigField({ fieldKey, field, groupLabel, variant, schema, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, hideImagePreview, hideUpload, }: ConfigFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=ConfigField.d.ts.map

package/dist/components/config/form/ConfigField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigField.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAYvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,UAAU,GACX,EAAE,gBAAgB,+BA0LlB"}

package/dist/components/config/form/ConfigField.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import * as Label from "@radix-ui/react-label";
+import * as Switch from "@radix-ui/react-switch";
+import { isDescriptionField } from "../../../lib/description";
+import { collectRecordImages, isImageField, urlsFromValue, } from "../../../lib/images";
+import { isCentsField, isPriceField } from "../../../lib/price";
+import { ImageUploadControl } from "../../resources/ImageUploadControl";
+import { DescriptionInput } from "../DescriptionInput";
+import { PriceInput } from "../PriceInput";
+import { displayLabel, firstImageUrl, spanFor } from "./helpers";
+export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, hideImagePreview, hideUpload, }) {
+    const label = displayLabel(fieldKey, field, groupLabel);
+    const showInlinePreview = !hideImagePreview &&
+        field.type !== "file[]" &&
+        isImageField(fieldKey, field) &&
+        Boolean(firstImageUrl(watched?.[fieldKey]));
+    if (field.type === "boolean") {
+        return (_jsxs("div", { className: "vertebr-switch-row", children: [_jsx(Label.Root, { htmlFor: fieldKey, children: label }), _jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(Switch.Root, { className: "vertebr-switch", id: fieldKey, checked: Boolean(controllerField.value), onCheckedChange: controllerField.onChange, children: _jsx(Switch.Thumb, { className: "vertebr-switch-thumb" }) })) })] }));
+    }
+    return (_jsxs("div", { className: "vertebr-field", "data-span": spanFor(fieldKey, field, variant), "data-kind": isImageField(fieldKey, field) ? "image" : undefined, children: [_jsx(Label.Root, { htmlFor: fieldKey, children: label }), showInlinePreview ? (_jsxs("div", { className: "vertebr-field-media", children: [_jsx("img", { src: firstImageUrl(watched[fieldKey]) ?? "", alt: "" }), _jsx("input", { id: fieldKey, type: "text", readOnly: field.readOnly, ...form.register(fieldKey) })] })) : field.type === "richtext" || isDescriptionField(fieldKey, field) ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(DescriptionInput, { id: fieldKey, name: controllerField.name, inputRef: controllerField.ref, value: typeof controllerField.value === "string"
+                        ? controllerField.value
+                        : "", readOnly: field.readOnly, recordImages: collectRecordImages(schema, watched), galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onBlur: controllerField.onBlur, onChange: controllerField.onChange })) })) : field.type === "file[]" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => {
+                    const urls = urlsFromValue(controllerField.value);
+                    return (_jsx("div", { className: "vertebr-field-files", children: urls.length > 0 ? (_jsx("ul", { className: "vertebr-field-files-list", children: urls.map((url) => (_jsxs("li", { children: [_jsx("img", { src: url, alt: "" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => controllerField.onChange(urls.filter((item) => item !== url)), children: "Remove" })] }, url))) })) : (_jsx("p", { className: "vertebr-field-files-empty", children: "No photos yet" })) }));
+                } })) : field.type === "number" && isPriceField(fieldKey, field) ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(PriceInput, { id: fieldKey, name: controllerField.name, inputRef: controllerField.ref, value: controllerField.value, asCents: isCentsField(fieldKey, field) || /^pricing$/i.test(groupLabel), readOnly: field.readOnly, onBlur: controllerField.onBlur, onChange: controllerField.onChange })) })) : field.type === "number" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx("input", { id: fieldKey, type: "number", readOnly: field.readOnly, value: typeof controllerField.value === "number" &&
+                        Number.isFinite(controllerField.value)
+                        ? controllerField.value
+                        : "", onBlur: controllerField.onBlur, onChange: (event) => {
+                        const next = event.target.value;
+                        controllerField.onChange(next === "" ? undefined : Number(next));
+                    }, name: controllerField.name, ref: controllerField.ref })) })) : (_jsx("input", { id: fieldKey, type: "text", readOnly: field.readOnly, ...form.register(fieldKey) })), !hideUpload && uploads?.[fieldKey] && onUpload && !field.readOnly ? (_jsx(ImageUploadControl, { meta: uploads[fieldKey], multiple: field.type === "file[]", onUpload: async (files) => {
+                    const uploaded = await onUpload(fieldKey, files);
+                    const urls = uploaded
+                        .map((item) => item.url)
+                        .filter(Boolean);
+                    if (!urls.length)
+                        return;
+                    if (field.type === "file[]") {
+                        form.setValue(fieldKey, [...urlsFromValue(form.getValues(fieldKey)), ...urls], { shouldDirty: true, shouldTouch: true });
+                        return;
+                    }
+                    form.setValue(fieldKey, urls[0], {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                    });
+                } })) : null] }));
+}

package/dist/components/config/form/ConfigForm.d.ts

@@ -0,0 +1,4 @@
+import type { ConfigFormProps } from "./types";
+export type { ConfigFormProps, ConfigFormVariant } from "./types";
+export declare function ConfigForm({ schema, value, onSave, variant, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, }: ConfigFormProps): import("react").JSX.Element;
+//# sourceMappingURL=ConfigForm.d.ts.map

package/dist/components/config/form/ConfigForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigForm.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAElE,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAkB,EAClB,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,eAAe,+BA0EjB"}

package/dist/components/config/form/ConfigForm.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { buildZodSchema, groupFields } from "./helpers";
+import { RecordConfigForm } from "./RecordConfigForm";
+import { SettingsConfigForm } from "./SettingsConfigForm";
+export function ConfigForm({ schema, value, onSave, variant = "config", uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, }) {
+    const zodSchema = useMemo(() => buildZodSchema(schema), [schema]);
+    const groups = useMemo(() => groupFields(schema, variant), [schema, variant]);
+    const [status, setStatus] = useState(null);
+    const [tone, setTone] = useState();
+    const form = useForm({
+        resolver: zodResolver(zodSchema),
+        defaultValues: value,
+    });
+    const watched = useWatch({ control: form.control });
+    useEffect(() => {
+        form.reset(value);
+    }, [value, form]);
+    const onSubmit = form.handleSubmit(async (data) => {
+        setStatus("Saving…");
+        setTone(undefined);
+        try {
+            await onSave(data);
+            setStatus("Saved");
+            setTone("ok");
+        }
+        catch (error) {
+            setStatus(error instanceof Error ? error.message : "Save failed");
+            setTone("danger");
+        }
+    });
+    const isDirty = form.formState.isDirty;
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+                event.preventDefault();
+                void onSubmit();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [onSubmit]);
+    const onDiscard = () => {
+        form.reset(value);
+        setStatus(null);
+        setTone(undefined);
+    };
+    const shared = {
+        schema,
+        groups,
+        watched,
+        form,
+        uploads,
+        onUpload,
+        galleryUpload,
+        onListGallery,
+        onUploadGallery,
+        onSubmit,
+        isDirty,
+        status,
+        tone,
+        onDiscard,
+    };
+    if (variant === "record") {
+        return _jsx(RecordConfigForm, { ...shared });
+    }
+    return _jsx(SettingsConfigForm, { ...shared });
+}

package/dist/components/config/form/ConfigFormActions.d.ts

@@ -0,0 +1,10 @@
+import type { UseFormReturn } from "react-hook-form";
+export type ConfigFormActionsProps = {
+    form: UseFormReturn<Record<string, unknown>>;
+    isDirty: boolean;
+    status: string | null;
+    tone?: "ok" | "danger";
+    onDiscard: () => void;
+};
+export declare function ConfigFormActions({ form, isDirty, status, tone, onDiscard, }: ConfigFormActionsProps): import("react").JSX.Element;
+//# sourceMappingURL=ConfigFormActions.d.ts.map

package/dist/components/config/form/ConfigFormActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigFormActions.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigFormActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,GACV,EAAE,sBAAsB,+BA0BxB"}

package/dist/components/config/form/ConfigFormActions.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ConfigFormActions({ form, isDirty, status, tone, onDiscard, }) {
+    return (_jsxs("div", { className: "vertebr-actions", children: [_jsx("button", { className: "vertebr-btn vertebr-btn-primary", type: "submit", disabled: form.formState.isSubmitting || !isDirty, children: form.formState.isSubmitting ? "Saving…" : "Save changes" }), isDirty ? (_jsx("button", { className: "vertebr-btn", type: "button", onClick: onDiscard, children: "Discard" })) : null, isDirty ? (_jsx("span", { className: "vertebr-dirty", children: "Unsaved" })) : status ? (_jsx("span", { className: "vertebr-status", "data-tone": tone, children: status })) : null, _jsx("span", { className: "vertebr-actions-spacer" }), _jsx("span", { className: "vertebr-kbd", children: "\u2318S" })] }));
+}

package/dist/components/config/form/RecordConfigForm.d.ts

@@ -0,0 +1,21 @@
+import type { UseFormReturn } from "react-hook-form";
+import type { FieldSchema, ResourceUploadMeta } from "@vertebr/client";
+import type { FieldGroup, GalleryHandlers } from "./types";
+export type RecordConfigFormProps = GalleryHandlers & {
+    schema: Record<string, FieldSchema>;
+    groups: FieldGroup[];
+    watched: Record<string, unknown>;
+    form: UseFormReturn<Record<string, unknown>>;
+    uploads?: Record<string, ResourceUploadMeta>;
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    isDirty: boolean;
+    status: string | null;
+    tone?: "ok" | "danger";
+    onDiscard: () => void;
+};
+export declare function RecordConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, }: RecordConfigFormProps): import("react").JSX.Element;
+//# sourceMappingURL=RecordConfigForm.d.ts.map

package/dist/components/config/form/RecordConfigForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/RecordConfigForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAUvE,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG;IACpD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,GACV,EAAE,qBAAqB,+BA4HvB"}

package/dist/components/config/form/RecordConfigForm.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { looksLikeUrl } from "../../../lib/images";
+import { ImageUploadControl } from "../../resources/ImageUploadControl";
+import { ConfigField } from "./ConfigField";
+import { ConfigFormActions } from "./ConfigFormActions";
+import { findPrimaryImageKey, firstImageUrl, isStockField, } from "./helpers";
+export function RecordConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, }) {
+    const imageKey = findPrimaryImageKey(schema, watched);
+    const imageValue = imageKey ? firstImageUrl(watched?.[imageKey]) ?? "" : "";
+    const asideGroups = groups.filter((group) => /^(Media|Status)$/i.test(group.id));
+    const mainGroups = groups.filter((group) => !/^(Media|Status)$/i.test(group.id));
+    const fieldProps = {
+        variant: "record",
+        schema,
+        watched,
+        form,
+        uploads,
+        onUpload,
+        galleryUpload,
+        onListGallery,
+        onUploadGallery,
+    };
+    return (_jsxs("form", { className: "vertebr-form", "data-variant": "record", onSubmit: onSubmit, children: [_jsx("div", { className: "vertebr-form-scroll", children: _jsxs("div", { className: "vertebr-record-layout", children: [_jsxs("aside", { className: "vertebr-record-aside", children: [_jsx("div", { className: "vertebr-record-preview", children: imageValue && looksLikeUrl(imageValue) ? (_jsx("img", { src: imageValue, alt: "" })) : (_jsx("div", { className: "vertebr-record-preview-empty", children: "No image" })) }), imageKey && uploads?.[imageKey] && onUpload ? (_jsx(ImageUploadControl, { meta: uploads[imageKey], label: "Drop a new image or browse", onUpload: async (files) => {
+                                        const [first] = await onUpload(imageKey, files);
+                                        if (first?.url) {
+                                            form.setValue(imageKey, first.url, {
+                                                shouldDirty: true,
+                                                shouldTouch: true,
+                                            });
+                                        }
+                                    } })) : null, asideGroups.map((group) => (_jsxs("div", { className: "vertebr-record-block", "data-layout": /^inventory$/i.test(group.id) ? "chips" : undefined, children: [_jsx("div", { className: "vertebr-record-block-label", children: group.label }), _jsx("div", { className: "vertebr-form-fields", "data-layout": isStockField(group.fields[0]?.[0] ?? "", group.fields[0]?.[1])
+                                                ? "chips"
+                                                : undefined, children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, hideImagePreview: true, hideUpload: key === imageKey, ...fieldProps }, key))) })] }, group.id)))] }), _jsx("div", { className: "vertebr-record-main", children: mainGroups.map((group) => {
+                                const inventory = /^inventory$/i.test(group.id);
+                                return (_jsxs("div", { className: "vertebr-record-block", "data-layout": inventory ? "chips" : undefined, children: [_jsx("div", { className: "vertebr-record-block-label", children: group.label }), _jsx("div", { className: "vertebr-form-fields", "data-layout": inventory ? "chips" : undefined, children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, ...fieldProps }, key))) })] }, group.id));
+                            }) })] }) }), _jsx(ConfigFormActions, { form: form, isDirty: isDirty, status: status, tone: tone, onDiscard: onDiscard })] }));
+}

package/dist/components/config/form/SettingsConfigForm.d.ts

@@ -0,0 +1,21 @@
+import type { UseFormReturn } from "react-hook-form";
+import type { FieldSchema, ResourceUploadMeta } from "@vertebr/client";
+import type { FieldGroup, GalleryHandlers } from "./types";
+export type SettingsConfigFormProps = GalleryHandlers & {
+    schema: Record<string, FieldSchema>;
+    groups: FieldGroup[];
+    watched: Record<string, unknown>;
+    form: UseFormReturn<Record<string, unknown>>;
+    uploads?: Record<string, ResourceUploadMeta>;
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    isDirty: boolean;
+    status: string | null;
+    tone?: "ok" | "danger";
+    onDiscard: () => void;
+};
+export declare function SettingsConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, }: SettingsConfigFormProps): import("react").JSX.Element;
+//# sourceMappingURL=SettingsConfigForm.d.ts.map

package/dist/components/config/form/SettingsConfigForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/SettingsConfigForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,GACV,EAAE,uBAAuB,+BAmDzB"}

package/dist/components/config/form/SettingsConfigForm.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConfigField } from "./ConfigField";
+import { ConfigFormActions } from "./ConfigFormActions";
+export function SettingsConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, }) {
+    const singleGroup = groups.length === 1;
+    return (_jsxs("form", { className: "vertebr-form", "data-variant": "config", onSubmit: onSubmit, children: [_jsx("div", { className: "vertebr-form-scroll", children: groups.map((group) => (_jsxs("div", { className: "vertebr-form-section", "data-plain": singleGroup ? "true" : undefined, children: [!singleGroup ? (_jsxs("div", { className: "vertebr-form-section-head", children: [_jsx("h3", { children: group.label }), _jsx("span", { className: "vertebr-form-section-count", children: group.fields.length })] })) : null, _jsx("div", { className: "vertebr-form-fields", children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, variant: "config", schema: schema, watched: watched, form: form, uploads: uploads, onUpload: onUpload, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery }, key))) })] }, group.id))) }), _jsx(ConfigFormActions, { form: form, isDirty: isDirty, status: status, tone: tone, onDiscard: onDiscard })] }));
+}

package/dist/components/config/form/helpers.d.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+import type { FieldSchema } from "@vertebr/client";
+import type { ConfigFormVariant, FieldGroup } from "./types";
+export declare function buildZodSchema(schema: Record<string, FieldSchema>): z.ZodObject<Record<string, z.ZodTypeAny>, "strip", z.ZodTypeAny, {
+    [x: string]: any;
+}, {
+    [x: string]: any;
+}>;
+export declare function humanizeKey(key: string): string;
+export declare function isStockField(key: string, field?: FieldSchema): boolean;
+export declare function spanFor(key: string, field: FieldSchema, variant: ConfigFormVariant): "wide" | "full" | undefined;
+export declare function displayLabel(key: string, field: FieldSchema, group: string): string;
+export declare function groupFields(schema: Record<string, FieldSchema>, variant: ConfigFormVariant): FieldGroup[];
+export declare function firstImageUrl(value: unknown): string | null;
+export declare function findPrimaryImageKey(schema: Record<string, FieldSchema>, values: Record<string, unknown> | undefined): string | null;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/components/config/form/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EACV,iBAAiB,EAEjB,UAAU,EACX,MAAM,SAAS,CAAC;AAWjB,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC;;;;GAyBjE;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK/C;AAMD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,CAGtE;AAED,wBAAgB,OAAO,CACrB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,iBAAiB,GACzB,MAAM,GAAG,MAAM,GAAG,SAAS,CAK7B;AA0CD,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,MAAM,GACZ,MAAM,CAcR;AAgBD,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,OAAO,EAAE,iBAAiB,GACzB,UAAU,EAAE,CA4Cd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAU3D;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAC1C,MAAM,GAAG,IAAI,CASf"}