ferns-ui 0.22.5 → 0.23.0

package/dist/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from "./CheckBox";
 export * from "./DateTimeActionSheet";
 export * from "./ErrorBoundary";
 export * from "./ErrorPage";
+export * from "./FernsProvider";
 export * from "./FlatList";
 export * from "./Field";
 export * from "./Form";
@@ -22,6 +23,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
+export * from "./InfoTooltipButton";
 export * from "./Link";
 export * from "./Mask";
 export * from "./Meta";
@@ -38,6 +40,8 @@ export * from "./TapToEdit";
 export * from "./Text";
 export * from "./TextArea";
 export * from "./TextField";
+export * from "./Tooltip";
+export * from "./Toast";
 export * from "./UnifiedScreens";
 export * from "./Unifier";
 export * from "./WithLabel";

package/dist/index.js

@@ -13,6 +13,7 @@ export * from "./CheckBox";
 export * from "./DateTimeActionSheet";
 export * from "./ErrorBoundary";
 export * from "./ErrorPage";
+export * from "./FernsProvider";
 export * from "./FlatList";
 export * from "./Field";
 export * from "./Form";
@@ -22,6 +23,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
+export * from "./InfoTooltipButton";
 // export * from "./Layout";
 // export * from "./Drawer";
 export * from "./Link";
@@ -40,6 +42,8 @@ export * from "./TapToEdit";
 export * from "./Text";
 export * from "./TextArea";
 export * from "./TextField";
+export * from "./Tooltip";
+export * from "./Toast";
 export * from "./UnifiedScreens";
 export * from "./Unifier";
 export * from "./WithLabel";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.22.5",
+  "version": "0.23.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -167,6 +167,7 @@
     "react-native-picker-select": "^8.0.0",
     "react-native-portalize": "^1.0.7",
     "react-native-svg": "^13.0.0",
+    "react-native-toast-notifications": "^3.3.1",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-time-picker": "^5.0.0",
@@ -198,6 +199,7 @@
     "react-native-picker-select": "^8.0.0",
     "react-native-portalize": "^1.0.7",
     "react-native-svg": "^13.0.0",
+    "react-native-toast-notifications": "^3.3.1",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-time-picker": "^5.0.0"

package/src/Button.tsx

@@ -29,6 +29,7 @@ export interface ButtonProps {
   withConfirmation?: boolean;
   confirmationText?: string;
   confirmationHeading?: string;
+  shape?: "rounded" | "pill";
 }
 
 const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
@@ -67,6 +68,7 @@ export function Button({
   withConfirmation = false,
   confirmationText = "Are you sure you want to continue?",
   confirmationHeading = "Confirm",
+  shape = "rounded",
 }: ButtonProps) {
   const [loading, setLoading] = useState(propsLoading);
   const [showConfirmation, setShowConfirmation] = useState(false);
@@ -136,7 +138,7 @@ export function Button({
           // flexGrow: inline ? 0 : 1,
           alignItems: "center",
           justifyContent: "center",
-          borderRadius: 5,
+          borderRadius: shape === "pill" ? 999 : 5,
           borderColor: getBorderColor(color),
           borderWidth: type === "outline" ? 2 : 0,
           opacity: disabled ? 0.4 : 1,

package/src/Common.ts

@@ -2004,25 +2004,12 @@ export interface IconProps {
   containerStyle?: any;
 }
 
-export interface IconButtonProps {
-  prefix?: IconPrefix;
-  icon: IconName;
-  accessibilityLabel: string;
-  iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
-  onClick: () => void;
-  size?: IconSize;
-  bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white"; // default transparent
-  disabled?: boolean;
-  selected?: boolean;
-  withConfirmation?: boolean;
-  confirmationText?: string;
-  confirmationHeading?: string;
-}
-
 export interface NavigatorProps {
   config?: any;
 }
 
+export type TooltipDirection = "top" | "bottom" | "left" | "right";
+
 export interface PillProps {
   text: string;
   color: AllColors;

package/src/FernsProvider.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import {ToastProvider} from "react-native-toast-notifications";
+
+import {Toast} from "./Toast";
+
+export function FernsProvider({children}: {children: React.ReactNode}): React.ReactElement {
+  return (
+    <ToastProvider
+      animationDuration={250}
+      animationType="slide-in"
+      duration={50000}
+      offset={50}
+      placement="bottom"
+      renderToast={(toastOptions) => <Toast {...(toastOptions as any)} />}
+      swipeEnabled
+    >
+      {children}
+    </ToastProvider>
+  );
+}

package/src/IconButton.tsx

@@ -1,89 +1,141 @@
-import React, {useState} from "react";
-import {TouchableOpacity} from "react-native";
+import React, {forwardRef, useState} from "react";
+import {Platform, TouchableOpacity, View} from "react-native";
 
-import {IconButtonProps, iconSizeToNumber} from "./Common";
+import {
+  ButtonColor,
+  Color,
+  IconName,
+  IconPrefix,
+  IconSize,
+  iconSizeToNumber,
+  ThemeColor,
+  TooltipDirection,
+} from "./Common";
 import {Icon} from "./Icon";
 import {Modal} from "./Modal";
 import {Text} from "./Text";
+import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 
-export function IconButton({
-  prefix,
-  icon,
-  iconColor,
-  onClick,
-  size,
-  bgColor = "transparent",
-  withConfirmation = false,
-  confirmationText = "Are you sure you want to continue?",
-  confirmationHeading = "Confirm",
-}: IconButtonProps) {
-  const [showConfirmation, setShowConfirmation] = useState(false);
+export interface IconButtonProps {
+  prefix?: IconPrefix;
+  icon: IconName;
+  accessibilityLabel: string;
+  iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
+  onClick: () => void;
+  size?: IconSize;
+  bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white"; // default transparent
+  disabled?: boolean;
+  selected?: boolean;
+  withConfirmation?: boolean;
+  confirmationText?: string;
+  confirmationHeading?: string;
+  tooltip?: {
+    text: string;
+    idealDirection?: TooltipDirection;
+  };
+}
 
-  let opacity = 1;
-  let color;
-  if (bgColor === "transparentDarkGray") {
-    opacity = 0.8;
-    color = Unifier.theme.darkGray;
-  } else if (bgColor === "transparent" || !bgColor) {
-    opacity = 0.0;
-    color = Unifier.theme.white;
-  } else {
-    color = Unifier.theme[bgColor];
-  }
+// 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,
+    }: IconButtonProps,
+    ref
+  ) => {
+    const [showConfirmation, setShowConfirmation] = useState(false);
 
-  const renderConfirmation = () => {
-    return (
-      <Modal
-        heading={confirmationHeading}
-        primaryButtonOnClick={() => {
-          onClick();
-          setShowConfirmation(false);
-        }}
-        primaryButtonText="Confirm"
-        secondaryButtonOnClick={(): void => setShowConfirmation(false)}
-        secondaryButtonText="Cancel"
-        size="sm"
-        visible={showConfirmation}
-        onDismiss={(): void => {
-          setShowConfirmation(false);
-        }}
-      >
-        <Text>{confirmationText}</Text>
-      </Modal>
-    );
-  };
+    let opacity = 1;
+    let color: string;
+    if (bgColor === "transparentDarkGray") {
+      opacity = 0.8;
+      color = Unifier.theme.darkGray;
+    } else if (bgColor === "transparent" || !bgColor) {
+      opacity = 1.0;
+      color = Unifier.theme.white;
+    } else {
+      color = Unifier.theme[bgColor];
+    }
 
-  return (
-    <>
-      <TouchableOpacity
-        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",
-        }}
-        onPress={() => {
-          Unifier.utils.haptic();
-          if (withConfirmation && !showConfirmation) {
-            setShowConfirmation(true);
-          } else if (onClick) {
+    const renderConfirmation = () => {
+      return (
+        <Modal
+          heading={confirmationHeading}
+          primaryButtonOnClick={() => {
             onClick();
-          }
-        }}
-      >
-        <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
-      </TouchableOpacity>
-      {Boolean(withConfirmation) && renderConfirmation()}
-    </>
-  );
-}
+            setShowConfirmation(false);
+          }}
+          primaryButtonText="Confirm"
+          secondaryButtonOnClick={(): void => setShowConfirmation(false)}
+          secondaryButtonText="Cancel"
+          size="sm"
+          visible={showConfirmation}
+          onDismiss={(): void => {
+            setShowConfirmation(false);
+          }}
+        >
+          <Text>{confirmationText}</Text>
+        </Modal>
+      );
+    };
+
+    function renderIconButton(): React.ReactElement {
+      return (
+        <View>
+          <TouchableOpacity
+            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",
+            }}
+            onPress={() => {
+              Unifier.utils.haptic();
+              if (withConfirmation && !showConfirmation) {
+                setShowConfirmation(true);
+              } else if (onClick) {
+                onClick();
+              }
+            }}
+          >
+            <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
+          </TouchableOpacity>
+          {Boolean(withConfirmation) && renderConfirmation()}
+        </View>
+      );
+    }
+
+    // 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();
+    }
+  }
+);

package/src/InfoTooltipButton.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import {IconSize} from "./Common";
+import {IconButton} from "./IconButton";
+
+interface InfoTooltipButtonProps {
+  text: string;
+  size?: IconSize;
+}
+
+export function InfoTooltipButton({text, size}: InfoTooltipButtonProps): React.ReactElement {
+  return (
+    <IconButton
+      accessibilityLabel="info"
+      bgColor="transparent"
+      icon="exclamation"
+      iconColor="blue"
+      size={size}
+      tooltip={{text}}
+      onClick={() => {}}
+    />
+  );
+}

package/src/SelectList.tsx

@@ -1,6 +1,8 @@
 import React from "react";
+import {Platform} from "react-native";
 
 import {FieldWithLabelsProps, StyleProp} from "./Common";
+import {Icon} from "./Icon";
 import RNPickerSelect from "./PickerSelect";
 import {Unifier} from "./Unifier";
 import {WithLabel} from "./WithLabel";
@@ -34,6 +36,12 @@ export function SelectList({
   return (
     <WithLabel {...withLabelProps}>
       <RNPickerSelect
+        // Icon only needed for iOs, web and android use default icons
+        Icon={() => {
+          return Platform.OS === "ios" ? (
+            <Icon color="darkGray" name="angle-down" size="md" />
+          ) : null;
+        }}
         items={options}
         placeholder={placeholder ? {label: placeholder, value: ""} : {}}
         style={{
@@ -43,14 +51,28 @@ export function SelectList({
             alignItems: style?.alignItems || "center",
             minHeight: style?.minHeight || 50,
             width: style?.width || "100%",
-            // Add padding so the border doesn't mess up layouts
-            paddingHorizontal: style?.paddingHorizontal || 6,
-            paddingVertical: style?.paddingVertical || 4,
             borderColor: style?.borderColor || Unifier.theme.gray,
             borderWidth: style?.borderWidth || 1,
             borderRadius: style?.borderRadius || 5,
             backgroundColor: style?.backgroundColor || Unifier.theme.white,
           },
+          inputIOS: {
+            paddingVertical: 12,
+            paddingHorizontal: 10,
+            paddingRight: 30,
+          },
+          iconContainer: {
+            top: 13,
+            right: 10,
+            bottom: 12,
+            paddingLeft: 40,
+          },
+          inputWeb: {
+            // Add padding so the border doesn't mess up layouts
+            paddingHorizontal: style?.paddingHorizontal || 6,
+            paddingVertical: style?.paddingVertical || 4,
+            borderRadius: style?.borderRadius || 5,
+          },
         }}
         value={value}
         onValueChange={onChange}

package/src/TapToEdit.tsx

@@ -110,6 +110,27 @@ export const TapToEdit = ({
       } else if (fieldProps?.type === "multiselect") {
         // ???
         displayValue = value.join(", ");
+      } else if (fieldProps?.type === "address") {
+        let city = "";
+        if (value?.city) {
+          city = value?.state || value.zipcode ? `${value.city}, ` : `${value.city}`;
+        }
+
+        let state = "";
+        if (value?.state) {
+          state = value?.zipcode ? `${value.state} ` : `${value.state}`;
+        }
+
+        const zip = value?.zipcode;
+
+        const addressLineOne = value?.address1 ?? "";
+        const addressLineTwo = value?.address2 ?? "";
+        const addressLineThree = `${city}${state}${zip}`;
+
+        // Only add new lines if lines before and after are not empty to avoid awkward whitespace
+        displayValue = `${addressLineOne}${
+          addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
+        }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
       }
     }
     return (

package/src/Toast.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {Dimensions} from "react-native";
+import {useToast as useRNToast} from "react-native-toast-notifications";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {AllColors} from "./Common";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+
+export function useToast(): any {
+  const toast = useRNToast();
+  return {
+    show: (
+      text: string,
+      options?: {
+        variant?: "default" | "warning" | "error";
+        buttonText?: string;
+        buttonOnClick: () => void | Promise<void>;
+      }
+    ): string => {
+      return toast.show(text, {
+        data: options,
+      });
+    },
+    hide: (id: string) => toast.hide(id),
+  };
+}
+
+export function Toast({
+  message,
+  data,
+}: {
+  message: string;
+  data: {
+    variant?: "default" | "warning" | "error";
+    buttonText?: string;
+    buttonOnClick?: () => void | Promise<void>;
+  };
+}): React.ReactElement {
+  // margin 8 on either side, times the standard 4px we multiply by.
+  const width = Math.min(Dimensions.get("window").width - 16 * 4, 712);
+  const {variant, buttonText, buttonOnClick} = data ?? {};
+  let color: AllColors = "darkGray";
+  if (variant === "warning") {
+    color = "orange";
+  } else if (variant === "error") {
+    color = "red";
+  }
+  return (
+    <Box
+      alignItems="center"
+      color={color}
+      direction="row"
+      flex="shrink"
+      marginBottom={4}
+      marginLeft={8}
+      marginRight={8}
+      maxWidth={width}
+      padding={2}
+      paddingX={4}
+      paddingY={3}
+      rounding={4}
+    >
+      {Boolean(variant === "error") && (
+        <Box marginRight={4}>
+          <Icon color="white" name="exclamation-circle" size="lg" />
+        </Box>
+      )}
+      {Boolean(variant === "warning") && (
+        <Box marginRight={4}>
+          <Icon color="white" name="exclamation-triangle" size="lg" />
+        </Box>
+      )}
+      <Box alignItems="center" direction="column" flex="shrink" justifyContent="center">
+        <Text color="white" size="lg" weight="bold">
+          {message}
+        </Text>
+      </Box>
+      {Boolean(buttonOnClick && buttonText) && (
+        <Box alignItems="center" justifyContent="center" marginLeft={4}>
+          <Button color="lightGray" shape="pill" text={buttonText!} onClick={buttonOnClick} />
+        </Box>
+      )}
+    </Box>
+  );
+}