@butternutbox/pawprint-native 0.23.3 → 0.24.2

package/package.json

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

package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.tsx

@@ -27,6 +27,7 @@ export type ProductDisplayCardProps = ViewProps & {
   incrementDisabled?: boolean
   decrementDisabled?: boolean
   minQuantity?: number
+  quantityStep?: number
   image?: string | React.ReactNode
   imageBackgroundColor?: string
   thumbnailWidth?: number
@@ -196,6 +197,7 @@ const StyledNoneBanner = styled(View)(({ theme }) => {
  * @param quantityBadge - *(optional)* Show a quantity badge over the image instead
  *   of the picker (renders the current `quantity`). Mutually exclusive with the
  *   quantity picker; defaults to `false`. Used on OOB recipe and Extras cards.
+ * @param quantityStep - *(optional)* Increment/decrement amount (default: 1)
  * @param image - *(optional)* Image URL string or React element
  * @param banner - *(optional)* Banner content string or React element to show below card
  * @param showBanner - *(optional)* Show/hide banner
@@ -220,6 +222,7 @@ export const ProductDisplayCard = React.forwardRef<
       incrementDisabled = false,
       decrementDisabled = false,
       minQuantity = 1,
+      quantityStep = 1,
       image,
       imageBackgroundColor,
       thumbnailWidth,
@@ -294,8 +297,12 @@ export const ProductDisplayCard = React.forwardRef<
                     handleQuantityChange(value)
                   }
                 }}
-                onIncrement={() => handleQuantityChange(quantity + 1)}
-                onDecrement={() => handleQuantityChange(quantity - 1)}
+                onIncrement={() =>
+                  handleQuantityChange(quantity + quantityStep)
+                }
+                onDecrement={() =>
+                  handleQuantityChange(quantity - quantityStep)
+                }
                 min={minQuantity}
                 accessible
                 accessibilityLabel={`Quantity: ${quantity}`}

package/src/components/molecules/Progress/Progress.stories.tsx

@@ -3,6 +3,7 @@ import { View, StyleSheet } from "react-native"
 import { Progress } from "./Progress"
 import type { ProgressProps } from "./Progress"
 import { Typography } from "../../atoms/Typography"
+import { Button } from "../../atoms/Button"
 
 export default {
   title: "Molecules/Progress",
@@ -33,6 +34,10 @@ export default {
     description: {
       control: { type: "text" },
       description: "Helper text rendered above the track (right)"
+    },
+    animate: {
+      control: { type: "boolean" },
+      description: "Ease the indicator to its new width instead of snapping"
     }
   }
 }
@@ -53,6 +58,38 @@ export const Playground = {
   )
 }
 
+const DEMO_MAX = 6
+
+export const Stepped = {
+  name: "Stepped (animation)",
+  render: () => {
+    const [step, setStep] = React.useState(1)
+
+    return (
+      <View style={styles.column}>
+        <Progress
+          value={step}
+          max={DEMO_MAX}
+          label="Animated"
+          description={`${step}/${DEMO_MAX}`}
+        />
+        <Progress
+          value={step}
+          max={DEMO_MAX}
+          animate={false}
+          label="Snapping"
+          description={`${step}/${DEMO_MAX}`}
+        />
+        <View style={styles.section}>
+          <Button onPress={() => setStep((s) => (s % DEMO_MAX) + 1)}>
+            Next step
+          </Button>
+        </View>
+      </View>
+    )
+  }
+}
+
 export const Small = {
   name: "Small",
   render: () => (

package/src/components/molecules/Progress/Progress.tsx

@@ -3,6 +3,13 @@ import { View, ViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as ProgressPrimitive from "@rn-primitives/progress"
+import Reanimated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated"
 import { Typography } from "../../atoms/Typography"
 
 type ProgressSize = "sm" | "lg"
@@ -16,11 +23,22 @@ type ProgressOwnProps = {
   label?: React.ReactNode
   description?: React.ReactNode
   getValueLabel?: (value: number, max: number) => string
+  animate?: boolean
 }
 
 export type ProgressProps = ProgressOwnProps &
   Omit<ViewProps, keyof ProgressOwnProps>
 
+/**
+ * Timing the indicator eases with. Exported so a consumer overlaying something
+ * on the track (a marker, a mascot) can run its own animation off the same
+ * config and stay pinned to the leading edge of the fill.
+ */
+export const PROGRESS_ANIMATION = {
+  duration: 450,
+  easing: Easing.inOut(Easing.cubic)
+} as const
+
 const parseTokenValue = (value: string): number => parseFloat(value)
 
 const StyledRoot = styled(View)<{ rootGap: number }>(({ rootGap }) => ({
@@ -52,7 +70,7 @@ const StyledTrack = styled(View)<{
   overflow: "hidden"
 }))
 
-const StyledIndicator = styled(View)<{
+const StyledIndicator = styled(Reanimated.View)<{
   indicatorBorderRadius: number
   indicatorBgColor: string
 }>(({ indicatorBorderRadius, indicatorBgColor }) => ({
@@ -78,6 +96,8 @@ const clamp = (value: number, min: number, max: number) =>
  * @param {React.ReactNode} [label] - Label rendered in the top-left above the track.
  * @param {React.ReactNode} [description] - Helper text rendered in the top-right above the track.
  * @param {(value: number, max: number) => string} [getValueLabel] - Accessible value label.
+ * @param {boolean} [animate=true] - Ease the indicator to its new width instead of
+ * snapping. Ignored when the OS has reduced motion enabled.
  *
  * @example
  * ```tsx
@@ -96,6 +116,7 @@ export const Progress = React.forwardRef<View, ProgressProps>(
       label,
       description,
       getValueLabel,
+      animate = true,
       ...rest
     },
     ref
@@ -117,6 +138,20 @@ export const Progress = React.forwardRef<View, ProgressProps>(
     const typographyForSize =
       size === "lg" ? typography.large : typography.small
 
+    const reducedMotion = useReducedMotion()
+    const shouldAnimate = animate && !reducedMotion
+    const fill = useSharedValue(percent)
+
+    React.useEffect(() => {
+      fill.value = shouldAnimate
+        ? withTiming(percent, PROGRESS_ANIMATION)
+        : percent
+    }, [fill, percent, shouldAnimate])
+
+    const indicatorStyle = useAnimatedStyle(() => ({
+      width: `${fill.value}%`
+    }))
+
     const trackSize = { lg: track.size.large, sm: track.size.small }[size]
     const trackHeight = parseTokenValue(trackSize.height)
     const trackMinWidth = parseTokenValue(trackSize.mindWidth)
@@ -171,7 +206,7 @@ export const Progress = React.forwardRef<View, ProgressProps>(
               <StyledIndicator
                 indicatorBorderRadius={indicatorBorderRadius}
                 indicatorBgColor={indicatorBgColor}
-                style={{ width: `${percent}%` }}
+                style={indicatorStyle}
               />
             </ProgressPrimitive.Indicator>
           </StyledTrack>

package/src/components/molecules/Progress/index.ts

@@ -1,2 +1,2 @@
-export { Progress } from "./Progress"
+export { Progress, PROGRESS_ANIMATION } from "./Progress"
 export type { ProgressProps } from "./Progress"

package/src/components/molecules/StackedNotifications/StackedNotifications.test.tsx

@@ -3,7 +3,10 @@ import { screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
 import { renderWithTheme } from "../../../test-utils"
-import { StackedNotifications } from "./StackedNotifications"
+import {
+  StackedNotifications,
+  computeBackfillIds
+} from "./StackedNotifications"
 import type { StackedNotificationItem } from "./StackedNotifications"
 
 const A: StackedNotificationItem = {
@@ -200,3 +203,57 @@ describe("StackedNotifications", () => {
     })
   })
 })
+
+describe("computeBackfillIds", () => {
+  // This decides whether a card slides in or fades in. Tested separately
+  // here because the tests above use a mocked animation library, so they
+  // can't actually check which animation a card gets.
+
+  it("flags an item that was queued but not yet visible as a backfill", () => {
+    const result = computeBackfillIds(
+      [C, B, A],
+      new Set(["a", "b", "c"]),
+      new Set(["c", "b"])
+    )
+
+    expect(result).toEqual(new Set(["a"]))
+  })
+
+  it("does not flag a genuinely new item that was never queued before", () => {
+    const result = computeBackfillIds(
+      [C, B, A],
+      new Set(["b", "c"]),
+      new Set(["c", "b"])
+    )
+
+    expect(result).toEqual(new Set())
+  })
+
+  it("does not flag an item that was already visible", () => {
+    const result = computeBackfillIds(
+      [C, B, A],
+      new Set(["a", "b", "c"]),
+      new Set(["a", "b", "c"])
+    )
+
+    expect(result).toEqual(new Set())
+  })
+
+  it("only considers items present in the current layers", () => {
+    // "a" was queued and hidden before, but it's not shown this time, so
+    // it shouldn't show up in the result at all.
+    const result = computeBackfillIds(
+      [C, B],
+      new Set(["a", "b", "c"]),
+      new Set(["c"])
+    )
+
+    expect(result).toEqual(new Set(["b"]))
+  })
+
+  it("flags nothing on an initial mount, where nothing was previously queued", () => {
+    const result = computeBackfillIds([C, B, A], new Set(), new Set())
+
+    expect(result).toEqual(new Set())
+  })
+})

package/src/components/molecules/StackedNotifications/StackedNotifications.tsx

@@ -44,15 +44,16 @@ const SPRING_CONFIG = { damping: 20, stiffness: 260, mass: 0.5 }
 const CARD_ENTERING = FadeInDown.duration(200).easing(Easing.inOut(Easing.quad))
 const CARD_EXITING = FadeOutDown.duration(200)
 
-// Bottom-anchored so scaling never moves a card's bottom edge — only
-// translateY does. That's what makes the peek reveal an exact, constant
-// distance regardless of a card's own message length.
 const CARD_BASE_STYLE = {
   position: "absolute" as const,
   bottom: 0,
   left: 0,
-  right: 0,
-  transformOrigin: "50% 100%"
+  right: 0
+}
+
+const DEPTH_LAYER_STYLE = {
+  transformOrigin: "50% 100%" as const,
+  width: "100%" as const
 }
 
 // Floats over content pinned to the bottom. `box-none` lets touches pass
@@ -79,11 +80,35 @@ const StyledStack = styled(View)({
   width: "100%"
 })
 
+/**
+ * Works out which cards are only now becoming visible because they were
+ * already queued (a "backfill"), versus cards that are genuinely brand new.
+ * A backfilled card should slide into place; a brand new one should fade in.
+ *
+ * This lives outside the component as its own function so it can be tested
+ * directly — the animation library is mocked in tests, so testing this logic
+ * through the rendered component wouldn't actually prove it works.
+ */
+export const computeBackfillIds = (
+  layers: StackedNotificationItem[],
+  prevActiveIds: Set<string>,
+  prevLayerIds: Set<string>
+): Set<string> => {
+  const ids = new Set<string>()
+  layers.forEach((item) => {
+    if (prevActiveIds.has(item.id) && !prevLayerIds.has(item.id)) {
+      ids.add(item.id)
+    }
+  })
+  return ids
+}
+
 type StackedCardProps = {
   item: StackedNotificationItem
   depth: number
   revealStep: number
   onDismiss?: (id: string) => void
+  isBackfill: boolean
 }
 
 /**
@@ -97,15 +122,32 @@ const StackedCard = ({
   item,
   depth,
   revealStep,
-  onDismiss
+  onDismiss,
+  isBackfill
 }: StackedCardProps) => {
-  const depthSV = useSharedValue(depth)
+  // Remember whether this card was a backfill when it first appeared, and
+  // ignore any later changes to the `isBackfill` prop. The parent only
+  // reports `isBackfill: true` for the one render where the card shows up —
+  // if we kept using the live value, the card's animation would stop
+  // partway through as soon as that value flips back to false.
+  const isBackfillRef = React.useRef(isBackfill)
+  const wasBackfill = isBackfillRef.current
+
+  const depthSV = useSharedValue(wasBackfill ? depth + 1 : depth)
+  const opacitySV = useSharedValue(wasBackfill ? 0 : 1)
 
   React.useEffect(() => {
     depthSV.value = withSpring(depth, SPRING_CONFIG)
   }, [depth, depthSV])
 
-  const animatedStyle = useAnimatedStyle(() => ({
+  // Only a backfilled card needs to fade in here. A brand new card already
+  // fades in via the outer view's `entering` animation instead.
+  React.useEffect(() => {
+    if (wasBackfill) opacitySV.value = withSpring(1, SPRING_CONFIG)
+  }, [])
+
+  const depthStyle = useAnimatedStyle(() => ({
+    opacity: opacitySV.value,
     transform: [
       { translateY: depthSV.value * revealStep },
       { scale: 1 - depthSV.value * SCALE_STEP }
@@ -116,20 +158,22 @@ const StackedCard = ({
 
   return (
     <Reanimated.View
-      entering={CARD_ENTERING}
+      entering={wasBackfill ? undefined : CARD_ENTERING}
       exiting={CARD_EXITING}
       pointerEvents={isFront ? "auto" : "none"}
       accessibilityElementsHidden={!isFront}
       importantForAccessibility={isFront ? "auto" : "no-hide-descendants"}
-      style={[CARD_BASE_STYLE, { zIndex: -depth }, animatedStyle]}
+      style={[CARD_BASE_STYLE, { zIndex: -depth }]}
     >
-      <Notification
-        variant="toast"
-        type={item.type}
-        onClose={isFront ? () => onDismiss?.(item.id) : undefined}
-      >
-        {item.message}
-      </Notification>
+      <Reanimated.View style={[DEPTH_LAYER_STYLE, depthStyle]}>
+        <Notification
+          variant="toast"
+          type={item.type}
+          onClose={isFront ? () => onDismiss?.(item.id) : undefined}
+        >
+          {item.message}
+        </Notification>
+      </Reanimated.View>
     </Reanimated.View>
   )
 }
@@ -207,6 +251,27 @@ export const StackedNotifications = React.forwardRef<
     [activeItems]
   )
 
+  // Keep track of which ids were queued, and which were actually shown,
+  // last time we rendered. That's how we tell "already queued, only now
+  // shown" apart from "brand new" below.
+  const prevActiveIdsRef = React.useRef<Set<string>>(new Set())
+  const prevLayerIdsRef = React.useRef<Set<string>>(new Set())
+
+  const backfillIds = React.useMemo(
+    () =>
+      computeBackfillIds(
+        layers,
+        prevActiveIdsRef.current,
+        prevLayerIdsRef.current
+      ),
+    [layers]
+  )
+
+  React.useEffect(() => {
+    prevActiveIdsRef.current = new Set(activeItems.map((item) => item.id))
+    prevLayerIdsRef.current = new Set(layers.map((item) => item.id))
+  }, [activeItems, layers])
+
   const handleDismiss = (id: string) => {
     setDismissed((prev) => {
       const next = new Set(prev)
@@ -235,6 +300,7 @@ export const StackedNotifications = React.forwardRef<
             depth={depth}
             revealStep={peekStep}
             onDismiss={handleDismiss}
+            isBackfill={backfillIds.has(item.id)}
           />
         ))}
       </StyledStack>