@multiplatform.one/forms 6.0.0

package/src/fields/Geolocation/index.tsx

@@ -0,0 +1,487 @@
+import { useResolvedKnobs, type KnobProps } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { useCallback, useMemo, useState } from "react";
+import type { LabelProps, SizeTokens } from "tamagui";
+import { Spinner, Text, View, XStack, YStack, isWeb } from "tamagui";
+import { AdaptivePopup } from "../../AdaptivePopup";
+import { Button } from "../../Button";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { Skeleton } from "../../Skeleton";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { AnyFormApi } from "../../types";
+
+interface GeoValue {
+  lat: number;
+  lng: number;
+}
+
+function parseGeoValue(value: string): GeoValue {
+  try {
+    const parsed = JSON.parse(value) as Record<string, unknown>;
+    return {
+      lat: typeof parsed.lat === "number" ? parsed.lat : 0,
+      lng: typeof parsed.lng === "number" ? parsed.lng : 0,
+    };
+  } catch {
+    return { lat: 0, lng: 0 };
+  }
+}
+
+function clampLat(val: number): number {
+  return Math.max(-90, Math.min(90, val));
+}
+function clampLng(val: number): number {
+  return Math.max(-180, Math.min(180, val));
+}
+
+function useMapSrc(lat: number, lng: number, delta = 0.02) {
+  return useMemo(() => {
+    const bbox = `${lng - delta},${lat - delta},${lng + delta},${lat + delta}`;
+    return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat},${lng}`;
+  }, [lat, lng, delta]);
+}
+
+function DefaultMapPreview({
+  lat,
+  lng,
+  knobProps,
+  onExpand,
+  expandIcon,
+}: {
+  lat: number;
+  lng: number;
+  knobProps: KnobProps;
+  onExpand?: () => void;
+  expandIcon?: ReactNode;
+}) {
+  const src = useMapSrc(lat, lng);
+
+  return (
+    <YStack
+      {...knobProps.borderRadius}
+      {...knobProps.inputSurface}
+      borderColor={formInputColors.border.base}
+      overflow="hidden"
+      height={200}
+      position="relative"
+    >
+      {isWeb ? (
+        <iframe
+          title="Location preview"
+          src={src}
+          width="100%"
+          height="100%"
+          style={{ border: 0, display: "block" }}
+          loading="lazy"
+        />
+      ) : (
+        <YStack
+          flex={1}
+          alignItems="center"
+          justifyContent="center"
+          backgroundColor="$backgroundHover"
+        >
+          <Text color="$colorSubtle" fontSize="$2">
+            Map preview (web only)
+          </Text>
+          <Text color="$colorSubtle" fontSize="$1">{`${lat.toFixed(4)}, ${lng.toFixed(4)}`}</Text>
+        </YStack>
+      )}
+      {onExpand && expandIcon && (
+        <View position="absolute" top="$2" right="$2" zIndex={1}>
+          <Button size="$2" circular onPress={onExpand} backgroundColor="$background" opacity={0.9}>
+            {expandIcon}
+          </Button>
+        </View>
+      )}
+    </YStack>
+  );
+}
+
+function ExpandedMapView({
+  lat,
+  lng,
+  onChange: _onChange,
+  disabled: _disabled,
+}: {
+  lat: number;
+  lng: number;
+  onChange: (lat: number, lng: number) => void;
+  disabled: boolean;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  const src = useMapSrc(lat, lng, 0.05);
+
+  return (
+    <YStack
+      flex={1}
+      minHeight={400}
+      borderRadius={knobProps.borderRadius.borderRadius}
+      overflow="hidden"
+    >
+      {isWeb ? (
+        <iframe
+          title="Location selection"
+          src={src}
+          width="100%"
+          height="100%"
+          style={{ border: 0, display: "block", minHeight: 400 }}
+          loading="lazy"
+        />
+      ) : (
+        <YStack
+          flex={1}
+          alignItems="center"
+          justifyContent="center"
+          backgroundColor="$backgroundHover"
+        >
+          <Text color="$colorSubtle" fontSize="$2">
+            Map view (web only)
+          </Text>
+          <Text color="$colorSubtle" fontSize="$1">{`${lat.toFixed(4)}, ${lng.toFixed(4)}`}</Text>
+        </YStack>
+      )}
+    </YStack>
+  );
+}
+
+export interface GeolocationMapProps {
+  lat: number;
+  lng: number;
+  onChange: (lat: number, lng: number) => void;
+  disabled: boolean;
+  knobProps: KnobProps;
+}
+
+function GeoInputs({
+  coordinates,
+  onLatChange,
+  onLngChange,
+  onUseMyLocation,
+  onMapChange,
+  disabled,
+  readOnly,
+  locating,
+  knobProps,
+  locationIcon,
+  expandIcon,
+  renderMap,
+  required,
+  hasError,
+}: {
+  coordinates: GeoValue;
+  onLatChange: (text: string) => void;
+  onLngChange: (text: string) => void;
+  onUseMyLocation: () => void;
+  onMapChange: (lat: number, lng: number) => void;
+  disabled: boolean;
+  readOnly?: boolean;
+  locating: boolean;
+  knobProps: KnobProps;
+  locationIcon: ReactNode;
+  expandIcon?: ReactNode;
+  renderMap?: (props: GeolocationMapProps) => ReactNode;
+  required?: boolean;
+  hasError?: boolean;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleExpand = expandIcon ? () => setExpanded(true) : undefined;
+
+  const mapNode = renderMap ? (
+    renderMap({
+      lat: coordinates.lat,
+      lng: coordinates.lng,
+      onChange: onMapChange,
+      disabled,
+      knobProps,
+    })
+  ) : (
+    <DefaultMapPreview
+      lat={coordinates.lat}
+      lng={coordinates.lng}
+      knobProps={knobProps}
+      onExpand={handleExpand}
+      expandIcon={expandIcon}
+    />
+  );
+
+  return (
+    <>
+      {mapNode}
+      <XStack {...knobProps.gap} alignItems="flex-end">
+        <YStack flex={1} gap="$1">
+          <Text fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
+            Lat
+          </Text>
+          <InputParts size={knobProps.sizeToken}>
+            <InputParts.Box>
+              <InputParts.Area
+                value={String(coordinates.lat)}
+                onChangeText={readOnly ? undefined : onLatChange}
+                readOnly={readOnly}
+                aria-readonly={readOnly || undefined}
+                disabled={disabled}
+                placeholder="-90 to 90"
+                inputMode="decimal"
+                aria-required={required || undefined}
+                aria-invalid={hasError || undefined}
+              />
+            </InputParts.Box>
+          </InputParts>
+        </YStack>
+        <YStack flex={1} gap="$1">
+          <Text fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
+            Lng
+          </Text>
+          <InputParts size={knobProps.sizeToken}>
+            <InputParts.Box>
+              <InputParts.Area
+                value={String(coordinates.lng)}
+                onChangeText={readOnly ? undefined : onLngChange}
+                readOnly={readOnly}
+                aria-readonly={readOnly || undefined}
+                disabled={disabled}
+                placeholder="-180 to 180"
+                inputMode="decimal"
+                aria-required={required || undefined}
+                aria-invalid={hasError || undefined}
+              />
+            </InputParts.Box>
+          </InputParts>
+        </YStack>
+        {!readOnly && (
+          <Button
+            size={knobProps.sizeToken}
+            disabled={disabled || locating}
+            onPress={onUseMyLocation}
+            flexShrink={0}
+            icon={locating ? <Spinner size="small" /> : locationIcon}
+          >
+            <Button.Text>{locating ? "Locating..." : "Locate"}</Button.Text>
+          </Button>
+        )}
+      </XStack>
+
+      {expandIcon && (
+        <AdaptivePopup open={expanded} onOpenChange={setExpanded} title="Select Location" size="lg">
+          <ExpandedMapView
+            lat={coordinates.lat}
+            lng={coordinates.lng}
+            onChange={onMapChange}
+            disabled={disabled}
+          />
+        </AdaptivePopup>
+      )}
+    </>
+  );
+}
+
+export interface GeolocationProps {
+  name?: string;
+  form?: AnyFormApi;
+  validators?: Record<string, unknown>;
+  label?: ReactNode;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+  helperText?: string;
+  error?: string | boolean;
+  required?: boolean;
+  size?: SizeTokens;
+  id?: string;
+  /** JSON string: {"lat": number, "lng": number} */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** Icon for the locate button */
+  locationIcon: ReactNode;
+  /** Icon for the expand/fullscreen button. If provided, enables fullscreen map view. */
+  expandIcon?: ReactNode;
+  /** Custom map component. Receives lat/lng and an onChange callback for pick-on-map. */
+  renderMap?: (props: GeolocationMapProps) => ReactNode;
+  /** When true, renders a skeleton placeholder instead of the geolocation field */
+  skeleton?: boolean;
+  /** When true, uses compact sizing */
+  compact?: boolean;
+}
+
+export function Geolocation({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  size,
+  id: idProp,
+  value,
+  defaultValue,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  locationIcon,
+  expandIcon,
+  renderMap,
+  skeleton,
+  compact,
+}: GeolocationProps) {
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [locating, setLocating] = useState(false);
+  const [geoError, setGeoError] = useState<string | undefined>();
+
+  const makeHandlers = useCallback(
+    (currentValue: string, onValueChange: (value: string) => void) => {
+      const coordinates = currentValue ? parseGeoValue(currentValue) : { lat: 0, lng: 0 };
+      return {
+        coordinates,
+        onLatChange: (text: string) => {
+          const parsedNumber = Number.parseFloat(text);
+          if (Number.isNaN(parsedNumber) && text !== "" && text !== "-") return;
+          const lat = Number.isNaN(parsedNumber) ? 0 : clampLat(parsedNumber);
+          onValueChange(JSON.stringify({ lat, lng: coordinates.lng }));
+        },
+        onLngChange: (text: string) => {
+          const parsedNumber = Number.parseFloat(text);
+          if (Number.isNaN(parsedNumber) && text !== "" && text !== "-") return;
+          const lng = Number.isNaN(parsedNumber) ? 0 : clampLng(parsedNumber);
+          onValueChange(JSON.stringify({ lat: coordinates.lat, lng }));
+        },
+        onMapChange: (lat: number, lng: number) => {
+          onValueChange(JSON.stringify({ lat: clampLat(lat), lng: clampLng(lng) }));
+        },
+        onUseMyLocation: () => {
+          if (disabled || readOnly) return;
+          if (!navigator?.geolocation) {
+            setGeoError("Geolocation is not supported by this browser");
+            return;
+          }
+          setLocating(true);
+          setGeoError(undefined);
+          navigator.geolocation.getCurrentPosition(
+            (position) => {
+              const lat = clampLat(position.coords.latitude);
+              const lng = clampLng(position.coords.longitude);
+              onValueChange(JSON.stringify({ lat, lng }));
+              setLocating(false);
+            },
+            (err) => {
+              setGeoError(err.message || "Failed to get location");
+              setLocating(false);
+            },
+            { enableHighAccuracy: true, timeout: 10000 },
+          );
+        },
+      };
+    },
+    [disabled],
+  );
+
+  // Render skeleton placeholder
+  if (skeleton) {
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <XStack {...knobProps.gap} width="100%">
+          <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} flex={1} />
+          <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} flex={1} />
+          <Skeleton variant="rounded" width={80} height={knobProps.sizeToken} />
+        </XStack>
+      </FieldLayout>
+    );
+  }
+
+  const displayError = error || geoError;
+
+  if (!resolvedForm || !name) {
+    const handlers = makeHandlers(value || "", (v) => onChange?.(v));
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={displayError}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+      >
+        <GeoInputs
+          coordinates={handlers.coordinates}
+          onLatChange={handlers.onLatChange}
+          onLngChange={handlers.onLngChange}
+          onUseMyLocation={handlers.onUseMyLocation}
+          onMapChange={handlers.onMapChange}
+          disabled={!!disabled}
+          readOnly={!!readOnly}
+          locating={locating}
+          knobProps={knobProps}
+          locationIcon={locationIcon}
+          expandIcon={expandIcon}
+          renderMap={renderMap}
+          required={required}
+          hasError={!!displayError}
+        />
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, displayError);
+        const handlers = makeHandlers((field.state.value as string) || "", (v) => {
+          field.handleChange(v as any);
+          onChange?.(v);
+        });
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+          >
+            <GeoInputs
+              coordinates={handlers.coordinates}
+              onLatChange={handlers.onLatChange}
+              onLngChange={handlers.onLngChange}
+              onUseMyLocation={handlers.onUseMyLocation}
+              onMapChange={handlers.onMapChange}
+              disabled={!!disabled}
+              locating={locating}
+              knobProps={knobProps}
+              locationIcon={locationIcon}
+              expandIcon={expandIcon}
+              renderMap={renderMap}
+              required={required}
+              hasError={!!resolvedError}
+            />
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/ImageField/ImageField.spec.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
+import { ImageField } from "./index";
+
+describe("ImageField", () => {
+  describe("without form context", () => {
+    it("renders with label", () => {
+      const result = renderWithProviders(<ImageField label="Avatar" name="avatar" />);
+      expect(result.findTextElement("Avatar")).toBeDefined();
+    });
+
+    it("renders required label with asterisk", () => {
+      const result = renderWithProviders(<ImageField label="Required" name="req" required />);
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("renders with helper text", () => {
+      const result = renderWithProviders(
+        <ImageField label="Image" name="img" helperText="Upload an image" />,
+      );
+      expect(result.findTextElement("Upload an image")).toBeDefined();
+    });
+
+    it("renders skeleton placeholder", () => {
+      const result = renderWithProviders(<ImageField label="Loading" name="l" skeleton />);
+      expect(result.container.querySelector("input[type='file']")).toBeNull();
+    });
+
+    it("renders file input for upload", () => {
+      const result = renderWithProviders(<ImageField label="Upload" name="u" />);
+      const input = result.container.querySelector("input[type='file']");
+      expect(input).toBeTruthy();
+    });
+
+    it("renders with placeholder text", () => {
+      const result = renderWithProviders(
+        <ImageField label="Image" name="img" placeholder="Click to upload" />,
+      );
+      expect(result.findTextElement("Click to upload")).toBeDefined();
+    });
+
+    it("renders disabled state", () => {
+      const result = renderWithProviders(<ImageField label="Disabled" name="d" disabled />);
+      expect(result.findTextElement("Disabled")).toBeDefined();
+    });
+  });
+
+  describe("with form context", () => {
+    it("renders inside form", () => {
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { avatar: null } }} submitText="Submit">
+          <ImageField name="avatar" label="Avatar" />
+        </Form>,
+      );
+      expect(result.findTextElement("Avatar")).toBeDefined();
+    });
+  });
+});