@multiplatform.one/frappe-ui 6.0.0

package/src/fields/Date/date.native.tsx

@@ -0,0 +1,346 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useState, useCallback, useMemo } from "react";
+import { Modal, Pressable, StyleSheet, View } from "react-native";
+import { platform } from "@multiplatform.one/platform";
+import DateTimePicker, { type DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import { Button, Label, Text, XStack, YStack, type YStackProps } from "tamagui";
+
+export interface DateProps extends Omit<YStackProps, "children" | "onChange"> {
+  label?: string;
+  value?: string;
+  onChange: (value: string) => void;
+  type?: "date" | "datetime" | "time";
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+  placeholder?: string;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+/**
+ * Format date to ISO string format for the given type
+ */
+function formatValue(date: Date, type: "date" | "datetime" | "time"): string {
+  if (type === "time") {
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    return `${hours}:${minutes}`;
+  }
+  if (type === "datetime") {
+    return date.toISOString().slice(0, 16).replace("T", " ");
+  }
+  // date
+  return date.toISOString().slice(0, 10);
+}
+
+/**
+ * Parse value string to Date object
+ */
+function parseValue(value: string, type: "date" | "datetime" | "time"): Date {
+  if (!value) return new Date();
+
+  if (type === "time") {
+    const [hours, minutes] = value.split(":").map(Number);
+    const date = new Date();
+    date.setHours(hours || 0, minutes || 0, 0, 0);
+    return date;
+  }
+  if (type === "datetime") {
+    // Handle both "YYYY-MM-DD HH:MM" and "YYYY-MM-DDTHH:MM" formats
+    const normalized = value.replace(" ", "T");
+    return new Date(normalized);
+  }
+  // date - YYYY-MM-DD
+  return new Date(value + "T00:00:00");
+}
+
+/**
+ * Format display value for the button
+ */
+function formatDisplayValue(value: string, type: "date" | "datetime" | "time"): string {
+  if (!value) return "";
+
+  try {
+    const date = parseValue(value, type);
+
+    if (type === "time") {
+      return date.toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    }
+    if (type === "datetime") {
+      return date.toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    }
+    // date
+    return date.toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  } catch {
+    return value;
+  }
+}
+
+/**
+ * Native DateField component for iOS and Android
+ * Uses @react-native-community/datetimepicker for native date/time pickers
+ */
+export function DateNative({
+  label,
+  value = "",
+  onChange,
+  type = "date",
+  disabled = false,
+  required = false,
+  error,
+  placeholder,
+  minDate,
+  maxDate,
+  ...stackProps
+}: DateProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [showPicker, setShowPicker] = useState(false);
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [tempDate, setTempDate] = useState<Date | null>(null);
+
+  // Parse current value to Date
+  const currentDate = useMemo(() => {
+    return value ? parseValue(value, type) : new Date();
+  }, [value, type]);
+
+  // Determine picker mode
+  const pickerMode = useMemo(() => {
+    if (type === "time") return "time";
+    if (type === "datetime" && showTimePicker) return "time";
+    return "date";
+  }, [type, showTimePicker]);
+
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    setTempDate(currentDate);
+    setShowPicker(true);
+    setShowTimePicker(false);
+  }, [disabled, currentDate]);
+
+  const handleChange = useCallback(
+    (event: DateTimePickerEvent, selectedDate?: Date) => {
+      const isAndroid = platform.isAndroid;
+
+      if (event.type === "dismissed") {
+        setShowPicker(false);
+        setShowTimePicker(false);
+        setTempDate(null);
+        return;
+      }
+
+      if (event.type === "set" && selectedDate) {
+        if (type === "datetime" && !showTimePicker && !isAndroid) {
+          // On iOS, show time picker after date selection for datetime
+          setTempDate(selectedDate);
+          setShowTimePicker(true);
+          return;
+        }
+
+        if (type === "datetime" && isAndroid && !showTimePicker) {
+          // On Android, first show date, then time
+          setTempDate(selectedDate);
+          setShowPicker(false);
+          setShowTimePicker(true);
+          // Show time picker immediately
+          setTimeout(() => setShowPicker(true), 100);
+          return;
+        }
+
+        // Final value selection
+        const finalDate =
+          type === "datetime" && tempDate
+            ? new Date(
+                tempDate.getFullYear(),
+                tempDate.getMonth(),
+                tempDate.getDate(),
+                selectedDate.getHours(),
+                selectedDate.getMinutes(),
+              )
+            : selectedDate;
+
+        onChange(formatValue(finalDate, type));
+        setShowPicker(false);
+        setShowTimePicker(false);
+        setTempDate(null);
+      }
+    },
+    [type, showTimePicker, tempDate, onChange],
+  );
+
+  const handleIOSConfirm = useCallback(() => {
+    if (tempDate) {
+      onChange(formatValue(tempDate, type));
+    }
+    setShowPicker(false);
+    setShowTimePicker(false);
+    setTempDate(null);
+  }, [tempDate, type, onChange]);
+
+  const handleIOSCancel = useCallback(() => {
+    setShowPicker(false);
+    setShowTimePicker(false);
+    setTempDate(null);
+  }, []);
+
+  const handleIOSDateChange = useCallback(
+    (_event: DateTimePickerEvent, selectedDate?: Date) => {
+      if (selectedDate) {
+        if (type === "datetime" && !showTimePicker) {
+          setTempDate(selectedDate);
+        } else if (type === "datetime" && showTimePicker && tempDate) {
+          // Merge date from tempDate with time from selectedDate
+          const merged = new Date(
+            tempDate.getFullYear(),
+            tempDate.getMonth(),
+            tempDate.getDate(),
+            selectedDate.getHours(),
+            selectedDate.getMinutes(),
+          );
+          setTempDate(merged);
+        } else {
+          setTempDate(selectedDate);
+        }
+      }
+    },
+    [type, showTimePicker, tempDate],
+  );
+
+  const displayValue = useMemo(() => formatDisplayValue(value, type), [value, type]);
+
+  const isIOS = platform.isIos;
+
+  return (
+    <YStack {...knobProps.gap} {...stackProps}>
+      {label && (
+        <Label>
+          {label}
+          {required && (
+            <Text color="$red10" fontSize="$3">
+              {" *"}
+            </Text>
+          )}
+        </Label>
+      )}
+
+      <Button
+        onPress={handlePress}
+        disabled={disabled}
+        justifyContent="flex-start"
+        paddingHorizontal="$3"
+        height={44}
+        {...knobProps.borderRadius}
+        borderColor={error ? "$red8" : "$borderColor"}
+        backgroundColor={disabled ? "$color4" : "$background"}
+      >
+        <Text color={value ? "$color" : "$color9"}>
+          {displayValue || placeholder || `Select ${type}...`}
+        </Text>
+      </Button>
+
+      {error && (
+        <Text color="$red10" fontSize="$2">
+          {error}
+        </Text>
+      )}
+
+      {/* Android: Inline picker */}
+      {showPicker && !isIOS && (
+        <DateTimePicker
+          value={tempDate || currentDate}
+          mode={pickerMode}
+          display="default"
+          onChange={handleChange}
+          minimumDate={minDate}
+          maximumDate={maxDate}
+        />
+      )}
+
+      {/* iOS: Modal picker */}
+      {showPicker && isIOS && (
+        <Modal
+          transparent
+          animationType="slide"
+          visible={showPicker}
+          onRequestClose={handleIOSCancel}
+        >
+          <Pressable style={styles.modalOverlay} onPress={handleIOSCancel}>
+            <View style={styles.modalContent}>
+              <Pressable onPress={(e) => e.stopPropagation()}>
+                <XStack
+                  justifyContent="space-between"
+                  paddingHorizontal="$4"
+                  paddingVertical="$2"
+                  {...{ backgroundColor: "$color2" }}
+                  borderTopLeftRadius="$4"
+                  borderTopRightRadius="$4"
+                >
+                  <Button size="$3" chromeless onPress={handleIOSCancel}>
+                    <Text color="$red10">Cancel</Text>
+                  </Button>
+
+                  {type === "datetime" && !showTimePicker && (
+                    <Button size="$3" chromeless onPress={() => setShowTimePicker(true)}>
+                      <Text color="$accentBackground">Next</Text>
+                    </Button>
+                  )}
+
+                  {(type !== "datetime" || showTimePicker) && (
+                    <Button size="$3" chromeless onPress={handleIOSConfirm}>
+                      <Text color="$accentBackground">Done</Text>
+                    </Button>
+                  )}
+                </XStack>
+
+                <View style={styles.pickerContainer}>
+                  <DateTimePicker
+                    value={tempDate || currentDate}
+                    mode={pickerMode}
+                    display="spinner"
+                    onChange={handleIOSDateChange}
+                    minimumDate={type !== "time" ? minDate : undefined}
+                    maximumDate={type !== "time" ? maxDate : undefined}
+                    style={styles.picker}
+                  />
+                </View>
+              </Pressable>
+            </View>
+          </Pressable>
+        </Modal>
+      )}
+    </YStack>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  modalContent: {
+    backgroundColor: "white",
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  pickerContainer: {
+    backgroundColor: "white",
+    paddingBottom: 20,
+  },
+  picker: {
+    height: 200,
+  },
+});

package/src/fields/Date/index.tsx

@@ -0,0 +1,80 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { DatePicker as FormsDatePicker } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type DateProps<
+  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;
+    type?: "date" | "datetime" | "time";
+    disabled?: boolean;
+    inputProps?: Record<string, unknown>;
+  };
+
+export function Date<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: DateProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    _inputProps,
+    mode,
+    name,
+    onBlur,
+    _onChange,
+    preserveValue,
+    validators,
+    disabled,
+    _value,
+    type = "date",
+    ...fieldProps
+  } = useProps(props) as DateProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsDatePicker
+      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}
+      placeholder={
+        type === "time" ? "Select time" : type === "datetime" ? "Select date & time" : "Select date"
+      }
+      onBlur={onBlur}
+      mode={mode}
+      preserveValue={preserveValue}
+    />
+  );
+}

package/src/fields/DateRange/index.tsx

@@ -0,0 +1,73 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { DateRangePicker as FormsDateRangePicker } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type DateRangeFieldProps<
+  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;
+    placeholder?: string;
+  };
+
+export function DateRangeField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: DateRangeFieldProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    mode: _mode,
+    name,
+    onBlur: _onBlur,
+    onChange: _onChange,
+    preserveValue: _preserveValue,
+    validators,
+    disabled,
+    value: _value,
+    placeholder,
+    ...fieldProps
+  } = useProps(props);
+
+  return (
+    <FormsDateRangePicker
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      disabled={disabled}
+      placeholder={placeholder}
+    />
+  );
+}

package/src/fields/Duration/index.tsx

@@ -0,0 +1,11 @@
+import type { DurationProps as FormsDurationProps } from "@multiplatform.one/forms";
+import { Duration as FormsDuration } from "@multiplatform.one/forms";
+import { ClockIcon } from "@phosphor-icons/react";
+import { useProps } from "tamagui";
+
+export type DurationProps = FormsDurationProps;
+
+export function Duration(props: DurationProps) {
+  const resolvedProps = useProps(props);
+  return <FormsDuration clockIcon={<ClockIcon size={16} />} {...resolvedProps} />;
+}

package/src/fields/DynamicLink.tsx

@@ -0,0 +1,139 @@
+import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { zIndex } from "@multiplatform.one/forms";
+import React, { useMemo, useState } from "react";
+import { Label, Select, Text, YStack } from "tamagui";
+import { useFrappeConfig } from "../FrappeProvider";
+
+export interface DynamicLinkProps {
+  label?: string;
+  value?: string;
+  onChange: (value: string) => void;
+  doctypeFieldValue?: string;
+  onDoctypeChange?: (doctype: string) => void;
+  doctypes?: string[];
+  disabled?: boolean;
+  required?: boolean;
+  baseURL?: string;
+  auth?: any;
+}
+
+export function DynamicLink({
+  label,
+  value,
+  onChange,
+  doctypeFieldValue,
+  onDoctypeChange,
+  doctypes = [],
+  disabled = false,
+  required = false,
+  baseURL,
+  auth,
+}: DynamicLinkProps) {
+  const { knobProps } = useResolvedKnobs();
+  const config = useFrappeConfig();
+  const [selectedDoctype, setSelectedDoctype] = useState<string>(doctypeFieldValue || "");
+
+  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 documentsCollection = useFrappeCollection<{ name: string; doctype: string }>(
+    finalConfig,
+    selectedDoctype,
+    selectedDoctype ? { fields: ["name"] } : undefined,
+  );
+  const { data: rawDocuments } = useLiveQuery(
+    (q) => (documentsCollection ? q.from({ _list: documentsCollection }) : null),
+    [documentsCollection],
+  );
+  const documents = useMemo(
+    () => (rawDocuments as { name: string; doctype: string }[]) ?? [],
+    [rawDocuments],
+  );
+
+  const handleDoctypeChange = (doctype: string) => {
+    setSelectedDoctype(doctype);
+    onDoctypeChange?.(doctype);
+    onChange("");
+  };
+
+  return (
+    <YStack {...knobProps.gap}>
+      {label && (
+        <Label>
+          {label}
+          {required && <Text color="$red10"> *</Text>}
+        </Label>
+      )}
+
+      <YStack {...knobProps.gap}>
+        <Select
+          size={knobProps.sizeToken}
+          {...({
+            value: selectedDoctype,
+            onValueChange: handleDoctypeChange,
+            disabled,
+          } as any)}
+        >
+          <Select.Trigger iconAfter={CaretDownIcon} disabled={disabled} {...knobProps.borderRadius}>
+            <Select.Value placeholder="Select DocType" />
+          </Select.Trigger>
+
+          <Select.Content {...{ backgroundColor: "$background" }} {...knobProps.borderRadius}>
+            <Select.Viewport>
+              <Select.Group>
+                <Select.Label>DocType</Select.Label>
+                {doctypes.map((doctype, i) => (
+                  <Select.Item key={doctype} index={i} value={doctype}>
+                    <Select.ItemText>{doctype}</Select.ItemText>
+                  </Select.Item>
+                ))}
+              </Select.Group>
+            </Select.Viewport>
+          </Select.Content>
+        </Select>
+
+        {selectedDoctype && (
+          <Select
+            size={knobProps.sizeToken}
+            {...({
+              value,
+              onValueChange: onChange,
+              disabled: disabled || !documents || documents.length === 0,
+            } as any)}
+          >
+            <Select.Trigger
+              iconAfter={CaretDownIcon}
+              disabled={disabled || !documents || documents.length === 0}
+              {...knobProps.borderRadius}
+            >
+              <Select.Value placeholder={`Select ${selectedDoctype}`} />
+            </Select.Trigger>
+
+            <Select.Content {...{ backgroundColor: "$background" }} {...knobProps.borderRadius}>
+              <Select.Viewport>
+                <Select.Group>
+                  <Select.Label>{selectedDoctype}</Select.Label>
+                  {documents?.map((doc, i) => (
+                    <Select.Item key={doc.name} index={i} value={doc.name || ""}>
+                      <Select.ItemText>{doc.name}</Select.ItemText>
+                    </Select.Item>
+                  ))}
+                </Select.Group>
+              </Select.Viewport>
+            </Select.Content>
+          </Select>
+        )}
+      </YStack>
+    </YStack>
+  );
+}