@multiplatform.one/frappe-ui 6.0.0

package/src/FrappeTreeView.tsx

@@ -0,0 +1,332 @@
+import { useDocTypeMeta, HttpClient, type AuthConfig } from "@multiplatform.one/frappe";
+import { TreeView, type TreeNode } from "@multiplatform.one/components";
+import { TreeStructureIcon } from "@phosphor-icons/react";
+import React, { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Spinner, Text, YStack, type YStackProps } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useFrappeConfig } from "./FrappeProvider";
+
+export interface FrappeTreeViewProps<TDoc extends { name: string; doctype: string }> extends Omit<
+  YStackProps,
+  "children"
+> {
+  doctype: string;
+  parentField?: string;
+  titleField?: string;
+  valueField?: string;
+  onNodeClick?: (doc: Partial<TDoc>) => void;
+  enableDragDrop?: boolean;
+  baseURL?: string;
+  auth?: { useToken?: boolean; token?: string; type?: string };
+  syncOptions?: Record<string, unknown>;
+}
+
+/**
+ * Thin Frappe wrapper around the generic TreeView component.
+ *
+ * Fetches tree root nodes and lazily loads children via the Frappe REST API,
+ * then maps them into `TreeNode` objects for the generic `TreeView` from
+ * `@multiplatform.one/components`.
+ */
+export function FrappeTreeView<TDoc extends { name: string; doctype: string }>({
+  doctype,
+  parentField: parentFieldProp,
+  titleField: titleFieldProp,
+  valueField,
+  onNodeClick,
+  enableDragDrop: _enableDragDrop = false,
+  baseURL,
+  auth,
+  syncOptions,
+  ...stackProps
+}: FrappeTreeViewProps<TDoc>) {
+  const config = useFrappeConfig();
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation();
+
+  const finalBaseURL = baseURL ?? config?.baseURL;
+  const finalAuth = auth ?? config?.auth;
+  const finalSyncOptions = syncOptions ?? config?.syncOptions;
+
+  if (!finalBaseURL) {
+    throw new Error("FrappeTreeView requires baseURL prop or FrappeProvider with baseURL");
+  }
+
+  const appConfig = {
+    baseURL: finalBaseURL,
+    socketPort: config?.socketPort,
+    auth: finalAuth,
+    syncOptions: finalSyncOptions,
+    fixtures: config?.fixtures,
+  };
+
+  const { meta, isLoading: isMetaLoading } = useDocTypeMeta(appConfig, doctype);
+
+  const effectiveTitleField = titleFieldProp ?? meta?.title_field ?? "name";
+  const effectiveParentField =
+    parentFieldProp ?? `parent_${doctype.toLowerCase().replace(/ /g, "_")}`;
+
+  // Internal tree node data (before conversion to generic TreeNode)
+  const [nodeDataMap, setNodeDataMap] = useState<
+    Map<
+      string,
+      {
+        name: string;
+        title: string;
+        data: Record<string, unknown>;
+        children: string[];
+        hasChildren: boolean;
+      }
+    >
+  >(new Map());
+  const [rootNodeNames, setRootNodeNames] = useState<string[]>([]);
+  const [isLoadingRoots, setIsLoadingRoots] = useState(true);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  // HttpClient for lazy-loading
+  const httpClientRef = useRef<HttpClient | null>(null);
+  if (!httpClientRef.current && finalBaseURL) {
+    const authConfig: AuthConfig | undefined = finalAuth
+      ? {
+          useToken: finalAuth.useToken,
+          token: finalAuth.token,
+          type: finalAuth.type as AuthConfig["type"],
+        }
+      : undefined;
+    httpClientRef.current = new HttpClient(finalBaseURL, authConfig);
+  }
+
+  // Fetch root nodes
+  useEffect(() => {
+    if (!meta || !meta.is_tree) return;
+    const http = httpClientRef.current;
+    if (!http) return;
+
+    let cancelled = false;
+    setIsLoadingRoots(true);
+
+    (async () => {
+      try {
+        const params = new URLSearchParams();
+        params.set("doctype", doctype);
+        params.set("fields", JSON.stringify(["name", effectiveTitleField, effectiveParentField]));
+        params.set("filters", JSON.stringify([[effectiveParentField, "in", ["", null]]]));
+        params.set("limit_page_length", "0");
+        params.set("order_by", "name asc");
+
+        const response = await http.get<{ data: Record<string, unknown>[] }>(
+          `/api/resource/${encodeURIComponent(doctype)}?${params.toString()}`,
+        );
+
+        if (cancelled) return;
+
+        const docs = response.payload?.data ?? [];
+        const newMap = new Map<string, any>();
+        const rootNames: string[] = [];
+
+        for (const doc of docs) {
+          const name = String(doc.name);
+          rootNames.push(name);
+          newMap.set(name, {
+            name,
+            title: String(doc[effectiveTitleField] || doc.name),
+            data: doc,
+            children: [],
+            hasChildren: true,
+          });
+        }
+
+        setNodeDataMap(newMap);
+        setRootNodeNames(rootNames);
+      } catch (err) {
+        console.error("Failed to fetch tree root nodes:", err);
+      } finally {
+        if (!cancelled) setIsLoadingRoots(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [meta, doctype, effectiveTitleField, effectiveParentField]);
+
+  // Lazy-load children
+  const loadChildren = useCallback(
+    async (parentName: string) => {
+      const http = httpClientRef.current;
+      if (!http) return;
+
+      try {
+        const params = new URLSearchParams();
+        params.set("doctype", doctype);
+        params.set("fields", JSON.stringify(["name", effectiveTitleField, effectiveParentField]));
+        params.set("filters", JSON.stringify([[effectiveParentField, "=", parentName]]));
+        params.set("limit_page_length", "0");
+        params.set("order_by", "name asc");
+
+        const response = await http.get<{ data: Record<string, unknown>[] }>(
+          `/api/resource/${encodeURIComponent(doctype)}?${params.toString()}`,
+        );
+
+        const docs = response.payload?.data ?? [];
+
+        setNodeDataMap((prev) => {
+          const next = new Map(prev);
+          const childNames: string[] = [];
+
+          for (const doc of docs) {
+            const name = String(doc.name);
+            childNames.push(name);
+            if (!next.has(name)) {
+              next.set(name, {
+                name,
+                title: String(doc[effectiveTitleField] || doc.name),
+                data: doc,
+                children: [],
+                hasChildren: true,
+              });
+            }
+          }
+
+          const parentNode = next.get(parentName);
+          if (parentNode) {
+            next.set(parentName, {
+              ...parentNode,
+              children: childNames,
+              hasChildren: childNames.length > 0,
+            });
+          }
+
+          return next;
+        });
+      } catch (err) {
+        console.error(`Failed to fetch children of ${parentName}:`, err);
+      }
+    },
+    [doctype, effectiveTitleField, effectiveParentField],
+  );
+
+  // Build generic TreeNode[] from internal state
+  const treeNodes = useMemo((): TreeNode<Record<string, unknown>>[] => {
+    const buildNode = (name: string): TreeNode<Record<string, unknown>> | null => {
+      const nodeData = nodeDataMap.get(name);
+      if (!nodeData) return null;
+
+      const children = nodeData.children.map(buildNode).filter(Boolean) as TreeNode<
+        Record<string, unknown>
+      >[];
+
+      return {
+        id: nodeData.name,
+        label: nodeData.title || nodeData.name,
+        children: children.length > 0 ? children : undefined,
+        data: nodeData.data,
+      };
+    };
+
+    return rootNodeNames.map(buildNode).filter(Boolean) as TreeNode<Record<string, unknown>>[];
+  }, [rootNodeNames, nodeDataMap]);
+
+  // Handle node toggle (expand/collapse with lazy loading)
+  const handleNodeToggle = useCallback(
+    (node: TreeNode<Record<string, unknown>>) => {
+      const nodeData = nodeDataMap.get(node.id);
+      if (!nodeData) return;
+
+      if (expandedIds.has(node.id)) {
+        // Collapse
+        setExpandedIds((prev) => {
+          const next = new Set(prev);
+          next.delete(node.id);
+          return next;
+        });
+      } else {
+        // Expand - lazy load if no children loaded yet
+        if (nodeData.children.length === 0 && nodeData.hasChildren) {
+          loadChildren(node.id);
+        }
+        setExpandedIds((prev) => {
+          const next = new Set(prev);
+          next.add(node.id);
+          return next;
+        });
+      }
+    },
+    [nodeDataMap, expandedIds, loadChildren],
+  );
+
+  // Handle node select
+  const handleNodeSelect = useCallback(
+    (node: TreeNode<Record<string, unknown>>) => {
+      onNodeClick?.(node.data as Partial<TDoc>);
+    },
+    [onNodeClick],
+  );
+
+  // Loading metadata
+  if (isMetaLoading) {
+    return (
+      <YStack
+        {...knobProps.panelPadding}
+        alignItems="center"
+        justifyContent="center"
+        {...stackProps}
+      >
+        <Spinner size="large" />
+        <Text color="$color10" marginTop="$2">
+          {t("Loading {{doctype}} schema...", { doctype })}
+        </Text>
+      </YStack>
+    );
+  }
+
+  // Not a tree doctype
+  if (meta && !meta.is_tree) {
+    return (
+      <YStack {...knobProps.panelPadding} alignItems="center" {...knobProps.gap} {...stackProps}>
+        <TreeStructureIcon size={48} color="$color8" />
+        <Text color="$color10">{t("This DocType does not support tree view")}</Text>
+      </YStack>
+    );
+  }
+
+  // Loading root nodes
+  if (isLoadingRoots) {
+    return (
+      <YStack
+        {...knobProps.panelPadding}
+        alignItems="center"
+        justifyContent="center"
+        {...stackProps}
+      >
+        <Spinner size="large" />
+        <Text color="$color10" marginTop="$2">
+          {t("Loading {{doctype}} tree...", { doctype })}
+        </Text>
+      </YStack>
+    );
+  }
+
+  return (
+    <TreeView
+      {...knobProps.borderRadius}
+      nodes={treeNodes}
+      renderNode={(node, _depth) => (
+        <Text fontSize={knobProps.sizeToken} paddingVertical="$1">
+          {node.label}
+          {valueField && node.data && (node.data as any)[valueField] != null && (
+            <Text color="$color10" fontSize="$2" marginLeft="$2">
+              {String((node.data as any)[valueField])}
+            </Text>
+          )}
+        </Text>
+      )}
+      onNodeToggle={handleNodeToggle}
+      onNodeSelect={handleNodeSelect}
+      defaultExpandedIds={Array.from(expandedIds)}
+      emptyMessage={t("No items found")}
+      {...(stackProps as any)}
+    />
+  );
+}

package/src/components/attachments.tsx

@@ -0,0 +1,86 @@
+import {
+  Attachments as BaseAttachments,
+  type AttachmentItem,
+  type AttachmentsProps,
+} from "@multiplatform.one/components";
+import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+import { useMemo } from "react";
+import { useFrappeConfig } from "../FrappeProvider";
+
+export interface FrappeFile {
+  name: string;
+  doctype: string;
+  file_name: string;
+  file_url: string;
+  file_size: number;
+  file_type?: string;
+  is_private?: number | boolean;
+  attached_to_doctype?: string;
+  attached_to_name?: string;
+  attached_to_field?: string;
+  creation?: string;
+  modified?: string;
+}
+
+export interface FrappeAttachmentsProps extends Omit<AttachmentsProps, "items"> {
+  doctype: string;
+  docname: string;
+  /** If provided, only show attachments for this field */
+  fieldname?: string;
+}
+
+function frappeFileToItem(file: FrappeFile): AttachmentItem {
+  return {
+    id: file.name,
+    fileName: file.file_name,
+    fileUrl: file.file_url,
+    fileSize: file.file_size,
+    fileType: file.file_type,
+  };
+}
+
+export function Attachments({ doctype, docname, fieldname, ...props }: FrappeAttachmentsProps) {
+  const config = useFrappeConfig();
+
+  const filters = useMemo(() => {
+    const base: Array<[string, string, unknown]> = [
+      ["attached_to_doctype", "=", doctype],
+      ["attached_to_name", "=", docname],
+    ];
+    if (fieldname) base.push(["attached_to_field", "=", fieldname]);
+    return base;
+  }, [doctype, docname, fieldname]);
+
+  const collection = useFrappeCollection<FrappeFile>(
+    config ? { baseURL: config.baseURL, auth: config.auth, fixtures: config.fixtures } : undefined,
+    "File",
+    {
+      filters,
+      fields: [
+        "name",
+        "file_name",
+        "file_url",
+        "file_size",
+        "file_type",
+        "is_private",
+        "attached_to_doctype",
+        "attached_to_name",
+        "attached_to_field",
+        "creation",
+        "modified",
+      ],
+    },
+  );
+
+  const { data } = useLiveQuery(
+    (q) => (collection ? q.from({ _list: collection }) : null),
+    [collection],
+  );
+
+  const items = useMemo(
+    () => ((data as FrappeFile[] | undefined) ?? []).map(frappeFileToItem),
+    [data],
+  );
+
+  return <BaseAttachments items={items} {...props} />;
+}

package/src/components/tags.tsx

@@ -0,0 +1,108 @@
+import { Tags as BaseTags, type TagItem, type TagsProps } from "@multiplatform.one/components";
+import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+import { useCallback, useMemo } from "react";
+import { useFrappeConfig } from "../FrappeProvider";
+
+export interface FrappeTag {
+  name: string;
+  doctype: string;
+  creation?: string;
+  modified?: string;
+}
+
+export interface FrappeTagLink {
+  name: string;
+  doctype: string;
+  tag: string;
+  document_type: string;
+  document_name: string;
+  creation?: string;
+  modified?: string;
+}
+
+export interface FrappeTagsProps extends Omit<TagsProps, "tags" | "suggestions"> {
+  doctype: string;
+  docname: string;
+}
+
+export function Tags({ doctype, docname, onAdd, onRemove, enableAdd, ...props }: FrappeTagsProps) {
+  const config = useFrappeConfig();
+
+  const connectionConfig = config
+    ? { baseURL: config.baseURL, auth: config.auth, fixtures: config.fixtures }
+    : undefined;
+
+  const tagLinkFilters = useMemo<Array<[string, string, unknown]>>(
+    () => [
+      ["document_type", "=", doctype],
+      ["document_name", "=", docname],
+    ],
+    [doctype, docname],
+  );
+
+  const tagLinkCollection = useFrappeCollection<FrappeTagLink>(connectionConfig, "Tag Link", {
+    filters: tagLinkFilters,
+    fields: ["name", "tag", "document_type", "document_name", "creation", "modified"],
+  });
+
+  const tagCollection = useFrappeCollection<FrappeTag>(connectionConfig, "Tag", {
+    fields: ["name", "creation", "modified"],
+  });
+
+  const { data: tagLinksData } = useLiveQuery(
+    (q) => (tagLinkCollection ? q.from({ _list: tagLinkCollection }) : null),
+    [tagLinkCollection],
+  );
+
+  const { data: allTagsData } = useLiveQuery(
+    (q) => (tagCollection ? q.from({ _list: tagCollection }) : null),
+    [tagCollection],
+  );
+
+  const tags = useMemo<TagItem[]>(
+    () =>
+      ((tagLinksData as FrappeTagLink[] | undefined) ?? []).map((link) => ({
+        id: link.name,
+        label: link.tag,
+      })),
+    [tagLinksData],
+  );
+
+  const suggestions = useMemo<TagItem[]>(
+    () =>
+      ((allTagsData as FrappeTag[] | undefined) ?? []).map((tag) => ({
+        id: tag.name,
+        label: tag.name,
+      })),
+    [allTagsData],
+  );
+
+  const handleAdd = useCallback(
+    (tagName: string) => {
+      onAdd?.(tagName);
+    },
+    [onAdd],
+  );
+
+  const handleRemove = useCallback(
+    (tag: TagItem) => {
+      onRemove?.(tag);
+    },
+    [onRemove],
+  );
+
+  // Always provide onAdd when enableAdd is requested so the button renders.
+  // handleAdd calls onAdd if provided, or is a no-op otherwise.
+  const effectiveEnableAdd = enableAdd !== false;
+
+  return (
+    <BaseTags
+      tags={tags}
+      suggestions={suggestions}
+      onAdd={effectiveEnableAdd ? handleAdd : undefined}
+      onRemove={onRemove ? handleRemove : undefined}
+      enableAdd={effectiveEnableAdd}
+      {...props}
+    />
+  );
+}