@multiplatform.one/frappe-ui 7.7.4 → 7.8.0

package/src/FrappeProvider.fixturesOnly.spec.tsx

@@ -0,0 +1,129 @@
+/**
+ * A fixture corpus satisfies the connection requirement on its own (MPO-228).
+ *
+ * `createApp({ frappe: { fixtures } })` mounts a FrappeProvider with NO
+ * baseURL, so the collection-backed components must read the corpus instead
+ * of demanding a bench URL. These specs pin that: rows render, doctype meta
+ * comes from the corpus, and `fetch` is never called — a fixtures-only app
+ * runs with no server. The old error still fires when neither is configured.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { Text } from "tamagui";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { FrappeList } from "./FrappeList";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+interface Customer {
+  name: string;
+  doctype: string;
+  customer_name: string;
+  status: string;
+}
+
+const customers: Customer[] = [
+  { name: "CUST-001", doctype: "Customer", customer_name: "Acme Corp", status: "Active" },
+  { name: "CUST-002", doctype: "Customer", customer_name: "Globex", status: "Lead" },
+];
+
+const columns: DataTableColumn<Partial<Customer>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "customer_name", accessorKey: "customer_name", header: "Customer Name" },
+];
+
+/**
+ * Corpus carrying both documents and the getdoctype-shaped meta doc, so the
+ * table's `useDocTypeMeta` call is answered locally too (no filterableFields
+ * prop, which would skip that path).
+ */
+function fixtureCorpus() {
+  return new InMemoryFixtureProvider({
+    DocType: [
+      {
+        name: "Customer",
+        doctype: "DocType",
+        module: "Selling",
+        fields: [
+          { fieldname: "customer_name", fieldtype: "Data", label: "Customer Name" },
+          { fieldname: "status", fieldtype: "Select", label: "Status", options: "Active\nLead" },
+        ],
+      },
+    ],
+    Customer: customers,
+  });
+}
+
+/** Fails the test if anything dials the network. */
+function forbidFetch() {
+  return vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+    throw new Error(`unexpected network request: ${String(input)}`);
+  });
+}
+
+describe("FrappeProvider with fixtures and no baseURL", () => {
+  it("renders a FrappeTable off the corpus without touching the network", async () => {
+    const fetchSpy = forbidFetch();
+    renderWithProviders(
+      <FrappeProvider fixtures={fixtureCorpus()}>
+        <FrappeTable<Customer>
+          doctype="Customer"
+          columns={columns}
+          layout="table"
+          enablePagination={false}
+        />
+      </FrappeProvider>,
+    );
+
+    expect(await screen.findByText("Acme Corp")).toBeTruthy();
+    expect(await screen.findByText("Globex")).toBeTruthy();
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it("renders a FrappeList off the corpus without touching the network", async () => {
+    const fetchSpy = forbidFetch();
+    renderWithProviders(
+      <FrappeProvider fixtures={fixtureCorpus()}>
+        <FrappeList<Customer>
+          doctype="Customer"
+          fields={["name", "customer_name"]}
+          renderItem={(item) => <Text>{item.customer_name}</Text>}
+        />
+      </FrappeProvider>,
+    );
+
+    expect(await screen.findByText("Acme Corp")).toBeTruthy();
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe("FrappeProvider with neither baseURL nor fixtures", () => {
+  it("still names what is missing", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(() =>
+      renderWithProviders(
+        <FrappeProvider>
+          <FrappeTable<Customer> doctype="Customer" columns={columns} layout="table" />
+        </FrappeProvider>,
+      ),
+    ).toThrow(/baseURL or fixtures/);
+  });
+});

package/src/FrappeProvider.realtime.spec.tsx

@@ -0,0 +1,59 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, waitFor } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+const { socket } = vi.hoisted(() => ({
+  socket: vi.fn(() => {
+    throw new Error("Unexpected realtime transport");
+  }),
+}));
+vi.mock("socket.io-client", () => ({ io: socket }));
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+});
+
+it.each([false, undefined, true])(
+  "provider realtime=%s keeps HTTP reads and respects socket intent",
+  async (realtime) => {
+    const requests: string[] = [];
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL) => {
+        const url = String(input);
+        requests.push(url);
+        return new Response(
+          JSON.stringify(
+            url.includes("/api/resource/")
+              ? {
+                  data: [{ name: "HTTP-001", doctype: "Customer", customer_name: "HTTP customer" }],
+                }
+              : { exc_type: "DoesNotExistError", message: "Unsupported method" },
+          ),
+          {
+            status: url.includes("/api/resource/") ? 200 : 404,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }),
+    );
+    const view = renderWithProviders(
+      <FrappeProvider baseURL={`https://provider-${String(realtime)}.test`} realtime={realtime}>
+        <FrappeTable<{ name: string; doctype: string; customer_name: string }>
+          doctype="Customer"
+          columns={[{ id: "customer_name", accessorKey: "customer_name", header: "Customer" }]}
+          filterableFields={[]}
+          enablePagination={false}
+          layout="table"
+        />
+      </FrappeProvider>,
+    );
+    await waitFor(() => expect(view.getByText("HTTP customer")).toBeTruthy());
+    expect(requests.some((url) => url.includes("/api/resource/Customer"))).toBe(true);
+    expect(socket).toHaveBeenCalledTimes(realtime === false ? 0 : 1);
+    expect(view.queryByText(/reconnecting|offline/i)).toBeNull();
+  },
+);

package/src/FrappeProvider.tsx

@@ -7,8 +7,14 @@ import React, { createContext, use, useContext } from "react";
  * @category Types
  */
 export interface FrappeConfig {
-  /** The base URL of the Frappe server */
-  baseURL: string;
+  /**
+   * The base URL of the Frappe server. Required unless `fixtures` is set:
+   * a fixture corpus answers every read locally, so a fixtures-only app has
+   * no bench to name and nothing dials one.
+   */
+  baseURL?: string;
+  /** False uses HTTP collections without a realtime transport. Defaults to true. */
+  realtime?: boolean;
   /**
    * Override the port used for the Socket.IO realtime connection.
    *
@@ -50,7 +56,10 @@ export interface FrappeConfig {
    * can't forward WebSocket upgrades.
    */
   socketOptions?: UseFrappeCollectionConfig["socketOptions"];
-  /** Fixture provider for testing */
+  /**
+   * Fixture corpus every read and write is served from. Set it without a
+   * `baseURL` to run the whole app off fixtures with no server.
+   */
   fixtures?: FixtureProvider;
 }
 
@@ -64,8 +73,10 @@ const FrappeContext = createContext<FrappeConfig | undefined>(undefined);
 export interface FrappeProviderProps {
   /** Child components */
   children: React.ReactNode;
-  /** The base URL of the Frappe server */
-  baseURL: string;
+  /** The base URL of the Frappe server. Required unless `fixtures` is set. */
+  baseURL?: string;
+  /** False uses HTTP collections without a realtime transport. Defaults to true. */
+  realtime?: boolean;
   /** Override port for Socket.IO realtime connection (e.g. 9000 in dev). */
   socketPort?: number;
   /** Dial the realtime socket at this origin (same-origin dev proxy). */
@@ -85,7 +96,10 @@ export interface FrappeProviderProps {
   syncOptions?: any;
   /** Extra Socket.IO client options for the realtime connection. */
   socketOptions?: UseFrappeCollectionConfig["socketOptions"];
-  /** Fixture provider for testing */
+  /**
+   * Fixture corpus every read and write is served from. Set it without a
+   * `baseURL` to run the whole app off fixtures with no server.
+   */
   fixtures?: FixtureProvider;
 }
 
@@ -115,6 +129,7 @@ export interface FrappeProviderProps {
 export function FrappeProvider({
   children,
   baseURL,
+  realtime,
   socketPort,
   socketBaseURL,
   siteName,
@@ -126,6 +141,7 @@ export function FrappeProvider({
   const value = React.useMemo(
     () => ({
       baseURL,
+      realtime,
       socketPort,
       socketBaseURL,
       siteName,
@@ -134,7 +150,17 @@ export function FrappeProvider({
       socketOptions,
       fixtures,
     }),
-    [baseURL, socketPort, socketBaseURL, siteName, auth, syncOptions, socketOptions, fixtures],
+    [
+      baseURL,
+      realtime,
+      socketPort,
+      socketBaseURL,
+      siteName,
+      auth,
+      syncOptions,
+      socketOptions,
+      fixtures,
+    ],
   );
 
   return <FrappeContext.Provider value={value}>{children}</FrappeContext.Provider>;

package/src/FrappeReportBuilder.tsx

@@ -125,8 +125,10 @@ export function FrappeReportBuilder({
   const finalAuth = auth ?? config?.auth;
   const finalSyncOptions = syncOptions ?? config?.syncOptions;
 
-  if (!finalBaseURL) {
-    throw new Error("FrappeReportBuilder requires baseURL prop or FrappeProvider with baseURL");
+  if (!finalBaseURL && !config?.fixtures) {
+    throw new Error(
+      "FrappeReportBuilder requires baseURL prop or FrappeProvider with baseURL or fixtures",
+    );
   }
 
   const connectionConfig = {
@@ -136,6 +138,7 @@ export function FrappeReportBuilder({
     socketBaseURL: config?.socketBaseURL,
     auth: finalAuth,
     syncOptions: finalSyncOptions,
+    realtime: config?.realtime,
     fixtures: config?.fixtures,
   };
 

package/src/FrappeReportView.tsx

@@ -691,8 +691,11 @@ export function FrappeReportView({
   }
 
   const connection = useMemo(
-    () => (finalBaseURL ? { baseURL: finalBaseURL, auth: finalAuth } : undefined),
-    [finalBaseURL, finalAuth],
+    () =>
+      finalBaseURL
+        ? { baseURL: finalBaseURL, realtime: config?.realtime, auth: finalAuth }
+        : undefined,
+    [finalBaseURL, config?.realtime, finalAuth],
   );
 
   // Controlled + uncontrolled filter values (standard pattern).

package/src/FrappeTable.autoHeight.spec.tsx

@@ -0,0 +1,142 @@
+/**
+ * MPO-229: FrappeTable must not collapse to a sliver in an auto-height parent.
+ *
+ * The wrapper YStack used `flex={1}`, which in React Native's flex model is
+ * `1 1 0` with a basis of ZERO. A basis-0 chain inside a parent that has no
+ * height of its own resolves to 0, so the whole table rendered as a one-row
+ * sliver. DataTableRoot's own root already avoids exactly this (grow 1 /
+ * shrink 1 / basis auto / minHeight 0, and it carries the note saying why).
+ * The FrappeTable wrapper sitting above it reintroduced the trap.
+ *
+ * Two halves here. The render cases pin the behaviour a caller sees: 12 rows
+ * in a plain auto-height parent, and the same table in a fixed-height parent.
+ * The source cases are the mechanical guard, because happy-dom runs no flex
+ * layout, so a basis-0 regression is invisible to a rendered assertion and
+ * only the geometry itself can be checked.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { YStack } from "tamagui";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  if (!i18next.isInitialized) {
+    await i18next.use(initReactI18next).init({
+      lng: "en",
+      interpolation: { escapeValue: false },
+      resources: { en: { translation: {} } },
+    });
+  }
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+interface Customer {
+  name: string;
+  doctype: string;
+  customer_name: string;
+}
+
+const customers: Customer[] = Array.from({ length: 12 }, (_, index) => ({
+  name: `CUST-${String(index + 1).padStart(3, "0")}`,
+  doctype: "Customer",
+  customer_name: `Customer ${index + 1}`,
+}));
+
+const columns: DataTableColumn<Partial<Customer>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "customer_name", accessorKey: "customer_name", header: "Customer Name" },
+];
+
+// Supplied so the table does not go to useDocTypeMeta for the filter list.
+const filterFields = [{ id: "customer_name", label: "Customer Name", type: "text" as const }];
+
+function renderInParent(parent: React.ReactElement) {
+  return renderWithProviders(
+    <FrappeProvider
+      baseURL="https://frappetable-autoheight.spec.test"
+      fixtures={new InMemoryFixtureProvider({ Customer: customers })}
+    >
+      {parent}
+    </FrappeProvider>,
+  );
+}
+
+const table = (
+  <FrappeTable<Customer>
+    doctype="Customer"
+    columns={columns}
+    filterableFields={filterFields}
+    layout="table"
+    enablePagination={false}
+  />
+);
+
+const srcDir = path.resolve(__dirname, ".");
+
+function read(file: string): string {
+  return fs.readFileSync(path.resolve(srcDir, file), "utf-8");
+}
+
+function codeOnly(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "");
+}
+
+describe("FrappeTable in an auto-height parent (MPO-229)", () => {
+  it("renders every row inside a plain auto-height YStack", async () => {
+    renderInParent(<YStack>{table}</YStack>);
+    await screen.findByText("Customer 1");
+    for (const customer of customers) {
+      expect(screen.getByText(customer.customer_name)).toBeTruthy();
+    }
+    expect(screen.queryByText(/No Customer records found/i)).toBeNull();
+  });
+
+  it("still renders every row inside a fixed-height parent", async () => {
+    renderInParent(<YStack height={400}>{table}</YStack>);
+    await screen.findByText("Customer 1");
+    for (const customer of customers) {
+      expect(screen.getByText(customer.customer_name)).toBeTruthy();
+    }
+  });
+
+  it("roots grow and shrink on a basis of auto, the same geometry as DataTableRoot", () => {
+    const source = codeOnly(read("FrappeTable.tsx"));
+
+    // flex={1} is 1 1 0 in RN. Basis 0 in an auto-height parent resolves to 0
+    // and the table collapses to a one-row sliver.
+    expect(source).not.toContain("flex={1}");
+
+    const tags = source.match(/<YStack\b[^>]*>/g) ?? [];
+    const roots = tags.filter((tag) => tag.includes("flexBasis"));
+    expect(roots.length).toBe(2);
+    for (const root of roots) {
+      expect(root).toContain("flexGrow={1}");
+      expect(root).toContain("flexShrink={1}");
+      expect(root).toContain('flexBasis="auto"');
+      expect(root).toContain("minHeight={0}");
+    }
+  });
+
+  it("DataTableRoot still carries the geometry FrappeTable copies", () => {
+    const source = codeOnly(read("../../table/src/components/DataTable/DataTableRoot.tsx"));
+    const tags = source.match(/<View\b[^>]*>/g) ?? [];
+    const root = tags.find((tag) => tag.includes("flexBasis"));
+    expect(root).toBeTruthy();
+    expect(root).toContain("flexGrow={1}");
+    expect(root).toContain("flexShrink={1}");
+    expect(root).toContain('flexBasis="auto"');
+    expect(root).toContain("minHeight={0}");
+  });
+});

package/src/FrappeTable.rowAccumulator.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * A running balance on a FrappeTable (MPO-250).
+ *
+ * The gap this closes: `FrappeTableProps` omits `data`, so before the row
+ * accumulator existed there was NO prop that reached the rows. A consumer who
+ * wanted a folded column on a Frappe doctype had to fetch the doctype again
+ * itself and hand the folded rows to a bare DataTable — a second read path, a
+ * second error path, and no saved filters or refresh channel.
+ *
+ * What this locks: `rowAccumulator` passes through FrappeTable to the table,
+ * folds the rows FrappeTable already fetched, and the figures continue onto
+ * page two.
+ *
+ * Fixture-hermetic: postings ride InMemoryFixtureProvider.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn, RowAccumulator } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => cleanup());
+
+interface Posting {
+  name: string;
+  doctype: string;
+  date: string;
+  payee: string;
+  amount: number;
+  /** Derived by the accumulator — declared on the doc type so a column can
+   *  name it in accessorKey. */
+  running?: number;
+}
+
+const postings: Posting[] = Array.from({ length: 8 }, (_, i) => ({
+  name: `POST-${String(i + 1).padStart(2, "0")}`,
+  doctype: "Posting",
+  date: `2026-02-${String(i + 1).padStart(2, "0")}`,
+  payee: `Payee ${i + 1}`,
+  amount: 10,
+}));
+
+const runningBalance: RowAccumulator<Partial<Posting>, number> = {
+  initial: 0,
+  reduce: (carried, row) => carried + (row.amount ?? 0),
+  derive: (carried) => ({ running: carried }),
+  order: (a, b) => String(a.date).localeCompare(String(b.date)),
+};
+
+const columns: DataTableColumn<Partial<Posting>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "amount", accessorKey: "amount", header: "Amount" },
+  {
+    id: "running",
+    accessorKey: "running",
+    header: "Balance",
+    sortable: false,
+    // Marked so an assertion can tell a balance of 10 from an amount of 10.
+    cell: ({ row }) => `bal ${row.original.running}`,
+  },
+];
+
+const filterFields = [{ id: "payee", label: "Payee", type: "text" as const }];
+
+describe("FrappeTable rowAccumulator", () => {
+  it("folds the rows FrappeTable fetched, and page two continues", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <FrappeProvider
+        baseURL="https://frappetable-fold.spec.test"
+        fixtures={new InMemoryFixtureProvider({ Posting: postings })}
+      >
+        <FrappeTable<Posting>
+          doctype="Posting"
+          columns={columns}
+          fields={["name", "date", "payee", "amount"]}
+          filterableFields={filterFields}
+          rowAccumulator={runningBalance}
+          layout="table"
+          initialState={{ pagination: { pageIndex: 0, pageSize: 4 } }}
+        />
+      </FrappeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("POST-01")).toBeTruthy());
+    expect(screen.getByText("bal 10")).toBeTruthy();
+    expect(screen.getByText("bal 40")).toBeTruthy();
+    expect(screen.queryByText("bal 50")).toBeNull();
+
+    await user.click(screen.getByLabelText("Go to next page"));
+    await waitFor(() => expect(screen.getByText("POST-05")).toBeTruthy());
+    expect(screen.getByText("bal 50"), "page two continues the fold").toBeTruthy();
+    expect(screen.getByText("bal 80")).toBeTruthy();
+    expect(screen.queryByText("bal 10"), "page one's opening balance is gone").toBeNull();
+  });
+});