@multiplatform.one/frappe-ui 6.0.0

package/src/fields/ReadOnly/index.tsx

@@ -0,0 +1,281 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { Label, Text, XStack, YStack, type YStackProps } from "tamagui";
+
+export type ReadOnlyType =
+  | "Data"
+  | "Int"
+  | "Float"
+  | "Currency"
+  | "Percent"
+  | "Date"
+  | "Datetime"
+  | "Time"
+  | "Check"
+  | "Select"
+  | "Link"
+  | "Color"
+  | "Text"
+  | "SmallText"
+  | "LongText";
+
+export interface ReadOnlyProps extends Omit<YStackProps, "children"> {
+  label?: string;
+  value?: string | number | boolean | null;
+  type?: ReadOnlyType;
+  currencySymbol?: string;
+  precision?: number;
+  dateFormat?: string;
+  datetimeFormat?: string;
+  timeFormat?: string;
+  emptyText?: string;
+  linkHref?: string;
+  onLinkPress?: () => void;
+}
+
+function formatDate(value: string, format?: string): string {
+  if (!value) return "";
+  try {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return value;
+    if (!format) return date.toLocaleDateString("en-CA");
+    return date.toLocaleDateString();
+  } catch {
+    return value;
+  }
+}
+
+function formatDatetime(value: string, format?: string): string {
+  if (!value) return "";
+  try {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return value;
+    if (!format) {
+      const dateStr = date.toLocaleDateString("en-CA");
+      const timeStr = date.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+      return `${dateStr} ${timeStr}`;
+    }
+    return date.toLocaleString();
+  } catch {
+    return value;
+  }
+}
+
+function formatTime(value: string, _format?: string): string {
+  if (!value) return "";
+  try {
+    if (/^\d{2}:\d{2}(:\d{2})?$/.test(value)) return value.slice(0, 5);
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return value;
+    return date.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return value;
+  }
+}
+
+function formatNumeric(
+  value: number | undefined | null,
+  type: "Int" | "Float" | "Currency" | "Percent",
+  precision: number,
+  currencySymbol: string,
+): string {
+  if (value === undefined || value === null || Number.isNaN(value)) return "";
+  switch (type) {
+    case "Int":
+      return Math.round(value).toString();
+    case "Float":
+      return value.toFixed(precision);
+    case "Currency":
+      return `${currencySymbol}${value.toFixed(precision)}`;
+    case "Percent":
+      return `${value.toFixed(precision)}%`;
+    default:
+      return value.toString();
+  }
+}
+
+function formatValue(
+  value: string | number | boolean | null | undefined,
+  type: ReadOnlyType,
+  options: {
+    currencySymbol: string;
+    precision: number;
+    dateFormat?: string;
+    datetimeFormat?: string;
+    timeFormat?: string;
+  },
+): string {
+  if (value === undefined || value === null) return "";
+  switch (type) {
+    case "Check":
+      return value ? "Yes" : "No";
+    case "Int":
+    case "Float":
+    case "Currency":
+    case "Percent":
+      return formatNumeric(
+        typeof value === "number" ? value : Number.parseFloat(String(value)),
+        type,
+        options.precision,
+        options.currencySymbol,
+      );
+    case "Date":
+      return formatDate(String(value), options.dateFormat);
+    case "Datetime":
+      return formatDatetime(String(value), options.datetimeFormat);
+    case "Time":
+      return formatTime(String(value), options.timeFormat);
+    case "Color":
+      return String(value).toUpperCase();
+    default:
+      return String(value);
+  }
+}
+
+export function ReadOnly({
+  label,
+  value,
+  type = "Data",
+  currencySymbol = "$",
+  precision = 2,
+  dateFormat,
+  datetimeFormat,
+  timeFormat,
+  emptyText = "-",
+  linkHref,
+  onLinkPress,
+  ...stackProps
+}: ReadOnlyProps) {
+  const { knobProps } = useResolvedKnobs();
+  const displayValue = useMemo(() => {
+    const formatted = formatValue(value, type, {
+      currencySymbol,
+      precision,
+      dateFormat,
+      datetimeFormat,
+      timeFormat,
+    });
+    return formatted || emptyText;
+  }, [value, type, currencySymbol, precision, dateFormat, datetimeFormat, timeFormat, emptyText]);
+  const isEmpty = value === undefined || value === null || value === "";
+
+  const renderColorSwatch = () => {
+    if (type !== "Color" || isEmpty) return null;
+    const colorValue = String(value);
+    if (!/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(colorValue)) return null;
+    return (
+      <XStack
+        width="$1"
+        height="$1"
+        borderRadius="$2"
+        borderWidth={1}
+        borderColor="$borderColor"
+        backgroundColor={colorValue as any}
+        marginRight="$2"
+      />
+    );
+  };
+
+  const renderValue = () => {
+    if (type === "Color" && !isEmpty) {
+      return (
+        <XStack alignItems="center">
+          {renderColorSwatch()}
+          <Text
+            fontSize={knobProps.sizeToken}
+            color={isEmpty ? "$color10" : "$color"}
+            fontFamily="$mono"
+          >
+            {displayValue}
+          </Text>
+        </XStack>
+      );
+    }
+    if (type === "Link" && (linkHref || onLinkPress) && !isEmpty) {
+      return (
+        <Text
+          fontSize={knobProps.sizeToken}
+          {...knobProps.body}
+          color="$accentColor"
+          textDecorationLine="underline"
+          cursor="pointer"
+          onPress={onLinkPress}
+          hoverStyle={{ opacity: 0.8 }}
+        >
+          {displayValue}
+        </Text>
+      );
+    }
+    if (type === "Check") {
+      return (
+        <XStack alignItems="center" gap="$2">
+          <XStack
+            width="$0.75"
+            height="$0.75"
+            borderRadius="$1"
+            borderWidth={1}
+            borderColor={value ? "$green10" : "$color8"}
+            backgroundColor={value ? "$green5" : "$color3"}
+            alignItems="center"
+            justifyContent="center"
+          >
+            {value && (
+              <Text fontSize="$1" color="$green10">
+                {"\u2713"}
+              </Text>
+            )}
+          </XStack>
+          <Text
+            fontSize={knobProps.sizeToken}
+            {...knobProps.body}
+            color={isEmpty ? "$color10" : "$color"}
+          >
+            {displayValue}
+          </Text>
+        </XStack>
+      );
+    }
+    if (type === "LongText" || type === "Text" || type === "SmallText") {
+      return (
+        <Text
+          fontSize={knobProps.sizeToken}
+          {...knobProps.body}
+          color={isEmpty ? "$color10" : "$color"}
+          whiteSpace="pre-wrap"
+        >
+          {displayValue}
+        </Text>
+      );
+    }
+    return (
+      <Text
+        fontSize={knobProps.sizeToken}
+        {...knobProps.body}
+        color={isEmpty ? "$color10" : "$color"}
+      >
+        {displayValue}
+      </Text>
+    );
+  };
+
+  return (
+    <YStack {...knobProps.gap} {...stackProps}>
+      {label && (
+        <Label color="$color10" fontSize="$2">
+          {label}
+        </Label>
+      )}
+      <XStack
+        {...knobProps.borderRadius}
+        {...{ backgroundColor: "$color2" }}
+        paddingVertical="$2"
+        paddingHorizontal="$3"
+        borderColor="$color5"
+        minHeight="$3.5"
+        alignItems="center"
+      >
+        {renderValue()}
+      </XStack>
+    </YStack>
+  );
+}

package/src/fields/Select/Select.stories.tsx

@@ -0,0 +1,75 @@
+import { action } from "@multiplatform.one/storybook";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { Select, type SelectProps } from ".";
+
+export default {
+  title: "FrappeUI/Select",
+  component: Select,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A dropdown select field for Frappe Select field type with support for string or object options.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text", description: "Field label" },
+    placeholder: { control: "text", description: "Placeholder text" },
+    disabled: { control: "boolean", description: "Disable the field" },
+    required: { control: "boolean", description: "Mark as required" },
+    error: { control: "text", description: "Error message to display" },
+  },
+};
+
+function ControlledSelect({ onChange: _onChange, ...props }: SelectProps) {
+  const [value, setValue] = useState(props.value || "");
+  const handleChange = (v: string) => {
+    setValue(v);
+    action("onChange")(v);
+  };
+  const merged = { ...props, value, onChange: handleChange } as SelectProps;
+  return <Select {...merged} />;
+}
+
+const statusOptions = ["Open", "In Progress", "Completed", "Cancelled"];
+
+const priorityOptions = [
+  { value: "low", label: "Low Priority" },
+  { value: "medium", label: "Medium Priority" },
+  { value: "high", label: "High Priority" },
+  { value: "critical", label: "Critical" },
+];
+
+export const Default = (args: SelectProps) => <ControlledSelect {...args} />;
+Default.args = {
+  label: "Status",
+  options: statusOptions,
+  placeholder: "Select status",
+} satisfies Partial<SelectProps>;
+
+Default.storyName = "Main";
+export const AllStates = () => (
+  <YStack gap="$4" width={400}>
+    <ControlledSelect label="Default" options={statusOptions} placeholder="Select..." />
+    <ControlledSelect label="With Value" options={statusOptions} value="Open" />
+    <ControlledSelect label="Object Options" options={priorityOptions} value="medium" />
+    <ControlledSelect
+      label="Required"
+      options={statusOptions}
+      required
+      placeholder="Required field"
+    />
+    <ControlledSelect label="With Error" options={statusOptions} error="Selection is required" />
+    <ControlledSelect label="Disabled" options={statusOptions} value="Completed" disabled />
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All possible states of the SelectField component.",
+    },
+  },
+};

package/src/fields/Select/index.tsx

@@ -0,0 +1,83 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Select as FormsSelect } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type SelectProps<
+  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;
+    options: string[] | { label: string; value: string }[];
+    placeholder?: string;
+    disabled?: boolean;
+  };
+
+export function Select<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: SelectProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    options,
+    placeholder = "Select an option",
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    ...fieldProps
+  } = useProps(props) as SelectProps<TData, TName> & Record<string, unknown>;
+
+  const normalizedOptions = (options || []).map((opt) =>
+    typeof opt === "string" ? { label: opt, value: opt } : opt,
+  );
+
+  return (
+    <FormsSelect
+      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}
+      disabled={disabled}
+      value={value}
+      onValueChange={(val) => onChange?.(Array.isArray(val) ? (val[0] ?? "") : val)}
+      onBlur={onBlur}
+      options={normalizedOptions}
+      placeholder={placeholder}
+    />
+  );
+}

package/src/fields/Signature/index.tsx

@@ -0,0 +1,88 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Signature as FormsSignature } from "@multiplatform.one/forms";
+import { EraserIcon } from "@phosphor-icons/react";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type SignatureProps<
+  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"
+    >
+  > & {
+    /** Base64 data URL of the signature image */
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    width?: number;
+    height?: number;
+    penColor?: string;
+    backgroundColor?: string;
+  };
+
+export function Signature<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: SignatureProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    mode: _mode,
+    name,
+    onBlur,
+    onChange,
+    preserveValue: _preserveValue,
+    validators,
+    disabled,
+    value,
+    width,
+    height,
+    penColor,
+    backgroundColor,
+    ...fieldProps
+  } = useProps(props);
+
+  return (
+    <FormsSignature
+      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}
+      width={width}
+      height={height}
+      penColor={penColor}
+      backgroundColor={backgroundColor}
+      clearIcon={<EraserIcon size={16} />}
+    />
+  );
+}

package/src/fields/Slider/index.tsx

@@ -0,0 +1,85 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Slider as FormsSlider } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type SliderFieldProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    number
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        number
+      >,
+      "children"
+    >
+  > & {
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    sliderProps?: Record<string, unknown>;
+  };
+
+export function SliderField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: SliderFieldProps<TData, TName>) {
+  const {
+    sliderProps,
+    defaultValue,
+    form,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    min,
+    max,
+    step,
+    ...fieldProps
+  } = useProps(props) as SliderFieldProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsSlider
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue != null ? [defaultValue as number] : undefined}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      value={value != null ? [value] : undefined}
+      onValueChange={(values) => onChange?.(values[0])}
+      onBlur={onBlur}
+      disabled={disabled}
+      min={min}
+      max={max}
+      step={step}
+      sliderProps={sliderProps as any}
+    />
+  );
+}

package/src/fields/SmallText/index.tsx

@@ -0,0 +1,83 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Input as FormsInput } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type SmallTextProps<
+  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;
+    placeholder?: string;
+    disabled?: boolean;
+    maxLength?: number;
+    textAreaProps?: Record<string, unknown>;
+  };
+
+export function SmallText<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: SmallTextProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    placeholder,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    maxLength,
+    textAreaProps,
+    ...fieldProps
+  } = useProps(props) as SmallTextProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsInput
+      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}
+      onChangeText={onChange}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      disabled={disabled}
+      multiline
+      maxLength={maxLength}
+      inputProps={textAreaProps as any}
+    />
+  );
+}