@multiplatform.one/frappe-ui 7.4.0 → 7.5.0

package/src/fields/FrappeFileUpload.stories.tsx

@@ -1,9 +1,12 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../fieldRegistry";
 import { FrappeProvider } from "../FrappeProvider";
+import { FrappeStoryProvider } from "../frappeStoryTarget";
 import { FileUpload, type FileUploadProps } from "./FileUpload";
 
 // 1x1 transparent PNG
@@ -105,3 +108,32 @@ export const States = (args: StoryProps) =>
     </YStack>,
   );
 States.args = {} as Partial<StoryProps>;
+
+type FileUploadRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<FileUploadRow[]>([
+      { id: "1", label: "Alpha", value: tinyPng },
+      { id: "2", label: "Beta", value: "report.pdf" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<FileUploadRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "File", ...fieldtypeToTableField("Attach") },
+    ];
+    return (
+      <FrappeStoryProvider fixtures={fixtures}>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Geolocation/Geolocation.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Geolocation, type GeolocationProps } from ".";
 
 export default {
@@ -88,3 +91,33 @@ ContractProbe.args = {
   label: "Location",
   value: '{"lat": 30.2672, "lng": -97.7431}',
 } as Partial<StoryProps>;
+
+type GeoValue = { lat: number; lng: number } | null;
+type GeoRow = { id: string; label: string; value: GeoValue };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<GeoRow[]>([
+      { id: "1", label: "Alpha", value: { lat: 30.2672, lng: -97.7431 } },
+      { id: "2", label: "Beta", value: { lat: 12.9716, lng: 77.5946 } },
+      { id: "3", label: "Gamma", value: null },
+    ]);
+    const columns: DataTableColumn<GeoRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Site", ...fieldtypeToTableField("Geolocation") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/HTML/Html.stories.tsx

@@ -1,4 +1,7 @@
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Html, type HtmlProps } from ".";
 
 export default {
@@ -69,3 +72,59 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { value: "<p>Probe content</p>" } as Partial<StoryProps>;
+
+interface HtmlCellRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const htmlCellRows: HtmlCellRow[] = [
+  { id: "1", label: "Alpha", value: "<p><strong>In stock</strong></p>" },
+  { id: "2", label: "Beta", value: "<p>Backorder — <em>ETA Friday</em></p>" },
+  { id: "3", label: "Gamma", value: "" },
+];
+
+const htmlMapped = fieldtypeToTableField("HTML");
+
+const htmlCellColumns: DataTableColumn<HtmlCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "HTML",
+    ...htmlMapped,
+  } as DataTableColumn<HtmlCellRow>,
+];
+
+function InTableStory() {
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={htmlCellRows}
+        columns={htmlCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        readOnly
+        aria-label="HTML read-only cell table"
+      />
+    </YStack>
+  );
+}
+
+/**
+ * HTML is TABLE_LAYOUT — never an editable child-table column. fieldtypeToTableField
+ * falls through to a read-only input; the table is mounted readOnly.
+ */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        'HTML is a layout-only fieldtype (TABLE_LAYOUT_TYPES). This story shows a 3-row read-only column from fieldtypeToTableField("HTML") — not an editable cell.',
+    },
+  },
+};

package/src/fields/HTML/index.tsx

@@ -1,7 +1,11 @@
-import { Skeleton } from "@multiplatform.one/forms";
+/**
+ * Frappe HTML field — sanitised read-only HTML in FieldLayout + cardSurface.
+ * Design-law: compose FieldLayout; inherit body metrics (no 14px / 1px fork).
+ */
+import { FieldLayout, Skeleton, formCommonColors } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
-import { Label, Text, View, YStack, type YStackProps } from "tamagui";
+import { Text, View, YStack, type YStackProps } from "tamagui";
 
 export interface HtmlProps extends Omit<YStackProps, "children"> {
   label?: string;
@@ -106,10 +110,9 @@ export function sanitizeHtml(html: string): string {
 }
 
 function HtmlContent({ html }: { html: string }) {
-  // Sanitized HTML only — see sanitizeHtml(). View renders as div on web.
+  // Sanitized HTML only — inherit body metrics/color from the card (no 14px).
   const webProps = {
     dangerouslySetInnerHTML: { __html: html },
-    style: { lineHeight: 1.5, fontSize: 14, color: "var(--color)" },
   };
   return <View {...(webProps as Record<string, unknown>)} />;
 }
@@ -128,53 +131,41 @@ export function Html({
 }: HtmlProps) {
   const { knobProps } = useResolvedKnobs();
   const sanitizedHtml = useMemo(() => sanitizeHtml(value), [value]);
-  const minHeight = compact ? 40 : 60;
 
   if (skeleton) {
     return (
-      <YStack {...knobProps.gap} {...stackProps}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
-        <Skeleton variant="rounded" width="100%" height={minHeight} />
+      <YStack {...stackProps}>
+        <FieldLayout label={label} required={required}>
+          <Skeleton variant="rounded" width="100%" height={compact ? 40 : 60} />
+        </FieldLayout>
       </YStack>
     );
   }
 
   return (
-    <YStack {...knobProps.gap} {...stackProps} opacity={disabled ? 0.6 : 1}>
-      {label && (
-        <Label>
-          {label}
-          {required && <Text color="$red10"> *</Text>}
-        </Label>
-      )}
+    <YStack {...stackProps}>
+      <FieldLayout
+        label={label}
+        error={error}
+        helperText={helperText}
+        required={required}
+        disabled={disabled}
+      >
       <YStack
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor={error ? "$red8" : "$borderColor"}
-        backgroundColor="$backgroundHover"
-        {...knobProps.panelPadding}
-        minHeight={minHeight}
+        {...knobProps.cardSurface}
+        {...knobProps.body}
+        opacity={disabled ? 0.6 : 1}
+        minHeight={compact ? 40 : 60}
       >
         {sanitizedHtml ? (
           <HtmlContent html={sanitizedHtml} />
         ) : (
-          <Text color="$color10" fontSize="$2">
+          <Text color={formCommonColors.muted} {...knobProps.body}>
             No content
           </Text>
         )}
       </YStack>
-      {helperText && !error && (
-        <Text color="$color11" fontSize="$2">
-          {helperText}
-        </Text>
-      )}
-      {error && (
-        // $red11 is the house error-text role — $red10 measured 4.37:1 on
-        // light color1, under the AA floor (fix-contrast-aa-floors §4.3).
-        <Text color="$red11" fontSize="$2">
-          {error}
-        </Text>
-      )}
+    </FieldLayout>
     </YStack>
   );
 }

package/src/fields/Heading/Heading.stories.tsx

@@ -1,9 +1,12 @@
 import { action } from "@multiplatform.one/storybook";
+import { useState } from "react";
 import { Text, YStack } from "tamagui";
+import type { FieldSchema } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
+import { SchemaForm, type FormSchema } from "../../schemaForm";
 import { Heading, type HeadingProps } from ".";
-import { Data } from "../Data";
 import { Check } from "../Check";
-import { useState } from "react";
+import { Data } from "../Data";
 
 export default {
   title: "FrappeUI/Heading",
@@ -110,3 +113,61 @@ FormWithSections.parameters = {
     },
   },
 };
+
+const headingInTableFields: FieldSchema[] = [
+  { type: "Heading", name: "identity_break", label: "Identity" },
+  { type: "Data", name: "title", label: "Title" },
+  { type: "Heading", name: "notes_break", label: "Notes" },
+  { type: "Data", name: "notes", label: "Notes" },
+];
+
+const headingInTableSchema: FormSchema = {
+  fields: headingInTableFields,
+  sections: [
+    {
+      label: "General Information",
+      description:
+        "Heading is TABLE_LAYOUT — it is never a child-table column. Shown here as SchemaForm section chrome plus Heading fieldtypes.",
+      columns: [{ fields: headingInTableFields }],
+    },
+  ],
+};
+
+function InTableStory() {
+  const [doc, setDoc] = useState<Record<string, unknown>>({
+    title: "Alpha widget",
+    notes: "Follow up after the site visit.",
+  });
+  return (
+    <YStack width="100%" maxWidth={520}>
+      <SchemaForm
+        schema={headingInTableSchema}
+        doc={doc}
+        setValue={(field, value) => {
+          action("setValue")(field, value);
+          setDoc((prev) => ({ ...prev, [field]: value }));
+        }}
+      />
+    </YStack>
+  );
+}
+
+/**
+ * Heading is TABLE_LAYOUT — skip the editable DataTable cell. SchemaForm mock
+ * with Heading fieldtypes + section chrome (fieldtypeToTableField falls through
+ * to a read-only input and is not used as a column).
+ */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        'Heading is TABLE_LAYOUT_TYPES, so there is no editable LiveCell. This story mounts a SchemaForm mock section with Heading fieldtypes instead. fieldtypeToTableField("Heading") is the unmapped read-only fallback and is not used as a column.',
+    },
+  },
+};

package/src/fields/Icon/index.tsx

@@ -0,0 +1,90 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Icon as FormsIcon } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type IconProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  "children" | "field" | "onChange"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    skeleton?: boolean;
+    compact?: boolean;
+    icons?: readonly string[];
+    options?: string;
+  };
+
+export function Icon<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: IconProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    mode,
+    name,
+    onBlur,
+    onChange,
+    preserveValue,
+    validators,
+    disabled,
+    value,
+    placeholder,
+    icons,
+    options,
+    ...fieldProps
+  } = useProps(props) as IconProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsIcon
+      name={name}
+      form={form}
+      validators={validators}
+      value={value as string | undefined}
+      onChange={onChange as ((v: string) => void) | undefined}
+      defaultValue={defaultValue as string}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      readOnly={fieldProps.readOnly}
+      skeleton={fieldProps.skeleton}
+      compact={fieldProps.compact}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      disabled={disabled}
+      placeholder={placeholder}
+      icons={icons}
+      options={options}
+      onBlur={onBlur}
+      mode={mode}
+      preserveValue={preserveValue}
+    />
+  );
+}

package/src/fields/Link.spec.tsx

@@ -14,6 +14,7 @@ import { Link } from "./Link";
 
 const mockUseLinkSearch = vi.fn();
 const mockUseLinkTitle = vi.fn();
+const mockUseDocTypeMeta = vi.fn();
 
 vi.mock("@multiplatform.one/frappe", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
@@ -21,6 +22,7 @@ vi.mock("@multiplatform.one/frappe", async (importOriginal) => {
     ...actual,
     useLinkSearch: (...args: unknown[]) => mockUseLinkSearch(...args),
     useLinkTitle: (...args: unknown[]) => mockUseLinkTitle(...args),
+    useDocTypeMeta: (...args: unknown[]) => mockUseDocTypeMeta(...args),
   };
 });
 
@@ -48,6 +50,7 @@ beforeEach(() => {
   vi.clearAllMocks();
   mockUseLinkSearch.mockReturnValue({ results: [], isLoading: false, error: null });
   mockUseLinkTitle.mockReturnValue({ title: undefined, isLoading: false });
+  mockUseDocTypeMeta.mockReturnValue({ meta: undefined, isLoading: false, error: null });
 });
 
 afterEach(cleanup);
@@ -166,3 +169,10 @@ describe("Link result and error presentation", () => {
     expect(screen.getByText("Assigned To")).toBeTruthy();
   });
 });
+
+describe("Link design-law — compose forms Combobox", () => {
+  it("renders the house Combobox trigger (no forked Select chrome)", () => {
+    const result = renderLink();
+    expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeTruthy();
+  });
+});

package/src/fields/Link.stories.tsx

@@ -1,3 +1,4 @@
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { ReactNode } from "react";
@@ -17,7 +18,7 @@ export default {
     docs: {
       description: {
         component:
-          "Frappe Link field: a backend-searching combobox over a target doctype. Every (debounced) keystroke calls frappe.desk.search.search_link on the server — ranked value/description results, link filters and permissions enforced server-side; an existing value resolves its display title on mount (get_link_title). Live stories run against the dev bench through the Storybook proxy; when the bench is down they degrade to an honest in-dropdown search error (the raw search path has no fixture layer).",
+          "Frappe Link field: a backend-searching combobox over a target doctype. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and search_link / get_link_title / getdoctype from an in-story fetch mock, so nothing leaves the machine. Live stories run against the dev bench through the Storybook proxy; when the bench is down they degrade to an honest in-dropdown search error.",
       },
     },
   },
@@ -33,6 +34,118 @@ export default {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05).
+//
+// Default stories previously pointed at https://demo.frappe.cloud. The fixture
+// provider can serve documents, but Link still resolves titles and suggestions
+// over HTTP — so those stories fired real cross-origin requests the browser
+// rejected with CORS, poisoning Kitchen Sink / TestFlight. MOCK_HOST keeps the
+// same code path (real fetch, real search_link / get_link_title / getdoctype
+// shapes) without leaving the machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappelink.mock.test";
+
+function contactMeta() {
+  return {
+    name: "Contact",
+    module: "Contacts",
+    title_field: "first_name",
+    fields: [
+      { fieldname: "first_name", fieldtype: "Data", label: "First Name", reqd: 1 },
+      { fieldname: "last_name", fieldtype: "Data", label: "Last Name" },
+      { fieldname: "email_id", fieldtype: "Data", label: "Email" },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+interface Contact {
+  name: string;
+  doctype: string;
+  first_name: string;
+  last_name: string;
+  email_id: string;
+}
+
+const contactFixtures: Contact[] = [
+  {
+    name: "CONTACT-001",
+    doctype: "Contact",
+    first_name: "John",
+    last_name: "Doe",
+    email_id: "john@example.com",
+  },
+  {
+    name: "CONTACT-002",
+    doctype: "Contact",
+    first_name: "Jane",
+    last_name: "Smith",
+    email_id: "jane@example.com",
+  },
+  {
+    name: "CONTACT-003",
+    doctype: "Contact",
+    first_name: "Amit",
+    last_name: "Patel",
+    email_id: "amit@example.com",
+  },
+];
+
+const contactLinks = contactFixtures.map((doc) => ({
+  value: doc.name,
+  label: `${doc.first_name} ${doc.last_name}`,
+  description: `${doc.first_name} ${doc.last_name}`,
+}));
+
+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.__frappeLinkMockFetch) return;
+  w.__frappeLinkMockFetch = 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.includes("frappe.desk.form.load.getdoctype")) {
+        return jsonResponse({ docs: [contactMeta()] });
+      }
+      if (url.pathname.includes("frappe.desk.search.search_link")) {
+        const txt = (url.searchParams.get("txt") ?? "").toLowerCase();
+        const message = contactLinks.filter(
+          (item) =>
+            !txt ||
+            item.value.toLowerCase().includes(txt) ||
+            item.description.toLowerCase().includes(txt),
+        );
+        return jsonResponse({ message });
+      }
+      if (url.pathname.includes("frappe.desk.search.get_link_title")) {
+        const docname = url.searchParams.get("docname") ?? "";
+        const hit = contactLinks.find((item) => item.value === docname);
+        return jsonResponse({ message: hit?.description ?? docname });
+      }
+      if (url.pathname.includes("frappe.sessions.get_csrf_token")) {
+        return jsonResponse({ message: "mock-csrf" });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: contactMeta() });
+      return jsonResponse({ data: [], message: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 type StoryProps = LinkProps & Record<string, unknown>;
 
 function Controlled(props: Omit<StoryProps, "onChange">) {
@@ -49,8 +162,14 @@ function Controlled(props: Omit<StoryProps, "onChange">) {
   );
 }
 
+const contactFixturesProvider = () =>
+  new InMemoryFixtureProvider({
+    Contact: contactFixtures,
+    DocType: [contactMeta()],
+  });
+
 const withProvider = (node: ReactNode) => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud">
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={contactFixturesProvider()}>
     <YStack maxWidth={420}>{node}</YStack>
   </FrappeProvider>
 );
@@ -227,3 +346,43 @@ LiveCell.parameters = {
     },
   },
 };
+
+// Fixture-backed twin of LiveCell — network-hermetic (MOCK_HOST, never demo.frappe.cloud).
+const IN_TABLE_HOST = "https://frappe-intable.mock.test";
+const userFixtures = new InMemoryFixtureProvider({
+  User: [
+    { name: "Administrator", doctype: "User", full_name: "Administrator" },
+    { name: "Guest", doctype: "User", full_name: "Guest" },
+    { name: "jane@example.com", doctype: "User", full_name: "Jane Example" },
+  ],
+});
+
+interface LinkInTableRow {
+  id: string;
+  label: string;
+  allocated_to: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<LinkInTableRow[]>([
+    { id: "1", label: "Alpha", allocated_to: "Administrator" },
+    { id: "2", label: "Beta", allocated_to: "jane@example.com" },
+    { id: "3", label: "Gamma", allocated_to: "" },
+  ]);
+  const columns: DataTableColumn<LinkInTableRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "allocated_to",
+      header: "Allocated To",
+      ...fieldtypeToTableField("Link", "User"),
+    },
+  ];
+  return (
+    <FrappeProvider baseURL={IN_TABLE_HOST} fixtures={userFixtures}>
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    </FrappeProvider>
+  );
+};
+InTable.storyName = "In table";