@factorialco/f0-react-native 0.34.0 → 0.35.0

package/src/components/F0Button/F0Button.tsx

@@ -0,0 +1,228 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { View } from "react-native"
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated"
+
+import { cn, omitProps } from "../../lib/utils"
+import { F0Icon } from "../primitives/F0Icon"
+import { F0Text } from "../primitives/F0Text"
+import { PressableFeedback } from "../primitives/PressableFeedback"
+
+import {
+  buttonVariants,
+  loadingContentVariants,
+  loadingIndicatorVariants,
+  pressedVariants,
+  getIconColor,
+  getIconOnlyColor,
+  getTextColor,
+} from "./F0Button.styles"
+import {
+  F0_BUTTON_BLOCKED_FORWARD_PROPS,
+  type F0ButtonProps,
+} from "./F0Button.types"
+
+const F0Button = React.memo(
+  forwardRef<View, F0ButtonProps>(function F0Button(
+    {
+      label,
+      onPress,
+      disabled = false,
+      loading = false,
+      icon,
+      emoji,
+      hideLabel = false,
+      variant = "default",
+      size = "md",
+      round = false,
+      accessibilityHint,
+      showBadge = false,
+      fullWidth = false,
+      testID,
+      feedback = "both",
+      ...rest
+    },
+    ref
+  ) {
+    const [isLoading, setIsLoading] = useState(false)
+    const [isPressed, setIsPressed] = useState(false)
+    const spinnerRotation = useSharedValue(0)
+
+    const isBusy = loading || isLoading
+    const isDisabled = disabled || isBusy
+    const isRound = hideLabel && round
+
+    const handlePress = useCallback(async () => {
+      if (!onPress || isDisabled) return
+
+      try {
+        const result = onPress()
+
+        if (result && typeof result.then === "function") {
+          setIsLoading(true)
+          try {
+            await result
+          } catch {
+            // Avoid bubbling async handler rejections from a design-system component.
+          } finally {
+            setIsLoading(false)
+          }
+        }
+      } catch {
+        // Avoid bubbling sync exceptions from a design-system component.
+      }
+    }, [onPress, isDisabled])
+
+    useEffect(() => {
+      if (!isBusy) {
+        cancelAnimation(spinnerRotation)
+        spinnerRotation.value = 0
+        return
+      }
+
+      spinnerRotation.value = 0
+      spinnerRotation.value = withRepeat(
+        withTiming(1, {
+          duration: 1000,
+          easing: Easing.linear,
+        }),
+        -1,
+        false
+      )
+    }, [isBusy, spinnerRotation])
+
+    const handlePressIn = useCallback(() => {
+      if (!isDisabled) {
+        setIsPressed(true)
+      }
+    }, [isDisabled])
+
+    const handlePressOut = useCallback(() => {
+      setIsPressed(false)
+    }, [])
+
+    const baseClassName = useMemo(
+      () =>
+        buttonVariants({
+          variant,
+          size,
+          disabled: isDisabled,
+          round: isRound,
+        }),
+      [variant, size, isDisabled, isRound]
+    )
+
+    const accessibilityLabel = useMemo(() => {
+      const parts = [label]
+      if (isDisabled) parts.push("disabled")
+      if (isBusy) parts.push("loading")
+      return parts.join(", ")
+    }, [label, isBusy, isDisabled])
+
+    const shouldShowPressed = isPressed && !isDisabled
+
+    const className = shouldShowPressed
+      ? cn(baseClassName, pressedVariants({ variant }))
+      : baseClassName
+
+    const iconIsOnly = isRound || (hideLabel && !emoji)
+    const iconColor = icon
+      ? iconIsOnly
+        ? getIconOnlyColor(variant, shouldShowPressed)
+        : getIconColor(variant, shouldShowPressed)
+      : undefined
+    const textColor = getTextColor(variant, shouldShowPressed)
+    const forwardedProps = omitProps(rest, F0_BUTTON_BLOCKED_FORWARD_PROPS)
+    const loadingIndicatorStyle = useAnimatedStyle(() => {
+      return {
+        borderTopColor: "transparent",
+        transform: [{ rotateZ: `${spinnerRotation.value * 360}deg` }],
+      }
+    })
+
+    return (
+      <View className={`flex ${fullWidth ? "flex-1" : "items-start"}`}>
+        <PressableFeedback
+          ref={ref}
+          {...forwardedProps}
+          disabled={isDisabled}
+          variant={feedback}
+          onPress={handlePress}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole="button"
+          accessibilityState={{
+            disabled: isDisabled,
+            busy: isBusy,
+          }}
+          accessibilityHint={accessibilityHint}
+          testID={testID}
+        >
+          <View className={cn("relative", className)}>
+            <View
+              testID="f0-button-content"
+              className={loadingContentVariants({ loading: isBusy })}
+            >
+              <View className="flex-row items-center justify-center gap-1">
+                {icon && (
+                  <F0Icon
+                    icon={icon}
+                    size="lg"
+                    className={isRound ? undefined : "-ml-0.5"}
+                    color={iconColor}
+                  />
+                )}
+                {emoji && (
+                  <F0Text variant="body-md-medium" color={textColor}>
+                    {emoji}
+                  </F0Text>
+                )}
+                {!hideLabel && (
+                  <F0Text variant="body-md-medium" color={textColor}>
+                    {label}
+                  </F0Text>
+                )}
+              </View>
+            </View>
+            {isBusy && (
+              <View
+                pointerEvents="none"
+                className="absolute inset-0 items-center justify-center"
+              >
+                <Animated.View
+                  testID="f0-button-loading-indicator"
+                  accessibilityLabel="Loading indicator"
+                  className={loadingIndicatorVariants({ variant, size })}
+                  style={loadingIndicatorStyle}
+                />
+              </View>
+            )}
+          </View>
+        </PressableFeedback>
+        {showBadge && variant === "outline" && (
+          <View
+            accessibilityLabel="Notification Badge"
+            className="absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-f0-icon-accent"
+          />
+        )}
+      </View>
+    )
+  })
+)
+
+F0Button.displayName = "F0Button"
+
+export { F0Button }

package/src/components/F0Button/F0Button.types.ts

@@ -0,0 +1,82 @@
+import type { IconType } from "../primitives/F0Icon"
+import type {
+  PressableFeedbackProps,
+  PressableFeedbackVariant,
+} from "../primitives/PressableFeedback"
+
+/**
+ * Button variant types
+ */
+export const BUTTON_VARIANTS = [
+  "default",
+  "outline",
+  "critical",
+  "neutral",
+  "ghost",
+  "promote",
+] as const
+
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number]
+export type F0ButtonVariant = ButtonVariant
+
+/**
+ * Button size types
+ */
+export const BUTTON_SIZES = ["sm", "md", "lg"] as const
+
+export type ButtonSize = (typeof BUTTON_SIZES)[number]
+export type F0ButtonSize = ButtonSize
+
+/**
+ * Props that are controlled by F0Button and must not be passed through.
+ * This preserves F0Button press-state behavior and accessibility contract.
+ */
+const F0_BUTTON_CONTROLLED_PASSTHROUGH_PROPS = [
+  "onPressIn",
+  "onPressOut",
+  "accessibilityLabel",
+  "accessibilityRole",
+  "accessibilityState",
+] as const
+
+export const F0_BUTTON_BANNED_PROPS = ["style", "className"] as const
+
+export const F0_BUTTON_BLOCKED_FORWARD_PROPS = [
+  ...F0_BUTTON_CONTROLLED_PASSTHROUGH_PROPS,
+  ...F0_BUTTON_BANNED_PROPS,
+] as const
+
+interface F0ButtonPropsInternal extends Omit<
+  PressableFeedbackProps,
+  | "children"
+  | "variant"
+  | "disabled"
+  | (typeof F0_BUTTON_CONTROLLED_PASSTHROUGH_PROPS)[number]
+> {
+  label: string
+  onPress?: () => void | Promise<unknown>
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  icon?: IconType
+  emoji?: string
+  hideLabel?: boolean
+  round?: boolean
+  showBadge?: boolean
+  fullWidth?: boolean
+  accessibilityHint?: string
+  testID?: string
+  feedback?: PressableFeedbackVariant
+}
+
+/**
+ * Public props for the F0Button component.
+ *
+ * Note: `className` and `style` props are NOT available.
+ * Use semantic props (variant, size, etc.) for styling.
+ */
+export type F0ButtonProps = Omit<
+  F0ButtonPropsInternal,
+  (typeof F0_BUTTON_BANNED_PROPS)[number]
+>

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

@@ -0,0 +1,285 @@
+import { render, fireEvent, screen, act } from "@testing-library/react-native"
+import React from "react"
+
+import { F0Button } from "../"
+import type { IconType } from "../../primitives/F0Icon"
+
+jest.mock("../../primitives/F0Icon", () => ({
+  F0Icon: () => null,
+}))
+
+const mockIcon: IconType = "check" as unknown as IconType
+const mockOnPress = jest.fn()
+
+describe("F0Button", () => {
+  const defaultProps = {
+    label: "Test Button",
+    onPress: mockOnPress,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("Snapshot - default button", () => {
+    const { toJSON } = render(<F0Button {...defaultProps} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("Snapshot - outline variant", () => {
+    const { toJSON } = render(<F0Button {...defaultProps} variant="outline" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("Snapshot - critical variant", () => {
+    const { toJSON } = render(<F0Button {...defaultProps} variant="critical" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("Snapshot - with icon", () => {
+    const { toJSON } = render(<F0Button {...defaultProps} icon={mockIcon} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("Snapshot - with emoji", () => {
+    const { toJSON } = render(<F0Button {...defaultProps} emoji="👋" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("Snapshot - disabled state", () => {
+    const { toJSON } = render(<F0Button {...defaultProps} disabled />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("Snapshot - loading state", () => {
+    const { toJSON } = render(<F0Button {...defaultProps} loading />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("renders loading indicator and hides content when loading", () => {
+    render(<F0Button {...defaultProps} loading />)
+
+    expect(screen.getByTestId("f0-button-loading-indicator")).toBeDefined()
+    expect(screen.getByTestId("f0-button-content").props.className).toContain(
+      "opacity-0"
+    )
+  })
+
+  it("Snapshot - different sizes", () => {
+    const sizes = ["sm", "md", "lg"] as const
+    sizes.forEach((size) => {
+      const { toJSON } = render(<F0Button {...defaultProps} size={size} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  it("Snapshot - round button with hidden label", () => {
+    const { toJSON } = render(<F0Button {...defaultProps} round hideLabel />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("renders correctly with required props", () => {
+    render(<F0Button {...defaultProps} />)
+    const button = screen.getByText("Test Button")
+    expect(button).toBeDefined()
+  })
+
+  it("handles press events", () => {
+    render(<F0Button {...defaultProps} />)
+    fireEvent.press(screen.getByRole("button"))
+    expect(mockOnPress).toHaveBeenCalled()
+  })
+
+  it("does not call onPress when disabled", () => {
+    render(<F0Button {...defaultProps} disabled />)
+    fireEvent.press(screen.getByRole("button"))
+    expect(mockOnPress).not.toHaveBeenCalled()
+  })
+
+  it("shows correct accessibility label when disabled", () => {
+    render(<F0Button {...defaultProps} disabled />)
+    const button = screen.getByRole("button")
+    expect(button.props.accessibilityLabel).toBe("Test Button, disabled")
+  })
+
+  it("shows correct accessibility label when loading", () => {
+    render(<F0Button {...defaultProps} loading />)
+    const button = screen.getByRole("button")
+    expect(button.props.accessibilityLabel).toBe(
+      "Test Button, disabled, loading"
+    )
+  })
+
+  it("sets correct accessibilityState when disabled", () => {
+    render(<F0Button {...defaultProps} disabled />)
+    const button = screen.getByRole("button")
+    expect(button.props.accessibilityState).toMatchObject({
+      disabled: true,
+      busy: false,
+    })
+  })
+
+  it("sets correct accessibilityState when loading", () => {
+    render(<F0Button {...defaultProps} loading />)
+    const button = screen.getByRole("button")
+    expect(button.props.accessibilityState).toMatchObject({
+      disabled: true,
+      busy: true,
+    })
+  })
+
+  it("hides label text when hideLabel is true", () => {
+    render(<F0Button {...defaultProps} hideLabel />)
+    expect(screen.queryByText("Test Button")).toBeNull()
+  })
+
+  it("uses label as accessibilityLabel even when hideLabel is true", () => {
+    render(<F0Button {...defaultProps} hideLabel />)
+    const button = screen.getByRole("button")
+    expect(button.props.accessibilityLabel).toBe("Test Button")
+  })
+
+  it("renders with testID", () => {
+    render(<F0Button {...defaultProps} testID="my-button" />)
+    expect(screen.getByTestId("my-button")).toBeDefined()
+  })
+
+  it("renders badge for outline variant with showBadge", () => {
+    render(<F0Button {...defaultProps} variant="outline" showBadge />)
+    expect(screen.getByLabelText("Notification Badge")).toBeDefined()
+  })
+
+  it("does not render badge for non-outline variant even with showBadge", () => {
+    render(<F0Button {...defaultProps} variant="default" showBadge />)
+    expect(screen.queryByLabelText("Notification Badge")).toBeNull()
+  })
+
+  it("does not render badge when showBadge is false", () => {
+    render(<F0Button {...defaultProps} variant="outline" />)
+    expect(screen.queryByLabelText("Notification Badge")).toBeNull()
+  })
+
+  it("auto-enters loading state for async onPress", async () => {
+    let resolvePromise: () => void
+    const asyncOnPress = jest.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolvePromise = resolve
+        })
+    )
+
+    render(<F0Button label="Async" onPress={asyncOnPress} />)
+
+    await act(async () => {
+      fireEvent.press(screen.getByRole("button"))
+    })
+
+    expect(asyncOnPress).toHaveBeenCalled()
+    expect(screen.getByTestId("f0-button-loading-indicator")).toBeDefined()
+    expect(screen.getByTestId("f0-button-content").props.className).toContain(
+      "opacity-0"
+    )
+
+    await act(async () => {
+      resolvePromise!()
+      await asyncOnPress.mock.results[0].value
+    })
+
+    expect(screen.queryByTestId("f0-button-loading-indicator")).toBeNull()
+    expect(screen.getByTestId("f0-button-content").props.className).toContain(
+      "opacity-100"
+    )
+  })
+
+  it("handles rejected async onPress without leaking rejections", async () => {
+    const onPressError = new Error("Async failure")
+    const asyncOnPress = jest.fn().mockRejectedValue(onPressError)
+    render(<F0Button label="Async reject" onPress={asyncOnPress} />)
+
+    await act(async () => {
+      fireEvent.press(screen.getByRole("button"))
+      await Promise.resolve()
+    })
+
+    expect(asyncOnPress).toHaveBeenCalled()
+    expect(screen.queryByTestId("f0-button-loading-indicator")).toBeNull()
+  })
+
+  it("handles sync throw in onPress without throwing from press handler", () => {
+    const onPressError = new Error("Sync failure")
+    const throwingOnPress = jest.fn(() => {
+      throw onPressError
+    })
+
+    render(<F0Button label="Sync throw" onPress={throwingOnPress} />)
+    expect(() => {
+      fireEvent.press(screen.getByRole("button"))
+    }).not.toThrow()
+
+    expect(throwingOnPress).toHaveBeenCalled()
+    expect(screen.queryByTestId("f0-button-loading-indicator")).toBeNull()
+  })
+
+  it("renders all six variants without error", () => {
+    const allVariants = [
+      "default",
+      "outline",
+      "critical",
+      "neutral",
+      "ghost",
+      "promote",
+    ] as const
+
+    allVariants.forEach((variant) => {
+      const { unmount } = render(<F0Button label={variant} variant={variant} />)
+      expect(screen.getByText(variant)).toBeDefined()
+      unmount()
+    })
+  })
+
+  it("ignores className passed via unsafe cast", () => {
+    const unsafeProps = {
+      ...defaultProps,
+      className: "bg-red-500 p-9",
+    } as unknown as React.ComponentProps<typeof F0Button>
+    render(<F0Button {...unsafeProps} />)
+
+    const button = screen.getByRole("button")
+    expect(button.props.className).toBe("overflow-hidden")
+  })
+
+  it("ignores style passed via unsafe cast", () => {
+    const unsafeProps = {
+      ...defaultProps,
+      style: { padding: 999 },
+    } as unknown as React.ComponentProps<typeof F0Button>
+    render(<F0Button {...unsafeProps} />)
+
+    const button = screen.getByRole("button")
+    expect(button.props.style?.[1]).toBeUndefined()
+  })
+
+  it("ignores onPressIn passed via unsafe cast", () => {
+    const unsafeOnPressIn = jest.fn()
+    const unsafeProps = {
+      ...defaultProps,
+      onPressIn: unsafeOnPressIn,
+    } as unknown as React.ComponentProps<typeof F0Button>
+    render(<F0Button {...unsafeProps} />)
+
+    const button = screen.getByRole("button")
+    fireEvent(button, "pressIn")
+    expect(unsafeOnPressIn).not.toHaveBeenCalled()
+  })
+
+  it("ignores accessibilityLabel passed via unsafe cast", () => {
+    const unsafeProps = {
+      ...defaultProps,
+      accessibilityLabel: "Unsafe label override",
+    } as unknown as React.ComponentProps<typeof F0Button>
+    render(<F0Button {...unsafeProps} />)
+
+    const button = screen.getByRole("button")
+    expect(button.props.accessibilityLabel).toBe("Test Button")
+  })
+})