@multiplatform.one/frappe-ui 7.4.1 → 7.5.0

package/src/FrappeAssignment.stories.tsx

@@ -14,12 +14,96 @@ export default {
     docs: {
       description: {
         component:
-          "Assignment (ToDo) management for one document: live assignee list from ToDo docs filtered by reference_type/reference_name, add via the backend-searching User combobox, complete (status Closed) and remove (status Cancelled) per row — assign_to parity over plain ToDo CRUD.",
+          "Assignment (ToDo) management for one document: live assignee list from ToDo docs filtered by reference_type/reference_name, add via the backend-searching User combobox, complete (status Closed) and remove (status Cancelled) per row — assign_to parity over plain ToDo CRUD. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta / search_link from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05, closes UX-P18).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves the *collection*, but DocType meta and the add
+// flow's search_link still resolve over HTTP — so those stories fired real
+// cross-origin requests the browser rejected with CORS, poisoning the console
+// for every automated probe. MOCK_HOST keeps the same code path (real fetch,
+// real meta/search shape) without leaving the machine; ERR_HOST is the
+// deliberate failure host for the error-state story.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappeassignment.mock.test";
+const ERR_HOST = "https://forbidden.frappeassignment.mock.test";
+
+function assignmentMetaRaw(name: string) {
+  if (name === "User") {
+    return {
+      name: "User",
+      module: "Core",
+      title_field: "full_name",
+      fields: [
+        { fieldname: "full_name", fieldtype: "Data", label: "Full Name", in_list_view: 1 },
+        { fieldname: "user_image", fieldtype: "Attach Image", label: "User Image" },
+      ],
+      permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+    };
+  }
+  if (name === "Task") {
+    return {
+      name: "Task",
+      module: "Projects",
+      title_field: "subject",
+      fields: [{ fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 }],
+      permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+    };
+  }
+  return {
+    name: name || "ToDo",
+    module: "Desk",
+    title_field: "description",
+    fields: [
+      { fieldname: "description", fieldtype: "Text", label: "Description", in_list_view: 1 },
+      {
+        fieldname: "allocated_to",
+        fieldtype: "Link",
+        label: "Allocated To",
+        options: "User",
+        in_list_view: 1,
+      },
+      { fieldname: "assigned_by", fieldtype: "Link", label: "Assigned By", options: "User" },
+      {
+        fieldname: "reference_type",
+        fieldtype: "Link",
+        label: "Reference Type",
+        options: "DocType",
+      },
+      { fieldname: "reference_name", fieldtype: "Dynamic Link", label: "Reference Name" },
+      {
+        fieldname: "status",
+        fieldtype: "Select",
+        label: "Status",
+        options: "Open\nClosed\nCancelled",
+        in_list_view: 1,
+      },
+      {
+        fieldname: "priority",
+        fieldtype: "Select",
+        label: "Priority",
+        options: "Low\nMedium\nHigh",
+      },
+      { fieldname: "date", fieldtype: "Date", label: "Due Date" },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
 const todoFixtures: FrappeToDo[] = [
   {
     name: "TODO-001",
@@ -86,15 +170,77 @@ const userFixtures: FrappeUserDoc[] = [
   { name: "maria@example.com", doctype: "User", full_name: "Maria Garcia" },
 ];
 
-const makeFixtures = () => new InMemoryFixtureProvider({ ToDo: todoFixtures, User: userFixtures });
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeAssignmentMockFetch) return;
+  w.__frappeAssignmentMockFetch = 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(ERR_HOST)) return jsonResponse({ message: "Not permitted" }, 403);
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "ToDo";
+        return jsonResponse({ docs: [assignmentMetaRaw(doctype)] });
+      }
+      if (url.pathname === "/api/method/frappe.desk.search.search_link") {
+        const txt = (url.searchParams.get("txt") || "").toLowerCase();
+        const hits = userFixtures.filter(
+          (user) =>
+            !txt ||
+            user.name.toLowerCase().includes(txt) ||
+            (user.full_name ?? "").toLowerCase().includes(txt),
+        );
+        return jsonResponse({
+          message: hits.map((user) => ({
+            value: user.name,
+            description: user.full_name,
+          })),
+        });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch)
+        return jsonResponse({ data: assignmentMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({
+          data: [
+            { name: "ToDo", module: "Desk" },
+            { name: "User", module: "Core" },
+            { name: "Task", module: "Projects" },
+          ],
+        });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
+const doctypeFixtures = [
+  { ...assignmentMetaRaw("ToDo"), doctype: "DocType" },
+  { ...assignmentMetaRaw("User"), doctype: "DocType" },
+  { ...assignmentMetaRaw("Task"), doctype: "DocType" },
+];
+
+const makeFixtures = () =>
+  new InMemoryFixtureProvider({
+    ToDo: todoFixtures,
+    User: userFixtures,
+    DocType: doctypeFixtures,
+  });
 
 /**
  * Two open assignees + one completed. The cancelled ToDo (TODO-005) and the
  * other document's ToDo (TODO-004) must not render. The add flow's user
- * search hits the backend (`search_link`) and is exercised in the Live story.
+ * search is served hermetically via the in-story search_link mock; the Live
+ * story exercises the real bench search.
  */
 export const Main = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeAssignment
       doctype="Task"
       name="TASK-001"
@@ -109,21 +255,21 @@ Main.storyName = "Main";
 
 /** Completed section hidden via showCompleted={false}. */
 export const OpenOnly = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeAssignment doctype="Task" name="TASK-001" showCompleted={false} />
   </FrappeProvider>
 );
 
 /** No assignments match: the compact empty state must show. */
 export const Empty = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeAssignment doctype="Task" name="TASK-NO-ASSIGNMENTS" />
   </FrappeProvider>
 );
 
 /** disabled hides add and per-row mutation affordances. */
 export const Disabled = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeAssignment doctype="Task" name="TASK-001" disabled />
   </FrappeProvider>
 );
@@ -143,18 +289,18 @@ class PendingFixtureProvider extends InMemoryFixtureProvider {
  * (LC-20 / DG-ST-02).
  */
 export const Loading = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={new PendingFixtureProvider()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new PendingFixtureProvider()}>
     <FrappeAssignment doctype="Task" name="TASK-001" />
   </FrappeProvider>
 );
 
 /**
- * Live ToDo subscription against an unreachable host with no fixtures: the
- * failed initial sync surfaces as error chrome with Retry instead of
- * masquerading as "no one assigned" (DG-ST-01 / Axiom 6).
+ * Collection that fails with no fixtures: error chrome with Retry instead of
+ * masquerading as "no one assigned" (DG-ST-01 / Axiom 6). The failure is
+ * served hermetically — the in-story mock answers ERR_HOST with 403.
  */
 export const LoadError = () => (
-  <FrappeProvider baseURL="https://frappe-assignment-error.mock.test">
+  <FrappeProvider baseURL={ERR_HOST}>
     <FrappeAssignment doctype="Task" name="TASK-001" />
   </FrappeProvider>
 );

package/src/FrappeAssignment.tsx

@@ -15,7 +15,7 @@
  */
 import { AsyncBoundary, Avatar } from "@multiplatform.one/components";
 import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
-import { Button } from "@multiplatform.one/forms";
+import { Button, formCommonColors } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { CheckIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useCallback, useMemo, useState } from "react";
@@ -168,6 +168,8 @@ function AssignmentRow({
   onRemove?: (todo: FrappeToDo) => void;
 }) {
   const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 14;
   return (
     <XStack
       role="listitem"
@@ -178,17 +180,17 @@ function AssignmentRow({
     >
       <Avatar size="$2" src={image} name={label} />
       <YStack flex={1} minWidth={0}>
-        <Text fontSize="$3" numberOfLines={1}>
+        <Text {...knobProps.body} numberOfLines={1}>
           {label}
         </Text>
         {todo.allocated_to && todo.allocated_to !== label ? (
-          <Text fontSize="$1" color="$color10" numberOfLines={1}>
+          <Text {...knobProps.label} color={formCommonColors.muted} numberOfLines={1}>
             {todo.allocated_to}
           </Text>
         ) : null}
       </YStack>
       {completed ? (
-        <CheckIcon size={14} aria-label={t("Completed")} />
+        <CheckIcon size={iconSize} aria-label={t("Completed")} />
       ) : (
         <>
           {onComplete ? (
@@ -199,7 +201,7 @@ function AssignmentRow({
               disabled={disabled}
               aria-label={t("Mark assignment complete")}
               onPress={() => onComplete(todo)}
-              icon={<CheckIcon size={14} />}
+              icon={<CheckIcon size={iconSize} />}
             />
           ) : null}
           {onRemove ? (
@@ -210,7 +212,7 @@ function AssignmentRow({
               disabled={disabled}
               aria-label={t("Remove assignment")}
               onPress={() => onRemove(todo)}
-              icon={<XIcon size={14} />}
+              icon={<XIcon size={iconSize} />}
             />
           ) : null}
         </>
@@ -377,7 +379,7 @@ function FrappeAssignmentBody({
     <YStack {...knobProps.gap} testID="frappe-assignment" {...stackProps}>
       <FrappeReconnectIndicator config={connectionConfig} />
       <XStack alignItems="center" gap="$2">
-        <Text flex={1} fontSize="$2" fontWeight="600" color="$color11">
+        <Text flex={1} {...knobProps.label} fontWeight="400" color={formCommonColors.muted}>
           {label ?? t("Assigned To")}
         </Text>
         {canMutate ? (
@@ -428,7 +430,7 @@ function FrappeAssignmentBody({
           })}
           {showCompleted && completed.length > 0 ? (
             <YStack gap="$2">
-              <Text fontSize="$1" color="$color10">
+              <Text {...knobProps.label} color={formCommonColors.muted} fontWeight="400">
                 {t("Completed")}
               </Text>
               {completed.map((todo) => {
@@ -448,7 +450,7 @@ function FrappeAssignmentBody({
         </YStack>
       </AsyncBoundary>
       {actionError ? (
-        <Text role="alert" fontSize="$2" color="$red11">
+        <Text role="alert" {...knobProps.label} color={formCommonColors.error}>
           {actionError}
         </Text>
       ) : null}

package/src/FrappeCalendar.stories.tsx

@@ -15,12 +15,88 @@ export default {
     docs: {
       description: {
         component:
-          "Calendar over useFrappeCollection / useLiveQuery. Stories use InMemoryFixtureProvider so the live path runs against fixtures. Events support pointer drag-and-drop rescheduling (web only): moves persist via collection.update and then fire onEventMove(name, fromDate, toDate). Set enableEventDrag={false} to opt out.",
+          "Calendar over useFrappeCollection / useLiveQuery. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm — it targets STORYBOOK_FRAPPE_URL when reachable and falls back to fixtures otherwise. Events support pointer drag-and-drop rescheduling (web only): moves persist via collection.update and then fire onEventMove(name, fromDate, toDate). Set enableEventDrag={false} to opt out.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05, closes UX-P18).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves the *collection*, but DocType meta still resolves
+// over HTTP — so those stories fired a real cross-origin request the browser
+// rejected with CORS, poisoning the console. MOCK_HOST keeps the same code
+// path (real fetch, real meta shape) without leaving the machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappecalendar.mock.test";
+
+function eventMetaRaw(name: string) {
+  const isLeave = name === "LeaveApplication";
+  return {
+    name,
+    module: isLeave ? "HR" : "Desk",
+    title_field: "subject",
+    fields: isLeave
+      ? [
+          { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+          { fieldname: "from_date", fieldtype: "Date", label: "From Date", in_list_view: 1 },
+          { fieldname: "to_date", fieldtype: "Date", label: "To Date", in_list_view: 1 },
+          { fieldname: "color", fieldtype: "Color", label: "Color" },
+        ]
+      : [
+          { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+          { fieldname: "starts_on", fieldtype: "Datetime", label: "Starts On", in_list_view: 1 },
+          { fieldname: "ends_on", fieldtype: "Datetime", label: "Ends On" },
+          { fieldname: "color", fieldtype: "Color", label: "Color" },
+          { fieldname: "description", fieldtype: "Small Text", label: "Description" },
+        ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeCalendarMockFetch) return;
+  w.__frappeCalendarMockFetch = 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 === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") ?? "CalEvent";
+        return jsonResponse({ docs: [eventMetaRaw(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch)
+        return jsonResponse({ data: eventMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({
+          data: [
+            { name: "CalEvent", module: "Desk" },
+            { name: "LeaveApplication", module: "HR" },
+          ],
+        });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 interface CalEvent {
   name: string;
   doctype: string;
@@ -96,7 +172,7 @@ const eventFixtures: CalEvent[] = [
 
 export const MonthView = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ CalEvent: eventFixtures })}
   >
     <FrappeCalendar<CalEvent>
@@ -124,7 +200,7 @@ MonthView.parameters = {
 MonthView.storyName = "Main";
 export const WeekView = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ CalEvent: eventFixtures })}
   >
     <FrappeCalendar<CalEvent>
@@ -150,7 +226,7 @@ WeekView.parameters = {
 
 export const DayView = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ CalEvent: eventFixtures })}
   >
     <FrappeCalendar<CalEvent>
@@ -176,7 +252,7 @@ DayView.parameters = {
 
 export const WithCustomEventRenderer = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ CalEvent: eventFixtures })}
   >
     <FrappeCalendar<CalEvent>
@@ -209,7 +285,7 @@ WithCustomEventRenderer.parameters = {
 
 export const MondayFirstDay = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ CalEvent: eventFixtures })}
   >
     <FrappeCalendar<CalEvent>
@@ -333,7 +409,7 @@ const dateOnlyFixtures: LeaveRequest[] = [
  */
 export const DateOnlyFields = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ LeaveApplication: dateOnlyFixtures })}
   >
     <FrappeCalendar<LeaveRequest>
@@ -422,7 +498,7 @@ const namedColorFixtures: CalEvent[] = [
 
 export const NamedColors = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ CalEvent: namedColorFixtures })}
   >
     <FrappeCalendar<CalEvent>
@@ -448,7 +524,7 @@ NamedColors.parameters = {
 
 export const WithEventMove = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ CalEvent: eventFixtures })}
   >
     <FrappeCalendar<CalEvent>

package/src/FrappeCalendar.tsx

@@ -5,7 +5,7 @@ import {
   type CalendarEvent,
   type CalendarEventMoveRange,
 } from "@multiplatform.one/components";
-import { Spinner } from "@multiplatform.one/forms";
+import { Spinner, formCommonColors } from "@multiplatform.one/forms";
 import React, { useMemo, useCallback, useState, type ReactNode } from "react";
 import { Text, YStack, type YStackProps } from "tamagui";
 import { useTranslation } from "react-i18next";
@@ -214,11 +214,11 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
   // was invisible on light fills and failed AA on mid-tone doc colors.
   const defaultEventContent = useCallback(
     (calEvent: CalendarEvent): ReactNode => (
-      <Text fontSize="$2" numberOfLines={2} color={eventChipTextColor(calEvent.color)}>
+      <Text numberOfLines={2} color={eventChipTextColor(calEvent.color)} {...knobProps.label}>
         {calEvent.title}
       </Text>
     ),
-    [],
+    [knobProps.label],
   );
 
   // Bridge renderEvent from Frappe doc to generic CalendarEvent
@@ -271,7 +271,7 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps}>
         <Spinner size="large" />
-        <Text color="$color10" marginTop="$2">
+        <Text color={formCommonColors.muted} marginTop="$2" {...knobProps.body}>
           {t("Loading {{doctype}}...", { doctype })}
         </Text>
       </YStack>
@@ -282,8 +282,8 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
     if (error) return <>{error(queryError)}</>;
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps} {...knobProps.gap}>
-        <Text color="$red11">{t("Error loading {{doctype}}", { doctype })}</Text>
-        <Text color="$color10" fontSize="$2">
+        <Text color={formCommonColors.error}>{t("Error loading {{doctype}}", { doctype })}</Text>
+        <Text color={formCommonColors.muted} {...knobProps.body}>
           {queryError.message}
         </Text>
       </YStack>
@@ -296,13 +296,13 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
       {actionError && (
         <YStack
           {...knobProps.panelPadding}
-          {...knobProps.borderRadius}
+          {...knobProps.containerRadius}
           backgroundColor="$red2"
           borderColor="$red7"
           borderWidth={1}
         >
-          <Text color="$red11">{t("Action failed")}</Text>
-          <Text color="$color10" fontSize="$2">
+          <Text color={formCommonColors.error}>{t("Action failed")}</Text>
+          <Text color={formCommonColors.muted} {...knobProps.body}>
             {actionError.message}
           </Text>
         </YStack>