@terreno/ui 0.0.1

package/src/InfoTooltipButton.tsx

@@ -0,0 +1,16 @@
+import type React from "react";
+
+import type {InfoTooltipButtonProps} from "./Common";
+import {IconButton} from "./IconButton";
+
+export const InfoTooltipButton = ({text}: InfoTooltipButtonProps): React.ReactElement => {
+  return (
+    <IconButton
+      accessibilityHint="Show info tooltip"
+      accessibilityLabel="info"
+      iconName="exclamation"
+      onClick={() => {}}
+      tooltipText={text}
+    />
+  );
+};

package/src/Link.tsx

@@ -0,0 +1,22 @@
+import type React from "react";
+import {Linking, Pressable} from "react-native";
+
+import type {LinkProps} from "./Common";
+import {Text} from "./Text";
+
+export const Link = ({text, href, onClick}: LinkProps): React.ReactElement => {
+  if (!href && !onClick) {
+    console.error("Link component requires either href or onClick prop");
+  }
+  return (
+    <Pressable
+      aria-role="button"
+      hitSlop={20}
+      onPress={() => (onClick ? onClick() : href && Linking.openURL(href))}
+    >
+      <Text color="link" underline>
+        {text}
+      </Text>
+    </Pressable>
+  );
+};

package/src/MarkdownView.tsx

@@ -0,0 +1,67 @@
+import {
+  Nunito_400Regular,
+  Nunito_500Medium,
+  Nunito_700Bold,
+  useFonts as useTextFonts,
+} from "@expo-google-fonts/nunito";
+import {
+  TitilliumWeb_600SemiBold,
+  TitilliumWeb_700Bold,
+  useFonts as useHeadingFonts,
+} from "@expo-google-fonts/titillium-web";
+import type React from "react";
+import {Platform} from "react-native";
+import Markdown from "react-native-markdown-display";
+
+import {useTheme} from "./Theme";
+
+// Takes markdown and renders it with our theme. We should open source this component.
+export const MarkdownView: React.FC<{children: React.ReactNode; inverted?: boolean}> = ({
+  children,
+  inverted,
+}) => {
+  const {theme} = useTheme();
+
+  const color = {color: inverted ? theme.text.inverted : theme.text.primary};
+
+  // Match Heading font sizes to Heading component
+  // Web sizes (see src/Heading.tsx): sm:16, md:18, lg:24, xl:32
+  // Mobile sizes: sm:14, md:16, lg:20, xl:28
+  const isWeb = Platform.OS === "web";
+  const sizes = {
+    lg: isWeb ? 24 : 20,
+    md: isWeb ? 18 : 16,
+    sm: isWeb ? 16 : 14,
+    xl: isWeb ? 32 : 28,
+  } as const;
+
+  // Load fonts similar to Heading/Text components so fontFamily names resolve
+  useHeadingFonts({
+    heading: TitilliumWeb_600SemiBold,
+    "heading-bold": TitilliumWeb_700Bold,
+    "heading-semibold": TitilliumWeb_600SemiBold,
+  });
+  useTextFonts({
+    text: Nunito_400Regular,
+    "text-bold": Nunito_700Bold,
+    "text-medium": Nunito_500Medium,
+    "text-regular": Nunito_400Regular,
+  });
+
+  return (
+    <Markdown
+      style={{
+        body: {fontFamily: "text", ...color},
+        heading1: {fontFamily: "heading-bold", fontSize: sizes.xl, ...color},
+        heading2: {fontFamily: "heading-bold", fontSize: sizes.lg, ...color},
+        heading3: {fontFamily: "heading-bold", fontSize: sizes.md, ...color},
+        heading4: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+        // h5/h6 map to small as well for consistency, slightly smaller visually handled by weight
+        heading5: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+        heading6: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+      }}
+    >
+      {children}
+    </Markdown>
+  );
+};

package/src/MediaQuery.ts

@@ -0,0 +1,46 @@
+import {Dimensions} from "react-native";
+
+export function mediaQuery(): "xs" | "sm" | "md" | "lg" {
+  const width = Dimensions.get("window").width;
+  if (width < 576) {
+    return "xs";
+  } else if (width < 768) {
+    return "sm";
+  } else if (width < 1312) {
+    return "md";
+  } else {
+    return "lg";
+  }
+}
+
+export function mediaQueryLargerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+  const media = mediaQuery();
+  if (size === "xs") {
+    return true;
+  } else if (size === "sm") {
+    return ["sm", "md", "lg"].includes(media);
+  } else if (size === "md") {
+    return ["md", "lg"].includes(media);
+  } else if (size === "lg") {
+    return ["lg"].includes(media);
+  }
+  return false;
+}
+
+export function mediaQuerySmallerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+  const media = mediaQuery();
+  if (size === "lg") {
+    return true;
+  } else if (size === "md") {
+    return ["xs", "sm", "md"].includes(media);
+  } else if (size === "sm") {
+    return ["xs", "sm"].includes(media);
+  } else if (size === "xs") {
+    return ["xs"].includes(media);
+  }
+  return false;
+}
+
+export function isMobileDevice(): boolean {
+  return !mediaQueryLargerThan("sm");
+}

package/src/MobileAddressAutoComplete.tsx

@@ -0,0 +1,126 @@
+import {useEffect, useRef, useState} from "react";
+import {type TextStyle, TouchableOpacity, View} from "react-native";
+import {
+  GooglePlacesAutocomplete,
+  type GooglePlacesAutocompleteRef,
+} from "react-native-google-places-autocomplete";
+
+import type {AddressAutocompleteProps} from "./Common";
+import {GOOGLE_PLACES_API_RESTRICTIONS} from "./Constants";
+import {TextField} from "./TextField";
+import {useTheme} 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,
+  testID,
+}: AddressAutocompleteProps) => {
+  const {theme} = useTheme();
+  const ref = useRef<GooglePlacesAutocompleteRef | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Load the Google Maps script and initialize the autocomplete.
+  useEffect(() => {
+    if (!googleMapsApiKey) return;
+    if (ref?.current) {
+      ref.current.setAddressText(inputValue);
+    }
+  }, [googleMapsApiKey, inputValue]);
+
+  const textInputContainerStyles = {
+    backgroundColor: theme.surface.base,
+    borderColor: isFocused ? theme.border.hover : theme.border.default,
+    borderRadius: theme.radius.default,
+    borderWidth: isFocused ? 5 : 1,
+    paddingHorizontal: isFocused ? 10 : 14,
+    paddingVertical: isFocused ? 0 : 4,
+    ...(styles?.textInputContainer as object),
+  };
+
+  const textInputStyles = {
+    backgroundColor: theme.surface.base,
+    borderRadius: theme.radius.default,
+    color: theme.text.primary,
+    fontFamily: "text",
+    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"
+        onChange={(result) => handleAddressChange(result)}
+        testID={testID}
+        type="text"
+        value={inputValue}
+      />
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      aria-role="button"
+      onPress={() => setIsFocused(false)}
+      style={{flex: 1}}
+    >
+      <View>
+        <GooglePlacesAutocomplete
+          disableScroll
+          fetchDetails
+          GooglePlacesDetailsQuery={{
+            fields: Object.values(GOOGLE_PLACES_API_RESTRICTIONS.fields).join(","),
+          }}
+          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);
+          }}
+          placeholder="Street Address"
+          query={{
+            components: `country:${GOOGLE_PLACES_API_RESTRICTIONS.components.country}`,
+            key: googleMapsApiKey,
+            language: "en",
+          }}
+          ref={ref}
+          styles={{
+            textInput: {
+              ...textInputStyles,
+            },
+            textInputContainer: {
+              ...textInputContainerStyles,
+            },
+            ...styles,
+          }}
+          textInputProps={{
+            onBlur: () => setIsFocused(false),
+            onChange: (event) => {
+              handleAddressChange(event.nativeEvent.text);
+            },
+            onFocus: () => setIsFocused(true),
+          }}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};

package/src/Modal.tsx

@@ -0,0 +1,300 @@
+import {type FC, useEffect, useRef} from "react";
+import {Dimensions, type DimensionValue, Pressable, Modal as RNModal, View} from "react-native";
+import ActionSheet, {type ActionSheetRef} from "react-native-actions-sheet";
+import {Gesture, GestureDetector} from "react-native-gesture-handler";
+import {runOnJS} from "react-native-reanimated";
+
+import {Button} from "./Button";
+import type {ModalProps} from "./Common";
+import {Heading} from "./Heading";
+import {Icon} from "./Icon";
+import {isMobileDevice} from "./MediaQuery";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+import {isNative} from "./Utilities";
+
+const getModalSize = (size: "sm" | "md" | "lg"): DimensionValue => {
+  const sizeMap = {
+    lg: 900,
+    md: 720,
+    sm: 540,
+  };
+  let sizePx: DimensionValue = sizeMap[size] || sizeMap.sm;
+  if (sizePx > Dimensions.get("window").width) {
+    sizePx = "90%";
+  }
+  return sizePx;
+};
+
+const ModalContent: FC<{
+  children?: ModalProps["children"];
+  title?: ModalProps["title"];
+  subtitle?: ModalProps["subtitle"];
+  text?: ModalProps["text"];
+  primaryButtonText?: ModalProps["primaryButtonText"];
+  primaryButtonDisabled?: ModalProps["primaryButtonDisabled"];
+  secondaryButtonText?: ModalProps["secondaryButtonText"];
+  primaryButtonOnClick?: ModalProps["primaryButtonOnClick"];
+  secondaryButtonOnClick?: ModalProps["secondaryButtonOnClick"];
+  onDismiss: ModalProps["onDismiss"];
+  sizePx: DimensionValue;
+  theme: any;
+  isMobile: boolean;
+}> = ({
+  children,
+  title,
+  subtitle,
+  text,
+  primaryButtonText,
+  primaryButtonDisabled,
+  secondaryButtonText,
+  primaryButtonOnClick,
+  secondaryButtonOnClick,
+  onDismiss,
+  sizePx,
+  theme,
+  isMobile,
+}) => {
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        alignSelf: "center",
+        backgroundColor: theme.surface.base,
+        borderRadius: theme.radius.default,
+        maxHeight: "100%",
+        padding: 32,
+        width: sizePx,
+        zIndex: 1,
+        ...(isMobile
+          ? {}
+          : {
+              boxShadow: "0px 4px 24px rgba(0, 0, 0, 0.5)",
+              elevation: 24,
+              margin: "auto",
+            }),
+      }}
+    >
+      <View style={{alignSelf: "flex-end", position: "relative"}}>
+        <Pressable
+          accessibilityHint="Closes the modal"
+          aria-label="Close modal"
+          aria-role="button"
+          onPress={onDismiss}
+          style={{
+            alignItems: "center",
+            bottom: -8,
+            flex: 1,
+            justifyContent: "center",
+            left: -8,
+            position: "absolute",
+            right: -8,
+            top: -8,
+          }}
+        >
+          <Icon iconName="x" size="sm" />
+        </Pressable>
+      </View>
+      {title && (
+        <View
+          accessibilityHint="Modal title"
+          aria-label={title}
+          aria-role="header"
+          style={{alignSelf: "flex-start"}}
+        >
+          <Heading size="lg">{title}</Heading>
+        </View>
+      )}
+      {subtitle && (
+        <View
+          accessibilityHint="Modal Sub Heading Text"
+          aria-label={subtitle}
+          aria-role="text"
+          style={{alignSelf: "flex-start", marginTop: subtitle ? 8 : 0}}
+        >
+          <Text size="lg">{subtitle}</Text>
+        </View>
+      )}
+      {text && (
+        <View
+          accessibilityHint="Modal body text"
+          aria-label={text}
+          aria-role="text"
+          style={{alignSelf: "flex-start", marginVertical: text ? 12 : 0}}
+        >
+          <Text>{text}</Text>
+        </View>
+      )}
+      {children && (
+        <View
+          style={{
+            flex: isMobile ? undefined : 1,
+            marginTop: text ? 0 : 12,
+            width: "100%",
+          }}
+        >
+          {children}
+        </View>
+      )}
+      <View
+        style={{
+          alignSelf: "flex-end",
+          flexDirection: "row",
+          marginTop: text && !children ? 20 : 32,
+        }}
+      >
+        {Boolean(secondaryButtonText && secondaryButtonOnClick) && (
+          <View style={{marginRight: primaryButtonText ? 20 : 0}}>
+            <Button
+              onClick={secondaryButtonOnClick!}
+              text={secondaryButtonText as string}
+              variant="muted"
+            />
+          </View>
+        )}
+        {Boolean(primaryButtonText && primaryButtonOnClick) && (
+          <Button
+            disabled={primaryButtonDisabled}
+            onClick={primaryButtonOnClick!}
+            text={primaryButtonText as string}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export const Modal: FC<ModalProps> = ({
+  children,
+  persistOnBackgroundClick = false,
+  primaryButtonDisabled = false,
+  primaryButtonText,
+  secondaryButtonText,
+  size = "sm",
+  subtitle,
+  text,
+  title,
+  visible,
+  onDismiss,
+  primaryButtonOnClick,
+  secondaryButtonOnClick,
+}: ModalProps) => {
+  const actionSheetRef = useRef<ActionSheetRef>(null);
+  const {theme} = useTheme();
+
+  const handleDismiss = () => {
+    if (visible && onDismiss) {
+      onDismiss();
+    }
+  };
+
+  const handlePrimaryButtonClick = (
+    value?: Parameters<NonNullable<ModalProps["primaryButtonOnClick"]>>[0]
+  ) => {
+    if (visible && primaryButtonOnClick) {
+      return primaryButtonOnClick(value);
+    }
+  };
+
+  const handleSecondaryButtonClick = (
+    value?: Parameters<NonNullable<ModalProps["secondaryButtonOnClick"]>>[0]
+  ) => {
+    if (visible && secondaryButtonOnClick) {
+      return secondaryButtonOnClick(value);
+    }
+  };
+
+  const dragToClose = Gesture.Pan().onEnd((event) => {
+    if (event.translationY > 20) {
+      // Gesture callbacks run on the UI thread, runOnJS is required to safely invoke handleDismiss on the JS thread
+      runOnJS(handleDismiss)();
+    }
+  });
+
+  // Open the action sheet ref when the visible prop changes.
+  useEffect(() => {
+    if (actionSheetRef.current) {
+      actionSheetRef.current.setModalVisible(visible);
+    }
+  }, [visible]);
+
+  const isMobile = isMobileDevice() && isNative();
+  const sizePx = getModalSize(size);
+
+  const modalContentProps = {
+    isMobile,
+    onDismiss: handleDismiss,
+    persistOnBackgroundClick,
+    primaryButtonDisabled,
+    primaryButtonOnClick: handlePrimaryButtonClick,
+    primaryButtonText,
+    secondaryButtonOnClick: handleSecondaryButtonClick,
+    secondaryButtonText,
+    sizePx,
+    subtitle,
+    text,
+    theme,
+    title,
+  };
+
+  if (isMobile) {
+    return (
+      <ActionSheet
+        closeOnTouchBackdrop={!persistOnBackgroundClick}
+        gestureEnabled={false}
+        // Disable ActionSheet's built-in gestures to avoid conflicts with scrolling
+        onClose={handleDismiss}
+        ref={actionSheetRef}
+      >
+        <View>
+          {/* Attach our own swipe-to-dismiss gesture to the top handle */}
+          <GestureDetector gesture={dragToClose}>
+            <View
+              accessibilityHint="Pull down to close the modal"
+              aria-label="Pull down bar"
+              aria-role="adjustable"
+              // add hitSlop to make the bar easier to hit since it's small
+              hitSlop={{bottom: 20, left: 50, right: 50, top: 20}}
+              style={{
+                alignItems: "center",
+                alignSelf: "center",
+                backgroundColor: "#9A9A9A",
+                borderRadius: 5,
+                height: 3,
+                justifyContent: "center",
+                marginTop: 10,
+                padding: 2,
+                width: "30%",
+              }}
+            />
+          </GestureDetector>
+
+          <ModalContent {...modalContentProps}>{children}</ModalContent>
+        </View>
+      </ActionSheet>
+    );
+  } else {
+    return (
+      <RNModal animationType="slide" onRequestClose={handleDismiss} transparent visible={visible}>
+        <Pressable
+          onPress={persistOnBackgroundClick ? undefined : handleDismiss}
+          style={{
+            alignItems: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            flex: 1,
+            justifyContent: "center",
+          }}
+        >
+          <Pressable
+            onPress={(e) => {
+              persistOnBackgroundClick ? null : e.stopPropagation();
+            }}
+            style={{cursor: "auto"}}
+          >
+            <ModalContent {...modalContentProps}>{children}</ModalContent>
+          </Pressable>
+        </Pressable>
+      </RNModal>
+    );
+  }
+};

package/src/ModalSheet.tsx

@@ -0,0 +1,58 @@
+import {forwardRef, useEffect, useRef} from "react";
+import {Animated} from "react-native";
+import {Modalize} from "react-native-modalize";
+import {Portal} from "react-native-portalize";
+
+export const useCombinedRefs = (...refs: any) => {
+  const targetRef = useRef<any>(null);
+
+  // Iterate through the refs array, and set the ref.current value to the targetRef
+  useEffect(() => {
+    refs.forEach((ref: any) => {
+      if (!ref) {
+        return;
+      }
+
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+
+  return targetRef;
+};
+
+interface Props {
+  children: any;
+}
+
+export const SimpleContent = forwardRef((props: Props, ref) => {
+  const modalizeRef = useRef(null);
+  const combinedRef = useCombinedRefs(ref, modalizeRef);
+  const animated = useRef(new Animated.Value(0)).current;
+
+  // const renderHeader = () => (
+  //   <Box paddingY={4} marginTop={4} marginBottom={4}>
+  //     <Text>50 users online</Text>
+  //   </Box>
+  // );
+
+  return (
+    <Portal>
+      <Modalize
+        // HeaderComponent={renderHeader}
+        adjustToContentHeight
+        panGestureAnimatedValue={animated}
+        ref={combinedRef}
+        scrollViewProps={{
+          showsVerticalScrollIndicator: false,
+          stickyHeaderIndices: [0],
+        }}
+      >
+        {props.children}
+      </Modalize>
+    </Portal>
+  );
+});