@multiplatform.one/backoffice 6.3.0

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@multiplatform.one/backoffice",
+  "version": "6.3.0",
+  "description": "Embeddable Frappe desk recreation (backoffice) for the multiplatform.one stack",
+  "keywords": [
+    "backoffice",
+    "cross-platform",
+    "desk",
+    "frappe",
+    "multiplatform",
+    "react",
+    "react-native",
+    "tamagui",
+    "ui-components"
+  ],
+  "homepage": "https://multiplatform.one",
+  "bugs": {
+    "url": "https://gitlab.com/bitspur/multiplatform.one/multiplatform.one/issues",
+    "email": "support@risserlabs.com"
+  },
+  "license": "Apache-2.0",
+  "author": "BitSpur <support@risserlabs.com> (https://risserlabs.com)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/bitspur/frappe/multiplatform.one.git",
+    "directory": "public/backoffice"
+  },
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src",
+    "types",
+    "!types/.tsbuildinfo"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./src/*": "./src/*",
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./types/index.d.ts",
+      "react-native": {
+        "types": "./types/index.d.ts",
+        "import": "./dist/esm/index.native.js",
+        "require": "./dist/cjs/index.native.js"
+      },
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    },
+    "./one-adapter": {
+      "source": "./src/oneAdapter/index.tsx",
+      "types": "./types/oneAdapter/index.d.ts",
+      "react-native": {
+        "types": "./types/oneAdapter/index.d.ts",
+        "import": "./dist/esm/oneAdapter/index.native.js",
+        "require": "./dist/cjs/oneAdapter/index.native.js"
+      },
+      "import": "./dist/esm/oneAdapter/index.mjs",
+      "require": "./dist/cjs/oneAdapter/index.cjs",
+      "default": "./dist/esm/oneAdapter/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "tamagui": "2.0.0-rc.41",
+    "@multiplatform.one/components": "6.3.0",
+    "@multiplatform.one/frappe-ui": "6.3.0",
+    "@multiplatform.one/frappe": "6.3.0",
+    "@multiplatform.one/i18n": "6.3.0",
+    "@multiplatform.one/table": "6.3.0",
+    "@multiplatform.one/forms": "6.3.0",
+    "@multiplatform.one/platform": "6.3.0",
+    "@multiplatform.one/theme": "6.3.0",
+    "@multiplatform.one/store": "6.3.0"
+  },
+  "devDependencies": {
+    "@tamagui/build": "2.0.0-rc.41",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "~19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.5",
+    "i18next": "^25.10.10",
+    "one": "^1.16.5",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "react-i18next": "^16.6.6",
+    "vitest": "^4.1.5",
+    "@multiplatform.one/config": "6.3.0",
+    "@multiplatform.one/test-utils": "6.3.0"
+  },
+  "peerDependencies": {
+    "i18next": "^25.0.0",
+    "one": "^1.4.10",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-i18next": ">=14",
+    "react-native": ">=0.83.0"
+  },
+  "peerDependenciesMeta": {
+    "one": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
+  "module:jsx": "dist/jsx",
+  "scripts": {
+    "build": "rm -rf dist types 2>/dev/null && tamagui-build --ts-project ./tsconfig.build.json --exclude '\\.spec\\.|\\.test\\.|\\.stories\\.'",
+    "test": "vitest run --coverage --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=lcov --coverage.reporter=html",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/chrome/BackofficeAwesomebar.tsx

@@ -0,0 +1,89 @@
+// The navbar search affordance for the backoffice desk chrome. Since MOD-01
+// the results surface is a first-class command palette (CommandPalette):
+// this component renders the TRIGGER — a search-input-styled button with the
+// platform shortcut hint — and mounts the palette. The shell's global
+// shortcuts (Mod+K / Mod+G, chrome/shortcuts.ts) land here through
+// `focusRef` and open the same palette.
+//
+// The old input-anchored dropdown (unusable at phone widths — clamped to the
+// ~110px input) is gone; the palette presents as a centered overlay ≥sm and
+// a full-height sheet <sm, both fed by one section model
+// (chrome/command-palette-model.ts).
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { Button, SizableText, Text, XStack, isWeb } from "@multiplatform.one/components";
+import { useLayoutSizeClass } from "@multiplatform.one/theme";
+import type { Ref } from "react";
+import { useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { CommandPalette } from "./CommandPalette";
+
+/** Imperative surface for the shell's global shortcuts (Mod+K / Mod+G). */
+export interface BackofficeAwesomebarHandle {
+  /** Open the command palette (focus lands in its search input on web). */
+  focus: () => void;
+}
+
+export interface BackofficeAwesomebarProps {
+  /** Populated for the shell so useBackofficeShortcuts can open the palette. */
+  focusRef?: Ref<BackofficeAwesomebarHandle>;
+}
+
+/** Platform modifier label; SSR/native-safe (defaults to "Ctrl"). */
+function getModLabel(): string {
+  if (
+    typeof navigator !== "undefined" &&
+    /Mac|iPhone|iPad|iPod/i.test(String(navigator.platform ?? ""))
+  ) {
+    return "\u2318";
+  }
+  return "Ctrl";
+}
+
+export function BackofficeAwesomebar({ focusRef }: BackofficeAwesomebarProps = {}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const isCompact = useLayoutSizeClass() === "compact";
+  const [open, setOpen] = useState(false);
+
+  useImperativeHandle(focusRef, () => ({ focus: () => setOpen(true) }), []);
+
+  const label = t("awesomebar.triggerLabel", "Search");
+  const showShortcutHint = isWeb && !isCompact;
+
+  return (
+    <>
+      <Button
+        size="$3"
+        flex={1}
+        minWidth={0}
+        justifyContent="flex-start"
+        aria-label={label}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onPress={() => setOpen(true)}
+        data-testid="backoffice-awesomebar"
+      >
+        <MagnifyingGlassIcon size={16} />
+        <Text flex={1} minWidth={0} numberOfLines={1} textAlign="left" color="$color10">
+          {label}
+        </Text>
+        {showShortcutHint && (
+          <XStack
+            borderWidth={1}
+            borderColor="$borderColor"
+            backgroundColor="$color2"
+            borderRadius="$2"
+            paddingHorizontal="$1.5"
+            flexShrink={0}
+            aria-hidden
+          >
+            <SizableText size="$1" fontWeight="600" color="$color11">
+              {`${getModLabel()} K`}
+            </SizableText>
+          </XStack>
+        )}
+      </Button>
+      <CommandPalette open={open} onOpenChange={setOpen} />
+    </>
+  );
+}

package/src/chrome/CommandPalette.spec.tsx

@@ -0,0 +1,252 @@
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { BackofficeShell } from "../shell/BackofficeShell";
+import { BackofficeProvider, type BackofficeProviderProps } from "../config/BackofficeProvider";
+import type { RecentItem } from "./awesomebar-data";
+
+// The shared desk recents store rides @multiplatform.one/store, which the
+// vitest module graph duplicates (inlined vs externalized resolutions), so a
+// spec-side storage write never reaches the copy the palette reads. Stub the
+// read seam instead; the store round-trip is covered by the store package.
+const recentsSeed: { items: RecentItem[] } = { items: [] };
+vi.mock("./awesomebar-data", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./awesomebar-data")>();
+  return { ...actual, readRecentItems: async () => recentsSeed.items };
+});
+
+// Unique host per spec file: the awesomebar catalog cache is module-global
+// and keyed by baseURL, so sharing a host with other spec files would leak
+// their fixture catalogs in here.
+const MOCK_HOST = "https://backoffice-palette.mock.test";
+
+const makeFixtures = () =>
+  new InMemoryFixtureProvider({
+    DocType: [
+      { name: "ToDo", doctype: "DocType" },
+      { name: "ToDo Template", doctype: "DocType" },
+      { name: "Note", doctype: "DocType" },
+      { name: "User", doctype: "DocType" },
+    ],
+    Workspace: [
+      {
+        name: "todos",
+        doctype: "Workspace",
+        title: "Todos",
+        icon: "tool",
+        parent_page: "",
+        public: 1,
+        for_user: "",
+        sequence_id: 1,
+        module: "Automation",
+        is_hidden: 0,
+      },
+    ],
+    "Notification Log": [],
+  });
+
+const GLOBAL_SEARCH_HITS = [
+  {
+    doctype: "ToDo",
+    name: "TD-0001",
+    content: "Description: pay the rent ||| Status: Open",
+  },
+];
+
+function stubFetch() {
+  const fetchMock = vi.fn(async (input: RequestInfo | URL) => {
+    const url =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (url.includes("frappe.utils.global_search.search")) {
+      return new Response(JSON.stringify({ message: GLOBAL_SEARCH_HITS }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    return new Response(JSON.stringify({}), {
+      status: 404,
+      headers: { "Content-Type": "application/json" },
+    });
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  return fetchMock;
+}
+
+function renderShell(props: Partial<BackofficeProviderProps> = {}) {
+  const navigation = props.navigation ?? createMemoryNavigator("/backoffice");
+  return {
+    navigation,
+    ...renderWithProviders(
+      <BackofficeProvider
+        frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
+        navigation={navigation}
+        {...props}
+      >
+        <BackofficeShell>
+          <div>page body</div>
+        </BackofficeShell>
+      </BackofficeProvider>,
+    ),
+  };
+}
+
+/** Open the palette through the navbar trigger and return its search input. */
+async function openPalette() {
+  fireEvent.click(screen.getByTestId("backoffice-awesomebar"));
+  const palette = await screen.findByTestId("backoffice-command-palette");
+  const input = palette.querySelector("input");
+  if (!input) throw new Error("palette input not found");
+  return { palette, input };
+}
+
+beforeEach(() => {
+  stubFetch();
+  recentsSeed.items = [{ label: "My ToDo", path: "/backoffice/todo/x" }];
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  recentsSeed.items = [];
+});
+
+describe("CommandPalette sections", () => {
+  it("composes sections in order: recents → actions → navigation → documents", async () => {
+    renderShell();
+    const { input } = await openPalette();
+
+    fireEvent.change(input, { target: { value: "todo" } });
+
+    // Documents arrive after the 300ms debounce + stubbed RPC.
+    await waitFor(
+      () => expect(screen.getByTestId("backoffice-palette-section-documents")).toBeTruthy(),
+      { timeout: 3000 },
+    );
+
+    const sectionNodes = Array.from(
+      document.querySelectorAll('[data-testid^="backoffice-palette-section-"]'),
+    ).map((node) => node.getAttribute("data-testid"));
+    expect(sectionNodes).toEqual([
+      "backoffice-palette-section-recents",
+      "backoffice-palette-section-actions",
+      "backoffice-palette-section-navigation",
+      "backoffice-palette-section-documents",
+    ]);
+
+    // Recents: the stored visit matching the query.
+    const recents = screen.getByTestId("backoffice-palette-section-recents");
+    expect(within(recents).getByText("My ToDo")).toBeTruthy();
+
+    // Actions: contextual commands for the top doctype match.
+    const actions = screen.getByTestId("backoffice-palette-section-actions");
+    expect(within(actions).getByText("New ToDo")).toBeTruthy();
+    expect(within(actions).getByText("ToDo List")).toBeTruthy();
+
+    // Navigation: matching workspace + further doctype matches.
+    const navigation = screen.getByTestId("backoffice-palette-section-navigation");
+    expect(within(navigation).getByText("Todos")).toBeTruthy();
+    expect(within(navigation).getByText("ToDo Template")).toBeTruthy();
+
+    // Documents: global-search hit with its doctype badge + snippet.
+    const documents = screen.getByTestId("backoffice-palette-section-documents");
+    expect(within(documents).getByText("TD-0001")).toBeTruthy();
+    expect(within(documents).getByText(/pay the rent/)).toBeTruthy();
+  });
+
+  it("empty query shows recents only (skip empty sections, hint when no recents)", async () => {
+    renderShell();
+    await openPalette();
+
+    expect(await screen.findByTestId("backoffice-palette-section-recents")).toBeTruthy();
+    expect(screen.queryByTestId("backoffice-palette-section-actions")).toBeNull();
+    expect(screen.queryByTestId("backoffice-palette-section-navigation")).toBeNull();
+    expect(screen.queryByTestId("backoffice-palette-section-documents")).toBeNull();
+  });
+});
+
+describe("CommandPalette keyboard", () => {
+  it("arrows move the roving highlight and Enter navigates via the navigator", async () => {
+    const { navigation } = renderShell();
+    const { input } = await openPalette();
+
+    fireEvent.change(input, { target: { value: "note" } });
+
+    // Actions for the top match render synchronously from the catalog.
+    await waitFor(() => expect(screen.getByText("New Note")).toBeTruthy());
+
+    // items[0] = "New Note"; ArrowDown → items[1] = "Note List".
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    await waitFor(() =>
+      expect(screen.getByText("Note List").closest('[role="option"]')).toBeTruthy(),
+    );
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(navigation.getLocation().path).toBe("/backoffice/note");
+    // COMMIT class: the pick closed the palette.
+    await waitFor(() => expect(screen.queryByTestId("backoffice-command-palette")).toBeNull());
+  });
+
+  it("Escape closes the palette and returns focus to the trigger (D-22)", async () => {
+    renderShell();
+    const trigger = screen.getByTestId("backoffice-awesomebar");
+    (trigger as HTMLElement).focus();
+    const { input } = await openPalette();
+
+    fireEvent.keyDown(input, { key: "Escape" });
+
+    await waitFor(() => expect(screen.queryByTestId("backoffice-command-palette")).toBeNull());
+    await waitFor(() => expect(document.activeElement).toBe(trigger));
+  });
+});
+
+describe("CommandPalette capability + scoping", () => {
+  it("awesomebar capability off → no trigger and the palette never mounts", async () => {
+    renderShell({ capabilities: { awesomebar: false } });
+
+    expect(screen.queryByTestId("backoffice-awesomebar")).toBeNull();
+
+    // The shell shortcut (Mod+K) is not wired when the capability is off.
+    fireEvent.keyDown(document.body, { key: "k", ctrlKey: true });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(screen.queryByTestId("backoffice-command-palette")).toBeNull();
+  });
+
+  it("Mod+K opens the palette when the capability is on", async () => {
+    renderShell();
+
+    fireEvent.keyDown(document.body, { key: "k", ctrlKey: true });
+
+    expect(await screen.findByTestId("backoffice-command-palette")).toBeTruthy();
+  });
+
+  it("doctype deny scoping removes actions, navigation rows, and document hits", async () => {
+    const fetchMock = globalThis.fetch as ReturnType<typeof vi.fn>;
+    renderShell({ doctypes: { deny: ["ToDo"] } });
+    const { input } = await openPalette();
+
+    fireEvent.change(input, { target: { value: "todo" } });
+
+    // Top allowed match becomes "ToDo Template" — its commands render…
+    await waitFor(() => expect(screen.getByText("New ToDo Template")).toBeTruthy());
+    // …while the denied doctype's exact commands never do.
+    expect(screen.queryByText("New ToDo")).toBeNull();
+    expect(screen.queryByText("ToDo List")).toBeNull();
+
+    // Wait for the debounced global search to settle, then assert the ToDo
+    // document hit was scoped out.
+    await waitFor(
+      () =>
+        expect(
+          fetchMock.mock.calls.some((call) =>
+            String(call[0]).includes("frappe.utils.global_search.search"),
+          ),
+        ).toBe(true),
+      { timeout: 3000 },
+    );
+    await waitFor(() => expect(screen.queryByText("Searching…")).toBeNull(), { timeout: 3000 });
+    expect(screen.queryByText("TD-0001")).toBeNull();
+    expect(screen.queryByTestId("backoffice-palette-section-documents")).toBeNull();
+  });
+});