ferns-ui 0.41.0 → 0.41.2

package/src/CheckBox.tsx

@@ -5,7 +5,7 @@ import {BoxColor, CheckBoxProps} from "./Common";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
 
-export function CheckBox({
+export const CheckBox = ({
   color,
   checked,
   size,
@@ -18,7 +18,7 @@ export function CheckBox({
   onClick,
   indeterminate,
   testID,
-}: CheckBoxProps): React.ReactElement {
+}: CheckBoxProps): React.ReactElement => {
   if (checked && indeterminate) {
     console.error("CheckBox cannot be checked and indeterminate at the same time");
   }
@@ -117,4 +117,4 @@ export function CheckBox({
       </Box>
     </Box>
   );
-}
+};

package/src/CustomSelect.tsx

@@ -23,6 +23,7 @@ export const CustomSelect = ({
     return ![...options, {value: ""}].map((i) => i.value).includes(customValue);
   }, [options, customValue]);
 
+  // If the value is set to custom, show the custom input
   useEffect(() => {
     setShowCustomInput(isValueCustom);
     if (!showCustomInput) {

package/src/DateTimeActionSheet.tsx

@@ -22,7 +22,7 @@ const hours = range(1, 13).map((n) => String(n));
 const minutes = range(0, 60).map((n) => String(n).padStart(2, "0"));
 const minutesOptions = [...minutes, "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 
-function TimeInput({
+const TimeInput = ({
   type,
   value,
   onChange,
@@ -30,7 +30,7 @@ function TimeInput({
   type: "hour" | "minute";
   value: number;
   onChange: (value: number) => void;
-}): React.ReactElement {
+}): React.ReactElement => {
   const {theme} = useContext(ThemeContext);
 
   const defaultText = type === "minute" ? String(value).padStart(2, "0") : String(value);
@@ -98,15 +98,15 @@ function TimeInput({
       />
     </View>
   );
-}
+};
 
-function CalendarHeader({
+const CalendarHeader = ({
   addMonth,
   month,
 }: {
   addMonth: (num: number) => void;
   month: Date[];
-}): React.ReactElement {
+}): React.ReactElement => {
   const displayDate = dayjs(month[0]).format("MMM YYYY");
   return (
     <Box alignItems="center" direction="row" height={40} justifyContent="between" width="100%">
@@ -153,7 +153,7 @@ function CalendarHeader({
       />
     </Box>
   );
-}
+};
 
 // For mobile, renders all components in an action sheet. For web, renders all components in a
 // modal. For mobile: If mode is "time", renders a spinner picker for time picker on both platforms.
@@ -161,14 +161,14 @@ function CalendarHeader({
 // renders a spinner picker for time picker and our custom calendar on both platforms. For web,
 // renders a simplistic text box for time picker and a calendar for date picker in a modal In the
 // future, web time picker should be a typeahead dropdown like Google calendar.
-export function DateTimeActionSheet({
+export const DateTimeActionSheet = ({
   // actionSheetRef,
   mode,
   value,
   onChange,
   visible,
   onDismiss,
-}: DateTimeActionSheetProps) {
+}: DateTimeActionSheetProps) => {
   const {theme} = useContext(ThemeContext);
 
   // Accept ISO 8601, HH:mm, or hh:mm A formats. We may want only HH:mm or hh:mm A for mode=time
@@ -193,6 +193,7 @@ export function DateTimeActionSheet({
   const [amPm, setAmPm] = useState<"am" | "pm">(dayjs(m).format("a") === "am" ? "am" : "pm");
   const [date, setDate] = useState<string>(dayjs(m).toISOString());
 
+  // If the value changes in the props, update the state for the date and time.
   useEffect(() => {
     let datetime;
     if (value) {
@@ -398,4 +399,4 @@ export function DateTimeActionSheet({
       {renderContent()}
     </Modal>
   );
-}
+};

package/src/FernsProvider.tsx

@@ -5,7 +5,7 @@ import {ToastProvider} from "react-native-toast-notifications";
 import {ThemeProvider} from "./Theme";
 import {Toast} from "./Toast";
 
-export function FernsProvider({children}: {children: React.ReactNode}): React.ReactElement {
+export const FernsProvider = ({children}: {children: React.ReactNode}): React.ReactElement => {
   return (
     <ThemeProvider>
       <ToastProvider
@@ -21,4 +21,4 @@ export function FernsProvider({children}: {children: React.ReactNode}): React.Re
       </ToastProvider>
     </ThemeProvider>
   );
-}
+};

package/src/Hyperlink.tsx

@@ -27,7 +27,7 @@
  * SOFTWARE.
  * */
 
-import mdurl from "mdurl";
+import * as mdurl from "mdurl";
 import React from "react";
 import {Linking, Platform, Text, View} from "react-native";
 
@@ -104,7 +104,7 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
         component.props.children.substring(_lastIndex, component.props.children.length)
       );
       return React.cloneElement(component, componentProps, elements);
-    } catch (err) {
+    } catch (error) {
       return component;
     }
   };
@@ -155,7 +155,7 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
   }
 }
 
-export function Hyperlink(props: HyperlinkProps) {
+export const Hyperlink = (props: HyperlinkProps) => {
   const handleLink = (url: string) => {
     const urlObject = mdurl.parse(url);
     urlObject.protocol = urlObject.protocol.toLowerCase();
@@ -169,4 +169,4 @@ export function Hyperlink(props: HyperlinkProps) {
   const onPress = handleLink || props.onPress;
   if (props.linkDefault) return <HyperlinkComponent {...props} onPress={onPress} />;
   return <HyperlinkComponent {...props} />;
-}
+};

package/src/Icon.tsx

@@ -10,7 +10,7 @@ export function initIcons() {
 
 // TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used,
 // etc.
-export function Icon({color, size, name, prefix, testID}: IconProps): React.ReactElement {
+export const Icon = ({color, size, name, prefix, testID}: IconProps): React.ReactElement => {
   const {theme} = useContext(ThemeContext);
   const iconColor = theme[color || "primary"];
   const iconSize = iconSizeToNumber(size);
@@ -24,4 +24,4 @@ export function Icon({color, size, name, prefix, testID}: IconProps): React.Reac
       testID={testID}
     />
   );
-}
+};

package/src/InfoTooltipButton.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import {InfoTooltipButtonProps} from "./Common";
 import {IconButton} from "./IconButton";
 
-export function InfoTooltipButton({text, size}: InfoTooltipButtonProps): React.ReactElement {
+export const InfoTooltipButton = ({text, size}: InfoTooltipButtonProps): React.ReactElement => {
   return (
     <IconButton
       accessibilityLabel="info"
@@ -15,4 +15,4 @@ export function InfoTooltipButton({text, size}: InfoTooltipButtonProps): React.R
       onClick={() => {}}
     />
   );
-}
+};

package/src/Link.tsx

@@ -4,10 +4,10 @@ import {Linking} from "react-native";
 import {LinkProps} from "./Common";
 import {Text} from "./Text";
 
-export function Link(props: LinkProps): React.ReactElement {
+export const Link = (props: LinkProps): React.ReactElement => {
   return (
     <Text {...props} color={props.color || "blue"} onPress={() => Linking.openURL(props.href)}>
       {props.children}
     </Text>
   );
-}
+};

package/src/Mask.tsx

@@ -3,7 +3,7 @@ import {View} from "react-native";
 
 import {MaskProps, ReactChildren} from "./Common";
 
-export function Mask(props: MaskProps): ReactChildren {
+export const Mask = (props: MaskProps): ReactChildren => {
   if (props.shape === "rounded") {
     return <View style={{overflow: "hidden", borderRadius: 12}}>{props.children}</View>;
   } else if (props.shape === "circle") {
@@ -18,4 +18,4 @@ export function Mask(props: MaskProps): ReactChildren {
   } else {
     return props.children || null;
   }
-}
+};

package/src/MobileAddressAutoComplete.tsx

@@ -26,6 +26,7 @@ export const MobileAddressAutocomplete = ({
   const ref = useRef<GooglePlacesAutocompleteRef | null>(null);
   const [isFocused, setIsFocused] = useState(false);
 
+  // Load the Google Maps script and initialize the autocomplete.
   useEffect(() => {
     if (!googleMapsApiKey) return;
     if (ref?.current) {

package/src/ModalSheet.tsx

@@ -7,6 +7,7 @@ import {Portal} from "react-native-portalize";
 export const useCombinedRefs = (...refs: any) => {
   const targetRef = useRef();
 
+  // Iterate through the refs array, and set the ref.current value to the targetRef
   useEffect(() => {
     refs.forEach((ref: any) => {
       if (!ref) {

package/src/OpenAPIContext.tsx

@@ -37,7 +37,7 @@ interface OpenAPIProviderProps {
   specUrl?: string;
 }
 
-export function OpenAPIProvider({children, specUrl}: OpenAPIProviderProps): React.ReactElement {
+export const OpenAPIProvider = ({children, specUrl}: OpenAPIProviderProps): React.ReactElement => {
   const [spec, setSpec] = useState<OpenAPISpec | null>(null);
 
   const getModelFields = (modelName: string): ModelFields | null => {
@@ -71,6 +71,7 @@ export function OpenAPIProvider({children, specUrl}: OpenAPIProviderProps): Reac
     return field;
   };
 
+  // Fetch the OpenAPI spec from the provided URL.
   useEffect((): void => {
     if (!specUrl) {
       return;
@@ -81,7 +82,7 @@ export function OpenAPIProvider({children, specUrl}: OpenAPIProviderProps): Reac
         const data = (await response.json()) as OpenAPISpec;
         setSpec(data);
       })
-      .catch((err) => console.error(`Error fetching OpenAPI spec: ${err}`));
+      .catch((error: any) => console.error(`Error fetching OpenAPI spec: ${error}`));
   }, [specUrl]);
 
   return (
@@ -89,7 +90,7 @@ export function OpenAPIProvider({children, specUrl}: OpenAPIProviderProps): Reac
       {children}
     </OpenAPIContext.Provider>
   );
-}
+};
 
 export const useOpenAPISpec = () => {
   const context = useContext(OpenAPIContext);

package/src/PickerSelect.tsx

@@ -210,6 +210,7 @@ export function RNPickerSelect({
     [options]
   );
 
+  // Set selected item
   useEffect(() => {
     const item = getSelectedItem(itemKey, value);
     setSelectedItem(item.selectedItem);

package/src/Pill.tsx

@@ -4,7 +4,7 @@ import {Box} from "./Box";
 import {PillProps} from "./Common";
 import {Text} from "./Text";
 
-export function Pill({onClick, enabled, color = "white", text}: PillProps): React.ReactElement {
+export const Pill = ({onClick, enabled, color = "white", text}: PillProps): React.ReactElement => {
   return (
     <Box
       border={color}
@@ -19,4 +19,4 @@ export function Pill({onClick, enabled, color = "white", text}: PillProps): Reac
       </Text>
     </Box>
   );
-}
+};

package/src/Pog.tsx

@@ -23,7 +23,7 @@ const defaultIconButtonIconColors = {
   white: "gray",
 };
 
-export function Pog(props: PogProps) {
+export const Pog = (props: PogProps) => {
   const {
     bgColor = "transparent",
     iconColor,
@@ -72,4 +72,4 @@ export function Pog(props: PogProps) {
       </Box>
     </div>
   );
-}
+};

package/src/ProgressBar.tsx

@@ -4,7 +4,7 @@ import {View} from "react-native";
 import {ProgressBarProps} from "./Common";
 import {ThemeContext} from "./Theme";
 
-export function ProgressBar({color, completed}: ProgressBarProps): React.ReactElement {
+export const ProgressBar = ({color, completed}: ProgressBarProps): React.ReactElement => {
   const {theme} = useContext(ThemeContext);
 
   return (
@@ -44,4 +44,4 @@ export function ProgressBar({color, completed}: ProgressBarProps): React.ReactEl
       />
     </View>
   );
-}
+};

package/src/SelectList.tsx

@@ -21,7 +21,7 @@ export interface SelectListProps extends FieldWithLabelsProps {
   style?: StyleProp<RNPickerSelectProps["style"]>;
 }
 
-export function SelectList({
+export const SelectList = ({
   options,
   value,
   onChange,
@@ -30,7 +30,7 @@ export function SelectList({
   style,
   placeholder,
   disabled,
-}: SelectListProps) {
+}: SelectListProps) => {
   const {theme} = useContext(ThemeContext);
 
   const withLabelProps = {label, labelColor};
@@ -87,4 +87,4 @@ export function SelectList({
       />
     </WithLabel>
   );
-}
+};

package/src/Signature.native.tsx

@@ -35,6 +35,7 @@ export const Signature: React.FC<Props> = ({onChange, onStart, onEnd}: Props) =>
       <Box border="black" height={100}>
         <SignatureScreen
           ref={ref}
+          trimWhitespace
           webStyle={style}
           onBegin={onBegin}
           onEnd={handleEnd}

package/src/Signature.tsx

@@ -10,7 +10,7 @@ export interface SignatureProps {
   onEnd?: () => void;
 }
 
-export function Signature({onChange}: SignatureProps): ReactElement | null {
+export const Signature = ({onChange}: SignatureProps): ReactElement | null => {
   const ref = useRef<SignatureCanvas>(null);
 
   const onClear = () => {
@@ -33,4 +33,4 @@ export function Signature({onChange}: SignatureProps): ReactElement | null {
       </Box>
     </Box>
   );
-}
+};

package/src/Spinner.tsx

@@ -3,7 +3,7 @@ import {ActivityIndicator} from "react-native";
 
 import {SpinnerProps} from "./Common";
 
-export function Spinner({size, color}: SpinnerProps): ReactElement | null {
+export const Spinner = ({size, color}: SpinnerProps): ReactElement | null => {
   const [show, setShow] = useState(false);
 
   // The delay is for perceived performance. You don't want to show a spinner when you're doing a
@@ -18,4 +18,4 @@ export function Spinner({size, color}: SpinnerProps): ReactElement | null {
   }
   const spinnerSize: "small" | "large" = size === "sm" ? "small" : "large";
   return <ActivityIndicator color={color ?? "darkGray"} size={spinnerSize} />;
-}
+};

package/src/SplitPage.native.tsx

@@ -48,6 +48,7 @@ export const SplitPage = ({
     await onSelectionChange(undefined);
   }, [onSelectionChange]);
 
+  // If the list is showing, deselect the item.
   useEffect(() => {
     if (showItemList) {
       void onItemDeselect();

package/src/SplitPage.tsx

@@ -52,6 +52,7 @@ export const SplitPage = ({
     await onSelectionChange(undefined);
   }, [onSelectionChange]);
 
+  // If the list is showing, deselect the item.
   useEffect(() => {
     if (showItemList) {
       void onItemDeselect();

package/src/Switch.tsx

@@ -4,10 +4,15 @@ import {Switch as NativeSwitch} from "react-native";
 import {SwitchProps} from "./Common";
 import {WithLabel} from "./WithLabel";
 
-export function Switch({disabled, switched, onChange, ...rest}: SwitchProps): React.ReactElement {
+export const Switch = ({
+  disabled,
+  switched,
+  onChange,
+  ...rest
+}: SwitchProps): React.ReactElement => {
   return (
     <WithLabel labelAlignItems="center" labelInline labelJustifyContent="between" {...rest}>
       <NativeSwitch disabled={disabled} value={switched} onValueChange={onChange} />
     </WithLabel>
   );
-}
+};

package/src/Table.tsx

@@ -5,14 +5,14 @@ import {TableProps} from "./Common";
 import {ScrollView} from "./ScrollView";
 import {ColumnSortInterface, TableContextProvider} from "./tableContext";
 
-export function Table({
+export const Table = ({
   children,
   columns,
   borderStyle,
   alternateRowBackground = true,
   maxHeight,
   stickyHeader = true,
-}: TableProps): React.ReactElement {
+}: TableProps): React.ReactElement => {
   const arrayChildren = Children.toArray(children);
   const [sortColumn, setSortColumn] = React.useState<ColumnSortInterface | undefined>(undefined);
 
@@ -60,4 +60,4 @@ export function Table({
       </ScrollView>
     </TableContextProvider>
   );
-}
+};

package/src/TableHeader.tsx

@@ -7,14 +7,14 @@ import {TableRow} from "./TableRow";
 /**
  * Use TableHeader to group the header content in Table.
  */
-export function TableHeader({
+export const TableHeader = ({
   children,
   display = "tableHeaderGroup",
   color,
-}: TableHeaderProps): React.ReactElement {
+}: TableHeaderProps): React.ReactElement => {
   return (
     <Box color={color ?? "white"} display={display === "visuallyHidden" ? "none" : "flex"}>
       <TableRow headerRow>{children}</TableRow>
     </Box>
   );
-}
+};

package/src/TableHeaderCell.tsx

@@ -8,12 +8,12 @@ import {useTableContext} from "./tableContext";
 /**
  * Use TableHeaderCell to define a header cell in Table.
  */
-export function TableHeaderCell({
+export const TableHeaderCell = ({
   children,
   index,
   sortable,
   onSortChange,
-}: TableHeaderCellProps): ReactElement {
+}: TableHeaderCellProps): ReactElement => {
   const {columns, setSortColumn, sortColumn} = useTableContext();
   const width = columns[index];
   if (!width) {
@@ -69,4 +69,4 @@ export function TableHeaderCell({
       </Box>
     );
   }
-}
+};

package/src/TableRow.tsx

@@ -8,13 +8,13 @@ import {useTableContext} from "./tableContext";
 /**
  * Use TableRow to define a row in Table.
  */
-export function TableRow({
+export const TableRow = ({
   children,
   headerRow = false,
   expanded,
   drawerContents,
   color = "white",
-}: TableRowProps): React.ReactElement {
+}: TableRowProps): React.ReactElement => {
   const [isExpanded, setIsExpanded] = React.useState(expanded || false);
   const {columns, hasDrawerContents} = useTableContext();
   const rowRef = useRef<typeof Box>(null);
@@ -61,4 +61,4 @@ export function TableRow({
       )}
     </Box>
   );
-}
+};

package/src/TapToEdit.tsx

@@ -160,7 +160,7 @@ export const TapToEdit = ({
         try {
           const url = new URL(value);
           displayValue = url?.hostname ?? value;
-        } catch (e) {
+        } catch (error) {
           // Don't print an error message for empty values.
           if (value) {
             console.debug(`Invalid URL: ${value}`);

package/src/Text.tsx

@@ -12,7 +12,7 @@ const fontSizes = {
   lg: 16,
 };
 
-export function Text({
+export const Text = ({
   align = "left",
   children,
   color,
@@ -28,7 +28,7 @@ export function Text({
   skipLinking,
   testID,
   weight = "normal",
-}: TextProps): React.ReactElement {
+}: TextProps): React.ReactElement => {
   const {theme} = useContext(ThemeContext);
 
   function propsToStyle(): any {
@@ -115,4 +115,4 @@ export function Text({
       </Hyperlink>
     );
   }
-}
+};

package/src/TextArea.tsx

@@ -3,6 +3,6 @@ import React from "react";
 import {TextAreaProps} from "./Common";
 import {TextField} from "./TextField";
 
-export function TextArea({height, ...rest}: TextAreaProps): React.ReactElement {
+export const TextArea = ({height, ...rest}: TextAreaProps): React.ReactElement => {
   return <TextField {...rest} height={height ?? 100} multiline />;
-}
+};

package/src/TextField.tsx

@@ -59,7 +59,7 @@ const textContentMap: {
   username: "username",
 };
 
-export function TextField({
+export const TextField = ({
   blurOnSubmit = true,
   value,
   height: propsHeight,
@@ -86,7 +86,7 @@ export function TextField({
   onEnter,
   onSubmitEditing,
   testID,
-}: TextFieldProps): ReactElement {
+}: TextFieldProps): ReactElement => {
   const {theme} = useContext(ThemeContext);
 
   const dateActionSheetRef: React.RefObject<any> = React.createRef();
@@ -404,4 +404,4 @@ export function TextField({
       )}
     </>
   );
-}
+};

package/src/Toast.tsx

@@ -34,7 +34,7 @@ export function useToast(): any {
   };
 }
 
-export function Toast({message, data}: ToastProps): React.ReactElement {
+export const Toast = ({message, data}: ToastProps): 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, persistent, onDismiss} = data ?? {};
@@ -89,4 +89,4 @@ export function Toast({message, data}: ToastProps): React.ReactElement {
       )}
     </Box>
   );
-}
+};

package/src/Tooltip.tsx

@@ -138,6 +138,7 @@ export const Tooltip = (props: TooltipProps) => {
 
   const isWeb = Platform.OS === "web";
 
+  // If the tooltip is visible, and the user clicks outside of the tooltip, hide it.
   React.useEffect(() => {
     return () => {
       if (showTooltipTimer.current) {

package/src/Unifier.ts

@@ -151,8 +151,8 @@ class UnifierClass {
         } else {
           return null;
         }
-      } catch (e) {
-        console.error(`[storage] Error reading ${key}`, e);
+      } catch (error) {
+        console.error(`[storage] Error reading ${key}`, error);
         return defaultValue || null;
       }
     },
@@ -160,9 +160,9 @@ class UnifierClass {
       try {
         const jsonValue = JSON.stringify(item);
         await AsyncStorage.setItem(key, jsonValue);
-      } catch (e) {
-        console.error(`[storage] Error storing ${key}`, item, e);
-        throw new Error(e as any);
+      } catch (error) {
+        console.error(`[storage] Error storing ${key}`, item, error);
+        throw new Error(error as any);
       }
     },
   };

package/src/WebAddressAutocomplete.tsx

@@ -34,6 +34,7 @@ export const WebAddressAutocomplete = ({
   const [scriptLoaded, setScriptLoaded] = useState(true);
   const autocompleteInputRef = useRef(null);
 
+  // Load the Google Maps script and initialize the autocomplete.
   useEffect(() => {
     const callbackName = "initAutocomplete";
     if (!googleMapsApiKey) {