ferns-ui 0.47.10 → 1.0.0

package/src/IconButton.tsx

@@ -1,176 +1,208 @@
-import React, {forwardRef, useContext, useState} from "react";
-import {Platform, Pressable, View, ViewStyle} from "react-native";
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import debounce from "lodash/debounce";
+import React, {FC, useState} from "react";
+import {ActivityIndicator, Pressable, Text as NativeText, View} from "react-native";
 
-import {Box} from "./Box";
-import {IconButtonProps, iconSizeToNumber} from "./Common";
-import {Icon} from "./Icon";
+import {IconButtonProps} from "./Common";
+import {isMobileDevice} from "./MediaQuery";
 import {Modal} from "./Modal";
 import {Text} from "./Text";
-import {ThemeContext} from "./Theme";
+import {useTheme} from "./Theme";
 import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
+import {isNative} from "./Utilities";
 
-// eslint-disable-next-line react/display-name
-export const IconButton = forwardRef(
-  (
-    {
-      prefix,
-      icon,
-      iconColor,
-      onClick,
-      size,
-      bgColor = "transparent",
-      withConfirmation = false,
-      confirmationText = "Are you sure you want to continue?",
-      confirmationHeading = "Confirm",
-      tooltip,
-      indicator,
-      indicatorNumber,
-      indicatorStyle = {position: "bottomRight", color: "primary"},
-      testID,
-    }: IconButtonProps,
-    ref
-  ) => {
-    const {theme} = useContext(ThemeContext);
-    const [showConfirmation, setShowConfirmation] = useState(false);
+type ConfirmationModalProps = {
+  visible: boolean;
+  title: string;
+  subtitle?: string;
+  text: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
 
-    const opacity = 1;
-    let color: string;
-    if (bgColor === "transparentDarkGray") {
-      color = "rgba(0, 0, 0, 0.5)";
-    } else if (bgColor === "transparent" || !bgColor) {
-      color = "rgba(0, 0, 0, 0.0)";
-    } else {
-      color = theme[bgColor];
-    }
+const ConfirmationModal: FC<ConfirmationModalProps> = ({
+  visible,
+  title,
+  subtitle,
+  text,
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <Modal
+      primaryButtonOnClick={onConfirm}
+      primaryButtonText="Confirm"
+      secondaryButtonOnClick={onCancel}
+      secondaryButtonText="Cancel"
+      subtitle={subtitle}
+      title={title}
+      visible={visible}
+      onDismiss={onCancel}
+    >
+      <Text>{text}</Text>
+    </Modal>
+  );
+};
 
-    const IndicatorPosition = {
-      bottomRight: {bottom: "20%", right: "20%"},
-      bottomLeft: {bottom: "20%", left: "20%"},
-      topRight: {top: "20%", right: "20%"},
-      topLeft: {top: "20%", left: "20%"},
-    };
+const IconButtonComponent: FC<IconButtonProps> = ({
+  accessibilityHint,
+  accessibilityLabel,
+  confirmationHeading = "Confirm",
+  confirmationText = "Are you sure you want to continue?",
+  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;
+  }
 
-    const indicatorPosition = {position: "absolute", ...IndicatorPosition[indicatorStyle.position]};
+  if (!theme) {
+    return null;
+  }
 
-    const IndicatorNumPosition = {
-      bottomRight: {bottom: "18%", right: "12%"},
-      bottomLeft: {bottom: "10%", left: "10%"},
-      topRight: {top: "-5%", right: "-5%"},
-      topLeft: {top: "10%", left: "10%"},
-    };
+  let backgroundColor = theme.surface.primary;
+  let color = theme.text.inverted;
 
-    const numberIndicatorProps = {
-      position: "absolute",
-      ...IndicatorNumPosition[indicatorStyle.position],
-    };
+  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;
+  }
 
-    function renderIndicator(): React.ReactElement | null {
-      if (indicator && indicatorNumber && indicatorNumber > 0) {
-        return (
-          <View style={numberIndicatorProps as ViewStyle}>
-            <Box
-              alignItems="center"
-              color={indicatorStyle.color}
-              dangerouslySetInlineStyle={{
-                __style: {
-                  padding: indicatorNumber && indicatorNumber > 9 ? 2 : 0,
-                },
-              }}
-              justifyContent="center"
-              minHeight={15}
-              minWidth={15}
-              rounding="pill"
-            >
-              <Text color="white" size="sm" weight="bold">
-                {indicatorNumber}
-              </Text>
-            </Box>
-          </View>
-        );
-      } else if (indicator) {
-        return (
-          <View style={indicatorPosition as ViewStyle}>
-            <Icon color={indicatorStyle.color} name="circle" prefix={prefix || "fas"} size="sm" />
-          </View>
-        );
-      } else {
-        return null;
-      }
-    }
+  const indicatorColor = indicator ? theme.surface[indicator] : undefined;
 
-    const renderConfirmation = () => {
-      return (
-        <Modal
-          heading={confirmationHeading}
-          primaryButtonOnClick={() => {
-            onClick();
-            setShowConfirmation(false);
+  return (
+    <Pressable
+      accessibilityHint={
+        accessibilityHint ?? withConfirmation
+          ? `Opens a confirmation dialog to confirm ${accessLabel}`
+          : `Press to perform ${accessLabel} action`
+      }
+      accessibilityLabel={accessLabel}
+      accessibilityRole="button"
+      disabled={loading}
+      style={{
+        alignItems: "center",
+        backgroundColor,
+        borderRadius: theme.radius.rounded,
+        justifyContent: "center",
+        height: 32,
+        width: 32,
+      }}
+      testID={testID}
+      onPress={debounce(
+        async () => {
+          await Unifier.utils.haptic();
+          setLoading(true);
+          try {
+            if (withConfirmation && !showConfirmation) {
+              setShowConfirmation(true);
+            } else if (onClick) {
+              await onClick();
+            }
+          } catch (error) {
+            setLoading(false);
+            throw error;
+          }
+          setLoading(false);
+        },
+        500,
+        {leading: true}
+      )}
+    >
+      {Boolean(loading) ? (
+        <ActivityIndicator color={color} size="small" />
+      ) : (
+        <FontAwesome6
+          color={color}
+          name={iconName}
+          size={variant === "navigation" ? 20 : 16}
+          solid
+        />
+      )}
+      {Boolean(indicator) && (
+        <View
+          style={{
+            display: "flex",
+            height: 12,
+            width: 12,
+            borderRadius: 10,
+            padding: theme.spacing.xs as any,
+            backgroundColor: indicatorColor,
+            position: "absolute",
+            alignItems: "center",
+            justifyContent: "center",
+            bottom: 0,
+            right: 0,
           }}
-          primaryButtonText="Confirm"
-          secondaryButtonOnClick={(): void => setShowConfirmation(false)}
-          secondaryButtonText="Cancel"
-          size="sm"
+        >
+          {Boolean(indicatorText) && (
+            <NativeText
+              style={{
+                color: theme.text.inverted,
+                textAlign: "center",
+                fontFamily: "text",
+                fontSize: 10,
+                fontWeight: 700,
+              }}
+            >
+              {indicatorText}
+            </NativeText>
+          )}
+        </View>
+      )}
+      {withConfirmation && (
+        <ConfirmationModal
+          subtitle={undefined}
+          text={confirmationText}
+          title={confirmationHeading}
           visible={showConfirmation}
-          onDismiss={(): void => {
+          onCancel={() => setShowConfirmation(false)}
+          onConfirm={async () => {
+            await onClick();
             setShowConfirmation(false);
           }}
-        >
-          <Text>{confirmationText}</Text>
-        </Modal>
-      );
-    };
-
-    function renderIconButton(): React.ReactElement {
-      return (
-        <>
-          <Pressable
-            ref={ref as any}
-            hitSlop={{top: 10, left: 10, bottom: 10, right: 10}}
-            style={{
-              opacity,
-              backgroundColor: color,
-              borderRadius: 100,
-              // paddingBottom: iconSizeToNumber(size) / 4,
-              // paddingTop: iconSizeToNumber(size) / 4,
-              // paddingLeft: iconSizeToNumber(size) / 2,
-              // paddingRight: iconSizeToNumber(size) / 2,
-              width: iconSizeToNumber(size) * 2.5,
-              height: iconSizeToNumber(size) * 2.5,
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-            testID={testID}
-            onPress={async () => {
-              await Unifier.utils.haptic();
-              if (withConfirmation && !showConfirmation) {
-                setShowConfirmation(true);
-              } else if (onClick) {
-                onClick();
-              }
-            }}
-          >
-            <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
-            {renderIndicator()}
-          </Pressable>
+        />
+      )}
+    </Pressable>
+  );
+};
 
-          {Boolean(withConfirmation) && renderConfirmation()}
-        </>
-      );
-    }
+export const IconButton: FC<IconButtonProps> = (props) => {
+  const {tooltipText, tooltipIdealPosition, tooltipIncludeArrow = false} = props;
+  const isMobileOrNative = isMobileDevice() || isNative();
 
-    // Only add for web. This doesn't make much sense for mobile,
-    // since the action would be performed for the button as well as the tooltip appearing. TODO:
-    // Add tooltip info button next to the icon button on mobile.
-    if (tooltip && Platform.OS === "web") {
-      return (
-        <Tooltip idealDirection={tooltip.idealDirection} text={tooltip.text}>
-          {renderIconButton()}
-        </Tooltip>
-      );
-    } else {
-      return renderIconButton();
-    }
+  if (tooltipText && !isMobileOrNative) {
+    return (
+      <Tooltip
+        idealPosition={tooltipIdealPosition}
+        includeArrow={tooltipIncludeArrow}
+        text={tooltipText}
+      >
+        <IconButtonComponent {...props} />
+      </Tooltip>
+    );
   }
-);
+
+  return <IconButtonComponent {...props} />;
+};

package/src/InfoTooltipButton.tsx

@@ -3,15 +3,13 @@ import React from "react";
 import {InfoTooltipButtonProps} from "./Common";
 import {IconButton} from "./IconButton";
 
-export const InfoTooltipButton = ({text, size}: InfoTooltipButtonProps): React.ReactElement => {
+export const InfoTooltipButton = ({text}: InfoTooltipButtonProps): React.ReactElement => {
   return (
     <IconButton
+      accessibilityHint="Show info tooltip"
       accessibilityLabel="info"
-      bgColor="transparent"
-      icon="exclamation"
-      iconColor="blue"
-      size={size}
-      tooltip={{text}}
+      iconName="exclamation"
+      tooltipText={text}
       onClick={() => {}}
     />
   );

package/src/Link.tsx

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

package/src/MobileAddressAutoComplete.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useRef, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {TextStyle, TouchableOpacity, View} from "react-native";
 import {
   GooglePlacesAutocomplete,
@@ -8,7 +8,7 @@ import {
 import {AddressAutocompleteProps} from "./Common";
 import {GOOGLE_PLACES_API_RESTRICTIONS} from "./Constants";
 import {TextField} from "./TextField";
-import {ThemeContext} from "./Theme";
+import {useTheme} from "./Theme";
 import {processAddressComponents} from "./Utilities";
 
 export const MobileAddressAutocomplete = ({
@@ -22,7 +22,7 @@ export const MobileAddressAutocomplete = ({
   handleAutoCompleteChange,
   testID,
 }: AddressAutocompleteProps) => {
-  const {theme} = useContext(ThemeContext);
+  const {theme} = useTheme();
   const ref = useRef<GooglePlacesAutocompleteRef | null>(null);
   const [isFocused, setIsFocused] = useState(false);
 
@@ -36,20 +36,20 @@ export const MobileAddressAutocomplete = ({
   }, []);
 
   const textInputContainerStyles = {
-    backgroundColor: theme.white,
-    borderColor: isFocused ? theme.blue : theme.gray,
+    backgroundColor: theme.surface.base,
+    borderColor: isFocused ? theme.border.hover : theme.border.default,
     borderWidth: isFocused ? 5 : 1,
-    borderRadius: 16,
+    borderRadius: theme.radius.default,
     paddingHorizontal: isFocused ? 10 : 14,
     paddingVertical: isFocused ? 0 : 4,
     ...(styles?.textInputContainer as object),
   };
 
   const textInputStyles = {
-    backgroundColor: theme.white,
-    borderRadius: 16,
-    color: theme.darkGray,
-    fontFamily: theme.primaryFont,
+    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,
@@ -63,7 +63,6 @@ export const MobileAddressAutocomplete = ({
       <TextField
         disabled={disabled}
         id="address1"
-        label="Street Address"
         testID={testID}
         type="text"
         value={inputValue}
@@ -73,7 +72,12 @@ export const MobileAddressAutocomplete = ({
   }
 
   return (
-    <TouchableOpacity activeOpacity={1} style={{flex: 1}} onPress={() => setIsFocused(false)}>
+    <TouchableOpacity
+      accessibilityRole="button"
+      activeOpacity={1}
+      style={{flex: 1}}
+      onPress={() => setIsFocused(false)}
+    >
       <View>
         <GooglePlacesAutocomplete
           ref={ref}
@@ -101,7 +105,7 @@ export const MobileAddressAutocomplete = ({
             onFocus: () => setIsFocused(true),
             onBlur: () => setIsFocused(false),
             onChange: (event) => {
-              handleAddressChange({value: event.nativeEvent.text});
+              handleAddressChange(event.nativeEvent.text);
             },
           }}
           onPress={(data, details = null) => {