@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -3,20 +3,32 @@ import { View } from "react-native"
 import * as AvatarPrimitive from "@rn-primitives/avatar"
 import styled from "@emotion/native"
 import { Typography } from "../Typography"
+import { Icon, type IconSize } from "../Icon"
+import { DogHeadOutlinedPrimary } from "@butternutbox/pawprint-icons/marketing"
 
 export type AvatarSize = "sm" | "md" | "lg"
-export type AvatarBorder = "none" | "sm" | "md"
 export type AvatarFallbackType = "string" | "image"
 
-export interface AvatarProps {
+type SmallAvatarProps = {
+  size?: "sm"
+  border?: "none" | "sm"
+}
+
+type MediumLargeAvatarProps = {
+  size?: "md" | "lg"
+  border?: "none" | "md"
+}
+
+type BaseAvatarProps = {
   src?: string
   alt: string
-  size?: AvatarSize
-  border?: AvatarBorder
   fallbackType?: AvatarFallbackType
   fallbackString?: string
 }
 
+export type AvatarProps = BaseAvatarProps &
+  (SmallAvatarProps | MediumLargeAvatarProps)
+
 const SIZE_MAP = {
   sm: "small",
   md: "medium",
@@ -27,7 +39,7 @@ const parseTokenValue = (value: string): number => parseFloat(value)
 
 const StyledRoot = styled(AvatarPrimitive.Root)<{
   size: AvatarSize
-  border: AvatarBorder
+  border: "none" | "sm" | "md"
 }>(({ theme, size, border }) => {
   const { avatar } = theme.tokens.components
   const { borderRadius } = theme.tokens.semantics.dimensions
@@ -67,17 +79,43 @@ const StyledFallback = styled(AvatarPrimitive.Fallback)(({ theme }) => {
     justifyContent: "center",
     width: "100%",
     height: "100%",
-    backgroundColor: background.container.disabled,
-    color: text.disabled
+    backgroundColor: background.container.secondary,
+    color: text.primary
+  }
+})
+
+const StyledIcon = styled(Icon)<{ avatarSize: AvatarSize }>(({
+  theme,
+  avatarSize
+}) => {
+  const {
+    icons: {
+      sizing: { icons }
+    }
+  } = theme.tokens.components
+
+  const iconSize = parseTokenValue(
+    icons.core[AVATAR_SIZE_TO_ICON_SIZE[avatarSize] as keyof typeof icons.core]
+  )
+
+  return {
+    width: iconSize,
+    height: iconSize
   }
 })
 
 const AVATAR_TO_BODY_SIZE = {
-  sm: "xs",
-  md: "sm",
+  sm: "sm",
+  md: "md",
   lg: "md"
 } as const
 
+const AVATAR_SIZE_TO_ICON_SIZE: Record<AvatarSize, IconSize> = {
+  sm: "md",
+  md: "md",
+  lg: "xl"
+}
+
 /**
  * Avatar component for displaying user profile pictures or fallback initials.
  * Built on @rn-primitives/avatar with design system styling.
@@ -105,10 +143,19 @@ const AVATAR_TO_BODY_SIZE = {
  *
  * @param {string} [src] - Image source URL.
  * @param {string} alt - Accessible label for the avatar.
- * @param {"sm" | "md" | "lg"} [size="md"] - Size variant.
- * @param {"none" | "sm" | "md"} [border="none"] - Border width variant.
- * @param {"string" | "image"} [fallbackType] - Fallback type (auto-detected based on fallbackString if not specified).
- * @param {string} [fallbackString] - Text to display as fallback (typically user initials).
+ * @param {"sm" | "md" | "lg"} [size="md"] - Avatar size:
+ *   - `sm`: Small (supports `none` or `sm` border)
+ *   - `md`: Medium (supports `none` or `md` border)
+ *   - `lg`: Large (supports `none` or `md` border)
+ * @param {"none" | "sm" | "md"} [border="none"] - Border width:
+ *   - `none`: No border
+ *   - `sm`: Small border (only for small avatars)
+ *   - `md`: Medium border (only for medium/large avatars)
+ * @param {"string" | "image"} [fallbackType] - Fallback display when image unavailable:
+ *   - `string`: Shows initials from `fallbackString`
+ *   - `image`: Shows dog head icon (default if no `fallbackString` provided)
+ * @param {string} [fallbackString] - Initials to display (1-2 characters recommended).
+ *   Automatically sets `fallbackType` to `"string"` when provided.
  */
 const AvatarRoot = React.forwardRef<View, AvatarProps>(
   (
@@ -135,18 +182,17 @@ const AvatarRoot = React.forwardRef<View, AvatarProps>(
         {src && <StyledImage source={{ uri: src }} />}
         <StyledFallback>
           {showStringFallback ? (
-            <Typography
-              size={AVATAR_TO_BODY_SIZE[size]}
-              weight="bold"
-              color="disabled"
-            >
+            <Typography size={AVATAR_TO_BODY_SIZE[size]} weight="bold">
               {fallbackString}
             </Typography>
           ) : (
-            // TODO: replace with the Icon when available
-            <Typography size={AVATAR_TO_BODY_SIZE[size]} color="disabled">
-              👤
-            </Typography>
+            <StyledIcon
+              avatarSize={size}
+              icon={DogHeadOutlinedPrimary}
+              size={AVATAR_SIZE_TO_ICON_SIZE[size]}
+              colour="primary"
+              aria-label="Profile image"
+            />
           )}
         </StyledFallback>
       </StyledRoot>

package/src/components/atoms/Avatar/index.ts

@@ -1,7 +1,2 @@
 export { Avatar } from "./Avatar"
-export type {
-  AvatarProps,
-  AvatarSize,
-  AvatarBorder,
-  AvatarFallbackType
-} from "./Avatar"
+export type { AvatarProps, AvatarSize, AvatarFallbackType } from "./Avatar"

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

@@ -1,28 +1,9 @@
 import React from "react"
 import { View, StyleSheet, Text } from "react-native"
+import { CheckCircle } from "@butternutbox/pawprint-icons/core"
 import { Badge } from "./Badge"
 import type { BadgeProps } from "./Badge"
 
-const PlaceholderIcon = ({
-  width = 24,
-  height = 24,
-  color = "#000"
-}: {
-  width?: number
-  height?: number
-  color?: string
-}) => (
-  <View
-    style={{
-      width,
-      height,
-      borderRadius: 4,
-      backgroundColor: color,
-      opacity: 0.3
-    }}
-  />
-)
-
 export default {
   title: "Atoms/Badge",
   component: Badge,
@@ -90,12 +71,7 @@ export const WithIcons = () => (
         <Text style={styles.label}>{variant} with Icon</Text>
         <View style={styles.row}>
           {sizes.map((size) => (
-            <Badge
-              key={size}
-              variant={variant}
-              size={size}
-              icon={PlaceholderIcon}
-            >
+            <Badge key={size} variant={variant} size={size} icon={CheckCircle}>
               {size}
             </Badge>
           ))}
@@ -117,7 +93,7 @@ export const Pinned = () => (
               size="medium"
               pinned
               top={16}
-              icon={PlaceholderIcon}
+              icon={CheckCircle}
             >
               {variant}
             </Badge>
@@ -135,7 +111,7 @@ export const Pinned = () => (
               size="medium"
               pinned
               bottom={16}
-              icon={PlaceholderIcon}
+              icon={CheckCircle}
             >
               {variant}
             </Badge>
@@ -179,7 +155,7 @@ export const UsageExamples = () => (
     <View style={styles.section}>
       <Text style={styles.label}>Promotional tags</Text>
       <View style={styles.row}>
-        <Badge variant="promo" size="large" icon={PlaceholderIcon}>
+        <Badge variant="promo" size="large" icon={CheckCircle}>
           Premium
         </Badge>
         <Badge variant="primary" size="large">

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

@@ -0,0 +1,90 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Badge } from "./Badge"
+
+const MockIcon = ({ width, height, color }: any) => (
+  <svg data-testid="mock-icon" width={width} height={height} fill={color} />
+)
+MockIcon.category = "core" as const
+
+describe("Badge", () => {
+  describe("when component is rendering", () => {
+    it("renders children text", () => {
+      renderWithTheme(<Badge>New</Badge>)
+      expect(screen.getByText("New")).toBeInTheDocument()
+    })
+
+    it("renders with default variant and size", () => {
+      renderWithTheme(<Badge>Default</Badge>)
+      expect(screen.getByText("Default")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering all variants", () => {
+    it.each(["primary", "promo", "success", "warning", "error"] as const)(
+      "renders %s variant",
+      (variant) => {
+        renderWithTheme(<Badge variant={variant}>{variant}</Badge>)
+        expect(screen.getByText(variant)).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when rendering all sizes", () => {
+    it.each(["small", "medium", "large"] as const)(
+      "renders %s size",
+      (size) => {
+        renderWithTheme(<Badge size={size}>{size}</Badge>)
+        expect(screen.getByText(size)).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when rendering with icon", () => {
+    it("renders with icon", () => {
+      renderWithTheme(<Badge icon={MockIcon}>With Icon</Badge>)
+      expect(screen.getByTestId("mock-icon")).toBeInTheDocument()
+      expect(screen.getByText("With Icon")).toBeInTheDocument()
+    })
+
+    it("renders without icon when not provided", () => {
+      renderWithTheme(<Badge>No Icon</Badge>)
+      expect(screen.queryByTestId("mock-icon")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering pinned badges", () => {
+    it("renders pinned badge", () => {
+      renderWithTheme(<Badge pinned>Pinned</Badge>)
+      expect(screen.getByText("Pinned")).toBeInTheDocument()
+    })
+
+    it("renders pinned badge with top position", () => {
+      renderWithTheme(
+        <Badge pinned top={16}>
+          Pinned Top
+        </Badge>
+      )
+      expect(screen.getByText("Pinned Top")).toBeInTheDocument()
+    })
+
+    it("renders pinned badge with bottom position", () => {
+      renderWithTheme(
+        <Badge pinned bottom={16}>
+          Pinned Bottom
+        </Badge>
+      )
+      expect(screen.getByText("Pinned Bottom")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Badge ref={ref}>Ref test</Badge>)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

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

@@ -0,0 +1,123 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Button } from "./Button"
+
+describe("Button", () => {
+  describe("when component is rendering", () => {
+    it("renders children text", () => {
+      renderWithTheme(<Button>Click me</Button>)
+      expect(screen.getByText("Click me")).toBeInTheDocument()
+    })
+
+    it("renders with default props", () => {
+      renderWithTheme(<Button>Default</Button>)
+      expect(screen.getByText("Default")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering variants", () => {
+    it.each(["filled", "outlined", "text"] as const)(
+      "renders %s variant",
+      (variant) => {
+        renderWithTheme(<Button variant={variant}>{variant}</Button>)
+        expect(screen.getByText(variant)).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when rendering sizes", () => {
+    it.each(["sm", "md", "lg"] as const)("renders %s size", (size) => {
+      renderWithTheme(<Button size={size}>Size {size}</Button>)
+      expect(screen.getByText(`Size ${size}`)).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering colours", () => {
+    it.each(["primary", "secondary"] as const)(
+      "renders %s colour",
+      (colour) => {
+        renderWithTheme(<Button colour={colour}>Colour</Button>)
+        expect(screen.getByText("Colour")).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when component is interactive", () => {
+    it("calls onPress when pressed", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(<Button onPress={onPress}>Press me</Button>)
+
+      await user.click(screen.getByText("Press me"))
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it("does not call onPress when disabled", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(
+        <Button onPress={onPress} disabled>
+          Disabled
+        </Button>
+      )
+
+      await user.click(screen.getByText("Disabled"))
+      expect(onPress).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("when loading", () => {
+    it("renders loading state", () => {
+      renderWithTheme(<Button loading>Loading</Button>)
+      expect(screen.getByText("Loading")).toBeInTheDocument()
+    })
+
+    it("does not call onPress when loading", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(
+        <Button onPress={onPress} loading>
+          Loading
+        </Button>
+      )
+
+      await user.click(screen.getByText("Loading"))
+      expect(onPress).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("when rendering with icons", () => {
+    it("renders with startIcon", () => {
+      const StartIcon = () => <span data-testid="start-icon">→</span>
+      renderWithTheme(<Button startIcon={<StartIcon />}>With icon</Button>)
+
+      expect(screen.getByTestId("start-icon")).toBeInTheDocument()
+      expect(screen.getByText("With icon")).toBeInTheDocument()
+    })
+
+    it("renders with endIcon", () => {
+      const EndIcon = () => <span data-testid="end-icon">→</span>
+      renderWithTheme(<Button endIcon={<EndIcon />}>With icon</Button>)
+
+      expect(screen.getByTestId("end-icon")).toBeInTheDocument()
+      expect(screen.getByText("With icon")).toBeInTheDocument()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("sets disabled accessibility state", () => {
+      renderWithTheme(<Button disabled>Disabled</Button>)
+      const button = screen.getByText("Disabled").closest("button")
+      expect(button).toBeDisabled()
+    })
+
+    it("sets busy accessibility state when loading", () => {
+      const { container } = renderWithTheme(<Button loading>Busy</Button>)
+      const element = container.querySelector('[aria-busy="true"]')
+      expect(element).toBeInTheDocument()
+    })
+  })
+})

package/src/components/atoms/Button/Button.tsx

@@ -230,7 +230,7 @@ const Button = React.forwardRef<View, ButtonProps>(
               fontFamily: typography.fontFamily,
               fontWeight: typography.fontWeight,
               fontSize: typography.fontSize,
-              lineHeight: typography.fontSize,
+              lineHeight: typography.lineHeight,
               letterSpacing: typography.letterSpacing
             }}
             color={variantStyles.textColor as never}

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

@@ -0,0 +1,217 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { Typography } from "../Typography"
+import { Button } from "../Button"
+import {
+  CarouselControls,
+  type CarouselControlsProps
+} from "./CarouselControls"
+
+export default {
+  title: "Atoms/CarouselControls",
+  component: CarouselControls,
+  argTypes: {
+    count: {
+      control: { type: "number", min: 2, max: 7, step: 1 },
+      description: "Total number of carousel items (2–7)"
+    },
+    activeIndex: {
+      control: { type: "number", min: 0, max: 6, step: 1 },
+      description: "Zero-based index of the active item"
+    },
+    showBackground: {
+      control: { type: "boolean" },
+      description: "Show pill background container"
+    }
+  }
+}
+
+export const Playground = (args: CarouselControlsProps) => (
+  <View style={styles.container}>
+    <CarouselControls {...args} />
+  </View>
+)
+Playground.args = {
+  count: 5,
+  activeIndex: 2,
+  showBackground: true
+}
+
+export const AllCounts = () => (
+  <View style={styles.column}>
+    {([2, 3, 4, 5, 6, 7] as const).map((count) => (
+      <View key={count} style={styles.row}>
+        <View style={styles.labelContainer}>
+          <Typography size="sm">{count} items</Typography>
+        </View>
+        <CarouselControls count={count} activeIndex={0} />
+      </View>
+    ))}
+  </View>
+)
+
+export const WithBackground = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm">
+      On light background
+    </Typography>
+    <CarouselControls
+      count={5}
+      activeIndex={2}
+      showBackground
+      style={{ alignSelf: "flex-start" }}
+    />
+
+    <Typography variant="heading" size="sm">
+      On dark background
+    </Typography>
+    <View style={styles.darkSurface}>
+      <CarouselControls count={5} activeIndex={2} showBackground />
+    </View>
+  </View>
+)
+
+export const WithoutBackground = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm">
+      Standalone dots (no background)
+    </Typography>
+    <CarouselControls count={5} activeIndex={2} showBackground={false} />
+  </View>
+)
+
+export const DiminishingWindow = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm">
+      7 items — active position changes
+    </Typography>
+    {Array.from({ length: 7 }, (_, i) => (
+      <View key={i} style={styles.row}>
+        <View style={styles.labelContainer}>
+          <Typography size="sm">Active: {i + 1}</Typography>
+        </View>
+        <CarouselControls count={7} activeIndex={i} />
+      </View>
+    ))}
+  </View>
+)
+
+export const AllStates = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm">
+      2–5 items (uniform dots)
+    </Typography>
+    {([2, 3, 4, 5] as const).map((count) =>
+      Array.from({ length: count }, (_, i) => (
+        <View key={`${count}-${i}`} style={styles.row}>
+          <View style={styles.labelWide}>
+            <Typography size="sm">
+              {count} items, #{i + 1}
+            </Typography>
+          </View>
+          <CarouselControls count={count} activeIndex={i} />
+        </View>
+      ))
+    )}
+
+    <Typography variant="heading" size="sm">
+      6–7 items (diminishing window)
+    </Typography>
+    {([6, 7] as const).map((count) =>
+      Array.from({ length: count }, (_, i) => (
+        <View key={`${count}-${i}`} style={styles.row}>
+          <View style={styles.labelWide}>
+            <Typography size="sm">
+              {count} items, #{i + 1}
+            </Typography>
+          </View>
+          <CarouselControls count={count} activeIndex={i} />
+        </View>
+      ))
+    )}
+  </View>
+)
+
+function InteractiveCarousel() {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const count = 5
+
+  return (
+    <View style={styles.interactiveContainer}>
+      <View style={styles.slide}>
+        <Typography variant="heading" size="md">
+          Slide {activeIndex + 1}
+        </Typography>
+      </View>
+      <View style={styles.controls}>
+        <Button
+          variant="outlined"
+          colour="primary"
+          size="sm"
+          onPress={() => setActiveIndex((i) => Math.max(0, i - 1))}
+          disabled={activeIndex === 0}
+        >
+          Prev
+        </Button>
+        <CarouselControls count={count} activeIndex={activeIndex} />
+        <Button
+          variant="outlined"
+          colour="primary"
+          size="sm"
+          onPress={() => setActiveIndex((i) => Math.min(count - 1, i + 1))}
+          disabled={activeIndex === count - 1}
+        >
+          Next
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+export const Interactive = () => <InteractiveCarousel />
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+    alignItems: "center"
+  },
+  column: {
+    padding: 24,
+    gap: 16
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16
+  },
+  labelContainer: {
+    width: 64
+  },
+  labelWide: {
+    width: 88
+  },
+  darkSurface: {
+    backgroundColor: "#3d2317",
+    padding: 24,
+    borderRadius: 12,
+    alignSelf: "flex-start"
+  },
+  interactiveContainer: {
+    padding: 24,
+    gap: 16,
+    alignItems: "center"
+  },
+  slide: {
+    width: 280,
+    height: 160,
+    backgroundColor: "#f5f0eb",
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  controls: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  }
+})