@multiplatform.one/frappe-ui 7.4.0 → 7.5.0

package/src/fields/ReadOnly/ReadOnly.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 { ReadOnly } from ".";
 
 export default {
@@ -96,3 +99,54 @@ ProfileCardExample.parameters = {
     },
   },
 };
+
+interface ReadOnlyCellRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const readOnlyCellRows: ReadOnlyCellRow[] = [
+  { id: "1", label: "Alpha", value: "Jane Smith" },
+  { id: "2", label: "Beta", value: "EMP-042" },
+  { id: "3", label: "Gamma", value: "" },
+];
+
+const readOnlyCellColumns: DataTableColumn<ReadOnlyCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "Read Only",
+    ...fieldtypeToTableField("Read Only"),
+  } as DataTableColumn<ReadOnlyCellRow>,
+];
+
+function InTableStory() {
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={readOnlyCellRows}
+        columns={readOnlyCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        readOnly
+        aria-label="Read Only cell table"
+      />
+    </YStack>
+  );
+}
+
+/** 3-row DataTable mapped through fieldtypeToTableField("Read Only") — read-only cells. */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Read Only inside a table cell: the registry maps the fieldtype to a read-only input. Three rows of mock DocType data; the table is mounted readOnly so cells cannot commit.",
+    },
+  },
+};

package/src/fields/ReadOnly/index.tsx

@@ -1,4 +1,15 @@
-import { formatDateText, formatNumericText, Skeleton } from "@multiplatform.one/forms";
+/**
+ * Frappe Read Only — formatted value display.
+ * Design-law: FieldLayout slot order, label/body fragments (not sizeToken as
+ * fontSize), form color ramps. Literal hex on Color is value data (Axiom 11).
+ */
+import {
+  FieldLayout,
+  Skeleton,
+  formatDateText,
+  formatNumericText,
+  formCommonColors,
+} from "@multiplatform.one/forms";
 import {
   formatCurrency,
   formatPercent,
@@ -6,7 +17,7 @@ import {
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { useMemo } from "react";
-import { Label, Text, XStack, YStack, type YStackProps } from "tamagui";
+import { Text, XStack, YStack, type YStackProps } from "tamagui";
 
 export type ReadOnlyType =
   | "Data"
@@ -147,17 +158,19 @@ export function ReadOnly({
     return formatted || emptyText;
   }, [value, type, currencySymbol, precision, dateFormat, datetimeFormat, timeFormat, emptyText]);
   const isEmpty = value === undefined || value === null || value === "";
-  const minHeight = compact ? "$2.5" : "$3.5";
 
   if (skeleton) {
     return (
-      <YStack {...knobProps.gap} {...stackProps}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
-        <Skeleton variant="rounded" width="100%" height={compact ? 28 : 36} />
+      <YStack {...stackProps}>
+        <FieldLayout label={label}>
+          <Skeleton variant="rounded" width="100%" height={compact ? 28 : 36} />
+        </FieldLayout>
       </YStack>
     );
   }
 
+  const valueColor = isEmpty ? formCommonColors.muted : formCommonColors.text;
+
   const renderColorSwatch = () => {
     if (type !== "Color" || isEmpty) return null;
     const colorValue = String(value);
@@ -166,9 +179,9 @@ export function ReadOnly({
       <XStack
         width="$1"
         height="$1"
-        borderRadius="$2"
+        {...knobProps.containerRadius}
         borderWidth={1}
-        borderColor="$borderColor"
+        borderColor={formCommonColors.divider}
         backgroundColor={colorValue as any}
         marginInlineEnd="$2"
       />
@@ -180,11 +193,7 @@ export function ReadOnly({
       return (
         <XStack alignItems="center">
           {renderColorSwatch()}
-          <Text
-            fontSize={knobProps.sizeToken}
-            color={isEmpty ? "$color10" : "$color"}
-            fontFamily="$mono"
-          >
+          <Text {...knobProps.body} color={valueColor} fontFamily="$mono">
             {displayValue}
           </Text>
         </XStack>
@@ -193,7 +202,6 @@ export function ReadOnly({
     if (type === "Link" && (linkHref || onLinkPress) && !isEmpty) {
       return (
         <Text
-          fontSize={knobProps.sizeToken}
           {...knobProps.body}
           color="$accentColor"
           textDecorationLine="underline"
@@ -217,22 +225,18 @@ export function ReadOnly({
             // (LC-55 FRAGMENT-LICENSE).
             {...knobProps.containerRadius}
             borderWidth={1}
-            borderColor={value ? "$green10" : "$color8"}
+            borderColor={value ? "$green10" : formCommonColors.divider}
             backgroundColor={value ? "$green5" : "$color3"}
             alignItems="center"
             justifyContent="center"
           >
-            {value && (
+            {value ? (
               <Text fontSize="$1" color="$green10">
                 {"\u2713"}
               </Text>
-            )}
+            ) : null}
           </XStack>
-          <Text
-            fontSize={knobProps.sizeToken}
-            {...knobProps.body}
-            color={isEmpty ? "$color10" : "$color"}
-          >
+          <Text {...knobProps.body} color={valueColor}>
             {displayValue}
           </Text>
         </XStack>
@@ -240,50 +244,32 @@ export function ReadOnly({
     }
     if (type === "LongText" || type === "Text" || type === "SmallText") {
       return (
-        <Text
-          fontSize={knobProps.sizeToken}
-          {...knobProps.body}
-          color={isEmpty ? "$color10" : "$color"}
-          whiteSpace="pre-wrap"
-        >
+        <Text {...knobProps.body} color={valueColor} whiteSpace="pre-wrap">
           {displayValue}
         </Text>
       );
     }
     return (
-      <Text
-        fontSize={knobProps.sizeToken}
-        {...knobProps.body}
-        color={isEmpty ? "$color10" : "$color"}
-      >
+      <Text {...knobProps.body} color={valueColor}>
         {displayValue}
       </Text>
     );
   };
 
   return (
-    <YStack {...knobProps.gap} {...stackProps}>
-      {label && (
-        <Label color="$color10" fontSize="$2">
-          {label}
-        </Label>
-      )}
-      <XStack
-        {...knobProps.borderRadius}
-        {...{ backgroundColor: "$color2" }}
-        paddingVertical={compact ? "$1" : "$2"}
-        paddingHorizontal={compact ? "$2" : "$3"}
-        borderColor="$color5"
-        minHeight={minHeight}
-        alignItems="center"
-      >
-        {renderValue()}
-      </XStack>
-      {helperText && (
-        <Text color="$color11" fontSize="$2">
-          {helperText}
-        </Text>
-      )}
+    <YStack {...stackProps}>
+      <FieldLayout label={label} helperText={helperText}>
+        <XStack
+          {...knobProps.surface}
+          {...knobProps.borderRadius}
+          paddingVertical={compact ? "$1" : "$2"}
+          paddingHorizontal={compact ? "$2" : "$3"}
+          minHeight={compact ? "$2.5" : "$3.5"}
+          alignItems="center"
+        >
+          {renderValue()}
+        </XStack>
+      </FieldLayout>
     </YStack>
   );
 }

package/src/fields/Select/Select.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 { Select, type SelectProps } from ".";
 
 export default {
@@ -77,3 +80,43 @@ AllStates.parameters = {
     },
   },
 };
+
+// DG-CTRL-01: >5 options — shorter Select fixtures trip select-too-few-options.
+const IN_TABLE_SELECT_OPTIONS = [
+  "Open",
+  "In Progress",
+  "Completed",
+  "Cancelled",
+  "On Hold",
+  "Overdue",
+].join("\n");
+
+interface SelectRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<SelectRow[]>([
+    { id: "1", label: "Alpha", value: "Open" },
+    { id: "2", label: "Beta", value: "Completed" },
+    { id: "3", label: "Gamma", value: "" },
+  ]);
+  const columns: DataTableColumn<SelectRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Status",
+      ...fieldtypeToTableField("Select", IN_TABLE_SELECT_OPTIONS),
+    },
+  ];
+  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/Select/index.tsx

@@ -1,3 +1,7 @@
+/**
+ * Frappe Select — thin adapter over forms Select.
+ * Design-law lives on this file: compose Select, canonical onChange (LC-14).
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { Select as FormsSelect } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
@@ -80,7 +84,7 @@ export function Select<
       size={fieldProps.size}
       disabled={disabled}
       value={value}
-      onValueChange={(val) => onChange?.(Array.isArray(val) ? (val[0] ?? "") : val)}
+      onChange={(val) => onChange?.(Array.isArray(val) ? (val[0] ?? "") : val)}
       onBlur={onBlur}
       options={normalizedOptions}
       placeholder={placeholder}

package/src/fields/Signature/Signature.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 { Signature, type SignatureProps } from ".";
 
 export default {
@@ -67,3 +70,32 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { label: "Signature", width: 320, height: 140 } as Partial<StoryProps>;
+
+type SignatureRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<SignatureRow[]>([
+      { id: "1", label: "Alpha", value: "" },
+      { id: "2", label: "Beta", value: "" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<SignatureRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Signature", ...fieldtypeToTableField("Signature") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Slider/Slider.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 { SliderField, type SliderFieldProps } from ".";
 
 export default {
@@ -73,3 +76,32 @@ ContractProbe.args = {
   max: 100,
   step: 1,
 } as Partial<StoryProps>;
+
+type SliderRow = { id: string; label: string; value: number };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<SliderRow[]>([
+      { id: "1", label: "Alpha", value: 40 },
+      { id: "2", label: "Beta", value: 75 },
+      { id: "3", label: "Gamma", value: 0 },
+    ]);
+    const columns: DataTableColumn<SliderRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Volume", ...fieldtypeToTableField("Slider") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={280}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/SmallText/SmallText.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 { SmallText, type SmallTextProps } from ".";
 
 export default {
@@ -78,3 +81,58 @@ ContractProbe.args = {
   value: "A short note",
   placeholder: "Type here",
 } as Partial<StoryProps>;
+
+interface SmallTextCellRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const smallTextCellRows: SmallTextCellRow[] = [
+  { id: "1", label: "Alpha", value: "Follow up after the site visit." },
+  { id: "2", label: "Beta", value: "Customer prefers email." },
+  { id: "3", label: "Gamma", value: "" },
+];
+
+const smallTextCellColumns: DataTableColumn<SmallTextCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "Small Text",
+    ...fieldtypeToTableField("Small Text"),
+  } as DataTableColumn<SmallTextCellRow>,
+];
+
+function InTableStory() {
+  const [data, setData] = useState(smallTextCellRows);
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={data}
+        columns={smallTextCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        onDataChange={(next: Record<string, any>[]) => {
+          setData(next as SmallTextCellRow[]);
+          action("onDataChange")(next);
+        }}
+        aria-label="Small Text cell editor table"
+      />
+    </YStack>
+  );
+}
+
+/** 3-row DataTable mapped through fieldtypeToTableField("Small Text") — in-cell textarea. */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Small Text inside a table cell: the registry maps the fieldtype to an in-cell textarea. Three rows of mock DocType data; edits commit through onDataChange.",
+    },
+  },
+};

package/src/fields/SmallText/index.tsx

@@ -1,5 +1,9 @@
+/**
+ * Frappe Small Text — thin adapter over forms TextArea.
+ * Design-law lives on this file: compose TextArea, do not fork Input chrome.
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
-import { Input as FormsInput } from "@multiplatform.one/forms";
+import { TextArea } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
 import { useProps } from "tamagui";
 
@@ -61,7 +65,7 @@ export function SmallText<
   } = useProps(props) as SmallTextProps<TData, TName> & Record<string, unknown>;
 
   return (
-    <FormsInput
+    <TextArea
       name={name}
       form={form}
       validators={validators}
@@ -81,9 +85,10 @@ export function SmallText<
       onBlur={onBlur}
       placeholder={placeholder}
       disabled={disabled}
-      multiline
       maxLength={maxLength}
-      inputProps={textAreaProps as any}
+      minRows={2}
+      maxRows={4}
+      textAreaProps={textAreaProps as any}
     />
   );
 }

package/src/fields/Switch/Switch.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 { SwitchField, type SwitchFieldProps } from ".";
 
 export default {
@@ -64,3 +67,33 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { label: "Enabled", value: true } as Partial<StoryProps>;
+
+interface SwitchRow {
+  id: string;
+  label: string;
+  value: boolean;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<SwitchRow[]>([
+    { id: "1", label: "Alpha", value: true },
+    { id: "2", label: "Beta", value: false },
+    { id: "3", label: "Gamma", value: false },
+  ]);
+  const columns: DataTableColumn<SwitchRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Enabled",
+      ...fieldtypeToTableField("Switch"),
+    },
+  ];
+  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/TableMultiSelect.spec.tsx

@@ -1,8 +1,7 @@
 // DG-A11Y-06: chip remove buttons carry the item identity in their accessible
-// name ("Remove {{name}}") instead of an anonymous icon button. Runs with an
-// initialized i18next instance (mirroring packages/i18n keys) so the real
-// interpolated names are asserted. Values render through the
-// unknown-selections path, which needs no Frappe collection.
+// name. TableMultiSelect composes forms Combobox; dismiss names come from
+// forms Chip ("Remove {{label}}"). Values render through the unknown-selections
+// path, which needs no Frappe collection.
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup, screen } from "@testing-library/react";
 import i18next from "i18next";
@@ -15,7 +14,12 @@ beforeAll(async () => {
     lng: "en",
     interpolation: { escapeValue: false },
     resources: {
-      en: { translation: { "Remove {{name}}": "Remove {{name}}" } },
+      en: {
+        translation: {
+          "Remove {{label}}": "Remove {{label}}",
+          "Select options": "Select options",
+        },
+      },
     },
   });
 });
@@ -31,3 +35,20 @@ describe("TableMultiSelect chip remove names (DG-A11Y-06)", () => {
     expect(screen.getByLabelText("Remove Beta")).toBeTruthy();
   });
 });
+
+describe("TableMultiSelect design-law — compose forms Combobox", () => {
+  it("renders the house Combobox trigger (no forked Select chrome)", () => {
+    const result = renderWithProviders(
+      <TableMultiSelect label="Tags" doctype="Tag" value={[]} onChange={vi.fn()} />,
+    );
+    expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeTruthy();
+    expect(screen.getByText("Tags")).toBeTruthy();
+  });
+
+  it("shows unknown selections as dismissible chips", () => {
+    renderWithProviders(
+      <TableMultiSelect label="Tags" doctype="Tag" value={["Alpha"]} onChange={vi.fn()} />,
+    );
+    expect(screen.getByText("Alpha")).toBeTruthy();
+  });
+});