@multiplatform.one/frappe-ui 6.0.0

package/src/fieldRegistry.ts

@@ -0,0 +1,589 @@
+/**
+ * Field type renderer registry for schema-driven forms.
+ *
+ * Maps field type strings to React components that conform to
+ * the standardized `FieldRenderProps` interface. Registers the 18
+ * generic field components from @multiplatform.one/forms by default.
+ */
+
+import React from "react";
+import type { ComponentType } from "react";
+
+import { Barcode } from "./fields/Barcode";
+import { Check, type CheckProps } from "./fields/Check";
+import { Color } from "./fields/Color";
+import { Data } from "./fields/Data";
+import { DateRangeField } from "./fields/DateRange";
+import { Date as DateComponent } from "./fields/Date";
+import { Duration } from "./fields/Duration";
+import { FileUploadField } from "./fields/FileUploadField";
+import { TimePicker } from "./fields/TimePicker";
+import { Geolocation } from "./fields/Geolocation";
+import { Heading } from "./fields/Heading";
+import { Html } from "./fields/HTML";
+import { LongText } from "./fields/LongText";
+import { MentionInputField } from "./fields/MentionInput";
+import { Numeric } from "./fields/Numeric";
+import { OTPInputField } from "./fields/OTPInput";
+import { Password } from "./fields/Password";
+import { Phone } from "./fields/Phone";
+import { ProgressField } from "./fields/Progress";
+import { RadioGroupField } from "./fields/RadioGroup";
+import { Rating } from "./fields/Rating";
+import { ReadOnly } from "./fields/ReadOnly";
+import { Select as SelectComponent } from "./fields/Select";
+import { Signature } from "./fields/Signature";
+import { SliderField } from "./fields/Slider";
+import { SmallText } from "./fields/SmallText";
+import { SwitchField } from "./fields/Switch";
+import { ChildTable } from "@multiplatform.one/table";
+import { ToggleGroupField } from "./fields/ToggleGroup";
+
+const LazyTextEditor = React.lazy(() =>
+  import("./fields/TextEditor").then((mod) => ({
+    default: mod.TextEditor,
+  })),
+);
+
+// ---------------------------------------------------------------------------
+// FieldRenderProps
+// ---------------------------------------------------------------------------
+
+/** Minimal field schema definition (generic, not tied to any framework). */
+export interface FieldSchema {
+  type: string;
+  name: string;
+  label?: string;
+  options?: string;
+  required?: boolean;
+  hidden?: boolean;
+  readOnly?: boolean;
+  precision?: number;
+  depends_on?: string;
+  [key: string]: unknown;
+}
+
+/** Standard props that every field component receives when rendered by the schema form. */
+export interface FieldRenderProps {
+  label?: string;
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+  fieldMeta?: FieldSchema;
+  /** For Link-like fields: target entity type */
+  doctype?: string;
+  /** For Select fields: newline-separated options string or other config */
+  options?: string;
+  /** Allow pass-through props */
+  [key: string]: any;
+}
+
+// ---------------------------------------------------------------------------
+// Registry
+// ---------------------------------------------------------------------------
+
+const registry = new Map<string, ComponentType<FieldRenderProps>>();
+
+export function registerField(fieldtype: string, component: ComponentType<FieldRenderProps>): void {
+  registry.set(fieldtype, component);
+}
+
+export function getFieldComponent(fieldtype: string): ComponentType<FieldRenderProps> | undefined {
+  return registry.get(fieldtype);
+}
+
+// ---------------------------------------------------------------------------
+// Adapter components — existing field types
+// ---------------------------------------------------------------------------
+
+function DataAdapter(props: FieldRenderProps) {
+  return React.createElement(Data, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+    type: props.type,
+  });
+}
+
+function NumericAdapter(type: "Int" | "Float" | "Currency" | "Percent") {
+  return function NumericAdapter(props: FieldRenderProps) {
+    return React.createElement(Numeric, {
+      label: props.label,
+      value:
+        typeof props.value === "number"
+          ? props.value
+          : props.value != null
+            ? Number(props.value)
+            : undefined,
+      onChange: props.onChange,
+      type,
+      disabled: props.disabled,
+      required: props.required,
+      error: props.error,
+      precision: props.fieldMeta?.precision,
+    });
+  };
+}
+
+function SelectAdapter(props: FieldRenderProps) {
+  const optionsStr = props.fieldMeta?.options || props.options || "";
+  const options = (typeof optionsStr === "string" ? optionsStr : String(optionsStr))
+    .split("\n")
+    .map((o: string) => o.trim())
+    .filter(Boolean);
+
+  return React.createElement(SelectComponent, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    options,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+    placeholder: props.placeholder,
+  });
+}
+
+function CheckAdapter(props: FieldRenderProps) {
+  return React.createElement(Check, {
+    label: props.label,
+    value: !!props.value,
+    onChange: (val: boolean) => props.onChange(val ? 1 : 0),
+    disabled: props.disabled,
+    error: props.error,
+  } as CheckProps);
+}
+
+function DateAdapter(type: "date" | "datetime" | "time") {
+  return function DateAdapter(props: FieldRenderProps) {
+    return React.createElement(DateComponent, {
+      label: props.label,
+      value: props.value ?? "",
+      onChange: props.onChange,
+      type,
+      disabled: props.disabled,
+      required: props.required,
+      error: props.error,
+    });
+  };
+}
+
+function ColorAdapter(props: FieldRenderProps) {
+  return React.createElement(Color, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function SmallTextAdapter(props: FieldRenderProps) {
+  return React.createElement(SmallText, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function LongTextAdapter(props: FieldRenderProps) {
+  return React.createElement(LongText, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function TextEditorAdapter(props: FieldRenderProps) {
+  return React.createElement(
+    React.Suspense,
+    { fallback: React.createElement("div", null, "Loading editor...") },
+    React.createElement(LazyTextEditor, {
+      label: props.label,
+      value: props.value ?? "",
+      onChange: props.onChange,
+      disabled: props.disabled,
+      required: props.required,
+      error: props.error,
+    }),
+  );
+}
+
+function HtmlAdapter(props: FieldRenderProps) {
+  return React.createElement(Html, {
+    label: props.label,
+    value: props.value ?? "",
+  });
+}
+
+function PasswordAdapter(props: FieldRenderProps) {
+  return React.createElement(Password, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function ReadOnlyAdapter(props: FieldRenderProps) {
+  return React.createElement(ReadOnly, {
+    label: props.label,
+    value: props.value,
+    type: props.type,
+    emptyText: props.emptyText,
+    precision: props.precision,
+    currencySymbol: props.currencySymbol,
+    dateFormat: props.dateFormat,
+    datetimeFormat: props.datetimeFormat,
+    timeFormat: props.timeFormat,
+    linkHref: props.linkHref,
+    onLinkPress: props.onLinkPress,
+  });
+}
+
+function RatingAdapter(props: FieldRenderProps) {
+  return React.createElement(Rating, {
+    label: props.label,
+    value: typeof props.value === "number" ? props.value : 0,
+    onChange: props.onChange,
+    disabled: props.disabled,
+    error: props.error,
+  });
+}
+
+function BarcodeAdapter(props: FieldRenderProps) {
+  return React.createElement(Barcode, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function SignatureAdapter(props: FieldRenderProps) {
+  return React.createElement(Signature, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    error: props.error,
+  });
+}
+
+function GeolocationAdapter(props: FieldRenderProps) {
+  return React.createElement(Geolocation, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function DurationAdapter(props: FieldRenderProps) {
+  return React.createElement(Duration, {
+    label: props.label,
+    value: typeof props.value === "number" ? props.value : 0,
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function TimePickerAdapter(props: FieldRenderProps) {
+  return React.createElement(TimePicker, {
+    label: props.label,
+    value: typeof props.value === "string" ? props.value : "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function HeadingAdapter(props: FieldRenderProps) {
+  return React.createElement(Heading, {
+    label: props.label ?? "",
+    description: props.description,
+    level: props.level,
+    collapsible: props.collapsible,
+    defaultCollapsed: props.defaultCollapsed,
+    showSeparator: props.showSeparator,
+    children: props.children,
+    onCollapseChange: props.onCollapseChange,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Adapter components — new field types (forms integration)
+// ---------------------------------------------------------------------------
+
+function PhoneAdapter(props: FieldRenderProps) {
+  return React.createElement(Phone, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+    defaultCountry: props.fieldMeta?.options || undefined,
+  });
+}
+
+function SwitchAdapter(props: FieldRenderProps) {
+  return React.createElement(SwitchField, {
+    label: props.label,
+    value: !!props.value,
+    onChange: ((val: boolean) => props.onChange(val ? 1 : 0)) as any,
+    disabled: props.disabled,
+    error: props.error,
+  });
+}
+
+function RadioGroupAdapter(props: FieldRenderProps) {
+  const optionsStr = props.fieldMeta?.options || props.options || "";
+  const options = (typeof optionsStr === "string" ? optionsStr : String(optionsStr))
+    .split("\n")
+    .map((o: string) => o.trim())
+    .filter(Boolean)
+    .map((o: string) => ({ label: o, value: o }));
+
+  return React.createElement(RadioGroupField, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    options,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function SliderAdapter(props: FieldRenderProps) {
+  return React.createElement(SliderField, {
+    label: props.label,
+    value: typeof props.value === "number" ? props.value : 0,
+    onChange: props.onChange,
+    disabled: props.disabled,
+    error: props.error,
+  });
+}
+
+function ToggleGroupAdapter(props: FieldRenderProps) {
+  const optionsStr = props.fieldMeta?.options || props.options || "";
+  const options = (typeof optionsStr === "string" ? optionsStr : String(optionsStr))
+    .split("\n")
+    .map((o: string) => o.trim())
+    .filter(Boolean)
+    .map((o: string) => ({ label: o, value: o }));
+
+  return React.createElement(ToggleGroupField, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    options,
+    disabled: props.disabled,
+    error: props.error,
+  });
+}
+
+function ProgressAdapter(props: FieldRenderProps) {
+  return React.createElement(ProgressField, {
+    label: props.label,
+    value: typeof props.value === "number" ? props.value : 0,
+    error: props.error,
+  });
+}
+
+function OTPAdapter(props: FieldRenderProps) {
+  return React.createElement(OTPInputField, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function MentionAdapter(props: FieldRenderProps) {
+  return React.createElement(MentionInputField, {
+    label: props.label,
+    value: props.value,
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+    mentions: [],
+  });
+}
+
+function DateRangeAdapter(props: FieldRenderProps) {
+  return React.createElement(DateRangeField, {
+    label: props.label,
+    value: props.value,
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function FileUploadAdapter(props: FieldRenderProps) {
+  return React.createElement(FileUploadField, {
+    label: props.label,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+  });
+}
+
+function FileUploadImageAdapter(props: FieldRenderProps) {
+  return React.createElement(FileUploadField, {
+    label: props.label,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+    isImage: true,
+  });
+}
+
+function TableAdapter(props: FieldRenderProps) {
+  return React.createElement(ChildTable, {
+    label: props.label,
+    value: Array.isArray(props.value) ? props.value : [],
+    onChange: props.onChange,
+    columns: [],
+    disabled: props.disabled,
+    error: props.error,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Default registration
+// ---------------------------------------------------------------------------
+
+export function initDefaultRegistry(): void {
+  // Data types
+  registerField("Data", DataAdapter);
+  registerField("Autocomplete", DataAdapter);
+
+  // Phone (backed by forms PhoneInput)
+  registerField("Phone", PhoneAdapter);
+
+  // Numeric types
+  registerField("Int", NumericAdapter("Int"));
+  registerField("Float", NumericAdapter("Float"));
+  registerField("Currency", NumericAdapter("Currency"));
+  registerField("Percent", NumericAdapter("Percent"));
+
+  // Select
+  registerField("Select", SelectAdapter);
+
+  // Check
+  registerField("Check", CheckAdapter);
+
+  // Date/Time types
+  registerField("Date", DateAdapter("date"));
+  registerField("Datetime", DateAdapter("datetime"));
+  registerField("Time", DateAdapter("time"));
+
+  // Color
+  registerField("Color", ColorAdapter);
+
+  // Text types
+  registerField("Small Text", SmallTextAdapter);
+  registerField("Long Text", LongTextAdapter);
+  registerField("Text", LongTextAdapter);
+  registerField("Code", LongTextAdapter);
+  registerField("JSON", LongTextAdapter);
+  registerField("Markdown Editor", LongTextAdapter);
+
+  // Rich text
+  registerField("Text Editor", TextEditorAdapter);
+  registerField("HTML Editor", TextEditorAdapter);
+
+  // HTML (read-only display)
+  registerField("HTML", HtmlAdapter);
+
+  // Password
+  registerField("Password", PasswordAdapter);
+
+  // Read Only
+  registerField("Read Only", ReadOnlyAdapter);
+
+  // Heading
+  registerField("Heading", HeadingAdapter);
+
+  // Rating
+  registerField("Rating", RatingAdapter);
+
+  // Barcode
+  registerField("Barcode", BarcodeAdapter);
+
+  // Signature
+  registerField("Signature", SignatureAdapter);
+
+  // Geolocation
+  registerField("Geolocation", GeolocationAdapter);
+
+  // Duration
+  registerField("Duration", DurationAdapter);
+
+  // Time
+  registerField("Time", TimePickerAdapter);
+
+  // --- Custom field types (forms integration) ---
+
+  // Switch (boolean toggle, 1/0 conversion like Check)
+  registerField("Switch", SwitchAdapter);
+
+  // Radio (option selection via radio buttons)
+  registerField("Radio", RadioGroupAdapter);
+
+  // Slider (numeric range input)
+  registerField("Slider", SliderAdapter);
+
+  // Toggle Group (single/multi-select button group)
+  registerField("Toggle Group", ToggleGroupAdapter);
+
+  // Progress (read-only progress bar)
+  registerField("Progress", ProgressAdapter);
+
+  // OTP (one-time password input)
+  registerField("OTP", OTPAdapter);
+
+  // Mention (text with @mention support)
+  registerField("Mention", MentionAdapter);
+
+  // Date Range (date range picker)
+  registerField("Date Range", DateRangeAdapter);
+
+  // Attach / Attach Image (file upload backed by forms FileUpload)
+  registerField("Attach", FileUploadAdapter);
+  registerField("Attach Image", FileUploadImageAdapter);
+
+  // Table (child table backed by forms ChildTable)
+  registerField("Table", TableAdapter);
+}
+
+// Initialize default registry at module load
+initDefaultRegistry();

package/src/fields/Barcode/index.tsx

@@ -0,0 +1,82 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Barcode as FormsBarcode } from "@multiplatform.one/forms";
+import { BarcodeIcon, CameraIcon, XIcon } from "@phosphor-icons/react";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type BarcodeProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    enableScan?: boolean;
+    formats?: string[];
+  };
+
+export function Barcode<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: BarcodeProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    mode: _mode,
+    name,
+    onBlur,
+    onChange,
+    preserveValue: _preserveValue,
+    validators,
+    disabled,
+    value,
+    enableScan,
+    formats: _formats,
+    ...fieldProps
+  } = useProps(props);
+
+  return (
+    <FormsBarcode
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as string}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      disabled={disabled}
+      enableScan={enableScan}
+      barcodeIcon={<BarcodeIcon size={18} />}
+      scanIcon={<CameraIcon size={18} />}
+      stopIcon={<XIcon size={18} />}
+    />
+  );
+}