ferns-ui 0.23.2 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.23.2",
+  "version": "0.24.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -112,96 +112,103 @@
       "jest-watch-typeahead/testname"
     ]
   },
-  "resolutions": {
-    "update-input-width": "1.1.1",
-    "@types/react": "17.0.44"
-  },
   "dependencies": {
-    "expo-image-picker": "^13.3.1",
     "tsc-watch": "^5.0.3"
   },
   "devDependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "^1.17.10",
-    "@react-native-community/blur": "^4.2.0",
-    "@react-native-community/datetimepicker": "^6.3.2",
-    "@react-native-picker/picker": "2.4.4",
-    "@types/lodash": "^4.14.184",
+    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-community/blur": "^4.3.0",
+    "@react-native-community/datetimepicker": "6.7.3",
+    "@react-native-picker/picker": "2.4.8",
     "@types/mdurl": "^1.0.2",
     "@types/react-datetime-picker": "^3.4.1",
-    "@types/react-native": "^0.69.1",
-    "@types/react-time-picker": "^4.0.2",
+    "@types/react-time-picker": "^4.0.3",
     "@typescript-eslint/eslint-plugin": "^5.34.0",
     "@typescript-eslint/parser": "^5.34.0",
-    "eslint": "^8.22.0",
+    "eslint": "^8.35.0",
     "eslint-config-ferns": "^0.4.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-lodash": "^7.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-react-native": "^4.0.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "2.0.0",
-    "expo-font": "^10.0.5",
-    "expo-haptics": "~11.3.0",
-    "expo-image-manipulator": "^10.4.0",
-    "expo-image-picker": "^13.3.1",
-    "libphonenumber-js": "^1.10.19",
+    "expo-font": "~11.1.1",
+    "expo-haptics": "~12.2.1",
+    "expo-image-manipulator": "~11.1.1",
+    "expo-image-picker": "~14.1.1",
+    "libphonenumber-js": "^1.10.21",
     "lodash": "^4.17.21",
-    "mixpanel-browser": "^2.38.0",
-    "moment-timezone": "^0.5.35",
-    "prettier": "^2.6.2",
-    "react": "^18.2.0",
+    "mdurl": "^1.0.1",
+    "moment-timezone": "^0.5.41",
+    "prettier": "^2.8.4",
+    "react": "18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-date-picker": "^9.0.0",
-    "react-datetime-picker": "^4.0.1",
+    "react-date-picker": "^9.2.0",
+    "react-datetime-picker": "^4.2.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "18.2.0",
-    "react-native": "0.69.4",
-    "react-native-calendars": "^1.1288.2",
-    "react-native-gesture-handler": "^2.1.0",
+    "react-native": "0.71.3",
+    "react-native-calendars": "^1.1293.0",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-modalize": "^2.1.1",
-    "react-native-permissions": "^3.6.1",
-    "react-native-picker-select": "^8.0.0",
+    "react-native-permissions": "^3.7.3",
+    "react-native-picker-select": "^8.0.4",
     "react-native-portalize": "^1.0.7",
-    "react-native-svg": "^13.0.0",
+    "react-native-svg": "^13.4.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",
-    "typescript": "4.1.5"
+    "react-router": "^6.8.2",
+    "react-router-dom": "^6.8.2",
+    "react-time-picker": "^5.2.0",
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "^1.17.10",
-    "@react-native-community/blur": "^4.2.0",
-    "@react-native-community/datetimepicker": "^6.3.2",
-    "@react-native-picker/picker": "2.4.4",
-    "expo-font": "^10.0.5",
-    "expo-haptics": "~11.3.0",
-    "expo-image-manipulator": "^10.4.0",
-    "expo-image-picker": "^13.3.1",
+    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-community/blur": "^4.3.0",
+    "@react-native-community/datetimepicker": "6.7.3",
+    "@react-native-picker/picker": "2.4.8",
+    "@typescript-eslint/eslint-plugin": "^5.34.0",
+    "@typescript-eslint/parser": "^5.34.0",
+    "eslint": "^8.35.0",
+    "eslint-config-ferns": "^0.4.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-lodash": "^7.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-react-native": "^4.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-unused-imports": "2.0.0",
+    "expo-font": "~11.1.1",
+    "expo-haptics": "~12.2.1",
+    "expo-image-manipulator": "~11.1.1",
+    "expo-image-picker": "~14.1.1",
+    "libphonenumber-js": "^1.10.21",
     "lodash": "^4.17.21",
-    "mixpanel-browser": "^2.38.0",
-    "moment-timezone": "^0.5.35",
-    "react": "^18.2.0",
+    "moment-timezone": "^0.5.41",
+    "react": "18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-datetime-picker": "^4.0.1",
+    "react-date-picker": "^9.2.0",
+    "react-datetime-picker": "^4.2.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "18.2.0",
-    "react-native": "0.69.4",
-    "react-native-calendars": "^1.1288.2",
-    "react-native-gesture-handler": "^2.1.0",
+    "react-native": "0.71.3",
+    "react-native-calendars": "^1.1293.0",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-modalize": "^2.1.1",
-    "react-native-permissions": "^3.6.1",
-    "react-native-picker-select": "^8.0.0",
+    "react-native-permissions": "^3.7.3",
+    "react-native-picker-select": "^8.0.4",
     "react-native-portalize": "^1.0.7",
-    "react-native-svg": "^13.0.0",
+    "react-native-svg": "^13.4.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"
+    "react-router": "^6.8.2",
+    "react-router-dom": "^6.8.2",
+    "react-time-picker": "^5.2.0"
   }
 }

package/src/ActionSheet.tsx

@@ -4,6 +4,7 @@ import React, {Component, createRef} from "react";
 import {
   Animated,
   Dimensions,
+  EmitterSubscription,
   findNodeHandle,
   FlatList,
   Keyboard,
@@ -491,6 +492,10 @@ export class ActionSheet extends Component<Props, State, any> {
 
   actionSheetHeight = 0;
 
+  keyboardDidShowListener: EmitterSubscription | null = null;
+
+  keyboardDidHideListener: EmitterSubscription | null = null;
+
   prevScroll = 0;
 
   timeout: any | null = null;
@@ -910,12 +915,12 @@ export class ActionSheet extends Component<Props, State, any> {
   };
 
   componentDidMount() {
-    Keyboard.addListener(
+    this.keyboardDidShowListener = Keyboard.addListener(
       Platform.OS === "android" ? "keyboardDidShow" : "keyboardWillShow",
       this._onKeyboardShow
     );
 
-    Keyboard.addListener(
+    this.keyboardDidHideListener = Keyboard.addListener(
       Platform.OS === "android" ? "keyboardDidHide" : "keyboardWillHide",
       this._onKeyboardHide
     );
@@ -1010,15 +1015,8 @@ export class ActionSheet extends Component<Props, State, any> {
   };
 
   componentWillUnmount() {
-    Keyboard.removeListener(
-      Platform.OS === "android" ? "keyboardDidShow" : "keyboardWillShow",
-      this._onKeyboardShow
-    );
-
-    Keyboard.removeListener(
-      Platform.OS === "android" ? "keyboardDidHide" : "keyboardWillHide",
-      this._onKeyboardHide
-    );
+    this.keyboardDidShowListener?.remove();
+    this.keyboardDidHideListener?.remove();
   }
 
   _onDeviceLayout = async (_event: any) => {

package/src/Avatar.tsx

@@ -118,8 +118,8 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
       base64: true,
     });
 
-    if (!result.cancelled) {
-      const resizedImage = await resizeImage(result.uri);
+    if (!result.canceled && result.assets) {
+      const resizedImage = await resizeImage(result.assets[0].uri);
       setSrc(resizedImage.uri);
       if (onChange) {
         onChange({avatarImageFormat, ...resizedImage});

package/src/Box.tsx

@@ -120,10 +120,8 @@ export class Box extends React.Component<BoxProps, {}> {
     overflow: (value) => {
       if (value === "scrollY" || value === "scroll") {
         return {overflow: "scroll"};
-      } else if (value === "scrollX") {
-        return {overflow: "scrollX"};
       }
-      return {};
+      return {overflow: value};
     },
     width: (value) => {
       if (this.props.border && !isNaN(Number(value))) {
@@ -236,14 +234,6 @@ export class Box extends React.Component<BoxProps, {}> {
     return style;
   }
 
-  renderBox() {
-    return (
-      <View style={!this.props.scroll && !this.props.overflow && this.propsToStyle()}>
-        {this.props.children}
-      </View>
-    );
-  }
-
   render() {
     let box;
 
@@ -251,6 +241,7 @@ export class Box extends React.Component<BoxProps, {}> {
       box = (
         <TouchableOpacity
           style={this.propsToStyle()}
+          testID={this.props.testID ? `${this.props.testID}-clickable` : undefined}
           // TODO: refactor this better..
           onLayout={this.props.onLayout}
           onPress={() => {
@@ -259,11 +250,14 @@ export class Box extends React.Component<BoxProps, {}> {
           }}
         >
           {this.props.children}
-          {/* <View pointerEvents="none">{box}</View> */}
         </TouchableOpacity>
       );
     } else {
-      box = <View style={this.propsToStyle()}>{this.props.children}</View>;
+      box = (
+        <View style={this.propsToStyle()} testID={this.props.testID}>
+          {this.props.children}
+        </View>
+      );
     }
 
     if (this.props.scroll) {

package/src/Button.tsx

@@ -18,9 +18,7 @@ export interface ButtonProps {
   disabled?: boolean; // default false
   inline?: boolean; // default false
   size?: "sm" | "md" | "lg"; // default md
-
-  // Pattern Addition
-  type?: "solid" | "ghost" | "outline";
+  type?: "solid" | "ghost" | "outline"; // default solid
   loading?: boolean;
   onClick: any;
   icon?: IconName;
@@ -30,6 +28,7 @@ export interface ButtonProps {
   confirmationText?: string;
   confirmationHeading?: string;
   shape?: "rounded" | "pill";
+  testID?: string;
 }
 
 const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
@@ -54,21 +53,22 @@ const HEIGHTS = {
 };
 
 export function Button({
-  disabled,
-  type,
+  disabled = false,
+  type = "solid",
   loading: propsLoading,
   children,
   text,
-  inline,
+  inline = false,
   icon,
   iconPrefix,
-  size,
+  size = "md",
   onClick,
-  color = "lightGray",
+  color = "gray",
   withConfirmation = false,
   confirmationText = "Are you sure you want to continue?",
   confirmationHeading = "Confirm",
   shape = "rounded",
+  testID,
 }: ButtonProps) {
   const [loading, setLoading] = useState(propsLoading);
   const [showConfirmation, setShowConfirmation] = useState(false);
@@ -143,8 +143,9 @@ export function Button({
           borderWidth: type === "outline" ? 2 : 0,
           opacity: disabled ? 0.4 : 1,
           flexDirection: "row",
-          paddingHorizontal: 4 * 2,
+          paddingHorizontal: 8 * 2,
         }}
+        testID={testID}
         onPress={debounce(
           async () => {
             Unifier.utils.haptic();

package/src/Common.ts

@@ -1817,24 +1817,6 @@ export type IconPrefix = "far" | "fas";
 // | "simple-line"
 // | "feather";
 
-export interface TextProps {
-  align?: "left" | "right" | "center" | "justify"; // default "left"
-  children?: React.ReactNode;
-  color?: AllColors;
-
-  inline?: boolean; // default false
-  italic?: boolean; // default false
-  overflow?: "normal" | "breakWord"; // default "breakWord"
-  size?: TextSize; // default "md"
-  truncate?: boolean; // default false
-  font?: Font;
-  underline?: boolean;
-
-  numberOfLines?: number;
-  skipLinking?: boolean;
-  weight?: "bold" | "normal";
-}
-
 export interface ActionBannerProps {
   /** The text to show in the banner. */
   text: string;
@@ -1967,6 +1949,7 @@ export interface BoxProps {
   scrollRef?: any;
   onScroll?: (offsetY: number) => void;
   onLayout?: (event: any) => void;
+  testID?: string;
 }
 
 export type BoxColor = AllColors | "transparent";
@@ -2642,7 +2625,7 @@ export interface PickerProps {
   onValueChange?: (itemValue: any, itemPosition: number) => void;
   selectedValue?: any;
   style?: StyleProp;
-  testId?: string;
+  testID?: string;
   itemStyle?: StyleProp;
   enabled?: boolean;
   mode?: "dialog" | "dropdown";

package/src/TapToEdit.tsx

@@ -147,7 +147,7 @@ export const TapToEdit = ({
         </Box>
         <Box direction="row">
           <Box>
-            <Text overflow="breakWord">{displayValue}</Text>
+            <Text>{displayValue}</Text>
           </Box>
           {editable && (
             <Box marginLeft={2} onClick={(): void => setEditing(true)}>

package/src/Text.tsx

@@ -1,91 +1,131 @@
 import React from "react";
-import {Text as NativeText} from "react-native";
+import {Text as NativeText, TextStyle} from "react-native";
 
-import {TextProps} from "./Common";
+import {AllColors, Font, TextSize} from "./Common";
 import {Hyperlink} from "./Hyperlink";
 import {Unifier} from "./Unifier";
 
-export class Text extends React.Component<TextProps, {}> {
-  fontSizes = {
-    sm: 12,
-    md: 14,
-    lg: 16,
-  };
+export interface TextProps {
+  align?: "left" | "right" | "center" | "justify"; // default "left"
+  children?: React.ReactNode;
+  color?: AllColors;
+  inline?: boolean; // default false
+  italic?: boolean; // default false
+  overflow?: "normal" | "breakWord"; // deprecated
+  size?: TextSize; // default "md"
+  truncate?: boolean; // default false
+  font?: Font;
+  underline?: boolean;
+  numberOfLines?: number;
+  skipLinking?: boolean;
+  weight?: "bold" | "normal";
+  testID?: string;
+}
 
-  propsToStyle(): any {
-    const style: any = {};
+const fontSizes = {
+  sm: 12,
+  md: 14,
+  lg: 16,
+};
 
-    let font:
-      | "primaryFont"
-      | "primaryBoldFont"
-      | "secondaryFont"
-      | "secondaryBoldFont"
-      | "buttonFont"
-      | "accentFont"
-      | "accentBoldFont"
-      | "titleFont" = "primaryFont";
-    if (this.props.font === "primary" || !this.props.font) {
-      if (this.props.weight === "bold") {
-        font = "primaryBoldFont";
+export function Text({
+  align = "left",
+  children,
+  color,
+  inline = false,
+  italic = false,
+  overflow,
+  size = "md",
+  truncate = false,
+  font,
+  underline,
+  numberOfLines,
+  skipLinking,
+  testID,
+  weight = "normal",
+}: TextProps): React.ReactElement {
+  function propsToStyle(): any {
+    const style: TextStyle = {};
+    if (overflow) {
+      console.warn(
+        "Text overflow is deprecated. Use `truncate` to cut off the text and add ellipse, otherwise breakWord is the default."
+      );
+    }
+    let computedFont = "primary";
+    if (font === "primary" || !font) {
+      if (weight === "bold") {
+        computedFont = "primaryBoldFont";
       } else {
-        font = "primaryFont";
+        computedFont = "primaryFont";
       }
-    } else if (this.props.font === "secondary") {
-      if (this.props.weight === "bold") {
-        font = "secondaryBoldFont";
+    } else if (font === "secondary") {
+      if (weight === "bold") {
+        computedFont = "secondaryBoldFont";
       } else {
-        font = "secondaryFont";
+        computedFont = "secondaryFont";
       }
-    } else if (this.props.font === "button") {
-      font = "buttonFont";
-    } else if (this.props.font === "title") {
-      font = "titleFont";
-    } else if (this.props.font === "accent") {
-      if (this.props.weight === "bold") {
-        font = "accentBoldFont";
+    } else if (font === "button") {
+      computedFont = "buttonFont";
+    } else if (font === "title") {
+      computedFont = "titleFont";
+    } else if (font === "accent") {
+      if (weight === "bold") {
+        computedFont = "accentBoldFont";
       } else {
-        font = "accentFont";
+        computedFont = "accentFont";
       }
     }
+    if (weight === "bold") {
+      style.fontWeight = "bold";
+    }
 
-    style.fontFamily = Unifier.theme[font];
+    style.fontFamily = Unifier.theme[computedFont];
 
-    style.fontSize = this.fontSizes[this.props.size || "md"];
-    if (this.props.align) {
-      style.textAlign = this.props.align;
+    style.fontSize = fontSizes[size || "md"];
+    if (align) {
+      style.textAlign = align;
     }
-    if (this.props.color) {
-      style.color = Unifier.theme[this.props.color];
+    if (color) {
+      style.color = Unifier.theme[color];
     } else {
       style.color = Unifier.theme.darkGray;
     }
+
+    if (italic) {
+      style.fontStyle = "italic";
+    }
+    if (underline) {
+      style.textDecorationLine = "underline";
+    }
     // TODO: might be useful for wrapping/truncating
-    // if (this.props.numberOfLines !== 1 && !this.props.inline) {
+    // if (numberOfLines !== 1 && !inline) {
     //   style.flexWrap = "wrap";
     // }
+
     return style;
   }
 
-  render() {
-    let lines = 0;
-    if (this.props.numberOfLines) {
-      lines = this.props.numberOfLines;
-    } else if (this.props.inline) {
-      lines = 1;
-    }
-    const inner = (
-      <NativeText numberOfLines={lines} style={this.propsToStyle()}>
-        {this.props.children}
-      </NativeText>
+  let lines = 0;
+  if (numberOfLines && truncate && numberOfLines > 1) {
+    console.error(`Cannot truncate Text and have ${numberOfLines} lines`);
+  }
+  if (numberOfLines) {
+    lines = numberOfLines;
+  } else if (inline || truncate) {
+    lines = 1;
+  }
+  const inner = (
+    <NativeText numberOfLines={lines} style={propsToStyle()} testID={testID}>
+      {children}
+    </NativeText>
+  );
+  if (skipLinking) {
+    return inner;
+  } else {
+    return (
+      <Hyperlink linkDefault linkStyle={{textDecorationLine: "underline"}}>
+        {inner}
+      </Hyperlink>
     );
-    if (this.props.skipLinking) {
-      return inner;
-    } else {
-      return (
-        <Hyperlink linkDefault linkStyle={{textDecorationLine: "underline"}}>
-          {inner}
-        </Hyperlink>
-      );
-    }
   }
 }

package/src/Tooltip.tsx

@@ -157,6 +157,10 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
   }, []);
 
   const handleOnLayout = ({nativeEvent: {layout}}: LayoutChangeEvent) => {
+    if (childrenWrapperRef?.current && !childrenWrapperRef?.current?.measure) {
+      console.error("Tooltip: childrenWrapperRef does not have a measure method.");
+      return;
+    }
     childrenWrapperRef?.current?.measure((_x, _y, width, height, pageX, pageY) => {
       setMeasurement({
         children: {pageX, pageY, height, width},