@butternutbox/pawprint-native 0.0.1 → 0.1.0

package/src/__mocks__/rn-primitives/select.tsx

@@ -0,0 +1,116 @@
+import React from "react"
+
+export const Root = React.forwardRef<any, any>(
+  (
+    { value, defaultValue, onValueChange, disabled, children, ...rest },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(
+      value ?? defaultValue ?? null
+    )
+    const currentValue = value ?? internalValue
+
+    const handleChange = (newValue: any) => {
+      if (!disabled) {
+        setInternalValue(newValue)
+        onValueChange?.(newValue)
+      }
+    }
+
+    return (
+      <div ref={ref} data-disabled={disabled} {...rest}>
+        {typeof children === "function"
+          ? children({ value: currentValue, onChange: handleChange })
+          : children}
+      </div>
+    )
+  }
+)
+Root.displayName = "SelectPrimitive.Root"
+
+export const Trigger = React.forwardRef<any, any>(
+  ({ asChild, children, ...rest }, ref) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, { ref, ...rest } as any)
+    }
+    return (
+      <button ref={ref} role="button" {...rest}>
+        {children}
+      </button>
+    )
+  }
+)
+Trigger.displayName = "SelectPrimitive.Trigger"
+
+export const Value = React.forwardRef<any, any>(
+  ({ placeholder, asChild, children, ...rest }, ref) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, { ref, ...rest } as any)
+    }
+    return (
+      <span ref={ref} {...rest}>
+        {children || placeholder}
+      </span>
+    )
+  }
+)
+Value.displayName = "SelectPrimitive.Value"
+
+export const Portal = ({ children }: any) => <>{children}</>
+Portal.displayName = "SelectPrimitive.Portal"
+
+export const Viewport = React.forwardRef<any, any>(
+  ({ children, ...rest }, ref) => (
+    <div ref={ref} {...rest}>
+      {children}
+    </div>
+  )
+)
+Viewport.displayName = "SelectPrimitive.Viewport"
+
+export const Overlay = React.forwardRef<any, any>(
+  ({ asChild, children, ...rest }, ref) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, { ref, ...rest } as any)
+    }
+    return (
+      <div ref={ref} {...rest}>
+        {children}
+      </div>
+    )
+  }
+)
+Overlay.displayName = "SelectPrimitive.Overlay"
+
+export const Content = React.forwardRef<any, any>(
+  ({ asChild, children, ...rest }, ref) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, { ref, ...rest } as any)
+    }
+    return (
+      <div ref={ref} role="listbox" {...rest}>
+        {children}
+      </div>
+    )
+  }
+)
+Content.displayName = "SelectPrimitive.Content"
+
+export const Item = React.forwardRef<any, any>(
+  ({ value: _value, label, disabled, asChild, children, ...rest }, ref) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        ref,
+        role: "option",
+        "aria-disabled": disabled,
+        ...rest
+      } as any)
+    }
+    return (
+      <div ref={ref} role="option" aria-disabled={disabled} {...rest}>
+        {children || label}
+      </div>
+    )
+  }
+)
+Item.displayName = "SelectPrimitive.Item"

package/src/__mocks__/rn-primitives/slider.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+
+export const Root = React.forwardRef<any, any>(
+  ({ children, value, min, max, disabled, ..._rest }, ref) => (
+    <div
+      ref={ref}
+      role="slider"
+      aria-valuenow={value}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-disabled={disabled}
+    >
+      {children}
+    </div>
+  )
+)
+Root.displayName = "SliderPrimitive.Root"
+
+export const Track = React.forwardRef<any, any>(
+  ({ children, ..._rest }, ref) => (
+    <div ref={ref} data-testid="slider-track">
+      {children}
+    </div>
+  )
+)
+Track.displayName = "SliderPrimitive.Track"
+
+export const Range = React.forwardRef<any, any>(({ style, ..._rest }, ref) => (
+  <div ref={ref} data-testid="slider-range" style={style} />
+))
+Range.displayName = "SliderPrimitive.Range"
+
+export const Thumb = React.forwardRef<any, any>(
+  ({ children, style, ..._rest }, ref) => (
+    <div ref={ref} data-testid="slider-thumb" style={style}>
+      {children}
+    </div>
+  )
+)
+Thumb.displayName = "SliderPrimitive.Thumb"

package/src/__mocks__/rn-primitives/slot.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+export const Slot = React.forwardRef<any, any>(
+  ({ children, ...slotProps }, ref) => {
+    if (React.isValidElement(children)) {
+      const childProps = children.props as Record<string, any>
+      const mergedProps = { ...slotProps, ...childProps }
+      if (slotProps.onPress && childProps.onPress) {
+        mergedProps.onPress = (...args: any[]) => {
+          slotProps.onPress(...args)
+          childProps.onPress(...args)
+        }
+      }
+      // Map onPress to onClick for DOM elements so fireEvent.click works in tests
+      if (slotProps.onPress && !mergedProps.onClick) {
+        mergedProps.onClick = (...args: any[]) => mergedProps.onPress?.(...args)
+      }
+      return React.cloneElement(children as React.ReactElement<any>, {
+        ...mergedProps,
+        ref
+      })
+    }
+    return (
+      <div ref={ref} {...slotProps}>
+        {children}
+      </div>
+    )
+  }
+)
+Slot.displayName = "Slot"

package/src/__mocks__/rn-primitives/switch.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+export const Root = React.forwardRef<any, any>(
+  ({ checked, onCheckedChange, disabled, children, ..._rest }, ref) => (
+    <button
+      ref={ref}
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => !disabled && onCheckedChange?.(!checked)}
+    >
+      {children}
+    </button>
+  )
+)
+Root.displayName = "SwitchPrimitive.Root"
+
+export const Thumb = ({ children, asChild, ..._rest }: any) => {
+  if (asChild && React.isValidElement(children)) {
+    return children
+  }
+  return <div>{children}</div>
+}
+Thumb.displayName = "SwitchPrimitive.Thumb"

package/src/__mocks__/rn-primitives/toggle.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+
+export const Root = React.forwardRef<any, any>(
+  ({ children, pressed, onPressedChange, disabled, ..._rest }, ref) => (
+    <button
+      ref={ref}
+      role="switch"
+      aria-pressed={pressed}
+      disabled={disabled}
+      onClick={() => !disabled && onPressedChange?.(!pressed)}
+    >
+      {children}
+    </button>
+  )
+)
+Root.displayName = "TogglePrimitive.Root"

package/src/components/atoms/Avatar/Avatar.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import { View, StyleSheet } from "react-native"
 import { Avatar } from "./Avatar"
-import type { AvatarProps } from "./Avatar"
 
 const DOG_PHOTO_URL = "https://placedog.net/200/200"
 
@@ -20,12 +19,13 @@ export default {
     size: {
       control: { type: "select" },
       options: ["sm", "md", "lg"],
-      description: "Size variant"
+      description: "Avatar size: sm (32px), md (40px), lg (48px)"
     },
     border: {
       control: { type: "select" },
       options: ["none", "sm", "md"],
-      description: "Border width variant"
+      description:
+        "Border width. Small avatars: none/sm (1px). Medium/Large: none/md (2px)"
     },
     fallbackType: {
       control: { type: "select" },
@@ -39,13 +39,9 @@ export default {
   }
 }
 
-export const Default = (args: AvatarProps) => <Avatar {...args} />
-Default.args = {
-  src: DOG_PHOTO_URL,
-  alt: "User Photo",
-  size: "md",
-  border: "none"
-}
+export const Default = () => (
+  <Avatar src={DOG_PHOTO_URL} alt="User Photo" size="md" />
+)
 
 export const Sizes = () => (
   <View style={styles.row}>
@@ -55,71 +51,83 @@ export const Sizes = () => (
   </View>
 )
 
-export const Borders = () => (
-  <View style={styles.row}>
-    <Avatar src={DOG_PHOTO_URL} alt="No border" border="none" />
-    <Avatar src={DOG_PHOTO_URL} alt="Small border" border="sm" />
-    <Avatar src={DOG_PHOTO_URL} alt="Medium border" border="md" />
+export const Image = () => (
+  <View style={styles.column}>
+    <View style={styles.row}>
+      <Avatar src={DOG_PHOTO_URL} alt="Small" size="sm" border="none" />
+      <Avatar src={DOG_PHOTO_URL} alt="Small" size="sm" border="sm" />
+    </View>
+    <View style={styles.row}>
+      <Avatar src={DOG_PHOTO_URL} alt="Medium" size="md" border="none" />
+      <Avatar src={DOG_PHOTO_URL} alt="Medium" size="md" border="md" />
+    </View>
+    <View style={styles.row}>
+      <Avatar src={DOG_PHOTO_URL} alt="Large" size="lg" border="none" />
+      <Avatar src={DOG_PHOTO_URL} alt="Large" size="lg" border="md" />
+    </View>
   </View>
 )
 
-export const FallbackString = (args: AvatarProps) => <Avatar {...args} />
-FallbackString.args = {
-  alt: "User initials",
-  fallbackString: "JD",
-  size: "md"
-}
-
-export const FallbackStringSizes = () => (
-  <View style={styles.row}>
-    <Avatar alt="Small" fallbackString="AB" size="sm" />
-    <Avatar alt="Medium" fallbackString="CD" size="md" />
-    <Avatar alt="Large" fallbackString="EF" size="lg" />
+export const FallbackIcon = () => (
+  <View style={styles.column}>
+    <View style={styles.row}>
+      <Avatar alt="Small" fallbackType="image" size="sm" border="none" />
+      <Avatar alt="Small" fallbackType="image" size="sm" border="sm" />
+    </View>
+    <View style={styles.row}>
+      <Avatar alt="Medium" fallbackType="image" size="md" border="none" />
+      <Avatar alt="Medium" fallbackType="image" size="md" border="md" />
+    </View>
+    <View style={styles.row}>
+      <Avatar alt="Large" fallbackType="image" size="lg" border="none" />
+      <Avatar alt="Large" fallbackType="image" size="lg" border="md" />
+    </View>
   </View>
 )
 
-export const FallbackImage = (args: AvatarProps) => <Avatar {...args} />
-FallbackImage.args = {
-  alt: "Default avatar icon",
-  fallbackType: "image",
-  size: "md"
-}
+export const FallbackString = () => (
+  <View style={styles.column}>
+    <View style={styles.row}>
+      <Avatar alt="Small" fallbackString="JD" size="sm" border="none" />
+      <Avatar alt="Small" fallbackString="JD" size="sm" border="sm" />
+    </View>
+    <View style={styles.row}>
+      <Avatar alt="Medium" fallbackString="JD" size="md" border="none" />
+      <Avatar alt="Medium" fallbackString="JD" size="md" border="md" />
+    </View>
+    <View style={styles.row}>
+      <Avatar alt="Large" fallbackString="JD" size="lg" border="none" />
+      <Avatar alt="Large" fallbackString="JD" size="lg" border="md" />
+    </View>
+  </View>
+)
 
-export const BrokenImage = () => (
+export const BrokenImageFallback = () => (
   <View style={styles.row}>
     <Avatar
       src="https://broken-link.com/photo.jpg"
       alt="Broken with string fallback"
       fallbackString="JD"
       fallbackType="string"
+      size="md"
     />
     <Avatar
       src="https://broken-link.com/photo.jpg"
       alt="Broken with image fallback"
       fallbackType="image"
+      size="md"
     />
   </View>
 )
 
-export const BordersWithFallback = () => (
-  <View style={styles.row}>
-    <Avatar alt="No border" fallbackString="AB" border="none" />
-    <Avatar alt="Small border" fallbackString="CD" border="sm" />
-    <Avatar alt="Medium border" fallbackString="EF" border="md" />
-  </View>
-)
-
-export const LongInitials = (args: AvatarProps) => <Avatar {...args} />
-LongInitials.args = {
-  alt: "Long initials",
-  fallbackString: "ABC",
-  size: "lg"
-}
-
 const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
     gap: 16,
     alignItems: "center"
+  },
+  column: {
+    flexDirection: "column",
+    gap: 12
   }
 })

package/src/components/atoms/Avatar/Avatar.test.tsx

@@ -0,0 +1,269 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Avatar } from "./Avatar"
+
+describe("Avatar", () => {
+  describe("when rendering with image", () => {
+    it("renders image when src is provided", () => {
+      const { container } = renderWithTheme(
+        <Avatar src="https://example.com/photo.jpg" alt="User Photo" />
+      )
+
+      const img = container.querySelector("img")
+      expect(img).toBeInTheDocument()
+      expect(img).toHaveAttribute("src", "https://example.com/photo.jpg")
+    })
+
+    it("renders with alt text", () => {
+      renderWithTheme(
+        <Avatar
+          src="https://example.com/photo.jpg"
+          alt="John Doe Profile Picture"
+        />
+      )
+
+      expect(
+        screen.getByRole("img", { name: "John Doe Profile Picture" })
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering fallback", () => {
+    it("renders fallback icon when no src is provided", () => {
+      renderWithTheme(<Avatar alt="User avatar" fallbackType="image" />)
+
+      expect(screen.getByLabelText("Profile image")).toBeInTheDocument()
+    })
+
+    it("renders fallback string when fallbackString is provided", () => {
+      renderWithTheme(<Avatar alt="User" fallbackString="JD" />)
+
+      expect(screen.getByText("JD")).toBeInTheDocument()
+    })
+
+    it("automatically uses string fallback when fallbackString is provided without fallbackType", () => {
+      renderWithTheme(<Avatar alt="User" fallbackString="AB" />)
+
+      expect(screen.getByText("AB")).toBeInTheDocument()
+    })
+
+    it("renders icon fallback when no fallbackString is provided", () => {
+      renderWithTheme(<Avatar alt="User avatar" />)
+
+      expect(screen.getByLabelText("Profile image")).toBeInTheDocument()
+    })
+
+    it("renders string fallback even when src is provided but fails to load", () => {
+      renderWithTheme(
+        <Avatar
+          src="https://broken-link.com/photo.jpg"
+          alt="User"
+          fallbackString="JD"
+          fallbackType="string"
+        />
+      )
+
+      expect(screen.getByText("JD")).toBeInTheDocument()
+    })
+  })
+
+  describe("size variants", () => {
+    it("renders small size", () => {
+      const { container } = renderWithTheme(
+        <Avatar src="https://example.com/photo.jpg" alt="User" size="sm" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders medium size (default)", () => {
+      const { container } = renderWithTheme(
+        <Avatar src="https://example.com/photo.jpg" alt="User" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders large size", () => {
+      const { container } = renderWithTheme(
+        <Avatar src="https://example.com/photo.jpg" alt="User" size="lg" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe("border variants", () => {
+    it("renders without border by default", () => {
+      const { container } = renderWithTheme(
+        <Avatar src="https://example.com/photo.jpg" alt="User" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders small avatar with small border", () => {
+      const { container } = renderWithTheme(
+        <Avatar
+          src="https://example.com/photo.jpg"
+          alt="User"
+          size="sm"
+          border="sm"
+        />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders medium avatar with medium border", () => {
+      const { container } = renderWithTheme(
+        <Avatar
+          src="https://example.com/photo.jpg"
+          alt="User"
+          size="md"
+          border="md"
+        />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders large avatar with medium border", () => {
+      const { container } = renderWithTheme(
+        <Avatar
+          src="https://example.com/photo.jpg"
+          alt="User"
+          size="lg"
+          border="md"
+        />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe("fallback type combinations", () => {
+    it("renders image fallback for small size", () => {
+      renderWithTheme(<Avatar alt="User" fallbackType="image" size="sm" />)
+
+      expect(screen.getByLabelText("Profile image")).toBeInTheDocument()
+    })
+
+    it("renders image fallback for medium size", () => {
+      renderWithTheme(<Avatar alt="User" fallbackType="image" size="md" />)
+
+      expect(screen.getByLabelText("Profile image")).toBeInTheDocument()
+    })
+
+    it("renders image fallback for large size", () => {
+      renderWithTheme(<Avatar alt="User" fallbackType="image" size="lg" />)
+
+      expect(screen.getByLabelText("Profile image")).toBeInTheDocument()
+    })
+
+    it("renders string fallback for small size", () => {
+      renderWithTheme(<Avatar alt="User" fallbackString="SM" size="sm" />)
+
+      expect(screen.getByText("SM")).toBeInTheDocument()
+    })
+
+    it("renders string fallback for medium size", () => {
+      renderWithTheme(<Avatar alt="User" fallbackString="MD" size="md" />)
+
+      expect(screen.getByText("MD")).toBeInTheDocument()
+    })
+
+    it("renders string fallback for large size", () => {
+      renderWithTheme(<Avatar alt="User" fallbackString="LG" size="lg" />)
+
+      expect(screen.getByText("LG")).toBeInTheDocument()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("has accessible image with alt text", () => {
+      renderWithTheme(
+        <Avatar src="https://example.com/photo.jpg" alt="User Avatar" />
+      )
+
+      expect(
+        screen.getByRole("img", { name: "User Avatar" })
+      ).toBeInTheDocument()
+    })
+
+    it("has accessible fallback icon with aria-label", () => {
+      renderWithTheme(<Avatar alt="User" fallbackType="image" />)
+
+      expect(screen.getByLabelText("Profile image")).toBeInTheDocument()
+    })
+
+    it("renders fallback text accessibly", () => {
+      renderWithTheme(<Avatar alt="User" fallbackString="JD" />)
+
+      expect(screen.getByText("JD")).toBeInTheDocument()
+    })
+  })
+
+  describe("type safety", () => {
+    it("allows small avatar with none border", () => {
+      const { container } = renderWithTheme(
+        <Avatar alt="User" size="sm" border="none" fallbackString="SM" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("allows small avatar with sm border", () => {
+      const { container } = renderWithTheme(
+        <Avatar alt="User" size="sm" border="sm" fallbackString="SM" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("allows medium avatar with none border", () => {
+      const { container } = renderWithTheme(
+        <Avatar alt="User" size="md" border="none" fallbackString="MD" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("allows medium avatar with md border", () => {
+      const { container } = renderWithTheme(
+        <Avatar alt="User" size="md" border="md" fallbackString="MD" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("allows large avatar with none border", () => {
+      const { container } = renderWithTheme(
+        <Avatar alt="User" size="lg" border="none" fallbackString="LG" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("allows large avatar with md border", () => {
+      const { container } = renderWithTheme(
+        <Avatar alt="User" size="lg" border="md" fallbackString="LG" />
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe("ref forwarding", () => {
+    it("forwards ref to the root element", () => {
+      const ref = React.createRef<any>()
+
+      renderWithTheme(<Avatar ref={ref} alt="User" />)
+
+      expect(ref.current).toBeTruthy()
+      expect(ref.current).toBeInTheDocument()
+    })
+  })
+})