ferns-ui 0.39.0 → 0.39.2

package/src/CustomSelect.tsx

@@ -1,19 +1,10 @@
 import React, {ReactElement, useEffect, useMemo, useState} from "react";
 
 import {Box} from "./Box";
+import {CustomSelectProps} from "./Common";
 import {SelectList} from "./SelectList";
 import {TextField} from "./TextField";
 
-export interface CustomSelectProps {
-  value: string;
-  onChange: (value: string) => void;
-  options: Array<{label: string; value: string}>;
-  placeholder?: string;
-  disabled?: boolean;
-  label?: string;
-  labelColor?: string;
-}
-
 export const CustomSelect = ({
   value,
   onChange,
@@ -27,7 +18,8 @@ export const CustomSelect = ({
   // Boolean that checks if customValue is a value from the
   // options prop or if it is a true custom value
   const isValueCustom: boolean = useMemo((): boolean => {
-    // We add an empty value to protect against an empty string custom value or if the placeholder value is selected
+    // We add an empty value to protect against an empty string custom value or if the placeholder
+    // value is selected
     return ![...options, {value: ""}].map((i) => i.value).includes(customValue);
   }, [options, customValue]);
 
@@ -38,9 +30,11 @@ export const CustomSelect = ({
     }
   }, [showCustomInput, value, isValueCustom]);
 
-  // Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
+  // Custom select has 3 values - the overall field value, the value of the select menu,
+  // and the value of the custom input
   const handleCustomSelectListChange = (newValue: string) => {
-    // If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
+    // If "custom" is selected from the dropdown, toggle the custom input open and clear the
+    // previous value
     if (newValue === "custom") {
       setShowCustomInput(true);
       setCustomValue(isValueCustom ? "custom" : newValue);

package/src/DateTimeActionSheet.tsx

@@ -5,7 +5,7 @@ import {Platform, StyleProp, TextInput, TextStyle, View} from "react-native";
 import {Calendar} from "react-native-calendars";
 
 import {Box} from "./Box";
-import {OnChangeCallback} from "./Common";
+import {DateTimeActionSheetProps} from "./Common";
 import dayjs from "./dayjsExtended";
 import {Heading} from "./Heading";
 import {IconButton} from "./IconButton";
@@ -155,24 +155,12 @@ function CalendarHeader({
   );
 }
 
-interface DateTimeActionSheetProps {
-  value?: string;
-  mode?: "date" | "time" | "datetime";
-  // Returns an ISO 8601 string. If mode is "time", the date portion is today.
-  onChange: OnChangeCallback;
-  actionSheetRef: React.RefObject<any>;
-  visible: boolean;
-  onDismiss: () => void;
-}
-
-// 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.
-//   If mode is "date", renders our custom calendar on both platforms.
-//   If mode is "datetime", 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.
+// 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.
+// If mode is "date", renders our custom calendar on both platforms. If mode is "datetime",
+// 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({
   // actionSheetRef,
   mode,
@@ -366,8 +354,8 @@ export function DateTimeActionSheet({
         markedDates={markedDates}
         onDayPress={(day) => {
           setDate(day.dateString);
-          // If mode is just date, we can shortcut and close right away. time and datetime need to wait for the
-          // primary button.
+          // If mode is just date, we can shortcut and close right away.
+          // time and datetime need to wait for the primary button.
           if (mode === "date") {
             onChange({value: day.dateString});
             onDismiss();

package/src/DecimalRangeActionSheet.tsx

@@ -5,23 +5,10 @@ import React from "react";
 import {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {OnChangeCallback} from "./Common";
+import {DecimalRangeActionSheetProps, DecimalRangeActionSheetState} from "./Common";
 
 const PICKER_HEIGHT = 104;
 
-interface DecimalRangeActionSheetProps {
-  value: string;
-  min: number;
-  max: number;
-  onChange: OnChangeCallback;
-  actionSheetRef: React.RefObject<any>;
-}
-
-interface DecimalRangeActionSheetState {
-  whole: string;
-  decimal: string;
-}
-
 export class DecimalRangeActionSheet extends React.Component<
   DecimalRangeActionSheetProps,
   DecimalRangeActionSheetState

package/src/ErrorPage.tsx

@@ -2,11 +2,8 @@ import React from "react";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
+import {ErrorPageProps} from "./Common";
 import {Text} from "./Text";
-interface ErrorPageProps {
-  error: Error;
-  resetError: () => void;
-}
 
 export class ErrorPage extends React.Component<ErrorPageProps, {}> {
   constructor(props: ErrorPageProps) {

package/src/Field.tsx

@@ -1,53 +1,18 @@
 import React from "react";
-import {Styles} from "react-native-google-places-autocomplete";
 
 import {Box} from "./Box";
 import {CheckBox} from "./CheckBox";
-import {AddressInterface, FieldWithLabelsProps, ReactChildren, TextFieldType} from "./Common";
+import {AddressInterface, FieldProps, ReactChildren, TextFieldType} from "./Common";
 import {USSTATESLIST} from "./Constants";
 import {CustomSelect} from "./CustomSelect";
 import {FieldWithLabels} from "./FieldWithLabels";
-import {SelectList, SelectListOptions} from "./SelectList";
+import {SelectList} from "./SelectList";
 import {Switch} from "./Switch";
 import {Text} from "./Text";
 import {TextArea} from "./TextArea";
 import {TextField} from "./TextField";
 import {UnifiedAddressAutoCompleteField} from "./UnifiedAddressAutoComplete";
 
-export interface FieldProps extends FieldWithLabelsProps {
-  name?: string;
-  label?: string;
-  height?: number;
-  type?:
-    | "address"
-    | "boolean"
-    | "currency"
-    | "customSelect"
-    | "date"
-    | "datetime"
-    | "email"
-    | "multiselect"
-    | "number"
-    | "password"
-    | "percent"
-    | "phoneNumber"
-    | "select"
-    | "text"
-    | "textarea"
-    | "time"
-    | "url";
-  rows?: number;
-  value?: any;
-  onChange?: any;
-  options?: SelectListOptions;
-  placeholder?: string;
-  disabled?: boolean;
-  useCheckbox?: boolean;
-  includeCounty?: boolean;
-  googleMapsApiKey?: string;
-  googlePlacesMobileStyles?: Styles;
-}
-
 export const Field = ({
   name,
   label,
@@ -67,6 +32,7 @@ export const Field = ({
   includeCounty = false,
   googleMapsApiKey,
   googlePlacesMobileStyles,
+  testID,
 }: FieldProps) => {
   const handleAddressChange = (field: string, newValue: string) => {
     onChange({...value, [field]: newValue});
@@ -92,6 +58,7 @@ export const Field = ({
           id={name}
           options={options}
           placeholder={placeholder}
+          testID={testID}
           value={value}
           onChange={onChange}
         />
@@ -121,6 +88,7 @@ export const Field = ({
                   disabled={disabled}
                   name={name}
                   size="sm"
+                  testID={`${testID}-${o.value}`}
                   onChange={(result) => {
                     let newValue;
                     if (result.value) {
@@ -148,6 +116,7 @@ export const Field = ({
           id={name}
           placeholder={Boolean(value) ? "" : placeholder}
           rows={rows}
+          testID={testID}
           value={String(value)}
           onChange={(result) => onChange(result.value)}
         />
@@ -159,6 +128,7 @@ export const Field = ({
           id={name}
           name={name}
           switched={Boolean(value)}
+          testID={testID}
           onChange={(result) => handleSwitchChange(result)}
         />
       );
@@ -168,6 +138,7 @@ export const Field = ({
           disabled={disabled}
           id={name}
           placeholder={placeholder}
+          testID={testID}
           type={type as "date" | "time" | "datetime"}
           value={value}
           onChange={(result) => onChange(result.value)}
@@ -194,11 +165,13 @@ export const Field = ({
             handleAutoCompleteChange={(result) => handleAutoCompleteChange(result)}
             includeCounty={includeCounty}
             inputValue={address1}
+            testID={`${testID}-address1`}
           />
           <TextField
             disabled={disabled}
             id="address2"
             label="Apt, suite, etc"
+            testID={`${testID}-address2`}
             type="text"
             value={address2}
             onChange={(result) => handleAddressChange("address2", result.value)}
@@ -207,6 +180,7 @@ export const Field = ({
             disabled={disabled}
             id="city"
             label="City"
+            testID={`${testID}-city`}
             type="text"
             value={city}
             onChange={(result) => handleAddressChange("city", result.value)}
@@ -218,6 +192,7 @@ export const Field = ({
             options={USSTATESLIST}
             placeholder="Select state"
             style={{borderRadius: 16}}
+            testID={`${testID}-state`}
             value={state}
             onChange={(result) => handleAddressChange("state", result)}
           />
@@ -225,6 +200,7 @@ export const Field = ({
             disabled={disabled}
             id="zipcode"
             label="Zipcode"
+            testID={`${testID}-zip`}
             type="text"
             value={zipcode}
             onChange={(result) => handleAddressChange("zipcode", result.value)}
@@ -235,6 +211,7 @@ export const Field = ({
                 disabled={disabled}
                 id="countyName"
                 label="County Name"
+                testID={`${testID}-county`}
                 type="text"
                 value={countyName}
                 onChange={(result) => handleAddressChange("countyName", result.value)}
@@ -243,6 +220,7 @@ export const Field = ({
                 disabled={disabled}
                 id="countyCode"
                 label="County Code"
+                testID={`${testID}-county-code`}
                 type="number"
                 value={countyCode}
                 onChange={(result) => handleAddressChange("countyCode", result.value)}
@@ -271,6 +249,7 @@ export const Field = ({
           disabled={disabled}
           id={name}
           placeholder={placeholder}
+          testID={testID}
           type="number"
           value={value}
           onChange={(result) => onChange(result.value)}
@@ -306,6 +285,7 @@ export const Field = ({
           disabled={disabled}
           id={name}
           placeholder={placeholder}
+          testID={testID}
           type={
             tfType as
               | "date"

package/src/Form.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
+import {FormLineProps} from "./Common";
 import {IconButton} from "./IconButton";
 import {SelectList} from "./SelectList";
 import {Switch} from "./Switch";
@@ -16,14 +17,6 @@ function objToJoinedString(obj: any) {
     .join(", ");
 }
 
-interface FormLineProps {
-  name: string;
-  value: any;
-  onSave: (value: any) => void;
-  kind: "boolean" | "string" | "textarea" | "select" | "multiboolean";
-  options?: string[];
-}
-
 interface FormLineState {
   editing: boolean;
   value: any;

package/src/Heading.tsx

@@ -10,7 +10,13 @@ const fontSizes = {
   lg: 36,
 };
 
-export const Heading = ({align, children, color, size}: HeadingProps): React.ReactElement => {
+export const Heading = ({
+  align,
+  children,
+  color,
+  size,
+  testID,
+}: HeadingProps): React.ReactElement => {
   const {theme} = useContext(ThemeContext);
 
   const style: StyleProp<TextStyle> = {};
@@ -29,7 +35,7 @@ export const Heading = ({align, children, color, size}: HeadingProps): React.Rea
 
   const lines = 0;
   return (
-    <NativeText numberOfLines={lines} style={style}>
+    <NativeText numberOfLines={lines} style={style} testID={testID}>
       {children}
     </NativeText>
   );

package/src/HeightActionSheet.tsx

@@ -5,16 +5,10 @@ import React from "react";
 import {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {OnChangeCallback} from "./Common";
+import {HeightActionSheetProps} from "./Common";
 
 const PICKER_HEIGHT = 104;
 
-interface HeightActionSheetProps {
-  value?: string;
-  onChange: OnChangeCallback;
-  actionSheetRef: React.RefObject<any>;
-}
-
 interface HeightActionSheetState {
   feet: string;
   inches: string;

package/src/Hyperlink.tsx

@@ -29,26 +29,17 @@
 
 import mdurl from "mdurl";
 import React from "react";
-import {Linking, Platform, StyleProp, Text, View} from "react-native";
+import {Linking, Platform, Text, View} from "react-native";
+
+import {HyperlinkProps} from "./Common";
 
 const linkifyLib = require("linkify-it")();
 
 const {OS} = Platform;
 
-interface Props {
-  linkDefault?: boolean;
-  linkify?: any;
-  linkStyle?: StyleProp<any>;
-  linkText?: string | ((url: string) => string);
-  onPress?: (url: string) => void;
-  onLongPress?: (url: string, text: string) => void;
-  injectViewProps?: (url: string) => any;
-  children?: React.ReactNode;
-  style?: StyleProp<any>;
-}
-
-// Leaving this as a class component because it was easier to handle the `pasrse(this)` in `render()`
-class HyperlinkComponent extends React.Component<Props> {
+// Leaving this as a class component because it was easier to handle the `pasrse(this)` in
+// `render()`
+class HyperlinkComponent extends React.Component<HyperlinkProps> {
   isTextNested = (component: any) => {
     if (!React.isValidElement(component)) throw new Error("Invalid component");
     const {type: {displayName} = {} as any} = component;
@@ -164,7 +155,7 @@ class HyperlinkComponent extends React.Component<Props> {
   }
 }
 
-export function Hyperlink(props: Props) {
+export function Hyperlink(props: HyperlinkProps) {
   const handleLink = (url: string) => {
     const urlObject = mdurl.parse(url);
     urlObject.protocol = urlObject.protocol.toLowerCase();

package/src/Icon.tsx

@@ -8,8 +8,9 @@ export function initIcons() {
   console.debug("Initializing icons");
 }
 
-// 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}: IconProps): React.ReactElement {
+// 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 {
   const {theme} = useContext(ThemeContext);
   const iconColor = theme[color || "primary"];
   const iconSize = iconSizeToNumber(size);
@@ -20,6 +21,7 @@ export function Icon({color, size, name, prefix}: IconProps): React.ReactElement
       regular={prefix === "far"}
       size={iconSize}
       solid={!prefix || prefix === "fas"}
+      testID={testID}
     />
   );
 }

package/src/IconButton.tsx

@@ -1,18 +1,7 @@
 import React, {forwardRef, useContext, useState} from "react";
 import {Platform, Pressable, View, ViewStyle} from "react-native";
 
-import {
-  AllColors,
-  ButtonColor,
-  Color,
-  IconName,
-  IconPrefix,
-  IconSize,
-  iconSizeToNumber,
-  IndicatorDirection,
-  ThemeColor,
-  TooltipDirection,
-} from "./Common";
+import {IconButtonProps, iconSizeToNumber} from "./Common";
 import {Icon} from "./Icon";
 import {Modal} from "./Modal";
 import {Text} from "./Text";
@@ -20,34 +9,6 @@ import {ThemeContext} from "./Theme";
 import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 
-export interface IconButtonProps {
-  prefix?: IconPrefix;
-  icon: IconName;
-  accessibilityLabel: string;
-  iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
-  onClick: () => void;
-  size?: IconSize;
-  bgColor?:
-    | "transparent"
-    | "transparentDarkGray"
-    | "gray"
-    | "lightGray"
-    | "white"
-    | "background"
-    | "backgroundSecondary"; // default transparent
-  disabled?: boolean;
-  selected?: boolean;
-  withConfirmation?: boolean;
-  confirmationText?: string;
-  confirmationHeading?: string;
-  tooltip?: {
-    text: string;
-    idealDirection?: TooltipDirection;
-  };
-  indicator?: boolean;
-  indicatorStyle?: {position: IndicatorDirection; color: AllColors};
-}
-
 // eslint-disable-next-line react/display-name
 export const IconButton = forwardRef(
   (
@@ -64,6 +25,7 @@ export const IconButton = forwardRef(
       tooltip,
       indicator,
       indicatorStyle = {position: "bottomRight", color: "primary"},
+      testID,
     }: IconButtonProps,
     ref
   ) => {
@@ -131,6 +93,7 @@ export const IconButton = forwardRef(
               justifyContent: "center",
               alignItems: "center",
             }}
+            testID={testID}
             onPress={async () => {
               await Unifier.utils.haptic();
               if (withConfirmation && !showConfirmation) {
@@ -158,9 +121,9 @@ export const IconButton = forwardRef(
       );
     }
 
-    // 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.
+    // 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}>

package/src/InfoTooltipButton.tsx

@@ -1,13 +1,8 @@
 import React from "react";
 
-import {IconSize} from "./Common";
+import {InfoTooltipButtonProps} from "./Common";
 import {IconButton} from "./IconButton";
 
-interface InfoTooltipButtonProps {
-  text: string;
-  size?: IconSize;
-}
-
 export function InfoTooltipButton({text, size}: InfoTooltipButtonProps): React.ReactElement {
   return (
     <IconButton

package/src/Link.tsx

@@ -1,11 +1,8 @@
 import React from "react";
 import {Linking} from "react-native";
 
-import {Text, TextProps} from "./Text";
-
-interface LinkProps extends TextProps {
-  href: string;
-}
+import {LinkProps} from "./Common";
+import {Text} from "./Text";
 
 export function Link(props: LinkProps): React.ReactElement {
   return (

package/src/MobileAddressAutoComplete.tsx

@@ -3,10 +3,9 @@ import {TextStyle, TouchableOpacity, View} from "react-native";
 import {
   GooglePlacesAutocomplete,
   GooglePlacesAutocompleteRef,
-  Styles,
 } from "react-native-google-places-autocomplete";
 
-import {AddressInterface, OnChangeCallback} from "./Common";
+import {AddressAutocompleteProps} from "./Common";
 import {GOOGLE_PLACES_API_RESTRICTIONS} from "./Constants";
 import {TextField} from "./TextField";
 import {ThemeContext} from "./Theme";
@@ -21,15 +20,8 @@ export const MobileAddressAutocomplete = ({
   styles,
   handleAddressChange,
   handleAutoCompleteChange,
-}: {
-  disabled?: boolean;
-  googleMapsApiKey?: string;
-  includeCounty?: boolean;
-  inputValue: string;
-  styles?: Styles;
-  handleAddressChange: OnChangeCallback;
-  handleAutoCompleteChange: (value: AddressInterface) => void;
-}) => {
+  testID,
+}: AddressAutocompleteProps) => {
   const {theme} = useContext(ThemeContext);
   const ref = useRef<GooglePlacesAutocompleteRef | null>(null);
   const [isFocused, setIsFocused] = useState(false);
@@ -71,6 +63,7 @@ export const MobileAddressAutocomplete = ({
         disabled={disabled}
         id="address1"
         label="Street Address"
+        testID={testID}
         type="text"
         value={inputValue}
         onChange={(result) => handleAddressChange(result)}

package/src/Modal.tsx

@@ -4,36 +4,13 @@ import ActionSheet, {ActionSheetRef} from "react-native-actions-sheet";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
+import {ModalProps} from "./Common";
 import {Heading} from "./Heading";
 import {IconButton} from "./IconButton";
 import {isMobileDevice} from "./MediaQuery";
 import {Text} from "./Text";
 import {isNative} from "./Utilities";
 
-interface ModalProps {
-  onDismiss: () => void;
-  visible: boolean;
-  // Alignment of the header. Default is "center".
-  align?: "center" | "start";
-  // Element to render in the middle part of the modal.
-  children?: React.ReactElement;
-  // Element to render in the bottom of the modal. This takes precedence over primaryButton and secondaryButton.
-  footer?: React.ReactElement;
-  heading?: string;
-  size?: "sm" | "md" | "lg";
-  subHeading?: string;
-  // Renders a primary colored button all the way to the right in the footer, if no footer prop is provided.
-  primaryButtonText?: string;
-  primaryButtonOnClick?: (value?: any) => void;
-  primaryButtonDisabled?: boolean;
-  // Renders a gray button to the left of the primary button in the footer, if no footer prop is provided.
-  // Requires primaryButtonText to be defined, but is not required itself.
-  secondaryButtonText?: string;
-  secondaryButtonOnClick?: (value?: any) => void;
-  // Whether to show a close button in the upper left of modals or action sheets.
-  showClose?: boolean;
-}
-
 export const Modal = ({
   onDismiss,
   visible,
@@ -187,7 +164,7 @@ export const Modal = ({
     return (
       <ActionSheet ref={actionSheetRef} onClose={onDismiss}>
         <Box direction="row" marginBottom={2} paddingX={2} paddingY={2} width="100%">
-          <Box marginRight={4}>
+          <Box marginRight={4} minWidth={50}>
             {Boolean(showClose) && (
               <IconButton
                 accessibilityLabel="close"
@@ -220,7 +197,7 @@ export const Modal = ({
             )}
           </Box>
 
-          <Box alignSelf="start" height="100%" justifyContent="start">
+          <Box alignSelf="start" height="100%" justifyContent="start" marginLeft={4} minWidth={50}>
             {Boolean(primaryButtonText) && (
               <Button
                 color="primary"

package/src/NumberPickerActionSheet.tsx

@@ -5,18 +5,10 @@ import React from "react";
 import {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {OnChangeCallback} from "./Common";
+import {NumberPickerActionSheetProps} from "./Common";
 
 const PICKER_HEIGHT = 104;
 
-interface NumberPickerActionSheetProps {
-  value: string;
-  min: number;
-  max: number;
-  onChange: OnChangeCallback;
-  actionSheetRef: React.RefObject<any>;
-}
-
 interface NumberPickerActionSheetState {}
 
 export class NumberPickerActionSheet extends React.Component<