@terreno/ui 0.0.1

package/src/Heading.tsx

@@ -0,0 +1,66 @@
+import {
+  TitilliumWeb_600SemiBold,
+  TitilliumWeb_700Bold,
+  useFonts,
+} from "@expo-google-fonts/titillium-web";
+import type React from "react";
+import {Text as NativeText, Platform, type StyleProp, type TextStyle} from "react-native";
+
+import type {HeadingProps} from "./Common";
+import {useTheme} from "./Theme";
+
+const fontSizeAndWeightWeb = {
+  "2xl": {size: 48, weight: "bold"},
+  lg: {size: 24, weight: "bold"},
+  md: {size: 18, weight: "bold"},
+  sm: {size: 16, weight: "semibold"},
+  xl: {size: 32, weight: "bold"},
+};
+
+const fontSizeAndWeighMobile = {
+  "2xl": {size: 32, weight: "bold"},
+  lg: {size: 20, weight: "bold"},
+  md: {size: 16, weight: "bold"},
+  sm: {size: 14, weight: "semibold"},
+  xl: {size: 28, weight: "bold"},
+};
+
+const fontSizes = Platform.OS === "web" ? fontSizeAndWeightWeb : fontSizeAndWeighMobile;
+
+export const Heading = ({
+  align,
+  children,
+  color = "primary",
+  size,
+  testID,
+}: HeadingProps): React.ReactElement => {
+  const {theme} = useTheme();
+
+  // TODO: make fonts part of theme.
+  useFonts({
+    heading: TitilliumWeb_600SemiBold,
+    "heading-bold": TitilliumWeb_700Bold,
+    "heading-semibold": TitilliumWeb_600SemiBold,
+  });
+
+  const style: StyleProp<TextStyle> = {};
+
+  if (size === "sm") {
+    style.fontFamily = "heading-semibold";
+  } else {
+    style.fontFamily = "heading-bold";
+  }
+
+  style.fontSize = fontSizes[size || "md"].size;
+  if (align) {
+    style.textAlign = align;
+  }
+  style.color = theme.text[color];
+
+  const lines = 0;
+  return (
+    <NativeText numberOfLines={lines} style={style} testID={testID}>
+      {children}
+    </NativeText>
+  );
+};

package/src/HeightActionSheet.tsx

@@ -0,0 +1,91 @@
+import {Picker} from "@react-native-picker/picker";
+import range from "lodash/range";
+import React from "react";
+
+import {ActionSheet} from "./ActionSheet";
+import {Box} from "./Box";
+import {Button} from "./Button";
+import type {HeightActionSheetProps} from "./Common";
+
+const PICKER_HEIGHT = 104;
+
+interface HeightActionSheetState {
+  feet: string;
+  inches: string;
+}
+
+export class HeightActionSheet extends React.Component<
+  HeightActionSheetProps,
+  HeightActionSheetState
+> {
+  constructor(props: HeightActionSheetProps) {
+    super(props);
+    this.state = {
+      feet: String(Math.floor(Number(props.value) / 12)),
+      inches: String(Number(props.value) % 12),
+    };
+  }
+
+  render() {
+    return (
+      <ActionSheet bounceOnOpen gestureEnabled ref={this.props.actionSheetRef}>
+        <Box marginBottom={8} paddingX={4} width="100%">
+          <Box alignItems="end" display="flex" width="100%">
+            <Box width="33%">
+              <Button
+                onClick={() => {
+                  this.props.actionSheetRef?.current?.setModalVisible(false);
+                }}
+                text="Close"
+              />
+            </Box>
+          </Box>
+          <Box direction="row" width="100%">
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                onValueChange={(feet) => {
+                  this.setState({feet: String(feet)});
+                  this.props.onChange(String(Number(feet) * 12 + Number(this.state.inches)));
+                }}
+                selectedValue={this.state.feet}
+                style={{
+                  backgroundColor: "#FFFFFF",
+                  height: PICKER_HEIGHT,
+                }}
+              >
+                {range(4, 8).map((n) => {
+                  // console.log("FIRST", String(n));
+                  return <Picker.Item key={String(n)} label={`${String(n)}ft`} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                onValueChange={(inches) => {
+                  this.setState({inches: String(inches)});
+                  this.props.onChange(String(Number(this.state.feet) * 12 + Number(inches)));
+                }}
+                selectedValue={this.state.inches}
+                style={{
+                  backgroundColor: "#FFFFFF",
+                  height: PICKER_HEIGHT,
+                }}
+              >
+                {range(0, 12).map((n) => {
+                  // console.log("N", n);
+                  return <Picker.Item key={String(n)} label={`${String(n)}in`} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+          </Box>
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/Hyperlink.tsx

@@ -0,0 +1,179 @@
+/**
+ * @providesModule Hyperlink
+ *
+ * Forked from https://github.com/obipawan/react-native-hyperlink
+ *
+ *
+ * MIT License
+ *
+ * Copyright (c) 2019 Pawan
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+
+/**
+ * Hyperlink is used to wrap text that should be clickable.
+ * It will automatically detect URLs and open them in the browser. For example,
+ * this is great for wrapping text in a chat app so any link in a chat message is clickable.
+ * This is different than <Link> which is meant for specifically linking to a URL.
+ */
+
+import * as mdurl from "mdurl";
+import React from "react";
+import {Linking, Platform, Text, View} from "react-native";
+
+import type {HyperlinkProps} from "./Common";
+
+const linkifyLib = require("linkify-it")();
+
+const {OS} = Platform;
+
+// Leaving this as a class component because it was easier to handle the `parse(this)` in
+// `render()`
+class HyperlinkComponent extends React.Component<HyperlinkProps> {
+  isTextNested = (component: any) => {
+    if (!React.isValidElement(component)) throw new Error("Invalid component");
+    const {type: {displayName} = {} as any} = component;
+    if (displayName !== "Text") throw new Error("Not a Text component");
+    return typeof (component.props as any).children !== "string";
+  };
+
+  linkify = (component: any) => {
+    const linkifyIt = this.props.linkify || linkifyLib;
+
+    if (!linkifyIt.pretest(component.props.children) || !linkifyIt.test(component.props.children))
+      return component;
+
+    const elements = [];
+    let _lastIndex = 0;
+
+    const componentProps = {
+      ...component.props,
+      key: undefined,
+      ref: undefined,
+    };
+
+    try {
+      linkifyIt.match(component.props.children).forEach(({index, lastIndex, text, url}: any) => {
+        const nonLinkedText = component.props.children.substring(_lastIndex, index);
+        nonLinkedText && elements.push(nonLinkedText);
+        _lastIndex = lastIndex;
+        if (this.props.linkText)
+          text =
+            typeof this.props.linkText === "function"
+              ? this.props.linkText(url)
+              : this.props.linkText;
+
+        const clickHandlerProps: any = {};
+        if (OS !== "web") {
+          if (this.props.onLongPress) {
+            clickHandlerProps.onLongPress = () => (this.props as any).onLongPress(url, text);
+          }
+        }
+        if (this.props.onPress) {
+          clickHandlerProps.onPress = () => (this.props as any).onPress(url, text);
+        }
+
+        let injected: any = {};
+        if (this.props.injectViewProps) {
+          injected = this.props.injectViewProps(url);
+        }
+
+        elements.push(
+          <Text
+            {...componentProps}
+            {...clickHandlerProps}
+            key={url + index}
+            style={[component.props.style, this.props.linkStyle]}
+            {...injected}
+          >
+            {text}
+          </Text>
+        );
+      });
+      elements.push(
+        component.props.children.substring(_lastIndex, component.props.children.length)
+      );
+      return React.cloneElement(component, componentProps, elements);
+    } catch (_error) {
+      return component;
+    }
+  };
+
+  parse = (component: any): React.ReactElement => {
+    const {props: {children} = {} as any} = component || {};
+    if (!children) return component;
+
+    const componentProps = {
+      ...component.props,
+      key: undefined,
+      ref: undefined,
+    };
+
+    const linkifyIt = this.props.linkify || linkifyLib;
+
+    return React.cloneElement(
+      component,
+      componentProps,
+      React.Children.map(children, (child) => {
+        const {type: {displayName} = {} as any} = child || {};
+        if (typeof child === "string" && linkifyIt.pretest(child))
+          return this.linkify(
+            <Text {...componentProps} style={component.props.style}>
+              {child}
+            </Text>
+          );
+        if (displayName === "Text" && !this.isTextNested(child)) return this.linkify(child);
+        return this.parse(child);
+      })
+    );
+  };
+
+  render() {
+    const {...viewProps} = this.props;
+    delete viewProps.onPress;
+    delete viewProps.linkDefault;
+    delete viewProps.onLongPress;
+    delete viewProps.linkStyle;
+
+    return (
+      <View {...viewProps} style={this.props.style}>
+        {!this.props.onPress && !this.props.onLongPress && !this.props.linkStyle
+          ? this.props.children
+          : (this.parse(this).props as {children?: React.ReactNode}).children}
+      </View>
+    );
+  }
+}
+
+export const Hyperlink = (props: HyperlinkProps) => {
+  const handleLink = (url: string) => {
+    const urlObject = mdurl.parse(url);
+    urlObject.protocol = urlObject.protocol.toLowerCase();
+    const normalizedURL = mdurl.format(urlObject);
+
+    void Linking.canOpenURL(normalizedURL).then(
+      (supported) => supported && Linking.openURL(normalizedURL)
+    );
+  };
+
+  const onPress = handleLink || props.onPress;
+  if (props.linkDefault) return <HyperlinkComponent {...props} onPress={onPress} />;
+  return <HyperlinkComponent {...props} />;
+};

package/src/Icon.tsx

@@ -0,0 +1,36 @@
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import type {FC} from "react";
+
+import {type IconProps, iconSizeToNumber} from "./Common";
+import {useTheme} from "./Theme";
+
+// TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used,
+// etc.
+// TODO: Add documentation for adding FA6-Pro icons.
+export const Icon: FC<IconProps> = ({
+  color = "primary",
+  size = "md",
+  iconName,
+  type = "solid",
+  testID,
+}) => {
+  const {theme} = useTheme();
+  const iconColor = theme.text[color] ?? color;
+  const iconSize = iconSizeToNumber(size);
+  return (
+    <FontAwesome6
+      brand={type === "brand"}
+      color={iconColor}
+      duotone={type === "duotone"}
+      light={type === "light" || type === "sharpLight"}
+      name={iconName}
+      regular={type === "regular"}
+      selectable={undefined}
+      sharp={type === "sharp"}
+      size={iconSize}
+      solid={type === "solid" || type === "sharpSolid"}
+      testID={testID}
+      thin={type === "thin"}
+    />
+  );
+};

package/src/IconButton.tsx

@@ -0,0 +1,217 @@
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import debounce from "lodash/debounce";
+import {type FC, useState} from "react";
+import {ActivityIndicator, Text as NativeText, Pressable, View} from "react-native";
+
+import type {IconButtonProps} from "./Common";
+import {isMobileDevice} from "./MediaQuery";
+import {Modal} from "./Modal";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+import {Tooltip} from "./Tooltip";
+import {Unifier} from "./Unifier";
+import {isNative} from "./Utilities";
+
+type ConfirmationModalProps = {
+  visible: boolean;
+  title: string;
+  subtitle?: string;
+  text: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+const ConfirmationModal: FC<ConfirmationModalProps> = ({
+  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 IconButtonComponent: FC<IconButtonProps> = ({
+  accessibilityHint,
+  accessibilityLabel,
+  confirmationHeading = "Confirm",
+  confirmationText = "Are you sure you want to continue?",
+  disabled = false,
+  iconName,
+  indicator,
+  indicatorText,
+  loading: propsLoading = false,
+  testID,
+  variant = "primary",
+  withConfirmation = false,
+  tooltipText,
+  onClick,
+}) => {
+  const [loading, setLoading] = useState(propsLoading);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const {theme} = useTheme();
+  let accessLabel = accessibilityLabel;
+  if (tooltipText && accessibilityLabel === "") {
+    accessLabel = tooltipText;
+  }
+
+  if (!theme) {
+    return null;
+  }
+
+  let backgroundColor = theme.surface.primary;
+  let color = theme.text.inverted;
+
+  if (disabled) {
+    backgroundColor = theme.surface.disabled;
+    color = theme.text.secondaryLight;
+  } else if (variant === "secondary") {
+    backgroundColor = theme.surface.neutralLight;
+    color = theme.surface.secondaryDark;
+  } else if (variant === "muted") {
+    backgroundColor = theme.text.inverted;
+    color = theme.surface.primary;
+  } else if (variant === "navigation") {
+    backgroundColor = theme.text.inverted;
+    color = theme.text.primary;
+  } else if (variant === "destructive") {
+    backgroundColor = theme.text.inverted;
+    color = theme.text.error;
+  }
+
+  const indicatorColor = indicator ? theme.surface[indicator] : undefined;
+
+  return (
+    <Pressable
+      accessibilityHint={
+        (accessibilityHint ?? withConfirmation)
+          ? `Opens a confirmation dialog to confirm ${accessLabel}`
+          : `Press to perform ${accessLabel} action`
+      }
+      aria-label={accessLabel}
+      aria-role="button"
+      disabled={loading || disabled}
+      onPress={debounce(
+        // TODO: Allow for a click outside of the confirmation modal to close it.
+        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",
+        backgroundColor,
+        borderRadius: theme.radius.rounded,
+        height: 32,
+        justifyContent: "center",
+        width: 32,
+      }}
+      testID={testID}
+    >
+      {loading ? (
+        <ActivityIndicator color={color} size="small" />
+      ) : (
+        <FontAwesome6
+          color={color}
+          name={iconName}
+          selectable={undefined}
+          size={variant === "navigation" ? 20 : 16}
+          solid
+        />
+      )}
+      {Boolean(indicator) && (
+        <View
+          style={{
+            alignItems: "center",
+            backgroundColor: indicatorColor,
+            borderRadius: 10,
+            bottom: 0,
+            display: "flex",
+            height: 12,
+            justifyContent: "center",
+            padding: theme.spacing.xs as any,
+            position: "absolute",
+            right: 0,
+            width: 12,
+          }}
+        >
+          {Boolean(indicatorText) && (
+            <NativeText
+              style={{
+                color: theme.text.inverted,
+                fontFamily: "text",
+                fontSize: 10,
+                fontWeight: 700,
+                textAlign: "center",
+              }}
+            >
+              {indicatorText}
+            </NativeText>
+          )}
+        </View>
+      )}
+      {withConfirmation && (
+        <ConfirmationModal
+          onCancel={() => setShowConfirmation(false)}
+          onConfirm={async () => {
+            await onClick();
+            setShowConfirmation(false);
+          }}
+          subtitle={undefined}
+          text={confirmationText}
+          title={confirmationHeading}
+          visible={showConfirmation}
+        />
+      )}
+    </Pressable>
+  );
+};
+
+export const IconButton: FC<IconButtonProps> = (props) => {
+  const {tooltipText, tooltipIdealPosition, tooltipIncludeArrow = false} = props;
+  const isMobileOrNative = isMobileDevice() || isNative();
+
+  if (tooltipText && !isMobileOrNative) {
+    return (
+      <Tooltip
+        idealPosition={tooltipIdealPosition}
+        includeArrow={tooltipIncludeArrow}
+        text={tooltipText}
+      >
+        <IconButtonComponent {...props} />
+      </Tooltip>
+    );
+  }
+
+  return <IconButtonComponent {...props} />;
+};

package/src/Image.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {Dimensions, Image as NativeImage} from "react-native";
+
+import {Box} from "./Box";
+import type {ImageProps} from "./Common";
+
+const {width: DEVICE_WIDTH} = Dimensions.get("window");
+
+export class Image extends React.Component<ImageProps, {}> {
+  resizeMode = (fit?: "cover" | "contain" | "none") => {
+    if (!fit || fit === "none") {
+      return undefined;
+    } else {
+      return fit;
+    }
+  };
+
+  width = () => {
+    if (this.props.naturalWidth) {
+      return this.props.naturalWidth;
+    } else if (this.props.fullWidth) {
+      return DEVICE_WIDTH;
+    }
+    throw new Error("Width required for Image");
+  };
+
+  height = () => {
+    if (this.props.naturalWidth) {
+      return this.props.naturalWidth;
+    }
+    return this.width() * (9 / 16);
+  };
+
+  render() {
+    return (
+      <Box color={this.props.color}>
+        <NativeImage
+          resizeMode={this.resizeMode(this.props.fit)}
+          source={{cache: "force-cache", uri: this.props.src}}
+          style={{
+            height: this.height(),
+            maxHeight: this.props.maxHeight,
+            maxWidth: this.props.maxWidth,
+            width: this.width(),
+            ...this.props.style,
+          }}
+        />
+      </Box>
+    );
+  }
+}

package/src/ImageBackground.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import {ImageBackground as ImageBackgroundNative} from "react-native";
+
+interface ImageBackgroundProps {
+  children?: any;
+  style?: any;
+  source: any;
+}
+
+export class ImageBackground extends React.Component<ImageBackgroundProps, {}> {
+  render() {
+    return <ImageBackgroundNative {...this.props} />;
+  }
+}

package/src/InfoModalIcon.tsx

@@ -0,0 +1,42 @@
+import {type FC, useState} from "react";
+import {Pressable} from "react-native";
+
+import type {InfoModalIconProps} from "./Common";
+import {Heading} from "./Heading";
+import {Modal} from "./Modal";
+
+export const InfoModalIcon: FC<InfoModalIconProps> = ({
+  infoModalChildren,
+  infoModalSubtitle,
+  infoModalText,
+  infoModalTitle,
+}) => {
+  const [infoModalVisibleState, setInfoModalVisibleState] = useState(false);
+  return (
+    <>
+      <Modal
+        onDismiss={() => setInfoModalVisibleState(false)}
+        primaryButtonOnClick={() => setInfoModalVisibleState(false)}
+        primaryButtonText="Close"
+        size="md"
+        subtitle={infoModalSubtitle}
+        text={infoModalText}
+        title={infoModalTitle}
+        visible={infoModalVisibleState}
+      >
+        {infoModalChildren}
+      </Modal>
+      <Pressable
+        aria-role="button"
+        hitSlop={{bottom: 10, left: 10, right: 10, top: 10}}
+        onPress={() => setInfoModalVisibleState(true)}
+        style={{marginLeft: 8}}
+        testID="info-icon"
+      >
+        <Heading color="secondaryLight" size="sm">
+          ⓘ
+        </Heading>
+      </Pressable>
+    </>
+  );
+};