@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,127 @@
+import React from "react"
+import { View, type ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+// ─── Styled primitives ────────────────────────────────────────────────────────
+
+const Container = styled(View)<{ showBg: boolean }>(({ theme, showBg }) => {
+  const { colour, sizing, borderRadius } =
+    theme.tokens.components.carouselControls.carouselControl
+  const spacing = theme.tokens.semantics.dimensions.spacing
+
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: parseTokenValue(spacing.xs),
+    minHeight: parseTokenValue(sizing.default),
+    paddingHorizontal: parseTokenValue(spacing.xs),
+    paddingVertical: parseTokenValue(spacing["2xs"]),
+    borderRadius: parseTokenValue(borderRadius.default),
+    backgroundColor: showBg ? colour.background.default : "transparent"
+  }
+})
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+// For 6–7 item carousels a 5-dot sliding window is shown — identical logic
+// to the web implementation.
+function getVisibleDots(count: number, activeIndex: number): number[] {
+  if (count <= 5) {
+    return Array.from({ length: count }, (_, i) => i)
+  }
+  const windowStart = Math.min(Math.max(activeIndex - 2, 0), count - 5)
+  return Array.from({ length: 5 }, (_, i) => windowStart + i)
+}
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+export type CarouselControlsProps = {
+  /**
+   * Total number of carousel items. Renders one dot per item (max 5 visible
+   * for 6–7 items via a sliding window).
+   */
+  count: number
+  /**
+   * Zero-based index of the currently active item.
+   */
+  activeIndex: number
+  /**
+   * Show a white pill background behind the dots. Defaults to `true`.
+   *
+   * Set to `false` when placing controls on a light surface where the
+   * background pill would clash with the page background.
+   */
+  showBackground?: boolean
+} & ViewProps
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Carousel position indicator — a row of dots where the active dot is
+ * highlighted and inactive dots are shown at reduced opacity.
+ *
+ * For 6–7 item carousels a 5-dot sliding window is used with diminishing
+ * dot sizes to indicate proximity to the active item.
+ *
+ * @example
+ * ```tsx
+ * <CarouselControls count={4} activeIndex={currentIndex} />
+ * <CarouselControls count={4} activeIndex={currentIndex} showBackground={false} />
+ * ```
+ */
+export const CarouselControls = React.forwardRef<View, CarouselControlsProps>(
+  ({ count, activeIndex, showBackground = true, ...props }, ref) => {
+    const theme = useTheme()
+    const { colour, sizing, slot } =
+      theme.tokens.components.carouselControls.carouselControl
+    const { opacity } = theme.tokens.primitives
+
+    const visibleDots = getVisibleDots(count, activeIndex)
+
+    function getDotSize(dotIndex: number): number {
+      if (dotIndex === activeIndex || count <= 5) {
+        return parseTokenValue(sizing.slot.default)
+      }
+      const distance = Math.abs(dotIndex - activeIndex)
+      if (distance === 1) return parseTokenValue(sizing.slot.inactiveMedium)
+      return parseTokenValue(sizing.slot.inactiveSmall)
+    }
+
+    return (
+      <Container
+        ref={ref}
+        showBg={showBackground}
+        accessibilityRole="image"
+        accessibilityLabel={`Slide ${activeIndex + 1} of ${count}`}
+        {...props}
+      >
+        {visibleDots.map((dotIndex) => {
+          const isActive = dotIndex === activeIndex
+          const size = getDotSize(dotIndex)
+
+          return (
+            <View
+              key={dotIndex}
+              accessible={false}
+              style={{
+                width: size,
+                height: size,
+                borderRadius: parseTokenValue(slot.borderRadius.default),
+                backgroundColor: isActive
+                  ? colour.slot.active
+                  : colour.slot.disabled,
+                opacity: isActive ? 1 : parseTokenValue(opacity["40"])
+              }}
+            />
+          )
+        })}
+      </Container>
+    )
+  }
+)
+
+CarouselControls.displayName = "CarouselControls"

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

@@ -0,0 +1,2 @@
+export { CarouselControls } from "./CarouselControls"
+export type { CarouselControlsProps } from "./CarouselControls"

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

@@ -0,0 +1,36 @@
+import React from "react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Hint } from "./Hint"
+
+describe("Hint", () => {
+  describe("when component is rendering", () => {
+    it("renders without crashing", () => {
+      const { container } = renderWithTheme(<Hint />)
+      expect(container.firstChild).toBeTruthy()
+    })
+
+    it("renders with default variant", () => {
+      const { container } = renderWithTheme(<Hint />)
+      expect(container.firstChild).toBeTruthy()
+    })
+  })
+
+  describe("when rendering all variants", () => {
+    it.each(["default", "success", "warning", "error"] as const)(
+      "renders %s variant",
+      (variant) => {
+        const { container } = renderWithTheme(<Hint variant={variant} />)
+        expect(container.firstChild).toBeTruthy()
+      }
+    )
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Hint ref={ref} />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

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

@@ -0,0 +1,98 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Icon } from "./Icon"
+
+const MockIcon = ({ width, height, color }: any) => (
+  <svg data-testid="svg-icon" width={width} height={height} fill={color} />
+)
+MockIcon.category = "core" as const
+
+const MockMarketingIcon = ({ width, height, color }: any) => (
+  <svg
+    data-testid="svg-icon-marketing"
+    width={width}
+    height={height}
+    fill={color}
+  />
+)
+MockMarketingIcon.category = "marketing" as const
+
+describe("Icon", () => {
+  describe("when component is rendering", () => {
+    it("renders the icon component", () => {
+      renderWithTheme(<Icon icon={MockIcon} />)
+      expect(screen.getByTestId("svg-icon")).toBeInTheDocument()
+    })
+
+    it("renders with default size and colour", () => {
+      renderWithTheme(<Icon icon={MockIcon} />)
+      expect(screen.getByTestId("svg-icon")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering all sizes", () => {
+    it.each(["xs", "sm", "md", "lg", "xl"] as const)(
+      "renders %s size (core)",
+      (size) => {
+        renderWithTheme(<Icon icon={MockIcon} size={size} />)
+        expect(screen.getByTestId("svg-icon")).toBeInTheDocument()
+      }
+    )
+
+    it("renders 2xl size (marketing)", () => {
+      renderWithTheme(<Icon icon={MockMarketingIcon} size="2xl" />)
+      expect(screen.getByTestId("svg-icon-marketing")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering all colours", () => {
+    it.each([
+      "primary",
+      "secondary",
+      "disabled",
+      "success",
+      "warning",
+      "error",
+      "promo",
+      "info",
+      "alt",
+      "action-default",
+      "action-inverse"
+    ] as const)("renders %s colour", (colour) => {
+      renderWithTheme(<Icon icon={MockIcon} colour={colour} />)
+      expect(screen.getByTestId("svg-icon")).toBeInTheDocument()
+    })
+  })
+
+  describe("when customColour is provided", () => {
+    it("overrides the semantic colour variant", () => {
+      renderWithTheme(
+        <Icon icon={MockIcon} colour="primary" customColour="#123456" />
+      )
+      expect(screen.getByTestId("svg-icon")).toHaveAttribute("fill", "#123456")
+    })
+  })
+
+  describe("accessibility", () => {
+    it("sets image role and label when aria-label is provided", () => {
+      renderWithTheme(<Icon icon={MockIcon} aria-label="Go forward" />)
+      expect(screen.getByRole("image")).toBeInTheDocument()
+      expect(screen.getByLabelText("Go forward")).toBeInTheDocument()
+    })
+
+    it("does not set role when aria-label is not provided", () => {
+      renderWithTheme(<Icon icon={MockIcon} />)
+      expect(screen.queryByRole("image")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Icon ref={ref} icon={MockIcon} />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/atoms/Icon/Icon.tsx

@@ -30,6 +30,7 @@ type IconOwnProps = {
   icon: PawprintIcon
   size?: IconSize
   colour?: IconColour
+  customColour?: string
   "aria-label"?: string
 }
 
@@ -67,6 +68,7 @@ const Icon = React.forwardRef<View, IconProps>(
   (
     {
       icon: IconComponent,
+      customColour,
       size = "md",
       colour = "primary",
       "aria-label": ariaLabel,
@@ -79,7 +81,9 @@ const Icon = React.forwardRef<View, IconProps>(
 
     const iconTokens = theme.tokens.semantics.colour.icon
     let color: string
-    if (colour === "action-default") {
+    if (customColour) {
+      color = customColour
+    } else if (colour === "action-default") {
       color = iconTokens.action.default
     } else if (colour === "action-inverse") {
       color = iconTokens.action.inverse

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

@@ -0,0 +1,101 @@
+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 { IconButton } from "./IconButton"
+
+const MockIcon = ({ width, height, color }: any) => (
+  <svg data-testid="svg-icon" width={width} height={height} fill={color} />
+)
+MockIcon.category = "core" as const
+
+describe("IconButton", () => {
+  describe("when component is rendering", () => {
+    it("renders the icon", () => {
+      renderWithTheme(<IconButton icon={MockIcon} aria-label="Add item" />)
+      expect(screen.getByTestId("svg-icon")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering variants", () => {
+    it.each(["filled", "outlined", "text"] as const)(
+      "renders %s variant",
+      (variant) => {
+        renderWithTheme(
+          <IconButton icon={MockIcon} variant={variant} aria-label="Action" />
+        )
+        expect(screen.getByTestId("svg-icon")).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when rendering sizes", () => {
+    it.each(["sm", "md", "lg"] as const)("renders %s size", (size) => {
+      renderWithTheme(
+        <IconButton icon={MockIcon} size={size} aria-label="Action" />
+      )
+      expect(screen.getByTestId("svg-icon")).toBeInTheDocument()
+    })
+  })
+
+  describe("when component is interactive", () => {
+    it("calls onPress when pressed", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(
+        <IconButton icon={MockIcon} aria-label="Add" onPress={onPress} />
+      )
+
+      await user.click(screen.getByLabelText("Add"))
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it("does not call onPress when disabled", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(
+        <IconButton
+          icon={MockIcon}
+          aria-label="Add"
+          onPress={onPress}
+          disabled
+        />
+      )
+
+      await user.click(screen.getByLabelText("Add"))
+      expect(onPress).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("when loading", () => {
+    it("disables button when loading", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(
+        <IconButton
+          icon={MockIcon}
+          aria-label="Add"
+          onPress={onPress}
+          loading
+        />
+      )
+
+      await user.click(screen.getByLabelText("Add"))
+      expect(onPress).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("has aria-label", () => {
+      renderWithTheme(<IconButton icon={MockIcon} aria-label="Delete item" />)
+      expect(screen.getByLabelText("Delete item")).toBeInTheDocument()
+    })
+
+    it("sets disabled accessibility state", () => {
+      renderWithTheme(<IconButton icon={MockIcon} aria-label="Add" disabled />)
+      const button = screen.getByLabelText("Add")
+      expect(button).toBeDisabled()
+    })
+  })
+})

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

@@ -42,7 +42,7 @@ export default {
   argTypes: {
     size: {
       control: { type: "select" },
-      options: ["sm", "lg"] as IllustrationSize[],
+      options: ["sm", "lg", "xl"] as IllustrationSize[],
       description: "Size variant (controls height)"
     },
     illustration: {
@@ -71,7 +71,7 @@ Default.args = {
   size: "sm"
 }
 
-const allSizes: IllustrationSize[] = ["sm", "lg"]
+const allSizes: IllustrationSize[] = ["sm", "lg", "xl"]
 
 export const AllSizes = () => {
   const sample = illustrationMap[defaultIllustration] as PawprintIllustration

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

@@ -0,0 +1,55 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Illustration } from "./Illustration"
+
+const MockIllustration = ({ height }: { width?: number; height?: number }) => (
+  <svg data-testid="illustration-svg" height={height} />
+)
+
+describe("Illustration", () => {
+  describe("when component is rendering", () => {
+    it("renders the illustration", () => {
+      renderWithTheme(<Illustration illustration={MockIllustration} />)
+      expect(screen.getByTestId("illustration-svg")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering sizes", () => {
+    it.each(["sm", "lg"] as const)("renders %s size", (size) => {
+      renderWithTheme(
+        <Illustration illustration={MockIllustration} size={size} />
+      )
+      expect(screen.getByTestId("illustration-svg")).toBeInTheDocument()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("sets image role when aria-label is provided", () => {
+      renderWithTheme(
+        <Illustration
+          illustration={MockIllustration}
+          aria-label="Dog sitting"
+        />
+      )
+      expect(screen.getByRole("image")).toBeInTheDocument()
+      expect(screen.getByLabelText("Dog sitting")).toBeInTheDocument()
+    })
+
+    it("does not set role when aria-label is not provided", () => {
+      renderWithTheme(<Illustration illustration={MockIllustration} />)
+      expect(screen.queryByRole("image")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(
+        <Illustration ref={ref} illustration={MockIllustration} />
+      )
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/atoms/Illustration/Illustration.tsx

@@ -3,7 +3,7 @@ import { View, ViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 
-type IllustrationSize = "sm" | "lg"
+type IllustrationSize = "sm" | "lg" | "xl"
 
 type PawprintIllustration = React.ComponentType<{
   width?: number
@@ -42,7 +42,7 @@ const StyledRoot = styled(View)<{
  * ```
  *
  * @param illustration - **(required)** Illustration component
- * @param size - *(optional)* Size variant: sm (default), lg
+ * @param size - *(optional)* Size variant: sm (default), lg, xl
  * @param aria-label - *(optional)* Accessible label
  */
 const Illustration = React.forwardRef<View, IllustrationProps>(
@@ -69,7 +69,7 @@ const Illustration = React.forwardRef<View, IllustrationProps>(
         accessible={!!ariaLabel}
         {...rest}
       >
-        <IllustrationComponent height={dimension} />
+        <IllustrationComponent width={dimension} height={dimension} />
       </StyledRoot>
     )
   }