@multiplatform.one/frappe-ui 6.0.0

package/dist/cjs/FrappeForm.cjs

@@ -0,0 +1,410 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FrappeForm_exports = {};
+__export(FrappeForm_exports, {
+  FrappeForm: () => FrappeForm
+});
+module.exports = __toCommonJS(FrappeForm_exports);
+var import_frappe = require("@multiplatform.one/frappe");
+var import_schemaForm = require("./schemaForm/index.cjs");
+var import_FormSidebar = require("./FormSidebar.cjs");
+var import_db = require("@tanstack/db");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_FrappeProvider = require("./FrappeProvider.cjs");
+var import_desktop = require("@multiplatform.one/desktop");
+var import_jsx_runtime = require("react/jsx-runtime");
+function mapFieldToGenericSchema(field) {
+  return {
+    type: field.fieldtype,
+    name: field.fieldname,
+    label: field.label,
+    options: field.options,
+    required: !!field.reqd,
+    hidden: !!field.hidden,
+    readOnly: !!field.read_only,
+    precision: field.precision,
+    depends_on: field.depends_on,
+    // Pass through additional Frappe-specific metadata
+    fieldtype: field.fieldtype,
+    fieldname: field.fieldname,
+    in_list_view: field.in_list_view,
+    in_standard_filter: field.in_standard_filter
+  };
+}
+function mapMetaToFormSchema(meta, sectionOverrides) {
+  const sections = sectionOverrides ?? meta.sections;
+  const genericSections = sections.map(section => ({
+    label: section.label,
+    collapsible: section.collapsible,
+    columns: section.columns.map(col => ({
+      fields: col.fields.map(mapFieldToGenericSchema)
+    }))
+  }));
+  const allFields = meta.fields.map(mapFieldToGenericSchema);
+  return {
+    sections: genericSections,
+    fields: allFields
+  };
+}
+function mapMetaToSidebarSections(_meta, doc) {
+  const sections = [];
+  if (doc.image) {
+    sections.push({
+      key: "image",
+      title: "Image",
+      render: () => null
+      // image is handled by imageUrl prop
+    });
+  }
+  if (doc._assign && typeof doc._assign === "string") {
+    try {
+      const assignees = JSON.parse(doc._assign || "[]");
+      sections.push({
+        key: "assignments",
+        title: "Assigned To",
+        items: assignees.map(email => ({
+          id: email,
+          label: email
+        })),
+        emptyText: "No one assigned"
+      });
+    } catch {}
+  }
+  return sections;
+}
+function mapDocToSidebarMetadata(doc, t) {
+  const metadata = [];
+  if (doc.owner) {
+    metadata.push({
+      label: t("Created by {{user}}", {
+        user: doc.owner
+      })
+    });
+  }
+  if (doc.modified_by) {
+    metadata.push({
+      label: t("Modified by {{user}}", {
+        user: doc.modified_by
+      })
+    });
+  }
+  if (doc.creation) {
+    metadata.push({
+      label: t("Created on {{date}}", {
+        date: doc.creation
+      })
+    });
+  }
+  return metadata;
+}
+function FrappeForm({
+  baseURL,
+  auth,
+  syncOptions,
+  doctype,
+  name,
+  fields,
+  children,
+  overrides,
+  hideFields,
+  readOnlyFields,
+  sections,
+  onSave,
+  onCancel,
+  onDelete,
+  showToolbar = true,
+  showSidebar = true,
+  showTimeline = true,
+  disabled = false
+}) {
+  const config = (0, import_FrappeProvider.useFrappeConfig)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const [localDoc, setLocalDoc] = (0, import_react2.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
+  const [errors, setErrors] = (0, import_react2.useState)({});
+  const finalBaseURL = baseURL ?? config?.baseURL;
+  const finalAuth = auth ?? config?.auth;
+  const finalSyncOptions = syncOptions ?? config?.syncOptions;
+  if (!finalBaseURL) {
+    throw new Error("FrappeForm requires baseURL prop or FrappeProvider with baseURL");
+  }
+  const frappeConfig = (0, import_react2.useMemo)(() => ({
+    baseURL: finalBaseURL,
+    socketPort: config?.socketPort,
+    auth: finalAuth,
+    syncOptions: finalSyncOptions,
+    fixtures: config?.fixtures
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [finalBaseURL, config?.socketPort, finalSyncOptions, config?.fixtures]);
+  const {
+    meta
+  } = (0, import_frappe.useDocTypeMeta)(frappeConfig, doctype);
+  const formSchema = (0, import_react2.useMemo)(() => {
+    if (!meta) return void 0;
+    return mapMetaToFormSchema(meta, sections);
+  }, [meta, sections]);
+  const docCollection = (0, import_frappe.useFrappeCollection)(name ? frappeConfig : void 0, doctype, {
+    fields,
+    filters: name ? {
+      name
+    } : void 0
+  });
+  const {
+    data: rawDocData,
+    isLoading: isDocLoading
+  } = (0, import_frappe.useLiveQuery)(q => {
+    if (!docCollection || !name) return null;
+    return q.from({
+      _doc: docCollection
+    }).where(({
+      _doc
+    }) => {
+      if (!_doc) return (0, import_db.eq)(name, name);
+      return (0, import_db.eq)(_doc.name, name);
+    });
+  }, [docCollection, name]);
+  const liveDoc = (0, import_react2.useMemo)(() => {
+    const arr = Array.isArray(rawDocData) ? rawDocData : rawDocData ? [rawDocData] : [];
+    const doc = arr[0] ?? null;
+    return doc ? {
+      data: doc,
+      isLoading: isDocLoading
+    } : name ? {
+      data: null,
+      isLoading: isDocLoading
+    } : null;
+  }, [rawDocData, isDocLoading, name]);
+  const collection = (0, import_frappe.useFrappeCollection)(frappeConfig, doctype, {
+    fields
+  });
+  (0, import_react2.useEffect)(() => {
+    if (liveDoc?.data) {
+      setLocalDoc(liveDoc.data);
+    } else {
+      setLocalDoc({
+        doctype
+      });
+    }
+  }, [liveDoc?.data, doctype]);
+  const hasUnsavedChanges = (0, import_react2.useMemo)(() => {
+    if (!liveDoc?.data) return Object.keys(localDoc).length > 1;
+    const live = liveDoc.data;
+    const local = localDoc;
+    for (const key of Object.keys(local)) {
+      if (key === "doctype") continue;
+      if (live[key] !== local[key]) return true;
+    }
+    return false;
+  }, [liveDoc?.data, localDoc]);
+  const setValue = (field, value) => {
+    setLocalDoc(prev => ({
+      ...prev,
+      [field]: value
+    }));
+    setErrors(prev => {
+      const newErrors = {
+        ...prev
+      };
+      delete newErrors[String(field)];
+      return newErrors;
+    });
+  };
+  const handleSave = async () => {
+    if (!collection) return;
+    setIsSubmitting(true);
+    setErrors({});
+    try {
+      if (name) {
+        const tx = collection.update(name, draft => {
+          Object.assign(draft, localDoc);
+        });
+        await tx.isPersisted.promise;
+      } else {
+        const docToInsert = {
+          ...localDoc,
+          doctype,
+          name: localDoc.name ?? `new-${Date.now()}`
+        };
+        const tx = collection.insert(docToInsert);
+        await tx.isPersisted.promise;
+      }
+      onSave?.(localDoc);
+    } catch (err) {
+      const e = err;
+      if (e?.exc_type === "ValidationError") {
+        const validationErrors = {};
+        if (e._server_messages) {
+          try {
+            const messages = JSON.parse(e._server_messages);
+            for (const msg of messages) {
+              const parsed = typeof msg === "string" ? JSON.parse(msg) : msg;
+              if (parsed.message) {
+                validationErrors.general = parsed.message;
+              }
+            }
+          } catch {
+            validationErrors.general = t("Validation error occurred");
+          }
+        }
+        setErrors(validationErrors);
+      } else {
+        setErrors({
+          general: e?.message || t("Failed to save document")
+        });
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleDelete = async () => {
+    if (!collection || !name) return;
+    if (!(await import_desktop.dialog.confirm(t("Delete this {{doctype}}?", {
+      doctype
+    })))) return;
+    setIsSubmitting(true);
+    setErrors({});
+    try {
+      const tx = collection.delete(name);
+      await tx.isPersisted.promise;
+      onDelete?.(localDoc);
+    } catch (err) {
+      setErrors({
+        general: err?.message || t("Failed to delete")
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  if (name && liveDoc?.isLoading) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+        size: "large"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        marginTop: "$2",
+        children: t("Loading {{doctype}}...", {
+          doctype
+        })
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gapLg,
+    flex: 1,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      flex: 1,
+      ...knobProps.gapLg,
+      children: [showSidebar && name && meta && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FormSidebar.FormSidebar, {
+        sections: mapMetaToSidebarSections(meta, localDoc),
+        metadata: mapDocToSidebarMetadata(localDoc, t)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        flex: 1,
+        ...knobProps.gapLg,
+        children: [children ?
+        // Render-prop mode
+        children({
+          doc: localDoc,
+          setValue,
+          isSubmitting,
+          errors,
+          meta
+        }) : formSchema ?
+        // Schema-driven mode using generic SchemaForm from @multiplatform.one/forms
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)(import_schemaForm.SchemaForm, {
+          schema: formSchema,
+          doc: localDoc,
+          setValue: (field, value) => setValue(field, value),
+          errors,
+          disabled,
+          overrides,
+          hideFields,
+          readOnlyFields
+        }) :
+        // Loading metadata
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          ...knobProps.panelPadding,
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+            size: "large"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            color: "$color10",
+            marginTop: "$2",
+            children: t("Loading form...")
+          })]
+        }), errors.general && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$red10",
+          fontSize: "$2",
+          children: errors.general
+        }), showToolbar && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          ...knobProps.gap,
+          justifyContent: "flex-end",
+          alignItems: "center",
+          paddingTop: "$3",
+          children: [hasUnsavedChanges && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            color: "$orange10",
+            fontSize: "$2",
+            marginRight: "auto",
+            children: t("Not Saved")
+          }), name && onDelete && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            theme: "red",
+            variant: "outlined",
+            icon: isSubmitting ? import_tamagui.Spinner : import_react.TrashIcon,
+            disabled: isSubmitting || disabled,
+            onPress: handleDelete,
+            children: t("Delete")
+          }), onCancel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            variant: "outlined",
+            icon: import_react.XIcon,
+            disabled: isSubmitting || disabled,
+            onPress: onCancel,
+            children: t("Cancel")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            theme: "active",
+            icon: isSubmitting ? import_tamagui.Spinner : import_react.FloppyDiskIcon,
+            disabled: isSubmitting || disabled,
+            onPress: handleSave,
+            children: isSubmitting ? t("Saving...") : t("Save")
+          })]
+        })]
+      })]
+    }), showTimeline && name && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Timeline, {
+      entries: [],
+      label: t("Activity")
+    })]
+  });
+}