@factorialco/f0-react-native 0.33.0 → 0.35.0

package/src/components/Button/index.tsx

@@ -3,8 +3,11 @@ import { Pressable, Text, View } from "react-native"
 import { tv, type VariantProps } from "tailwind-variants"
 
 import { cn } from "../../lib/utils"
-import { F0Icon, type IconType, type IconColor } from "../primitives/F0Icon"
+import { F0Icon, type IconColor, type IconType } from "../primitives/F0Icon"
 
+/**
+ * @deprecated Use `F0Button` from `../F0Button` instead.
+ */
 export const variants = [
   "default",
   "outline",
@@ -13,9 +16,20 @@ export const variants = [
   "ghost",
   "promote",
 ] as const
+
+/**
+ * @deprecated Use `F0ButtonVariant` from `../F0Button` instead.
+ */
 export type ButtonVariant = (typeof variants)[number]
 
+/**
+ * @deprecated Use `BUTTON_SIZES` from `../F0Button` instead.
+ */
 export const sizes = ["sm", "md", "lg"] as const
+
+/**
+ * @deprecated Use `F0ButtonSize` from `../F0Button` instead.
+ */
 export type ButtonSize = (typeof sizes)[number]
 
 const buttonVariants = tv({
@@ -115,6 +129,9 @@ const getTextColorClass = (variant: ButtonVariant, isPressed: boolean) => {
   }
 }
 
+/**
+ * @deprecated Use `F0ButtonProps` from `../F0Button` instead.
+ */
 export interface ButtonProps extends VariantProps<typeof buttonVariants> {
   label: string
   onPress?: () => void | Promise<unknown>
@@ -129,6 +146,9 @@ export interface ButtonProps extends VariantProps<typeof buttonVariants> {
   fullWidth?: boolean
 }
 
+/**
+ * @deprecated Use `F0Button` from `../F0Button` instead.
+ */
 export const Button = forwardRef<View, ButtonProps>(function Button(
   {
     label,
@@ -171,7 +191,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
   const shouldShowPressed = isPressed && !isDisabled
 
   return (
-    <View className={`flex ${fullWidth ? "flex-1" : "item-start"}`}>
+    <View className={`flex ${fullWidth ? "flex-1" : "items-start"}`}>
       <Pressable
         ref={ref}
         disabled={isDisabled}

package/src/components/F0Badge/F0Badge.md

@@ -0,0 +1,67 @@
+# F0Badge
+
+Semantic icon badge component for React Native in F0.
+
+## Overview
+
+F0Badge renders an icon inside a circular badge with semantic color variants and size variants.
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Badge } from "@factorialco/f0-react-native"
+import { Add } from "@factorialco/f0-react-native/icons/app"
+
+<F0Badge icon={Add} />
+<F0Badge icon={Add} variant="highlight" />
+<F0Badge icon={Add} size="lg" variant="positive" />
+```
+
+## Props
+
+| Prop      | Type             | Default     | Description                 |
+| --------- | ---------------- | ----------- | --------------------------- |
+| `icon`    | `IconType`       | required    | Icon component to render    |
+| `variant` | `F0BadgeVariant` | `"neutral"` | Semantic visual variant     |
+| `size`    | `F0BadgeSize`    | `"md"`      | Badge and icon size mapping |
+
+## Variants
+
+- `neutral`
+- `highlight`
+- `positive`
+- `critical`
+- `warning`
+
+## Sizes
+
+- `xs`
+- `sm`
+- `md`
+- `lg`
+
+## Accessibility
+
+F0Badge is decorative by default. Accessibility semantics come from the surrounding parent component unless explicitly handled by consumers.
+
+## Testing
+
+Main tests:
+
+- `src/components/F0Badge/__tests__/F0Badge.spec.tsx`
+
+Coverage includes snapshots for variants and sizes, and icon-size mapping checks.
+
+## File Structure
+
+```
+src/components/F0Badge/
+├── F0Badge.tsx
+├── F0Badge.types.ts
+├── F0Badge.styles.ts
+├── F0Badge.md
+├── index.ts
+└── __tests__/
+    └── F0Badge.spec.tsx
+```

package/src/components/F0Badge/F0Badge.styles.ts

@@ -0,0 +1,28 @@
+import { tv } from "tailwind-variants"
+
+export const badgeVariantClasses = {
+  neutral: "bg-transparent text-f0-icon",
+  highlight: "text-f0-special-highlight",
+  positive: "bg-f0-background-positive-bold text-f0-foreground-inverse",
+  critical: "bg-f0-icon-critical text-f0-foreground-inverse",
+  warning: "bg-f0-background-warning-bold text-f0-foreground-inverse",
+} as const
+
+export const badgeSizeClasses = {
+  xs: "h-2.5 w-2.5",
+  sm: "h-3 w-3",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+} as const
+
+export const badgeVariants = tv({
+  base: "flex shrink-0 items-center justify-center rounded-full",
+  variants: {
+    variant: badgeVariantClasses,
+    size: badgeSizeClasses,
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "md",
+  },
+})

package/src/components/F0Badge/F0Badge.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+import { F0Icon } from "../primitives/F0Icon"
+
+import { badgeVariants } from "./F0Badge.styles"
+import { F0_BADGE_ICON_SIZES, type F0BadgeProps } from "./F0Badge.types"
+
+const F0Badge = React.memo(function F0Badge({
+  variant = "neutral",
+  size = "md",
+  icon,
+}: F0BadgeProps) {
+  return (
+    <F0Icon
+      className={badgeVariants({ variant, size })}
+      icon={icon}
+      size={F0_BADGE_ICON_SIZES[size]}
+    />
+  )
+})
+
+F0Badge.displayName = "F0Badge"
+
+export { F0Badge }

package/src/components/F0Badge/F0Badge.types.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants"
+
+import type { IconType } from "../primitives/F0Icon"
+
+import {
+  badgeSizeClasses,
+  badgeVariantClasses,
+  type badgeVariants,
+} from "./F0Badge.styles"
+
+export type F0BadgeVariant = keyof typeof badgeVariantClasses
+
+export const F0_BADGE_VARIANTS = Object.keys(
+  badgeVariantClasses
+) as ReadonlyArray<F0BadgeVariant>
+
+export type F0BadgeSize = keyof typeof badgeSizeClasses
+
+export const F0_BADGE_SIZES = Object.keys(
+  badgeSizeClasses
+) as ReadonlyArray<F0BadgeSize>
+
+export const F0_BADGE_ICON_SIZES = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md",
+} as const
+
+export interface F0BadgeProps extends VariantProps<typeof badgeVariants> {
+  icon: IconType
+  variant?: F0BadgeVariant
+  size?: F0BadgeSize
+}

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

@@ -0,0 +1,63 @@
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { Add } from "../../../icons/app"
+import { F0Badge } from "../F0Badge"
+
+const getClassName = (
+  json: ReturnType<ReturnType<typeof render>["toJSON"]>
+) => {
+  if (!json || Array.isArray(json)) return ""
+  return String(json.props.className ?? "")
+}
+
+describe("F0Badge", () => {
+  it("Snapshot - default", () => {
+    const { toJSON } = render(<F0Badge icon={Add} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("Snapshot - all variants", () => {
+    const variants = [
+      "neutral",
+      "highlight",
+      "positive",
+      "critical",
+      "warning",
+    ] as const
+
+    variants.forEach((variant) => {
+      const { toJSON } = render(<F0Badge icon={Add} variant={variant} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  it("Snapshot - all sizes", () => {
+    const sizes = ["xs", "sm", "md", "lg"] as const
+
+    sizes.forEach((size) => {
+      const { toJSON } = render(<F0Badge icon={Add} size={size} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  it("maps xs badge size to xs icon size", () => {
+    const { toJSON } = render(<F0Badge icon={Add} size="xs" />)
+    expect(getClassName(toJSON())).toContain("stroke-xs")
+  })
+
+  it("maps sm badge size to xs icon size", () => {
+    const { toJSON } = render(<F0Badge icon={Add} size="sm" />)
+    expect(getClassName(toJSON())).toContain("stroke-xs")
+  })
+
+  it("maps md badge size to sm icon size", () => {
+    const { toJSON } = render(<F0Badge icon={Add} size="md" />)
+    expect(getClassName(toJSON())).toContain("stroke-sm")
+  })
+
+  it("maps lg badge size to md icon size", () => {
+    const { toJSON } = render(<F0Badge icon={Add} size="lg" />)
+    expect(getClassName(toJSON())).toContain("stroke-md")
+  })
+})