@duke333/builder-ui 0.2.2 → 0.2.4

package/dist/integration/index.d.ts

@@ -1,5 +1,5 @@
 import { BuilderApiContracts, BuilderApiClient, BuilderApiTransport } from '../api/index.js';
-import { P as createBuilderAdminPages, b as BuilderAdminPagesOptions, a as BuilderAdminPageContracts } from '../BuilderAdminPages-C-jaMLOa.js';
+import { Q as createBuilderAdminPages, b as BuilderAdminPagesOptions, a as BuilderAdminPageContracts } from '../BuilderAdminPages-DwwdA8Dv.js';
 import { BuilderHooks } from '../hooks/index.js';
 import 'react';
 import 'react-hook-form';

package/dist/integration/index.js

@@ -18,7 +18,8 @@ function createBuilderApiClient(rootTransport, options = {}) {
     get: (value, requestOptions) => rootTransport.get(path(value), requestOptions),
     post: (value, body, requestOptions) => rootTransport.post(path(value), body, requestOptions),
     patch: (value, body, requestOptions) => rootTransport.patch(path(value), body, requestOptions),
-    delete: (value, requestOptions) => rootTransport.delete(path(value), requestOptions)
+    delete: (value, requestOptions) => rootTransport.delete(path(value), requestOptions),
+    upload: rootTransport.upload ? (value, body, requestOptions) => rootTransport.upload(path(value), body, requestOptions) : void 0
   };
   return {
     listBuilderForms: (query) => transport.get("/builder/forms", {
@@ -93,7 +94,23 @@ function createBuilderApiClient(rootTransport, options = {}) {
     ),
     deleteBuilderViewEntry: (viewId, id) => transport.delete(
       `/builder/runtime/views/${encodeURIComponent(viewId)}/entries/${encodeURIComponent(id)}`
-    )
+    ),
+    presignRuntimeBuilderFile: (context, fieldKey, input) => {
+      const owner = context.viewId ? `views/${encodeURIComponent(context.viewId)}` : `forms/${encodeURIComponent(context.formId ?? "")}`;
+      return transport.post(
+        `/builder/runtime/${owner}/fields/${encodeURIComponent(fieldKey)}/files/presign`,
+        input
+      );
+    },
+    uploadRuntimeBuilderFile: (context, fieldKey, file) => {
+      if (!transport.upload) throw new Error("Builder transport server file upload \u0434\u044D\u043C\u0436\u0438\u0445\u0433\u04AF\u0439 \u0431\u0430\u0439\u043D\u0430");
+      const owner = context.viewId ? `views/${encodeURIComponent(context.viewId)}` : `forms/${encodeURIComponent(context.formId ?? "")}`;
+      return transport.upload(
+        `/builder/runtime/${owner}/fields/${encodeURIComponent(fieldKey)}/files/upload`,
+        file,
+        { contentType: file.type }
+      );
+    }
   };
 }
 
@@ -142,7 +159,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 = []) {
@@ -209,6 +226,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",
@@ -251,16 +272,19 @@ function builderFormEditorValuesFromEntity(form, emptyValues) {
 function builderListEditorValuesFromEntity(list, emptyValues) {
   if (!list) return emptyValues;
   const source = list.source;
+  const orderBy = list.schema.orderBy ? Array.isArray(list.schema.orderBy) ? list.schema.orderBy : [list.schema.orderBy] : [];
   return {
     title: list.title,
     description: list.description ?? "",
     sourceType: source?.type ?? "none",
     sourceTable: source?.type === "dbTable" ? source.tableName : BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: source?.type === "apiEndpoint" ? source.basePath : "",
+    orderBy,
     columns: list.schema.columns.map((column) => ({
       key: column.key,
       label: column.label,
       sortable: column.sortable,
+      hidden: column.hidden ?? false,
       align: column.align
     })),
     triggers: valuesFromTriggers(list.triggers),
@@ -288,6 +312,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",
@@ -305,6 +333,7 @@ function builderListEditorColumnsFromTable(table) {
     key: column.name,
     label: column.label,
     sortable: column.sortable,
+    hidden: false,
     align: column.fieldType === "number" || column.fieldType === "money" ? "right" : "left"
   }));
 }
@@ -323,6 +352,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 ? {
@@ -376,11 +409,19 @@ function builderFormEditorInputFromValues(values) {
 }
 function builderListEditorInputFromValues(values) {
   const source = values.sourceType === "dbTable" && values.sourceTable !== BUILDER_EDITOR_NONE_VALUE ? { type: "dbTable", tableName: values.sourceTable } : values.sourceType === "apiEndpoint" && values.apiBasePath ? { type: "apiEndpoint", basePath: values.apiBasePath } : null;
+  const orderBy = Array.from(
+    new Map(
+      values.orderBy.filter((rule) => rule.field && rule.field !== BUILDER_EDITOR_NONE_VALUE).map((rule) => [rule.field, rule])
+    ).values()
+  );
   return {
     title: values.title,
     description: values.description || null,
     source,
-    schema: { columns: values.columns },
+    schema: {
+      columns: values.columns,
+      ...source && orderBy.length > 0 ? { orderBy } : {}
+    },
     triggers: values.triggers.map((trigger) => ({
       event: trigger.event,
       action: "callApi",
@@ -405,7 +446,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,10 +624,18 @@ function createBuilderDefaultFormEditorBody(options) {
           ] }),
           sourceType === "dbTable" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "Table" }),
-            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("sourceTable"), children: [
-              /* @__PURE__ */ jsx("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
-              tables.map((table) => /* @__PURE__ */ jsx("option", { value: table.name, children: table.label ?? table.name }, table.name))
-            ] })
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                style: styles.input,
+                value: sourceTable,
+                ...form.register("sourceTable"),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
+                  tables.map((table) => /* @__PURE__ */ jsx("option", { value: table.name, children: table.label ?? table.name }, table.name))
+                ]
+              }
+            )
           ] }) : null,
           sourceType === "apiEndpoint" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "API base path" }),
@@ -660,6 +709,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`) })
@@ -844,6 +917,7 @@ function createBuilderDefaultListEditorBody(options) {
     listId,
     form,
     columnArray,
+    orderByArray,
     triggerArray,
     sourceType,
     sourceTable,
@@ -853,6 +927,8 @@ function createBuilderDefaultListEditorBody(options) {
     isSaving,
     importColumnsFromTable
   }) {
+    const selectedTable = tables.find((table) => table.name === sourceTable);
+    const orderByColumns = selectedTable?.columns.filter((column) => column.sortable) ?? [];
     return /* @__PURE__ */ jsxs("div", { style: styles.page, children: [
       /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
         /* @__PURE__ */ jsxs("div", { children: [
@@ -885,10 +961,18 @@ function createBuilderDefaultListEditorBody(options) {
           ] }),
           sourceType === "dbTable" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "Table" }),
-            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("sourceTable"), children: [
-              /* @__PURE__ */ jsx("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
-              tables.map((table) => /* @__PURE__ */ jsx("option", { value: table.name, children: table.label ?? table.name }, table.name))
-            ] })
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                style: styles.input,
+                value: sourceTable,
+                ...form.register("sourceTable"),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
+                  tables.map((table) => /* @__PURE__ */ jsx("option", { value: table.name, children: table.label ?? table.name }, table.name))
+                ]
+              }
+            )
           ] }) : null,
           sourceType === "apiEndpoint" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "API base path" }),
@@ -906,6 +990,85 @@ function createBuilderDefaultListEditorBody(options) {
           ) }) : null
         ] })
       ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "Default ordering" }),
+            /* @__PURE__ */ jsx("p", { style: styles.description, children: "Rules are applied from top to bottom." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              disabled: sourceType === "none" || orderByArray.fields.length >= 8,
+              onClick: () => orderByArray.append({
+                field: sourceType === "dbTable" ? orderByColumns[0]?.name ?? BUILDER_EDITOR_NONE_VALUE : "",
+                direction: "desc"
+              }),
+              children: "Add ordering"
+            }
+          )
+        ] }),
+        orderByArray.fields.length === 0 ? /* @__PURE__ */ jsx("div", { style: styles.grid, children: /* @__PURE__ */ jsx("p", { style: styles.description, children: "Automatic ordering is used." }) }) : null,
+        orderByArray.fields.map((rule, index) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
+          sourceType === "dbTable" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Order by field" }),
+            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register(`orderBy.${index}.field`), children: [
+              /* @__PURE__ */ jsx("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select field" }),
+              orderByColumns.map((column) => /* @__PURE__ */ jsx("option", { value: column.name, children: column.label }, column.name))
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Order by field" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: styles.input,
+                placeholder: "createdAt",
+                ...form.register(`orderBy.${index}.field`)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Direction" }),
+            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register(`orderBy.${index}.direction`), children: [
+              /* @__PURE__ */ jsx("option", { value: "asc", children: "Ascending" }),
+              /* @__PURE__ */ jsx("option", { value: "desc", children: "Descending" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                disabled: index === 0,
+                onClick: () => orderByArray.move(index, index - 1),
+                children: "Move up"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                disabled: index === orderByArray.fields.length - 1,
+                onClick: () => orderByArray.move(index, index + 1),
+                children: "Move down"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                onClick: () => orderByArray.remove(index),
+                children: "Remove"
+              }
+            )
+          ] })
+        ] }, rule.id))
+      ] }),
       /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
         /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
           /* @__PURE__ */ jsxs("div", { children: [
@@ -946,16 +1109,10 @@ function createBuilderDefaultListEditorBody(options) {
             /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`columns.${index}.sortable`) }),
             "Sortable"
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              style: styles.button,
-              onClick: () => columnArray.remove(index),
-              disabled: columnArray.fields.length <= 1,
-              children: "Remove"
-            }
-          )
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`columns.${index}.hidden`) }),
+            "Hidden"
+          ] })
         ] }, column.id))
       ] }),
       /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
@@ -1186,7 +1343,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",
@@ -1373,7 +1530,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: [
@@ -1484,6 +1641,7 @@ function createBuilderListEditorPageComponent(deps) {
       defaultValues: deps.emptyValues
     });
     const columnArray = useFieldArray({ control: form.control, name: "columns" });
+    const orderByArray = useFieldArray({ control: form.control, name: "orderBy" });
     const triggerArray = useFieldArray({ control: form.control, name: "triggers" });
     const sourceType = useWatch({ control: form.control, name: "sourceType" });
     const sourceTable = useWatch({ control: form.control, name: "sourceTable" });
@@ -1517,6 +1675,7 @@ function createBuilderListEditorPageComponent(deps) {
         listId,
         form,
         columnArray,
+        orderByArray,
         triggerArray,
         sourceType,
         sourceTable,
@@ -1535,6 +1694,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" },
@@ -1645,6 +1805,10 @@ function createBuilderAdminPages({
     required: true,
     hidden: false,
     disabled: false,
+    storage: "s3",
+    contentKind: "image",
+    multiple: false,
+    maxMegabytes: 10,
     placeholder: "",
     optionsText: "",
     optionsMode: "static",
@@ -1679,6 +1843,7 @@ function createBuilderAdminPages({
     key: "name",
     label: "Name",
     sortable: true,
+    hidden: false,
     align: "left"
   };
   const emptyListValues = {
@@ -1687,6 +1852,7 @@ function createBuilderAdminPages({
     sourceType: "none",
     sourceTable: BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: "",
+    orderBy: [],
     columns: [emptyColumn],
     triggers: [],
     version: 0
@@ -1947,12 +2113,30 @@ function createBuilderKeys() {
 }
 function createBuilderHooks(client) {
   const builderKeys = createBuilderKeys();
+  function isRuntimeEntryListCache(value) {
+    return typeof value === "object" && value !== null && "items" in value && Array.isArray(value.items) && "total" in value;
+  }
+  function replaceCachedRuntimeViewEntry(queryClient, viewId, entry) {
+    queryClient.setQueriesData(
+      { queryKey: [...builderKeys.runtimeView(viewId), "entries"] },
+      (current) => {
+        if (!isRuntimeEntryListCache(current)) return current;
+        return {
+          ...current,
+          items: current.items.map((item) => item.id === entry.id ? entry : item)
+        };
+      }
+    );
+  }
   function invalidateRuntimeViewEntries(queryClient, viewId) {
     return Promise.all([
       queryClient.invalidateQueries({ queryKey: builderKeys.runtimeView(viewId) }),
       queryClient.invalidateQueries({ queryKey: [...builderKeys.runtimeView(viewId), "entries"] })
     ]);
   }
+  function invalidateAllRuntimeViewEntries(queryClient) {
+    return queryClient.invalidateQueries({ queryKey: ["builder", "runtime", "view"] });
+  }
   function useBuilderDbTables() {
     return useQuery({ queryKey: builderKeys.dbTables(), queryFn: client.listBuilderDbTables });
   }
@@ -2163,14 +2347,20 @@ function createBuilderHooks(client) {
         viewId,
         input
       ),
-      onSuccess: () => invalidateRuntimeViewEntries(queryClient, viewId)
+      onSuccess: (entry) => {
+        replaceCachedRuntimeViewEntry(queryClient, viewId, entry);
+        return invalidateRuntimeViewEntries(queryClient, viewId);
+      }
     });
   }
   function useCreateCompositeBuilderViewEntry(viewId) {
     const queryClient = useQueryClient();
     return useMutation({
       mutationFn: (input) => client.createCompositeBuilderViewEntry(viewId, input),
-      onSuccess: () => invalidateRuntimeViewEntries(queryClient, viewId)
+      onSuccess: (entry) => {
+        replaceCachedRuntimeViewEntry(queryClient, viewId, entry);
+        return invalidateAllRuntimeViewEntries(queryClient);
+      }
     });
   }
   function useUpdateCompositeBuilderViewEntry(viewId) {
@@ -2180,7 +2370,10 @@ function createBuilderHooks(client) {
         id,
         input
       }) => client.updateCompositeBuilderViewEntry(viewId, id, input),
-      onSuccess: () => invalidateRuntimeViewEntries(queryClient, viewId)
+      onSuccess: (entry) => {
+        replaceCachedRuntimeViewEntry(queryClient, viewId, entry);
+        return invalidateAllRuntimeViewEntries(queryClient);
+      }
     });
   }
   function useDeleteBuilderViewEntry(id) {