@multiplatform.one/frappe-ui 6.0.0

package/src/fields/Switch/index.tsx

@@ -0,0 +1,76 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Switch as FormsSwitch } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type SwitchFieldProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    boolean
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        boolean
+      >,
+      "children"
+    >
+  > & {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    switchProps?: Record<string, unknown>;
+  };
+
+export function SwitchField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: SwitchFieldProps<TData, TName>) {
+  const {
+    switchProps,
+    defaultValue,
+    form,
+    name,
+    onBlur,
+    onChange,
+    validators,
+    disabled,
+    value,
+    mode: _mode,
+    preserveValue: _preserveValue,
+    ...fieldProps
+  } = useProps(props);
+
+  return (
+    <FormsSwitch
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as boolean}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      checked={value}
+      onCheckedChange={(checked) => onChange?.(checked === true)}
+      onBlur={onBlur}
+      disabled={disabled}
+      switchProps={switchProps as any}
+    />
+  );
+}

package/src/fields/TableMultiSelect.tsx

@@ -0,0 +1,184 @@
+import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+import { CaretDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useMemo, useState } from "react";
+import {
+  Button,
+  Checkbox,
+  Label,
+  ListItem,
+  Popover,
+  ScrollView,
+  Text,
+  XStack,
+  YStack,
+} from "tamagui";
+import { useFrappeConfig } from "../FrappeProvider";
+
+export interface TableMultiSelectOption {
+  name: string;
+  doctype: string;
+  [key: string]: any;
+}
+
+export interface TableMultiSelectProps {
+  label?: string;
+  value: string[];
+  onChange: (value: string[]) => void;
+  doctype: string;
+  displayField?: string;
+  disabled?: boolean;
+  required?: boolean;
+  maxSelections?: number;
+  baseURL?: string;
+  auth?: any;
+}
+
+export function TableMultiSelect({
+  label,
+  value = [],
+  onChange,
+  doctype,
+  displayField = "name",
+  disabled = false,
+  required = false,
+  maxSelections,
+  baseURL,
+  auth,
+}: TableMultiSelectProps) {
+  const { knobProps } = useResolvedKnobs();
+  const config = useFrappeConfig();
+  const [open, setOpen] = useState(false);
+
+  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
+  const finalConfig = finalBaseURL
+    ? {
+        baseURL: finalBaseURL,
+        socketPort: config?.socketPort,
+        auth: auth ?? config?.auth,
+        syncOptions: config?.syncOptions,
+        fixtures: config?.fixtures,
+      }
+    : undefined;
+
+  const optionsCollection = useFrappeCollection<TableMultiSelectOption>(finalConfig, doctype, {
+    fields: ["name", displayField],
+  });
+  const { data: rawOptions } = useLiveQuery(
+    (q) => (optionsCollection ? q.from({ _list: optionsCollection }) : null),
+    [optionsCollection],
+  );
+  const options = useMemo(() => (rawOptions as TableMultiSelectOption[]) ?? [], [rawOptions]);
+
+  const handleToggle = (optionName: string) => {
+    if (value.includes(optionName)) {
+      onChange(value.filter((v) => v !== optionName));
+    } else {
+      if (maxSelections && value.length >= maxSelections) return;
+      onChange([...value, optionName]);
+    }
+  };
+
+  const handleRemove = (optionName: string) => {
+    onChange(value.filter((v) => v !== optionName));
+  };
+
+  const selectedOptions = options.filter((opt) => value.includes(opt.name || ""));
+
+  return (
+    <YStack {...knobProps.gap}>
+      {label && (
+        <Label>
+          {label}
+          {required && <Text color="$red10"> *</Text>}
+        </Label>
+      )}
+
+      <Popover open={open} onOpenChange={setOpen} placement="bottom">
+        <Popover.Trigger asChild>
+          <Button
+            size="$3"
+            iconAfter={CaretDownIcon}
+            disabled={disabled}
+            justifyContent="space-between"
+          >
+            {value.length > 0 ? `${value.length} selected` : "Select options"}
+          </Button>
+        </Popover.Trigger>
+
+        <Popover.Content
+          borderColor="$borderColor"
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+        >
+          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+
+          <YStack minWidth={250} maxHeight={300}>
+            <ScrollView>
+              <YStack>
+                {options?.map((option) => {
+                  const isChecked = value.includes(option.name || "");
+                  const isDisabled =
+                    disabled || (!isChecked && !!maxSelections && value.length >= maxSelections);
+                  const displayLabel =
+                    displayField !== "name" && option[displayField]
+                      ? option[displayField]
+                      : option.name;
+
+                  return (
+                    <ListItem
+                      key={option.name}
+                      title={displayLabel}
+                      size={knobProps.sizeToken}
+                      icon={
+                        <Checkbox
+                          {...({
+                            checked: isChecked,
+                            disabled: !!isDisabled,
+                            onCheckedChange: () => !isDisabled && handleToggle(option.name || ""),
+                          } as any)}
+                        >
+                          <Checkbox.Indicator>
+                            <CheckIcon size={12} />
+                          </Checkbox.Indicator>
+                        </Checkbox>
+                      }
+                      hoverStyle={{ backgroundColor: "$color2" }}
+                      cursor={isDisabled ? "not-allowed" : "pointer"}
+                      opacity={isDisabled ? 0.5 : 1}
+                      onPress={() => !isDisabled && handleToggle(option.name || "")}
+                    />
+                  );
+                })}
+              </YStack>
+            </ScrollView>
+          </YStack>
+        </Popover.Content>
+      </Popover>
+
+      {selectedOptions.length > 0 && (
+        <XStack flexWrap="wrap" {...knobProps.gap}>
+          {selectedOptions.map((option) => (
+            <Button
+              key={option.name}
+              size="$2"
+              theme="active"
+              iconAfter={
+                <Button
+                  size="$1"
+                  chromeless
+                  circular
+                  icon={XIcon}
+                  disabled={disabled}
+                  onPress={() => handleRemove(option.name || "")}
+                />
+              }
+            >
+              {displayField !== "name" && option[displayField] ? option[displayField] : option.name}
+            </Button>
+          ))}
+        </XStack>
+      )}
+    </YStack>
+  );
+}

package/src/fields/TextEditor/index.native.tsx

@@ -0,0 +1,40 @@
+import { RichTextEditor } from "@multiplatform.one/rich-text";
+import { YStack } from "tamagui";
+import type { TextEditorProps } from "./types";
+
+export type { TextEditorProps } from "./types";
+
+/**
+ * Native TextEditor.
+ *
+ * Routes through the `@multiplatform.one/rich-text` wrapper, whose native build
+ * renders the `@10play/tentap-editor` WebView editor. This keeps `@tiptap` +
+ * `prosemirror` (web-only DOM) out of the Hermes bundle while preserving the
+ * same HTML `value` / `onChange(html)` contract as the web `TextEditor`.
+ */
+export function TextEditor({
+  label,
+  value,
+  onChange,
+  disabled,
+  required,
+  error,
+  placeholder,
+  minHeight = 200,
+  ...rest
+}: TextEditorProps) {
+  return (
+    <YStack {...rest}>
+      <RichTextEditor
+        label={label}
+        value={value}
+        onChange={(v: any) => onChange(v)}
+        disabled={disabled}
+        required={required}
+        error={error}
+        placeholder={placeholder}
+        minHeight={minHeight}
+      />
+    </YStack>
+  );
+}

package/src/fields/TextEditor/index.tsx

@@ -0,0 +1,262 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { dialog } from "@multiplatform.one/desktop";
+import { useEditor, EditorContent, type Editor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+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";
+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();
+  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={ArrowUUpLeftIcon}
+        onPress={() => editor.chain().focus().undo().run()}
+        disabled={!editor.can().undo()}
+        label="Undo"
+      />
+      <ToolbarButton
+        icon={ArrowUUpRightIcon}
+        onPress={() => editor.chain().focus().redo().run()}
+        disabled={!editor.can().redo()}
+        label="Redo"
+      />
+    </XStack>
+  );
+}
+
+export function TextEditor({
+  label,
+  value = "",
+  onChange,
+  disabled = false,
+  required = false,
+  error,
+  placeholder = "Start writing...",
+  minHeight = 200,
+  ...stackProps
+}: TextEditorProps) {
+  const { knobProps } = useResolvedKnobs();
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [
+      StarterKit,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
+      }),
+      TiptapImage,
+      Placeholder.configure({ placeholder }),
+    ],
+    content: value,
+    editable: !disabled,
+    onUpdate: ({ editor: ed }) => {
+      onChange(ed.getHTML());
+    },
+  });
+
+  useEffect(() => {
+    if (editor && value !== editor.getHTML()) editor.commands.setContent(value);
+  }, [value, editor]);
+
+  useEffect(() => {
+    if (editor) editor.setEditable(!disabled);
+  }, [disabled, editor]);
+
+  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 && !disabled && <EditorToolbar editor={editor} />}
+        <YStack
+          minHeight={minHeight}
+          {...knobProps.panelPadding}
+          cursor={disabled ? "not-allowed" : "text"}
+        >
+          <EditorContent editor={editor} />
+        </YStack>
+      </YStack>
+      {error && (
+        <Text color="$red10" fontSize="$2">
+          {error}
+        </Text>
+      )}
+    </YStack>
+  );
+}

package/src/fields/TextEditor/tiptap.css

@@ -0,0 +1,126 @@
+/* Tiptap editor base styles for TextEditorField
+ *
+ * Colors use Tamagui CSS custom properties so they update with theme changes.
+ * Tamagui generates variables like --color6, --blue10, etc.
+ */
+
+.tiptap {
+  outline: none;
+  min-height: 100%;
+  color: var(--color);
+}
+
+.tiptap p {
+  margin: 0.5em 0;
+}
+
+.tiptap h1 {
+  font-size: 1.75em;
+  font-weight: 700;
+  margin: 0.67em 0;
+}
+
+.tiptap h2 {
+  font-size: 1.4em;
+  font-weight: 600;
+  margin: 0.6em 0;
+}
+
+.tiptap h3 {
+  font-size: 1.17em;
+  font-weight: 600;
+  margin: 0.5em 0;
+}
+
+.tiptap ul,
+.tiptap ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.tiptap ul {
+  list-style-type: disc;
+}
+
+.tiptap ol {
+  list-style-type: decimal;
+}
+
+.tiptap li {
+  margin: 0.2em 0;
+}
+
+.tiptap blockquote {
+  border-left: 3px solid var(--color8);
+  padding-left: 1em;
+  margin: 0.5em 0;
+  color: var(--color11);
+  font-style: italic;
+}
+
+.tiptap pre {
+  background-color: var(--color3);
+  border-radius: 6px;
+  padding: 0.75em 1em;
+  font-family: "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;
+  font-size: 0.9em;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+
+.tiptap code {
+  background-color: var(--color4);
+  border-radius: 3px;
+  padding: 0.15em 0.3em;
+  font-family: "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;
+  font-size: 0.9em;
+}
+
+.tiptap pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+.tiptap a {
+  color: var(--blue10);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.tiptap a:hover {
+  color: var(--blue11);
+}
+
+.tiptap hr {
+  border: none;
+  border-top: 1px solid var(--color6);
+  margin: 1em 0;
+}
+
+.tiptap img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color9);
+  pointer-events: none;
+  height: 0;
+  font-style: italic;
+}
+
+.tiptap strong {
+  font-weight: 700;
+}
+
+.tiptap em {
+  font-style: italic;
+}
+
+.tiptap s {
+  text-decoration: line-through;
+}

package/src/fields/TextEditor/types.ts

@@ -0,0 +1,14 @@
+import type { YStackProps } from "tamagui";
+
+export interface TextEditorProps extends Omit<YStackProps, "children" | "onChange"> {
+  label?: string;
+  /** HTML string value */
+  value?: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+  placeholder?: string;
+  /** Minimum height in pixels (default 200) */
+  minHeight?: number;
+}