@terreno/ui 0.0.1

package/src/Unifier.ts

@@ -0,0 +1,172 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as Clipboard from "expo-clipboard";
+import * as Haptics from "expo-haptics";
+import {Dimensions, Keyboard, Linking, Platform, Vibration} from "react-native";
+
+import type {PermissionKind} from "./Common";
+import {requestPermissions} from "./Permissions";
+
+declare global {
+  interface Window {
+    google: any;
+  }
+}
+
+export type PlatformOS = "ios" | "android" | "web";
+
+type Luminance = "light" | "lighter" | "dark" | "darker";
+
+// Changes a color luminance
+export function changeColorLuminance(hex: string, luminanceChange: Luminance) {
+  // Validate hex string, strip "#" if present.
+  hex = String(hex).replace(/[^0-9a-f]/gi, "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  } else if (hex.length !== 6) {
+    throw new Error(`Invalid color hex: ${hex}`);
+  }
+  let luminance;
+  switch (luminanceChange) {
+    case "light":
+      luminance = -0.2;
+      break;
+    case "lighter":
+      luminance = -0.33;
+      break;
+    case "dark":
+      luminance = 0.2;
+      break;
+    case "darker":
+      luminance = 0.33;
+      break;
+    default:
+      throw new Error(`Cannot change luminance to ${luminanceChange}`);
+  }
+
+  // Convert to decimal and change luminosity
+  let rgb = "#";
+  for (let i = 0; i < 3; i++) {
+    const decimal = parseInt(hex.substr(i * 2, 2), 16);
+    const appliedLuminance = Math.round(
+      Math.min(Math.max(0, decimal + decimal * luminance), 255)
+    ).toString(16);
+    // 0 pad, if necessary.
+    rgb += `00${appliedLuminance}`.substr(appliedLuminance.length);
+  }
+
+  return rgb;
+}
+
+class UnifierClass {
+  private _web = false;
+
+  private _dev = false;
+
+  get web(): boolean {
+    return this._web;
+  }
+
+  get dev(): boolean {
+    return this._dev;
+  }
+
+  navigation = {
+    dismissOverlay: () => {
+      console.warn("Dismiss overlay not supported.");
+    },
+  };
+
+  // tracking: Tracking,
+  utils = {
+    copyToClipboard: (text: string) => {
+      Clipboard.setString(text);
+    },
+    dimensions: () => ({
+      height: Dimensions.get("window").height,
+      width: Dimensions.get("window").width,
+    }),
+    dismissKeyboard: () => {
+      Keyboard.dismiss();
+    },
+    haptic: () => {
+      if (Platform.OS !== "web") {
+        return Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      }
+      return;
+    },
+    makePurchase: () => {
+      console.warn("Make purchase not supported yet.");
+    },
+    openUrl: async (url: string) => {
+      return Linking.openURL(url);
+    },
+    orientationChange: (callback: (orientation: "portrait" | "landscape") => void) => {
+      Dimensions.addEventListener("change", () => {
+        const screen = Dimensions.get("screen");
+        const isPortrait = screen.width < screen.height;
+        callback(isPortrait ? "portrait" : "landscape");
+      });
+    },
+    PaymentService: () => {
+      console.warn("Make purchase not supported yet.");
+    },
+    requestPermissions: async (_perm: PermissionKind) => {
+      return requestPermissions(_perm);
+      // return requestPermissions(perm);
+    },
+    vibrate: (pattern?: number[]) => {
+      Vibration.vibrate(pattern || [100], false);
+    },
+    // keepAwake: (activate: boolean) => {
+    //   if (activate) {
+    //     activateKeepAwake();
+    //   } else {
+    //     deactivateKeepAwake();
+    //   }
+    // },
+  };
+
+  storage = {
+    getItem: async (key: string, defaultValue?: any) => {
+      try {
+        const jsonValue = await AsyncStorage.getItem(key);
+        if (jsonValue) {
+          const value = JSON.parse(jsonValue);
+          if (value === null || value === undefined) {
+            return defaultValue;
+          } else {
+            return value;
+          }
+        } else if (defaultValue !== undefined) {
+          return defaultValue;
+        } else {
+          return null;
+        }
+      } catch (error) {
+        console.error(`[storage] Error reading ${key}`, error);
+        return defaultValue || null;
+      }
+    },
+    setItem: async (key: string, item: any) => {
+      try {
+        const jsonValue = JSON.stringify(item);
+        await AsyncStorage.setItem(key, jsonValue);
+      } catch (error: any) {
+        console.error(`[storage] Error storing ${key}`, item, error);
+        throw new Error(error);
+      }
+    },
+  };
+
+  tracking = {
+    log: (message: string) => {
+      console.info(message);
+    },
+  };
+
+  initIcons = () => {
+    console.debug("[unifier] Initializing icons");
+  };
+}
+
+export const Unifier = new UnifierClass();

package/src/Utilities.tsx

@@ -0,0 +1,329 @@
+// Originally based on https://github.com/pinterest/gestalt
+// Forked, updated to Typescript, and added features.
+import get from "lodash/get";
+import {Platform} from "react-native";
+
+import type {APIError, BaseProfile, IconSize} from "./Common";
+import {COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES} from "./Constants";
+
+export function mergeInlineStyles(inlineStyle?: any, newStyle?: any) {
+  const inline = get(inlineStyle, "__style");
+  return {
+    __style: {
+      ...inline,
+      ...newStyle,
+    },
+  };
+}
+
+export function isTestUser(profile?: BaseProfile) {
+  return (
+    profile?.email &&
+    (profile.email.indexOf("nang.io") > -1 || profile.email.indexOf("example.com") > -1)
+  );
+}
+
+export const iconNumberToSize = (size = 16): IconSize => {
+  let iconSize: IconSize;
+  if (size < 8) {
+    iconSize = "xs";
+  } else if (size < 12) {
+    iconSize = "sm";
+  } else if (size < 14) {
+    iconSize = "md";
+  } else if (size < 20) {
+    iconSize = "lg";
+  } else {
+    iconSize = "xl";
+  }
+  return iconSize;
+};
+
+/*
+
+Style is a monoid that capture the "to-be-applied" styles (inline and classes)
+for a Box. It's basically set that is closed under an associative binary
+operation and has an identity element such that for all HA HA HA. Yes, it's a
+monoid, which sounds scary but it's not really and actually super useful. All
+that means is that basically you can do two things with it:
+
+    1. concat(concat(a, b), c) === concat(a, concat(b, c));
+    2. concat(identity(), a) === concat(a, identity()) === a;
+
+What that means is that it's really easy to compose styles together and the
+order in which you do so doesn't really matter.
+
+*/
+
+interface InlineStyle {
+  [key: string]: string | number | undefined;
+}
+
+// TODO: This type should be opaque, however the Babel parser doesn't support
+//       the opaque syntax yet.
+export interface Style {
+  className: Set<string>;
+  inlineStyle: InlineStyle;
+}
+
+export const identity = (): Style => ({
+  className: new Set(),
+  inlineStyle: {},
+});
+
+export const fromClassName = (...classNames: string[]): Style => ({
+  className: new Set(classNames),
+  inlineStyle: {},
+});
+
+export const fromInlineStyle = (inlineStyle: InlineStyle): Style => ({
+  className: new Set(),
+  inlineStyle,
+});
+
+export const concat = (styles: Style[]): Style =>
+  styles.reduce(
+    (
+      {className: classNameA, inlineStyle: inlineStyleA},
+      {className: classNameB, inlineStyle: inlineStyleB}
+    ) => ({
+      className: new Set([...classNameA, ...classNameB]),
+      inlineStyle: {...inlineStyleA, ...inlineStyleB},
+    }),
+    identity()
+  );
+
+export const mapClassName =
+  (fn: (x: string) => string) =>
+  ({className, inlineStyle}: Style): Style => ({
+    className: new Set(Array.from(className).map(fn)),
+    inlineStyle,
+  });
+
+export const toProps = ({
+  className,
+  inlineStyle,
+}: Style): {className: string; style: InlineStyle} => {
+  const props: any = {};
+
+  if (className.size > 0) {
+    // Sorting here ensures that classNames are always stable, reducing diff
+    // churn. Box usually has a small number of properties so it's not a perf
+    // concern.
+    props.className = Array.from(className).sort().join(" ");
+  }
+
+  if (Object.keys(inlineStyle).length > 0) {
+    props.style = inlineStyle;
+  }
+
+  return props;
+};
+
+/*
+
+Transforms
+
+  These are a collection of a few functors that take values and returns Style's. OMG,
+  I used the word functor - it's really just a fancy word for function.
+
+*/
+type Functor<T> = (n: T) => Style;
+
+// Adds a classname when a property is present.
+//
+//     <Box top />
+//
+export const toggle =
+  (...classNames: string[]) =>
+  (val?: boolean) =>
+    val ? fromClassName(...classNames) : identity();
+
+// Maps string values to classes
+//
+//     <Box alignItems="center" />
+//
+export const mapping = (map: {[key: string]: string}) => (val: string) =>
+  Object.hasOwn(map, val) ? fromClassName(map[val]) : identity();
+
+// Maps a range of integers to a range of classnames
+//
+//     <Box padding={1} />
+//
+export const range =
+  (scale: string) =>
+  (n: number): Style =>
+    fromClassName(`${scale}${n < 0 ? `N${Math.abs(n)}` : n}`);
+
+// Like `range`, maps a range of integers to a range of classnames, excluding
+// zero values.
+//
+//     <Box padding={0} />
+export const rangeWithoutZero =
+  (scale: string) =>
+  (n: number): Style =>
+    n === 0 ? identity() : range(scale)(n);
+
+// Binds a string classname to the value in an object. Useful when interacting
+// with ranges that need to come dynamically from a style object. This is
+// similar to the NPM package 'classnames/bind'.
+export function bind<T>(
+  fn: Functor<T>,
+  scope:
+    | {
+        readonly [key: string]: string;
+      }
+    | any
+): (val: T) => Style {
+  const map = mapClassName((name) => scope[name]);
+  return (val: T): Style => map(fn(val));
+}
+
+// This takes a series of the previously defined functors, runs them all
+// against a value and returns the set of their classnames.
+export const union =
+  <T,>(...fns: Functor<T>[]) =>
+  (val: T) =>
+    concat(fns.map((fn) => fn(val)));
+
+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,
+        countyCode: "",
+        countyName: "",
+      };
+    } 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,
+        countyCode,
+        countyName,
+      };
+    } 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() as keyof typeof COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES;
+
+  const stateData = COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES[stateKey];
+
+  // Remove whitespace, periods, apostrophes, and dashes for comparison
+  const countyKey = countyName
+    .trim()
+    .toLowerCase()
+    .replace(/[\s.'-]/g, "") as keyof typeof stateData;
+
+  const countyData: {
+    stateFP: string;
+    countyFP: string;
+  } = stateData?.[countyKey];
+  if (!countyData) {
+    return "";
+  }
+
+  return `${countyData.stateFP}${countyData.countyFP}`;
+}
+
+export function isAPIError(error: any): error is APIError {
+  return error?.data?.title;
+}
+
+export function printAPIError(error: APIError, details = true): string {
+  let message = error.data?.title;
+  if (error.data?.detail && details) {
+    message = `${message}: ${error.data?.detail}`;
+  }
+  return message;
+}

package/src/WebAddressAutocomplete.tsx

@@ -0,0 +1,84 @@
+import {type ReactElement, useEffect, useRef, useState} from "react";
+
+import type {AddressAutocompleteProps} 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?.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);
+    return;
+  });
+};
+
+export const WebAddressAutocomplete = ({
+  disabled,
+  googleMapsApiKey,
+  includeCounty,
+  inputValue,
+  handleAddressChange,
+  handleAutoCompleteChange,
+}: AddressAutocompleteProps): ReactElement => {
+  const [scriptLoaded, setScriptLoaded] = useState(true);
+  const autocompleteInputRef = useRef(null);
+
+  // Load the Google Maps script and initialize the autocomplete.
+  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}
+      onChange={(value): void => {
+        handleAddressChange(value);
+      }}
+      placeholder="Enter an address"
+      type="text"
+      value={inputValue}
+    />
+  );
+};

package/src/__snapshots__/Accordion.test.tsx.snap

@@ -0,0 +1,126 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`Accordion renders correctly with default props 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": [
+                {
+                  "$$typeof": Symbol(react.test.json),
+                  "children": [
+                    "Test Title",
+                  ],
+                  "props": {
+                    "numberOfLines": 0,
+                    "style": {
+                      "color": "#1C1C1C",
+                      "fontFamily": "heading-bold",
+                      "fontSize": 16,
+                    },
+                    "testID": undefined,
+                  },
+                  "type": "Text",
+                },
+              ],
+              "props": {
+                "style": {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                },
+                "testID": undefined,
+              },
+              "type": "View",
+            },
+          ],
+          "props": {
+            "style": {
+              "flexDirection": "column",
+              "gap": 4,
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": null,
+              "props": {
+                "aria-role": "button",
+                "hitSlop": {
+                  "bottom": 20,
+                  "left": 20,
+                  "right": 20,
+                  "top": 20,
+                },
+                "onPress": [Function],
+                "testID": "accordion-toggle",
+              },
+              "type": "Pressable",
+            },
+          ],
+          "props": {
+            "style": undefined,
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+      ],
+      "props": {
+        "style": {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            "Test Content",
+          ],
+          "props": {
+            "style": undefined,
+            "testID": "test-content",
+          },
+          "type": "Text",
+        },
+      ],
+      "props": {
+        "style": {
+          "marginTop": 8,
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "style": {
+      "borderBottomColor": "#CDCDCD",
+      "borderBottomWidth": 2,
+      "borderTopColor": "#CDCDCD",
+      "borderTopWidth": 2,
+      "padding": 16,
+      "width": "100%",
+    },
+    "testID": undefined,
+  },
+  "type": "View",
+}
+`;