@multiplatform.one/frappe-ui 7.6.1 → 7.6.3

package/src/SyncErrorNotice.stories.tsx

@@ -0,0 +1,50 @@
+import { action } from "@multiplatform.one/storybook";
+import { YStack } from "tamagui";
+import { SyncErrorNotice } from "./SyncErrorNotice";
+
+export default {
+  title: "FrappeUI/SyncErrorNotice",
+  component: SyncErrorNotice,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Rejected-write notice: role=alert message with Retry (same mutation id) and Dismiss. Each affordance only renders when its handler is provided.",
+      },
+    },
+  },
+  argTypes: {
+    message: { control: "text" },
+    retryLabel: { control: "text" },
+    dismissLabel: { control: "text" },
+  },
+};
+
+export const Default = () => (
+  <SyncErrorNotice
+    message="Could not add comment"
+    onRetry={action("onRetry")}
+    onDismiss={action("onDismiss")}
+  />
+);
+Default.storyName = "Main";
+
+export const AllStates = () => (
+  <YStack gap="$4" width={480}>
+    <SyncErrorNotice
+      message="Could not add comment"
+      onRetry={action("onRetry")}
+      onDismiss={action("onDismiss")}
+    />
+    <SyncErrorNotice message="Write rejected — retry only" onRetry={action("onRetry")} />
+    <SyncErrorNotice message="No actions" />
+    <SyncErrorNotice
+      message="Custom labels"
+      onRetry={action("onRetry")}
+      onDismiss={action("onDismiss")}
+      retryLabel="Try again"
+      dismissLabel="Ignore"
+    />
+  </YStack>
+);

package/src/desk/DeskFormSidebar.spec.tsx

@@ -0,0 +1,90 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import React from "react";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeProvider } from "../FrappeProvider";
+import { DeskFormSidebar } from "./DeskFormSidebar";
+
+const mockUseDocTypeMeta = vi.fn();
+const mockUseFrappeCollection = vi.fn();
+const mockUseLiveQuery = vi.fn();
+
+vi.mock("@multiplatform.one/frappe", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    useDocTypeMeta: (...args: unknown[]) => mockUseDocTypeMeta(...args),
+    useFrappeCollection: (...args: unknown[]) => mockUseFrappeCollection(...args),
+    useLiveQuery: (...args: unknown[]) => mockUseLiveQuery(...args),
+  };
+});
+
+vi.mock("../FormSidebar", () => ({
+  FormSidebar: (props: Record<string, unknown>) =>
+    React.createElement(
+      "div",
+      {
+        "data-testid": props["data-testid"] ?? "desk-form-sidebar",
+        "data-section-keys": Array.isArray(props.sections)
+          ? (props.sections as Array<{ key: string }>).map((section) => section.key).join(",")
+          : "",
+      },
+      "sidebar",
+    ),
+}));
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockUseDocTypeMeta.mockReturnValue({
+    meta: { image_field: "image" },
+    isLoading: false,
+    error: null,
+  });
+  mockUseFrappeCollection.mockReturnValue({ id: "mock" });
+});
+
+afterEach(cleanup);
+
+function renderSidebar(name = "TODO-001") {
+  return renderWithProviders(
+    <FrappeProvider baseURL="https://bench.example.com">
+      <DeskFormSidebar doctype="Todo" name={name} />
+    </FrappeProvider>,
+  );
+}
+
+describe("DeskFormSidebar (MPO-111)", () => {
+  it("renders nothing until the document arrives", () => {
+    mockUseLiveQuery.mockReturnValue({ data: [] });
+    const { container } = renderSidebar();
+    expect(container.querySelector('[data-testid="desk-form-sidebar"]')).toBeNull();
+  });
+
+  it("mounts the FormSidebar once the doc query returns a row", async () => {
+    const doc = {
+      name: "TODO-001",
+      doctype: "Todo",
+      description: "Review",
+      owner: "jane@example.com",
+    };
+    // Three live queries (doc, share, assignment). Cycle so Strict Mode
+    // remounts still see a doc on the first slot.
+    let call = 0;
+    mockUseLiveQuery.mockImplementation(() => {
+      const slot = call++ % 3;
+      return { data: slot === 0 ? [doc] : [] };
+    });
+    renderSidebar();
+    expect(await screen.findByTestId("desk-form-sidebar")).toBeTruthy();
+  });
+});

package/src/desk/DeskFormSidebar.stories.tsx

@@ -0,0 +1,133 @@
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { YStack } from "tamagui";
+import { FrappeProvider } from "../FrappeProvider";
+import { DeskFormSidebar } from "./DeskFormSidebar";
+
+export default {
+  title: "FrappeUI/Desk/DeskFormSidebar",
+  component: DeskFormSidebar,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Live-wired FormSidebar for the Desk form page's supporting pane. Renders nothing until the document arrives. Assigned To comes from open assignment ToDos; Shared With from DocShare; metadata from the doc row.",
+      },
+    },
+  },
+};
+
+const MOCK_HOST = "https://deskformsidebar.mock.test";
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+function todoMeta(name: string) {
+  return {
+    name,
+    module: "Desk",
+    title_field: "description",
+    image_field: "image",
+    fields: [
+      { fieldname: "description", fieldtype: "Data", label: "Description", reqd: 1 },
+      { fieldname: "status", fieldtype: "Select", label: "Status" },
+      { fieldname: "image", fieldtype: "Attach Image", label: "Image" },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1 }],
+  };
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__deskFormSidebarMockFetch) return;
+  w.__deskFormSidebarMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: todoMeta(decodeURIComponent(metaMatch[1])) });
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
+const todoDocs = [
+  {
+    name: "TODO-001",
+    doctype: "Todo",
+    description: "Review the quarterly report",
+    status: "Working",
+    owner: "jane@example.com",
+    modified_by: "john@example.com",
+    creation: "2026-02-01",
+    image: "/files/todo.png",
+    _assign: JSON.stringify(["jane@example.com"]),
+  },
+];
+
+const shareDocs = [
+  {
+    name: "SHARE-001",
+    doctype: "DocShare",
+    user: "sam@example.com",
+    everyone: 0,
+    read: 1,
+    write: 1,
+    share: 0,
+    share_doctype: "Todo",
+    share_name: "TODO-001",
+  },
+];
+
+const assignmentDocs = [
+  {
+    name: "TODO-ASSIGN-001",
+    doctype: "ToDo",
+    allocated_to: "jane@example.com",
+    status: "Open",
+    reference_type: "Todo",
+    reference_name: "TODO-001",
+  },
+];
+
+function makeFixtures() {
+  return new InMemoryFixtureProvider({
+    Todo: todoDocs,
+    DocShare: shareDocs,
+    ToDo: assignmentDocs,
+  });
+}
+
+export const Default = () => (
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
+    <YStack width={320} height={520}>
+      <DeskFormSidebar doctype="Todo" name="TODO-001" />
+    </YStack>
+  </FrappeProvider>
+);
+Default.storyName = "Main";
+
+export const Loading = () => (
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
+    <YStack width={320} height={200}>
+      <DeskFormSidebar doctype="Todo" name="TODO-MISSING" />
+    </YStack>
+  </FrappeProvider>
+);
+Loading.parameters = {
+  docs: {
+    description: {
+      story: "Name that is not in fixtures: the sidebar stays unmounted until a doc arrives.",
+    },
+  },
+};

package/src/fields/LinkTree.spec.tsx

@@ -0,0 +1,109 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ComponentProps } from "react";
+import { FrappeProvider } from "../FrappeProvider";
+import { LinkTree } from "./LinkTree";
+
+const mockUseLinkTitle = vi.fn();
+const mockUseDocTypeMeta = vi.fn();
+const mockUseFrappeCollection = vi.fn();
+const mockUseLiveQuery = vi.fn();
+
+vi.mock("@multiplatform.one/frappe", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    useLinkTitle: (...args: unknown[]) => mockUseLinkTitle(...args),
+    useDocTypeMeta: (...args: unknown[]) => mockUseDocTypeMeta(...args),
+    useFrappeCollection: (...args: unknown[]) => mockUseFrappeCollection(...args),
+    useLiveQuery: (...args: unknown[]) => mockUseLiveQuery(...args),
+  };
+});
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: {
+      en: {
+        translation: {
+          "Select {{doctype}}": "Select {{doctype}}",
+          "Filter {{doctype}}": "Filter {{doctype}}",
+          "No matching {{doctype}}": "No matching {{doctype}}",
+        },
+      },
+    },
+  });
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockUseLinkTitle.mockReturnValue({ title: undefined, isLoading: false });
+  mockUseDocTypeMeta.mockReturnValue({
+    meta: { is_tree: 1, title_field: "account_name" },
+    isLoading: false,
+    error: null,
+  });
+  mockUseFrappeCollection.mockReturnValue({});
+  mockUseLiveQuery.mockReturnValue({
+    data: [
+      { name: "Assets", account_name: "Assets", parent_account: "", doctype: "Account" },
+      {
+        name: "HDFC Current",
+        account_name: "HDFC Current",
+        parent_account: "Assets",
+        doctype: "Account",
+      },
+    ],
+    isLoading: false,
+    isError: false,
+  });
+});
+
+afterEach(cleanup);
+
+function renderTree(props: Partial<ComponentProps<typeof LinkTree>> = {}) {
+  return renderWithProviders(
+    <FrappeProvider baseURL="https://bench.example.com">
+      <LinkTree label="Account" doctype="Account" onChange={vi.fn()} {...props} />
+    </FrappeProvider>,
+  );
+}
+
+describe("LinkTree adapter (MPO-111)", () => {
+  it("renders TreeSelect, not the Link combobox", () => {
+    const result = renderTree({ value: "HDFC Current" });
+    expect(result.container.querySelector('[data-testid="tree-select"]')).toBeTruthy();
+    expect(result.container.querySelector('[data-testid="tree-select-trigger"]')).toBeTruthy();
+    expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeNull();
+    expect(screen.getByText("HDFC Current")).toBeTruthy();
+  });
+
+  // TreeSelect resolves its trigger label as
+  //   selected?.label ?? (value ? (valueLabel ?? value) : undefined)
+  // (components/src/TreeSelect/index.tsx). A node that IS in the loaded forest
+  // carries its own label, so useLinkTitle only shows for a value whose node
+  // has not been loaded -- which is the case the prop exists for, since the
+  // forest is paged and a stored link often points outside the current page.
+  it("shows the useLinkTitle title when the value is outside the loaded forest", () => {
+    mockUseLinkTitle.mockReturnValue({ title: "HDFC Current Account", isLoading: false });
+    renderTree({ value: "HDFC Savings" });
+    expect(screen.getByText("HDFC Current Account")).toBeTruthy();
+  });
+
+  it("prefers the in-tree node label over useLinkTitle", () => {
+    mockUseLinkTitle.mockReturnValue({ title: "Should not win", isLoading: false });
+    renderTree({ value: "HDFC Current" });
+    expect(screen.getByText("HDFC Current")).toBeTruthy();
+    expect(screen.queryByText("Should not win")).toBeNull();
+  });
+
+  it("does not call onChange when disabled", () => {
+    const onChange = vi.fn();
+    renderTree({ value: "Assets", onChange, disabled: true });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/fields/LinkTree.stories.tsx

@@ -0,0 +1,187 @@
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { action } from "@multiplatform.one/storybook";
+import { useState, type ReactNode } from "react";
+import { YStack } from "tamagui";
+import { FrappeProvider } from "../FrappeProvider";
+import { Link, type LinkProps } from "./Link";
+import { LinkTree } from "./LinkTree";
+
+export default {
+  title: "FrappeUI/LinkTree",
+  component: LinkTree,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          'Schema Link whose target DocType is a tree (Account, Item Group, Territory). Loads the forest the same way FrappeTreeView does, then renders TreeSelect. Link.tsx routes here when useDocTypeMeta().is_tree is set; control="combobox" ejects back to search_link.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text" },
+    value: { control: "text" },
+    doctype: { control: "text" },
+    disabled: { control: "boolean" },
+    required: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    error: { control: "text" },
+  },
+};
+
+const MOCK_HOST = "https://frappe-linktree.mock.test";
+
+interface Region {
+  name: string;
+  doctype: string;
+  region_name: string;
+  parent_region: string;
+}
+
+const regionDocs: Region[] = [
+  { name: "North", doctype: "QaRegion", region_name: "Northern Region", parent_region: "" },
+  { name: "South", doctype: "QaRegion", region_name: "Southern Region", parent_region: "" },
+  { name: "West", doctype: "QaRegion", region_name: "Western Region", parent_region: "" },
+  {
+    name: "North A",
+    doctype: "QaRegion",
+    region_name: "North Sub-Region A",
+    parent_region: "North",
+  },
+  {
+    name: "North B",
+    doctype: "QaRegion",
+    region_name: "North Sub-Region B",
+    parent_region: "North",
+  },
+  {
+    name: "North A1",
+    doctype: "QaRegion",
+    region_name: "North Leaf A1",
+    parent_region: "North A",
+  },
+];
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+function regionMeta(name: string) {
+  return {
+    name,
+    module: "QA",
+    title_field: "region_name",
+    is_tree: 1,
+    fields: [
+      { fieldname: "region_name", fieldtype: "Data", label: "Region Name", in_list_view: 1 },
+      { fieldname: "parent_region", fieldtype: "Link", label: "Parent Region", options: name },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeLinkTreeMockFetch) return;
+  w.__frappeLinkTreeMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname.includes("frappe.desk.form.load.getdoctype")) {
+        return jsonResponse({ docs: [regionMeta("QaRegion")] });
+      }
+      if (url.pathname.includes("frappe.desk.search.get_link_title")) {
+        const docname = url.searchParams.get("docname") ?? "";
+        const hit = regionDocs.find((row) => row.name === docname);
+        return jsonResponse({ message: hit?.region_name ?? docname });
+      }
+      if (url.pathname.includes("frappe.sessions.get_csrf_token")) {
+        return jsonResponse({ message: "mock-csrf" });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: regionMeta(decodeURIComponent(metaMatch[1])) });
+      return jsonResponse({ data: [], message: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
+function host(children: ReactNode) {
+  return (
+    <FrappeProvider
+      baseURL={MOCK_HOST}
+      fixtures={new InMemoryFixtureProvider({ QaRegion: regionDocs })}
+    >
+      {children}
+    </FrappeProvider>
+  );
+}
+
+function ControlledTree(props: Omit<LinkProps, "onChange" | "doctype"> & { doctype?: string }) {
+  const [value, setValue] = useState(props.value ?? "");
+  return (
+    <LinkTree
+      label="Region"
+      doctype="QaRegion"
+      {...props}
+      value={value}
+      onChange={(next) => {
+        setValue(next);
+        action("onChange")(next);
+      }}
+    />
+  );
+}
+
+export const Default = (args: Partial<LinkProps>) => host(<ControlledTree {...args} />);
+Default.args = {
+  label: "Region",
+  placeholder: "Select a region",
+};
+Default.storyName = "Main";
+
+export const AllStates = () =>
+  host(
+    <YStack gap="$4" width={400}>
+      <ControlledTree label="Default" />
+      <ControlledTree label="With Value" value="North A" />
+      <ControlledTree label="Required" required />
+      <ControlledTree label="With Error" error="Pick a leaf region" />
+      <ControlledTree label="Disabled" value="South" disabled />
+      <ControlledTree label="Read Only" value="West" readOnly />
+    </YStack>,
+  );
+
+export const ViaLink = () => {
+  const [value, setValue] = useState("North A");
+  return host(
+    <YStack gap="$4" width={400}>
+      <Link
+        label="Region (through Link, is_tree)"
+        doctype="QaRegion"
+        value={value}
+        onChange={(next) => {
+          setValue(next);
+          action("onChange")(next);
+        }}
+      />
+    </YStack>,
+  );
+};
+ViaLink.storyName = "Via Link";
+ViaLink.parameters = {
+  docs: {
+    description: {
+      story:
+        "Resolves through Link with a tree DocType so a lost LinkTree import shows up as a Combobox on this board instead of only in Link.tree.spec.tsx.",
+    },
+  },
+};

package/src/index.ts

@@ -173,7 +173,7 @@ export {
   type DependsEvaluator,
 } from "./dependsOn";
 
-export { SchemaForm } from "./schemaForm";
+export { SchemaForm, applyFieldOrder, applyOrderToSchema } from "./schemaForm";
 export type {
   SchemaFormProps,
   FormSchema,

package/src/schemaForm/SchemaForm.spec.tsx

@@ -152,3 +152,32 @@ describe("SchemaForm design-law (MPO-60 / R10)", () => {
     expect(getComputedStyle(footer!).display).toBe("none");
   });
 });
+
+describe("SchemaForm order (R2 / MPO-22)", () => {
+  it("reorders listed fields in the DOM; unlisted keep their meta positions", () => {
+    const fields: FieldSchema[] = [
+      { type: "Data", name: "a", label: "Field A" },
+      { type: "Data", name: "b", label: "Field B" },
+      { type: "Data", name: "c", label: "Field C" },
+      { type: "Data", name: "d", label: "Field D" },
+      { type: "Data", name: "e", label: "Field E" },
+    ];
+    const schema: FormSchema = {
+      fields,
+      sections: [{ label: "Order", columns: [{ fields }] }],
+    };
+    renderWithProviders(
+      <SchemaForm schema={schema} doc={{}} setValue={vi.fn()} order={["c", "a"]} />,
+    );
+    const a = screen.getByLabelText("Field A");
+    const b = screen.getByLabelText("Field B");
+    const c = screen.getByLabelText("Field C");
+    const d = screen.getByLabelText("Field D");
+    const e = screen.getByLabelText("Field E");
+    // c, b, a, d, e — b/d/e unlisted, stay put; listed slots fill as c then a.
+    expect(c.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(a.compareDocumentPosition(d) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(d.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});

package/src/schemaForm/SchemaForm.stories.tsx

@@ -13,7 +13,7 @@ export default {
     docs: {
       description: {
         component:
-          "Schema-driven form renderer: sections → columns → fields resolved through the fieldRegistry. Supports depends_on, overrides, hidden and read-only fields.",
+          "Schema-driven form renderer: sections → columns → fields resolved through the fieldRegistry. Supports depends_on, overrides, hidden and read-only fields, and R2 `order` (listed names permute in place).",
       },
     },
   },
@@ -209,6 +209,19 @@ export const HiddenFields = () => (
   <StatefulForm initialDoc={{ first_name: "Jane" }} hideFields={["last_name", "age"]} />
 );
 
+/**
+ * R2 cheap path (MPO-22 / GL-64): `order` permutes listed fields in place.
+ * Here status then first_name swap among their slots; last_name / is_active /
+ * age / joined_on stay put. No `sections` tree required.
+ */
+export const OrderInPlace = () => (
+  <StatefulForm
+    initialDoc={{ first_name: "Jane", status: "Open", is_active: true }}
+    order={["status", "first_name"]}
+  />
+);
+OrderInPlace.storyName = "Order in place (R2)";
+
 /** Field overrides: render function, component and props-merge forms. */
 export const Overrides = () => (
   <StatefulForm