@duke333/builder-ui 0.2.3 → 0.2.5

package/README.md

@@ -53,6 +53,24 @@ loading, empty, errors, focus restoration, and row action isolation. Runtime for
 
 The existing `createDynamic*Component` factories remain available as the advanced headless API.
 
+## Form Layout Presentation
+
+Form layout groups stay backward-compatible and render as stacked sections by default. Set the
+layout presentation to `tabs` when each group should be shown as a tab:
+
+```ts
+layout: {
+  presentation: "tabs",
+  groups: [
+    { id: "general", title: "General", columns: 12, fields: [] },
+    { id: "content", title: "Content", columns: 12, fields: [] },
+  ],
+}
+```
+
+The ready runtime keeps inactive tab fields mounted so their form state and validation remain
+intact. Headless consumers should preserve the same behavior in their form adapter.
+
 ## Validation
 
 ```bash

package/dist/{BuilderAdminPages-DrOrFyIX.d.ts → BuilderAdminPages-bV-lwDOp.d.ts}

@@ -46,6 +46,10 @@ type BuilderEditorField<TFieldType extends string> = {
     required: boolean;
     hidden?: boolean;
     disabled?: boolean;
+    storage?: "s3" | "server";
+    contentKind?: "image" | "file";
+    multiple?: boolean;
+    maxBytes?: number;
     placeholder?: string;
     description?: string;
     options?: BuilderEditorSelectOption[];
@@ -83,6 +87,7 @@ type BuilderEditorFormLayoutGroup = {
     fields?: BuilderEditorFormLayoutField[];
 };
 type BuilderEditorFormLayout = {
+    presentation?: "stacked" | "tabs";
     groups?: BuilderEditorFormLayoutGroup[];
 };
 type BuilderEditorColumn = {
@@ -123,6 +128,10 @@ type BuilderFormEditorFieldValues<TFieldType extends string = string> = {
     required: boolean;
     hidden: boolean;
     disabled: boolean;
+    storage?: "s3" | "server";
+    contentKind?: "image" | "file";
+    multiple?: boolean;
+    maxMegabytes?: number;
     placeholder?: string;
     optionsText?: string;
     optionsMode: "static" | "table";
@@ -181,6 +190,7 @@ type BuilderFormEditorValues<TFieldType extends string = string, TTriggerEvent e
     sourceTable: string;
     apiBasePath?: string;
     fields: BuilderFormEditorFieldValues<TFieldType>[];
+    layoutPresentation: "stacked" | "tabs";
     layoutGroups: BuilderFormEditorLayoutGroupValues[];
     subforms?: BuilderFormEditorSubformValues[];
     triggers: BuilderEditorTriggerValues<TTriggerEvent>[];
@@ -261,6 +271,10 @@ declare function builderFormEditorInputFromValues<TFieldType extends string, TTr
             required: boolean;
             hidden: boolean;
             disabled: boolean;
+            storage: "s3" | "server" | undefined;
+            contentKind: "file" | "image" | undefined;
+            multiple: boolean | undefined;
+            maxBytes: number | undefined;
             placeholder: string;
             options: BuilderEditorSelectOption[] | undefined;
             optionsSource: {
@@ -283,6 +297,7 @@ declare function builderFormEditorInputFromValues<TFieldType extends string, TTr
             }[];
         }[];
         layout: {
+            presentation: "stacked" | "tabs";
             groups: BuilderFormEditorLayoutGroupValues[];
         };
         subforms: {

package/dist/{RuntimeEntryDialog-Bw741XbS.d.ts → RuntimeEntryDialog-B4TbF8os.d.ts}

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import { BuilderApiContracts } from './api/index.js';
 import { BuilderHooks } from './hooks/index.js';
-import { BuilderRuntimeFormSchemaLike, BuilderRuntimeFormValues, BuilderRuntimeEntryLike, BuilderRuntimeViewLike, BuilderRuntimePresentation, BuilderRuntimeEntryValues } from './runtime/index.js';
+import { a as BuilderRuntimeFormSchemaLike, d as BuilderRuntimeFormValues, b as BuilderRuntimeEntryLike, e as BuilderRuntimeViewLike, B as BuilderRuntimePresentation, c as BuilderRuntimeEntryValues } from './runtimeUtils-CCtLyIf1.js';
 
 type DynamicFormContracts = BuilderApiContracts & {
     BuilderForm: {

package/dist/admin/index.d.ts

@@ -1,5 +1,5 @@
-import { C as BuilderViewEditorEntity, D as BuilderViewEditorValues, X as BuilderFormEditorLayoutGroupValues, u as BuilderFormEditorValues, s as BuilderFormEditorFieldValues, Y as BuilderFormEditorSubformValues } from '../BuilderAdminPages-DrOrFyIX.js';
-export { B as BUILDER_EDITOR_NONE_VALUE, a as BuilderAdminPageContracts, b as BuilderAdminPagesOptions, c as BuilderAdminPagesRoutes, d as BuilderDefaultEntity, e as BuilderDefaultEntityListResult, f as BuilderDefaultEntityManagerDependencies, g as BuilderDefaultEntityManagerLabels, h as BuilderDefaultEntityManagerState, i as BuilderDefaultEntityMutation, j as BuilderDefaultEntityQueryResult, k as BuilderDefaultFormEditorBodyOptions, l as BuilderDefaultListEditorBodyOptions, m as BuilderDefaultOption, n as BuilderEditorDbTable, o as BuilderEditorSelectOption, p as BuilderEditorTriggerValues, q as BuilderFormEditorBodyProps, r as BuilderFormEditorEntity, t as BuilderFormEditorPageDependencies, v as BuilderListEditorBodyProps, w as BuilderListEditorColumnValues, x as BuilderListEditorEntity, y as BuilderListEditorOrderByValues, z as BuilderListEditorPageDependencies, A as BuilderListEditorValues, E as builderEditorOptionsToText, F as builderEditorSearchFieldsToText, G as builderEditorTextToOptions, H as builderEditorTextToSearchFields, Z as builderFormEditorDefaultLayoutGroups, _ as builderFormEditorDefaultSpan, I as builderFormEditorFieldsFromTable, J as builderFormEditorInputFromValues, K as builderFormEditorValuesFromEntity, L as builderListEditorColumnsFromTable, M as builderListEditorInputFromValues, N as builderListEditorValuesFromEntity, O as builderViewEditorInputFromValues, P as builderViewEditorValuesFromEntity, Q as createBuilderAdminPages, R as createBuilderDefaultEntityManagerComponent, S as createBuilderDefaultFormEditorBody, T as createBuilderDefaultListEditorBody, U as createBuilderFormEditorPageComponent, V as createBuilderListEditorPageComponent, W as getBuilderEditorTriggerRoute } from '../BuilderAdminPages-DrOrFyIX.js';
+import { C as BuilderViewEditorEntity, D as BuilderViewEditorValues, X as BuilderFormEditorLayoutGroupValues, u as BuilderFormEditorValues, s as BuilderFormEditorFieldValues, Y as BuilderFormEditorSubformValues } from '../BuilderAdminPages-bV-lwDOp.js';
+export { B as BUILDER_EDITOR_NONE_VALUE, a as BuilderAdminPageContracts, b as BuilderAdminPagesOptions, c as BuilderAdminPagesRoutes, d as BuilderDefaultEntity, e as BuilderDefaultEntityListResult, f as BuilderDefaultEntityManagerDependencies, g as BuilderDefaultEntityManagerLabels, h as BuilderDefaultEntityManagerState, i as BuilderDefaultEntityMutation, j as BuilderDefaultEntityQueryResult, k as BuilderDefaultFormEditorBodyOptions, l as BuilderDefaultListEditorBodyOptions, m as BuilderDefaultOption, n as BuilderEditorDbTable, o as BuilderEditorSelectOption, p as BuilderEditorTriggerValues, q as BuilderFormEditorBodyProps, r as BuilderFormEditorEntity, t as BuilderFormEditorPageDependencies, v as BuilderListEditorBodyProps, w as BuilderListEditorColumnValues, x as BuilderListEditorEntity, y as BuilderListEditorOrderByValues, z as BuilderListEditorPageDependencies, A as BuilderListEditorValues, E as builderEditorOptionsToText, F as builderEditorSearchFieldsToText, G as builderEditorTextToOptions, H as builderEditorTextToSearchFields, Z as builderFormEditorDefaultLayoutGroups, _ as builderFormEditorDefaultSpan, I as builderFormEditorFieldsFromTable, J as builderFormEditorInputFromValues, K as builderFormEditorValuesFromEntity, L as builderListEditorColumnsFromTable, M as builderListEditorInputFromValues, N as builderListEditorValuesFromEntity, O as builderViewEditorInputFromValues, P as builderViewEditorValuesFromEntity, Q as createBuilderAdminPages, R as createBuilderDefaultEntityManagerComponent, S as createBuilderDefaultFormEditorBody, T as createBuilderDefaultListEditorBody, U as createBuilderFormEditorPageComponent, V as createBuilderListEditorPageComponent, W as getBuilderEditorTriggerRoute } from '../BuilderAdminPages-bV-lwDOp.js';
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import { BuilderApiContracts } from '../api/index.js';

package/dist/admin/index.js

@@ -45,7 +45,7 @@ function clampLayoutSpan(span, columns) {
   return Math.max(1, Math.min(columns, Math.trunc(span)));
 }
 function builderFormEditorDefaultSpan(field) {
-  if (field.type === "textarea" || field.type === "checkbox") return 12;
+  if (field.type === "textarea" || field.type === "richtext" || field.type === "checkbox") return 12;
   return 6;
 }
 function builderFormEditorDefaultLayoutGroups(fields, subforms = []) {
@@ -112,6 +112,10 @@ function builderFormEditorValuesFromEntity(form, emptyValues) {
     required: field.required,
     hidden: field.hidden ?? false,
     disabled: field.disabled ?? false,
+    storage: field.storage ?? "s3",
+    contentKind: field.contentKind ?? "image",
+    multiple: field.multiple ?? false,
+    maxMegabytes: field.maxBytes ? field.maxBytes / (1024 * 1024) : 10,
     placeholder: field.placeholder ?? "",
     optionsText: builderEditorOptionsToText(field.options),
     optionsMode: field.optionsSource?.type === "dbTable" ? "table" : "static",
@@ -141,6 +145,7 @@ function builderFormEditorValuesFromEntity(form, emptyValues) {
     sourceTable: source?.type === "dbTable" ? source.tableName : BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: source?.type === "apiEndpoint" ? source.basePath : "",
     fields,
+    layoutPresentation: form.schema.layout?.presentation ?? "stacked",
     layoutGroups: normalizeBuilderFormEditorLayoutGroups(
       form.schema.layout?.groups,
       fields,
@@ -194,6 +199,10 @@ function builderFormEditorFieldsFromTable(table) {
     required: !column.nullable,
     hidden: false,
     disabled: false,
+    storage: "s3",
+    contentKind: "image",
+    multiple: false,
+    maxMegabytes: 10,
     placeholder: column.label,
     optionsText: "",
     optionsMode: "static",
@@ -230,6 +239,10 @@ function builderFormEditorInputFromValues(values) {
         required: field.required,
         hidden: field.hidden,
         disabled: field.disabled,
+        storage: field.type === "file" ? field.storage : void 0,
+        contentKind: field.type === "file" ? field.contentKind : void 0,
+        multiple: field.type === "file" ? field.multiple : void 0,
+        maxBytes: field.type === "file" && typeof field.maxMegabytes === "number" && field.maxMegabytes > 0 ? Math.round(field.maxMegabytes * 1024 * 1024) : void 0,
         placeholder: field.placeholder?.trim() || field.label,
         options: field.type === "select" && field.optionsMode === "static" ? builderEditorTextToOptions(field.optionsText) : void 0,
         optionsSource: field.type === "select" && field.optionsMode === "table" && field.optionsTable !== BUILDER_EDITOR_NONE_VALUE && field.optionsValueField !== BUILDER_EDITOR_NONE_VALUE && field.optionsLabelField !== BUILDER_EDITOR_NONE_VALUE ? {
@@ -252,6 +265,7 @@ function builderFormEditorInputFromValues(values) {
         }))
       })),
       layout: {
+        presentation: values.layoutPresentation,
         groups: normalizeBuilderFormEditorLayoutGroups(
           values.layoutGroups,
           values.fields,
@@ -320,7 +334,7 @@ function builderViewEditorInputFromValues(values, parseTriggers) {
 }
 
 // src/admin/BuilderDefaultEditorBodies.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var styles = {
   page: {
     display: "grid",
@@ -583,6 +597,30 @@ function createBuilderDefaultFormEditorBody(options) {
             /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`fields.${index}.disabled`) }),
             "Disabled"
           ] }),
+          fields[index]?.type === "file" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+              /* @__PURE__ */ jsx("span", { style: styles.label, children: "Storage" }),
+              /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register(`fields.${index}.storage`), children: [
+                /* @__PURE__ */ jsx("option", { value: "s3", children: "S3" }),
+                /* @__PURE__ */ jsx("option", { value: "server", children: "Server" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+              /* @__PURE__ */ jsx("span", { style: styles.label, children: "Content type" }),
+              /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register(`fields.${index}.contentKind`), children: [
+                /* @__PURE__ */ jsx("option", { value: "image", children: "Image" }),
+                /* @__PURE__ */ jsx("option", { value: "file", children: "File" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`fields.${index}.multiple`) }),
+              "Multiple"
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+              /* @__PURE__ */ jsx("span", { style: styles.label, children: "Max size (MB)" }),
+              /* @__PURE__ */ jsx("input", { type: "number", min: "1", max: "100", style: styles.input, ...form.register(`fields.${index}.maxMegabytes`, { valueAsNumber: true }) })
+            ] })
+          ] }) : null,
           /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "Placeholder" }),
             /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`fields.${index}.placeholder`) })
@@ -621,6 +659,13 @@ function createBuilderDefaultFormEditorBody(options) {
             }
           )
         ] }),
+        /* @__PURE__ */ jsx("div", { style: styles.grid, children: /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+          /* @__PURE__ */ jsx("span", { style: styles.label, children: "Group presentation" }),
+          /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("layoutPresentation"), children: [
+            /* @__PURE__ */ jsx("option", { value: "stacked", children: "Stacked sections" }),
+            /* @__PURE__ */ jsx("option", { value: "tabs", children: "Tabs" })
+          ] })
+        ] }) }),
         form.watch("layoutGroups").map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
           /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "Group title" }),
@@ -1193,7 +1238,7 @@ function createBuilderDefaultEntityManagerComponent(deps) {
 // src/admin/BuilderDefaultViewEditorPage.tsx
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var styles3 = {
   page: {
     display: "grid",
@@ -1380,7 +1425,7 @@ function createBuilderDefaultViewEditorPage(options) {
             (lists.data ?? []).map((item) => /* @__PURE__ */ jsx3("option", { value: item.id, children: item.title }, item.id))
           ] })
         ] }),
-        showPermissions ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        showPermissions ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
           /* @__PURE__ */ jsxs3("label", { style: styles3.field, children: [
             /* @__PURE__ */ jsx3("span", { style: styles3.label, children: "Read permission" }),
             /* @__PURE__ */ jsxs3("select", { style: styles3.input, ...form.register("permissionRead"), children: [
@@ -1544,6 +1589,7 @@ import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultFieldTypeOptions = [
   { value: "text", label: "Text" },
   { value: "textarea", label: "Textarea" },
+  { value: "richtext", label: "Rich text" },
   { value: "number", label: "Number" },
   { value: "money", label: "Money" },
   { value: "select", label: "Select" },
@@ -1654,6 +1700,10 @@ function createBuilderAdminPages({
     required: true,
     hidden: false,
     disabled: false,
+    storage: "s3",
+    contentKind: "image",
+    multiple: false,
+    maxMegabytes: 10,
     placeholder: "",
     optionsText: "",
     optionsMode: "static",
@@ -1673,6 +1723,7 @@ function createBuilderAdminPages({
     sourceTable: BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: "",
     fields: [emptyField],
+    layoutPresentation: "stacked",
     layoutGroups: builderFormEditorDefaultLayoutGroups([emptyField]),
     subforms: [],
     triggers: [],