ferns-ui 1.16.1 → 2.0.0-beta.2

package/src/Badge.tsx

@@ -77,7 +77,7 @@ export const Badge = ({
   let badgeValue = value;
 
   if (variant === "numberOnly") {
-    if (!Number.isNaN(Number(value)) && maxValue) {
+    if (!isNaN(Number(value)) && maxValue) {
       const numberValue = Number(value);
       if (numberValue > maxValue) {
         badgeValue = `${maxValue}+`;

package/src/Banner.tsx

@@ -1,6 +1,6 @@
 import debounce from "lodash/debounce";
 import React, {useEffect, useState} from "react";
-import {ActivityIndicator, Text as NativeText, Pressable, View} from "react-native";
+import {ActivityIndicator, Pressable, Text as NativeText, View} from "react-native";
 
 import {Box} from "./Box";
 import {BannerProps, IconName, SurfaceTheme} from "./Common";

package/src/Box.test.tsx

@@ -38,7 +38,7 @@ describe("Box", () => {
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
         flexDirection: "column",
-        display: "flex",
+        display: "flex"
       });
     });
 
@@ -53,7 +53,7 @@ describe("Box", () => {
       expect(view.props.style).toMatchObject({
         flexGrow: 1,
         flexShrink: 1,
-        display: "flex",
+        display: "flex"
       });
     });
 
@@ -62,7 +62,7 @@ describe("Box", () => {
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
         flexShrink: 1,
-        display: "flex",
+        display: "flex"
       });
     });
 
@@ -71,7 +71,7 @@ describe("Box", () => {
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
         flex: 0,
-        display: "flex",
+        display: "flex"
       });
     });
 
@@ -79,7 +79,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box justifyContent="center" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        justifyContent: "center",
+        justifyContent: "center"
       });
     });
 
@@ -87,7 +87,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box alignItems="center" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        alignItems: "center",
+        alignItems: "center"
       });
     });
 
@@ -95,7 +95,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box alignContent="center" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        alignContent: "center",
+        alignContent: "center"
       });
     });
 
@@ -103,7 +103,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box alignSelf="center" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        alignSelf: "center",
+        alignSelf: "center"
       });
     });
 
@@ -112,7 +112,7 @@ describe("Box", () => {
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
         flexWrap: "wrap",
-        alignItems: "flex-start",
+        alignItems: "flex-start"
       });
     });
 
@@ -120,7 +120,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box gap={4} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        gap: 16,
+        gap: 16
       });
     });
   });
@@ -130,7 +130,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box padding={4} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        padding: 16,
+        padding: 16
       });
     });
 
@@ -139,7 +139,7 @@ describe("Box", () => {
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
         paddingLeft: 8,
-        paddingRight: 8,
+        paddingRight: 8
       });
     });
 
@@ -148,7 +148,7 @@ describe("Box", () => {
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
         paddingTop: 12,
-        paddingBottom: 12,
+        paddingBottom: 12
       });
     });
 
@@ -156,7 +156,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box margin={4} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        margin: 16,
+        margin: 16
       });
     });
 
@@ -164,7 +164,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box marginTop={2} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        marginTop: 8,
+        marginTop: 8
       });
     });
 
@@ -172,7 +172,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box marginBottom={2} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        marginBottom: 8,
+        marginBottom: 8
       });
     });
 
@@ -180,7 +180,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box marginLeft={2} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        marginLeft: 8,
+        marginLeft: 8
       });
     });
 
@@ -188,7 +188,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box marginRight={2} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        marginRight: 8,
+        marginRight: 8
       });
     });
   });
@@ -198,7 +198,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box width={100} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        width: 100,
+        width: 100
       });
     });
 
@@ -206,7 +206,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box height={100} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        height: 100,
+        height: 100
       });
     });
 
@@ -214,7 +214,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box width="50%" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        width: "50%",
+        width: "50%"
       });
     });
 
@@ -222,7 +222,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box height="50%" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        height: "50%",
+        height: "50%"
       });
     });
   });
@@ -232,7 +232,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box position="absolute" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        position: "absolute",
+        position: "absolute"
       });
     });
 
@@ -240,7 +240,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box top />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        top: 0,
+        top: 0
       });
     });
 
@@ -248,7 +248,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box bottom />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        bottom: 0,
+        bottom: 0
       });
     });
 
@@ -256,7 +256,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box left />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        left: 0,
+        left: 0
       });
     });
 
@@ -264,7 +264,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box right />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        right: 0,
+        right: 0
       });
     });
 
@@ -272,7 +272,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box zIndex={10} />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        zIndex: 10,
+        zIndex: 10
       });
     });
   });
@@ -356,9 +356,7 @@ describe("Box", () => {
     it("should warn when using circle without dimensions", () => {
       const consoleSpy = jest.spyOn(console, "warn").mockImplementation();
       renderWithTheme(<Box rounding="circle" />);
-      expect(consoleSpy).toHaveBeenCalledWith(
-        "Cannot use Box rounding='circle' without height or width."
-      );
+      expect(consoleSpy).toHaveBeenCalledWith("Cannot use Box rounding='circle' without height or width.");
       consoleSpy.mockRestore();
     });
   });
@@ -368,7 +366,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box display="none" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        display: "none",
+        display: "none"
       });
     });
 
@@ -376,7 +374,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box display="flex" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        flex: undefined,
+        flex: undefined
       });
     });
 
@@ -385,7 +383,7 @@ describe("Box", () => {
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
         flex: 0,
-        flexDirection: "row",
+        flexDirection: "row"
       });
     });
   });
@@ -395,7 +393,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box overflow="scroll" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        overflow: "scroll",
+        overflow: "scroll"
       });
     });
 
@@ -403,7 +401,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box overflow="scrollY" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        overflow: "scroll",
+        overflow: "scroll"
       });
     });
 
@@ -411,7 +409,7 @@ describe("Box", () => {
       const {root} = renderWithTheme(<Box overflow="hidden" />);
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        overflow: "hidden",
+        overflow: "hidden"
       });
     });
   });
@@ -428,15 +426,11 @@ describe("Box", () => {
     it("should render as Pressable when onClick is provided", () => {
       const mockOnClick = jest.fn();
       const {root} = renderWithTheme(
-        <Box
-          onClick={mockOnClick}
-          accessibilityLabel="Click me"
-          accessibilityHint="Tap to trigger action"
-        >
+        <Box onClick={mockOnClick} accessibilityLabel="Click me" accessibilityHint="Tap to trigger action">
           <Text>Clickable content</Text>
         </Box>
       );
-
+      
       expect(root).toBeTruthy();
       // Just verify the component renders without error when onClick is provided
     });
@@ -444,33 +438,33 @@ describe("Box", () => {
     it("should call onClick when pressed", async () => {
       const mockOnClick = jest.fn();
       const {getByTestId} = renderWithTheme(
-        <Box
-          onClick={mockOnClick}
+        <Box 
+          onClick={mockOnClick} 
           testID="clickable-box"
-          accessibilityLabel="Click me"
+          accessibilityLabel="Click me" 
           accessibilityHint="Tap to trigger action"
         />
       );
-
+      
       const pressable = getByTestId("clickable-box-clickable");
       await act(async () => {
         fireEvent.press(pressable);
       });
-
+      
       expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
 
     it("should apply accessibility props to Pressable", () => {
       const mockOnClick = jest.fn();
       const {getByTestId} = renderWithTheme(
-        <Box
+        <Box 
           onClick={mockOnClick}
           testID="accessible-box"
           accessibilityLabel="Click me"
           accessibilityHint="Tap to trigger action"
         />
       );
-
+      
       const pressable = getByTestId("accessible-box-clickable");
       expect(pressable).toBeTruthy();
       // Basic check that accessibility props are being applied
@@ -519,24 +513,26 @@ describe("Box", () => {
       const {getByTestId} = renderWithTheme(
         <Box onHoverStart={mockOnHoverStart} testID="hover-box" />
       );
-
+      
       const view = getByTestId("hover-box");
       await act(async () => {
         fireEvent(view, "pointerEnter");
       });
-
+      
       expect(mockOnHoverStart).toHaveBeenCalledTimes(1);
     });
 
     it("should call onHoverEnd", async () => {
       const mockOnHoverEnd = jest.fn();
-      const {getByTestId} = renderWithTheme(<Box onHoverEnd={mockOnHoverEnd} testID="hover-box" />);
-
+      const {getByTestId} = renderWithTheme(
+        <Box onHoverEnd={mockOnHoverEnd} testID="hover-box" />
+      );
+      
       const view = getByTestId("hover-box");
       await act(async () => {
         fireEvent(view, "pointerLeave");
       });
-
+      
       expect(mockOnHoverEnd).toHaveBeenCalledTimes(1);
     });
   });
@@ -545,7 +541,7 @@ describe("Box", () => {
     it("should expose scrollToEnd method", () => {
       const ref = React.createRef<any>();
       renderWithTheme(<Box ref={ref} scroll />);
-
+      
       expect(ref.current).toBeTruthy();
       expect(typeof ref.current.scrollToEnd).toBe("function");
     });
@@ -553,7 +549,7 @@ describe("Box", () => {
     it("should expose scrollTo method", () => {
       const ref = React.createRef<any>();
       renderWithTheme(<Box ref={ref} scroll />);
-
+      
       expect(ref.current).toBeTruthy();
       expect(typeof ref.current.scrollTo).toBe("function");
     });
@@ -562,11 +558,11 @@ describe("Box", () => {
   describe("dangerous inline styles", () => {
     it("should apply dangerouslySetInlineStyle", () => {
       const {root} = renderWithTheme(
-        <Box dangerouslySetInlineStyle={{__style: {backgroundColor: "red"}}} />
+        <Box dangerouslySetInlineStyle={{ __style: { backgroundColor: "red" } }} />
       );
       const view = root.findByType("View");
       expect(view.props.style).toMatchObject({
-        backgroundColor: "red",
+        backgroundColor: "red"
       });
     });
   });
@@ -575,9 +571,7 @@ describe("Box", () => {
     it("should warn when using wrap and alignItems together", () => {
       const consoleSpy = jest.spyOn(console, "warn").mockImplementation();
       renderWithTheme(<Box wrap alignItems="center" />);
-      expect(consoleSpy).toHaveBeenCalledWith(
-        "React Native doesn't support wrap and alignItems together."
-      );
+      expect(consoleSpy).toHaveBeenCalledWith("React Native doesn't support wrap and alignItems together.");
       consoleSpy.mockRestore();
     });
   });
@@ -610,7 +604,7 @@ describe("Box", () => {
       expect(view.props.style).toMatchObject({
         padding: 0,
         margin: 0,
-        gap: 0,
+        gap: 0
       });
     });
   });
@@ -623,11 +617,11 @@ describe("Box", () => {
 
     it("should match snapshot with layout props", () => {
       const component = renderWithTheme(
-        <Box
-          direction="column"
-          flex="grow"
-          justifyContent="center"
-          alignItems="center"
+        <Box 
+          direction="column" 
+          flex="grow" 
+          justifyContent="center" 
+          alignItems="center" 
           padding={4}
           margin={2}
         />
@@ -637,7 +631,7 @@ describe("Box", () => {
 
     it("should match snapshot with clickable props", () => {
       const component = renderWithTheme(
-        <Box
+        <Box 
           onClick={jest.fn()}
           accessibilityLabel="Click me"
           accessibilityHint="Tap to trigger action"
@@ -658,9 +652,14 @@ describe("Box", () => {
 
     it("should match snapshot with border and rounding", () => {
       const component = renderWithTheme(
-        <Box border="default" rounding="md" color="primary" shadow />
+        <Box 
+          border="default"
+          rounding="md"
+          color="primary"
+          shadow
+        />
       );
       expect(component.toJSON()).toMatchSnapshot();
     });
   });
-});
+});

package/src/Box.tsx

@@ -58,7 +58,7 @@ const isValidPercentage = (value: string): boolean => {
 };
 
 const isValidWidthHeight = (value: number | string): boolean => {
-  return typeof value === "number" || !Number.isNaN(Number(value)) || isValidPercentage(value);
+  return typeof value === 'number' || !isNaN(Number(value)) || isValidPercentage(value);
 };
 
 // eslint-disable-next-line react/display-name
@@ -153,12 +153,10 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
     gap: (value) => ({gap: getSpacing(value)}),
     height: (value) => {
       if (!isValidWidthHeight(value)) {
-        console.warn(
-          `Box: height prop must be a number or percentage string (e.g., "50%"), received: ${value}`
-        );
+        console.warn(`Box: height prop must be a number or percentage string (e.g., "50%"), received: ${value}`);
         return {};
       }
-      if (props.border && !Number.isNaN(Number(value))) {
+      if (props.border && !isNaN(Number(value))) {
         return {height: Number(value) + 2 * 2};
       } else {
         return {height: value};
@@ -212,12 +210,10 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
     top: (top) => ({top: top ? 0 : undefined}),
     width: (value) => {
       if (!isValidWidthHeight(value)) {
-        console.warn(
-          `Box: width prop must be a number or percentage string (e.g., "50%"), received: ${value}`
-        );
+        console.warn(`Box: width prop must be a number or percentage string (e.g., "50%"), received: ${value}`);
         return {};
       }
-      if (props.border && !Number.isNaN(Number(value))) {
+      if (props.border && !isNaN(Number(value))) {
         return {width: Number(value) + 2 * 2};
       } else {
         return {width: value};
@@ -225,36 +221,28 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
     },
     maxHeight: (value) => {
       if (!isValidWidthHeight(value)) {
-        console.warn(
-          `Box: maxHeight prop must be a number or percentage string (e.g., "50%"), received: ${value}`
-        );
+        console.warn(`Box: maxHeight prop must be a number or percentage string (e.g., "50%"), received: ${value}`);
         return {};
       }
       return {maxHeight: value};
     },
     maxWidth: (value) => {
       if (!isValidWidthHeight(value)) {
-        console.warn(
-          `Box: maxWidth prop must be a number or percentage string (e.g., "50%"), received: ${value}`
-        );
+        console.warn(`Box: maxWidth prop must be a number or percentage string (e.g., "50%"), received: ${value}`);
         return {};
       }
       return {maxWidth: value};
     },
     minHeight: (value) => {
       if (!isValidWidthHeight(value)) {
-        console.warn(
-          `Box: minHeight prop must be a number or percentage string (e.g., "50%"), received: ${value}`
-        );
+        console.warn(`Box: minHeight prop must be a number or percentage string (e.g., "50%"), received: ${value}`);
         return {};
       }
       return {minHeight: value};
     },
     minWidth: (value) => {
       if (!isValidWidthHeight(value)) {
-        console.warn(
-          `Box: minWidth prop must be a number or percentage string (e.g., "50%"), received: ${value}`
-        );
+        console.warn(`Box: minWidth prop must be a number or percentage string (e.g., "50%"), received: ${value}`);
         return {};
       }
       return {minWidth: value};

package/src/Button.tsx

@@ -116,6 +116,7 @@ const ButtonComponent: FC<ButtonProps> = ({
       testID={testID}
       onPress={debounce(
         async () => {
+          // TODO: Allow for a click outside of the confirmation modal to close it.
           await Unifier.utils.haptic();
           setLoading(true);
 

package/src/CheckBox.tsx

@@ -32,13 +32,7 @@ export const CheckBox: FC<CheckBoxProps> = ({selected, size = "md", bgColor = "d
       }}
     >
       {selected ? (
-        <FontAwesome6
-          color={theme.surface.base}
-          name="check"
-          size={px[size].icon}
-          solid
-          selectable={undefined}
-        />
+        <FontAwesome6 color={theme.surface.base} name="check" size={px[size].icon} solid selectable={undefined}/>
       ) : null}
     </View>
   );

package/src/Common.ts

@@ -64,11 +64,6 @@ export interface AccordionProps extends InfoModalIconProps {
    * The title of the accordion.
    */
   title: string;
-
-  /**
-   * * Callback fired when the accordion is toggled.
-   * */
-  onToggle?: (isCollapse: boolean) => void;
 }
 
 export interface BaseProfile {
@@ -308,6 +303,18 @@ export type TextColor = keyof TextTheme;
 export type SurfaceColor = keyof SurfaceTheme;
 export type BorderColor = keyof BorderTheme;
 export type StatusColor = keyof StatusTheme;
+// TODO: Remove ButtonColor. Buttons no longer have colors, only types (called style in Figma)
+export type ButtonColor =
+  | "blue"
+  | "gray"
+  | "red"
+  // | "transparent"
+  | "white"
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "tertiary"
+  | string;
 
 // TODO: we may want/need to expand icon color options from just text colors.
 export type IconColor = TextColor;
@@ -425,11 +432,11 @@ export const iconSizeToNumber = (size?: IconSize) => {
 
 export type TextSize = "sm" | "md" | "lg" | "xl" | "2xl";
 
-export interface ValueMappingItem {
+export type ValueMappingItem = {
   value: number;
   label: string;
   size?: IconSize;
-}
+};
 
 export type IconPrefix = "far" | "fas";
 
@@ -731,7 +738,7 @@ export interface HeadingProps {
   children?: React.ReactNode;
   color?: TextColor;
   overflow?: "normal" | "breakWord"; // default "breakWord"
-  size?: "sm" | "md" | "lg" | "xl" | "2xl"; // default "sm"
+  size?: "sm" | "md" | "lg" | "xl"; // default "sm"
   truncate?: boolean; // default false
   testID?: string;
 }
@@ -763,6 +770,11 @@ export interface ImageProps {
   style?: any;
 }
 
+export interface SearchButtonProps {
+  color: ButtonColor;
+  onClick: () => void;
+}
+
 export interface BackButtonInterface {
   onBack: () => void;
 }
@@ -1774,11 +1786,6 @@ export interface ModalProps {
    * The content of the modal.
    */
   children?: React.ReactElement;
-  /**
-   * If true, the modal will be closed when the background is clicked.
-   * @default false
-   */
-  persistOnBackgroundClick?: boolean;
   /**
    * If true, the primary button will be disabled.
    * @default false
@@ -2132,7 +2139,7 @@ export interface TableContextType {
 }
 
 export interface TableContextProviderProps extends TableContextType {
-  children: React.ReactNode;
+  children: React.ReactElement;
 }
 
 export interface TextProps {