ferns-ui 0.22.4 → 0.23.0

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>
+  );
+}

package/src/Tooltip.tsx

@@ -0,0 +1,259 @@
+import * as React from "react";
+import {forwardRef} from "react";
+import {
+  Dimensions,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  Platform,
+  Pressable,
+  View,
+} from "react-native";
+import {Portal} from "react-native-portalize";
+
+import {TooltipDirection} from "./Common";
+import {Text} from "./Text";
+import {Unifier} from "./Unifier";
+
+const TOOLTIP_OFFSET = 8;
+// How many pixels to leave between the tooltip and the edge of the screen
+const TOOLTIP_OVERFLOW_PADDING = 20;
+
+type ChildrenMeasurement = {
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+};
+
+type Measurement = {
+  children: ChildrenMeasurement;
+  tooltip: LayoutRectangle;
+  measured: boolean;
+  idealDirection?: TooltipDirection;
+};
+
+const overflowLeft = (x: number): boolean => {
+  return x < TOOLTIP_OVERFLOW_PADDING;
+};
+
+const overflowRight = (x: number): boolean => {
+  const {width: layoutWidth} = Dimensions.get("window");
+  return x + TOOLTIP_OVERFLOW_PADDING > layoutWidth;
+};
+
+const getTooltipPosition = ({
+  children,
+  tooltip,
+  measured,
+  idealDirection,
+}: Measurement): {} | {left: number; top: number} => {
+  if (!measured) {
+    console.debug("No measurements for child yet, cannot show tooltip.");
+    return {};
+  }
+
+  const {
+    pageY: childrenY,
+    height: childrenHeight,
+    pageX: childrenX,
+    width: childrenWidth,
+  }: ChildrenMeasurement = children;
+  const {width: tooltipWidth, height: tooltipHeight} = tooltip;
+  const horizontalCenter = childrenX + childrenWidth / 2;
+  const right = childrenX + childrenWidth + TOOLTIP_OFFSET;
+  const left = childrenX - tooltipWidth - TOOLTIP_OFFSET;
+
+  const top = childrenY - tooltipHeight - TOOLTIP_OFFSET;
+  const bottom = childrenY + childrenHeight + TOOLTIP_OFFSET;
+  const verticalCenter = top + childrenHeight + TOOLTIP_OFFSET;
+
+  // Top is overflowed if it would go off either side or the top of the screen.
+  const overflowTop = top < TOOLTIP_OVERFLOW_PADDING;
+
+  // Bottom is overflowed if it would go off either side or the bottom of the screen.
+  const overflowBottom =
+    bottom + tooltipHeight + TOOLTIP_OVERFLOW_PADDING > Dimensions.get("window").height;
+
+  // If it would overflow to the right, try to put it above, if not, put it on the left.
+  // If it would overflow to the left, try to put it above, if not, put it to the right.
+
+  // Happy path:
+  if (idealDirection === "left" && !overflowLeft(left)) {
+    return {left, top: verticalCenter};
+  } else if (idealDirection === "right" && !overflowRight(right + tooltipWidth)) {
+    return {left: right, top: verticalCenter};
+  } else if (
+    idealDirection === "bottom" &&
+    !overflowBottom &&
+    !overflowLeft(horizontalCenter - tooltipWidth) &&
+    !overflowRight(horizontalCenter + tooltipWidth)
+  ) {
+    return {left: horizontalCenter - tooltipWidth / 2, top: bottom};
+  } else {
+    // At this point, we're either trying to place it above or below, and force it into the viewport.
+
+    let y = top;
+    if ((idealDirection === "bottom" && !overflowBottom) || overflowTop) {
+      y = bottom;
+    }
+
+    // If it fits in the viewport, center it above the child.
+    if (
+      !overflowLeft(horizontalCenter - tooltipWidth) &&
+      !overflowRight(horizontalCenter + tooltipWidth)
+    ) {
+      return {left: horizontalCenter - tooltipWidth / 2, top: y};
+    }
+    // Failing that, if it fits on the left, put it there, otherwise to the right. We know it's smaller than the
+    // viewport.
+    else if (overflowLeft(horizontalCenter - tooltipWidth)) {
+      return {left: TOOLTIP_OVERFLOW_PADDING, top: y};
+    } else {
+      return {
+        left: Dimensions.get("window").width - TOOLTIP_OVERFLOW_PADDING - tooltipWidth,
+        top: y,
+      };
+    }
+  }
+};
+
+interface TooltipProps {
+  children: React.ReactElement;
+  text: string;
+  idealDirection?: "top" | "bottom" | "left" | "right";
+  bgColor?: "white" | "lightGray" | "gray" | "darkGray";
+}
+
+// eslint-disable-next-line react/display-name
+export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
+  const {text, children, bgColor, idealDirection} = props;
+  const hoverDelay = 500;
+  const hoverEndDelay = 1500;
+  const [visible, setVisible] = React.useState(false);
+
+  const [measurement, setMeasurement] = React.useState({
+    children: {},
+    tooltip: {},
+    measured: false,
+  });
+  const showTooltipTimer = React.useRef<NodeJS.Timeout>();
+  const hideTooltipTimer = React.useRef<NodeJS.Timeout>();
+  const childrenWrapperRef = React.useRef() as React.MutableRefObject<View>;
+
+  const touched = React.useRef(false);
+
+  const isWeb = Platform.OS === "web";
+
+  React.useEffect(() => {
+    return () => {
+      if (showTooltipTimer.current) {
+        clearTimeout(showTooltipTimer.current);
+      }
+
+      if (hideTooltipTimer.current) {
+        clearTimeout(hideTooltipTimer.current);
+      }
+    };
+  }, []);
+
+  const handleOnLayout = ({nativeEvent: {layout}}: LayoutChangeEvent) => {
+    childrenWrapperRef?.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setMeasurement({
+        children: {pageX, pageY, height, width},
+        tooltip: {...layout},
+        measured: true,
+      });
+    });
+  };
+
+  const handleTouchStart = () => {
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    showTooltipTimer.current = setTimeout(() => {
+      touched.current = true;
+      setVisible(true);
+    }, 100) as unknown as NodeJS.Timeout;
+  };
+
+  const handleHoverIn = () => {
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    showTooltipTimer.current = setTimeout(() => {
+      touched.current = true;
+      setVisible(true);
+    }, hoverDelay) as unknown as NodeJS.Timeout;
+  };
+
+  const handleHoverOut = () => {
+    touched.current = false;
+    if (showTooltipTimer.current) {
+      clearTimeout(showTooltipTimer.current);
+    }
+
+    hideTooltipTimer.current = setTimeout(() => {
+      setVisible(false);
+      setMeasurement({children: {}, tooltip: {}, measured: false});
+    }, hoverEndDelay) as unknown as NodeJS.Timeout;
+  };
+
+  const mobilePressProps = {
+    onPress: React.useCallback(() => {
+      if (touched.current) {
+        return null;
+      } else {
+        return children.props.onClick?.();
+      }
+    }, [children.props]),
+  };
+
+  const webPressProps = {
+    onHoverIn: () => {
+      handleHoverIn();
+      children.props.onHoverIn?.();
+    },
+    onHoverOut: () => {
+      handleHoverOut();
+      children.props.onHoverOut?.();
+    },
+  };
+
+  return (
+    <>
+      {visible && (
+        <Portal>
+          <Pressable
+            style={{
+              alignSelf: "flex-start",
+              justifyContent: "center",
+              paddingHorizontal: 16,
+              backgroundColor: Unifier.theme[bgColor ?? "darkGray"],
+              borderRadius: 16,
+              paddingVertical: 8,
+              display: "flex",
+              flexShrink: 1,
+              maxWidth: Math.max(Dimensions.get("window").width - 32, 300),
+              ...getTooltipPosition({...(measurement as Measurement), idealDirection}),
+              ...(measurement.measured ? {opacity: 1} : {opacity: 0}),
+            }}
+            testID="tooltip-container"
+            onLayout={handleOnLayout}
+            onPress={() => {
+              setVisible(false);
+            }}
+          >
+            <Text color="white">{text}</Text>
+          </Pressable>
+        </Portal>
+      )}
+      <Pressable onTouchStart={handleTouchStart} {...(isWeb ? webPressProps : mobilePressProps)}>
+        {React.cloneElement(children, {
+          ref: childrenWrapperRef,
+        })}
+      </Pressable>
+    </>
+  );
+});

package/src/index.tsx

@@ -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";
@@ -41,6 +43,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/README.md

@@ -1,22 +0,0 @@
-# @ferns/ui
-
-This package provides an abstraction for React (web) and React-Native code,
-so the code and components you write work the same on both platforms. It does this
-by creating a higher level abstraction over both and providing components
-that work the same on all supported platforms. For example, instead of using
-`<div>` and `<View>`, you use `<Box>` which provides a flexbox-first layout system,
-translated to `<div>` and `<View>`.
-
-`@ferns/ui` also provides an abstraction for many of the features of native and web,
-such as Camera, Permissions, etc. This way you can write apps that work similarly
-on all 3 platforms.
-
-`@ferns/ui` is Typescript first.
-
-You can easily add your own components by creating a `Foo.tsx` and
-`Foo.native.tsx` component. Most of the `@ferns/ui` components are implemented
-this way, with some only having a single `Component.tsx` if the component is a
-higher level component that already works the same on all platforms.
-
-`@ferns/ui` supports theming, allowing you to change the colors and fonts of the
-components.