@multiplatform.one/backoffice 7.35.0 → 7.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/backoffice",
-  "version": "7.35.0",
+  "version": "7.37.0",
   "description": "Embeddable Frappe desk recreation (backoffice) for the multiplatform.one stack",
   "keywords": [
     "backoffice",
@@ -71,21 +71,21 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/components": "^7.35.0",
-    "@multiplatform.one/forms": "^7.35.0",
-    "@multiplatform.one/frappe": "^7.35.0",
-    "@multiplatform.one/frappe-ui": "^7.35.0",
-    "@multiplatform.one/i18n": "^7.35.0",
-    "@multiplatform.one/platform": "^7.35.0",
-    "@multiplatform.one/store": "^7.35.0",
-    "@multiplatform.one/table": "^7.35.0",
-    "@multiplatform.one/theme": "^7.35.0",
+    "@multiplatform.one/components": "^7.37.0",
+    "@multiplatform.one/forms": "^7.37.0",
+    "@multiplatform.one/frappe": "^7.37.0",
+    "@multiplatform.one/frappe-ui": "^7.37.0",
+    "@multiplatform.one/i18n": "^7.37.0",
+    "@multiplatform.one/platform": "^7.37.0",
+    "@multiplatform.one/store": "^7.37.0",
+    "@multiplatform.one/table": "^7.37.0",
+    "@multiplatform.one/theme": "^7.37.0",
     "@phosphor-icons/react": "^2.1.10",
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.35.0",
-    "@multiplatform.one/test-utils": "7.35.0",
+    "@multiplatform.one/config": "7.37.0",
+    "@multiplatform.one/test-utils": "7.37.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/react": "^16.3.3",
     "@types/react-dom": "^19.2.3",

package/src/desk/DeskPokemon.stories.tsx

@@ -0,0 +1,177 @@
+// The real desk screens on the Pokemon doctype the One app ships, served from
+// fixtures. Shoot these at phone width to check the backoffice against its
+// approved board (FZ-7684).
+import { YStack } from "@multiplatform.one/components";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { ReactNode } from "react";
+import { Desk } from "./Desk";
+
+const meta = {
+  title: "Screens/Backoffice/Desk/Pokemon",
+  component: Desk,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "beta" },
+    layout: "fullscreen",
+  },
+};
+export default meta;
+
+const MOCK_HOST = "https://backoffice-pokemon.mock.test";
+const DOCTYPE = "Pokemon";
+
+const pokemonMeta = {
+  name: DOCTYPE,
+  doctype: "DocType",
+  module: "Core",
+  title_field: "pokemon_name",
+  image_field: "sprite_front",
+  sort_field: "modified",
+  sort_order: "DESC",
+  fields: [
+    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+    { fieldname: "poke_id", fieldtype: "Int", label: "Poke ID", in_list_view: 1 },
+    { fieldname: "species", fieldtype: "Data", label: "Species", in_list_view: 1 },
+    { fieldname: "height", fieldtype: "Int", label: "Height (dm)" },
+    { fieldname: "weight", fieldtype: "Int", label: "Weight (hg)" },
+    { fieldname: "base_experience", fieldtype: "Int", label: "Base Experience" },
+    { fieldname: "column_break_1", fieldtype: "Column Break" },
+    { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (Front)" },
+    { fieldname: "sprite_back", fieldtype: "Attach Image", label: "Sprite (Back)" },
+    { fieldname: "section_break_stats", fieldtype: "Section Break", label: "Stats" },
+    { fieldname: "stats", fieldtype: "Table", label: "Stats", options: "Pokemon Stat" },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+const statMeta = {
+  name: "Pokemon Stat",
+  doctype: "DocType",
+  module: "Core",
+  istable: 1,
+  fields: [
+    { fieldname: "stat", fieldtype: "Data", label: "Stat", in_list_view: 1 },
+    { fieldname: "base_stat", fieldtype: "Int", label: "Base Stat", in_list_view: 1 },
+    { fieldname: "effort", fieldtype: "Int", label: "Effort", in_list_view: 1 },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+const sprite = (id: number, back = false) =>
+  `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${back ? "back/" : ""}${id}.png`;
+
+const rows: [string, string, number, string, number, number, number][] = [
+  ["pikachu", "Pikachu", 25, "Mouse Pokémon", 4, 60, 112],
+  ["raticate", "Raticate", 20, "Mouse Pokémon", 7, 185, 145],
+  ["rattata", "Rattata", 19, "Mouse Pokémon", 3, 35, 51],
+  ["pidgeot", "Pidgeot", 18, "Bird Pokémon", 15, 395, 216],
+  ["pidgeotto", "Pidgeotto", 17, "Bird Pokémon", 11, 300, 122],
+  ["pidgey", "Pidgey", 16, "Tiny Bird Pokémon", 3, 18, 50],
+  ["beedrill", "Beedrill", 15, "Poison Bee Pokémon", 10, 295, 178],
+  ["caterpie", "Caterpie", 10, "Worm Pokémon", 3, 29, 39],
+  ...(
+    [
+      "Bulbasaur",
+      "Ivysaur",
+      "Venusaur",
+      "Charmander",
+      "Charmeleon",
+      "Charizard",
+      "Squirtle",
+      "Wartortle",
+      "Blastoise",
+      "Metapod",
+      "Butterfree",
+      "Weedle",
+      "Kakuna",
+      "Spearow",
+      "Fearow",
+      "Ekans",
+      "Arbok",
+      "Raichu",
+    ] as const
+  ).map((title, i): [string, string, number, string, number, number, number] => {
+    const id = i < 9 ? i + 1 : i + 2;
+    return [title.toLowerCase(), title, id, "Pokémon", 5 + (i % 9), 60 + i * 37, 60 + i * 11];
+  }),
+];
+
+const now = Date.now();
+const pokemonDocs = rows.map(
+  ([name, pokemon_name, poke_id, species, height, weight, base_experience], i) => ({
+    name,
+    doctype: DOCTYPE,
+    pokemon_name,
+    poke_id,
+    species,
+    height,
+    weight,
+    base_experience,
+    sprite_front: sprite(poke_id),
+    sprite_back: sprite(poke_id, true),
+    modified: new Date(now - (4 + Math.floor(i / 5)) * 86_400_000).toISOString(),
+    stats: [
+      { name: `${name}-hp`, stat: "hp", base_stat: 45, effort: 1 },
+      { name: `${name}-attack`, stat: "attack", base_stat: 30, effort: 0 },
+      { name: `${name}-defense`, stat: "defense", base_stat: 35, effort: 0 },
+      { name: `${name}-speed`, stat: "speed", base_stat: 45, effort: 0 },
+    ],
+  }),
+);
+
+const frappe = () => ({
+  baseURL: MOCK_HOST,
+  fixtures: new InMemoryFixtureProvider({
+    DocType: [pokemonMeta, statMeta],
+    Workspace: [],
+    "Notification Log": [],
+    [DOCTYPE]: pokemonDocs,
+  }),
+});
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__deskPokemonMockFetch) return;
+  w.__deskPokemonMockFetch = 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)) return realFetch(input as RequestInfo, init);
+    const body =
+      new URL(urlStr).pathname === "/api/method/frappe.auth.get_logged_user"
+        ? { message: null }
+        : { data: [], message: [] };
+    return new Response(JSON.stringify(body), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  };
+})();
+
+function Frame({ children }: { children: ReactNode }) {
+  return (
+    <YStack height="100vh" minHeight="$0">
+      {children}
+    </YStack>
+  );
+}
+
+export const List = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={DOCTYPE} />
+  </Frame>
+);
+
+export const Form = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={DOCTYPE} name="caterpie" />
+  </Frame>
+);
+
+export const Report = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={DOCTYPE} view="report" />
+  </Frame>
+);