@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/src/fields/DynamicLink.stories.tsx

@@ -4,20 +4,9 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 import { YStack } from "tamagui";
 import { FrappeProvider } from "../FrappeProvider";
+import { FrappeStoryProvider } from "../frappeStoryTarget";
 import { DynamicLink, type DynamicLinkProps } from "./DynamicLink";
 
-const fixtures = new InMemoryFixtureProvider({
-  Contact: [
-    { name: "CONTACT-001", doctype: "Contact" },
-    { name: "CONTACT-002", doctype: "Contact" },
-  ],
-  Task: [
-    { name: "TASK-001", doctype: "Task" },
-    { name: "TASK-002", doctype: "Task" },
-    { name: "TASK-003", doctype: "Task" },
-  ],
-});
-
 export default {
   title: "FrappeUI/DynamicLink",
   component: DynamicLink,
@@ -27,7 +16,7 @@ export default {
     docs: {
       description: {
         component:
-          "Frappe Dynamic Link field: doctype selector + document selector, documents fetched live from the selected doctype (fixture-backed here).",
+          "Frappe Dynamic Link field: doctype selector + document selector. 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.",
       },
     },
   },
@@ -40,6 +29,93 @@ export default {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05).
+//
+// 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. MOCK_HOST
+// keeps the same code path (real fetch, real meta shape) without leaving the
+// machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappedynamiclink.mock.test";
+
+function doctypeMeta(name: string) {
+  return {
+    name,
+    doctype: "DocType",
+    module: name === "Task" || name === "ToDo" ? "Projects" : "Contacts",
+    title_field: "name",
+    fields: [{ fieldname: "name", fieldtype: "Data", label: "Name", 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.__frappeDynamicLinkMockFetch) return;
+  w.__frappeDynamicLinkMockFetch = 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") || "Contact";
+        return jsonResponse({ docs: [doctypeMeta(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: doctypeMeta(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({
+          data: [
+            { name: "Contact", module: "Contacts" },
+            { name: "Task", module: "Projects" },
+          ],
+        });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
+const fixtures = new InMemoryFixtureProvider({
+  Contact: [
+    { name: "CONTACT-001", doctype: "Contact" },
+    { name: "CONTACT-002", doctype: "Contact" },
+  ],
+  Task: [
+    { name: "TASK-001", doctype: "Task" },
+    { name: "TASK-002", doctype: "Task" },
+    { name: "TASK-003", doctype: "Task" },
+  ],
+  DocType: [doctypeMeta("Contact"), doctypeMeta("Task")],
+});
+
+const liveFixtures = new InMemoryFixtureProvider({
+  ToDo: [
+    { name: "TODO-001", doctype: "ToDo" },
+    { name: "TODO-002", doctype: "ToDo" },
+  ],
+  User: [
+    { name: "Administrator", doctype: "User" },
+    { name: "Guest", doctype: "User" },
+  ],
+  DocType: [doctypeMeta("ToDo"), doctypeMeta("User")],
+});
+
 type StoryProps = DynamicLinkProps & Record<string, unknown>;
 
 function Controlled(props: Omit<StoryProps, "onChange">) {
@@ -58,7 +134,7 @@ function Controlled(props: Omit<StoryProps, "onChange">) {
 }
 
 const withProvider = (node: ReactNode) => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={fixtures}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={fixtures}>
     {node}
   </FrappeProvider>
 );
@@ -97,3 +173,28 @@ export const States = (args: StoryProps) =>
     </YStack>,
   );
 States.args = { doctypes: ["Contact", "Task"] } as Partial<StoryProps>;
+
+/**
+ * Live Dynamic Link against the real bench (STORYBOOK_FRAPPE_URL, default
+ * the local dev bench proxied by the Storybook dev server) on stock ToDo and
+ * User doctypes. Falls back to fixtures when the bench is unreachable.
+ */
+export const Live = (args: StoryProps) => (
+  <FrappeStoryProvider fixtures={liveFixtures}>
+    <YStack maxWidth={420}>
+      <Controlled {...args} />
+    </YStack>
+  </FrappeStoryProvider>
+);
+Live.args = {
+  label: "Reference",
+  doctypes: ["ToDo", "User"],
+} as Partial<StoryProps>;
+Live.parameters = {
+  docs: {
+    description: {
+      story:
+        "Live Dynamic Link over stock ToDo and User: picking a doctype lists documents from the bench (or fixtures when the bench is down).",
+    },
+  },
+};

package/src/fields/DynamicLink.tsx

@@ -1,10 +1,14 @@
-import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
-import { Skeleton } from "@multiplatform.one/forms";
-import { CaretDownIcon } from "@phosphor-icons/react";
+/**
+ * Frappe Dynamic Link: a doctype Select plus a Link over the chosen DocType.
+ *
+ * Design-law lives here: compose forms Select + the Frappe Link (Combobox)
+ * adapter. Do not fork tamagui Select chrome. R10: no frappe.ui.form.on.
+ */
+import { Select as FormsSelect } from "@multiplatform.one/forms";
+import { useState } from "react";
+import { YStack } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useMemo, useState } from "react";
-import { Label, Select, Text, YStack } from "tamagui";
-import { useFrappeConfig } from "../FrappeProvider";
+import { Link } from "./Link";
 
 export interface DynamicLinkProps {
   label?: string;
@@ -42,137 +46,51 @@ export function DynamicLink({
   compact = false,
 }: DynamicLinkProps) {
   const { knobProps } = useResolvedKnobs();
-  const config = useFrappeConfig();
   const [selectedDoctype, setSelectedDoctype] = useState<string>(doctypeFieldValue || "");
   const isLocked = disabled || readOnly;
-  const minHeight = compact ? 32 : 40;
+  const doctypeOptions = doctypes.map((doctype) => ({ label: doctype, value: doctype }));
 
-  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
-  const finalConfig = finalBaseURL
-    ? {
-        baseURL: finalBaseURL,
-        socketPort: config?.socketPort,
-        siteName: config?.siteName,
-        socketBaseURL: config?.socketBaseURL,
-        auth: auth ?? config?.auth,
-        syncOptions: config?.syncOptions,
-        fixtures: config?.fixtures,
-      }
-    : undefined;
-
-  const documentsCollection = useFrappeCollection<{ name: string; doctype: string }>(
-    finalConfig,
-    selectedDoctype,
-    selectedDoctype ? { fields: ["name"] } : undefined,
-  );
-  const { data: rawDocuments } = useLiveQuery(
-    (q) => (documentsCollection ? q.from({ _list: documentsCollection }) : null),
-    [documentsCollection],
-  );
-  const documents = useMemo(
-    () => (rawDocuments as { name: string; doctype: string }[]) ?? [],
-    [rawDocuments],
-  );
-
-  const handleDoctypeChange = (doctype: string) => {
+  const handleDoctypeChange = (next: string | string[]) => {
     if (isLocked) return;
+    const doctype = Array.isArray(next) ? (next[0] ?? "") : next;
     setSelectedDoctype(doctype);
     onDoctypeChange?.(doctype);
     onChange("");
   };
 
-  if (skeleton) {
-    return (
-      <YStack {...knobProps.gap}>
-        {label ? <Skeleton variant="text" width="30%" height={14} /> : null}
-        <Skeleton variant="rounded" width="100%" height={minHeight} />
-        <Skeleton variant="rounded" width="100%" height={minHeight} />
-      </YStack>
-    );
-  }
+  const documentPicked = !!selectedDoctype;
 
   return (
     <YStack {...knobProps.gap}>
-      {label ? (
-        <Label>
-          {label}
-          {required ? <Text color="$red10"> *</Text> : null}
-        </Label>
-      ) : null}
-
-      <YStack {...knobProps.gap}>
-        <Select
-          size={knobProps.sizeToken}
-          {...({
-            value: selectedDoctype,
-            onValueChange: handleDoctypeChange,
-            disabled: isLocked,
-          } as any)}
-        >
-          <Select.Trigger iconAfter={CaretDownIcon} disabled={isLocked} {...knobProps.borderRadius}>
-            <Select.Value placeholder="Select DocType" />
-          </Select.Trigger>
-
-          <Select.Content {...{ backgroundColor: "$background" }} {...knobProps.borderRadius}>
-            <Select.Viewport>
-              <Select.Group>
-                <Select.Label>DocType</Select.Label>
-                {doctypes.map((doctype, i) => (
-                  <Select.Item key={doctype} index={i} value={doctype}>
-                    <Select.ItemText>{doctype}</Select.ItemText>
-                  </Select.Item>
-                ))}
-              </Select.Group>
-            </Select.Viewport>
-          </Select.Content>
-        </Select>
-
-        {/* Ternary, not `&&`: with no doctype picked `selectedDoctype` is ""
-            and `{"" && …}` renders an empty text node inside this View —
-            which breaks the native render contract (UX-P16 / Axiom 13:
-            "A text node cannot be a child of a View"). */}
-        {selectedDoctype ? (
-          <Select
-            size={knobProps.sizeToken}
-            {...({
-              value,
-              onValueChange: isLocked ? undefined : onChange,
-              disabled: isLocked || !documents || documents.length === 0,
-            } as any)}
-          >
-            <Select.Trigger
-              iconAfter={CaretDownIcon}
-              disabled={isLocked || !documents || documents.length === 0}
-              {...knobProps.borderRadius}
-            >
-              <Select.Value placeholder={`Select ${selectedDoctype}`} />
-            </Select.Trigger>
-
-            <Select.Content {...{ backgroundColor: "$background" }} {...knobProps.borderRadius}>
-              <Select.Viewport>
-                <Select.Group>
-                  <Select.Label>{selectedDoctype}</Select.Label>
-                  {documents?.map((doc, i) => (
-                    <Select.Item key={doc.name} index={i} value={doc.name || ""}>
-                      <Select.ItemText>{doc.name}</Select.ItemText>
-                    </Select.Item>
-                  ))}
-                </Select.Group>
-              </Select.Viewport>
-            </Select.Content>
-          </Select>
-        ) : null}
-      </YStack>
-
-      {helperText && !error ? (
-        <Text color="$color11" fontSize="$2">
-          {helperText}
-        </Text>
-      ) : null}
-      {error ? (
-        <Text color="$red11" fontSize="$2">
-          {error}
-        </Text>
+      <FormsSelect
+        label={label}
+        value={selectedDoctype}
+        onChange={handleDoctypeChange}
+        options={doctypeOptions}
+        placeholder="Select DocType"
+        disabled={isLocked}
+        required={required}
+        readOnly={readOnly}
+        skeleton={skeleton}
+        compact={compact}
+        error={documentPicked ? undefined : error}
+        helperText={documentPicked ? undefined : helperText}
+      />
+      {documentPicked ? (
+        <Link
+          doctype={selectedDoctype}
+          value={value}
+          onChange={onChange}
+          disabled={isLocked}
+          readOnly={readOnly}
+          skeleton={skeleton}
+          compact={compact}
+          placeholder={`Select ${selectedDoctype}`}
+          error={error}
+          helperText={helperText}
+          baseURL={baseURL}
+          auth={auth}
+        />
       ) : null}
     </YStack>
   );