ferns-ui 0.37.7 → 0.37.9

package/src/Field.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import {Styles} from "react-native-google-places-autocomplete";
 
 import {Box} from "./Box";
 import {CheckBox} from "./CheckBox";
@@ -11,6 +12,7 @@ import {Switch} from "./Switch";
 import {Text} from "./Text";
 import {TextArea} from "./TextArea";
 import {TextField} from "./TextField";
+import {UnifiedAddressAutoCompleteField} from "./UnifiedAddressAutoComplete";
 
 export interface FieldProps extends FieldWithLabelsProps {
   name?: string;
@@ -41,6 +43,9 @@ export interface FieldProps extends FieldWithLabelsProps {
   placeholder?: string;
   disabled?: boolean;
   useCheckbox?: boolean;
+  includeCounty?: boolean;
+  googleMapsApiKey?: string;
+  googlePlacesMobileStyles?: Styles;
 }
 
 export const Field = ({
@@ -59,11 +64,18 @@ export const Field = ({
   errorMessageColor,
   helperText,
   helperTextColor,
+  includeCounty = false,
+  googleMapsApiKey,
+  googlePlacesMobileStyles,
 }: FieldProps) => {
   const handleAddressChange = (field: string, newValue: string) => {
     onChange({...value, [field]: newValue});
   };
 
+  const handleAutoCompleteChange = (newValue: AddressInterface) => {
+    onChange({...value, ...newValue});
+  };
+
   const handleSwitchChange = (switchValue: boolean) => {
     onChange(switchValue);
   };
@@ -169,16 +181,19 @@ export const Field = ({
         city = "",
         state = "",
         zipcode = "",
+        countyName = "",
+        countyCode = "",
       }: AddressInterface = addressValue;
       return (
         <>
-          <TextField
+          <UnifiedAddressAutoCompleteField
             disabled={disabled}
-            id="address1"
-            label="Street Address"
-            type="text"
-            value={address1}
-            onChange={(result) => handleAddressChange("address1", result.value)}
+            googleMapsApiKey={googleMapsApiKey}
+            googlePlacesMobileStyles={googlePlacesMobileStyles}
+            handleAddressChange={(result) => handleAddressChange("address1", result.value)}
+            handleAutoCompleteChange={(result) => handleAutoCompleteChange(result)}
+            includeCounty={includeCounty}
+            inputValue={address1}
           />
           <TextField
             disabled={disabled}
@@ -214,6 +229,26 @@ export const Field = ({
             value={zipcode}
             onChange={(result) => handleAddressChange("zipcode", result.value)}
           />
+          {includeCounty && (
+            <>
+              <TextField
+                disabled={disabled}
+                id="countyName"
+                label="County Name"
+                type="text"
+                value={countyName}
+                onChange={(result) => handleAddressChange("countyName", result.value)}
+              />
+              <TextField
+                disabled={disabled}
+                id="countyCode"
+                label="County Code"
+                type="number"
+                value={countyCode}
+                onChange={(result) => handleAddressChange("countyCode", result.value)}
+              />
+            </>
+          )}
         </>
       );
     } else if (type === "customSelect") {

package/src/MobileAddressAutoComplete.tsx

@@ -0,0 +1,129 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {TextStyle, TouchableOpacity, View} from "react-native";
+import {
+  GooglePlacesAutocomplete,
+  GooglePlacesAutocompleteRef,
+  Styles,
+} from "react-native-google-places-autocomplete";
+
+import {AddressInterface, OnChangeCallback} from "./Common";
+import {GOOGLE_PLACES_API_RESTRICTIONS} from "./Constants";
+import {TextField} from "./TextField";
+import {ThemeContext} from "./Theme";
+import {processAddressComponents} from "./Utilities";
+
+export const MobileAddressAutocomplete = ({
+  disabled,
+  googleMapsApiKey,
+  includeCounty,
+  inputValue,
+  // More on react-native-google-places-autocomplete styles here: https://github.com/FaridSafi/react-native-google-places-autocomplete#styling
+  styles,
+  handleAddressChange,
+  handleAutoCompleteChange,
+}: {
+  disabled?: boolean;
+  googleMapsApiKey?: string;
+  includeCounty?: boolean;
+  inputValue: string;
+  styles?: Styles;
+  handleAddressChange: OnChangeCallback;
+  handleAutoCompleteChange: (value: AddressInterface) => void;
+}) => {
+  const {theme} = useContext(ThemeContext);
+  const ref = useRef<GooglePlacesAutocompleteRef | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    if (!googleMapsApiKey) return;
+    if (ref?.current) {
+      ref.current.setAddressText(inputValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const textInputContainerStyles = {
+    backgroundColor: theme.white,
+    borderColor: isFocused ? theme.blue : theme.gray,
+    borderWidth: isFocused ? 5 : 1,
+    borderRadius: 16,
+    paddingHorizontal: isFocused ? 10 : 14,
+    paddingVertical: isFocused ? 0 : 4,
+    ...(styles?.textInputContainer as object),
+  };
+
+  const textInputStyles = {
+    backgroundColor: theme.white,
+    borderRadius: 16,
+    color: theme.darkGray,
+    fontFamily: theme.primaryFont,
+    fontSize: (styles?.textInput as TextStyle)?.fontSize ?? 14,
+    height: 40,
+    marginBottom: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 4,
+    ...(styles?.textInput as object),
+  };
+
+  if (!googleMapsApiKey) {
+    return (
+      <TextField
+        disabled={disabled}
+        id="address1"
+        label="Street Address"
+        type="text"
+        value={inputValue}
+        onChange={(result) => handleAddressChange(result)}
+      />
+    );
+  }
+
+  return (
+    <TouchableOpacity activeOpacity={1} style={{flex: 1}} onPress={() => setIsFocused(false)}>
+      <View>
+        <GooglePlacesAutocomplete
+          ref={ref}
+          GooglePlacesDetailsQuery={{
+            fields: Object.values(GOOGLE_PLACES_API_RESTRICTIONS.fields).join(","),
+          }}
+          disableScroll
+          fetchDetails
+          placeholder="Street Address"
+          query={{
+            key: googleMapsApiKey,
+            language: "en",
+            components: `country:${GOOGLE_PLACES_API_RESTRICTIONS.components.country}`,
+          }}
+          styles={{
+            textInputContainer: {
+              ...textInputContainerStyles,
+            },
+            textInput: {
+              ...textInputStyles,
+            },
+            ...styles,
+          }}
+          textInputProps={{
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            onChange: (event) => {
+              handleAddressChange({value: event.nativeEvent.text});
+            },
+          }}
+          onPress={(data, details = null) => {
+            const addressComponents = details?.address_components;
+            const formattedAddressObject = processAddressComponents(addressComponents, {
+              includeCounty,
+            });
+            const {address1} = formattedAddressObject;
+            handleAutoCompleteChange(formattedAddressObject);
+            if (ref.current) {
+              ref.current.setAddressText(address1);
+            }
+            setIsFocused(false);
+          }}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};

package/src/TapToEdit.tsx

@@ -21,19 +21,28 @@ export function formatAddress(address: any, asString = false): string {
 
   const zip = address?.zipcode || "";
 
+  const countyName = address?.countyName ?? "";
+
+  const countyCode = address?.countyCode ?? "";
+
   const addressLineOne = address?.address1 ?? "";
   const addressLineTwo = address?.address2 ?? "";
   const addressLineThree = `${city}${state}${zip}`;
+  const addressLineFour = `${countyName}${address?.countyCode ? ` [${countyCode}]` : ""}`;
 
   if (!asString) {
     // Only add new lines if lines before and after are not empty to avoid awkward whitespace
     return `${addressLineOne}${
       addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
-    }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
+    }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}${
+      addressLineThree && addressLineFour ? `\n` : ""
+    }${addressLineFour}`;
   } else {
     return `${addressLineOne}${
       addressLineOne && (addressLineTwo || addressLineThree) ? `, ` : ""
-    }${addressLineTwo}${addressLineTwo && addressLineThree ? `, ` : ""}${addressLineThree}`;
+    }${addressLineTwo}${addressLineTwo && addressLineThree ? `, ` : ""}${addressLineThree}${
+      addressLineThree && addressLineFour ? `, ` : ""
+    }${addressLineFour}`;
   }
 }
 

package/src/UnifiedAddressAutoComplete.tsx

@@ -0,0 +1,71 @@
+import React, {useMemo} from "react";
+import {Styles} from "react-native-google-places-autocomplete";
+
+import {AddressInterface, OnChangeCallback} from "./Common";
+import {isMobileDevice} from "./MediaQuery";
+import {MobileAddressAutocomplete} from "./MobileAddressAutoComplete";
+import {TextField} from "./TextField";
+import {isNative, isValidGoogleApiKey} from "./Utilities";
+import {WebAddressAutocomplete} from "./WebAddressAutocomplete";
+
+export const UnifiedAddressAutoCompleteField = ({
+  disabled,
+  googleMapsApiKey,
+  googlePlacesMobileStyles,
+  includeCounty,
+  inputValue,
+  handleAddressChange,
+  handleAutoCompleteChange,
+}: {
+  disabled?: boolean;
+  googleMapsApiKey?: string;
+  googlePlacesMobileStyles?: Styles;
+  includeCounty?: boolean;
+  inputValue: string;
+  handleAddressChange: OnChangeCallback;
+  handleAutoCompleteChange: (value: AddressInterface) => void;
+}) => {
+  const isWeb = typeof document !== "undefined";
+  const isValidatedGoogleApiKey = useMemo(
+    () => (googleMapsApiKey ? isValidGoogleApiKey(googleMapsApiKey) : false),
+    [googleMapsApiKey]
+  );
+
+  if (isWeb && isValidatedGoogleApiKey) {
+    return (
+      <WebAddressAutocomplete
+        disabled={disabled}
+        googleMapsApiKey={googleMapsApiKey}
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={handleAutoCompleteChange}
+        includeCounty={includeCounty}
+        inputValue={inputValue}
+      />
+    );
+  } else if (isMobileDevice() && isNative() && isValidatedGoogleApiKey) {
+    return (
+      <MobileAddressAutocomplete
+        disabled={disabled}
+        googleMapsApiKey={googleMapsApiKey}
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={handleAutoCompleteChange}
+        includeCounty={includeCounty}
+        inputValue={inputValue}
+        styles={googlePlacesMobileStyles}
+      />
+    );
+  } else {
+    return (
+      <TextField
+        disabled={disabled}
+        label="Street Address"
+        placeholder="Enter an address"
+        type="text"
+        value={inputValue}
+        onChange={({value}): void => {
+          handleAddressChange({value});
+        }}
+      />
+    );
+  }
+};

package/src/Unifier.ts

@@ -9,6 +9,12 @@ import {Dimensions, Keyboard, Linking, Platform, Vibration} from "react-native";
 import {PermissionKind, UnifiedTheme} from "./Common";
 import {requestPermissions} from "./Permissions";
 
+declare global {
+  interface Window {
+    google: any;
+  }
+}
+
 export type PlatformOS = "ios" | "android" | "web";
 
 type Luminance = "light" | "lighter" | "dark" | "darker";

package/src/Utilities.tsx

@@ -3,6 +3,8 @@
 import get from "lodash/get";
 import {Platform} from "react-native";
 
+import {COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES} from "./Constants";
+
 export function mergeInlineStyles(inlineStyle?: any, newStyle?: any) {
   const inline = get(inlineStyle, "__style");
   return {
@@ -162,3 +164,121 @@ export const union =
 export const isNative = (): boolean => {
   return ["android", "ios"].includes(Platform.OS);
 };
+
+// Find more information about the address component types here: https://developers.google.com/maps/documentation/javascript/place-autocomplete
+export type AddressComponentType = {
+  long_name: string;
+  short_name: string;
+  types: string[];
+};
+
+export const findAddressComponent = (components: AddressComponentType[], type: string): string => {
+  return (
+    components.find((component: AddressComponentType) => component.types.includes(type))
+      ?.long_name ?? ""
+  );
+};
+
+interface ProcessAddressComponentOptions {
+  includeCounty?: boolean;
+}
+
+export const processAddressComponents = (
+  addressComponents: AddressComponentType[] | undefined,
+  options?: ProcessAddressComponentOptions
+) => {
+  let processedAddressComponents: {
+    address1: string;
+    city: string;
+    state: string;
+    zipcode: string;
+    countyName?: string;
+    countyCode?: string;
+  } = {
+    address1: "",
+    city: "",
+    state: "",
+    zipcode: "",
+  };
+
+  if (!addressComponents || addressComponents.length === 0) {
+    console.warn("Invalid address components");
+    if (options?.includeCounty) {
+      return {
+        ...processedAddressComponents,
+        countyName: "",
+        countyCode: "",
+      };
+    } else {
+      return processedAddressComponents;
+    }
+  }
+
+  const streetNumber = findAddressComponent(addressComponents, "street_number");
+  const streetName = findAddressComponent(addressComponents, "route");
+  const city = findAddressComponent(addressComponents, "locality");
+  const state = findAddressComponent(addressComponents, "administrative_area_level_1");
+  const zipcode = findAddressComponent(addressComponents, "postal_code");
+
+  processedAddressComponents = {
+    address1: `${streetNumber} ${streetName}`.trim(),
+    city,
+    state,
+    zipcode,
+  };
+
+  if (options?.includeCounty) {
+    const countyName = findAddressComponent(addressComponents, "administrative_area_level_2");
+    if (state && countyName) {
+      const countyCode = formattedCountyCode(state, countyName);
+      processedAddressComponents = {
+        ...processedAddressComponents,
+        countyName,
+        countyCode,
+      };
+    } else {
+      processedAddressComponents = {
+        ...processedAddressComponents,
+        countyName,
+      };
+    }
+  }
+  return processedAddressComponents;
+};
+
+// Google does not provide a way to validate API keys, so we have to do it ourselves
+export const isValidGoogleApiKey = (apiKey: string): boolean => {
+  if (typeof apiKey !== "string" || apiKey.trim().length === 0) {
+    console.warn("Google API key validation failed: key is not a string or is empty");
+    return false;
+  }
+  // Typical Google API keys are around 39 characters
+  if (apiKey.length < 30 || apiKey.length > 50) {
+    console.warn("Google API key validation failed: key is invalid length");
+    return false;
+  }
+  // Check the presence of alphanumeric characters and dashes
+  const apiKeyRegex = /^[A-Za-z0-9-_]+$/;
+  if (!apiKeyRegex.test(apiKey)) {
+    console.warn("Google API key validation failed: key contains invalid characters");
+    return false;
+  }
+  return true;
+};
+
+export function formattedCountyCode(state: string, countyName: string): string {
+  // Remove whitespace and convert to lowercase for comparison
+  const stateKey = state.replace(/\s+/g, "").toLowerCase();
+  // Remove whitespace, periods, apostrophes, and dashes for comparison
+  const countyKey = countyName
+    .trim()
+    .toLowerCase()
+    .replace(/[\s.'-]/g, "");
+
+  const countyData = COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES[stateKey]?.[countyKey];
+  if (!countyData) {
+    return "";
+  }
+
+  return `${countyData.stateFP}${countyData.countyFP}`;
+}

package/src/WebAddressAutocomplete.tsx

@@ -0,0 +1,90 @@
+import React, {ReactElement, useEffect, useRef, useState} from "react";
+
+import {AddressInterface, OnChangeCallback} from "./Common";
+import {GOOGLE_PLACES_API_RESTRICTIONS} from "./Constants";
+import {TextField} from "./TextField";
+import {processAddressComponents} from "./Utilities";
+
+const loadGooglePlacesScript = (googleMapsApiKey: string, callbackName: any): Promise<void> => {
+  return new Promise<void>((resolve, reject): undefined => {
+    if (window.google && window.google.maps && window.google.maps.places) {
+      resolve();
+      return;
+    }
+    (window as any)[callbackName] = (): void => resolve();
+    const script: HTMLScriptElement = document.createElement("script");
+
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}&libraries=places&callback=${callbackName}`;
+    script.async = true;
+    script.defer = true;
+    script.onerror = (): any => reject(new Error("Google Maps script failed to load"));
+    document.head.appendChild(script);
+  });
+};
+
+export const WebAddressAutocomplete = ({
+  disabled,
+  googleMapsApiKey,
+  includeCounty,
+  inputValue,
+  handleAddressChange,
+  handleAutoCompleteChange,
+}: {
+  disabled?: boolean;
+  googleMapsApiKey?: string;
+  includeCounty?: boolean;
+  inputValue: string;
+  handleAddressChange: OnChangeCallback;
+  handleAutoCompleteChange: (value: AddressInterface) => void;
+}): ReactElement => {
+  const [scriptLoaded, setScriptLoaded] = useState(true);
+  const autocompleteInputRef = useRef(null);
+
+  useEffect(() => {
+    const callbackName = "initAutocomplete";
+    if (!googleMapsApiKey) {
+      setScriptLoaded(false);
+      return;
+    }
+    loadGooglePlacesScript(googleMapsApiKey, callbackName)
+      .then(() => {
+        const autocomplete = new window.google.maps.places.Autocomplete(
+          autocompleteInputRef.current,
+          {
+            componentRestrictions: {country: GOOGLE_PLACES_API_RESTRICTIONS.components.country},
+            fields: Object.values(GOOGLE_PLACES_API_RESTRICTIONS.fields),
+          }
+        );
+        autocomplete.addListener("place_changed", () => {
+          const place = autocomplete.getPlace();
+          const addressComponents = place?.address_components;
+          const formattedAddressObject = processAddressComponents(addressComponents, {
+            includeCounty,
+          });
+          handleAutoCompleteChange(formattedAddressObject);
+        });
+      })
+      .catch((error) => {
+        console.warn(error);
+        setScriptLoaded(false);
+      });
+    // Cleanup
+    return () => {
+      (window as any)[callbackName] = null;
+    };
+  }, [googleMapsApiKey, includeCounty, handleAutoCompleteChange]);
+
+  return (
+    <TextField
+      disabled={disabled}
+      inputRef={scriptLoaded ? (ref: any): void => (autocompleteInputRef.current = ref) : undefined}
+      label="Street Address"
+      placeholder="Enter an address"
+      type="text"
+      value={inputValue}
+      onChange={({value}): void => {
+        handleAddressChange({value});
+      }}
+    />
+  );
+};

package/src/index.tsx

@@ -30,6 +30,7 @@ export * from "./InfoTooltipButton";
 export * from "./Link";
 export * from "./Mask";
 export * from "./Meta";
+export * from "./MobileAddressAutoComplete";
 export * from "./Modal";
 
 export * from "./Page";
@@ -48,6 +49,7 @@ export * from "./Tooltip";
 export * from "./Toast";
 export * from "./UnifiedScreens";
 export * from "./Unifier";
+export * from "./UnifiedAddressAutoComplete";
 export * from "./WithLabel";
 export * from "./DecimalRangeActionSheet";
 export * from "./HeightActionSheet";
@@ -63,6 +65,7 @@ export * from "./TableHeaderCell";
 export * from "./TableRow";
 export * from "./Theme";
 export * from "./useStoredState";
+export * from "./WebAddressAutocomplete";
 
 // Lifted from react-native
 type ImageRequireSource = number;

package/src/useStoredState.ts

@@ -5,8 +5,8 @@ import {Unifier} from "./Unifier";
 export const useStoredState = <T>(
   key: string,
   initialValue?: T
-): [T | undefined | null, (value: T | undefined | null) => Promise<void>] => {
-  const [state, setState] = useState<T | undefined | null>(initialValue);
+): [T | undefined, (value: T | undefined) => Promise<void>] => {
+  const [state, setState] = useState<T | undefined>(initialValue);
 
   // Function to fetch data from AsyncStorage
   const fetchData = useCallback(async (): Promise<T | undefined> => {
@@ -26,7 +26,7 @@ export const useStoredState = <T>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const setAsyncStorageState = async (newValue: T | undefined | null): Promise<void> => {
+  const setAsyncStorageState = async (newValue: T | undefined): Promise<void> => {
     try {
       await Unifier.storage.setItem(key, newValue);
       setState(newValue);