ferns-ui 0.41.1 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -38,31 +38,16 @@
     "useTabs": false
   },
   "eslintConfig": {
+    "extends": [
+      "plugin:ferns/recommended"
+    ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "project": "./tsconfig.json",
-      "tsconfigRootDir": "./",
-      "ecmaFeatures": {
-        "jsx": true
-      },
-      "ecmaVersion": 2018,
-      "sourceType": "module"
-    },
-    "settings": {
-      "react": {
-        "version": "17.0.2"
-      }
+      "tsconfigRootDir": "./"
     },
-    "plugins": [
-      "prettier",
-      "lodash"
-    ],
-    "extends": [
-      "ferns",
-      "plugin:comment-length/recommended"
-    ],
     "rules": {
-      "react/function-component-definition": "off"
+      "@typescript-eslint/explicit-function-return-type": "off"
     }
   },
   "jest": {
@@ -130,9 +115,9 @@
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "eslint": "^8.55.0",
-    "eslint-config-ferns": "^0.5.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-comment-length": "^1.7.2",
+    "eslint-plugin-ferns": "^0.3.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-lodash": "^7.1.0",
     "eslint-plugin-prettier": "^5.0.1",

package/src/Avatar.tsx

@@ -71,6 +71,7 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
       .join("")
       .toLocaleUpperCase();
 
+  // If the src changes, update the image.
   useEffect(() => {
     setSrc(props.src);
   }, [props]);

package/src/Badge.tsx

@@ -5,7 +5,7 @@ import {BadgeProps} from "./Common";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
 
-export function Badge({
+export const Badge = ({
   title,
   position = "middle",
   type = "info",
@@ -15,7 +15,7 @@ export function Badge({
   fontColor = "white",
   fontWeight = "bold",
   rounding = "pill",
-}: BadgeProps): React.ReactElement {
+}: BadgeProps): React.ReactElement => {
   if (color && type !== "custom") {
     console.warn('Badge color only supported when `type` is set to "custom".');
   }
@@ -63,4 +63,4 @@ export function Badge({
       {renderLabel()}
     </Box>
   );
-}
+};

package/src/Body.tsx

@@ -5,14 +5,14 @@ import {Box} from "./Box";
 import {BodyProps} from "./Common";
 import {ThemeContext} from "./Theme";
 
-export function Body({
+export const Body = ({
   scroll,
   loading,
   padding,
   height,
   avoidKeyboard,
   children,
-}: BodyProps): React.ReactElement {
+}: BodyProps): React.ReactElement => {
   const {theme} = useContext(ThemeContext);
 
   const renderBody = () => {
@@ -31,4 +31,4 @@ export function Body({
   } else {
     return <KeyboardAvoidingView behavior="position">{renderBody()}</KeyboardAvoidingView>;
   }
-}
+};

package/src/Button.tsx

@@ -33,7 +33,7 @@ const HEIGHTS = {
   lg: 48,
 };
 
-export function Button({
+export const Button = ({
   alignSelf,
   disabled = false,
   type = "solid",
@@ -52,7 +52,7 @@ export function Button({
   shape = "rounded",
   testID,
   tooltip,
-}: ButtonProps) {
+}: ButtonProps) => {
   const [loading, setLoading] = useState(propsLoading);
   const [showConfirmation, setShowConfirmation] = useState(false);
   const {theme} = useContext(ThemeContext);
@@ -141,9 +141,9 @@ export function Button({
                 } else if (onClick) {
                   await onClick();
                 }
-              } catch (e) {
+              } catch (error) {
                 setLoading(false);
-                throw e;
+                throw error;
               }
               setLoading(false);
             },
@@ -195,4 +195,4 @@ export function Button({
   } else {
     return renderButton();
   }
-}
+};

package/src/Card.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import {Box} from "./Box";
 import {BoxProps} from "./Common";
 
-export function Card({children, color = "white", padding = 4, width, ...rest}: BoxProps) {
+export const Card = ({children, color = "white", padding = 4, width, ...rest}: BoxProps) => {
   return (
     <Box
       color={color}
@@ -18,4 +18,4 @@ export function Card({children, color = "white", padding = 4, width, ...rest}: B
       {children}
     </Box>
   );
-}
+};

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/Common.ts

@@ -3046,3 +3046,20 @@ export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
   openApiField?: string;
   showDescriptionAsTooltip?: boolean;
 }
+
+export interface APIError {
+  status: number;
+  data: {
+    title: string;
+    detail?: string;
+    id?: string;
+    links?: string;
+    about?: string;
+    status?: number;
+    code?: string;
+    source?: string;
+    pointer?: string;
+    parameter?: string;
+    meta?: {[id: string]: any};
+  };
+}

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

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