@factorialco/f0-react-native 0.34.0 → 0.36.0

package/src/components/F0Button/index.ts

@@ -0,0 +1,7 @@
+export { F0Button } from "./F0Button"
+export { BUTTON_VARIANTS, BUTTON_SIZES } from "./F0Button.types"
+export type {
+  F0ButtonProps,
+  F0ButtonVariant,
+  F0ButtonSize,
+} from "./F0Button.types"

package/src/components/Icon/index.tsx

@@ -21,6 +21,11 @@ const iconVariants = tv({
   },
 })
 
+/**
+ * @deprecated Use `F0IconProps` from `../primitives/F0Icon` instead.
+ * Migration: Replace `IconProps` with `F0IconProps`.
+ * `F0Icon` supports `icon`, `size`, `testID`, and `className`, and adds semantic `color` variants.
+ */
 export interface IconProps extends SvgProps, VariantProps<typeof iconVariants> {
   icon: IconType
   testID?: string

package/src/components/exports.ts

@@ -3,6 +3,7 @@ export * from "./Activity/ActivityItem"
 export * from "./Avatars/exports"
 export * from "./Badge"
 export * from "./Button"
+export * from "./F0Button"
 export * from "./F0Badge"
 export * from "./Counter"
 export * from "./ExampleComponent"
@@ -18,4 +19,5 @@ export * from "./experimental/Lists/DetailsItemsList"
 // Export primitives
 export * from "./primitives/F0Text"
 export * from "./primitives/F0Icon"
+export * from "./primitives/F0Image"
 export * from "./primitives/PressableFeedback"

package/src/components/primitives/F0Image/F0Image.md

@@ -0,0 +1,40 @@
+# F0Image
+
+Image primitive for React Native in F0.
+
+## Overview
+
+`F0Image` is a thin wrapper around `expo-image` with className support and consistent defaults for `contentFit`, `transition`, and `cachePolicy`.
+
+`expo-image` is a runtime peer dependency of `@factorialco/f0-react-native`. Ensure your app installs a compatible `expo-image` version.
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Image } from "@factorialco/f0-react-native"
+
+<F0Image
+  source={{ uri: "https://example.com/avatar.png" }}
+  className="h-8 w-8 rounded-full"
+  accessibilityLabel="Profile picture"
+/>
+```
+
+## Props
+
+| Prop          | Type                | Default           | Description                    |
+| ------------- | ------------------- | ----------------- | ------------------------------ |
+| `source`      | `ImageSource`       | required          | Image source                   |
+| `className`   | `string`            | `"h-full w-full"` | Utility classes for layout     |
+| `contentFit`  | `ImageContentFit`   | `"cover"`         | Content fit mode               |
+| `transition`  | `number \| boolean` | `150`             | Transition duration / behavior |
+| `cachePolicy` | `ImageCachePolicy`  | `"memory-disk"`   | Caching policy                 |
+
+All other supported `expo-image` props are forwarded.
+
+## Testing
+
+Main tests:
+
+- `src/components/primitives/F0Image/__tests__/F0Image.spec.tsx`

package/src/components/primitives/F0Image/F0Image.tsx

@@ -0,0 +1,48 @@
+import { Image as ExpoImage } from "expo-image"
+import React from "react"
+import { withUniwind } from "uniwind"
+
+import { cn } from "../../../lib/utils"
+
+import type { F0ImageProps } from "./F0Image.types"
+
+const UniwindExpoImage = withUniwind(ExpoImage)
+
+/**
+ * F0Image - Image primitive for React Native in F0.
+ *
+ * Wraps `expo-image` to provide className support and sane defaults.
+ */
+const F0Image = React.memo(
+  React.forwardRef<React.ElementRef<typeof ExpoImage>, F0ImageProps>(
+    (
+      {
+        source,
+        className,
+        style,
+        contentFit = "cover",
+        transition = 150,
+        cachePolicy = "memory-disk",
+        ...rest
+      },
+      ref
+    ) => {
+      return (
+        <UniwindExpoImage
+          ref={ref}
+          source={source}
+          className={cn("h-full w-full", className)}
+          style={style}
+          contentFit={contentFit}
+          transition={transition}
+          cachePolicy={cachePolicy}
+          {...rest}
+        />
+      )
+    }
+  )
+)
+
+F0Image.displayName = "F0Image"
+
+export { F0Image }

package/src/components/primitives/F0Image/F0Image.types.ts

@@ -0,0 +1,23 @@
+import type { ImageProps as ExpoImageProps } from "expo-image"
+
+/**
+ * Public F0Image props.
+ *
+ * Thin primitive wrapper around `expo-image` with className support.
+ */
+export interface F0ImageProps extends Omit<ExpoImageProps, "source" | "style"> {
+  /**
+   * Image source passed to expo-image.
+   */
+  source: ExpoImageProps["source"]
+
+  /**
+   * Utility classes for sizing/layout.
+   */
+  className?: string
+
+  /**
+   * Inline style escape hatch.
+   */
+  style?: ExpoImageProps["style"]
+}

package/src/components/primitives/F0Image/__tests__/F0Image.spec.tsx

@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { F0Image } from "../"
+
+describe("F0Image", () => {
+  it("renders with a remote source", () => {
+    const { getByTestId } = render(
+      <F0Image
+        source={{ uri: "https://example.com/avatar.png" }}
+        testID="f0-image"
+      />
+    )
+
+    expect(getByTestId("f0-image")).toBeTruthy()
+  })
+
+  it("applies sane defaults", () => {
+    const { getByTestId } = render(
+      <F0Image
+        source={{ uri: "https://example.com/defaults.png" }}
+        testID="f0-image-defaults"
+      />
+    )
+    const image = getByTestId("f0-image-defaults")
+
+    expect(image.props.contentFit).toBe("cover")
+    expect(image.props.transition).toBe(150)
+    expect(image.props.cachePolicy).toBe("memory-disk")
+  })
+
+  it("accepts className overrides", () => {
+    const { getByTestId } = render(
+      <F0Image
+        source={{ uri: "https://example.com/classname.png" }}
+        className="h-8 w-8 rounded-full"
+        testID="f0-image-classname"
+      />
+    )
+    const image = getByTestId("f0-image-classname")
+
+    expect(image.props.className).toContain("h-8")
+    expect(image.props.className).toContain("w-8")
+    expect(image.props.className).toContain("rounded-full")
+  })
+})

package/src/components/primitives/F0Image/index.ts

@@ -0,0 +1,2 @@
+export { F0Image } from "./F0Image"
+export type { F0ImageProps } from "./F0Image.types"