@terreno/ui 0.0.1

package/src/Toast.tsx

@@ -0,0 +1,234 @@
+import type React from "react";
+import {Platform, Pressable, View} from "react-native";
+import {useToast as useRNToast} from "react-native-toast-notifications";
+
+import type {IconName, SurfaceColor, TextColor, ToastProps} from "./Common";
+import {Heading} from "./Heading";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+import {isAPIError, printAPIError} from "./Utilities";
+
+const TOAST_DURATION_MS = 3 * 1000;
+
+type UseToastVariantOptions = {
+  persistent?: ToastProps["persistent"];
+  secondary?: ToastProps["secondary"];
+  size?: ToastProps["size"];
+  onDismiss?: ToastProps["onDismiss"];
+  subtitle?: ToastProps["subtitle"];
+};
+
+type UseToastOptions = {variant?: ToastProps["variant"]} & UseToastVariantOptions;
+
+export function useToast(): {
+  hide: (id: string) => void;
+  success: (title: string, options?: UseToastVariantOptions) => string;
+  info: (title: string, options?: UseToastVariantOptions) => string;
+  warn: (title: string, options?: UseToastVariantOptions) => string;
+  error: (title: string, options?: UseToastVariantOptions) => string;
+  show: (title: string, options?: UseToastOptions) => string;
+  catch: (error: any, message?: string, options?: UseToastVariantOptions) => void;
+} {
+  const toast = useRNToast();
+  const show = (title: string, options?: UseToastOptions): string => {
+    const toastData = {
+      variant: "info",
+      ...options,
+      title,
+    };
+    return toast.show(title, {
+      data: toastData,
+      // a duration of 0 keeps the toast up infinitely until hidden
+      duration: options?.persistent ? 0 : TOAST_DURATION_MS,
+    });
+  };
+  return {
+    catch: (error: any, message?: string, options?: UseToastVariantOptions): void => {
+      let exceptionMsg;
+      if (isAPIError(error)) {
+        // Get the error without details.
+        exceptionMsg = `${message}: ${printAPIError(error)}`;
+        console.error(exceptionMsg);
+      } else {
+        exceptionMsg = error?.message ?? error?.error ?? String(error);
+        console.error(`${message}: ${exceptionMsg}`);
+      }
+      show(exceptionMsg, {...options, variant: "error"});
+    },
+    error: (title: string, options?: UseToastVariantOptions): string => {
+      console.error(title);
+      return show(title, {...options, variant: "error"});
+    },
+    hide: (id: string) => toast.hide(id),
+    info: (title: string, options?: UseToastVariantOptions): string => {
+      console.info(title);
+      return show(title, {...options, variant: "info"});
+    },
+    show,
+    success: (title: string, options?: UseToastVariantOptions): string => {
+      console.info(title);
+      return show(title, {...options, variant: "success"});
+    },
+    warn: (title: string, options?: UseToastVariantOptions): string => {
+      console.warn(title);
+      return show(title, {...options, variant: "warning"});
+    },
+  };
+}
+
+// TODO: Support secondary version of Toast.
+// TODO: Support dismissible version of Toast. Currently only persistent are dismissible.
+// This may require a different library from react-native-toast-notifications.
+export const Toast = ({
+  title,
+  variant = "info",
+  secondary,
+  size = "sm",
+  onDismiss,
+  persistent,
+  // TODO enforce these should only show if size is "lg" with type discrinimation
+  subtitle,
+}: ToastProps): React.ReactElement => {
+  const {theme} = useTheme();
+  let color: SurfaceColor;
+  let textColor: TextColor;
+  let iconName: IconName;
+
+  if (secondary) {
+    throw new Error("Secondary not supported yet");
+  }
+
+  if (persistent && !onDismiss) {
+    console.warn("Toast is persistent but no onDismiss callback provided");
+  }
+
+  if (variant === "warning") {
+    color = "warning";
+    textColor = "inverted";
+    iconName = "triangle-exclamation";
+  } else if (variant === "error") {
+    color = "error";
+    textColor = "inverted";
+    iconName = "circle-exclamation";
+  } else if (variant === "success") {
+    color = "success";
+    textColor = "inverted";
+    iconName = "circle-check";
+  } else {
+    color = "neutralDark";
+    textColor = "inverted";
+    iconName = "circle-info";
+  }
+
+  return (
+    <View
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        flexGrow: 1,
+        justifyContent: "center",
+        marginTop: theme.spacing.sm,
+        maxWidth: Platform.OS === "web" ? 900 : "100%",
+        paddingLeft: Platform.OS === "web" ? "10%" : theme.spacing.sm,
+        paddingRight: Platform.OS === "web" ? "10%" : theme.spacing.sm,
+        width: "100%",
+      }}
+    >
+      <View
+        style={{
+          alignItems: "center",
+          alignSelf: "flex-start",
+          backgroundColor: theme.surface[color],
+          borderRadius: theme.radius.default,
+          display: "flex",
+          flexDirection: "row",
+          flexShrink: 1,
+          gap: 10,
+          maxWidth: "100%", // Ensure the content does not overflow
+          minHeight: size === "lg" ? 32 : undefined,
+          minWidth: 150,
+          paddingBottom: theme.spacing.xs,
+          paddingRight: theme.spacing.sm,
+          paddingTop: theme.spacing.xs,
+        }}
+      >
+        <View
+          style={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "row",
+            flexGrow: 1,
+            flexShrink: 1, // Ensure the content can shrink properly
+            gap: 12,
+            maxWidth: "100%",
+            paddingLeft: 8,
+            paddingRight: 8,
+          }}
+        >
+          <View
+            style={{
+              alignItems: size === "lg" ? "center" : undefined,
+              alignSelf: size === "lg" ? "stretch" : undefined,
+              borderBottomLeftRadius: theme.radius.default,
+              borderTopLeftRadius: theme.radius.default,
+              display: "flex",
+              flexDirection: "row",
+              paddingBottom: size === "lg" ? 8 : 0,
+              paddingLeft: size === "lg" ? 4 : 0,
+              paddingRight: size === "lg" ? 4 : 0,
+              paddingTop: size === "lg" ? 8 : 0,
+            }}
+          >
+            <Icon color={textColor} iconName={iconName} size={size === "lg" ? "2xl" : "md"} />
+          </View>
+          <View
+            style={{
+              alignItems: "flex-start",
+              alignSelf: "stretch",
+              display: "flex",
+              flexDirection: "column",
+              flexShrink: 1, // Ensure the content can shrink properly
+              flexWrap: "wrap",
+              gap: 2,
+              justifyContent: "center",
+              paddingBottom: 8,
+              paddingTop: 8,
+            }}
+          >
+            {size === "lg" ? (
+              <Heading color={textColor} size="sm">
+                {title}
+              </Heading>
+            ) : (
+              <Text bold color={textColor} size="md">
+                {title}
+              </Text>
+            )}
+            {Boolean(size === "lg" && subtitle) && (
+              <Text color={textColor} size="sm">
+                {subtitle}
+              </Text>
+            )}
+          </View>
+        </View>
+        {Boolean(persistent && onDismiss) && (
+          <Pressable
+            aria-role="button"
+            onPress={onDismiss}
+            style={{
+              alignItems: "center",
+              alignSelf: "center",
+              display: "flex",
+              gap: 12,
+              marginLeft: 10,
+              padding: size === "lg" ? 8 : 0,
+            }}
+          >
+            <Icon color={textColor} iconName="xmark" />
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+};

package/src/Tooltip.tsx

@@ -0,0 +1,407 @@
+import {type FC, useCallback, useEffect, useRef, useState} from "react";
+import {
+  Dimensions,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+  Platform,
+  Pressable,
+  View,
+  type ViewStyle,
+} from "react-native";
+import {Portal} from "react-native-portalize";
+
+import type {TooltipPosition, TooltipProps} from "./Common";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+const TOOLTIP_OFFSET = 6;
+// How many pixels to leave between the tooltip and the edge of the screen
+const TOOLTIP_OVERFLOW_PADDING = 20;
+
+interface ChildrenMeasurement {
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+}
+
+// empty object is a fallback for when the tooltip is not measured yet
+interface Measurement {
+  children: ChildrenMeasurement | {};
+  tooltip: LayoutRectangle | {};
+  measured: boolean;
+  idealPosition?: TooltipPosition;
+}
+
+interface ChildrenProps {
+  onClick?: () => void;
+  onHoverIn?: () => void;
+  onHoverOut?: () => void;
+}
+
+const getTooltipPosition = ({
+  children,
+  tooltip,
+  measured,
+  idealPosition,
+}: Measurement): {} | {left: number; top: number; finalPosition: TooltipPosition} => {
+  if (!measured) {
+    console.debug("No measurements for child yet, cannot show tooltip yet.");
+    return {};
+  }
+
+  const {
+    pageY: childrenY,
+    height: childrenHeight,
+    pageX: childrenX,
+    width: childrenWidth,
+  }: ChildrenMeasurement = children as ChildrenMeasurement;
+  const {width: tooltipWidth, height: tooltipHeight} = tooltip as LayoutRectangle;
+
+  const horizontalCenter = childrenX + childrenWidth / 2;
+  const right = childrenX + childrenWidth + TOOLTIP_OFFSET;
+  const left = childrenX - tooltipWidth - TOOLTIP_OFFSET;
+  const top = childrenY - tooltipHeight - TOOLTIP_OFFSET;
+  const bottom = childrenY + childrenHeight + TOOLTIP_OFFSET;
+  const verticalCenter = childrenY + childrenHeight / 2 - tooltipHeight / 2;
+
+  const overflowTop = top < TOOLTIP_OVERFLOW_PADDING;
+  const overflowBottom =
+    bottom + tooltipHeight + TOOLTIP_OVERFLOW_PADDING > Dimensions.get("window").height;
+  const overflowLeft = left < TOOLTIP_OVERFLOW_PADDING;
+  const overflowRight =
+    right + tooltipWidth > Dimensions.get("window").width - TOOLTIP_OVERFLOW_PADDING;
+  let finalPosition: TooltipPosition = idealPosition || "top";
+  // Try to place the tooltip in the ideal position if possible
+  switch (idealPosition) {
+    case "left":
+      if (!overflowLeft) {
+        return {finalPosition, left, top: verticalCenter};
+      }
+      break;
+    case "right":
+      if (!overflowRight) {
+        return {finalPosition, left: right, top: verticalCenter};
+      }
+      break;
+    case "top":
+    case undefined:
+      if (!overflowTop) {
+        return {finalPosition, left: horizontalCenter - tooltipWidth / 2, top};
+      }
+      break;
+    case "bottom":
+      if (!overflowBottom) {
+        return {finalPosition, left: horizontalCenter - tooltipWidth / 2, top: bottom};
+      }
+      break;
+  }
+
+  // Fallback to an alternate position if the ideal position overflows
+  if (!overflowBottom) {
+    finalPosition = "bottom";
+    return {finalPosition, left: horizontalCenter - tooltipWidth / 2, top: bottom};
+  } else if (!overflowTop) {
+    finalPosition = "top";
+    return {finalPosition, left: horizontalCenter - tooltipWidth / 2, top};
+  } else if (!overflowLeft) {
+    finalPosition = "left";
+    return {finalPosition, left, top: verticalCenter};
+  } else {
+    finalPosition = "right";
+    return {
+      finalPosition,
+      left: Dimensions.get("window").width - TOOLTIP_OVERFLOW_PADDING - tooltipWidth,
+      top: verticalCenter,
+    };
+  }
+};
+
+const Arrow: FC<{position: TooltipPosition; color: string}> = ({position, color}) => {
+  const getArrowStyle = (): ViewStyle => {
+    const arrowStyles = {
+      bottom: {
+        borderBottomWidth: 6,
+        borderLeftColor: "transparent",
+        borderLeftWidth: 6,
+        borderRightColor: "transparent",
+        borderRightWidth: 6,
+        borderTopColor: color,
+        marginTop: 8,
+      },
+      left: {
+        borderBottomColor: "transparent",
+        borderBottomWidth: 6,
+        borderLeftColor: color,
+        borderLeftWidth: 6,
+        borderTopColor: "transparent",
+        borderTopWidth: 6,
+        marginRight: 8,
+      },
+      right: {
+        borderBottomColor: "transparent",
+        borderBottomWidth: 6,
+        borderRightColor: color,
+        borderRightWidth: 6,
+        borderTopColor: "transparent",
+        borderTopWidth: 6,
+        marginLeft: 8,
+      },
+      top: {
+        borderBottomColor: color,
+        borderLeftColor: "transparent",
+        borderLeftWidth: 6,
+        borderRightColor: "transparent",
+        borderRightWidth: 6,
+        borderTopWidth: 6,
+        marginBottom: 8,
+      },
+    };
+    return {
+      alignSelf: "center",
+      borderStyle: "solid",
+      height: 0,
+      width: 0,
+      ...arrowStyles[position],
+    } as ViewStyle;
+  };
+
+  const arrowStyle = getArrowStyle();
+  return <View style={arrowStyle} />;
+};
+
+export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includeArrow}) => {
+  const {theme} = useTheme();
+  const hoverDelay = 800;
+  const hoverEndDelay = 0;
+  const [visible, setVisible] = useState(false);
+  const [finalPosition, setFinalPosition] = useState<TooltipPosition>("top");
+
+  const [measurement, setMeasurement] = useState<Measurement>({
+    children: {},
+    measured: false,
+    tooltip: {},
+  });
+
+  const showTooltipTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const hideTooltipTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const childrenWrapperRef = useRef<View>(null);
+  const touched = useRef(false);
+  const isWeb = Platform.OS === "web";
+  const resetMeasurement = useCallback(() => {
+    setMeasurement({
+      children: {},
+      measured: false,
+      tooltip: {},
+    });
+  }, []);
+  const hideTooltip = useCallback(() => {
+    if (showTooltipTimer.current) {
+      clearTimeout(showTooltipTimer.current);
+    }
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    touched.current = false;
+    setVisible(false);
+    resetMeasurement();
+  }, [resetMeasurement]);
+
+  // If the tooltip is visible, and the user clicks outside of the tooltip, hide it.
+  useEffect(() => {
+    return () => {
+      // Hide tooltip on unmount to prevent it from staying stuck on screen
+      hideTooltip();
+    };
+  }, [hideTooltip]);
+
+  const getArrowContainerStyle = (): ViewStyle => {
+    if (!includeArrow) {
+      return {};
+    }
+    const containerStyles = {
+      bottom: {
+        left: "50%",
+        top: -12,
+        transform: [{translateX: -6}],
+      },
+      left: {
+        right: -12,
+        top: "50%",
+        transform: [{translateY: -6}],
+      },
+      right: {
+        left: -12,
+        top: "50%",
+        transform: [{translateY: -6}],
+      },
+      top: {
+        bottom: -12,
+        left: "50%",
+        transform: [{translateX: -6}],
+      },
+    };
+    return {position: "absolute", ...containerStyles[finalPosition]} as ViewStyle;
+  };
+
+  const arrowContainerStyles = getArrowContainerStyle();
+
+  const handleOnLayout = useCallback(
+    ({nativeEvent: {layout}}: LayoutChangeEvent) => {
+      if (childrenWrapperRef?.current && !childrenWrapperRef?.current?.measure) {
+        console.error("Tooltip: childrenWrapperRef does not have a measure method.");
+        return;
+      } else if (!childrenWrapperRef?.current) {
+        console.error("Tooltip: childrenWrapperRef is null.");
+      }
+
+      childrenWrapperRef?.current?.measure((_x, _y, width, height, pageX, pageY) => {
+        setMeasurement({
+          children: {height, pageX, pageY, width},
+          measured: true,
+          tooltip: {...layout},
+        });
+        const position = getTooltipPosition({
+          children: {height, pageX, pageY, width},
+          idealPosition,
+          measured: true,
+          tooltip: {...layout},
+        });
+        if ("finalPosition" in position) {
+          setFinalPosition(position.finalPosition);
+        }
+      });
+    },
+    [idealPosition]
+  );
+
+  const handleTouchStart = useCallback(() => {
+    if (visible) {
+      hideTooltip();
+      return;
+    }
+
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    showTooltipTimer.current = setTimeout(() => {
+      touched.current = true;
+      setVisible(true);
+    }, 100);
+  }, [hideTooltip, visible]);
+
+  const handleHoverIn = useCallback(() => {
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    showTooltipTimer.current = setTimeout(() => {
+      touched.current = true;
+      setVisible(true);
+    }, hoverDelay);
+  }, []);
+
+  const handleHoverOut = useCallback(() => {
+    if (showTooltipTimer.current) {
+      clearTimeout(showTooltipTimer.current);
+    }
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    hideTooltipTimer.current = setTimeout(() => {
+      hideTooltip();
+    }, hoverEndDelay);
+  }, [hideTooltip]);
+
+  const handleClick = useCallback(() => {
+    if (visible) {
+      hideTooltip();
+    }
+  }, [hideTooltip, visible]);
+
+  const mobilePressProps = {
+    onPress: useCallback(() => {
+      if (!touched.current) {
+        (children.props as ChildrenProps).onClick?.();
+      }
+    }, [children.props]),
+  };
+
+  // Allow disabling tooltips when there is no string,
+  // otherwise you need to wrap the children in a function to determine if there should be a tooltip
+  // or not, which gets messy.
+  if (!text) {
+    return children;
+  }
+
+  return (
+    <View>
+      {visible && (
+        <Portal>
+          <View
+            onLayout={handleOnLayout}
+            style={{
+              position: "absolute",
+              zIndex: 999,
+              ...getTooltipPosition({...(measurement as Measurement), idealPosition}),
+            }}
+          >
+            {includeArrow && isWeb && (
+              <View style={arrowContainerStyles as ViewStyle}>
+                <Arrow color={theme.surface.secondaryExtraDark} position={finalPosition} />
+              </View>
+            )}
+            <View
+              style={{
+                backgroundColor: theme.surface.secondaryExtraDark,
+                borderRadius: theme.radius.default,
+                display: "flex",
+                flexShrink: 1,
+                maxWidth: 320,
+                opacity: measurement.measured ? 1 : 0,
+                paddingHorizontal: 8,
+                paddingVertical: 2,
+              }}
+            >
+              <Pressable
+                accessibilityHint="Tooltip information"
+                aria-label={text}
+                aria-role="button"
+                onPress={hideTooltip}
+                style={{
+                  backgroundColor: theme.surface.secondaryExtraDark,
+                  borderRadius: theme.radius.default,
+                }}
+                testID="tooltip-container"
+              >
+                <Text color="inverted" size="sm">
+                  {text}
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+        </Portal>
+      )}
+      <View
+        hitSlop={{bottom: 10, left: 15, right: 15, top: 10}}
+        onPointerEnter={() => {
+          handleHoverIn();
+          (children.props as ChildrenProps).onHoverIn?.();
+        }}
+        onPointerLeave={() => {
+          handleHoverOut();
+          (children.props as ChildrenProps).onHoverOut?.();
+        }}
+        onPress={isWeb ? handleClick : undefined}
+        onTouchStart={handleTouchStart}
+        ref={childrenWrapperRef}
+        {...(!isWeb && mobilePressProps)}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};

package/src/UnifiedAddressAutoComplete.tsx

@@ -0,0 +1,66 @@
+import {useMemo} from "react";
+
+import type {AddressAutocompleteProps} 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,
+  testID,
+}: AddressAutocompleteProps) => {
+  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}
+        testID={testID}
+      />
+    );
+  } else if (isMobileDevice() && isNative() && isValidatedGoogleApiKey) {
+    return (
+      <MobileAddressAutocomplete
+        disabled={disabled}
+        googleMapsApiKey={googleMapsApiKey}
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={handleAutoCompleteChange}
+        includeCounty={includeCounty}
+        inputValue={inputValue}
+        styles={googlePlacesMobileStyles}
+        testID={testID}
+      />
+    );
+  } else {
+    return (
+      <TextField
+        disabled={disabled}
+        onChange={(value): void => {
+          handleAddressChange(value);
+        }}
+        placeholder="Enter an address"
+        testID={testID}
+        title="Street Address"
+        type="text"
+        value={inputValue}
+      />
+    );
+  }
+};