@multiplatform.one/frappe 6.0.0

package/src/devtools/index.ts

@@ -0,0 +1,3 @@
+export { frappeDevtoolsPlugin } from "./plugin";
+export { FrappeDevtoolsPanel } from "./FrappeDevtoolsPanel";
+export type { FrappeDevtoolsPanelProps } from "./FrappeDevtoolsPanel";

package/src/devtools/plugin.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import type { SyncModule } from "../sync";
+import { FrappeDevtoolsPanel } from "./FrappeDevtoolsPanel";
+
+export function frappeDevtoolsPlugin(syncModule: SyncModule) {
+  return {
+    id: "frappe",
+    name: "Frappe",
+    render: (_el: HTMLElement, props: { theme: "dark" | "light" }) => (
+      <FrappeDevtoolsPanel syncModule={syncModule} devtoolsTheme={props.theme} />
+    ),
+  };
+}

package/src/devtools/theme.ts

@@ -0,0 +1,42 @@
+export interface PanelTheme {
+  bg: string;
+  bgSubtle: string;
+  bgHover: string;
+  text: string;
+  textSecondary: string;
+  border: string;
+  accent: string;
+  success: string;
+  warning: string;
+  error: string;
+  pending: string;
+}
+
+export const themes: Record<"light" | "dark", PanelTheme> = {
+  light: {
+    bg: "#ffffff",
+    bgSubtle: "#f5f5f5",
+    bgHover: "#eeeeee",
+    text: "#1a1a1a",
+    textSecondary: "#666666",
+    border: "#e0e0e0",
+    accent: "#3b82f6",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    pending: "#8b5cf6",
+  },
+  dark: {
+    bg: "#1a1a2e",
+    bgSubtle: "#16213e",
+    bgHover: "#0f3460",
+    text: "#e0e0e0",
+    textSecondary: "#a0a0a0",
+    border: "#2a2a4a",
+    accent: "#60a5fa",
+    success: "#4ade80",
+    warning: "#facc15",
+    error: "#f87171",
+    pending: "#a78bfa",
+  },
+};

package/src/doctype.spec.ts

@@ -0,0 +1,451 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { DocTypeField } from "./doctype";
+import {
+  parseDependsOn,
+  parseFormLayout,
+  useDocTypeMeta,
+  useLinkSearch,
+  useDocTypeSearch,
+} from "./doctype";
+
+// ---------------------------------------------------------------------------
+// Shared HTTP mock
+// ---------------------------------------------------------------------------
+
+const mockGetFn = vi.fn();
+
+vi.mock("./core/http", () => {
+  class MockHttpClient {
+    get = mockGetFn;
+  }
+  return { HttpClient: MockHttpClient };
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function field(
+  fieldname: string,
+  fieldtype: DocTypeField["fieldtype"],
+  extra: Partial<DocTypeField> = {},
+): DocTypeField {
+  return { fieldname, fieldtype, ...extra };
+}
+
+const baseConfig = { baseURL: "https://frappe.example.com" };
+
+// Use unique doctype names per test to avoid metaCache collisions
+let testId = 0;
+beforeEach(() => {
+  testId++;
+  vi.clearAllMocks();
+});
+
+// ---------------------------------------------------------------------------
+// parseDependsOn
+// ---------------------------------------------------------------------------
+
+describe("parseDependsOn", () => {
+  it("returns always-true when expression is undefined", () => {
+    const fn = parseDependsOn(undefined);
+    expect(fn({})).toBe(true);
+    expect(fn({ status: "anything" })).toBe(true);
+  });
+
+  it("returns always-true for empty string", () => {
+    const fn = parseDependsOn("");
+    expect(fn({})).toBe(true);
+  });
+
+  it("evaluates eval: prefixed JS equality expression", () => {
+    const fn = parseDependsOn('eval:doc.status=="Active"');
+    expect(fn({ status: "Active" })).toBe(true);
+    expect(fn({ status: "Inactive" })).toBe(false);
+    expect(fn({})).toBe(false);
+  });
+
+  it("evaluates compound eval: expressions with &&", () => {
+    const fn = parseDependsOn("eval:doc.a && doc.b");
+    expect(fn({ a: "x", b: "y" })).toBe(true);
+    expect(fn({ a: "x", b: "" })).toBe(false);
+    expect(fn({ a: "", b: "y" })).toBe(false);
+  });
+
+  it("evaluates numeric comparisons in eval:", () => {
+    const fn = parseDependsOn("eval:doc.count > 0");
+    expect(fn({ count: 5 })).toBe(true);
+    expect(fn({ count: 0 })).toBe(false);
+  });
+
+  it("evaluates doc.field style expression (without eval: prefix)", () => {
+    const fn = parseDependsOn("doc.enabled");
+    expect(fn({ enabled: true })).toBe(true);
+    expect(fn({ enabled: false })).toBe(false);
+    expect(fn({ enabled: "yes" })).toBe(true);
+    expect(fn({})).toBe(false);
+  });
+
+  it("evaluates bare field name as truthy check on doc[fieldname]", () => {
+    const fn = parseDependsOn("is_active");
+    expect(fn({ is_active: true })).toBe(true);
+    expect(fn({ is_active: 1 })).toBe(true);
+    expect(fn({ is_active: false })).toBe(false);
+    expect(fn({})).toBe(false);
+  });
+
+  it("returns false (never throws) for an invalid eval: expression", () => {
+    const fn = parseDependsOn("eval:!!! invalid syntax");
+    expect(() => fn({})).not.toThrow();
+    expect(fn({})).toBe(false);
+  });
+
+  it("returns false (never throws) when expression accesses nested undefined", () => {
+    const fn = parseDependsOn("eval:doc.nested.deep.value");
+    expect(() => fn({})).not.toThrow();
+    expect(fn({})).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// parseFormLayout
+// ---------------------------------------------------------------------------
+
+describe("parseFormLayout", () => {
+  it("returns one empty section for an empty field list", () => {
+    const sections = parseFormLayout([]);
+    expect(sections).toHaveLength(1);
+    expect(sections[0].columns).toHaveLength(1);
+    expect(sections[0].columns[0].fields).toHaveLength(0);
+    expect(sections[0].tab).toBeUndefined();
+  });
+
+  it("adds regular fields to the current column", () => {
+    const fields = [field("name", "Data"), field("status", "Select")];
+    const sections = parseFormLayout(fields);
+    expect(sections).toHaveLength(1);
+    expect(sections[0].columns[0].fields).toEqual(fields);
+  });
+
+  it("skips hidden fields", () => {
+    const fields = [field("visible", "Data"), field("secret", "Data", { hidden: true })];
+    const sections = parseFormLayout(fields);
+    expect(sections[0].columns[0].fields).toHaveLength(1);
+    expect(sections[0].columns[0].fields[0].fieldname).toBe("visible");
+  });
+
+  it("starts a new section on Section Break", () => {
+    const fields = [
+      field("field1", "Data"),
+      field("sec", "Section Break", { label: "Details", collapsible: true }),
+      field("field2", "Data"),
+    ];
+    const sections = parseFormLayout(fields);
+    expect(sections).toHaveLength(2);
+    expect(sections[1].label).toBe("Details");
+    expect(sections[1].collapsible).toBe(true);
+    expect(sections[1].columns[0].fields[0].fieldname).toBe("field2");
+  });
+
+  it("adds a new column on Column Break within the current section", () => {
+    const fields = [field("left", "Data"), field("cb", "Column Break"), field("right", "Data")];
+    const sections = parseFormLayout(fields);
+    expect(sections).toHaveLength(1);
+    expect(sections[0].columns).toHaveLength(2);
+    expect(sections[0].columns[0].fields[0].fieldname).toBe("left");
+    expect(sections[0].columns[1].fields[0].fieldname).toBe("right");
+  });
+
+  it("starts a new section with tab=true on Tab Break", () => {
+    const fields = [
+      field("field1", "Data"),
+      field("tab1", "Tab Break", { label: "Tab 1" }),
+      field("field2", "Data"),
+    ];
+    const sections = parseFormLayout(fields);
+    expect(sections).toHaveLength(2);
+    expect(sections[1].tab).toBe(true);
+    expect(sections[1].label).toBe("Tab 1");
+    expect(sections[1].columns[0].fields[0].fieldname).toBe("field2");
+  });
+
+  it("handles complex layout: multiple sections each with multiple columns", () => {
+    const fields = [
+      field("name", "Data"),
+      field("sec1", "Section Break", { label: "Section 1" }),
+      field("a", "Data"),
+      field("cb", "Column Break"),
+      field("b", "Data"),
+      field("sec2", "Section Break", { label: "Section 2" }),
+      field("c", "Data"),
+    ];
+    const sections = parseFormLayout(fields);
+    expect(sections).toHaveLength(3);
+    expect(sections[0].columns[0].fields[0].fieldname).toBe("name");
+    expect(sections[1].label).toBe("Section 1");
+    expect(sections[1].columns).toHaveLength(2);
+    expect(sections[1].columns[0].fields[0].fieldname).toBe("a");
+    expect(sections[1].columns[1].fields[0].fieldname).toBe("b");
+    expect(sections[2].label).toBe("Section 2");
+    expect(sections[2].columns[0].fields[0].fieldname).toBe("c");
+  });
+
+  it("Column Break at the start of a Section creates an empty first column", () => {
+    const fields = [
+      field("sec", "Section Break"),
+      field("cb", "Column Break"),
+      field("right", "Data"),
+    ];
+    const sections = parseFormLayout(fields);
+    expect(sections[1].columns).toHaveLength(2);
+    expect(sections[1].columns[0].fields).toHaveLength(0);
+    expect(sections[1].columns[1].fields[0].fieldname).toBe("right");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useDocTypeMeta
+// ---------------------------------------------------------------------------
+
+function rawDocType(name: string) {
+  return {
+    name,
+    module: "Core",
+    sort_field: "modified",
+    sort_order: "DESC",
+    fields: [
+      { fieldname: "name", fieldtype: "Data", label: "Name" },
+      { fieldname: "status", fieldtype: "Select", label: "Status", options: "Active\nInactive" },
+    ],
+    permissions: [{ role: "System Manager", read: 1, write: 1 }],
+  };
+}
+
+describe("useDocTypeMeta", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("starts loading and resolves with parsed meta", async () => {
+    const doctype = `DocA${testId}`;
+    // Config must be stable (defined outside renderHook) — hooks with [config]
+    // in deps loop infinitely if a new object is created on every render.
+    const config = { baseURL: `https://meta-${testId}.example.com` };
+    mockGetFn.mockResolvedValueOnce({ payload: { data: rawDocType(doctype) } });
+
+    const { result } = renderHook(() => useDocTypeMeta(config, doctype));
+
+    expect(result.current.isLoading).toBe(true);
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.error).toBeNull();
+    expect(result.current.meta).toBeDefined();
+    expect(result.current.meta!.name).toBe(doctype);
+    expect(result.current.meta!.fields).toHaveLength(2);
+    expect(result.current.meta!.permissions[0].read).toBe(true);
+  });
+
+  it("sets error state when the fetch fails", async () => {
+    const doctype = `DocB${testId}`;
+    const config = { baseURL: `https://meta-err-${testId}.example.com` };
+    mockGetFn.mockRejectedValueOnce(new Error("Not found"));
+
+    const { result } = renderHook(() => useDocTypeMeta(config, doctype));
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.meta).toBeUndefined();
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error!.message).toBe("Not found");
+  });
+
+  it("returns undefined meta and isLoading=false when config is undefined", () => {
+    const { result } = renderHook(() => useDocTypeMeta(undefined, "AnyDoc"));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.meta).toBeUndefined();
+    expect(result.current.error).toBeNull();
+  });
+
+  it("parses field_order to reorder fields", async () => {
+    const doctype = `DocC${testId}`;
+    const config = { baseURL: `https://meta-order-${testId}.example.com` };
+    const raw = {
+      ...rawDocType(doctype),
+      field_order: ["status", "name"], // reversed
+    };
+    mockGetFn.mockResolvedValueOnce({ payload: { data: raw } });
+
+    const { result } = renderHook(() => useDocTypeMeta(config, doctype));
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.meta!.fields[0].fieldname).toBe("status");
+    expect(result.current.meta!.fields[1].fieldname).toBe("name");
+  });
+
+  it("refetch() clears cache and re-fetches", async () => {
+    const doctype = `DocD${testId}`;
+    const config = { baseURL: `https://meta-refetch-${testId}.example.com` };
+    mockGetFn.mockResolvedValue({ payload: { data: rawDocType(doctype) } });
+
+    const { result } = renderHook(() => useDocTypeMeta(config, doctype));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(mockGetFn).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      result.current.refetch();
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(mockGetFn).toHaveBeenCalledTimes(2);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useLinkSearch
+// ---------------------------------------------------------------------------
+
+// Minimal raw DocType response satisfying parseRawDocTypeMeta
+const minimalRawDocType = (name: string) => ({
+  name,
+  module: "Test",
+  sort_field: "modified",
+  sort_order: "DESC",
+  fields: [],
+  permissions: [],
+});
+
+// useLinkSearch calls useDocTypeMeta internally, which issues its own GET for
+// the DocType schema. Tests must account for that first HTTP call.
+
+describe("useLinkSearch", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("returns empty results and isLoading=false when query is empty", async () => {
+    const config = { baseURL: `https://link-${testId}.example.com` };
+    // First call = useDocTypeMeta schema fetch (no query means no search call)
+    mockGetFn.mockResolvedValueOnce({ payload: { data: minimalRawDocType("Customer") } });
+
+    const { result } = renderHook(() => useLinkSearch(config, "Customer", { query: "" }));
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    expect(result.current.results).toHaveLength(0);
+    expect(result.current.isLoading).toBe(false);
+    // Only the DocType meta call; no link search call for empty query
+    expect(mockGetFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("debounces and fetches results for a non-empty query", async () => {
+    const config = { baseURL: `https://link2-${testId}.example.com` };
+    // Call 1: useDocTypeMeta schema fetch
+    mockGetFn.mockResolvedValueOnce({ payload: { data: minimalRawDocType("Customer") } });
+    // Call 2: link search (fires after 300ms debounce)
+    mockGetFn.mockResolvedValueOnce({
+      payload: {
+        message: [
+          { name: "CUST-001", customer_name: "Acme Corp" },
+          { name: "CUST-002", customer_name: "Beta Inc" },
+        ],
+      },
+    });
+
+    const { result } = renderHook(() =>
+      useLinkSearch(config, "Customer", { query: "acme", limit: 10 }),
+    );
+
+    // Use runAllTimersAsync: advances the 300ms debounce timer AND flushes
+    // the resulting async fetch. waitFor can't be used with fake timers because
+    // its internal polling itself uses setTimeout.
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.results).toHaveLength(2);
+    expect(result.current.results[0].value).toBe("CUST-001");
+  });
+
+  it("sets error state on fetch failure", async () => {
+    const config = { baseURL: `https://link-err-${testId}.example.com` };
+    // Call 1: useDocTypeMeta schema fetch
+    mockGetFn.mockResolvedValueOnce({ payload: { data: minimalRawDocType("Customer") } });
+    // Call 2: link search fails
+    mockGetFn.mockRejectedValueOnce(new Error("Search failed"));
+
+    const { result } = renderHook(() => useLinkSearch(config, "Customer", { query: "x" }));
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.results).toHaveLength(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useDocTypeSearch
+// ---------------------------------------------------------------------------
+
+describe("useDocTypeSearch", () => {
+  const docTypeList = [
+    { name: "Customer", module: "Selling", title: "Customer" },
+    { name: "Sales Order", module: "Selling", title: "Sales Order" },
+    { name: "Item", module: "Stock", title: "Item" },
+  ];
+
+  it("returns empty results when config is undefined", () => {
+    const { result } = renderHook(() => useDocTypeSearch(undefined, "customer"));
+    expect(result.current.results).toHaveLength(0);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it("returns empty results when query is empty (even with loaded list)", async () => {
+    const config = { baseURL: `https://search-${testId}.example.com` };
+    mockGetFn.mockResolvedValueOnce({ payload: { data: docTypeList } });
+
+    const { result } = renderHook(() => useDocTypeSearch(config, ""));
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.results).toHaveLength(0);
+  });
+
+  it("filters DocType list locally by name and returns list/report/new suggestions", async () => {
+    const config = { baseURL: `https://search2-${testId}.example.com` };
+    mockGetFn.mockResolvedValueOnce({ payload: { data: docTypeList } });
+
+    const { result } = renderHook(() => useDocTypeSearch(config, "customer"));
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    const types = result.current.results.map((r) => r.type);
+    expect(types).toContain("list");
+    expect(types).toContain("report");
+    expect(types).toContain("new");
+
+    const doctypes = result.current.results.map((r) => r.doctype);
+    expect(doctypes.every((d) => d === "Customer")).toBe(true);
+  });
+
+  it("matches on module name as well as doctype name", async () => {
+    const config = { baseURL: `https://search3-${testId}.example.com` };
+    mockGetFn.mockResolvedValueOnce({ payload: { data: docTypeList } });
+
+    const { result } = renderHook(() => useDocTypeSearch(config, "stock"));
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    const doctypes = [...new Set(result.current.results.map((r) => r.doctype))];
+    expect(doctypes).toContain("Item");
+  });
+});