@duke333/builder-ui 0.1.0

package/dist/components/index.js

@@ -0,0 +1,581 @@
+// src/components/DynamicForm.tsx
+import { useMemo } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+
+// src/runtime/runtimeUtils.ts
+function emptyFieldValue(field) {
+  return field.type === "checkbox" ? false : "";
+}
+function createBuilderFormDefaultValues(schema) {
+  const values = {};
+  for (const field of schema?.fields ?? []) {
+    values[field.key] = emptyFieldValue(field);
+  }
+  return { values };
+}
+function createBuilderEntryDefaultValues(view, editing) {
+  const values = {};
+  for (const field of view.form?.schema.fields ?? []) {
+    const existing = editing?.values[field.key];
+    values[field.key] = existing === void 0 ? emptyFieldValue(field) : existing;
+  }
+  return { values, version: editing?.version ?? 0 };
+}
+
+// src/components/DynamicForm.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function createDynamicFormComponent(deps) {
+  return function DynamicForm({ formId }) {
+    const query = deps.hooks.useRuntimeBuilderForm(formId);
+    const save = deps.hooks.useSaveRuntimeBuilderFormEntry(formId);
+    const formValues = useMemo(
+      () => query.data ? createBuilderFormDefaultValues(query.data.schema) : void 0,
+      [query.data]
+    );
+    const form = useForm({
+      defaultValues: createBuilderFormDefaultValues(query.data?.schema),
+      values: formValues
+    });
+    const onSubmit = form.handleSubmit(async (values) => {
+      try {
+        await save.mutateAsync(values);
+        form.reset(createBuilderFormDefaultValues(query.data?.schema));
+        deps.notifications.success("Form \u0445\u0430\u0434\u0433\u0430\u043B\u0430\u0433\u0434\u043B\u0430\u0430");
+      } catch (error) {
+        deps.notifications.error(deps.notifications.errorMessage(error, "\u0425\u0430\u0434\u0433\u0430\u043B\u0430\u0445\u0430\u0434 \u0430\u043B\u0434\u0430\u0430 \u0433\u0430\u0440\u043B\u0430\u0430"));
+      }
+    });
+    if (query.isError) {
+      return /* @__PURE__ */ jsx(
+        deps.ErrorState,
+        {
+          title: "Form \u043D\u044D\u044D\u0433\u0434\u0441\u044D\u043D\u0433\u04AF\u0439",
+          description: `\xAB${formId}\xBB id-\u0442\u0430\u0439 form \u043E\u043B\u0434\u0441\u043E\u043D\u0433\u04AF\u0439.`
+        }
+      );
+    }
+    if (!query.data) return null;
+    return /* @__PURE__ */ jsx(deps.FormShell, { title: query.data.title, children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(deps.FormFields, { formId, schema: query.data.schema, namePrefix: "values" }),
+      /* @__PURE__ */ jsx(deps.SubmitButton, { isSaving: save.isPending })
+    ] }) }) });
+  };
+}
+
+// src/components/DynamicList.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function createDynamicListComponent(deps) {
+  return function DynamicList({ listId }) {
+    const query = deps.hooks.useRuntimeBuilderList(listId);
+    const state = deps.useDataTableState({ pageSize: 20 });
+    const entriesQuery = deps.hooks.useRuntimeBuilderListEntries(listId, state.query);
+    const columns = useMemo2(() => query.data ? deps.buildColumns(query.data) : [], [query.data]);
+    const entries = entriesQuery.data?.items ?? [];
+    const controller = deps.useDataTable({
+      columns,
+      data: entries,
+      rowCount: entriesQuery.data?.total ?? 0,
+      state,
+      getRowId: (row) => row.id
+    });
+    if (query.isError) {
+      return /* @__PURE__ */ jsx2(
+        deps.ErrorState,
+        {
+          title: "List \u043D\u044D\u044D\u0433\u0434\u0441\u044D\u043D\u0433\u04AF\u0439",
+          description: `\xAB${listId}\xBB id-\u0442\u0430\u0439 list \u043E\u043B\u0434\u0441\u043E\u043D\u0433\u04AF\u0439.`
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx2(
+      deps.DataGrid,
+      {
+        title: query.data?.title ?? "Dynamic List",
+        description: query.data?.description ?? `/winu/list?id=${listId}`,
+        controller,
+        isLoading: query.isPending || entriesQuery.isPending,
+        searchPlaceholder: "\u041C\u04E9\u0440 \u0445\u0430\u0439\u0445...",
+        emptyTitle: "\u041C\u04E9\u0440 \u0430\u043B\u0433\u0430",
+        emptyDescription: "\u042D\u043D\u044D list-\u0438\u0439\u043D datasource \u0434\u044D\u044D\u0440 \u043C\u04E9\u0440 \u0430\u043B\u0433\u0430."
+      }
+    );
+  };
+}
+
+// src/components/DynamicView.tsx
+import { useMemo as useMemo3, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function createDynamicViewComponent(deps) {
+  return function DynamicView({ viewId }) {
+    const [editing, setEditing] = useState(null);
+    const [isDialogOpen, setDialogOpen] = useState(false);
+    const [pendingDelete, setPendingDelete] = useState(null);
+    const viewQuery = deps.hooks.useRuntimeBuilderView(viewId);
+    const state = deps.useDataTableState({ pageSize: 20 });
+    const entriesQuery = deps.hooks.useBuilderViewEntries(viewId, state.query);
+    const save = deps.hooks.useSaveBuilderViewEntry(viewId);
+    const remove = deps.hooks.useDeleteBuilderViewEntry(viewId);
+    const view = viewQuery.data;
+    const columns = useMemo3(
+      () => view ? deps.buildColumns(view, {
+        onEdit: (entry) => {
+          setEditing(entry);
+          setDialogOpen(true);
+        },
+        onDelete: setPendingDelete
+      }) : [],
+      [view]
+    );
+    const controller = deps.useDataTable({
+      columns,
+      data: entriesQuery.data?.items ?? [],
+      rowCount: entriesQuery.data?.total ?? 0,
+      state,
+      getRowId: (row) => row.id
+    });
+    if (viewQuery.isError) {
+      return /* @__PURE__ */ jsx3(
+        deps.ErrorState,
+        {
+          title: "View \u043D\u044D\u044D\u0433\u0434\u0441\u044D\u043D\u0433\u04AF\u0439",
+          description: `\xAB${viewId}\xBB id-\u0442\u0430\u0439 view \u043E\u043B\u0434\u0441\u043E\u043D\u0433\u04AF\u0439.`
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx3(
+        deps.DataGrid,
+        {
+          title: view?.title ?? "Dynamic View",
+          description: view?.description ?? `/winu/view?id=${viewId}`,
+          controller,
+          isLoading: viewQuery.isPending || entriesQuery.isPending,
+          searchPlaceholder: "\u041C\u04E9\u0440 \u0445\u0430\u0439\u0445...",
+          emptyTitle: "\u041C\u04E9\u0440 \u0430\u043B\u0433\u0430",
+          emptyDescription: "\u042D\u043D\u044D view \u0434\u044D\u044D\u0440 \u044D\u0445\u043D\u0438\u0439 \u043C\u04E9\u0440\u04E9\u04E9 \u043D\u044D\u043C\u044D\u044D\u0440\u044D\u0439.",
+          onRowClick: (entry) => {
+            setEditing(entry);
+            setDialogOpen(true);
+          },
+          toolbarExtra: /* @__PURE__ */ jsx3(
+            deps.AddButton,
+            {
+              disabled: !view?.form,
+              onAdd: () => {
+                setEditing(null);
+                setDialogOpen(true);
+              }
+            }
+          )
+        }
+      ),
+      view ? /* @__PURE__ */ jsx3(
+        deps.EntryDialog,
+        {
+          open: isDialogOpen,
+          view,
+          editing,
+          onClose: () => setDialogOpen(false),
+          onSave: save.mutateAsync,
+          isSaving: save.isPending
+        }
+      ) : null,
+      /* @__PURE__ */ jsx3(
+        deps.DeleteDialog,
+        {
+          entry: pendingDelete,
+          isDeleting: remove.isPending,
+          onClose: () => setPendingDelete(null),
+          onConfirm: async () => {
+            if (!pendingDelete) return;
+            await remove.mutateAsync(pendingDelete.id);
+            setPendingDelete(null);
+          }
+        }
+      )
+    ] });
+  };
+}
+
+// src/components/RuntimeEntryDialog.tsx
+import { useEffect, useMemo as useMemo4, useState as useState2 } from "react";
+import { FormProvider as FormProvider2, useForm as useForm2 } from "react-hook-form";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function isDbTableSource(source) {
+  return source?.type === "dbTable" && "tableName" in source;
+}
+function runtimeViewTableName(view) {
+  const listSource = view.list?.source;
+  if (isDbTableSource(listSource)) return listSource.tableName;
+  const formSource = view.form?.source;
+  return isDbTableSource(formSource) ? formSource.tableName : void 0;
+}
+function cleanRowValues(values) {
+  return Object.fromEntries(
+    Object.entries(values).filter(([key]) => key === "_delete" || !key.startsWith("_"))
+  );
+}
+function childRowPayload(row, includeIdentity) {
+  const values = cleanRowValues(row.values);
+  if (!includeIdentity || row.values._draftNew === true) return values;
+  return {
+    id: row.id,
+    version: row.version,
+    ...values
+  };
+}
+function createRuntimeEntryDialogComponent(deps) {
+  return function RuntimeEntryDialog({
+    open,
+    view,
+    editing,
+    onClose,
+    onSave,
+    isSaving
+  }) {
+    const [draftSubforms, setDraftSubforms] = useState2({});
+    const compositeCreate = deps.useCreateCompositeEntry?.(view.id);
+    const compositeUpdate = deps.useUpdateCompositeEntry?.(view.id);
+    const form = useForm2({
+      defaultValues: createBuilderEntryDefaultValues(view, editing),
+      values: open ? createBuilderEntryDefaultValues(view, editing) : void 0
+    });
+    const mainTableName = runtimeViewTableName(view);
+    const hasDraftRows = useMemo4(
+      () => Object.values(draftSubforms).some((draft) => draft.rows.length > 0),
+      [draftSubforms]
+    );
+    useEffect(() => {
+      if (open) setDraftSubforms({});
+    }, [open]);
+    const onSubmit = form.handleSubmit(async (values) => {
+      try {
+        if (!editing && hasDraftRows) {
+          if (!mainTableName) throw new Error("Main form datasource table \u043E\u043B\u0434\u0441\u043E\u043D\u0433\u04AF\u0439");
+          if (!compositeCreate) throw new Error("Composite create handler \u0442\u043E\u0445\u0438\u0440\u0443\u0443\u043B\u0430\u0433\u0434\u0430\u0430\u0433\u04AF\u0439 \u0431\u0430\u0439\u043D\u0430");
+          await compositeCreate.mutateAsync({
+            data: {
+              [mainTableName]: values.values,
+              ...Object.fromEntries(
+                Object.values(draftSubforms).map((draft) => [
+                  draft.dataKey,
+                  draft.rows.filter((row) => row.values._delete !== true).map((row) => childRowPayload(row, false))
+                ])
+              )
+            }
+          });
+        } else if (editing && hasDraftRows) {
+          if (!mainTableName) throw new Error("Main form datasource table \u043E\u043B\u0434\u0441\u043E\u043D\u0433\u04AF\u0439");
+          if (!compositeUpdate) throw new Error("Composite update handler \u0442\u043E\u0445\u0438\u0440\u0443\u0443\u043B\u0430\u0433\u0434\u0430\u0430\u0433\u04AF\u0439 \u0431\u0430\u0439\u043D\u0430");
+          await compositeUpdate.mutateAsync({
+            id: editing.id,
+            input: {
+              data: {
+                [mainTableName]: {
+                  id: editing.id,
+                  version: values.version,
+                  ...values.values
+                },
+                ...Object.fromEntries(
+                  Object.values(draftSubforms).map((draft) => [
+                    draft.dataKey,
+                    draft.rows.map((row) => childRowPayload(row, true))
+                  ])
+                )
+              }
+            }
+          });
+        } else {
+          await onSave({ id: editing?.id, input: values });
+        }
+        onClose();
+        deps.notifications.success(editing ? "\u041C\u04E9\u0440 \u0445\u0430\u0434\u0433\u0430\u043B\u0430\u0433\u0434\u043B\u0430\u0430" : "\u041C\u04E9\u0440 \u043D\u044D\u043C\u044D\u0433\u0434\u043B\u044D\u044D");
+      } catch (error) {
+        deps.notifications.error(deps.notifications.errorMessage(error, "\u0425\u0430\u0434\u0433\u0430\u043B\u0430\u0445\u0430\u0434 \u0430\u043B\u0434\u0430\u0430 \u0433\u0430\u0440\u043B\u0430\u0430"));
+      }
+    });
+    const saving = isSaving || Boolean(compositeCreate?.isPending || compositeUpdate?.isPending);
+    const extraItems = deps.SubformField && view.form?.schema.subforms?.length ? view.form.schema.subforms.map((subform) => ({
+      key: subform.key,
+      render: () => deps.SubformField ? /* @__PURE__ */ jsx4(
+        deps.SubformField,
+        {
+          subform,
+          parentEntry: editing,
+          draftRows: draftSubforms[subform.key]?.rows ?? [],
+          onDraftRowsChange: ({ subformKey, dataKey, rows }) => {
+            setDraftSubforms((current) => ({
+              ...current,
+              [subformKey]: { dataKey, rows }
+            }));
+          }
+        }
+      ) : null
+    })) : void 0;
+    return /* @__PURE__ */ jsx4(
+      deps.DialogShell,
+      {
+        open,
+        title: editing ? "\u041C\u04E9\u0440 \u0437\u0430\u0441\u0430\u0445" : "\u041C\u04E9\u0440 \u043D\u044D\u043C\u044D\u0445",
+        description: view.title,
+        onClose,
+        children: /* @__PURE__ */ jsx4(FormProvider2, { ...form, children: /* @__PURE__ */ jsxs3("form", { onSubmit, noValidate: true, className: deps.formClassName, children: [
+          view.form ? /* @__PURE__ */ jsx4(
+            deps.FormFields,
+            {
+              formId: view.form.id,
+              viewId: view.id,
+              entry: editing,
+              schema: view.form.schema,
+              namePrefix: "values",
+              extraItems
+            }
+          ) : null,
+          /* @__PURE__ */ jsx4(deps.Actions, { isSaving: saving, onClose })
+        ] }) })
+      }
+    );
+  };
+}
+
+// src/components/RuntimeSubformField.tsx
+import { useEffect as useEffect2, useMemo as useMemo5, useRef, useState as useState3 } from "react";
+import { FormProvider as FormProvider3, useForm as useForm3 } from "react-hook-form";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function subformButtonLabel(subform) {
+  return subform.buttonLabel?.trim() || subform.label;
+}
+function parentValue(entry, field) {
+  if (!entry) return void 0;
+  const value = field === "id" ? entry.id : entry.values[field];
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return void 0;
+}
+function isDbTableSource2(source) {
+  return source?.type === "dbTable" && "tableName" in source;
+}
+function subformFallbackKey(view) {
+  return view.id;
+}
+function viewTableName(view) {
+  const source = view.list?.source;
+  return isDbTableSource2(source) ? source.tableName : subformFallbackKey(view);
+}
+function draftEntry(values, editing) {
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  return {
+    id: editing?.id ?? crypto.randomUUID(),
+    viewId: editing?.viewId ?? "",
+    values: editing ? values.values : { ...values.values, _draftNew: true },
+    version: editing?.version ?? 0,
+    createdAt: editing?.createdAt ?? now,
+    updatedAt: now
+  };
+}
+function RuntimeSubformEntryDialog({
+  open,
+  title,
+  view,
+  childField,
+  parentValue: linkedParentValue,
+  editing,
+  isSaving,
+  deps,
+  onClose,
+  onSave
+}) {
+  const defaultValues = useMemo5(() => {
+    const values = createBuilderEntryDefaultValues(view, editing);
+    if (linkedParentValue) {
+      values.values[childField] = editing?.values[childField] ?? linkedParentValue;
+    }
+    return values;
+  }, [childField, editing, linkedParentValue, view]);
+  const form = useForm3({
+    defaultValues,
+    values: open ? defaultValues : void 0
+  });
+  const onSubmit = form.handleSubmit(async (values) => {
+    try {
+      await onSave({
+        id: editing?.id,
+        input: {
+          ...values,
+          values: {
+            ...values.values,
+            ...linkedParentValue ? { [childField]: linkedParentValue } : {}
+          }
+        }
+      });
+      onClose();
+      deps.notifications.success(editing ? "Section \u0445\u0430\u0434\u0433\u0430\u043B\u0430\u0433\u0434\u043B\u0430\u0430" : "Section \u043D\u044D\u043C\u044D\u0433\u0434\u043B\u044D\u044D");
+    } catch (error) {
+      deps.notifications.error(
+        deps.notifications.errorMessage(error, "Subform \u0445\u0430\u0434\u0433\u0430\u043B\u0430\u0445\u0430\u0434 \u0430\u043B\u0434\u0430\u0430 \u0433\u0430\u0440\u043B\u0430\u0430")
+      );
+    }
+  });
+  return /* @__PURE__ */ jsx5(deps.DialogShell, { open, title, description: view.title, onClose, children: /* @__PURE__ */ jsx5(FormProvider3, { ...form, children: /* @__PURE__ */ jsxs4(
+    "form",
+    {
+      className: deps.dialogFormClassName,
+      onSubmit: (event) => {
+        event.stopPropagation();
+        void onSubmit(event);
+      },
+      noValidate: true,
+      children: [
+        view.form ? /* @__PURE__ */ jsx5(
+          deps.DialogFields,
+          {
+            formId: view.form.id,
+            viewId: view.id,
+            schema: view.form.schema,
+            namePrefix: "values"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx5(deps.DialogActions, { isSaving, onClose })
+      ]
+    }
+  ) }) });
+}
+function createRuntimeSubformFieldComponent(deps) {
+  return function RuntimeSubformField({
+    subform,
+    parentEntry,
+    draftRows = [],
+    onDraftRowsChange
+  }) {
+    const [isEntryDialogOpen, setEntryDialogOpen] = useState3(false);
+    const [editing, setEditing] = useState3(null);
+    const initializedDraft = useRef(false);
+    const linkedValue = parentValue(parentEntry, subform.parentField);
+    const isDraftMode = Boolean(onDraftRowsChange);
+    const canFetchBackendRows = Boolean(linkedValue);
+    const canUseBackendRows = canFetchBackendRows && !isDraftMode;
+    const isReady = Boolean(
+      subform.viewId && subform.childField && (linkedValue || onDraftRowsChange)
+    );
+    const tableState = deps.useDataTableState({ pageSize: 5 });
+    const query = useMemo5(
+      () => ({
+        ...tableState.query,
+        filterField: subform.childField,
+        filterValue: linkedValue ?? ""
+      }),
+      [linkedValue, subform.childField, tableState.query]
+    );
+    const viewQuery = deps.hooks.useRuntimeBuilderView(subform.viewId, Boolean(subform.viewId));
+    const entriesQuery = deps.hooks.useBuilderViewEntries(
+      subform.viewId,
+      query,
+      isReady && (canUseBackendRows || isDraftMode && canFetchBackendRows)
+    );
+    const save = deps.hooks.useSaveBuilderViewEntry(subform.viewId);
+    const view = viewQuery.data;
+    const columns = useMemo5(() => view ? deps.buildColumns(view) : [], [view]);
+    const rows = (canUseBackendRows ? entriesQuery.data?.items ?? [] : draftRows).filter(
+      (row) => row.values._delete !== true
+    );
+    const table = deps.useDataTable({
+      columns,
+      data: rows,
+      rowCount: canUseBackendRows ? entriesQuery.data?.total ?? 0 : rows.length,
+      state: tableState,
+      getRowId: (row) => row.id
+    });
+    const canOpen = isReady && Boolean(view?.form) && !viewQuery.isPending;
+    const selectedIds = new Set(table.selectedIds);
+    useEffect2(() => {
+      if (!isDraftMode || !view || initializedDraft.current || !entriesQuery.data) return;
+      initializedDraft.current = true;
+      onDraftRowsChange?.({
+        subformKey: subform.key,
+        dataKey: viewTableName(view),
+        rows: entriesQuery.data.items
+      });
+    }, [entriesQuery.data, isDraftMode, onDraftRowsChange, subform.key, view]);
+    return /* @__PURE__ */ jsxs4(
+      deps.Shell,
+      {
+        label: subform.label,
+        buttonLabel: subformButtonLabel(subform),
+        canOpen,
+        missingParentDescription: !linkedValue && !onDraftRowsChange ? `\u042D\u0445\u043B\u044D\u044D\u0434 parent \u043C\u04E9\u0440\u0438\u0439\u0433 \u0445\u0430\u0434\u0433\u0430\u043B\u043D\u0430, \u044D\u0441\u0432\u044D\u043B ${subform.parentField} \u0442\u0430\u043B\u0431\u0430\u0440\u044B\u043D \u0443\u0442\u0433\u044B\u0433 \u0431\u04E9\u0433\u043B\u04E9\u043D\u04E9.` : void 0,
+        onAdd: () => {
+          setEditing(null);
+          setEntryDialogOpen(true);
+        },
+        children: [
+          view?.list && (linkedValue || draftRows.length > 0) ? /* @__PURE__ */ jsx5(
+            deps.DataPanel,
+            {
+              controller: table,
+              isLoading: viewQuery.isPending || canUseBackendRows && entriesQuery.isPending,
+              showDraftDelete: isDraftMode && table.selectedIds.length > 0,
+              onRowClick: (entry) => {
+                setEditing(entry);
+                setEntryDialogOpen(true);
+              },
+              onDeleteSelected: () => {
+                if (!view) return;
+                onDraftRowsChange?.({
+                  subformKey: subform.key,
+                  dataKey: viewTableName(view),
+                  rows: draftRows.filter((row) => !(selectedIds.has(row.id) && row.values._draftNew === true)).map(
+                    (row) => selectedIds.has(row.id) ? { ...row, values: { ...row.values, _delete: true } } : row
+                  )
+                });
+                table.clearSelection();
+              }
+            }
+          ) : null,
+          view ? /* @__PURE__ */ jsx5(
+            RuntimeSubformEntryDialog,
+            {
+              open: isEntryDialogOpen,
+              title: subform.label,
+              view,
+              childField: subform.childField,
+              parentValue: linkedValue,
+              editing,
+              isSaving: canUseBackendRows ? save.isPending : false,
+              deps,
+              onClose: () => {
+                setEntryDialogOpen(false);
+                setEditing(null);
+              },
+              onSave: async (args) => {
+                if (!isDraftMode && canUseBackendRows) {
+                  await save.mutateAsync(args);
+                  await entriesQuery.refetch();
+                  return;
+                }
+                if (!onDraftRowsChange) return;
+                const nextEntry = {
+                  ...draftEntry(args.input, editing),
+                  viewId: view.id
+                };
+                onDraftRowsChange({
+                  subformKey: subform.key,
+                  dataKey: viewTableName(view),
+                  rows: editing ? draftRows.map((row) => row.id === editing.id ? nextEntry : row) : [...draftRows, nextEntry]
+                });
+              }
+            }
+          ) : null
+        ]
+      }
+    );
+  };
+}
+export {
+  createDynamicFormComponent,
+  createDynamicListComponent,
+  createDynamicViewComponent,
+  createRuntimeEntryDialogComponent,
+  createRuntimeSubformFieldComponent
+};
+//# sourceMappingURL=index.js.map