@multiplatform.one/frappe-ui 7.6.3 → 7.7.0

package/src/fields/CodeEditor/CodeEditor.spec.tsx

@@ -4,6 +4,9 @@
  * table-cell chromeless branch, and registry resolution for the
  * "Code" and "JSON" fieldtypes.
  */
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { TableCellContext } from "@multiplatform.one/forms";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act, cleanup, fireEvent } from "@testing-library/react";
@@ -12,6 +15,24 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
 import { CodeEditorField, frappeCodeLanguage } from ".";
 
+function codeEditorDir() {
+  try {
+    const meta = import.meta.url;
+    if (meta.startsWith("file:")) return dirname(fileURLToPath(meta));
+  } catch {
+    /* vite-node may serve a non-file import.meta.url */
+  }
+  return join(process.cwd(), "src/fields/CodeEditor");
+}
+
+function readCodeEditorSource() {
+  return readFileSync(join(codeEditorDir(), "index.tsx"), "utf8");
+}
+
+function readCodeEditorStories() {
+  return readFileSync(join(codeEditorDir(), "CodeEditor.stories.tsx"), "utf8");
+}
+
 afterEach(cleanup);
 
 describe("frappeCodeLanguage (stock ControlCode language_map)", () => {
@@ -80,6 +101,22 @@ describe("CodeEditorField (standalone)", () => {
     );
     expect(result.getTextArea()).toBeNull();
   });
+
+  it("ships CSF3 story objects so native gallery keeps args (KS blank-pane)", () => {
+    const stories = readCodeEditorStories();
+    expect(stories).toMatch(/export const Main = \{/);
+    expect(stories).not.toMatch(/Main\.args\s*=/);
+    expect(stories).toContain("value: PYTHON_FIXTURE");
+  });
+
+  it("forwards knob containerRadius onto the source textarea (F14)", () => {
+    const source = readCodeEditorSource();
+    expect(source).toContain("...knobProps.containerRadius");
+    const result = renderWithProviders(
+      <CodeEditorField label="Script" value="print(1)" language="python" onChange={() => {}} />,
+    );
+    expect(result.getTextArea()).toBeTruthy();
+  });
 });
 
 describe("registry resolution (Code / JSON fieldtypes)", () => {

package/src/fields/CodeEditor/CodeEditor.stories.tsx

@@ -30,11 +30,11 @@ export default {
   title: "FrappeUI/CodeEditorField",
   component: CodeEditorField,
   parameters: {
-    status: { type: "beta" },
+    status: { type: "stable" },
     docs: {
       description: {
         component:
-          "Frappe `Code` / `JSON` fieldtypes: monospace source pane + shiki-highlighted preview (unified components Highlighter). Language follows the stock df.options convention via `frappeCodeLanguage()`.",
+          "Frappe `Code` / `JSON` fieldtypes: monospace source pane + shiki-highlighted preview (unified components Highlighter). Language follows the stock df.options convention via `frappeCodeLanguage()`. Source textarea honours knob `containerRadius` (F14).",
       },
     },
   },
@@ -74,76 +74,93 @@ function Controlled(props: Omit<StoryProps, "onChange">) {
   );
 }
 
-export const Main = (args: StoryProps) => <Controlled {...args} />;
-Main.args = {
-  label: "Server script",
-  helperText: 'Language from df.options ("Python")',
-  value: PYTHON_FIXTURE,
-  language: frappeCodeLanguage("Python"),
-} as Partial<StoryProps>;
-Main.storyName = "Main";
-
-export const Json = (args: StoryProps) => <Controlled {...args} />;
-Json.args = {
-  label: "Filters (JSON fieldtype)",
-  value: JSON_FIXTURE,
-  language: "json",
-} as Partial<StoryProps>;
+// CSF3 objects (not `export const Main = (args) => …; Main.args = …`).
+// Native Kitchen Sink `storyIndex.ts` treats a function export as
+// `{ render: fn }` and drops `fn.args`, so CSF2 Main/Json/ReadOnly
+// painted an empty Code pane on OTA (value/readOnly never arrived).
+export const Main = {
+  name: "Main",
+  args: {
+    label: "Server script",
+    helperText: 'Language from df.options ("Python")',
+    value: PYTHON_FIXTURE,
+    language: frappeCodeLanguage("Python"),
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => <Controlled {...args} />,
+};
 
-export const FormIntegrated = () => {
-  const form = useForm({
-    defaultValues: { script: PYTHON_FIXTURE },
-    onSubmit: async ({ value }) => action("onSubmit")(value),
-  });
-  return (
-    <Form form={form}>
-      <YStack gap="$4">
-        <CodeEditorField
-          form={form as unknown as AnyFormApi}
-          name="script"
-          label="Script (form-integrated)"
-          language="python"
-          required
-          helperText="Bound to TanStack Form field state"
-        />
-      </YStack>
-    </Form>
-  );
+export const Json = {
+  args: {
+    label: "Filters (JSON fieldtype)",
+    value: JSON_FIXTURE,
+    language: "json",
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => <Controlled {...args} />,
 };
 
-export const ReadOnly = (args: StoryProps) => <Controlled {...args} />;
-ReadOnly.args = {
-  label: "Read-only script",
-  value: PYTHON_FIXTURE,
-  language: "python",
-  readOnly: true,
-} as Partial<StoryProps>;
+export const FormIntegrated = {
+  name: "Form Integrated",
+  render: function FormIntegratedRender() {
+    const form = useForm({
+      defaultValues: { script: PYTHON_FIXTURE },
+      onSubmit: async ({ value }) => action("onSubmit")(value),
+    });
+    return (
+      <Form form={form}>
+        <YStack gap="$4">
+          <CodeEditorField
+            form={form as unknown as AnyFormApi}
+            name="script"
+            label="Script (form-integrated)"
+            language="python"
+            required
+            helperText="Bound to TanStack Form field state"
+          />
+        </YStack>
+      </Form>
+    );
+  },
+};
 
-export const States = (args: StoryProps) => (
-  <YStack gap="$5">
-    <Controlled {...args} label="Error" error="Script fails to parse at line 3" />
-    <Controlled {...args} label="Disabled" disabled />
-    <Controlled {...args} label="Compact" compact />
-    <CodeEditorField label="Skeleton" skeleton onChange={() => {}} />
-  </YStack>
-);
-States.args = {
-  value: 'const answer = 42;\nconsole.log("state fixtures");',
-  language: "javascript",
-} as Partial<StoryProps>;
+export const ReadOnly = {
+  args: {
+    label: "Read-only script",
+    value: PYTHON_FIXTURE,
+    language: "python",
+    readOnly: true,
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => <Controlled {...args} />,
+};
 
-export const DarkScheme = (args: StoryProps) => (
-  <Theme name="dark">
-    <YStack backgroundColor="$background" padding="$4">
-      <Controlled {...args} />
+export const States = {
+  args: {
+    value: 'const answer = 42;\nconsole.log("state fixtures");',
+    language: "javascript",
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => (
+    <YStack gap="$5">
+      <Controlled {...args} label="Error" error="Script fails to parse at line 3" />
+      <Controlled {...args} label="Disabled" disabled />
+      <Controlled {...args} label="Compact" compact />
+      <CodeEditorField label="Skeleton" skeleton onChange={() => {}} />
     </YStack>
-  </Theme>
-);
-DarkScheme.args = {
-  label: "Server script (dark)",
-  value: PYTHON_FIXTURE,
-  language: "python",
-} as Partial<StoryProps>;
+  ),
+};
+
+export const DarkScheme = {
+  args: {
+    label: "Server script (dark)",
+    value: PYTHON_FIXTURE,
+    language: "python",
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => (
+    <Theme name="dark">
+      <YStack backgroundColor="$background" padding="$4">
+        <Controlled {...args} />
+      </YStack>
+    </Theme>
+  ),
+};
 
 type CodeRow = { id: string; label: string; value: string };
 

package/src/fields/CodeEditor/index.tsx

@@ -213,6 +213,10 @@ export function CodeEditorField({
       maxRows={maxRows}
       textAreaProps={{
         fontFamily: "$mono",
+        // F14: TextArea's inner <textarea> takes radius from `size` unless
+        // containerRadius lands after the size recipe. FieldLayout already
+        // gets knobProps; the measured source surface must too.
+        ...knobProps.containerRadius,
         autoCapitalize: "none",
         autoCorrect: false,
         spellCheck: false,

package/src/fields/DateRange/DateRange.spec.tsx

@@ -0,0 +1,143 @@
+/**
+ * DateRangeField contract specs. The `Date Range` fieldtype composes the forms
+ * DateRangePicker, so the adapter's contract is which props survive the hop.
+ *
+ * One of them does not, and that is pinned here deliberately: `value` and
+ * `onChange` are DECLARED on DateRangeFieldProps and then destructured away
+ * (`value: _value`, `onChange: _onChange`) instead of being handed to
+ * DateRangePicker. The registry feeds `props.value` straight into the adapter,
+ * so a saved Date Range never paints and a picked range never emits. These
+ * tests describe today's behaviour and will go red the moment someone wires it
+ * up — which is the point: that is the signal to update them alongside the fix.
+ * Reported on MPO-123.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { DateRangeField } from ".";
+
+afterEach(cleanup);
+
+const trigger = (container: HTMLElement) =>
+  container.querySelector("input") as HTMLInputElement | null;
+
+/** The accessible control: role="combobox", not the decorative inner input. */
+const combobox = (container: HTMLElement) =>
+  container.querySelector('[data-testid="date-picker-trigger"]');
+
+describe("DateRangeField composes the forms DateRangePicker", () => {
+  it("renders a single range trigger, not two date inputs", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" />);
+    expect(result.container.querySelectorAll("input")).toHaveLength(1);
+  });
+
+  it("carries the picker's own placeholder when the field sets none", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" />);
+    expect(trigger(result.container)?.getAttribute("placeholder")).toContain("date");
+  });
+
+  it("forwards an explicit placeholder", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" placeholder="From – To" />);
+    expect(trigger(result.container)?.getAttribute("placeholder")).toBe("From – To");
+  });
+
+  it("forwards readOnly, which swaps the popover trigger for a flat read-only box", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" readOnly />);
+    expect(trigger(result.container)?.hasAttribute("readonly")).toBe(true);
+  });
+
+  it("forwards required to the control, not just to the label", () => {
+    // The accessible control is the combobox box, not the inner <input>: that
+    // input is readOnly / tabIndex -1 / pointerEvents none, so the aria state
+    // rides the role="combobox" wrapper. Asserting it on the input passes
+    // vacuously against a picker that sets neither.
+    const result = renderWithProviders(<DateRangeField label="Period" required />);
+    expect(combobox(result.container)?.getAttribute("aria-required")).toBe("true");
+    expect(combobox(result.container)?.getAttribute("role")).toBe("combobox");
+  });
+
+  it("forwards error, which marks the control invalid", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" error="pick a range" />);
+    expect(combobox(result.container)?.getAttribute("aria-invalid")).toBe("true");
+    expect(result.container.textContent).toContain("pick a range");
+  });
+
+  it("leaves both aria states off a field that is neither required nor errored", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" />);
+    expect(combobox(result.container)?.getAttribute("aria-required")).toBeNull();
+    expect(combobox(result.container)?.getAttribute("aria-invalid")).toBeNull();
+  });
+
+  it("forwards the label and helperText", () => {
+    const result = renderWithProviders(
+      <DateRangeField label="Period" helperText="inclusive of both ends" />,
+    );
+    expect(result.container.textContent).toContain("Period");
+    expect(result.container.textContent).toContain("inclusive of both ends");
+  });
+
+  it("skeleton branch renders no trigger", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" skeleton />);
+    expect(trigger(result.container)).toBeNull();
+  });
+});
+
+describe("DateRangeField value gap (MPO-123)", () => {
+  it("declares value on its props type", () => {
+    // Type-level promise: the adapter advertises a controlled value.
+    const props: React.ComponentProps<typeof DateRangeField> = { value: "2026-01-01" };
+    expect(props.value).toBe("2026-01-01");
+  });
+
+  it("but a controlled value does not reach the control — the trigger stays empty", () => {
+    const result = renderWithProviders(
+      <DateRangeField label="Period" value="2026-01-01,2026-01-31" />,
+    );
+    expect(trigger(result.container)?.value).toBe("");
+  });
+
+  it("and the registry hands that value straight to the adapter, so the drop is on this file", () => {
+    const Component = getFieldComponent("Date Range")!;
+    const element = (Component as Function)({
+      value: "2026-01-01,2026-01-31",
+      onChange: () => {},
+    } as FieldRenderProps) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(DateRangeField);
+    expect(element.props.value).toBe("2026-01-01,2026-01-31");
+  });
+});
+
+describe("registry resolution (Date Range fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Date Range' to DateRangeField, and not to the Date adapter", () => {
+    const Component = getFieldComponent("Date Range")!;
+    expect(Component).toBeTruthy();
+    expect(Component).not.toBe(getFieldComponent("Date"));
+    const element = (Component as Function)(propsFor({ label: "Period" })) as React.ReactElement<
+      Record<string, any>
+    >;
+    expect(element.type).toBe(DateRangeField);
+    expect(element.props.label).toBe("Period");
+  });
+
+  it("passes helperText / readOnly / skeleton / compact through", () => {
+    const Component = getFieldComponent("Date Range")!;
+    const element = (Component as Function)(
+      propsFor({
+        helperText: "both ends inclusive",
+        readOnly: true,
+        skeleton: true,
+        compact: true,
+      }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.helperText).toBe("both ends inclusive");
+    expect(element.props.readOnly).toBe(true);
+    expect(element.props.skeleton).toBe(true);
+    expect(element.props.compact).toBe(true);
+  });
+});