@multiplatform.one/frappe-ui 7.6.2 → 7.7.0

package/src/fields/Icon/Icon.stories.tsx

@@ -0,0 +1,138 @@
+import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { fieldtypeToTableField, getFieldComponent, initDefaultRegistry } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
+import { Icon, type IconProps } from ".";
+
+export default {
+  title: "FrappeUI/Icon",
+  component: Icon,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Icon picker for the Frappe Icon field type. Options come from the DG-IDN-06 drawn set and open in a FloatingPanel; df.options narrows the catalog to a subset.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text", description: "Field label" },
+    value: { control: "text", description: "Selected drawn-icon name" },
+    placeholder: { control: "text", description: "Placeholder text" },
+    disabled: { control: "boolean", description: "Disable the field" },
+    readOnly: { control: "boolean", description: "Render read-only" },
+    required: { control: "boolean", description: "Mark as required" },
+    compact: { control: "boolean", description: "Compact (table cell) presentation" },
+    options: { control: "text", description: "df.options — newline list narrowing the catalog" },
+    error: { control: "text", description: "Error message to display" },
+  },
+};
+
+function ControlledIcon(props: Omit<IconProps, "onChange">) {
+  const [value, setValue] = useState(props.value || "");
+  return (
+    <Icon
+      {...props}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        action("onChange")(v);
+      }}
+    />
+  );
+}
+
+export const Default = (args: IconProps) => <ControlledIcon {...args} />;
+Default.args = {
+  label: "Workspace icon",
+  placeholder: "Choose an icon",
+} satisfies Partial<IconProps>;
+
+Default.storyName = "Main";
+
+export const AllStates = () => (
+  <YStack gap="$4" width={400}>
+    <ControlledIcon label="Default" placeholder="Choose an icon" />
+    <ControlledIcon label="With Value" value="mail" />
+    <ControlledIcon label="Required" required />
+    <ControlledIcon label="With Error" error="Pick an icon for this workspace" />
+    <ControlledIcon label="Disabled" value="upload" disabled />
+    <ControlledIcon label="Read Only" value="disk" readOnly />
+    <ControlledIcon label="Narrowed by options" value="check" options={"check\nwarn\nx"} />
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All possible states of the Icon field component.",
+    },
+  },
+};
+
+// MPO-51 AC-1. A DocField of fieldtype Icon has to reach this picker through
+// the registry, not just through a direct import. MPO-60 (035867446) clobbered
+// registerField("Icon", …) once already; this story renders whatever the
+// registry hands back, so a repeat shows up as the "Unsupported field type"
+// string on the board rather than only in union_vs_registry.py.
+export const ViaRegistry = () => {
+  initDefaultRegistry();
+  const RegisteredIcon = getFieldComponent("Icon");
+  const [value, setValue] = useState("mail");
+  if (!RegisteredIcon) {
+    throw new Error("fieldtype Icon is not registered — initDefaultRegistry() lost registerField");
+  }
+  return (
+    <YStack gap="$4" width={400}>
+      <RegisteredIcon
+        label="Workspace icon (through the registry)"
+        value={value}
+        onChange={(v: unknown) => {
+          setValue(String(v ?? ""));
+          action("onChange")(v);
+        }}
+      />
+    </YStack>
+  );
+};
+ViaRegistry.storyName = "Via registry";
+ViaRegistry.parameters = {
+  docs: {
+    description: {
+      story:
+        "Resolves the component through getFieldComponent('Icon') the way a DocField-driven form does, so a lost registration is visible here and not only in the census script.",
+    },
+  },
+};
+
+interface IconRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<IconRow[]>([
+    { id: "1", label: "Inbox", value: "mail" },
+    { id: "2", label: "Uploads", value: "upload" },
+    { id: "3", label: "Unset", value: "" },
+  ]);
+  const columns: DataTableColumn<IconRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Icon",
+      ...fieldtypeToTableField("Icon"),
+    },
+  ];
+  return (
+    <FrappeStoryProvider>
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    </FrappeStoryProvider>
+  );
+};
+InTable.storyName = "In table";

package/src/fields/Link.stories.tsx

@@ -50,6 +50,8 @@ const MOCK_HOST = "https://frappelink.mock.test";
 function contactMeta() {
   return {
     name: "Contact",
+    // FixtureDoc requires `doctype`; a DocType meta doc's own doctype is DocType.
+    doctype: "DocType",
     module: "Contacts",
     title_field: "first_name",
     fields: [

package/src/fields/LongText/LongText.spec.tsx

@@ -0,0 +1,217 @@
+/**
+ * LongText contract specs. Frappe's `Long Text` and `Text` fieldtypes both land
+ * here, and the adapter's whole job is: compose the forms TextArea (never fork
+ * Input chrome), emit canonical onChange, and translate the Frappe-shaped
+ * `minHeight` in pixels into the TextArea's row budget.
+ *
+ * The row budget is the one piece of real arithmetic in the file
+ * (`minRows = minHeight ? max(4, round(minHeight / 24)) : 6`, maxRows 16).
+ *
+ * It does NOT reach the DOM as the textarea's `rows` attribute. TextArea
+ * spreads `numberOfLines: minRows` onto the Tamagui TextArea, and on web that
+ * prop is dropped: `rows` measured 3 for every adapter at every minHeight
+ * (SmallText's 2 included). What the budget DOES drive is the rendered minimum
+ * height, `getFieldHeight(size, minRows)`, so the rows are asserted through
+ * that instead — one row of pixels is read off a known 2-row render rather
+ * than hard-coded, so a size-token change moves both sides together.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { SmallText } from "../SmallText";
+import { LongText } from ".";
+
+afterEach(cleanup);
+
+/** Rendered minimum height in px, off the Tamagui `_mih-<n>px` class. */
+const minHeightPxOf = (container: HTMLElement) => {
+  const cls = container.querySelector("textarea")?.getAttribute("class") ?? "";
+  const match = /(?:^|\s)_mih-(\d+)px(?:\s|$)/.exec(cls);
+  return match ? Number(match[1]) : undefined;
+};
+
+/**
+ * One text row in px, derived from SmallText's fixed two-row budget rather
+ * than hard-coded, so this spec follows a size-token change instead of
+ * breaking on one.
+ */
+function rowPx(): number {
+  const probe = renderWithProviders(<SmallText label="probe" value="" onChange={() => {}} />);
+  const px = minHeightPxOf(probe.container);
+  cleanup();
+  if (!px) throw new Error("could not measure a row: SmallText rendered no _mih- class");
+  return px / 2;
+}
+
+/** Rendered rows = rendered minimum height / one row. */
+const rowsOf = (container: HTMLElement) => {
+  const px = minHeightPxOf(container);
+  return px === undefined ? undefined : String(px / rowPx());
+};
+
+describe("LongText composes the forms TextArea", () => {
+  it("renders a textarea, not a single-line input", () => {
+    const result = renderWithProviders(<LongText label="Notes" value="" onChange={() => {}} />);
+    expect(result.getTextArea()).toBeTruthy();
+    expect(result.container.querySelector('input[type="text"]')).toBeNull();
+  });
+
+  it("shows the controlled value", () => {
+    const result = renderWithProviders(
+      <LongText label="Notes" value="line one" onChange={() => {}} />,
+    );
+    expect((result.getTextArea() as HTMLTextAreaElement).value).toBe("line one");
+  });
+
+  it("emits the text through canonical onChange", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<LongText label="Notes" value="" onChange={onChange} />);
+    fireEvent.change(result.getTextArea() as HTMLTextAreaElement, {
+      target: { value: "typed" },
+    });
+    expect(onChange).toHaveBeenCalledWith("typed");
+  });
+
+  it("readOnly blocks emission", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <LongText label="Notes" value="original" readOnly onChange={onChange} />,
+    );
+    const textarea = result.getTextArea() as HTMLTextAreaElement;
+    expect(textarea.hasAttribute("readonly")).toBe(true);
+    fireEvent.change(textarea, { target: { value: "sneaky" } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("disabled blocks emission", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <LongText label="Notes" value="original" disabled onChange={onChange} />,
+    );
+    fireEvent.change(result.getTextArea() as HTMLTextAreaElement, {
+      target: { value: "sneaky" },
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("forwards maxLength to the control", () => {
+    const result = renderWithProviders(
+      <LongText label="Notes" value="" maxLength={140} onChange={() => {}} />,
+    );
+    expect((result.getTextArea() as HTMLTextAreaElement).getAttribute("maxlength")).toBe("140");
+  });
+
+  it("forwards placeholder and textAreaProps", () => {
+    const result = renderWithProviders(
+      <LongText
+        label="Notes"
+        value=""
+        placeholder="Say something"
+        textAreaProps={{ tabIndex: -1 }}
+        onChange={() => {}}
+      />,
+    );
+    const textarea = result.getTextArea() as HTMLTextAreaElement;
+    expect(textarea.getAttribute("placeholder")).toBe("Say something");
+    expect(textarea.getAttribute("tabindex")).toBe("-1");
+  });
+});
+
+describe("LongText row budget", () => {
+  it("defaults to six rows when no minHeight is given", () => {
+    const result = renderWithProviders(<LongText label="Notes" value="" onChange={() => {}} />);
+    expect(rowsOf(result.container)).toBe("6");
+  });
+
+  it("derives rows from a pixel minHeight at 24px a row", () => {
+    const result = renderWithProviders(
+      <LongText label="Notes" value="" minHeight={240} onChange={() => {}} />,
+    );
+    expect(rowsOf(result.container)).toBe("10");
+  });
+
+  it("rounds rather than truncates", () => {
+    const result = renderWithProviders(
+      <LongText label="Notes" value="" minHeight={250} onChange={() => {}} />,
+    );
+    expect(rowsOf(result.container)).toBe("10");
+  });
+
+  it("never goes below four rows, however small the minHeight", () => {
+    const result = renderWithProviders(
+      <LongText label="Notes" value="" minHeight={24} onChange={() => {}} />,
+    );
+    expect(rowsOf(result.container)).toBe("4");
+  });
+
+  it("treats a zero minHeight as unset, not as zero rows", () => {
+    const result = renderWithProviders(
+      <LongText label="Notes" value="" minHeight={0} onChange={() => {}} />,
+    );
+    expect(rowsOf(result.container)).toBe("6");
+  });
+
+  it("is taller than SmallText: LongText starts at six rows, SmallText at two", () => {
+    const long = renderWithProviders(<LongText label="Notes" value="" onChange={() => {}} />);
+    expect(Number(rowsOf(long.container))).toBeGreaterThan(2);
+  });
+
+  it("caps nothing on web: maxRows={16} leaves no rendered maximum height", () => {
+    // maxRows only reaches the DOM through the autoResize branch, and the
+    // adapter never turns autoResize on. Recorded so a future autoResize
+    // switch has to come past this assertion rather than silently changing
+    // how tall a Long Text can grow. Reported on MPO-123.
+    const result = renderWithProviders(
+      <LongText label="Notes" value="" minHeight={999} onChange={() => {}} />,
+    );
+    const cls = result.container.querySelector("textarea")?.getAttribute("class") ?? "";
+    expect(cls).not.toMatch(/(?:^|\s)_mah-/);
+  });
+});
+
+describe("registry resolution (Long Text / Text fieldtypes)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves both 'Long Text' and 'Text' to the same adapter", () => {
+    const longText = getFieldComponent("Long Text")!;
+    const text = getFieldComponent("Text")!;
+    expect(longText).toBeTruthy();
+    expect(text).toBe(longText);
+  });
+
+  it("renders LongText and forwards label / value", () => {
+    const Component = getFieldComponent("Long Text")!;
+    const element = (Component as Function)(
+      propsFor({ value: "body", label: "Description" }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(LongText);
+    expect(element.props.value).toBe("body");
+    expect(element.props.label).toBe("Description");
+  });
+
+  it("substitutes an empty string for a null value so the control stays controlled", () => {
+    const Component = getFieldComponent("Long Text")!;
+    const element = (Component as Function)(
+      propsFor({ value: null as unknown as string }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.value).toBe("");
+  });
+
+  it("a disabled field also blocks the DOM textarea (Tamagui disabled is aria-only)", () => {
+    const Component = getFieldComponent("Long Text")!;
+    const element = (Component as Function)(propsFor({ disabled: true })) as React.ReactElement<
+      Record<string, any>
+    >;
+    expect(element.props.textAreaProps).toEqual({ readOnly: true, tabIndex: -1 });
+  });
+
+  it("an enabled field adds no textAreaProps block", () => {
+    const Component = getFieldComponent("Long Text")!;
+    const element = (Component as Function)(propsFor()) as React.ReactElement<Record<string, any>>;
+    expect(element.props.textAreaProps).toBeUndefined();
+  });
+});

package/src/fields/OTPInput/OTPInput.spec.tsx

@@ -0,0 +1,167 @@
+/**
+ * OTPInputField contract specs. The `OTP` fieldtype is a segmented code entry,
+ * so the adapter's promises are countable: `length` decides how many cells
+ * exist, `type` decides what a cell will accept, `secureTextEntry` decides
+ * whether the digits are legible, and `onComplete` fires exactly once the last
+ * cell is filled — a login screen wires its submit to that callback, so a
+ * dropped `onComplete` is a dead flow, not a cosmetic bug.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { OTPInputField } from ".";
+
+afterEach(cleanup);
+
+const cells = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("input")) as HTMLInputElement[];
+
+describe("OTPInputField cell count", () => {
+  it("defaults to six cells, the stock one-time-code length", () => {
+    const result = renderWithProviders(<OTPInputField label="Code" value="" onChange={() => {}} />);
+    expect(cells(result.container)).toHaveLength(6);
+  });
+
+  it("honours an explicit length", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="" length={4} onChange={() => {}} />,
+    );
+    expect(cells(result.container)).toHaveLength(4);
+  });
+
+  it("paints a controlled value one character per cell", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="1234" length={4} onChange={() => {}} />,
+    );
+    expect(cells(result.container).map((c) => c.value)).toEqual(["1", "2", "3", "4"]);
+  });
+
+  it("leaves the tail blank for a partial value", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="12" length={4} onChange={() => {}} />,
+    );
+    expect(cells(result.container).map((c) => c.value)).toEqual(["1", "2", "", ""]);
+  });
+});
+
+describe("OTPInputField entry", () => {
+  it("emits the assembled code through canonical onChange", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="" length={4} onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.change(cells(result.container)[0], { target: { value: "7" } });
+    });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange.mock.calls.at(-1)?.[0]).toBe("7");
+  });
+
+  it("fires onComplete when the last cell is filled, and not before", async () => {
+    const onComplete = vi.fn();
+    const result = renderWithProviders(
+      <OTPInputField
+        label="Code"
+        value="123"
+        length={4}
+        onComplete={onComplete}
+        onChange={() => {}}
+      />,
+    );
+    expect(onComplete).not.toHaveBeenCalled();
+    await act(async () => {
+      fireEvent.change(cells(result.container)[3], { target: { value: "4" } });
+    });
+    expect(onComplete).toHaveBeenCalledWith("1234");
+  });
+
+  it("numeric is the default cell mode", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="" length={4} onChange={() => {}} />,
+    );
+    expect(cells(result.container)[0].getAttribute("inputmode")).toBe("numeric");
+  });
+
+  it("alphanumeric widens the cell mode past digits", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="" length={4} type="alphanumeric" onChange={() => {}} />,
+    );
+    expect(cells(result.container)[0].getAttribute("inputmode")).not.toBe("numeric");
+  });
+
+  it("secureTextEntry masks the cells", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="1234" length={4} secureTextEntry onChange={() => {}} />,
+    );
+    expect(cells(result.container)[0].getAttribute("type")).toBe("password");
+  });
+
+  it("readOnly marks every cell readonly, which is how the browser refuses entry", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="12" length={4} readOnly onChange={onChange} />,
+    );
+    // Every cell, not just the first: a partially readOnly OTP is a field a
+    // user can half-edit.
+    for (const cell of cells(result.container)) {
+      expect(cell.hasAttribute("readonly")).toBe(true);
+    }
+
+    // FINDING (MPO-123): the DOM attribute is the ONLY guard. Unlike
+    // forms/TextArea, whose onChangeText opens `if (disabled || readOnly)
+    // return;`, OTPInput's handleDigitChange has no such check — so a
+    // programmatic change still moves the digits and still emits. A real
+    // browser never fires change on a readonly input, so this is not a user
+    // -reachable bug today; it is a missing guard, asserted here as the
+    // behaviour that actually exists rather than the one that should.
+    await act(async () => {
+      fireEvent.change(cells(result.container)[2], { target: { value: "9" } });
+    });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("skeleton branch renders no cells", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="1234" length={4} skeleton onChange={() => {}} />,
+    );
+    expect(cells(result.container)).toHaveLength(0);
+  });
+});
+
+describe("registry resolution (OTP fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'OTP' to OTPInputField", () => {
+    const Component = getFieldComponent("OTP")!;
+    expect(Component).toBeTruthy();
+    const element = (Component as Function)(
+      propsFor({ value: "123456", label: "Code" }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(OTPInputField);
+    expect(element.props.value).toBe("123456");
+    expect(element.props.label).toBe("Code");
+  });
+
+  it("substitutes an empty string for a null value so the cells stay controlled", () => {
+    const Component = getFieldComponent("OTP")!;
+    const element = (Component as Function)(
+      propsFor({ value: null as unknown as string }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.value).toBe("");
+  });
+
+  it("passes helperText / readOnly / skeleton / compact through", () => {
+    const Component = getFieldComponent("OTP")!;
+    const element = (Component as Function)(
+      propsFor({ helperText: "check your texts", readOnly: true, skeleton: true, compact: true }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.helperText).toBe("check your texts");
+    expect(element.props.readOnly).toBe(true);
+    expect(element.props.skeleton).toBe(true);
+    expect(element.props.compact).toBe(true);
+  });
+});

package/src/fields/Password/Password.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
+import { SIZE_RECIPE_TOKENS } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { YStack } from "tamagui";
 import { fieldtypeToTableField } from "../../fieldRegistry";
@@ -135,3 +136,23 @@ InTable.parameters = {
     },
   },
 };
+
+/**
+ * Every size step, so AC1 ("a reveal toggle in the end-cap slot at every
+ * size step, generated from the size recipe rather than hardcoded") is
+ * measurable rather than argued. The end cap stamps `data-end-cap` with the
+ * square it took from `sizeRecipeForToken`, so the probe reads the recipe
+ * off the DOM instead of trusting the source.
+ */
+export const Sizes = (args: StoryProps) => (
+  <YStack gap="$4" maxWidth={420}>
+    {SIZE_RECIPE_TOKENS.map((token) => (
+      <Controlled {...args} key={token} label={`size ${token}`} size={token as any} />
+    ))}
+  </YStack>
+);
+Sizes.args = {
+  value: "hunter2",
+  placeholder: "Enter password",
+} as Partial<StoryProps>;
+Sizes.storyName = "Sizes";