@multiplatform.one/frappe-ui 7.4.1 → 7.5.0

package/src/frappeViews.designLaw.spec.ts

@@ -0,0 +1,94 @@
+/**
+ * MPO-60 design-law source contracts for the Frappe view adapters.
+ * R10: frappe.ui.form.on stays out of scope (no parallel hook runner).
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const srcDir = path.resolve(__dirname, ".");
+
+function read(file: string): string {
+  return fs.readFileSync(path.resolve(srcDir, file), "utf-8");
+}
+
+describe("Frappe view adapters — design-law 100%", () => {
+  it("FrappeForm uses the house Button and does not implement frappe.ui.form.on (R10)", () => {
+    const source = read("FrappeForm.tsx");
+    expect(source).toContain('from "@multiplatform.one/forms"');
+    expect(source).toMatch(/import \{[^}]*Button[^}]*\} from "@multiplatform.one\/forms"/);
+    expect(source).not.toMatch(/from "tamagui".*Button|Button.*from "tamagui"/);
+    expect(source).not.toContain("frappe.ui.form.on");
+    expect(source).toContain("formCommonColors");
+  });
+
+  it("FrappeKanban does not use hex fills or sizeToken as fontSize (LC-65)", () => {
+    const source = read("FrappeKanban.tsx");
+    expect(source).not.toMatch(/#[0-9A-Fa-f]{3,8}/);
+    expect(source).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
+    expect(source).toContain("knobProps.label");
+    expect(source).toContain("componentColors.text.subtle");
+  });
+
+  it("FrappeCalendar event chrome uses the label fragment, not sizeToken as fontSize", () => {
+    const source = read("FrappeCalendar.tsx");
+    expect(source).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
+    expect(source).toContain("knobProps.label");
+    expect(source).toContain("formCommonColors");
+    expect(source).toContain("containerRadius");
+  });
+
+  it("FrappeDashboard timestamps use the label fragment and form ramps", () => {
+    const source = read("FrappeDashboard.tsx");
+    expect(source).toContain("formCommonColors");
+    expect(source).toContain("knobProps.label");
+    expect(source).toContain("knobProps.heading");
+    expect(source).not.toMatch(/fontSize="\$1"/);
+  });
+
+  it("FrappeKPICard skeleton is the catalog Card (no cherry-picked radius)", () => {
+    const source = read("FrappeKPICard.tsx");
+    expect(source).toContain("Card");
+    expect(source).not.toContain("knobProps.borderRadius.borderRadius");
+    expect(source).not.toMatch(/height=\{12\}|height=\{28\}/);
+    expect(source).toMatch(/from "@multiplatform.one\/components"/);
+  });
+
+  it("FrappeGantt action banners use form ramps and do not steal Desk assembly", () => {
+    const source = read("FrappeGantt.tsx");
+    expect(source).toContain("formCommonColors");
+    expect(source).toContain("containerRadius");
+    expect(source).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
+    expect(source).not.toContain('color="$red11"');
+    expect(source).toContain("BACKOFFICE_VIEWS");
+    expect(source).toContain("MPO-14");
+  });
+
+  it("FrappeReportView uses the house Button and label fragments (LC-54)", () => {
+    const source = read("FrappeReportView.tsx");
+    expect(source).toMatch(/import \{[^}]*Button[^}]*\} from "@multiplatform.one\/forms"/);
+    expect(source).not.toMatch(/Button.*from "tamagui"/);
+    expect(source).toContain("formCommonColors");
+    expect(source).toContain("knobProps.label");
+    expect(source).not.toMatch(/fontSize="\$1"|fontSize="\$2"/);
+  });
+
+  it("FrappeReportBuilder toolbar is house Button and captions lock 400 (R7 / LC-54)", () => {
+    const source = read("FrappeReportBuilder.tsx");
+    expect(source).toMatch(/import \{[^}]*Button[^}]*\} from "@multiplatform.one\/forms"/);
+    expect(source).not.toMatch(/Button.*from "tamagui"/);
+    expect(source).toContain("formCommonColors");
+    expect(source).not.toMatch(/fontWeight="600"|fontWeight="500"/);
+    expect(source).toContain('fontWeight="400"');
+    expect(source).toContain("outlined");
+  });
+
+  it("FrappeTreeView empty chrome is EmptyState and labels use the label fragment", () => {
+    const source = read("FrappeTreeView.tsx");
+    expect(source).toContain("EmptyState");
+    expect(source).not.toMatch(/size=\{48\}/);
+    expect(source).toContain("knobProps.label");
+    expect(source).not.toMatch(/fontSize=\{display === "compressed" \? 12 : 14\}/);
+    expect(source).toContain("formCommonColors");
+  });
+});

package/src/index.ts

@@ -143,6 +143,15 @@ export {
 
 export { FrappeImageView, type FrappeImageViewProps } from "./FrappeImageView";
 export { FrappeTreeView, type FrappeTreeViewProps } from "./FrappeTreeView";
+export {
+  FileBrowser,
+  type FileBrowserFile,
+  type FileBrowserLayout,
+  type FileBrowserProps,
+  type FileBrowserSelectionMode,
+  type FileBrowserView,
+} from "./FileBrowser";
+export { AttachLibrary, type AttachLibraryProps } from "./FileBrowser/AttachLibrary";
 export {
   FrappeConnectionIndicator,
   type FrappeConnectionIndicatorProps,
@@ -172,6 +181,8 @@ export type {
   FormColumn,
   FieldOverride,
 } from "./schemaForm";
+export { SchemaWizard, schemaToWizardSteps } from "./schemaForm/SchemaWizard";
+export type { SchemaWizardProps } from "./schemaForm/SchemaWizard";
 
 export {
   registerField,
@@ -223,6 +234,8 @@ export { TimePicker, type TimePickerProps } from "./fields/TimePicker";
 export { Geolocation } from "./fields/Geolocation";
 export { Heading } from "./fields/Heading";
 export { Html } from "./fields/HTML";
+export { Icon } from "./fields/Icon";
+export type { IconProps } from "./fields/Icon";
 export { LongText } from "./fields/LongText";
 export type { LongTextProps } from "./fields/LongText";
 export { MarkdownEditorField, type MarkdownEditorFieldProps } from "./fields/MarkdownEditor";
@@ -264,7 +277,11 @@ export {
   type TableMultiSelectProps,
   type TableMultiSelectOption,
 } from "./fields/TableMultiSelect";
-export { FileUpload, type FileUploadProps } from "./fields/FileUpload";
+export {
+  FileUpload,
+  type FileUploadProps,
+  type FrappeFileUploadHandler,
+} from "./fields/FileUpload";
 
 // ---------------------------------------------------------------------------
 // Desk Shell Components

package/src/schemaForm/SchemaForm.spec.tsx

@@ -0,0 +1,154 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import type { FieldSchema } from "../fieldRegistry";
+import { SchemaForm, type FormSchema } from "./index";
+
+const identityFields: FieldSchema[] = [
+  { type: "Data", name: "first_name", label: "First Name" },
+  { type: "Data", name: "last_name", label: "Last Name" },
+];
+
+function sourceHasHookRunner(): boolean {
+  const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "index.tsx"), "utf8");
+  const stripped = src.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "");
+  return /frappe\.ui\.form\.on/.test(stripped);
+}
+
+describe("SchemaForm design-law (MPO-60 / R10)", () => {
+  it("does not implement frappe.ui.form.on (R10 out of scope)", () => {
+    expect(sourceHasHookRunner()).toBe(false);
+  });
+
+  it("maps readOnlyFields and schema readOnly to readOnly, not disabled", () => {
+    const fields: FieldSchema[] = [
+      { type: "Data", name: "first_name", label: "ReadOnly via prop" },
+      { type: "Data", name: "last_name", label: "ReadOnly via schema", readOnly: true },
+      { type: "Data", name: "editable", label: "Editable" },
+    ];
+    const schema: FormSchema = {
+      fields,
+      sections: [{ label: "ReadOnly Mapping", columns: [{ fields }] }],
+    };
+    const setValue = vi.fn();
+    renderWithProviders(
+      <SchemaForm
+        schema={schema}
+        doc={{
+          first_name: "copy me if you can",
+          last_name: "schema read-only value",
+          editable: "type here",
+        }}
+        setValue={setValue}
+        readOnlyFields={["first_name"]}
+      />,
+    );
+
+    const viaProp = screen.getByLabelText("ReadOnly via prop") as HTMLInputElement;
+    const viaSchema = screen.getByLabelText("ReadOnly via schema") as HTMLInputElement;
+    const editable = screen.getByLabelText("Editable") as HTMLInputElement;
+
+    expect(viaProp.readOnly).toBe(true);
+    expect(viaProp.disabled).toBe(false);
+    expect(viaSchema.readOnly).toBe(true);
+    expect(viaSchema.disabled).toBe(false);
+    expect(editable.readOnly).toBe(false);
+    expect(editable.disabled).toBe(false);
+
+    fireEvent.change(viaProp, { target: { value: "mutated" } });
+    fireEvent.change(viaSchema, { target: { value: "mutated" } });
+    expect(setValue).not.toHaveBeenCalled();
+
+    fireEvent.change(editable, { target: { value: "ok" } });
+    expect(setValue).toHaveBeenCalledWith("editable", "ok");
+  });
+
+  it("disabled form still disables; read-only is a separate channel", () => {
+    const fields: FieldSchema[] = [{ type: "Data", name: "first_name", label: "First Name" }];
+    const schema: FormSchema = {
+      fields,
+      sections: [{ label: "Disabled", columns: [{ fields }] }],
+    };
+    renderWithProviders(
+      <SchemaForm schema={schema} doc={{ first_name: "Jane" }} setValue={vi.fn()} disabled />,
+    );
+    const input = screen.getByLabelText("First Name") as HTMLInputElement;
+    expect(input.disabled || input.getAttribute("aria-disabled") === "true").toBe(true);
+  });
+
+  it("default section is SF-CARD: no hardcoded 1px border", () => {
+    const schema: FormSchema = {
+      fields: identityFields,
+      sections: [{ label: "Identity", columns: [{ fields: identityFields }] }],
+    };
+    const { container } = renderWithProviders(
+      <SchemaForm schema={schema} doc={{}} setValue={vi.fn()} />,
+    );
+    const card = container.querySelector("[data-mpo-schema-form-card]") as HTMLElement;
+    expect(card).toBeTruthy();
+    expect(card.getAttribute("data-mpo-schema-form-borderless")).toBeNull();
+    const style = card.getAttribute("style") ?? "";
+    expect(style).not.toMatch(/border-width:\s*1px/i);
+    const computed = getComputedStyle(card);
+    expect(computed.borderWidth === "1px" && computed.borderStyle === "solid").toBe(false);
+  });
+
+  it("hideBorder is SF-TRANSPARENT (borderless marker, no card fill)", () => {
+    const schema: FormSchema = {
+      fields: identityFields,
+      sections: [{ label: "Ghost", hideBorder: true, columns: [{ fields: identityFields }] }],
+    };
+    const { container } = renderWithProviders(
+      <SchemaForm schema={schema} doc={{}} setValue={vi.fn()} />,
+    );
+    const card = container.querySelector("[data-mpo-schema-form-card]") as HTMLElement;
+    expect(card).toBeTruthy();
+    expect(card.getAttribute("data-mpo-schema-form-borderless")).toBe("");
+    const style = card.getAttribute("style") ?? "";
+    expect(style).not.toMatch(/border-width:\s*1px/i);
+  });
+
+  it("forwards description as helperText and honors compact/skeleton flags", () => {
+    const fields: FieldSchema[] = [
+      {
+        type: "Data",
+        name: "code",
+        label: "Code",
+        description: "Warehouse SKU",
+      },
+    ];
+    const schema: FormSchema = {
+      fields,
+      sections: [{ label: "Stock", columns: [{ fields }] }],
+    };
+    renderWithProviders(<SchemaForm schema={schema} doc={{ code: "SKU-1" }} setValue={vi.fn()} />);
+    expect(screen.getByText("Warehouse SKU")).toBeTruthy();
+  });
+
+  it("collapsible section display-gates the body (LC-63) without unmounting", () => {
+    const fields: FieldSchema[] = [{ type: "Data", name: "first_name", label: "First Name" }];
+    const schema: FormSchema = {
+      fields,
+      sections: [
+        {
+          label: "Identity",
+          collapsible: true,
+          collapsed: true,
+          columns: [{ fields }],
+        },
+      ],
+    };
+    renderWithProviders(
+      <SchemaForm schema={schema} doc={{ first_name: "Jane" }} setValue={vi.fn()} />,
+    );
+    const input = screen.getByLabelText("First Name", { hidden: true }) as HTMLInputElement;
+    expect(input).toBeTruthy();
+    expect(input.value).toBe("Jane");
+    const footer = input.closest("[aria-hidden='true']") as HTMLElement | null;
+    expect(footer).toBeTruthy();
+    expect(getComputedStyle(footer!).display).toBe("none");
+  });
+});

package/src/schemaForm/SchemaForm.stories.tsx

@@ -117,6 +117,33 @@ export const Disabled = () => (
   <StatefulForm initialDoc={{ first_name: "Jane", last_name: "Doe" }} disabled />
 );
 
+/**
+ * `hide_border` (df.hide_border) is SF-TRANSPARENT: no card fill, no heading
+ * separator. Default sections are house Card / `cardSurface` (SF-CARD, no
+ * hardcoded 1px border).
+ */
+export const HideBorder = () => {
+  const ghost: FormSchema = {
+    fields,
+    sections: schema.sections.map((section) => ({ ...section, hideBorder: true })),
+  };
+  const [doc, setDoc] = useState<Record<string, any>>({
+    first_name: "Jane",
+    status: "Open",
+    is_active: true,
+  });
+  return (
+    <YStack maxWidth={720}>
+      <SchemaForm
+        schema={ghost}
+        doc={doc}
+        setValue={(field, value) => setDoc((prev) => ({ ...prev, [field]: value }))}
+      />
+    </YStack>
+  );
+};
+HideBorder.storyName = "Hide border (SF-TRANSPARENT)";
+
 export const RequiredAndErrors = () => (
   <StatefulForm
     initialDoc={{}}

package/src/schemaForm/SchemaWizard.spec.tsx

@@ -0,0 +1,134 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import type { FieldSchema } from "../fieldRegistry";
+import { SchemaWizard, schemaToWizardSteps } from "./SchemaWizard";
+import type { FormSchema } from "./index";
+
+const fields: FieldSchema[] = [
+  { type: "Data", name: "first_name", label: "First Name", required: true },
+  { type: "Data", name: "region", label: "Region", required: true },
+  { type: "Data", name: "note", label: "Note" },
+];
+
+const schema: FormSchema = {
+  fields,
+  sections: [
+    { label: "Identity", columns: [{ fields: [fields[0]] }] },
+    { label: "Destination", columns: [{ fields: [fields[1], fields[2]] }] },
+  ],
+};
+
+function Harness({
+  initial = {},
+  onComplete,
+}: {
+  initial?: Record<string, unknown>;
+  onComplete?: () => void;
+}) {
+  const [doc, setDoc] = useState<Record<string, unknown>>(initial);
+  return (
+    <SchemaWizard
+      schema={schema}
+      doc={doc}
+      setValue={(name, value) => setDoc((prev) => ({ ...prev, [name]: value }))}
+      completeLabel="Restore backup"
+      onCancel={() => undefined}
+      onComplete={onComplete}
+      labels="visible"
+    />
+  );
+}
+
+describe("schemaToWizardSteps", () => {
+  it("cuts one rail step per section and appends Review", () => {
+    const steps = schemaToWizardSteps(schema);
+    expect(steps.map((step) => step.id)).toEqual(["identity", "destination", "review"]);
+    expect(steps[0]?.fields).toEqual(["first_name"]);
+    expect(steps[1]?.fields).toEqual(["region", "note"]);
+    expect(steps[2]?.review).toBe(true);
+  });
+});
+
+describe("SchemaWizard", () => {
+  it("display-gates every section panel (LC-63)", () => {
+    const { container } = renderWithProviders(<Harness />);
+    const panels = container.querySelectorAll("[data-wizard-panel]");
+    expect(panels.length).toBe(3);
+    expect(container.querySelectorAll('[data-wizard-panel][data-active="false"]').length).toBe(2);
+  });
+
+  it("LC-63 wizard probe: fill, advance, return keeps the value", async () => {
+    const { container } = renderWithProviders(<Harness />);
+    const input =
+      (container.querySelector("#first_name") as HTMLInputElement | null) ??
+      (container.querySelector("[name='first_name']") as HTMLInputElement | null) ??
+      (container.querySelector("input") as HTMLInputElement);
+    expect(input).toBeTruthy();
+    fireEvent.change(input, { target: { value: "Ada" } });
+    fireEvent.input(input, { target: { value: "Ada" } });
+
+    await act(async () => {
+      fireEvent.click(container.querySelector("[data-testid='wizard-primary']") as Element);
+    });
+    expect(
+      container.querySelector("[data-wizard-shell]")?.getAttribute("data-wizard-current"),
+    ).toBe("1");
+
+    await act(async () => {
+      fireEvent.click(container.querySelector("[data-testid='wizard-back']") as Element);
+    });
+    const again =
+      (container.querySelector("#first_name") as HTMLInputElement | null) ??
+      (container.querySelector("[name='first_name']") as HTMLInputElement | null) ??
+      (container.querySelector("input") as HTMLInputElement);
+    expect(again.value).toBe("Ada");
+  });
+
+  it("per-step validation blocks advance and focuses the first invalid field", async () => {
+    const { container } = renderWithProviders(<Harness />);
+    await act(async () => {
+      fireEvent.click(container.querySelector("[data-testid='wizard-primary']") as Element);
+    });
+    expect(
+      container.querySelector("[data-wizard-shell]")?.getAttribute("data-wizard-current"),
+    ).toBe("0");
+    expect(
+      container.querySelector("[data-error-summary], [data-testid='error-summary']"),
+    ).toBeTruthy();
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const first =
+      (container.querySelector("#first_name") as HTMLElement | null) ??
+      (container.querySelector("[name='first_name']") as HTMLElement | null) ??
+      (container.querySelector("input") as HTMLElement | null);
+    expect(first).toBeTruthy();
+    expect(
+      document.activeElement === first ||
+        Boolean(first && first.contains(document.activeElement)) ||
+        document.activeElement?.id === "first_name" ||
+        document.activeElement?.getAttribute("name") === "first_name",
+    ).toBe(true);
+  });
+
+  it("complete primary is the task verb", async () => {
+    const onComplete = vi.fn();
+    const { container } = renderWithProviders(
+      <Harness initial={{ first_name: "Ada", region: "eu-central" }} onComplete={onComplete} />,
+    );
+    await act(async () => {
+      fireEvent.click(container.querySelector("[data-testid='wizard-primary']") as Element);
+    });
+    await act(async () => {
+      fireEvent.click(container.querySelector("[data-testid='wizard-primary']") as Element);
+    });
+    const primary = container.querySelector("[data-testid='wizard-primary']") as HTMLElement;
+    expect(primary.textContent).toBe("Restore backup");
+    await act(async () => {
+      fireEvent.click(primary);
+    });
+    expect(onComplete).toHaveBeenCalled();
+  });
+});

package/src/schemaForm/SchemaWizard.stories.tsx

@@ -0,0 +1,94 @@
+import { action } from "@multiplatform.one/storybook";
+import React, { useState } from "react";
+import type { FieldSchema } from "../fieldRegistry";
+import { SchemaWizard } from "./SchemaWizard";
+import type { FormSchema } from "./index";
+
+export default {
+  title: "FrappeUI/SchemaWizard",
+  component: SchemaWizard,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Schema-driven wizard: one rail step per DocType section break, Review last, composing the components Wizard over SchemaForm.",
+      },
+    },
+  },
+};
+
+const fields: FieldSchema[] = [
+  { type: "Data", name: "source", label: "Source", required: true },
+  { type: "Data", name: "volume", label: "Destination volume", required: true },
+  { type: "Data", name: "region", label: "Region", required: true },
+  { type: "Data", name: "checksums", label: "Checksums" },
+];
+
+const schema: FormSchema = {
+  fields,
+  sections: [
+    { label: "Snapshot", columns: [{ fields: [fields[0]] }] },
+    { label: "Destination", columns: [{ fields: [fields[1], fields[2]] }] },
+    { label: "Verify", columns: [{ fields: [fields[3]] }] },
+  ],
+};
+
+function StatefulWizard(props: Partial<React.ComponentProps<typeof SchemaWizard>>) {
+  const [doc, setDoc] = useState<Record<string, unknown>>({
+    source: "backup-2026-08-27-0300",
+    volume: "vol-restore-2026-08",
+    region: "eu-central",
+    checksums: "After restore",
+  });
+  return (
+    <SchemaWizard
+      schema={schema}
+      doc={doc}
+      setValue={(field, value) => {
+        action("setValue")(field, value);
+        setDoc((prev) => ({ ...prev, [field]: value }));
+      }}
+      completeLabel="Restore backup"
+      onCancel={() => action("cancel")()}
+      onComplete={() => action("complete")()}
+      labels="visible"
+      {...props}
+    />
+  );
+}
+
+export const Main = () => <StatefulWizard />;
+Main.storyName = "Ready";
+
+export const Loading = () => (
+  <SchemaWizard
+    schema={schema}
+    doc={{}}
+    setValue={() => undefined}
+    completeLabel="Restore backup"
+    status="loading"
+  />
+);
+
+export const Empty = () => (
+  <SchemaWizard
+    schema={schema}
+    doc={{}}
+    setValue={() => undefined}
+    completeLabel="Restore backup"
+    status="empty"
+  />
+);
+
+export const Error = () => (
+  <SchemaWizard
+    schema={schema}
+    doc={{}}
+    setValue={() => undefined}
+    completeLabel="Restore backup"
+    status="error"
+    errorTitle="Could not load this flow"
+  />
+);