@factorialco/f0-react-native 0.23.0 → 0.24.0

package/src/components/Badge/index.tsx

@@ -1,5 +1,6 @@
-import { tv, type VariantProps } from "tailwind-variants";
-import { Icon, type IconType } from "../Icon";
+import { tv, type VariantProps } from "tailwind-variants"
+
+import { Icon, type IconType } from "../Icon"
 
 const badgeVariants = tv({
   base: "flex shrink-0 items-center justify-center rounded-full",
@@ -22,18 +23,18 @@ const badgeVariants = tv({
     type: "neutral",
     size: "md",
   },
-});
+})
 
 const iconSizes = {
   xs: "xs",
   sm: "xs",
   md: "sm",
   lg: "md",
-} as const;
+} as const
 
 export interface BadgeProps extends VariantProps<typeof badgeVariants> {
-  icon: IconType;
-  size?: keyof typeof iconSizes;
+  icon: IconType
+  size?: keyof typeof iconSizes
 }
 
 export const Badge = ({ type, size = "md", icon }: BadgeProps) => {
@@ -43,5 +44,5 @@ export const Badge = ({ type, size = "md", icon }: BadgeProps) => {
       icon={icon}
       size={iconSizes[size]}
     />
-  );
-};
+  )
+}

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

@@ -1,124 +1,126 @@
-import { render, fireEvent, screen } from "@testing-library/react-native";
-import React from "react";
-import { Button } from "./";
-import { IconType } from "../Icon";
+import { render, fireEvent, screen } from "@testing-library/react-native"
+import React from "react"
+
+import { IconType } from "../Icon"
+
+import { Button } from "./"
 
 // Mock the Icon component
 jest.mock("../Icon", () => ({
   Icon: () => null,
-}));
+}))
 
 // Mock dependencies
-const mockIcon: IconType = "check" as unknown as IconType;
-const mockOnPress = jest.fn();
+const mockIcon: IconType = "check" as unknown as IconType
+const mockOnPress = jest.fn()
 
 describe("Button", () => {
   const defaultProps = {
     label: "Test Button",
     onPress: mockOnPress,
-  };
+  }
 
   beforeEach(() => {
-    jest.clearAllMocks();
-  });
+    jest.clearAllMocks()
+  })
 
   it("Snapshot - default button", () => {
-    const { toJSON } = render(<Button {...defaultProps} />);
+    const { toJSON } = render(<Button {...defaultProps} />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - outline variant", () => {
-    const { toJSON } = render(<Button {...defaultProps} variant="outline" />);
+    const { toJSON } = render(<Button {...defaultProps} variant="outline" />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - critical variant", () => {
-    const { toJSON } = render(<Button {...defaultProps} variant="critical" />);
+    const { toJSON } = render(<Button {...defaultProps} variant="critical" />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - with icon", () => {
-    const { toJSON } = render(<Button {...defaultProps} icon={mockIcon} />);
+    const { toJSON } = render(<Button {...defaultProps} icon={mockIcon} />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - with emoji", () => {
-    const { toJSON } = render(<Button {...defaultProps} emoji="👋" />);
+    const { toJSON } = render(<Button {...defaultProps} emoji="👋" />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - disabled state", () => {
-    const { toJSON } = render(<Button {...defaultProps} disabled />);
+    const { toJSON } = render(<Button {...defaultProps} disabled />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - loading state", () => {
-    const { toJSON } = render(<Button {...defaultProps} loading />);
+    const { toJSON } = render(<Button {...defaultProps} loading />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot - different sizes", () => {
-    const sizes = ["sm", "md", "lg"] as const;
+    const sizes = ["sm", "md", "lg"] as const
 
     sizes.forEach((size) => {
-      const { toJSON } = render(<Button {...defaultProps} size={size} />);
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
+      const { toJSON } = render(<Button {...defaultProps} size={size} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
 
   it("Snapshot - round button with hidden label", () => {
-    const { toJSON } = render(<Button {...defaultProps} round hideLabel />);
+    const { toJSON } = render(<Button {...defaultProps} round hideLabel />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   // Regular component tests
   it("renders correctly with required props", () => {
-    render(<Button {...defaultProps} />);
+    render(<Button {...defaultProps} />)
 
-    const button = screen.getByText("Test Button");
+    const button = screen.getByText("Test Button")
 
-    expect(button).toBeDefined();
-  });
+    expect(button).toBeDefined()
+  })
 
   it("handles press events", () => {
-    render(<Button {...defaultProps} />);
+    render(<Button {...defaultProps} />)
 
-    fireEvent.press(screen.getByRole("button"));
+    fireEvent.press(screen.getByRole("button"))
 
-    expect(mockOnPress).toHaveBeenCalled();
-  });
+    expect(mockOnPress).toHaveBeenCalled()
+  })
 
   it("does not call onPress when disabled", () => {
-    render(<Button {...defaultProps} disabled />);
+    render(<Button {...defaultProps} disabled />)
 
-    fireEvent.press(screen.getByRole("button"));
+    fireEvent.press(screen.getByRole("button"))
 
-    expect(mockOnPress).not.toHaveBeenCalled();
-  });
+    expect(mockOnPress).not.toHaveBeenCalled()
+  })
 
   it("shows correct accessibility label when disabled", () => {
-    render(<Button {...defaultProps} disabled />);
+    render(<Button {...defaultProps} disabled />)
 
-    const button = screen.getByRole("button");
+    const button = screen.getByRole("button")
 
-    expect(button.props.accessibilityLabel).toBe("Test Button, disabled");
-  });
+    expect(button.props.accessibilityLabel).toBe("Test Button, disabled")
+  })
 
   it("shows correct accessibility label when loading", () => {
-    render(<Button {...defaultProps} loading />);
+    render(<Button {...defaultProps} loading />)
 
-    const button = screen.getByRole("button");
+    const button = screen.getByRole("button")
 
     expect(button.props.accessibilityLabel).toBe(
-      "Test Button, disabled, loading",
-    );
-  });
-});
+      "Test Button, disabled, loading"
+    )
+  })
+})

package/src/components/Button/index.tsx

@@ -1,8 +1,9 @@
-import { tv, type VariantProps } from "tailwind-variants";
-import React, { forwardRef, useState } from "react";
-import { Pressable, Text, View } from "react-native";
-import { cn } from "../../lib/utils";
-import { Icon, type IconType } from "../Icon";
+import React, { forwardRef, useState } from "react"
+import { Pressable, Text, View } from "react-native"
+import { tv, type VariantProps } from "tailwind-variants"
+
+import { cn } from "../../lib/utils"
+import { Icon, type IconType } from "../Icon"
 
 export const variants = [
   "default",
@@ -11,11 +12,11 @@ export const variants = [
   "neutral",
   "ghost",
   "promote",
-] as const;
-export type ButtonVariant = (typeof variants)[number];
+] as const
+export type ButtonVariant = (typeof variants)[number]
 
-export const sizes = ["sm", "md", "lg"] as const;
-export type ButtonSize = (typeof sizes)[number];
+export const sizes = ["sm", "md", "lg"] as const
+export type ButtonSize = (typeof sizes)[number]
 
 const buttonVariants = tv({
   base: "flex-row items-center justify-center rounded border-none grow-0",
@@ -48,7 +49,7 @@ const buttonVariants = tv({
     disabled: false,
     round: false,
   },
-});
+})
 
 const pressedVariants = tv({
   base: "",
@@ -65,61 +66,61 @@ const pressedVariants = tv({
   defaultVariants: {
     variant: "default",
   },
-});
+})
 
 const getIconColor = (variant: ButtonVariant, isPressed: boolean) => {
   switch (variant) {
     case "default":
-      return "text-f1-icon-inverse";
+      return "text-f1-icon-inverse"
     case "critical":
-      return isPressed ? "text-f1-icon-inverse" : "text-f1-icon-critical-bold";
+      return isPressed ? "text-f1-icon-inverse" : "text-f1-icon-critical-bold"
     default:
-      return "text-f1-icon";
+      return "text-f1-icon"
   }
-};
+}
 
 const getIconOnlyColor = (variant: ButtonVariant, isPressed: boolean) => {
   switch (variant) {
     case "critical":
-      return isPressed ? "text-f1-icon-inverse" : "text-f1-icon-critical-bold";
+      return isPressed ? "text-f1-icon-inverse" : "text-f1-icon-critical-bold"
     case "default":
-      return "text-f1-icon-inverse";
+      return "text-f1-icon-inverse"
     case "outline":
     case "neutral":
     case "ghost":
     case "promote":
     default:
-      return "text-f1-icon-bold";
+      return "text-f1-icon-bold"
   }
-};
+}
 
 const getTextColorClass = (variant: ButtonVariant, isPressed: boolean) => {
   if (isPressed && variant === "critical") {
-    return "text-f1-foreground-inverse";
+    return "text-f1-foreground-inverse"
   }
 
   switch (variant) {
     case "default":
-      return "text-f1-foreground-inverse";
+      return "text-f1-foreground-inverse"
     case "critical":
-      return "text-f1-foreground-critical";
+      return "text-f1-foreground-critical"
     default:
-      return "text-f1-foreground";
+      return "text-f1-foreground"
   }
-};
+}
 
 export interface ButtonProps extends VariantProps<typeof buttonVariants> {
-  label: string;
-  onPress?: () => void | Promise<unknown>;
-  disabled?: boolean;
-  loading?: boolean;
-  icon?: IconType;
-  emoji?: string;
-  hideLabel?: boolean;
-  className?: string;
-  accessibilityHint?: string;
-  showBadge?: boolean;
-  fullWidth?: boolean;
+  label: string
+  onPress?: () => void | Promise<unknown>
+  disabled?: boolean
+  loading?: boolean
+  icon?: IconType
+  emoji?: string
+  hideLabel?: boolean
+  className?: string
+  accessibilityHint?: string
+  showBadge?: boolean
+  fullWidth?: boolean
 }
 
 export const Button = forwardRef<View, ButtonProps>(function Button(
@@ -139,29 +140,29 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
     showBadge = false,
     fullWidth = false,
   },
-  ref,
+  ref
 ) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [isPressed, setIsPressed] = useState(false);
+  const [isLoading, setIsLoading] = useState(false)
+  const [isPressed, setIsPressed] = useState(false)
 
   const handlePress = async () => {
-    if (!onPress || disabled || loading || isLoading) return;
+    if (!onPress || disabled || loading || isLoading) return
 
-    const result = onPress();
+    const result = onPress()
 
     if (result instanceof Promise) {
-      setIsLoading(true);
+      setIsLoading(true)
       try {
-        await result;
+        await result
       } finally {
-        setIsLoading(false);
+        setIsLoading(false)
       }
     }
-  };
+  }
 
-  const isDisabled = disabled || loading || isLoading;
-  const accessibilityLabel = `${label}${isDisabled ? ", disabled" : ""}${loading || isLoading ? ", loading" : ""}`;
-  const shouldShowPressed = isPressed && !isDisabled;
+  const isDisabled = disabled || loading || isLoading
+  const accessibilityLabel = `${label}${isDisabled ? ", disabled" : ""}${loading || isLoading ? ", loading" : ""}`
+  const shouldShowPressed = isPressed && !isDisabled
 
   return (
     <View className={`flex ${fullWidth ? "flex-1" : "item-start"}`}>
@@ -179,7 +180,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
             round: hideLabel && round,
           }),
           shouldShowPressed && pressedVariants({ variant }),
-          className,
+          className
         )}
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
@@ -197,7 +198,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
               hideLabel && round ? undefined : "-ml-0.5",
               hideLabel && round
                 ? getIconOnlyColor(variant, shouldShowPressed)
-                : getIconColor(variant, shouldShowPressed),
+                : getIconColor(variant, shouldShowPressed)
             )}
           />
         )}
@@ -205,7 +206,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
           <Text
             className={cn(
               "text-base font-medium",
-              getTextColorClass(variant, shouldShowPressed),
+              getTextColorClass(variant, shouldShowPressed)
             )}
           >
             {emoji}
@@ -215,7 +216,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
           <Text
             className={cn(
               "text-base font-medium",
-              getTextColorClass(variant, shouldShowPressed),
+              getTextColorClass(variant, shouldShowPressed)
             )}
           >
             {label}
@@ -225,9 +226,9 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
       {showBadge && variant === "outline" && (
         <View
           accessibilityLabel="Notification Badge"
-          className="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-f1-icon-accent"
+          className="absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-f1-icon-accent"
         />
       )}
     </View>
-  );
-});
+  )
+})

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

@@ -1,53 +1,54 @@
-import { render, screen } from "@testing-library/react-native";
-import React from "react";
-import { Counter } from ".";
+import { render, screen } from "@testing-library/react-native"
+import React from "react"
+
+import { Counter } from "."
 
 describe("Counter", () => {
   const defaultProps = {
     value: 42,
     types: "default",
-  };
+  }
 
   it("Snapshot", () => {
-    const { toJSON } = render(<Counter {...defaultProps} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<Counter {...defaultProps} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot vairan defauly types", () => {
-    const { toJSON } = render(<Counter {...defaultProps} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<Counter {...defaultProps} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot vairan defauly types", () => {
-    const { toJSON } = render(<Counter {...defaultProps} type="default" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<Counter {...defaultProps} type="default" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot vairan bold types", () => {
-    const { toJSON } = render(<Counter {...defaultProps} type="bold" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<Counter {...defaultProps} type="bold" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot vairan selected types", () => {
-    const { toJSON } = render(<Counter {...defaultProps} type="selected" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<Counter {...defaultProps} type="selected" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot vairan md size", () => {
-    const { toJSON } = render(<Counter {...defaultProps} size="md" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<Counter {...defaultProps} size="md" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("Snapshot vairan sm size", () => {
-    const { toJSON } = render(<Counter {...defaultProps} size="sm" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<Counter {...defaultProps} size="sm" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("renders correctly with required props", () => {
-    render(<Counter {...defaultProps} />);
+    render(<Counter {...defaultProps} />)
 
-    const number = screen.getByText("42");
+    const number = screen.getByText("42")
 
-    expect(number).toBeDefined();
-  });
-});
+    expect(number).toBeDefined()
+  })
+})

package/src/components/Counter/index.tsx

@@ -1,6 +1,7 @@
-import { tv, type VariantProps } from "tailwind-variants";
-import { Text, View } from "react-native";
-import { cn } from "../../lib/utils";
+import { Text, View } from "react-native"
+import { tv, type VariantProps } from "tailwind-variants"
+
+import { cn } from "../../lib/utils"
 
 const counterContainerVariants = tv({
   base: "flex items-center justify-center rounded-xs grow-0 px-0.5",
@@ -19,7 +20,7 @@ const counterContainerVariants = tv({
     size: "md",
     type: "default",
   },
-});
+})
 
 const counterTextVariants = tv({
   base: "text-center text-sm font-medium tabular-nums whitespace-nowrap",
@@ -37,15 +38,15 @@ const counterTextVariants = tv({
   defaultVariants: {
     type: "default",
   },
-});
+})
 
 type CounterProps = {
-  value: number;
-  maxValue?: number;
-} & VariantProps<typeof counterContainerVariants>;
+  value: number
+  maxValue?: number
+} & VariantProps<typeof counterContainerVariants>
 
 export function Counter({ size, type, value, maxValue }: CounterProps) {
-  const displayValue = maxValue && value > maxValue ? `+${maxValue}` : value;
+  const displayValue = maxValue && value > maxValue ? `+${maxValue}` : value
 
   return (
     <View className="flex items-start">
@@ -55,5 +56,5 @@ export function Counter({ size, type, value, maxValue }: CounterProps) {
         </Text>
       </View>
     </View>
-  );
+  )
 }

package/src/components/ExampleComponent.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { Text, View } from "react-native";
+import React from "react"
+import { Text, View } from "react-native"
 
 export interface ExampleComponentProps {
   /**
    * Optional custom text to display
    */
-  text?: string;
+  text?: string
 }
 
 /**
@@ -18,5 +18,5 @@ export const ExampleComponent: React.FC<ExampleComponentProps> = ({
     <View className="rounded-lg bg-f1-background p-4">
       <Text className="text-base font-medium text-f1-foreground">{text}</Text>
     </View>
-  );
-};
+  )
+}

package/src/components/Icon/__tests__/Icon.spec.tsx

@@ -1,35 +1,36 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { Icon } from "../index";
-import { Archive } from "../../../icons/app";
-import { Home } from "../../../icons/modules";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { Archive } from "../../../icons/app"
+import { Home } from "../../../icons/modules"
+import { Icon } from "../index"
 
 describe("Icon", () => {
   it("renders correctly with an app icon", () => {
-    const { getByTestId } = render(<Icon icon={Archive} testID="icon" />);
-    expect(getByTestId("icon")).toBeTruthy();
-  });
+    const { getByTestId } = render(<Icon icon={Archive} testID="icon" />)
+    expect(getByTestId("icon")).toBeTruthy()
+  })
 
   it("renders correctly with a module icon", () => {
-    const { getByTestId } = render(<Icon icon={Home} testID="icon" />);
-    expect(getByTestId("icon")).toBeTruthy();
-  });
+    const { getByTestId } = render(<Icon icon={Home} testID="icon" />)
+    expect(getByTestId("icon")).toBeTruthy()
+  })
 
   it("applies the correct size class", () => {
     const { getByTestId } = render(
-      <Icon icon={Archive} size="lg" testID="icon" />,
-    );
+      <Icon icon={Archive} size="lg" testID="icon" />
+    )
     // In a real test environment, we could check the actual style props applied
     // but for now we just ensure it renders
-    expect(getByTestId("icon")).toBeTruthy();
-  });
+    expect(getByTestId("icon")).toBeTruthy()
+  })
 
   it("applies custom className correctly", () => {
     const { getByTestId } = render(
-      <Icon icon={Archive} className="text-red-500" testID="icon" />,
-    );
+      <Icon icon={Archive} className="text-red-500" testID="icon" />
+    )
     // In a real test environment, we could check the actual style props applied
     // but for now we just ensure it renders
-    expect(getByTestId("icon")).toBeTruthy();
-  });
-});
+    expect(getByTestId("icon")).toBeTruthy()
+  })
+})