@multiplatform.one/forms 6.0.0

package/src/fields/FileUpload/index.tsx

@@ -0,0 +1,504 @@
+import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import { type DragEvent, useCallback, useEffect, useRef, useState } from "react";
+import { useProps, type SizeTokens } from "tamagui";
+import { Image, isWeb, Paragraph, Text, XStack, YStack, styled } from "tamagui";
+import { Button } from "../../Button";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { Skeleton } from "../../Skeleton";
+import {
+  clampRadiusForLargeComponent,
+  getFieldError,
+  getFieldHeight,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { FormFieldProps } from "../../fieldLayout";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import type { FieldComponentProps, Validator } from "../../types";
+
+export type FileUploadProps<
+  TParentData = any,
+  TName extends DeepKeys<TParentData> = any,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+      "children"
+    >
+  > & {
+    readOnly?: boolean;
+    accept?: string;
+    maxSize?: number; // in bytes
+    multiple?: boolean;
+    dragDrop?: boolean;
+    showPreview?: boolean;
+    placeholder?: string;
+    buttonText?: string;
+    onFileSelect?: (files: FileList | null) => void;
+    onFileRemove?: (file: File) => void;
+    /** When true, renders a skeleton placeholder instead of the file upload */
+    skeleton?: boolean;
+    /** When true, uses compact sizing */
+    compact?: boolean;
+  };
+
+const UploadAreaFrame = styled(YStack, {
+  width: "100%",
+  overflow: "hidden",
+  borderStyle: "dashed",
+  backgroundColor: formInputColors.background.base,
+  borderColor: formInputColors.border.base,
+  variants: {
+    outlined: {
+      true: {
+        backgroundColor: "transparent",
+      },
+    },
+    disabledState: {
+      true: { opacity: 0.5 },
+      false: { opacity: 1 },
+    },
+  } as const,
+});
+
+const UploadFileListFrame = styled(YStack, {
+  width: "100%",
+  borderTopWidth: 1,
+  borderTopColor: formCommonColors.divider,
+});
+
+export function FileUpload<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(props: FileUploadProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const {
+    defaultValue,
+    form,
+    accept,
+    maxSize,
+    multiple = false,
+    dragDrop = true,
+    showPreview = true,
+    placeholder = "Drag a file into this area",
+    buttonText = "Choose File",
+    onFileSelect,
+    onFileRemove,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    skeleton,
+    compact,
+    id: idProp,
+    ...fieldProps
+  } = useProps(props);
+
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(
+    fieldProps.required,
+    validators,
+    fieldProps.label,
+    name,
+  );
+  // Intentional: extract raw radius token to pass to clampRadiusForLargeComponent utility function.
+  // The utility needs the token string (e.g. "$4") to clamp it, not a fragment.
+  const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [validationError, setValidationError] = useState<string | undefined>();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const previewUrlsRef = useRef(new Map<File, string>());
+
+  useEffect(() => {
+    if (!isWeb) return;
+    return () => {
+      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+      previewUrlsRef.current.clear();
+    };
+  }, []);
+
+  const formatFileSize = useCallback((bytes: number): string => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+  }, []);
+
+  const validateFile = useCallback(
+    (file: File): string | null => {
+      if (maxSize && file.size > maxSize) {
+        return `File size must be less than ${formatFileSize(maxSize)}`;
+      }
+      if (accept) {
+        const acceptedTypes = accept.split(",").map((type) => type.trim());
+        const isAccepted = acceptedTypes.some((type) => {
+          if (type.startsWith(".")) {
+            return file.name.toLowerCase().endsWith(type.toLowerCase());
+          }
+          return file.type.match(type.replace("*", ".*"));
+        });
+        if (!isAccepted) {
+          return `File type not accepted. Accepted types: ${accept}`;
+        }
+      }
+      return null;
+    },
+    [maxSize, accept, formatFileSize],
+  );
+
+  const syncFieldValue = useCallback(
+    (nextFiles: File[], onValueChange?: (nextValue: TData) => void) => {
+      if (!onValueChange) return;
+      if (multiple) {
+        onValueChange(nextFiles as TData);
+        return;
+      }
+      onValueChange((nextFiles[0] ?? null) as TData);
+    },
+    [multiple],
+  );
+
+  const handleFileSelect = useCallback(
+    (
+      files: FileList | File[] | null,
+      onValueChange?: (nextValue: TData) => void,
+      rawFileList?: FileList | null,
+    ) => {
+      if (!files) return;
+
+      const fileArray = Array.isArray(files) ? files : Array.from(files);
+      const validFiles: File[] = [];
+      const errors: string[] = [];
+
+      fileArray.forEach((file) => {
+        const error = validateFile(file);
+        if (error) {
+          errors.push(`${file.name}: ${error}`);
+        } else {
+          validFiles.push(file);
+        }
+      });
+
+      if (errors.length > 0) {
+        setValidationError(errors.join("\n"));
+      }
+
+      if (validFiles.length > 0) {
+        setValidationError(undefined);
+        setSelectedFiles((prev) => {
+          const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
+          syncFieldValue(nextFiles, onValueChange);
+          return nextFiles;
+        });
+        onFileSelect?.(rawFileList ?? (Array.isArray(files) ? null : files));
+      }
+    },
+    [multiple, validateFile, onFileSelect, syncFieldValue],
+  );
+
+  const handleFileRemove = useCallback(
+    (fileToRemove: File, onValueChange?: (nextValue: TData) => void) => {
+      if (isWeb) {
+        const previewUrl = previewUrlsRef.current.get(fileToRemove);
+        if (previewUrl) {
+          URL.revokeObjectURL(previewUrl);
+          previewUrlsRef.current.delete(fileToRemove);
+        }
+      }
+
+      setSelectedFiles((prev) => {
+        const nextFiles = prev.filter((file) => file !== fileToRemove);
+        syncFieldValue(nextFiles, onValueChange);
+        return nextFiles;
+      });
+
+      onFileRemove?.(fileToRemove);
+    },
+    [onFileRemove, syncFieldValue],
+  );
+
+  const handleDragOver = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      if (dragDrop) {
+        setIsDragOver(true);
+      }
+    },
+    [dragDrop],
+  );
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: DragEvent, onValueChange?: (nextValue: TData) => void) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (dragDrop && e.dataTransfer.files) {
+        handleFileSelect(e.dataTransfer.files, onValueChange, e.dataTransfer.files);
+      }
+    },
+    [dragDrop, handleFileSelect],
+  );
+
+  const openFileDialog = useCallback(() => {
+    if (disabled || readOnly) return;
+    fileInputRef.current?.click();
+  }, [disabled, readOnly]);
+
+  const getFilePreview = useCallback((file: File) => {
+    if (!isWeb) return null;
+    if (file.type.startsWith("image/")) {
+      const existingUrl = previewUrlsRef.current.get(file);
+      if (existingUrl) return existingUrl;
+      const nextUrl = URL.createObjectURL(file);
+      previewUrlsRef.current.set(file, nextUrl);
+      return nextUrl;
+    }
+    return null;
+  }, []);
+
+  // Render skeleton placeholder
+  if (skeleton) {
+    const minHeightPx = getFieldHeight((fieldProps.size || knobProps.sizeToken) as SizeTokens, 5);
+    return (
+      <FieldLayout id={id} label={fieldProps.label} size={fieldProps.size} knobProps={knobProps}>
+        <Skeleton variant="rounded" width="100%" height={minHeightPx} />
+      </FieldLayout>
+    );
+  }
+
+  const canInteract = !disabled && !readOnly;
+
+  const renderUploadArea = (
+    errorProp?: string | boolean,
+    onValueChange?: (nextValue: TData) => void,
+    onBlurHandler?: () => void,
+  ) => {
+    // Native fallback - show placeholder message
+    if (!isWeb) {
+      return (
+        <UploadAreaFrame
+          outlined={knobProps.outlined}
+          disabledState={!!disabled}
+          borderRadius={cappedRadius}
+          // Intentional: extract borderWidth from knobProps.borderRadius fragment
+          // to use as a fallback value, not as a style spread.
+          borderWidth={knobProps.borderRadius.borderWidth ?? 1}
+          {...(errorProp ? { borderColor: formCommonColors.error } : undefined)}
+          elevation={knobProps.elevation}
+          transition={knobProps.transition}
+          aria-required={fieldProps.required || undefined}
+          aria-invalid={!!errorProp || undefined}
+          aria-readonly={readOnly || undefined}
+        >
+          <YStack
+            {...knobProps.panelPadding}
+            minHeight={getFieldHeight((fieldProps.size || knobProps.sizeToken) as SizeTokens, 5)}
+            width="100%"
+            alignItems="center"
+            justifyContent="center"
+            {...knobProps.gap}
+          >
+            <Paragraph color={formCommonColors.text} textAlign="center">
+              File upload requires a native file picker.
+            </Paragraph>
+            <Paragraph color={formCommonColors.muted} textAlign="center" fontSize="$2">
+              Use expo-document-picker or expo-image-picker for native support.
+            </Paragraph>
+          </YStack>
+        </UploadAreaFrame>
+      );
+    }
+
+    return (
+      <UploadAreaFrame
+        outlined={knobProps.outlined}
+        disabledState={!!disabled}
+        borderRadius={cappedRadius}
+        // Intentional: extract borderWidth from knobProps.borderRadius fragment
+        // to conditionally override with drag-over state (2px) vs knob value.
+        borderWidth={isDragOver && canInteract ? 2 : (knobProps.borderRadius.borderWidth ?? 1)}
+        {...(errorProp ? { borderColor: formCommonColors.error } : undefined)}
+        {...(isDragOver && canInteract ? { borderColor: formCommonColors.text } : undefined)}
+        elevation={knobProps.elevation}
+        transition={knobProps.transition}
+        aria-required={fieldProps.required || undefined}
+        aria-invalid={!!errorProp || undefined}
+        aria-readonly={readOnly || undefined}
+      >
+        <YStack
+          {...knobProps.panelPadding}
+          minHeight={getFieldHeight((fieldProps.size || knobProps.sizeToken) as SizeTokens, 5)}
+          width="100%"
+          alignItems="center"
+          justifyContent="center"
+          {...knobProps.gap}
+          {...(canInteract
+            ? ({
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave,
+                onDrop: (e: DragEvent) => {
+                  handleDrop(e, onValueChange);
+                  onBlurHandler?.();
+                },
+              } as any)
+            : {})}
+        >
+          <Button onPress={openFileDialog} disabled={!canInteract} size={knobProps.sizeToken}>
+            <Button.Icon>
+              <UploadIcon />
+            </Button.Icon>
+            <Button.Text {...knobProps.body}>{buttonText}</Button.Text>
+          </Button>
+
+          {selectedFiles.length === 0 && (
+            <Text color={formCommonColors.muted} textAlign="center" {...knobProps.body}>
+              {placeholder}
+            </Text>
+          )}
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={accept}
+            multiple={multiple}
+            onChange={(e) => {
+              handleFileSelect(e.target.files, onValueChange, e.target.files);
+              onBlurHandler?.();
+            }}
+            style={{ display: "none" }}
+            disabled={!canInteract}
+          />
+        </YStack>
+
+        {selectedFiles.length > 0 && (
+          <UploadFileListFrame>
+            {selectedFiles.map((file, index) => {
+              const preview = showPreview ? getFilePreview(file) : null;
+              return (
+                <XStack
+                  key={`${file.name}-${index}`}
+                  width="100%"
+                  {...knobProps.gap}
+                  alignItems="center"
+                  justifyContent="space-between"
+                  {...knobProps.panelPadding}
+                >
+                  <XStack flex={1} gap="$2" alignItems="center">
+                    {preview ? (
+                      <Image
+                        borderRadius={cappedRadius}
+                        source={{ uri: preview }}
+                        width={32}
+                        height={32}
+                        resizeMode="cover"
+                      />
+                    ) : (
+                      <XStack width={20} height={20} justifyContent="center" alignItems="center">
+                        <FileIcon size={16} />
+                      </XStack>
+                    )}
+                    <YStack flex={1} gap="$1">
+                      <Text numberOfLines={1} {...knobProps.body}>
+                        {file.name}
+                      </Text>
+                      <Text numberOfLines={1} color={formCommonColors.text} {...knobProps.body}>
+                        {formatFileSize(file.size)}
+                      </Text>
+                    </YStack>
+                  </XStack>
+
+                  {canInteract && (
+                    <Button
+                      circular
+                      size={knobProps.sizeToken}
+                      tabIndex={-1}
+                      onPress={(e) => {
+                        e.stopPropagation();
+                        handleFileRemove(file, onValueChange);
+                      }}
+                    >
+                      <Button.Icon>
+                        <XIcon />
+                      </Button.Icon>
+                    </Button>
+                  )}
+                </XStack>
+              );
+            })}
+          </UploadFileListFrame>
+        )}
+      </UploadAreaFrame>
+    );
+  };
+
+  if (!resolvedForm || !name) {
+    const standaloneError = fieldProps.error ?? validationError;
+    return (
+      <FieldLayout
+        id={id}
+        label={fieldProps.label}
+        labelProps={fieldProps.labelProps}
+        error={standaloneError}
+        helperText={fieldProps.helperText}
+        required={fieldProps.required}
+        size={fieldProps.size}
+        knobProps={knobProps}
+      >
+        {renderUploadArea(standaloneError, undefined)}
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      defaultValue={defaultValue}
+      form={resolvedForm}
+      mode={mode}
+      name={name}
+      preserveValue={preserveValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const error = getFieldError(field, fieldProps.error) ?? validationError;
+
+        return (
+          <FieldLayout
+            id={id}
+            label={fieldProps.label}
+            labelProps={fieldProps.labelProps}
+            error={error}
+            helperText={fieldProps.helperText}
+            required={fieldProps.required}
+            size={fieldProps.size}
+            knobProps={knobProps}
+          >
+            {renderUploadArea(
+              error,
+              (nextValue) => field.handleChange(nextValue as any),
+              mergeFieldHandler(field, "handleBlur", fieldProps.onBlur),
+            )}
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/Geolocation/Geolocation.spec.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
+import { Geolocation } from "./index";
+
+const locationIcon = <span data-testid="location-icon" />;
+
+describe("Geolocation", () => {
+  describe("without form context", () => {
+    it("renders with label", () => {
+      const result = renderWithProviders(
+        <Geolocation label="Location" name="loc" locationIcon={locationIcon} />,
+      );
+      expect(result.findTextElement("Location")).toBeDefined();
+    });
+
+    it("renders required label with asterisk", () => {
+      const result = renderWithProviders(
+        <Geolocation label="Required" name="req" locationIcon={locationIcon} required />,
+      );
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("renders Lat and Lng inputs", () => {
+      const result = renderWithProviders(
+        <Geolocation label="Location" name="loc" locationIcon={locationIcon} />,
+      );
+      expect(result.findTextElement("Lat")).toBeDefined();
+      expect(result.findTextElement("Lng")).toBeDefined();
+    });
+
+    it("renders with helper text", () => {
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          name="loc"
+          locationIcon={locationIcon}
+          helperText="Pick a point"
+        />,
+      );
+      expect(result.findTextElement("Pick a point")).toBeDefined();
+    });
+
+    it("renders skeleton placeholder", () => {
+      const result = renderWithProviders(
+        <Geolocation label="Loading" name="l" locationIcon={locationIcon} skeleton />,
+      );
+      expect(result.findTextElement("Lat")).toBeUndefined();
+    });
+
+    it("renders readOnly — hides locate button", () => {
+      const result = renderWithProviders(
+        <Geolocation
+          label="ReadOnly"
+          name="r"
+          locationIcon={locationIcon}
+          readOnly
+          value={JSON.stringify({ lat: 1.23, lng: 4.56 })}
+        />,
+      );
+      expect(result.findTextElement("Locate")).toBeUndefined();
+    });
+
+    it("displays parsed coordinate values", () => {
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          name="loc"
+          locationIcon={locationIcon}
+          value={JSON.stringify({ lat: 51.5, lng: -0.12 })}
+        />,
+      );
+      const inputs = result.container.querySelectorAll("input");
+      expect(inputs[0]?.value).toBe("51.5");
+      expect(inputs[1]?.value).toBe("-0.12");
+    });
+  });
+
+  describe("with form context", () => {
+    it("renders inside form", () => {
+      const result = renderWithProviders(
+        <Form
+          formOptions={{ defaultValues: { loc: JSON.stringify({ lat: 0, lng: 0 }) } }}
+          submitText="Submit"
+        >
+          <Geolocation name="loc" label="Location" locationIcon={locationIcon} />
+        </Form>,
+      );
+      expect(result.findTextElement("Location")).toBeDefined();
+    });
+  });
+});