ferns-ui 1.16.1 → 2.0.0-beta.2

package/src/Slider.tsx

@@ -1,5 +1,6 @@
 import SliderComponent from "@react-native-community/slider";
 import React, {FC} from "react";
+import {View} from "react-native";
 
 import {Box} from "./Box";
 import {IconName, SliderProps, ValueMappingItem} from "./Common";
@@ -15,11 +16,11 @@ const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
   if (!map || map.length === 0) {
     return null;
   }
-
+  
   // Find the option with the closest value
   let closestOption = map[0];
   let closestDistance = Math.abs(value - closestOption.value);
-
+  
   for (const option of map) {
     const distance = Math.abs(value - option.value);
     if (distance < closestDistance) {
@@ -27,7 +28,7 @@ const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
       closestOption = option;
     }
   }
-
+  
   return closestOption;
 };
 
@@ -48,9 +49,9 @@ const getCenterContent = (
       </Text>
     );
   }
-
+  
   const currentOption = getCurrentMapping(valueMapping, value);
-
+  
   if (useIcons) {
     return (
       <Icon
@@ -60,7 +61,7 @@ const getCenterContent = (
       />
     );
   }
-
+  
   return (
     <Text align="center" color={disabled ? "secondaryLight" : "primary"} size="2xl">
       {currentOption?.label}
@@ -71,7 +72,7 @@ const getCenterContent = (
 const getSliderContent = (
   slider: React.ReactElement,
   inlineLabels: boolean,
-  labels?: SliderProps["labels"]
+  labels?: SliderProps['labels']
 ): React.ReactElement => {
   if (inlineLabels && labels?.min && labels?.max) {
     return (
@@ -153,9 +154,9 @@ export const Slider: FC<SliderProps> = ({
     thumbStyle: {
       width: 48,
       height: 48,
-      backgroundColor: "white",
+      backgroundColor: 'white',
       borderRadius: 24,
-      shadowColor: "#000",
+      shadowColor: '#000',
       shadowOffset: {
         width: 0,
         height: 2,
@@ -188,7 +189,11 @@ export const Slider: FC<SliderProps> = ({
     <Box>
       {Boolean(title) && <FieldTitle text={title!} />}
       <Box direction="column" gap={showSelection ? 2 : 0}>
-        {showSelection && <Box alignItems="center">{centerContent}</Box>}
+        {showSelection && (
+          <Box alignItems="center">
+            {centerContent}
+          </Box>
+        )}
         {sliderContent}
       </Box>
       {Boolean(helperText && !errorText) && <FieldHelperText text={helperText!} />}
@@ -196,3 +201,5 @@ export const Slider: FC<SliderProps> = ({
     </Box>
   );
 };
+
+

package/src/SplitPage.native.tsx

@@ -9,6 +9,7 @@ import {SplitPageProps} from "./Common";
 import {FlatList} from "./FlatList";
 import {IconButton} from "./IconButton";
 import {Spinner} from "./Spinner";
+import {useTheme} from "./Theme";
 import {Unifier} from "./Unifier";
 
 export const SplitPage = ({
@@ -25,6 +26,7 @@ export const SplitPage = ({
   bottomNavBarHeight,
   showItemList,
 }: SplitPageProps) => {
+  const {theme} = useTheme();
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
 
   // flattenChildren is necessary to pull children from a React Fragment. Without this,
@@ -90,7 +92,7 @@ export const SplitPage = ({
           paddingBottom: bottomNavBarHeight,
         }}
       >
-        {renderListViewHeader?.()}
+        {renderListViewHeader && renderListViewHeader()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -115,7 +117,7 @@ export const SplitPage = ({
             onClick={() => onItemDeselect()}
           />
         </Box>
-        {renderContent?.(selectedId)}
+        {renderContent && renderContent(selectedId)}
       </Box>
     );
   };

package/src/SplitPage.tsx

@@ -95,7 +95,7 @@ export const SplitPage = ({
           flexDirection: "column",
         }}
       >
-        {renderListViewHeader?.()}
+        {renderListViewHeader && renderListViewHeader()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -109,7 +109,7 @@ export const SplitPage = ({
   const renderListContent = () => {
     return (
       <Box flex="grow" padding={2}>
-        {renderContent?.(selectedId)}
+        {renderContent && renderContent(selectedId)}
       </Box>
     );
   };
@@ -205,7 +205,7 @@ export const SplitPage = ({
           flexDirection: "column",
         }}
       >
-        {renderListViewHeader?.()}
+        {renderListViewHeader && renderListViewHeader()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -234,7 +234,7 @@ export const SplitPage = ({
             />
           </Box>
         )}
-        {renderContent?.(selectedId)}
+        {renderContent && renderContent(selectedId)}
       </Box>
     );
   };

package/src/TapToEdit.tsx

@@ -13,7 +13,11 @@ const TapToEditTitle: FC<{
   onlyShowHelperTextWhileEditing?: boolean;
   title: string;
   helperText?: string;
-}> = ({title, helperText, onlyShowHelperTextWhileEditing}) => {
+}> = ({
+  title,
+  helperText,
+  onlyShowHelperTextWhileEditing,
+}) => {
   return (
     <View style={{flex: 1, justifyContent: "center"}}>
       <Text bold>{title}</Text>
@@ -113,7 +117,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
         </View>
         <View style={{gap: 16}}>
           <Field
-            grow={fieldProps?.type === "textarea" ? (fieldProps.grow ?? true) : undefined}
+            grow={fieldProps?.type === "textarea" ? fieldProps.grow ?? true : undefined}
             helperText={helperText}
             inputRef={
               ["text", "textarea", "url", "email", "number"].includes(fieldProps?.type)
@@ -206,7 +210,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
         try {
           const url = new URL(value);
           displayValue = url?.hostname ?? value;
-        } catch (_error) {
+        } catch (error) {
           // Don't print an error message for empty values.
           if (value) {
             console.debug(`Invalid URL: $value`);

package/src/Text.tsx

@@ -8,7 +8,7 @@ import {
   useFonts,
 } from "@expo-google-fonts/nunito";
 import React from "react";
-import {Text as NativeText, Platform, TextStyle} from "react-native";
+import {Platform, Text as NativeText, TextStyle} from "react-native";
 
 import {TextProps} from "./Common";
 import {Hyperlink} from "./Hyperlink";

package/src/TextArea.test.tsx

@@ -20,7 +20,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea value="test content" onChange={mockOnChange} />
       );
-
+      
       const input = getByDisplayValue("test content");
       expect(input.props.multiline).toBe(true);
       expect(input.props.value).toBe("test content");
@@ -30,7 +30,7 @@ describe("TextArea", () => {
       const {getByText} = renderWithTheme(
         <TextArea title="Description" value="" onChange={mockOnChange} />
       );
-
+      
       expect(getByText("Description")).toBeTruthy();
     });
 
@@ -38,7 +38,7 @@ describe("TextArea", () => {
       const {getByPlaceholderText} = renderWithTheme(
         <TextArea placeholder="Enter description" value="" onChange={mockOnChange} />
       );
-
+      
       expect(getByPlaceholderText("Enter description")).toBeTruthy();
     });
 
@@ -46,7 +46,7 @@ describe("TextArea", () => {
       const {getByText} = renderWithTheme(
         <TextArea helperText="Maximum 500 characters" value="" onChange={mockOnChange} />
       );
-
+      
       expect(getByText("Maximum 500 characters")).toBeTruthy();
     });
 
@@ -54,7 +54,7 @@ describe("TextArea", () => {
       const {getByText} = renderWithTheme(
         <TextArea errorText="This field is required" value="" onChange={mockOnChange} />
       );
-
+      
       expect(getByText("This field is required")).toBeTruthy();
     });
 
@@ -62,7 +62,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea grow value="" onChange={mockOnChange} />
       );
-
+      
       const input = getByDisplayValue("");
       expect(input.props.multiline).toBe(true);
     });
@@ -71,14 +71,16 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea disabled value="test" onChange={mockOnChange} />
       );
-
+      
       const input = getByDisplayValue("test");
       expect(input.props.readOnly).toBe(true);
     });
 
     it("should always have text type", () => {
-      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
-
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
+      
       const input = getByDisplayValue("");
       expect(input.props.keyboardType).toBe("default");
     });
@@ -87,7 +89,9 @@ describe("TextArea", () => {
   describe("user interactions", () => {
     it("should call onChange when text is entered", async () => {
       const user = userEvent.setup();
-      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
 
       const input = getByDisplayValue("");
       await user.type(input, "hello world");
@@ -99,7 +103,9 @@ describe("TextArea", () => {
     it("should handle multiline text input", async () => {
       const user = userEvent.setup();
       const multilineText = "Line 1\nLine 2\nLine 3";
-      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
 
       const input = getByDisplayValue("");
       await user.type(input, multilineText);
@@ -111,8 +117,10 @@ describe("TextArea", () => {
 
   describe("accessibility", () => {
     it("should have correct accessibility properties", () => {
-      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
-
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
+      
       const input = getByDisplayValue("");
       expect(input.props.accessibilityHint).toBe("Enter text here");
       expect(input.props["aria-label"]).toBe("Text input field");
@@ -122,7 +130,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea disabled value="" onChange={mockOnChange} />
       );
-
+      
       const input = getByDisplayValue("");
       expect(input.props.accessibilityState.disabled).toBe(true);
     });
@@ -130,15 +138,19 @@ describe("TextArea", () => {
 
   describe("edge cases", () => {
     it("should handle empty value", () => {
-      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
-
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
+      
       const input = getByDisplayValue("");
       expect(input.props.value).toBe("");
     });
 
     it("should handle undefined value", () => {
-      const {root} = renderWithTheme(<TextArea value={undefined} onChange={mockOnChange} />);
-
+      const {root} = renderWithTheme(
+        <TextArea value={undefined} onChange={mockOnChange} />
+      );
+      
       expect(root).toBeTruthy();
     });
 
@@ -147,7 +159,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea value={longText} onChange={mockOnChange} />
       );
-
+      
       const input = getByDisplayValue(longText);
       expect(input.props.value).toBe(longText);
     });
@@ -157,7 +169,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea value={textWithBreaks} onChange={mockOnChange} />
       );
-
+      
       const input = getByDisplayValue(textWithBreaks);
       expect(input.props.value).toBe(textWithBreaks);
     });
@@ -167,10 +179,10 @@ describe("TextArea", () => {
     it("should inherit all TextField props except multiline and type", () => {
       const mockOnFocus = jest.fn();
       const mockOnBlur = jest.fn();
-
+      
       const {getByDisplayValue} = renderWithTheme(
-        <TextArea
-          value="test"
+        <TextArea 
+          value="test" 
           onChange={mockOnChange}
           onFocus={mockOnFocus}
           onBlur={mockOnBlur}
@@ -179,7 +191,7 @@ describe("TextArea", () => {
           rows={5}
         />
       );
-
+      
       const input = getByDisplayValue("test");
       expect(input.props.numberOfLines).toBe(5);
       expect(input.props.onFocus).toBeTruthy();
@@ -188,15 +200,19 @@ describe("TextArea", () => {
 
     it("should support inputRef", () => {
       const mockInputRef = jest.fn();
-      renderWithTheme(<TextArea inputRef={mockInputRef} value="" onChange={mockOnChange} />);
-
+      renderWithTheme(
+        <TextArea inputRef={mockInputRef} value="" onChange={mockOnChange} />
+      );
+      
       expect(mockInputRef).toHaveBeenCalled();
     });
   });
 
   describe("snapshots", () => {
     it("should match snapshot with default props", () => {
-      const component = renderWithTheme(<TextArea value="test content" onChange={mockOnChange} />);
+      const component = renderWithTheme(
+        <TextArea value="test content" onChange={mockOnChange} />
+      );
       expect(component.toJSON()).toMatchSnapshot();
     });
 

package/src/TextField.test.tsx

@@ -1,7 +1,8 @@
 import {act, userEvent} from "@testing-library/react-native";
 import React from "react";
-import {TextField} from "./TextField";
+
 import {renderWithTheme} from "./test-utils";
+import {TextField} from "./TextField";
 
 describe("TextField", () => {
   let mockOnChange: jest.Mock;
@@ -102,7 +103,7 @@ describe("TextField", () => {
     });
 
     it("should call onEnter when enter key is pressed", async () => {
-      const _user = userEvent.setup();
+      const user = userEvent.setup();
       const {getByDisplayValue} = renderWithTheme(
         <TextField value="" onChange={mockOnChange} onEnter={mockOnEnter} />
       );
@@ -205,7 +206,7 @@ describe("TextField", () => {
     });
 
     it("should not call onFocus when disabled", async () => {
-      const _user = userEvent.setup();
+      const user = userEvent.setup();
       const {getByDisplayValue} = renderWithTheme(
         <TextField disabled value="" onChange={mockOnChange} onFocus={mockOnFocus} />
       );

package/src/TextFieldNumberActionSheet.tsx

@@ -4,14 +4,18 @@ import React from "react";
 import {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {TextFieldPickerActionSheetProps} from "./Common";
+import {NumberPickerActionSheetProps, TextFieldPickerActionSheetProps} from "./Common";
 
-type NumberPickerActionSheetState = {};
+interface NumberPickerActionSheetState {}
 
 export class NumberPickerActionSheet extends React.Component<
   TextFieldPickerActionSheetProps,
   NumberPickerActionSheetState
 > {
+  constructor(props: NumberPickerActionSheetProps) {
+    super(props);
+  }
+
   render() {
     return (
       <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>
@@ -32,7 +36,7 @@ export class NumberPickerActionSheet extends React.Component<
             mode={this.props.mode}
             testID="dateTimePicker"
             value={this.props.value ? new Date(this.props.value) : new Date()}
-            onChange={(_event: any, date?: Date) => {
+            onChange={(event: any, date?: Date) => {
               if (!date) {
                 return;
               }

package/src/Tooltip.tsx

@@ -34,6 +34,12 @@ interface Measurement {
   idealPosition?: TooltipPosition;
 }
 
+interface ChildrenProps {
+  onClick?: () => void | Promise<void>;
+  onHoverIn?: () => void;
+  onHoverOut?: () => void;
+}
+
 const getTooltipPosition = ({
   children,
   tooltip,
@@ -177,38 +183,25 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
     measured: false,
   });
 
-  const showTooltipTimer = useRef<NodeJS.Timeout>();
-  const hideTooltipTimer = useRef<NodeJS.Timeout>();
+  const showTooltipTimer = useRef<NodeJS.Timeout | undefined>(undefined);
+  const hideTooltipTimer = useRef<NodeJS.Timeout | undefined>(undefined);
   const childrenWrapperRef = useRef<View>(null);
   const touched = useRef(false);
   const isWeb = Platform.OS === "web";
-  const resetMeasurement = useCallback(() => {
-    setMeasurement({
-      children: {},
-      tooltip: {},
-      measured: false,
-    });
-  }, []);
-  const hideTooltip = useCallback(() => {
-    if (showTooltipTimer.current) {
-      clearTimeout(showTooltipTimer.current);
-    }
-    if (hideTooltipTimer.current) {
-      clearTimeout(hideTooltipTimer.current);
-    }
-
-    touched.current = false;
-    setVisible(false);
-    resetMeasurement();
-  }, [resetMeasurement, setVisible]);
 
   // If the tooltip is visible, and the user clicks outside of the tooltip, hide it.
   useEffect(() => {
     return () => {
+      if (showTooltipTimer.current) {
+        clearTimeout(showTooltipTimer.current);
+      }
+      if (hideTooltipTimer.current) {
+        clearTimeout(hideTooltipTimer.current);
+      }
       // Hide tooltip on unmount to prevent it from staying stuck on screen
-      hideTooltip();
+      setVisible(false);
     };
-  }, [hideTooltip]);
+  }, []);
 
   const getArrowContainerStyle = (): ViewStyle => {
     if (!includeArrow) {
@@ -271,11 +264,6 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
   );
 
   const handleTouchStart = useCallback(() => {
-    if (visible) {
-      hideTooltip();
-      return;
-    }
-
     if (hideTooltipTimer.current) {
       clearTimeout(hideTooltipTimer.current);
     }
@@ -284,7 +272,7 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
       touched.current = true;
       setVisible(true);
     }, 100);
-  }, [hideTooltip, visible]);
+  }, []);
 
   const handleHoverIn = useCallback(() => {
     if (hideTooltipTimer.current) {
@@ -298,28 +286,25 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
   }, [hoverDelay]);
 
   const handleHoverOut = useCallback(() => {
+    touched.current = false;
     if (showTooltipTimer.current) {
       clearTimeout(showTooltipTimer.current);
     }
-    if (hideTooltipTimer.current) {
-      clearTimeout(hideTooltipTimer.current);
-    }
 
     hideTooltipTimer.current = setTimeout(() => {
-      hideTooltip();
+      setVisible(false);
+      setMeasurement({
+        children: {},
+        tooltip: {},
+        measured: false,
+      });
     }, hoverEndDelay);
-  }, [hideTooltip, hoverEndDelay]);
-
-  const handleClick = useCallback(() => {
-    if (visible) {
-      hideTooltip();
-    }
-  }, [hideTooltip, visible]);
+  }, [hoverEndDelay]);
 
   const mobilePressProps = {
     onPress: useCallback(() => {
       if (!touched.current) {
-        children.props.onClick?.();
+        (children.props as ChildrenProps).onClick?.();
       }
     }, [children.props]),
   };
@@ -369,7 +354,7 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
                   borderRadius: theme.radius.default,
                 }}
                 testID="tooltip-container"
-                onPress={hideTooltip}
+                onPress={() => setVisible(false)}
               >
                 <Text color="inverted" size="sm">
                   {text}
@@ -384,13 +369,12 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
         hitSlop={{top: 10, bottom: 10, left: 15, right: 15}}
         onPointerEnter={() => {
           handleHoverIn();
-          children.props.onHoverIn?.();
+          (children.props as ChildrenProps).onHoverIn?.();
         }}
         onPointerLeave={() => {
           handleHoverOut();
-          children.props.onHoverOut?.();
+          (children.props as ChildrenProps).onHoverOut?.();
         }}
-        onPress={isWeb ? handleClick : undefined}
         onTouchStart={handleTouchStart}
         {...(!isWeb && mobilePressProps)}
       >

package/src/Unifier.ts

@@ -6,7 +6,7 @@ import * as Clipboard from "expo-clipboard";
 import * as Haptics from "expo-haptics";
 import {Dimensions, Keyboard, Linking, Platform, Vibration} from "react-native";
 
-import {PermissionKind} from "./Common";
+import {FernsTheme, PermissionKind} from "./Common";
 import {requestPermissions} from "./Permissions";
 
 declare global {
@@ -61,6 +61,8 @@ export function changeColorLuminance(hex: string, luminanceChange: Luminance) {
 }
 
 class UnifierClass {
+  private _theme?: Partial<FernsTheme>;
+
   private _web = false;
 
   private _dev = false;

package/src/Utilities.tsx

@@ -18,7 +18,8 @@ export function mergeInlineStyles(inlineStyle?: any, newStyle?: any) {
 
 export function isTestUser(profile?: BaseProfile) {
   return (
-    profile?.email &&
+    profile &&
+    profile.email &&
     (profile.email.indexOf("nang.io") > -1 || profile.email.indexOf("example.com") > -1)
   );
 }
@@ -56,7 +57,7 @@ order in which you do so doesn't really matter.
 */
 
 interface InlineStyle {
-  [key: string]: string | number | undefined;
+  [key: string]: string | number | void;
 }
 
 // TODO: This type should be opaque, however the Babel parser doesn't support
@@ -317,7 +318,7 @@ export function formattedCountyCode(state: string, countyName: string): string {
 }
 
 export function isAPIError(error: any): error is APIError {
-  return error?.data?.title;
+  return error && error.data?.title;
 }
 
 export function printAPIError(error: APIError, details = true): string {

package/src/WebAddressAutocomplete.tsx

@@ -7,7 +7,7 @@ import {processAddressComponents} from "./Utilities";
 
 const loadGooglePlacesScript = (googleMapsApiKey: string, callbackName: any): Promise<void> => {
   return new Promise<void>((resolve, reject): undefined => {
-    if (window.google?.maps?.places) {
+    if (window.google && window.google.maps && window.google.maps.places) {
       resolve();
       return;
     }