@butternutbox/pawprint-native 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/__mocks__/react-native-reanimated.tsx

@@ -51,6 +51,10 @@ export const useSharedValue = <T,>(initial: T) => ({ value: initial })
 
 export const useAnimatedStyle = (_fn: () => object) => ({})
 
+export const useReducedMotion = () => false
+
+export const cancelAnimation = (_value: unknown) => {}
+
 export const runOnJS =
   <Args extends unknown[], R>(fn: (..._args: Args) => R) =>
   (...args: Args) =>
@@ -58,6 +62,7 @@ export const runOnJS =
 
 export const withTiming = <T,>(value: T) => value
 export const withSpring = <T,>(value: T) => value
+export const withRepeat = <T,>(value: T) => value
 
 // Animation builder stub — supports chaining .duration() / .easing() / .delay()
 const createBuilder = () => {

package/src/__mocks__/react-native-svg.tsx

@@ -25,3 +25,4 @@ export const Stop = passThrough("Stop")
 export const G = passThrough("G")
 export const Path = passThrough("Path")
 export const ClipPath = passThrough("ClipPath")
+export const Polygon = passThrough("Polygon")

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

@@ -0,0 +1,21 @@
+import React from "react"
+import { ChefDogLoader } from "./ChefDogLoader"
+import type { ChefDogLoaderProps } from "./ChefDogLoader"
+
+export default {
+  title: "Atoms/ChefDogLoader",
+  component: ChefDogLoader,
+  argTypes: {
+    size: {
+      control: { type: "number" },
+      description: "Width and height in points"
+    }
+  }
+}
+
+export const Playground = (args: ChefDogLoaderProps) => (
+  <ChefDogLoader {...args} />
+)
+Playground.args = {
+  size: 240
+}

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

@@ -0,0 +1,33 @@
+import React from "react"
+import { View } from "react-native"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { ChefDogLoader } from "./ChefDogLoader"
+
+describe("ChefDogLoader", () => {
+  describe("when component is rendering", () => {
+    it("renders with progressbar role", () => {
+      renderWithTheme(<ChefDogLoader />)
+      expect(screen.getByRole("progressbar")).toBeInTheDocument()
+    })
+
+    it("has accessible loading label", () => {
+      renderWithTheme(<ChefDogLoader />)
+      expect(screen.getByLabelText("Loading")).toBeInTheDocument()
+    })
+
+    it("accepts a custom accessibility label", () => {
+      renderWithTheme(<ChefDogLoader accessibilityLabel="Fetching your plan" />)
+      expect(screen.getByLabelText("Fetching your plan")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<View>()
+      renderWithTheme(<ChefDogLoader ref={ref} />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/atoms/ChefDogLoader/ChefDogLoader.tsx

@@ -0,0 +1,115 @@
+import React from "react"
+import { StyleSheet, View, ViewProps } from "react-native"
+import Svg, { ClipPath, Defs, G, Polygon } from "react-native-svg"
+import Reanimated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withTiming
+} from "react-native-reanimated"
+import { LabradorChefsHat } from "@butternutbox/pawprint-illustrations/breeds"
+
+type ChefDogLoaderOwnProps = {
+  size?: number
+}
+
+type ChefDogLoaderProps = ChefDogLoaderOwnProps &
+  Omit<ViewProps, keyof ChefDogLoaderOwnProps>
+
+const DEFAULT_SIZE = 240
+const TAIL_REGION = "0,0 15.5,0 15.5,22.4 12,26.5 0,26.5"
+const BODY_REGION = "15.5,0 48,0 48,48 0,48 0,26.5 12,26.5 15.5,22.4"
+const TAIL_ORIGIN = { x: 13.4 / 48 - 0.5, y: 24.6 / 48 - 0.5 }
+const TAIL_DOWN = -6
+const TAIL_UP = 14
+const WAG_DURATION = 180
+
+/**
+ * The labrador in a chef's hat wagging its tail, for indeterminate loading states.
+ *
+ * @example
+ * ```tsx
+ * import { ChefDogLoader } from "@butternutbox/pawprint-native"
+ *
+ * <ChefDogLoader />
+ * <ChefDogLoader size={160} />
+ * ```
+ *
+ * @param size - *(optional)* Width and height in points (default: 240)
+ */
+const ChefDogLoader = React.forwardRef<View, ChefDogLoaderProps>(
+  ({ size = DEFAULT_SIZE, ...rest }, ref) => {
+    const reducedMotion = useReducedMotion()
+    const rotation = useSharedValue(TAIL_DOWN)
+    const clipId = React.useId().replace(/:/g, "")
+
+    React.useEffect(() => {
+      if (reducedMotion) return
+      rotation.value = withRepeat(
+        withTiming(TAIL_UP, {
+          duration: WAG_DURATION,
+          easing: Easing.inOut(Easing.quad)
+        }),
+        -1,
+        true
+      )
+      return () => cancelAnimation(rotation)
+    }, [reducedMotion, rotation])
+
+    const originX = TAIL_ORIGIN.x * size
+    const originY = TAIL_ORIGIN.y * size
+
+    const tailStyle = useAnimatedStyle(() => ({
+      transform: [
+        { translateX: originX },
+        { translateY: originY },
+        { rotate: `${rotation.value}deg` },
+        { translateX: -originX },
+        { translateY: -originY }
+      ]
+    }))
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="progressbar"
+        accessibilityLabel="Loading"
+        {...rest}
+      >
+        <Svg width={size} height={size} viewBox="0 0 48 48">
+          <Defs>
+            <ClipPath id={`${clipId}-body`}>
+              <Polygon points={BODY_REGION} />
+            </ClipPath>
+          </Defs>
+          <G clipPath={`url(#${clipId}-body)`}>
+            <LabradorChefsHat />
+          </G>
+        </Svg>
+        <Reanimated.View
+          pointerEvents="none"
+          style={[StyleSheet.absoluteFill, tailStyle]}
+        >
+          <Svg width={size} height={size} viewBox="0 0 48 48">
+            <Defs>
+              <ClipPath id={`${clipId}-tail`}>
+                <Polygon points={TAIL_REGION} />
+              </ClipPath>
+            </Defs>
+            <G clipPath={`url(#${clipId}-tail)`}>
+              <LabradorChefsHat />
+            </G>
+          </Svg>
+        </Reanimated.View>
+      </View>
+    )
+  }
+)
+
+ChefDogLoader.displayName = "ChefDogLoader"
+
+export { ChefDogLoader }
+export type { ChefDogLoaderProps }

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

@@ -0,0 +1,2 @@
+export { ChefDogLoader } from "./ChefDogLoader"
+export type { ChefDogLoaderProps } from "./ChefDogLoader"

package/src/components/atoms/index.ts

@@ -3,6 +3,7 @@ export * from "./CarouselControls"
 export * from "./Typography"
 export * from "./Badge"
 export * from "./Button"
+export * from "./ChefDogLoader"
 export * from "./Divider"
 export * from "./Hint"
 export * from "./Icon"