@multiplatform.one/frappe-ui 7.4.1 → 7.5.0

package/src/FrappeReportBuilder.tsx

@@ -7,14 +7,16 @@ import {
 import { downloadBlob } from "@multiplatform.one/platform";
 import {
   ReportBuilder,
+  PopoverContent,
+  Separator,
   type ReportColumn,
   type GroupByConfig,
 } from "@multiplatform.one/components";
-import { Spinner } from "@multiplatform.one/forms";
+import { Button, Input, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import { storage } from "@multiplatform.one/store";
 import React, { useMemo, useState, useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Popover, Separator, Text, XStack, YStack, type YStackProps, Input } from "tamagui";
+import { Popover, Text, XStack, YStack, type YStackProps } from "tamagui";
 import { FloppyDiskIcon, FolderOpenIcon, TrashIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -389,14 +391,14 @@ export function FrappeReportBuilder({
         borderBottomColor="$borderColor"
       >
         {/* Subtle stale affordance while a post-event refresh reconciles */}
-        {isLiveStale && (
+        {isLiveStale ? (
           <XStack gap="$2" alignItems="center">
             <Spinner size="small" aria-label={t("Updating")} />
-            <Text fontSize="$1" color="$color10">
+            <Text {...knobProps.label} color={formCommonColors.muted}>
               {t("Updating...")}
             </Text>
           </XStack>
-        )}
+        ) : null}
         <XStack flex={1} />
         {/* Save */}
         <Popover placement="bottom-end" open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
@@ -405,34 +407,24 @@ export function FrappeReportBuilder({
               {t("Save")}
             </Button>
           </Popover.Trigger>
-          <Popover.Content
-            {...{ backgroundColor: "$background" }}
-            {...knobProps.borderRadius}
-            {...knobProps.panelPadding}
-            borderColor="$borderColor"
-          >
-            <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+          <PopoverContent>
             <YStack {...knobProps.gap} minWidth={220}>
-              <Text fontWeight="600" fontSize="$2">
+              <Text {...knobProps.label} fontWeight="400">
                 {t("Save Report")}
               </Text>
               <Input
-                size="$3"
+                label={t("Report name")}
+                labelHidden
                 placeholder={t("Report name")}
                 value={saveReportName}
                 onChangeText={setSaveReportName}
-                onSubmitEditing={handleSaveReport}
+                inputProps={{ onSubmitEditing: handleSaveReport } as any}
               />
-              <Button
-                size="$2"
-                theme="active"
-                onPress={handleSaveReport}
-                disabled={!saveReportName.trim()}
-              >
+              <Button size="$2" onPress={handleSaveReport} disabled={!saveReportName.trim()}>
                 {t("Save")}
               </Button>
             </YStack>
-          </Popover.Content>
+          </PopoverContent>
         </Popover>
 
         {/* Load */}
@@ -443,15 +435,9 @@ export function FrappeReportBuilder({
                 {t("Load")}
               </Button>
             </Popover.Trigger>
-            <Popover.Content
-              {...{ backgroundColor: "$background" }}
-              {...knobProps.borderRadius}
-              {...knobProps.panelPadding}
-              borderColor="$borderColor"
-            >
-              <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-              <YStack gap="$1" minWidth={180}>
-                <Text fontWeight="600" fontSize="$2" color="$color10" padding="$1">
+            <PopoverContent>
+              <YStack {...knobProps.gap} minWidth={180}>
+                <Text {...knobProps.label} fontWeight="400" color={formCommonColors.muted}>
                   {t("Saved Reports")}
                 </Text>
                 <Separator />
@@ -466,11 +452,12 @@ export function FrappeReportBuilder({
                     cursor="pointer"
                     onPress={() => handleLoadReport(report)}
                   >
-                    <Text fontSize="$2" flex={1}>
+                    <Text {...knobProps.body} flex={1}>
                       {report.name}
                     </Text>
                     <Button
-                      size="$1"
+                      size="$2"
+                      circular
                       chromeless
                       icon={TrashIcon}
                       onPress={(e) => {
@@ -482,7 +469,7 @@ export function FrappeReportBuilder({
                   </XStack>
                 ))}
               </YStack>
-            </Popover.Content>
+            </PopoverContent>
           </Popover>
         )}
       </XStack>

package/src/FrappeReportView.tsx

@@ -39,7 +39,7 @@
  */
 import { AsyncDebouncer, CallModule, HttpClient, type AuthConfig } from "@multiplatform.one/frappe";
 import { AsyncBoundary } from "@multiplatform.one/components";
-import { DatePicker, Spinner } from "@multiplatform.one/forms";
+import { Button, DatePicker, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import {
   DataTable,
   DataTableExport,
@@ -52,7 +52,7 @@ import { formatCalendarDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import { ArrowClockwiseIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Text, XStack, YStack, type YStackProps } from "tamagui";
+import { Text, XStack, YStack, type YStackProps } from "tamagui";
 import { useFrappeConfig } from "./FrappeProvider";
 import { Check } from "./fields/Check";
 import { Data } from "./fields/Data";
@@ -804,7 +804,7 @@ export function FrappeReportView({
           {isFetching && !isLoading && (
             <XStack gap="$2" alignItems="center" paddingBottom="$2">
               <Spinner size="small" aria-label={t("Updating")} />
-              <Text fontSize="$1" color="$color10">
+              <Text {...knobProps.label} color={formCommonColors.muted}>
                 {t("Updating...")}
               </Text>
             </XStack>
@@ -851,7 +851,7 @@ export function FrappeReportView({
 
       {/* Server-side report message (already user-facing). */}
       {payload?.message && (
-        <Text fontSize="$2" color="$color10">
+        <Text {...knobProps.label} color={formCommonColors.muted}>
           {payload.message}
         </Text>
       )}

package/src/FrappeTreeView.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Text, YStack, type YStackProps } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { formCommonColors } from "@multiplatform.one/forms";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 import { toLiveLoadError } from "./liveErrors";
@@ -238,10 +239,13 @@ export function FrappeTreeView<TDoc extends { name: string; doctype: string }>({
   }
 
   if (isKnownNotTree) {
+    const iconSize = Number(knobProps.controlIcon?.width) || 16;
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...knobProps.gap} {...stackProps}>
-        <TreeStructureIcon size={48} color="$color8" />
-        <Text color="$color10">{t("This DocType does not support tree view")}</Text>
+        <TreeStructureIcon size={iconSize * 2} color={formCommonColors.muted} />
+        <Text color={formCommonColors.muted} {...knobProps.body}>
+          {t("This DocType does not support tree view")}
+        </Text>
       </YStack>
     );
   }
@@ -277,12 +281,12 @@ export function FrappeTreeView<TDoc extends { name: string; doctype: string }>({
         showExpansionArrows
         selectedId={selectedId}
         renderNode={(node) => (
-          <Text fontSize={display === "compressed" ? 12 : 14} numberOfLines={1}>
+          <Text {...knobProps.label} numberOfLines={1}>
             {node.label}
             {valueField &&
               node.data &&
               (node.data as Record<string, unknown>)[valueField] != null && (
-                <Text color="$color10" fontSize="$2" marginInlineStart="$2">
+                <Text color={formCommonColors.muted} {...knobProps.label} marginInlineStart="$2">
                   {String((node.data as Record<string, unknown>)[valueField])}
                 </Text>
               )}

package/src/components/attachments.stories.tsx

@@ -13,12 +13,84 @@ export default {
     docs: {
       description: {
         component:
-          "Frappe bridge for the generic Attachments component: maps File documents (filtered by attached_to_doctype/name) into AttachmentItem[] and forwards every other prop.",
+          "Frappe bridge for the generic Attachments component: maps File documents (filtered by attached_to_doctype/name) into AttachmentItem[] and forwards every other prop. 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.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// 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. MOCK_HOST keeps the same code path (real fetch, real
+// meta shape) without leaving the machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappeattachments.mock.test";
+
+function fileMetaRaw(name: string) {
+  return {
+    name,
+    module: "Core",
+    title_field: "file_name",
+    fields: [
+      { fieldname: "file_name", fieldtype: "Data", label: "File Name", in_list_view: 1 },
+      { fieldname: "file_url", fieldtype: "Attach", label: "File URL" },
+      { fieldname: "file_size", fieldtype: "Int", label: "File Size", in_list_view: 1 },
+      { fieldname: "file_type", fieldtype: "Data", label: "File Type" },
+      { fieldname: "is_private", fieldtype: "Check", label: "Is Private" },
+      {
+        fieldname: "attached_to_doctype",
+        fieldtype: "Link",
+        label: "Attached To DocType",
+        options: "DocType",
+      },
+      { fieldname: "attached_to_name", fieldtype: "Data", label: "Attached To Name" },
+      { fieldname: "attached_to_field", fieldtype: "Data", label: "Attached To Field" },
+      { fieldname: "creation", fieldtype: "Datetime", label: "Created On" },
+      { fieldname: "modified", fieldtype: "Datetime", label: "Last Modified" },
+    ],
+    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.__frappeAttachmentsMockFetch) return;
+  w.__frappeAttachmentsMockFetch = 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") || "File";
+        return jsonResponse({ docs: [fileMetaRaw(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: fileMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({ data: [{ name: "File", module: "Core" }] });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 const fileFixtures: FrappeFile[] = [
   {
     name: "FILE-001",
@@ -59,7 +131,7 @@ const fileFixtures: FrappeFile[] = [
 const makeFixtures = () => new InMemoryFixtureProvider({ File: fileFixtures });
 
 export const Main = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Attachments
       doctype="Task"
       docname="TASK-001"
@@ -75,21 +147,21 @@ Main.storyName = "Main";
 
 /** fieldname filter must narrow to files attached to that specific field. */
 export const FieldScoped = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Attachments doctype="Task" docname="TASK-001" fieldname="design_attachment" label="Design" />
   </FrappeProvider>
 );
 
 /** No files match: the base component's empty state must show. */
 export const Empty = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Attachments doctype="Task" docname="TASK-NO-FILES" label="Attachments" />
   </FrappeProvider>
 );
 
 /** disabled forwards to the base component (no add/remove affordances). */
 export const Disabled = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Attachments doctype="Task" docname="TASK-001" label="Attachments" disabled />
   </FrappeProvider>
 );
@@ -111,7 +183,7 @@ class PendingFixtureProvider extends InMemoryFixtureProvider {
  * twin, never empty chrome (LC-20 / DG-ST-02).
  */
 export const Loading = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={new PendingFixtureProvider()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new PendingFixtureProvider()}>
     <Attachments doctype="Task" docname="TASK-001" label="Attachments" />
   </FrappeProvider>
 );
@@ -134,7 +206,7 @@ class FailingFixtureProvider extends InMemoryFixtureProvider {
  * re-runs the initial sync (recovery is covered by tests/attachments.spec).
  */
 export const LoadError = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={new FailingFixtureProvider()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new FailingFixtureProvider()}>
     <Attachments doctype="Task" docname="TASK-001" label="Attachments" onAdd={action("onAdd")} />
   </FrappeProvider>
 );

package/src/components/tags.stories.tsx

@@ -1,6 +1,7 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
 import { FrappeProvider } from "../FrappeProvider";
+import { FrappeStoryProvider, LiveToDoGate, LIVE_TODO_NAME } from "../frappeStoryTarget";
 import { Tags, type FrappeTag, type FrappeTagLink } from "./tags";
 
 export default {
@@ -12,12 +13,98 @@ export default {
     docs: {
       description: {
         component:
-          "Frappe bridge for the generic Tags component: Tag Link documents become the assigned tags, all Tag documents become suggestions.",
+          "Frappe bridge for the generic Tags component: Tag Link documents become the assigned tags, all Tag documents become suggestions. 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.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves Tag / Tag Link *documents*, but collection setup
+// still resolves DocType meta over HTTP — so those stories fired a real
+// cross-origin request that the browser rejected with a CORS error. MOCK_HOST
+// keeps the same code path (real fetch, real meta shape) without leaving the
+// machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappetags.mock.test";
+
+function tagMetaRaw(name: string) {
+  if (name === "Tag Link") {
+    return {
+      name: "Tag Link",
+      module: "Desk",
+      fields: [
+        { fieldname: "tag", fieldtype: "Link", label: "Tag", options: "Tag", in_list_view: 1 },
+        {
+          fieldname: "document_type",
+          fieldtype: "Link",
+          label: "Document Type",
+          options: "DocType",
+          in_list_view: 1,
+        },
+        {
+          fieldname: "document_name",
+          fieldtype: "Dynamic Link",
+          label: "Document Name",
+          options: "document_type",
+          in_list_view: 1,
+        },
+      ],
+      permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+    };
+  }
+  return {
+    name,
+    module: "Desk",
+    title_field: "name",
+    fields: [{ fieldname: "name", fieldtype: "Data", label: "Tag", in_list_view: 1 }],
+    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.__frappeTagsMockFetch) return;
+  w.__frappeTagsMockFetch = 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") || "Tag";
+        return jsonResponse({ docs: [tagMetaRaw(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: tagMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({
+          data: [
+            { name: "Tag", module: "Desk" },
+            { name: "Tag Link", module: "Desk" },
+          ],
+        });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 const tagFixtures: FrappeTag[] = [
   { name: "urgent", doctype: "Tag" },
   { name: "follow-up", doctype: "Tag" },
@@ -47,13 +134,20 @@ const tagLinkFixtures: FrappeTagLink[] = [
     document_type: "Task",
     document_name: "TASK-OTHER",
   },
+  {
+    name: "TL-LIVE-001",
+    doctype: "Tag Link",
+    tag: "urgent",
+    document_type: "ToDo",
+    document_name: LIVE_TODO_NAME,
+  },
 ];
 
 const makeFixtures = () =>
   new InMemoryFixtureProvider({ Tag: tagFixtures, "Tag Link": tagLinkFixtures });
 
 export const Main = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Tags
       doctype="Task"
       docname="TASK-001"
@@ -68,28 +162,28 @@ Main.storyName = "Main";
 
 /** Document with no tag links: empty state plus suggestions available via Add. */
 export const Empty = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Tags doctype="Task" docname="TASK-NO-TAGS" label="Tags" onAdd={action("onAdd")} />
   </FrappeProvider>
 );
 
 /** enableAdd=false must hide the add affordance entirely. */
 export const NoAdd = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Tags doctype="Task" docname="TASK-001" label="Tags" enableAdd={false} />
   </FrappeProvider>
 );
 
 /** Without onRemove the chips must not offer a remove affordance. */
 export const NoRemove = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Tags doctype="Task" docname="TASK-001" label="Tags" />
   </FrappeProvider>
 );
 
 /** disabled forwards to the base component. */
 export const Disabled = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Tags
       doctype="Task"
       docname="TASK-001"
@@ -100,3 +194,34 @@ export const Disabled = () => (
     />
   </FrappeProvider>
 );
+
+/**
+ * Live tags against the real bench (STORYBOOK_FRAPPE_URL, default the local
+ * dev bench proxied by the Storybook dev server) on a stock ToDo. Tag /
+ * Tag Link are core doctypes. Falls back to fixtures when the bench is
+ * unreachable.
+ */
+export const Live = () => (
+  <FrappeStoryProvider fixtures={makeFixtures()}>
+    <LiveToDoGate>
+      {(name) => (
+        <Tags
+          doctype="ToDo"
+          docname={name}
+          label="Tags"
+          onAdd={action("onAdd")}
+          onRemove={action("onRemove")}
+          onTagClick={action("onTagClick")}
+        />
+      )}
+    </LiveToDoGate>
+  </FrappeStoryProvider>
+);
+Live.parameters = {
+  docs: {
+    description: {
+      story:
+        "Live Tag / Tag Link collections over a stock ToDo: assigned tags and suggestions come from the bench when STORYBOOK_FRAPPE_URL is reachable; fixture fallback (ToDo/TODO-LIVE-001 + Tag Link) when it is not.",
+    },
+  },
+};