@terreno/ui 0.0.1

package/src/Box.tsx

@@ -0,0 +1,368 @@
+import React, {useImperativeHandle} from "react";
+import {
+  type AccessibilityProps,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  View,
+} from "react-native";
+
+import {getRounding, getSpacing, useTheme} from ".";
+import type {
+  AlignContent,
+  AlignItems,
+  AlignSelf,
+  BorderTheme,
+  BoxProps,
+  JustifyContent,
+  SurfaceTheme,
+} from "./Common";
+import {mediaQueryLargerThan} from "./MediaQuery";
+import {Unifier} from "./Unifier";
+
+const ALIGN_CONTENT = {
+  around: "space-around",
+  between: "space-between",
+  center: "center",
+  end: "flex-end",
+  start: "flex-start",
+  stretch: "stretch",
+};
+
+const ALIGN_ITEMS = {
+  baseline: "baseline",
+  center: "center",
+  end: "flex-end",
+  start: "flex-start",
+  stretch: "stretch",
+};
+
+const ALIGN_SELF = {
+  around: "space-around",
+  auto: "auto",
+  baseline: "baseline",
+  between: "space-between",
+  center: "center",
+  end: "flex-end",
+  start: "flex-start",
+  stretch: "stretch",
+};
+
+const BORDER_WIDTH = 1;
+
+const isValidPercentage = (value: string): boolean => {
+  return /^\d+(\.\d+)?%$/.test(value);
+};
+
+const isValidWidthHeight = (value: number | string): boolean => {
+  return typeof value === "number" || !Number.isNaN(Number(value)) || isValidPercentage(value);
+};
+
+export const Box = React.forwardRef((props: BoxProps, ref) => {
+  const {theme} = useTheme();
+
+  useImperativeHandle(ref, () => ({
+    scrollTo: (y: number) => {
+      if (scrollRef?.current) {
+        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout
+        // to avoid this, but it works well enough.
+        setTimeout(() => {
+          scrollRef?.current?.scrollTo({y});
+        }, 50);
+      }
+    },
+    scrollToEnd: () => {
+      if (scrollRef?.current) {
+        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout
+        // to avoid this, but it works well enough.
+        setTimeout(() => {
+          scrollRef?.current?.scrollToEnd();
+        }, 50);
+      }
+    },
+  }));
+
+  const BOX_STYLE_MAP: {
+    [prop: string]: (
+      value: any,
+      all: {[prop: string]: any}
+    ) => {[style: string]: string | number} | {};
+  } = {
+    alignContent: (value: AlignContent) => ({alignContent: ALIGN_CONTENT[value]}),
+    alignItems: (value: AlignItems) => ({alignItems: ALIGN_ITEMS[value]}),
+    alignSelf: (value: AlignSelf) => ({alignSelf: ALIGN_SELF[value]}),
+    border: (value: keyof BorderTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderColor: theme.border[value], borderWidth: BORDER_WIDTH};
+    },
+    borderBottom: (value: keyof BorderTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderBottomColor: theme.border[value], borderBottomWidth: BORDER_WIDTH};
+    },
+    borderLeft: (value: keyof BorderTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderLeftColor: theme.border[value], borderLeftWidth: BORDER_WIDTH};
+    },
+    borderRight: (value: keyof BorderTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderRightColor: theme.border[value], borderRightWidth: BORDER_WIDTH};
+    },
+    borderTop: (value: keyof BorderTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderTopColor: theme.border[value], borderTopWidth: BORDER_WIDTH};
+    },
+    bottom: (bottom) => ({bottom: bottom ? 0 : undefined}),
+    color: (value: keyof SurfaceTheme) => ({backgroundColor: theme.surface[value]}),
+    direction: (value: any) => ({display: "flex", flexDirection: value}),
+    display: (value: any) => {
+      if (value === "none") {
+        return {display: "none"};
+      }
+      return value === "flex" ? {flex: undefined} : {flex: 0, flexDirection: "row"};
+    },
+    flex: (value: string) => {
+      if (value === "grow") {
+        return {display: "flex", flexGrow: 1, flexShrink: 1};
+      } else if (value === "shrink") {
+        return {display: "flex", flexShrink: 1};
+      } else {
+        return {display: "flex", flex: 0};
+      }
+    },
+    gap: (value) => ({gap: getSpacing(value)}),
+    height: (value) => {
+      if (!isValidWidthHeight(value)) {
+        console.warn(
+          `Box: height prop must be a number or percentage string (e.g., "50%"), received: ${value}`
+        );
+        return {};
+      }
+      if (props.border && !Number.isNaN(Number(value))) {
+        return {height: Number(value) + 2 * 2};
+      } else {
+        return {height: value};
+      }
+    },
+    justifyContent: (value: JustifyContent) => ({justifyContent: ALIGN_CONTENT[value]}),
+    left: (left) => ({left: left ? 0 : undefined}),
+    lgDirection: (value: any) =>
+      mediaQueryLargerThan("lg") ? {display: "flex", flexDirection: value} : {},
+    margin: (value) => ({margin: getSpacing(value)}),
+    marginBottom: (value) => ({marginBottom: getSpacing(value)}),
+    marginLeft: (value) => ({marginLeft: getSpacing(value)}),
+    marginRight: (value) => ({marginRight: getSpacing(value)}),
+    marginTop: (value) => ({marginTop: getSpacing(value)}),
+    maxHeight: (value) => {
+      if (!isValidWidthHeight(value)) {
+        console.warn(
+          `Box: maxHeight prop must be a number or percentage string (e.g., "50%"), received: ${value}`
+        );
+        return {};
+      }
+      return {maxHeight: value};
+    },
+    maxWidth: (value) => {
+      if (!isValidWidthHeight(value)) {
+        console.warn(
+          `Box: maxWidth prop must be a number or percentage string (e.g., "50%"), received: ${value}`
+        );
+        return {};
+      }
+      return {maxWidth: value};
+    },
+    mdDirection: (value: any) =>
+      mediaQueryLargerThan("md") ? {display: "flex", flexDirection: value} : {},
+    minHeight: (value) => {
+      if (!isValidWidthHeight(value)) {
+        console.warn(
+          `Box: minHeight prop must be a number or percentage string (e.g., "50%"), received: ${value}`
+        );
+        return {};
+      }
+      return {minHeight: value};
+    },
+    minWidth: (value) => {
+      if (!isValidWidthHeight(value)) {
+        console.warn(
+          `Box: minWidth prop must be a number or percentage string (e.g., "50%"), received: ${value}`
+        );
+        return {};
+      }
+      return {minWidth: value};
+    },
+    overflow: (value) => {
+      if (value === "scrollY" || value === "scroll") {
+        return {overflow: "scroll"};
+      }
+      return {overflow: value};
+    },
+    padding: (value) => ({padding: getSpacing(value)}),
+    paddingX: (value) => ({paddingLeft: getSpacing(value), paddingRight: getSpacing(value)}),
+    paddingY: (value) => ({paddingBottom: getSpacing(value), paddingTop: getSpacing(value)}),
+    position: (value) => ({position: value}),
+    right: (right) => ({right: right ? 0 : undefined}),
+    rounding: (rounding, allProps) => {
+      if (rounding === "circle") {
+        if (!allProps.height && !allProps.width) {
+          console.warn("Cannot use Box rounding='circle' without height or width.");
+          return {borderRadius: undefined};
+        }
+        return {borderRadius: allProps.height || allProps.width};
+      }
+
+      if (rounding) {
+        return {borderRadius: getRounding(rounding)};
+      }
+
+      return {borderRadius: undefined};
+    },
+    shadow: (value) => {
+      if (!value) {
+        return {};
+      }
+      if (Platform.OS === "ios" || Platform.OS === "web") {
+        return {
+          boxShadow: "2px 2px 2px rgba(153, 153, 153, 1.0)",
+        };
+      } else {
+        return {elevation: 4};
+      }
+    },
+    smDirection: (value: any) =>
+      mediaQueryLargerThan("sm") ? {display: "flex", flexDirection: value} : {},
+    top: (top) => ({top: top ? 0 : undefined}),
+    width: (value) => {
+      if (!isValidWidthHeight(value)) {
+        console.warn(
+          `Box: width prop must be a number or percentage string (e.g., "50%"), received: ${value}`
+        );
+        return {};
+      }
+      if (props.border && !Number.isNaN(Number(value))) {
+        return {width: Number(value) + 2 * 2};
+      } else {
+        return {width: value};
+      }
+    },
+    wrap: (value) => ({alignItems: "flex-start", flexWrap: value ? "wrap" : "nowrap"}),
+    zIndex: (value) => ({zIndex: value ? value : undefined}),
+  };
+
+  const scrollRef = props.scrollRef ?? React.createRef();
+
+  const propsToStyle = (): any => {
+    let style: any = {};
+    for (const prop of Object.keys(props) as Array<keyof typeof props>) {
+      const value = props[prop];
+      if (BOX_STYLE_MAP[prop]) {
+        Object.assign(style, BOX_STYLE_MAP[prop](value, props));
+      } else if (prop !== "children" && prop !== "onClick") {
+        style[prop] = value;
+        // console.warn(`Box: unknown property ${prop}`);
+      }
+    }
+
+    if (props.wrap && props.alignItems && Platform.OS !== "web") {
+      console.warn("React Native doesn't support wrap and alignItems together.");
+    }
+
+    // Finally, dangerously set overrides.
+    if (props.dangerouslySetInlineStyle) {
+      style = {...style, ...props.dangerouslySetInlineStyle.__style};
+    }
+
+    return style;
+  };
+
+  const onHoverIn = async () => {
+    await props.onHoverStart?.();
+  };
+
+  const onHoverOut = async () => {
+    await props.onHoverEnd?.();
+  };
+
+  let box;
+
+  // Adding the accessibilityRole of button throws a warning in React Native since we nest buttons
+  // within Box and RN does not support nested buttons
+  if (props.onClick) {
+    box = (
+      <Pressable
+        accessibilityHint={(props as AccessibilityProps).accessibilityHint}
+        aria-label={(props as AccessibilityProps).accessibilityLabel}
+        aria-role="button"
+        onLayout={props.onLayout}
+        onPointerEnter={onHoverIn}
+        onPointerLeave={onHoverOut}
+        onPress={async () => {
+          await Unifier.utils.haptic();
+          await props.onClick?.();
+        }}
+        style={propsToStyle()}
+        testID={props.testID ? `${props.testID}-clickable` : undefined}
+      >
+        {props.children}
+      </Pressable>
+    );
+  } else {
+    box = (
+      <View
+        onPointerEnter={onHoverIn}
+        onPointerLeave={onHoverOut}
+        style={propsToStyle()}
+        testID={props.testID}
+      >
+        {props.children}
+      </View>
+    );
+  }
+
+  if (props.scroll) {
+    const {justifyContent, alignContent, alignItems, ...scrollStyle} = propsToStyle();
+
+    box = (
+      <ScrollView
+        contentContainerStyle={{alignContent, alignItems, justifyContent}}
+        horizontal={props.overflow === "scrollX"}
+        keyboardShouldPersistTaps="handled"
+        nestedScrollEnabled
+        onScroll={(event) => {
+          if (props.onScroll && event) {
+            props.onScroll(event.nativeEvent.contentOffset.y);
+          }
+        }}
+        ref={props.scrollRef || scrollRef}
+        scrollEventThrottle={50}
+        style={scrollStyle}
+      >
+        {box}
+      </ScrollView>
+    );
+  }
+
+  if (props.avoidKeyboard) {
+    box = (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        keyboardVerticalOffset={props.keyboardOffset}
+        style={{display: "flex", flex: 1}}
+      >
+        <SafeAreaView style={{display: "flex", flex: 1}}>{box}</SafeAreaView>
+      </KeyboardAvoidingView>
+    );
+  }
+  return box;
+});

package/src/Button.tsx

@@ -0,0 +1,196 @@
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import debounce from "lodash/debounce";
+import {type FC, useMemo, useState} from "react";
+import {ActivityIndicator, Pressable, Text, View} from "react-native";
+
+import {Box} from "./Box";
+import type {ButtonProps} from "./Common";
+import {isMobileDevice} from "./MediaQuery";
+import {Modal} from "./Modal";
+import {useTheme} from "./Theme";
+import {Tooltip} from "./Tooltip";
+import {Unifier} from "./Unifier";
+import {isNative} from "./Utilities";
+
+const ConfirmationModal: FC<{
+  visible: boolean;
+  title: string;
+  subtitle?: string;
+  text: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}> = ({visible, title, subtitle, text, onConfirm, onCancel}) => {
+  return (
+    <Modal
+      onDismiss={onCancel}
+      primaryButtonOnClick={onConfirm}
+      primaryButtonText="Confirm"
+      secondaryButtonOnClick={onCancel}
+      secondaryButtonText="Cancel"
+      subtitle={subtitle}
+      title={title}
+      visible={visible}
+    >
+      <Text>{text}</Text>
+    </Modal>
+  );
+};
+
+const ButtonComponent: FC<ButtonProps> = ({
+  confirmationText = "Are you sure you want to continue?",
+  disabled = false,
+  fullWidth = false,
+  iconName,
+  iconPosition = "left",
+  loading: propsLoading,
+  modalTitle = "Confirm",
+  modalSubTitle,
+  testID,
+  text,
+  variant = "primary",
+  withConfirmation = false,
+  onClick,
+}) => {
+  const [loading, setLoading] = useState(propsLoading);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const {theme} = useTheme();
+
+  const {backgroundColor, borderColor, borderWidth, color} = useMemo(() => {
+    if (!theme) {
+      return {};
+    }
+    let bgColor = theme.surface.primary;
+    let bColor: string | undefined;
+    let bWidth: number | undefined;
+    let textColor = theme.text.inverted;
+
+    if (disabled) {
+      bgColor = theme.surface.disabled;
+    } else if (variant === "secondary") {
+      bgColor = theme.surface.secondaryDark;
+    } else if (variant === "muted") {
+      bgColor = theme.surface.secondaryLight;
+      textColor = theme.surface.neutralDark;
+    } else if (variant === "outline") {
+      bgColor = theme.surface.base;
+      bColor = theme.text.secondaryDark;
+      bWidth = 2;
+      textColor = theme.text.secondaryDark;
+    } else if (variant === "destructive") {
+      bgColor = theme.surface.error;
+    }
+
+    return {
+      backgroundColor: bgColor,
+      borderColor: bColor,
+      borderWidth: bWidth,
+      color: textColor,
+    };
+  }, [disabled, variant, theme]);
+
+  if (!theme) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      accessibilityHint={
+        withConfirmation ? "Opens a confirmation dialog" : "Press to perform action"
+      }
+      aria-label={text}
+      aria-role="button"
+      disabled={disabled || loading}
+      onPress={debounce(
+        async () => {
+          await Unifier.utils.haptic();
+          setLoading(true);
+
+          try {
+            // If a confirmation is required, and the confirmation modal is not currently open,
+            // open it
+            if (withConfirmation && !showConfirmation) {
+              setShowConfirmation(true);
+            } else if (!withConfirmation && onClick) {
+              // If a confirmation is not required, perform the action.
+              await onClick();
+            }
+          } catch (error) {
+            setLoading(false);
+            throw error;
+          }
+          setLoading(false);
+        },
+        500,
+        {leading: true}
+      )}
+      style={{
+        alignItems: "center",
+        alignSelf: fullWidth ? "stretch" : undefined,
+        backgroundColor,
+        borderColor,
+        borderRadius: theme.radius.rounded,
+        borderWidth,
+        flexDirection: "column",
+        justifyContent: "center",
+        paddingHorizontal: 20,
+        paddingVertical: 8,
+        width: fullWidth ? "100%" : "auto",
+      }}
+      testID={testID}
+    >
+      <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: iconPosition === "left" ? "row" : "row-reverse"}}>
+          {Boolean(iconName) && (
+            <View
+              style={{
+                alignSelf: "center",
+                marginLeft: iconPosition === "right" ? 8 : 0,
+                marginRight: iconPosition === "left" ? 8 : 0,
+              }}
+            >
+              <FontAwesome6 color={color} name={iconName} size={16} solid />
+            </View>
+          )}
+          <Text style={{color, fontSize: 16, fontWeight: "700"}}>{text}</Text>
+        </View>
+        {Boolean(loading) && (
+          <Box marginLeft={2}>
+            <ActivityIndicator color={color} size="small" />
+          </Box>
+        )}
+      </View>
+      {withConfirmation && (
+        <ConfirmationModal
+          onCancel={() => setShowConfirmation(false)}
+          onConfirm={async () => {
+            await onClick();
+            setShowConfirmation(false);
+          }}
+          subtitle={modalSubTitle}
+          text={confirmationText}
+          title={modalTitle}
+          visible={showConfirmation}
+        />
+      )}
+    </Pressable>
+  );
+};
+
+export const Button: FC<ButtonProps> = (props) => {
+  const {tooltipText, tooltipIdealPosition, tooltipIncludeArrow = false} = props;
+  const isMobileOrNative = isMobileDevice() || isNative();
+
+  if (tooltipText && !isMobileOrNative) {
+    return (
+      <Tooltip
+        idealPosition={tooltipIdealPosition}
+        includeArrow={tooltipIncludeArrow}
+        text={tooltipText}
+      >
+        <ButtonComponent {...props} />
+      </Tooltip>
+    );
+  }
+
+  return <ButtonComponent {...props} />;
+};

package/src/Card.tsx

@@ -0,0 +1,19 @@
+import {Box} from "./Box";
+import type {BoxProps} from "./Common";
+
+export const Card = ({children, color = "base", padding = 4, width, ...rest}: BoxProps) => {
+  return (
+    <Box
+      color={color}
+      direction="column"
+      display="flex"
+      padding={padding}
+      rounding="md"
+      shadow
+      width={width}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+};

package/src/CheckBox.tsx

@@ -0,0 +1,45 @@
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import type {FC} from "react";
+import {View} from "react-native";
+
+import type {CheckBoxProps} from "./Common";
+import {useTheme} from "./Theme";
+
+export const CheckBox: FC<CheckBoxProps> = ({selected, size = "md", bgColor = "default"}) => {
+  const {theme} = useTheme();
+  const px = {
+    lg: {container: 24, icon: 16},
+    md: {container: 16, icon: 13},
+    sm: {container: 10, icon: 8},
+  };
+
+  const backgroundColor = {
+    accent: theme.text.accent,
+    black: theme.text.primary,
+    default: theme.text.link,
+  };
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        backgroundColor: selected ? backgroundColor[bgColor] : "transparent",
+        borderColor: backgroundColor[bgColor],
+        borderRadius: 3,
+        borderWidth: 1,
+        height: px[size].container,
+        justifyContent: "center",
+        width: px[size].container,
+      }}
+    >
+      {selected ? (
+        <FontAwesome6
+          color={theme.surface.base}
+          name="check"
+          selectable={undefined}
+          size={px[size].icon}
+          solid
+        />
+      ) : null}
+    </View>
+  );
+};