@factorialco/f0-react-native 0.23.0 → 0.24.0

package/src/components/Icon/index.tsx

@@ -1,12 +1,13 @@
-import { tv, type VariantProps } from "tailwind-variants";
 import React, {
-    forwardRef,
-    ForwardRefExoticComponent,
-    RefAttributes,
-} from "react";
-import { Svg, SvgProps } from "react-native-svg";
-import { withUniwind } from "uniwind";
-import { cn } from "../../lib/utils";
+  forwardRef,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from "react"
+import { Svg, SvgProps } from "react-native-svg"
+import { tv, type VariantProps } from "tailwind-variants"
+import { withUniwind } from "uniwind"
+
+import { cn } from "../../lib/utils"
 
 const iconVariants = tv({
   base: "shrink-0",
@@ -22,50 +23,44 @@ const iconVariants = tv({
   defaultVariants: {
     size: "md",
   },
-});
+})
 
 export interface IconProps extends SvgProps, VariantProps<typeof iconVariants> {
-  icon: IconType;
-  testID?: string;
-  className?: string;
-  variant?:
-    | "default"
-    | "critical"
-    | "neutral"
-    | "ghost"
-    | "outline"
-    | "promote";
-  isPressed?: boolean;
+  icon: IconType
+  testID?: string
+  className?: string
+  variant?: "default" | "critical" | "neutral" | "ghost" | "outline" | "promote"
+  isPressed?: boolean
 }
 
 export type IconType = ForwardRefExoticComponent<
   SvgProps &
     RefAttributes<Svg> & {
-      className?: string;
+      className?: string
     }
->;
+>
 
 // Keep track of icons that have already had withUniwind applied
-const interopAppliedIcons = new WeakSet();
+const interopAppliedIcons = new WeakSet()
 
 // Function to apply UniWind interop to an icon component
 export function applyIconInterop(icon: IconType) {
   if (!interopAppliedIcons.has(icon)) {
-    const wrappedIcon = withUniwind(icon);
-    interopAppliedIcons.add(wrappedIcon);
-    return wrappedIcon;
+    const wrappedIcon = withUniwind(icon)
+    interopAppliedIcons.add(wrappedIcon)
+    return wrappedIcon
   }
-  return icon;
+  return icon
 }
 
 export const Icon = forwardRef<Svg, IconProps>(function Icon(
   { size = "md", icon, className, testID, ...props },
-  ref,
+  ref
 ) {
-  if (!icon) return null;
+  if (!icon) return null
 
   // Apply UniWind interop to the icon if not already applied
-  const Component = applyIconInterop(icon);
+  const Component = applyIconInterop(icon)
 
   return (
     <Component
@@ -74,5 +69,5 @@ export const Icon = forwardRef<Svg, IconProps>(function Icon(
       className={cn(iconVariants({ size }), className)}
       testID={testID}
     />
-  );
-});
+  )
+})

package/src/components/Navigation/PageHeader/__snapshots__/index.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`PageHeader Snapshot - renders correctly with multiple actions 1`] = `
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-f1-foreground text-3xl font-semibold"
+    className="text-3xl font-semibold text-f1-foreground"
   >
     Test Page Title
   </Text>
@@ -110,7 +110,7 @@ exports[`PageHeader Snapshot - renders correctly with one action 1`] = `
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-f1-foreground text-3xl font-semibold"
+    className="text-3xl font-semibold text-f1-foreground"
   >
     Test Page Title
   </Text>
@@ -169,7 +169,7 @@ exports[`PageHeader Snapshot - renders correctly with one action with a badge 1`
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-f1-foreground text-3xl font-semibold"
+    className="text-3xl font-semibold text-f1-foreground"
   >
     Test Page Title
   </Text>
@@ -231,7 +231,7 @@ exports[`PageHeader Snapshot - renders correctly with only a title 1`] = `
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-f1-foreground text-3xl font-semibold"
+    className="text-3xl font-semibold text-f1-foreground"
   >
     Test Page Title
   </Text>

package/src/components/Navigation/PageHeader/index.spec.tsx

@@ -3,14 +3,16 @@ import {
   fireEvent,
   screen,
   within,
-} from "@testing-library/react-native";
-import React from "react";
-import { PageHeader } from "./"; // Assuming index.tsx is in the same folder
-import { ButtonProps } from "../../Button"; // Adjust path as necessary
+} from "@testing-library/react-native"
+import React from "react"
+
+import { ButtonProps } from "../../Button" // Adjust path as necessary
+
+import { PageHeader } from "./" // Assuming index.tsx is in the same folder
 // import { AppIcons } from "../../../index"; // Adjust path as necessary - Not directly used in mock after change
 
 // Define a simple type for the mocked icon
-type MockIconType = { name: string };
+type MockIconType = { name: string }
 
 // Mock the Button component
 jest.mock("../../Button", () => ({
@@ -22,32 +24,32 @@ jest.mock("../../Button", () => ({
       showBadge,
       ...rest
     }: ButtonProps & { icon?: MockIconType }) => {
-      const MockButton = require("react-native").TouchableOpacity;
-      const MockText = require("react-native").Text;
+      const MockButton = require("react-native").TouchableOpacity
+      const MockText = require("react-native").Text
       return (
         <MockButton onPress={onPress} accessibilityLabel={label} {...rest}>
           <MockText>{label}</MockText>
           {icon && <MockText>Icon:{icon.name}</MockText>}
           {showBadge && <MockText>Badge</MockText>}
         </MockButton>
-      );
-    },
+      )
+    }
   ),
-}));
+}))
 
 // Mock AppIcons - specifically the Bell icon used by PageHeader's NotificationAction
 jest.mock("../../../index", () => ({
   AppIcons: {
     Bell: { name: "Bell" } as MockIconType, // Ensure the mock matches MockIconType
   },
-}));
+}))
 
 describe("PageHeader", () => {
-  const mockOnPressNotification = jest.fn();
+  const mockOnPressNotification = jest.fn()
 
   const defaultProps = {
     title: "Test Page Title",
-  };
+  }
 
   const propsWithActions = {
     ...defaultProps,
@@ -59,7 +61,7 @@ describe("PageHeader", () => {
         showBadge: false,
       },
     ],
-  };
+  }
 
   const propsWithMultipleActions = {
     ...defaultProps,
@@ -76,27 +78,27 @@ describe("PageHeader", () => {
         onPress: jest.fn(),
       },
     ],
-  };
+  }
 
   beforeEach(() => {
-    jest.clearAllMocks();
-  });
+    jest.clearAllMocks()
+  })
 
   // Snapshot tests
   it("Snapshot - renders correctly with only a title", () => {
-    const { toJSON } = render(<PageHeader {...defaultProps} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<PageHeader {...defaultProps} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - renders correctly with one action", () => {
-    const { toJSON } = render(<PageHeader {...propsWithActions} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<PageHeader {...propsWithActions} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - renders correctly with multiple actions", () => {
-    const { toJSON } = render(<PageHeader {...propsWithMultipleActions} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<PageHeader {...propsWithMultipleActions} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - renders correctly with one action with a badge", () => {
     const propsWithBadge = {
@@ -109,36 +111,36 @@ describe("PageHeader", () => {
           showBadge: true,
         },
       ],
-    };
-    const { toJSON } = render(<PageHeader {...propsWithBadge} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    }
+    const { toJSON } = render(<PageHeader {...propsWithBadge} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   // Functional tests
   it("renders the title correctly", () => {
-    render(<PageHeader {...defaultProps} />);
-    const title = screen.getByText("Test Page Title");
-    expect(title).toBeDefined();
-  });
+    render(<PageHeader {...defaultProps} />)
+    const title = screen.getByText("Test Page Title")
+    expect(title).toBeDefined()
+  })
 
   it("does not render actions if actions prop is not provided", () => {
-    render(<PageHeader {...defaultProps} />);
-    const notificationButton = screen.queryByText("Notifications");
-    expect(notificationButton).toBeNull();
-  });
+    render(<PageHeader {...defaultProps} />)
+    const notificationButton = screen.queryByText("Notifications")
+    expect(notificationButton).toBeNull()
+  })
 
   it("renders action buttons when actions prop is provided", () => {
-    render(<PageHeader {...propsWithActions} />);
-    const notificationButton = screen.getByText("Notifications");
-    expect(notificationButton).toBeDefined();
-  });
+    render(<PageHeader {...propsWithActions} />)
+    const notificationButton = screen.getByText("Notifications")
+    expect(notificationButton).toBeDefined()
+  })
 
   it("calls the onPress handler of an action button when pressed", () => {
-    render(<PageHeader {...propsWithActions} />);
-    const notificationButton = screen.getByText("Notifications");
-    fireEvent.press(notificationButton);
-    expect(mockOnPressNotification).toHaveBeenCalledTimes(1);
-  });
+    render(<PageHeader {...propsWithActions} />)
+    const notificationButton = screen.getByText("Notifications")
+    fireEvent.press(notificationButton)
+    expect(mockOnPressNotification).toHaveBeenCalledTimes(1)
+  })
 
   it("displays a badge on an action button if showBadge is true", () => {
     render(
@@ -152,11 +154,11 @@ describe("PageHeader", () => {
             showBadge: true,
           },
         ]}
-      />,
-    );
-    const badge = screen.getByText("Badge");
-    expect(badge).toBeDefined();
-  });
+      />
+    )
+    const badge = screen.getByText("Badge")
+    expect(badge).toBeDefined()
+  })
 
   it("does not display a badge if showBadge is false or undefined", () => {
     render(
@@ -176,23 +178,23 @@ describe("PageHeader", () => {
             showBadge: false,
           },
         ]}
-      />,
-    );
-    const badge = screen.queryByText("Badge");
-    expect(badge).toBeNull();
-  });
+      />
+    )
+    const badge = screen.queryByText("Badge")
+    expect(badge).toBeNull()
+  })
 
   it("renders multiple action buttons correctly", () => {
-    render(<PageHeader {...propsWithMultipleActions} />);
-    const notificationsButton = screen.getByText("Notifications");
-    const alertsButton = screen.getByText("Alerts");
+    render(<PageHeader {...propsWithMultipleActions} />)
+    const notificationsButton = screen.getByText("Notifications")
+    const alertsButton = screen.getByText("Alerts")
 
-    expect(notificationsButton).toBeDefined();
-    expect(alertsButton).toBeDefined();
+    expect(notificationsButton).toBeDefined()
+    expect(alertsButton).toBeDefined()
 
-    const notificationButtonContainer = screen.getByLabelText("Notifications");
+    const notificationButtonContainer = screen.getByLabelText("Notifications")
 
-    const badge = within(notificationButtonContainer).getByText("Badge");
-    expect(badge).toBeDefined();
-  });
-});
+    const badge = within(notificationButtonContainer).getByText("Badge")
+    expect(badge).toBeDefined()
+  })
+})

package/src/components/Navigation/PageHeader/index.tsx

@@ -1,21 +1,22 @@
-import { memo } from "react";
-import { Text, View } from "react-native";
-import { Button } from "../../Button";
-import { AppIcons } from "../../..";
+import { memo } from "react"
+import { Text, View } from "react-native"
 
-type ActionType = "notifications";
+import { AppIcons } from "../../.."
+import { Button } from "../../Button"
+
+type ActionType = "notifications"
 
 export type ActionT = {
-  type: ActionType;
-  label: string;
-  onPress: () => void;
-  showBadge?: boolean;
-};
+  type: ActionType
+  label: string
+  onPress: () => void
+  showBadge?: boolean
+}
 
 type Props = {
-  title: string;
-  actions?: ActionT[];
-};
+  title: string
+  actions?: ActionT[]
+}
 
 const NotificationsAction = ({ label, onPress, showBadge }: ActionT) => {
   return (
@@ -29,25 +30,25 @@ const NotificationsAction = ({ label, onPress, showBadge }: ActionT) => {
       size="md"
       round
     />
-  );
-};
+  )
+}
 
 export const PageHeader = memo(({ title, actions }: Props) => {
   return (
     <View className="flex-row items-center justify-between px-5 py-3">
-      <Text className="text-f1-foreground text-3xl font-semibold">{title}</Text>
+      <Text className="text-3xl font-semibold text-f1-foreground">{title}</Text>
       <View className="flex-row gap-2">
         {actions?.map((action) => {
           switch (action.type) {
             case "notifications":
-              return <NotificationsAction {...action} key={action.label} />;
+              return <NotificationsAction {...action} key={action.label} />
             default:
-              return null;
+              return null
           }
         })}
       </View>
     </View>
-  );
-});
+  )
+})
 
-PageHeader.displayName = "PageHeader";
+PageHeader.displayName = "PageHeader"

package/src/components/OneChip/__snapshots__/index.spec.tsx.snap

@@ -405,7 +405,7 @@ exports[`OneChip Snapshot with OnClose 1`] = `
           }
         }
         accessible={true}
-        className="[&_svg]:text-f1-icon-secondary -m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full"
+        className="-m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full [&_svg]:text-f1-icon-secondary"
         collapsable={false}
         focusable={true}
         onBlur={[Function]}

package/src/components/OneChip/index.spec.tsx

@@ -1,69 +1,71 @@
-import { render, screen, userEvent } from "@testing-library/react-native";
-import React from "react";
-import { OneChip } from ".";
-import { AppIcons } from "../../icons";
+import { render, screen, userEvent } from "@testing-library/react-native"
+import React from "react"
+
+import { AppIcons } from "../../icons"
+
+import { OneChip } from "."
 
 describe("OneChip", () => {
   const defaultProps = {
     label: "label",
-  };
+  }
 
   it("Snapshot", () => {
-    const { toJSON } = render(<OneChip {...defaultProps} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<OneChip {...defaultProps} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot variant selected", () => {
-    const { toJSON } = render(<OneChip {...defaultProps} variant="selected" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<OneChip {...defaultProps} variant="selected" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot with Icon", () => {
     const { toJSON } = render(
-      <OneChip {...defaultProps} icon={AppIcons.Placeholder} />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
+      <OneChip {...defaultProps} icon={AppIcons.Placeholder} />
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot with OnClose", () => {
-    const handleOnClose = jest.fn();
+    const handleOnClose = jest.fn()
     const { toJSON } = render(
-      <OneChip {...defaultProps} onClose={handleOnClose} />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
+      <OneChip {...defaultProps} onClose={handleOnClose} />
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("renders correctly with required props", () => {
-    render(<OneChip {...defaultProps} />);
+    render(<OneChip {...defaultProps} />)
 
-    const number = screen.getByText("label");
+    const number = screen.getByText("label")
 
-    expect(number).toBeDefined();
-  });
+    expect(number).toBeDefined()
+  })
 
   it("renders correctly with onClose event", async () => {
-    const testFn = jest.fn();
-    const user = userEvent.setup();
+    const testFn = jest.fn()
+    const user = userEvent.setup()
 
-    render(<OneChip {...defaultProps} onClose={testFn} />);
+    render(<OneChip {...defaultProps} onClose={testFn} />)
 
-    const close = screen.getByLabelText("Close");
-    await user.press(close);
+    const close = screen.getByLabelText("Close")
+    await user.press(close)
 
-    expect(testFn).toHaveBeenCalledTimes(1);
-    expect(close).toBeDefined();
-  });
+    expect(testFn).toHaveBeenCalledTimes(1)
+    expect(close).toBeDefined()
+  })
 
   it("renders correctly with onClick event", async () => {
-    const testFn = jest.fn();
-    const user = userEvent.setup();
+    const testFn = jest.fn()
+    const user = userEvent.setup()
 
-    render(<OneChip {...defaultProps} onClick={testFn} />);
+    render(<OneChip {...defaultProps} onClick={testFn} />)
 
-    const action = screen.getByLabelText("Action");
-    await user.press(action);
+    const action = screen.getByLabelText("Action")
+    await user.press(action)
 
-    expect(testFn).toHaveBeenCalledTimes(1);
-    expect(action).toBeDefined();
-  });
-});
+    expect(testFn).toHaveBeenCalledTimes(1)
+    expect(action).toBeDefined()
+  })
+})

package/src/components/OneChip/index.tsx

@@ -1,9 +1,10 @@
-import { tv, type VariantProps } from "tailwind-variants";
-import { cn } from "../../lib/utils";
-import { Icon, type IconType } from "../Icon";
-import { View, Text, Pressable } from "react-native";
-import { CrossedCircle } from "../../icons/app";
-import { PressableFeedback } from "../PressableFeedback";
+import { View, Text, Pressable } from "react-native"
+import { tv, type VariantProps } from "tailwind-variants"
+
+import { CrossedCircle } from "../../icons/app"
+import { cn } from "../../lib/utils"
+import { Icon, type IconType } from "../Icon"
+import { PressableFeedback } from "../PressableFeedback"
 
 export const chipContainerVariants = tv({
   base: "flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0",
@@ -16,7 +17,7 @@ export const chipContainerVariants = tv({
   defaultVariants: {
     variant: "default",
   },
-});
+})
 
 export const chipTextVariants = tv({
   base: "font-medium",
@@ -29,13 +30,13 @@ export const chipTextVariants = tv({
   defaultVariants: {
     variant: "default",
   },
-});
+})
 
 interface ChipProps extends VariantProps<typeof chipContainerVariants> {
-  label: string;
-  icon?: IconType;
-  onClick?: () => void;
-  onClose?: () => void;
+  label: string
+  icon?: IconType
+  onClick?: () => void
+  onClose?: () => void
 }
 
 export const OneChip = ({
@@ -51,7 +52,7 @@ export const OneChip = ({
         className={cn(
           chipContainerVariants({ variant }),
           onClose && "pr-1.5",
-          icon && "pl-1.5",
+          icon && "pl-1.5"
         )}
         onPress={onClick}
         variant="both"
@@ -70,10 +71,10 @@ export const OneChip = ({
           {onClose && (
             <Pressable
               onPress={(e) => {
-                e.stopPropagation();
-                onClose();
+                e.stopPropagation()
+                onClose()
               }}
-              className="[&_svg]:text-f1-icon-secondary -m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full"
+              className="-m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full [&_svg]:text-f1-icon-secondary"
               accessibilityRole="button"
               accessibilityLabel="Close"
             >
@@ -87,5 +88,5 @@ export const OneChip = ({
         </View>
       </PressableFeedback>
     </View>
-  );
-};
+  )
+}