@multiplatform.one/frappe-ui 6.0.0

package/src/FrappeForm.tsx

@@ -0,0 +1,485 @@
+import {
+  useFrappeCollection,
+  useLiveQuery,
+  useDocTypeMeta,
+  type DocTypeMeta,
+  type DocTypeField,
+  type FormSection,
+} from "@multiplatform.one/frappe";
+import {
+  SchemaForm,
+  type FormSchema,
+  type FormSection as GenericFormSection,
+  type FormColumn as GenericFormColumn,
+  type FieldOverride,
+} from "./schemaForm";
+import type { FieldSchema } from "./fieldRegistry";
+import { FormSidebar, type SidebarSection, type SidebarMetadataEntry } from "./FormSidebar";
+import { eq } from "@tanstack/db";
+import { FloppyDiskIcon, TrashIcon, XIcon } from "@phosphor-icons/react";
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import { Button, Spinner, Text, XStack, YStack } from "tamagui";
+import { Timeline } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useFrappeConfig } from "./FrappeProvider";
+import { dialog } from "@multiplatform.one/desktop";
+
+export interface FrappeFormProps<TDoc extends { name: string; doctype: string }> {
+  baseURL?: string;
+  auth?: { useToken?: boolean; token?: string; type?: string };
+  syncOptions?: Record<string, unknown>;
+  doctype: string;
+  name?: string;
+  fields?: readonly (keyof TDoc & string)[];
+  /** Render-prop children. When provided, schema-driven mode is bypassed. */
+  children?: (props: {
+    doc: Partial<TDoc>;
+    setValue: (field: keyof TDoc, value: unknown) => void;
+    isSubmitting: boolean;
+    errors: Record<string, string>;
+    meta?: DocTypeMeta;
+  }) => React.ReactNode;
+  /** Per-field overrides for schema-driven mode (when children not provided). */
+  overrides?: Record<string, FieldOverride>;
+  /** Fields to hide in schema-driven mode. */
+  hideFields?: string[];
+  /** Fields to force read-only in schema-driven mode. */
+  readOnlyFields?: string[];
+  /** Completely replace the auto-generated layout. */
+  sections?: FormSection[];
+  onSave?: (doc: Partial<TDoc>) => void;
+  onCancel?: () => void;
+  onDelete?: (doc: Partial<TDoc>) => void;
+  showToolbar?: boolean;
+  showSidebar?: boolean;
+  showTimeline?: boolean;
+  disabled?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Frappe DocTypeMeta → Generic FormSchema mapper
+// ---------------------------------------------------------------------------
+
+/**
+ * Maps a Frappe `DocTypeField` to a generic `FieldSchema`.
+ */
+function mapFieldToGenericSchema(field: DocTypeField): FieldSchema {
+  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,
+  };
+}
+
+/**
+ * Maps Frappe `DocTypeMeta` (with optional section overrides) to a
+ * generic `FormSchema` consumable by `SchemaForm` from
+ * `@multiplatform.one/forms`.
+ */
+function mapMetaToFormSchema(meta: DocTypeMeta, sectionOverrides?: FormSection[]): FormSchema {
+  const sections = sectionOverrides ?? meta.sections;
+
+  const genericSections: GenericFormSection[] = sections.map((section) => ({
+    label: section.label,
+    collapsible: section.collapsible,
+    columns: section.columns.map(
+      (col): GenericFormColumn => ({
+        fields: col.fields.map(mapFieldToGenericSchema),
+      }),
+    ),
+  }));
+
+  // Flat list of all fields for depends_on pre-compilation
+  const allFields = meta.fields.map(mapFieldToGenericSchema);
+
+  return {
+    sections: genericSections,
+    fields: allFields,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar Mappers
+// ---------------------------------------------------------------------------
+
+/**
+ * Maps Frappe DocTypeMeta to generic SidebarSection[] for FormSidebar.
+ */
+function mapMetaToSidebarSections(
+  _meta: DocTypeMeta,
+  doc: Record<string, unknown>,
+): SidebarSection[] {
+  const sections: SidebarSection[] = [];
+
+  // Image section (if document has an image field)
+  if (doc.image) {
+    sections.push({
+      key: "image",
+      title: "Image",
+      render: () => null, // image is handled by imageUrl prop
+    });
+  }
+
+  // Assignments section (if present)
+  if (doc._assign && typeof doc._assign === "string") {
+    try {
+      const assignees = JSON.parse(doc._assign || "[]") as string[];
+      sections.push({
+        key: "assignments",
+        title: "Assigned To",
+        items: assignees.map((email: string) => ({
+          id: email,
+          label: email,
+        })),
+        emptyText: "No one assigned",
+      });
+    } catch {
+      // ignore parse errors
+    }
+  }
+
+  return sections;
+}
+
+/**
+ * Maps a Frappe document to generic SidebarMetadataEntry[] for FormSidebar.
+ */
+function mapDocToSidebarMetadata(
+  doc: Record<string, unknown>,
+  t: TFunction,
+): SidebarMetadataEntry[] {
+  const metadata: SidebarMetadataEntry[] = [];
+
+  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;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Thin Frappe wrapper around the generic SchemaForm component.
+ *
+ * Fetches Frappe doctype metadata and document data, maps the metadata
+ * to a generic `FormSchema`, and passes it to `SchemaForm` from
+ * `@multiplatform.one/forms`.
+ */
+export function FrappeForm<TDoc extends { name: string; doctype: string }>({
+  baseURL,
+  auth,
+  syncOptions,
+  doctype,
+  name,
+  fields,
+  children,
+  overrides,
+  hideFields,
+  readOnlyFields,
+  sections,
+  onSave,
+  onCancel,
+  onDelete,
+  showToolbar = true,
+  showSidebar = true,
+  showTimeline = true,
+  disabled = false,
+}: FrappeFormProps<TDoc>) {
+  const config = useFrappeConfig();
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation();
+  const [localDoc, setLocalDoc] = useState<Partial<TDoc>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  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 = 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],
+  );
+
+  // Fetch DocType metadata
+  const { meta } = useDocTypeMeta(frappeConfig, doctype);
+
+  // Map Frappe meta to generic FormSchema
+  const formSchema = useMemo(() => {
+    if (!meta) return undefined;
+    return mapMetaToFormSchema(meta, sections);
+  }, [meta, sections]);
+
+  const docCollection = useFrappeCollection<TDoc>(name ? frappeConfig : undefined, doctype, {
+    fields,
+    filters: name ? { name } : undefined,
+  });
+  const { data: rawDocData, isLoading: isDocLoading } = useLiveQuery(
+    (q) => {
+      if (!docCollection || !name) return null;
+      return q.from({ _doc: docCollection }).where(({ _doc }) => {
+        if (!_doc) return eq(name, name);
+        return eq(_doc.name, name);
+      });
+    },
+    [docCollection, name],
+  );
+  const liveDoc = useMemo(() => {
+    const arr = Array.isArray(rawDocData) ? rawDocData : rawDocData ? [rawDocData] : [];
+    const doc = (arr[0] ?? null) as TDoc | null;
+    return doc
+      ? { data: doc, isLoading: isDocLoading }
+      : name
+        ? { data: null, isLoading: isDocLoading }
+        : null;
+  }, [rawDocData, isDocLoading, name]);
+
+  const collection = useFrappeCollection<TDoc>(frappeConfig, doctype, { fields });
+
+  useEffect(() => {
+    if (liveDoc?.data) {
+      setLocalDoc(liveDoc.data as Partial<TDoc>);
+    } else {
+      setLocalDoc({ doctype } as Partial<TDoc>);
+    }
+  }, [liveDoc?.data, doctype]);
+
+  // Detect unsaved changes
+  const hasUnsavedChanges = useMemo(() => {
+    if (!liveDoc?.data) return Object.keys(localDoc).length > 1;
+    const live = liveDoc.data as Record<string, unknown>;
+    const local = localDoc as Record<string, unknown>;
+    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: keyof TDoc, value: unknown) => {
+    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 as Record<string, unknown>).name as string | undefined) ??
+            `new-${Date.now()}`,
+        } as TDoc;
+        const tx = collection.insert(docToInsert);
+        await tx.isPersisted.promise;
+      }
+      onSave?.(localDoc as Partial<TDoc>);
+    } catch (err: unknown) {
+      const e = err as { exc_type?: string; _server_messages?: string; message?: string };
+      if (e?.exc_type === "ValidationError") {
+        const validationErrors: Record<string, string> = {};
+        if (e._server_messages) {
+          try {
+            const messages = JSON.parse(e._server_messages) as string[];
+            for (const msg of messages) {
+              const parsed =
+                typeof msg === "string" ? (JSON.parse(msg) as { message?: string }) : 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 dialog.confirm(t("Delete this {{doctype}}?", { doctype })))) return;
+    setIsSubmitting(true);
+    setErrors({});
+    try {
+      const tx = collection.delete(name);
+      await tx.isPersisted.promise;
+      onDelete?.(localDoc as Partial<TDoc>);
+    } catch (err) {
+      setErrors({ general: (err as Error)?.message || t("Failed to delete") });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (name && liveDoc?.isLoading) {
+    return (
+      <YStack {...knobProps.panelPadding} alignItems="center">
+        <Spinner size="large" />
+        <Text color="$color10" marginTop="$2">
+          {t("Loading {{doctype}}...", { doctype })}
+        </Text>
+      </YStack>
+    );
+  }
+
+  return (
+    <YStack {...knobProps.gapLg} flex={1}>
+      <XStack flex={1} {...knobProps.gapLg}>
+        {/* Sidebar (edit mode only) */}
+        {showSidebar && name && meta && (
+          <FormSidebar
+            sections={mapMetaToSidebarSections(meta, localDoc as Record<string, any>)}
+            metadata={mapDocToSidebarMetadata(localDoc as Record<string, any>, t)}
+          />
+        )}
+
+        {/* Form body */}
+        <YStack flex={1} {...knobProps.gapLg}>
+          {children ? (
+            // Render-prop mode
+            children({
+              doc: localDoc,
+              setValue,
+              isSubmitting,
+              errors,
+              meta,
+            })
+          ) : formSchema ? (
+            // Schema-driven mode using generic SchemaForm from @multiplatform.one/forms
+            <SchemaForm
+              schema={formSchema}
+              doc={localDoc as Record<string, any>}
+              setValue={(field, value) => setValue(field as keyof TDoc, value)}
+              errors={errors}
+              disabled={disabled}
+              overrides={overrides}
+              hideFields={hideFields}
+              readOnlyFields={readOnlyFields}
+            />
+          ) : (
+            // Loading metadata
+            <YStack {...knobProps.panelPadding} alignItems="center">
+              <Spinner size="large" />
+              <Text color="$color10" marginTop="$2">
+                {t("Loading form...")}
+              </Text>
+            </YStack>
+          )}
+
+          {errors.general && (
+            <Text color="$red10" fontSize="$2">
+              {errors.general}
+            </Text>
+          )}
+
+          {showToolbar && (
+            <XStack
+              {...knobProps.gap}
+              justifyContent="flex-end"
+              alignItems="center"
+              paddingTop="$3"
+            >
+              {hasUnsavedChanges && (
+                <Text color="$orange10" fontSize="$2" marginRight="auto">
+                  {t("Not Saved")}
+                </Text>
+              )}
+
+              {name && onDelete && (
+                <Button
+                  theme="red"
+                  variant="outlined"
+                  icon={isSubmitting ? Spinner : TrashIcon}
+                  disabled={isSubmitting || disabled}
+                  onPress={handleDelete}
+                >
+                  {t("Delete")}
+                </Button>
+              )}
+
+              {onCancel && (
+                <Button
+                  variant="outlined"
+                  icon={XIcon}
+                  disabled={isSubmitting || disabled}
+                  onPress={onCancel}
+                >
+                  {t("Cancel")}
+                </Button>
+              )}
+
+              <Button
+                theme="active"
+                icon={isSubmitting ? Spinner : FloppyDiskIcon}
+                disabled={isSubmitting || disabled}
+                onPress={handleSave}
+              >
+                {isSubmitting ? t("Saving...") : t("Save")}
+              </Button>
+            </XStack>
+          )}
+        </YStack>
+      </XStack>
+
+      {/* Timeline (edit mode only) */}
+      {showTimeline && name && <Timeline entries={[]} label={t("Activity")} />}
+    </YStack>
+  );
+}