@multiplatform.one/frappe-ui 7.4.1 → 7.5.0

package/src/fields/TextEditor/index.tsx

@@ -1,313 +1,46 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Skeleton } from "@multiplatform.one/forms";
-import { useDirection } from "@multiplatform.one/components";
-import { dialog } from "@multiplatform.one/desktop";
-import { useEditor, EditorContent, type Editor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import TiptapImage from "@tiptap/extension-image";
-import { Placeholder } from "@tiptap/extension-placeholder";
-import "./tiptap.css";
-import type React from "react";
-import { useCallback, useEffect } from "react";
-import type { IconWeight } from "@phosphor-icons/react";
-import {
-  TextBIcon,
-  TextItalicIcon,
-  TextStrikethroughIcon,
-  ListBulletsIcon,
-  ListNumbersIcon,
-  QuotesIcon,
-  CodeSimpleIcon,
-  LinkSimpleIcon,
-  ImageSquareIcon,
-  ArrowUUpLeftIcon,
-  ArrowUUpRightIcon,
-  TextHOneIcon,
-  TextHTwoIcon,
-  TextHThreeIcon,
-  MinusIcon,
-} from "@phosphor-icons/react";
-import { Button, Label, Text, XStack, YStack } from "tamagui";
-
-export type { TextEditorProps } from "./types";
+/**
+ * Frappe Text Editor — thin adapter over the house RichTextEditor.
+ * Design-law lives here: do not fork TipTap toolbar chrome. Native keeps its
+ * own module so TipTap/ProseMirror stay off the Hermes graph.
+ */
+import { RichTextEditor } from "@multiplatform.one/rich-text";
+import { YStack } from "tamagui";
 import type { TextEditorProps } from "./types";
 
-interface ToolbarButtonProps {
-  icon: React.ForwardRefExoticComponent<
-    React.ComponentPropsWithoutRef<"svg"> &
-      React.RefAttributes<SVGSVGElement> & {
-        size?: string | number;
-        weight?: IconWeight;
-      }
-  >;
-  onPress: () => void;
-  isActive?: boolean;
-  disabled?: boolean;
-  label: string;
-}
-
-function ToolbarButton({ icon: Icon, onPress, isActive, disabled, label }: ToolbarButtonProps) {
-  return (
-    <Button
-      size="$2"
-      chromeless
-      backgroundColor={isActive ? "$color5" : "transparent"}
-      hoverStyle={{ backgroundColor: "$color4" }}
-      pressStyle={{ backgroundColor: "$color5" }}
-      onPress={onPress}
-      disabled={disabled}
-      opacity={disabled ? 0.4 : 1}
-      aria-label={label}
-      padding="$1"
-      minWidth="$2"
-      height="$2"
-    >
-      <Icon size={16} weight={isActive ? "bold" : "regular"} />
-    </Button>
-  );
-}
-
-function ToolbarSeparator() {
-  return <YStack width={1} height="$1" backgroundColor="$color6" marginHorizontal="$1" />;
-}
-
-function EditorToolbar({ editor }: { editor: Editor }) {
-  const { knobProps: _knobProps } = useResolvedKnobs();
-  // Undo/redo arrows encode travel through history (back/forward), so the
-  // glyph pair swaps under RTL (useDirection glyph-swap pattern).
-  const isRTL = useDirection() === "rtl";
-  const UndoGlyphIcon = isRTL ? ArrowUUpRightIcon : ArrowUUpLeftIcon;
-  const RedoGlyphIcon = isRTL ? ArrowUUpLeftIcon : ArrowUUpRightIcon;
-  const addLink = useCallback(async () => {
-    const previousUrl = editor.getAttributes("link").href;
-    const url = await dialog.prompt("Enter URL", previousUrl || "https://");
-    if (url === null) return;
-    if (url === "") {
-      editor.chain().focus().extendMarkRange("link").unsetLink().run();
-      return;
-    }
-    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-  }, [editor]);
-
-  const addImage = useCallback(async () => {
-    const url = await dialog.prompt("Enter image URL");
-    if (url) editor.chain().focus().setImage({ src: url }).run();
-  }, [editor]);
-
-  return (
-    <XStack
-      flexWrap="wrap"
-      gap="$0.5"
-      padding="$1.5"
-      borderBottomWidth={1}
-      borderBottomColor="$borderColor"
-      {...{ backgroundColor: "$color2" }}
-      alignItems="center"
-    >
-      <ToolbarButton
-        icon={TextBIcon}
-        onPress={() => editor.chain().focus().toggleBold().run()}
-        isActive={editor.isActive("bold")}
-        label="Bold"
-      />
-      <ToolbarButton
-        icon={TextItalicIcon}
-        onPress={() => editor.chain().focus().toggleItalic().run()}
-        isActive={editor.isActive("italic")}
-        label="Italic"
-      />
-      <ToolbarButton
-        icon={TextStrikethroughIcon}
-        onPress={() => editor.chain().focus().toggleStrike().run()}
-        isActive={editor.isActive("strike")}
-        label="Strikethrough"
-      />
-      <ToolbarButton
-        icon={CodeSimpleIcon}
-        onPress={() => editor.chain().focus().toggleCode().run()}
-        isActive={editor.isActive("code")}
-        label="Inline Code"
-      />
-      <ToolbarSeparator />
-      <ToolbarButton
-        icon={TextHOneIcon}
-        onPress={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        isActive={editor.isActive("heading", { level: 1 })}
-        label="Heading 1"
-      />
-      <ToolbarButton
-        icon={TextHTwoIcon}
-        onPress={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        isActive={editor.isActive("heading", { level: 2 })}
-        label="Heading 2"
-      />
-      <ToolbarButton
-        icon={TextHThreeIcon}
-        onPress={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        isActive={editor.isActive("heading", { level: 3 })}
-        label="Heading 3"
-      />
-      <ToolbarSeparator />
-      <ToolbarButton
-        icon={ListBulletsIcon}
-        onPress={() => editor.chain().focus().toggleBulletList().run()}
-        isActive={editor.isActive("bulletList")}
-        label="Bullet List"
-      />
-      <ToolbarButton
-        icon={ListNumbersIcon}
-        onPress={() => editor.chain().focus().toggleOrderedList().run()}
-        isActive={editor.isActive("orderedList")}
-        label="Ordered List"
-      />
-      <ToolbarButton
-        icon={QuotesIcon}
-        onPress={() => editor.chain().focus().toggleBlockquote().run()}
-        isActive={editor.isActive("blockquote")}
-        label="Blockquote"
-      />
-      <ToolbarButton
-        icon={MinusIcon}
-        onPress={() => editor.chain().focus().setHorizontalRule().run()}
-        label="Horizontal Rule"
-      />
-      <ToolbarSeparator />
-      <ToolbarButton
-        icon={LinkSimpleIcon}
-        onPress={addLink}
-        isActive={editor.isActive("link")}
-        label="Link"
-      />
-      <ToolbarButton icon={ImageSquareIcon} onPress={addImage} label="Image" />
-      <ToolbarSeparator />
-      <ToolbarButton
-        icon={UndoGlyphIcon}
-        onPress={() => editor.chain().focus().undo().run()}
-        disabled={!editor.can().undo()}
-        label="Undo"
-      />
-      <ToolbarButton
-        icon={RedoGlyphIcon}
-        onPress={() => editor.chain().focus().redo().run()}
-        disabled={!editor.can().redo()}
-        label="Redo"
-      />
-    </XStack>
-  );
-}
+export type { TextEditorProps } from "./types";
 
 export function TextEditor({
   label,
-  value = "",
+  value,
   onChange,
-  disabled = false,
-  readOnly = false,
-  required = false,
+  disabled,
+  required,
   error,
   helperText,
-  placeholder = "Start writing...",
-  minHeight,
-  skeleton = false,
-  compact = false,
-  ...stackProps
+  readOnly,
+  skeleton,
+  compact,
+  placeholder,
+  minHeight = 200,
+  ...rest
 }: TextEditorProps) {
-  const { knobProps } = useResolvedKnobs();
   const resolvedMinHeight = minHeight ?? (compact ? 100 : 200);
-  const editable = !disabled && !readOnly;
-
-  // The visible <Label> is not programmatically associated with tiptap's
-  // contenteditable (no htmlFor target), so name the textbox directly.
-  const accessibleName = label || placeholder;
-
-  const editor = useEditor({
-    immediatelyRender: false,
-    extensions: [
-      // tiptap v3: StarterKit bundles Link — configure it through the kit
-      // (a standalone Link.configure duplicates the keyed autolink plugin
-      // and throws a RangeError on every mount).
-      StarterKit.configure({
-        link: {
-          openOnClick: false,
-          HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
-        },
-      }),
-      TiptapImage,
-      Placeholder.configure({ placeholder }),
-    ],
-    editorProps: {
-      attributes: {
-        role: "textbox",
-        "aria-multiline": "true",
-        ...(accessibleName ? { "aria-label": accessibleName } : {}),
-      },
-    },
-    content: value,
-    editable,
-    onUpdate: ({ editor: ed, transaction }) => {
-      // Initialization / programmatic no-ops must not emit change events
-      // (forms contract): tiptap fires `update` from setEditable() and other
-      // doc-preserving transactions; only a real content change may notify.
-      if (!transaction.docChanged) return;
-      onChange(ed.getHTML());
-    },
-  });
-
-  useEffect(() => {
-    // Applying an external value (initial doc load, server update) is not a
-    // user edit — emitting it back through onUpdate would echo tiptap's
-    // normalized HTML (e.g. plain text -> <p>…</p>) and falsely dirty the
-    // consumer's doc (tiptap v3 defaults emitUpdate to true).
-    if (editor && value !== editor.getHTML()) {
-      editor.commands.setContent(value, { emitUpdate: false });
-    }
-  }, [value, editor]);
-
-  useEffect(() => {
-    if (editor) editor.setEditable(editable, false);
-  }, [editable, editor]);
-
-  if (skeleton) {
-    return (
-      <YStack {...knobProps.gap} {...stackProps}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
-        <Skeleton variant="rounded" width="100%" height={resolvedMinHeight} />
-      </YStack>
-    );
-  }
-
   return (
-    <YStack {...knobProps.gap} {...stackProps}>
-      {label && (
-        <Label size={knobProps.sizeToken}>
-          {label}
-          {required && <Text color="$red10"> *</Text>}
-        </Label>
-      )}
-      <YStack
-        {...knobProps.borderRadius}
-        borderColor={error ? "$red8" : "$borderColor"}
-        overflow="hidden"
-        opacity={disabled ? 0.6 : 1}
-      >
-        {editor && editable && <EditorToolbar editor={editor} />}
-        <YStack
-          minHeight={resolvedMinHeight}
-          {...knobProps.panelPadding}
-          cursor={disabled ? "not-allowed" : readOnly ? "default" : "text"}
-        >
-          <EditorContent editor={editor} />
-        </YStack>
-      </YStack>
-      {helperText && !error && (
-        <Text color="$color11" fontSize="$2">
-          {helperText}
-        </Text>
-      )}
-      {error && (
-        <Text color="$red11" fontSize="$2">
-          {error}
-        </Text>
-      )}
+    <YStack {...rest}>
+      <RichTextEditor
+        label={label}
+        value={value}
+        onChange={(html) => onChange(html)}
+        disabled={disabled}
+        required={required}
+        error={error}
+        helperText={helperText}
+        readOnly={readOnly}
+        skeleton={skeleton}
+        compact={compact}
+        placeholder={placeholder}
+        minHeight={resolvedMinHeight}
+      />
     </YStack>
   );
 }

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

package/src/fields/ToggleGroup/ToggleGroup.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 { ToggleGroupField, type ToggleGroupFieldProps } from ".";
 
 export default {
@@ -99,3 +102,35 @@ ContractProbe.args = {
     { label: "Right", value: "right" },
   ],
 } as Partial<StoryProps>;
+
+const IN_TABLE_TOGGLE_OPTIONS = ["Left", "Center", "Right", "Justify", "Start", "End"].join("\n");
+
+interface ToggleRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<ToggleRow[]>([
+    { id: "1", label: "Alpha", value: "Left" },
+    { id: "2", label: "Beta", value: "Center" },
+    { id: "3", label: "Gamma", value: "" },
+  ]);
+  const columns: DataTableColumn<ToggleRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Alignment",
+      ...fieldtypeToTableField("Toggle Group", IN_TABLE_TOGGLE_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/frappeRemainder.designLaw.spec.ts

@@ -0,0 +1,176 @@
+/**
+ * MPO-60 design-law source contracts for remaining Frappe wrappers.
+ * R10: frappe.ui.form.on stays out of scope. R11: no pip on media.
+ * R12: no Tint wrap.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const srcDir = path.resolve(__dirname, ".");
+
+function read(file: string): string {
+  return fs.readFileSync(path.resolve(srcDir, file), "utf-8");
+}
+
+function codeOnly(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "");
+}
+
+describe("Frappe remainder wrappers — design-law 100%", () => {
+  it("DynamicLink composes forms Select and Frappe Link", () => {
+    const source = read("fields/DynamicLink.tsx");
+    expect(source).toContain('from "@multiplatform.one/forms"');
+    expect(source).toContain("FormsSelect");
+    expect(source).toContain('from "./Link"');
+    expect(source).not.toMatch(/from "tamagui".*Select|Select.*from "tamagui"/);
+    expect(codeOnly(source)).not.toContain("frappe.ui.form.on");
+  });
+
+  it("SmallText and LongText compose forms TextArea", () => {
+    const small = read("fields/SmallText/index.tsx");
+    const long = read("fields/LongText/index.tsx");
+    expect(small).toContain("TextArea");
+    expect(long).toContain("TextArea");
+    expect(small).toContain("minRows={2}");
+    expect(long).toContain("minRows={minRows}");
+  });
+
+  it("Html uses FieldLayout + cardSurface and does not fork 14px type", () => {
+    const source = read("fields/HTML/index.tsx");
+    expect(source).toContain("FieldLayout");
+    expect(source).toContain("cardSurface");
+    expect(source).not.toMatch(/fontSize:\s*14/);
+    expect(source).not.toMatch(/fontSize=\{14\}/);
+  });
+
+  it("ReadOnly uses FieldLayout and body fragment, not sizeToken as fontSize", () => {
+    const source = read("fields/ReadOnly/index.tsx");
+    expect(source).toContain("FieldLayout");
+    expect(source).toContain("formCommonColors");
+    expect(source).toContain("knobProps.body");
+    expect(source).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
+  });
+
+  it("TextEditor is a thin wrap of RichTextEditor", () => {
+    const source = read("fields/TextEditor/index.tsx");
+    expect(source).toContain("RichTextEditor");
+    expect(source).toContain('from "@multiplatform.one/rich-text"');
+    expect(source).not.toContain("useEditor");
+    expect(codeOnly(source)).not.toContain("frappe.ui.form.on");
+  });
+
+  it("Select uses canonical onChange (LC-14)", () => {
+    const source = read("fields/Select/index.tsx");
+    expect(source).toContain("FormsSelect");
+    expect(source).toContain("onChange={(val) => onChange?.(");
+    expect(source).not.toContain("onValueChange");
+  });
+
+  it("FrappeChartCard skeleton is the catalog Card (no cherry-picked radius)", () => {
+    const source = read("FrappeChartCard.tsx");
+    expect(source).toContain("Card");
+    expect(source).toMatch(/from "@multiplatform.one\/components"/);
+    expect(source).not.toContain("knobProps.borderRadius.borderRadius");
+    expect(source).not.toContain("<Tint");
+  });
+
+  it("FrappeImageView uses catalog Card, controlIcon icons, and no media pip (R11/R12)", () => {
+    const source = read("FrappeImageView.tsx");
+    expect(source).toContain("Card");
+    expect(source).toContain("controlIcon");
+    expect(source).not.toMatch(/size=\{48\}/);
+    expect(source).not.toContain("<Tint");
+    expect(source).toContain("No status pip");
+  });
+
+  it("FrappeTreeView uses label fragment and controlIcon, not 12/14px", () => {
+    const source = read("FrappeTreeView.tsx");
+    expect(source).toContain("knobProps.label");
+    expect(source).toContain("controlIcon");
+    expect(source).not.toMatch(/fontSize=\{display === "compressed" \? 12/);
+    expect(source).not.toMatch(/size=\{48\}/);
+  });
+
+  it("FrappeReportBuilder uses house Button + PopoverContent and R7 weight 400", () => {
+    const source = read("FrappeReportBuilder.tsx");
+    expect(source).toContain("PopoverContent");
+    expect(source).toContain('from "@multiplatform.one/forms"');
+    expect(source).toContain("Button");
+    expect(source).not.toMatch(/fontWeight="600"|fontWeight="500"/);
+    expect(source).toContain('fontWeight="400"');
+    expect(source).not.toContain("borderLeftWidth");
+    expect(source).not.toContain("<Tint");
+  });
+
+  it("FrappeReportView refresh is house Button and updating copy uses form ramps", () => {
+    const source = read("FrappeReportView.tsx");
+    expect(source).toMatch(/Button.*from "@multiplatform.one\/forms"/);
+    expect(source).toContain("formCommonColors");
+    expect(source).toContain("knobProps.label");
+    expect(source).not.toMatch(/from "tamagui".*Button|Button.*from "tamagui"/);
+    expect(codeOnly(source)).not.toContain("frappe.ui.form.on");
+  });
+
+  it("FrappeAssignment captions lock 400 and use form ramps", () => {
+    const source = read("FrappeAssignment.tsx");
+    expect(source).toContain('fontWeight="400"');
+    expect(source).toContain("formCommonColors");
+    expect(source).toContain("controlIcon");
+    expect(source).not.toMatch(/fontWeight="600"|fontWeight="500"/);
+    expect(source).not.toContain("<Tint");
+  });
+
+  it("FrappeLikedBy liked heart uses formCommonColors.error, not a CSS var fill", () => {
+    const source = read("FrappeLikedBy.tsx");
+    expect(source).toContain("formCommonColors.error");
+    expect(codeOnly(source)).not.toContain("var(--red10)");
+    expect(source).not.toContain("<Tint");
+  });
+
+  it("Desk pages use body fragment, not sizeToken as fontSize; form back is house Button", () => {
+    const form = read("desk/DeskFormPage.tsx");
+    const list = read("desk/DeskListPage.tsx");
+    expect(form).toMatch(/Button.*from "@multiplatform.one\/forms"/);
+    expect(form).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
+    expect(list).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
+    expect(form).toContain("formCommonColors.muted");
+    expect(list).toContain("formCommonColors.muted");
+  });
+
+  it("native Date trigger/actions are house Button", () => {
+    const source = read("fields/Date/index.native.tsx");
+    expect(source).toMatch(/Button[\s\S]*from "@multiplatform.one\/forms"/);
+    expect(source).not.toMatch(/Button.*from "tamagui"/);
+  });
+
+  it("fieldRegistry TextEditor fallback is Skeleton; SmallText/LongText use textAreaProps", () => {
+    const source = read("fieldRegistry.ts");
+    expect(source).toContain("disabledTextAreaBlock");
+    expect(source).toContain("textAreaProps");
+    expect(source).toContain("Skeleton");
+    expect(source).not.toContain('createElement("div", null, "Loading editor...")');
+    expect(codeOnly(source)).not.toContain("frappe.ui.form.on");
+  });
+
+  it("remainder sources do not wrap Cards in Tint (R12) or run form hooks (R10)", () => {
+    const files = [
+      "FrappeChartCard.tsx",
+      "FrappeImageView.tsx",
+      "FrappeTreeView.tsx",
+      "FrappeReportBuilder.tsx",
+      "FrappeReportView.tsx",
+      "FrappeAssignment.tsx",
+      "FrappeLikedBy.tsx",
+      "FrappeGantt.tsx",
+      "fields/DynamicLink.tsx",
+      "fields/HTML/index.tsx",
+      "fields/TextEditor/index.tsx",
+    ];
+    for (const file of files) {
+      const source = read(file);
+      expect(source, file).not.toContain("<Tint");
+      expect(codeOnly(source), file).not.toContain("frappe.ui.form.on");
+    }
+  });
+});