@butternutbox/pawprint-native 1.1.3 → 1.3.0

package/src/components/molecules/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,445 @@
+import React from "react"
+import { LayoutChangeEvent, StyleSheet, View, ViewProps } from "react-native"
+import Svg, {
+  Defs,
+  LinearGradient as SvgLinearGradient,
+  Rect,
+  Stop
+} from "react-native-svg"
+import Reanimated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming
+} from "react-native-reanimated"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import {
+  Close,
+  Gift,
+  KeyboardArrowRight,
+  KeyboardArrowUp
+} from "@butternutbox/pawprint-icons/core"
+import { Icon, type PawprintIcon } from "../../atoms/Icon"
+import { IconButton, type IconButtonVariant } from "../../atoms/IconButton"
+import { Link } from "../../atoms/Link"
+import { Typography } from "../../atoms/Typography"
+
+type FloatingActionButtonVariant = "primary" | "secondary"
+type FloatingActionButtonIconButtonIcon = "chevronUp" | "chevronRight" | "close"
+type FloatingActionButtonAnimation = "shine" | "nudge"
+
+type FloatingActionButtonBaseProps = {
+  variant?: FloatingActionButtonVariant
+  icon?: PawprintIcon
+  children: React.ReactNode
+  linkLabel: string
+  animation?: FloatingActionButtonAnimation
+}
+
+// The link is mandatory, so at least one of `linkHref` / `onLinkPress` is
+// required.
+type FloatingActionButtonLinkProps =
+  | { linkHref: string; onLinkPress?: () => void }
+  | { linkHref?: string; onLinkPress: () => void }
+
+type FloatingActionButtonIconButtonProps = {
+  iconButtonIcon: FloatingActionButtonIconButtonIcon
+  iconButtonLabel: string
+  iconButtonVariant?: IconButtonVariant
+  onIconButtonPress?: () => void
+}
+
+type FloatingActionButtonOwnProps = FloatingActionButtonBaseProps &
+  FloatingActionButtonLinkProps &
+  FloatingActionButtonIconButtonProps
+
+export type FloatingActionButtonProps = FloatingActionButtonOwnProps &
+  Omit<ViewProps, keyof FloatingActionButtonBaseProps | "iconButtonIcon">
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const ICON_BUTTON_CONFIG = {
+  chevronUp: { icon: KeyboardArrowUp, defaultVariant: "filled" },
+  chevronRight: { icon: KeyboardArrowRight, defaultVariant: "filled" },
+  close: { icon: Close, defaultVariant: "text" }
+} as const
+
+// TODO: Add token — no motion tokens exist yet
+const ANIMATION_DELAY = 1500
+const ANIMATION_ITERATIONS = 3
+const SHINE_SWEEP = 1100
+const SHINE_REST = 4900
+const SHINE_BAND_RATIO = 0.4
+// TODO: Add token — highlight opacity
+const SHINE_OPACITY = 0.55
+const NUDGE_STEP = 200
+const NUDGE_REST = 3200
+const NUDGE_DISTANCE = 3
+
+const ShineOverlay = ({
+  radius,
+  highlight
+}: {
+  radius: number
+  highlight: string
+}) => {
+  const reducedMotion = useReducedMotion()
+  const [width, setWidth] = React.useState(0)
+  const progress = useSharedValue(0)
+  const bandWidth = width * SHINE_BAND_RATIO
+
+  React.useEffect(() => {
+    if (reducedMotion || !width) return
+    progress.value = withDelay(
+      ANIMATION_DELAY,
+      withRepeat(
+        withSequence(
+          withTiming(1, {
+            duration: SHINE_SWEEP,
+            easing: Easing.inOut(Easing.ease)
+          }),
+          withDelay(SHINE_REST, withTiming(0, { duration: 0 }))
+        ),
+        ANIMATION_ITERATIONS
+      )
+    )
+  }, [progress, reducedMotion, width])
+
+  const bandStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX:
+          -bandWidth * 1.5 + progress.value * (width + bandWidth * 2.5)
+      },
+      { skewX: "-20deg" }
+    ]
+  }))
+
+  if (reducedMotion) return null
+
+  return (
+    <View
+      pointerEvents="none"
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      onLayout={(e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width)}
+      style={[
+        StyleSheet.absoluteFill,
+        { borderRadius: radius, overflow: "hidden" }
+      ]}
+    >
+      {width > 0 && (
+        <Reanimated.View
+          style={[
+            { position: "absolute", top: 0, bottom: 0, width: bandWidth },
+            bandStyle
+          ]}
+        >
+          <Svg width="100%" height="100%">
+            <Defs>
+              <SvgLinearGradient id="fabShine" x1="0" y1="0" x2="1" y2="0">
+                <Stop offset="0" stopColor={highlight} stopOpacity={0} />
+                <Stop
+                  offset="0.5"
+                  stopColor={highlight}
+                  stopOpacity={SHINE_OPACITY}
+                />
+                <Stop offset="1" stopColor={highlight} stopOpacity={0} />
+              </SvgLinearGradient>
+            </Defs>
+            <Rect width="100%" height="100%" fill="url(#fabShine)" />
+          </Svg>
+        </Reanimated.View>
+      )}
+    </View>
+  )
+}
+
+// Nudge variants are passed to IconButton as its `icon`, so only the glyph
+// moves (matching web) while the button itself stays put. Created once at module
+// level so the components stay stable across renders.
+const createNudgingIcon = (
+  IconComponent: PawprintIcon,
+  axis: "translateX" | "translateY",
+  direction: 1 | -1
+): PawprintIcon => {
+  const NudgingIcon = (props: React.ComponentProps<PawprintIcon>) => {
+    const reducedMotion = useReducedMotion()
+    const offset = useSharedValue(0)
+
+    React.useEffect(() => {
+      if (reducedMotion) return
+      const step = (to: number) =>
+        withTiming(to, {
+          duration: NUDGE_STEP,
+          easing: Easing.inOut(Easing.ease)
+        })
+      const distance = NUDGE_DISTANCE * direction
+      offset.value = withDelay(
+        ANIMATION_DELAY,
+        withRepeat(
+          withSequence(
+            step(distance),
+            step(0),
+            step(distance),
+            step(0),
+            withDelay(NUDGE_REST, withTiming(0, { duration: 0 }))
+          ),
+          ANIMATION_ITERATIONS
+        )
+      )
+    }, [offset, reducedMotion])
+
+    const nudgeStyle = useAnimatedStyle(() =>
+      axis === "translateX"
+        ? { transform: [{ translateX: offset.value }] }
+        : { transform: [{ translateY: offset.value }] }
+    )
+
+    return (
+      <Reanimated.View style={nudgeStyle}>
+        <IconComponent {...props} />
+      </Reanimated.View>
+    )
+  }
+  NudgingIcon.displayName = `Nudging(${IconComponent.displayName ?? "Icon"})`
+  return NudgingIcon
+}
+
+const NUDGE_ICONS = {
+  chevronUp: createNudgingIcon(KeyboardArrowUp, "translateY", -1),
+  chevronRight: createNudgingIcon(KeyboardArrowRight, "translateX", 1)
+} as const
+
+const StyledRoot = styled(View)<{
+  rootGap: number
+  rootPaddingH: number
+  rootPaddingV: number
+  rootBgColor: string
+  rootBorderWidth: number
+  rootBorderColor: string
+  rootBorderRadius: number
+  rootBoxShadow: string
+}>(
+  ({
+    rootGap,
+    rootPaddingH,
+    rootPaddingV,
+    rootBgColor,
+    rootBorderWidth,
+    rootBorderColor,
+    rootBorderRadius,
+    rootBoxShadow
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    gap: rootGap,
+    paddingHorizontal: rootPaddingH,
+    paddingVertical: rootPaddingV,
+    backgroundColor: rootBgColor,
+    borderWidth: rootBorderWidth,
+    borderColor: rootBorderColor,
+    borderRadius: rootBorderRadius,
+    boxShadow: rootBoxShadow
+  })
+)
+
+const StyledIconContainer = styled(View)<{
+  containerSize: number
+  containerRadius: number
+  containerBgColor: string
+}>(({ containerSize, containerRadius, containerBgColor }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: containerSize,
+  height: containerSize,
+  borderRadius: containerRadius,
+  backgroundColor: containerBgColor
+}))
+
+const StyledContent = styled(View)({
+  flex: 1,
+  minWidth: 0,
+  alignItems: "flex-start",
+  justifyContent: "center"
+})
+
+/**
+ * Floating pill that surfaces a short message with a link and an
+ * icon button. Used for persistent prompts such as offers and
+ * reminders.
+ *
+ * The component does not position itself — the consumer is responsible for
+ * placing it (e.g. `position: "absolute"` at the bottom right) so it can avoid
+ * other floating elements on the screen. It fills the width of its container.
+ *
+ * The icon button is always size `md` and limited to three icons: `chevronUp`,
+ * `chevronRight` and `close`. Its style defaults to the Figma pairing —
+ * `filled` (primary) for the chevrons and `text` for `close` — and can be
+ * overridden with `iconButtonVariant`.
+ *
+ * Note: Unlike the web version, handlers are `onLinkPress` and
+ * `onIconButtonPress` (web: `onLinkClick` / `onIconButtonClick`). The shadow
+ * uses `boxShadow`, which requires React Native 0.76+ (New Architecture).
+ *
+ * @param {"primary" | "secondary"} [variant="primary"] - Colour scheme.
+ *   `primary` is pink with a white icon container; `secondary` is white with a
+ *   cream icon container.
+ * @param {PawprintIcon} [icon=Gift] - Icon shown in the circular container on
+ *   the left. Rendered at size `xl` in the primary icon colour.
+ * @param {React.ReactNode} children - Message copy. Nest a bold `Typography`
+ *   to emphasise part of it.
+ * @param {string} linkLabel - Link text shown below the message. Use "Close"
+ *   to dismiss, or e.g. "See more" when the icon button is `close`.
+ * @param {string} [linkHref] - **(required without `onLinkPress`)** URL opened
+ *   via `Linking` when pressed.
+ * @param {() => void} [onLinkPress] - **(required without `linkHref`)** Link
+ *   press handler, e.g. to dismiss, navigate to a screen or open a Modal or
+ *   Drawer. Takes precedence over `linkHref`.
+ * @param {"shine" | "nudge"} [animation] - Optional attention animation, off
+ *   by default. Runs 3 times after a short delay, then stops, and is disabled
+ *   when the user prefers reduced motion. `shine` sweeps a soft highlight
+ *   across the pill; `nudge` moves the chevron towards its direction (no effect
+ *   with `close`).
+ * @param {"chevronUp" | "chevronRight" | "close"} iconButtonIcon - Icon button
+ *   on the right.
+ * @param {"filled" | "outlined" | "text"} [iconButtonVariant] - Icon button
+ *   style. Defaults to `filled` for `chevronUp` / `chevronRight` and `text`
+ *   for `close`.
+ * @param {string} iconButtonLabel - Accessible label for the icon button.
+ * @param {() => void} [onIconButtonPress] - Icon button press handler.
+ *
+ * @example
+ * ```tsx
+ * import { FloatingActionButton, Typography } from "@butternutbox/pawprint-native"
+ *
+ * <FloatingActionButton
+ *   variant="primary"
+ *   linkLabel="Close"
+ *   onLinkPress={dismiss}
+ *   iconButtonIcon="chevronUp"
+ *   iconButtonLabel="View offer"
+ *   onIconButtonPress={openDrawer}
+ * >
+ *   <Typography size="lg" weight="bold">
+ *     Free
+ *   </Typography>{" "}
+ *   gift in your next box
+ * </FloatingActionButton>
+ * ```
+ */
+export const FloatingActionButton = React.forwardRef<
+  View,
+  FloatingActionButtonProps
+>(
+  (
+    {
+      variant = "primary",
+      icon = Gift,
+      children,
+      linkLabel,
+      linkHref,
+      onLinkPress,
+      animation,
+      iconButtonIcon,
+      iconButtonLabel,
+      iconButtonVariant,
+      onIconButtonPress,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { floatingActionButton } = theme.tokens.components
+    const { colour, dimensions } = theme.tokens.semantics
+    const { shadow } = colour
+    const iconButton = ICON_BUTTON_CONFIG[iconButtonIcon]
+
+    const iconButtonElement = (
+      <IconButton
+        icon={
+          animation === "nudge" && iconButtonIcon !== "close"
+            ? NUDGE_ICONS[iconButtonIcon]
+            : iconButton.icon
+        }
+        variant={iconButtonVariant ?? iconButton.defaultVariant}
+        size="md"
+        aria-label={iconButtonLabel}
+        onPress={onIconButtonPress}
+      />
+    )
+
+    return (
+      <StyledRoot
+        ref={ref}
+        rootGap={parseTokenValue(floatingActionButton.spacing.gap)}
+        rootPaddingH={parseTokenValue(
+          floatingActionButton.spacing.horizontalPadding
+        )}
+        rootPaddingV={parseTokenValue(
+          floatingActionButton.spacing.verticalPadding
+        )}
+        rootBgColor={floatingActionButton.colour.background[variant]}
+        rootBorderWidth={parseTokenValue(
+          floatingActionButton.borderWidth.default
+        )}
+        rootBorderColor={floatingActionButton.colour.border[variant]}
+        rootBorderRadius={parseTokenValue(
+          floatingActionButton.borderRadius.default
+        )}
+        rootBoxShadow={`${shadow.md.offsetX} ${shadow.md.offsetY} ${shadow.md.blur} ${shadow.md.spread} ${shadow.md.color}`}
+        {...rest}
+      >
+        <StyledIconContainer
+          containerSize={parseTokenValue(
+            theme.tokens.primitives.dimension.sizing["44"]
+          )}
+          containerRadius={parseTokenValue(dimensions.borderRadius.round)}
+          containerBgColor={
+            variant === "secondary"
+              ? colour.background.container.secondary
+              : colour.background.container.default
+          }
+        >
+          <Icon icon={icon} size="xl" colour="primary" />
+        </StyledIconContainer>
+        <StyledContent>
+          <Typography variant="body" size="lg" weight="medium">
+            {children}
+          </Typography>
+          <Link
+            href={linkHref}
+            onPress={onLinkPress}
+            size="md"
+            weight="medium"
+            {...(!linkHref && { accessibilityRole: "button" as const })}
+          >
+            {linkLabel}
+          </Link>
+        </StyledContent>
+        {iconButtonElement}
+        {animation === "shine" && (
+          <ShineOverlay
+            radius={parseTokenValue(floatingActionButton.borderRadius.default)}
+            highlight={theme.tokens.primitives.colour.system.neutral["1"]}
+          />
+        )}
+      </StyledRoot>
+    )
+  }
+)
+
+FloatingActionButton.displayName = "FloatingActionButton"
+
+export type {
+  FloatingActionButtonVariant,
+  FloatingActionButtonIconButtonIcon,
+  FloatingActionButtonAnimation
+}

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

@@ -0,0 +1,7 @@
+export { FloatingActionButton } from "./FloatingActionButton"
+export type {
+  FloatingActionButtonProps,
+  FloatingActionButtonVariant,
+  FloatingActionButtonIconButtonIcon,
+  FloatingActionButtonAnimation
+} from "./FloatingActionButton"

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

@@ -1,14 +1,14 @@
-import React, { useEffect, useRef, useState } from "react"
+import React from "react"
 import { View, StyleSheet } from "react-native"
 import { Menu as MenuIcon } from "@butternutbox/pawprint-icons/core"
 import { Menu } from "./Menu"
+import { useMenuTrigger } from "./hooks"
 import { IconButton } from "../../atoms/IconButton"
 
 export default {
   title: "Molecules/Menu",
   component: Menu,
   argTypes: {
-    open: { control: "boolean", description: "Whether the menu is visible" },
     align: {
       control: "select",
       options: ["left", "right"],
@@ -28,58 +28,31 @@ const styles = StyleSheet.create({
   }
 })
 
-// `anchorOffset` is a *window* coordinate — the distance from the top of the
-// screen to the bar's bottom edge. In a real app the header sits at the top of
-// the screen, so this is roughly the bar's height. In Storybook the bar sits
-// lower in the canvas, so we measure its actual on-screen position; otherwise
-// the card drops from the wrong Y and looks offset from the bar.
-const useBarAnchor = () => {
-  const ref = useRef<View>(null)
-  const [anchorOffset, setAnchorOffset] = useState(0)
-
-  const measure = () =>
-    ref.current?.measureInWindow((_x, y, _w, height) =>
-      setAnchorOffset(y + height)
-    )
-
-  return { ref, anchorOffset, measure }
-}
-
 // --- Playground ---
-// The `open` control seeds the initial state; the burger reopens it and an
-// outside tap (or the OS back gesture) dismisses via `onClose`. Without local
-// state the menu would be stuck open, since the RN Modal overlays Storybook's
-// own controls panel and blocks you from flipping the `open` toggle back off.
+// Tap the burger to open; an outside tap (or the OS back gesture) dismisses via
+// `onClose`. The menu is driven by local state rather than an `open` control
+// because the RN Modal overlays Storybook's controls panel, which would leave
+// it stuck open.
 
 export const Playground = {
   args: {
-    open: true,
     align: "right",
-    width: 360
+    width: 280
   },
   render: (args: React.ComponentProps<typeof Menu>) => {
-    const [open, setOpen] = useState(args.open)
-    const { ref, anchorOffset, measure } = useBarAnchor()
-
-    // Re-sync when the `open` control is toggled in the Storybook panel.
-    useEffect(() => setOpen(args.open), [args.open])
+    const { triggerRef, open, menuProps } = useMenuTrigger()
 
     return (
-      <View>
-        <View ref={ref} style={styles.bar} onLayout={measure}>
+      <View style={styles.bar}>
+        <View ref={triggerRef} collapsable={false}>
           <IconButton
             icon={MenuIcon}
             variant="text"
             aria-label="Open menu"
-            onPress={() => setOpen(true)}
+            onPress={open}
           />
         </View>
-        <Menu
-          {...args}
-          open={open}
-          onClose={() => setOpen(false)}
-          anchorOffset={anchorOffset}
-        >
+        <Menu {...args} {...menuProps}>
           <Menu.Item onPress={() => {}}>Option 1</Menu.Item>
           <Menu.Item onPress={() => {}}>Option 2</Menu.Item>
           <Menu.Item variant="destructive" onPress={() => {}}>
@@ -99,30 +72,21 @@ export const Playground = {
 export const Interactive = {
   name: "Interactive / Header trigger",
   render: () => {
-    const [open, setOpen] = useState(false)
-    const { ref, anchorOffset, measure } = useBarAnchor()
+    const { triggerRef, open, close, menuProps } = useMenuTrigger()
 
     return (
-      <View>
-        <View ref={ref} style={styles.bar} onLayout={measure}>
+      <View style={styles.bar}>
+        <View ref={triggerRef} collapsable={false}>
           <IconButton
             icon={MenuIcon}
             variant="text"
             aria-label="Open menu"
-            onPress={() => setOpen(true)}
+            onPress={open}
           />
         </View>
-        <Menu
-          open={open}
-          onClose={() => setOpen(false)}
-          anchorOffset={anchorOffset}
-        >
-          <Menu.Item onPress={() => setOpen(false)}>Option 1</Menu.Item>
-          <Menu.Item
-            variant="destructive"
-            divider={false}
-            onPress={() => setOpen(false)}
-          >
+        <Menu {...menuProps}>
+          <Menu.Item onPress={close}>Option 1</Menu.Item>
+          <Menu.Item variant="destructive" divider={false} onPress={close}>
             Option 2
           </Menu.Item>
         </Menu>

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

@@ -1,4 +1,5 @@
 import React from "react"
+import { Dimensions } from "react-native"
 import { screen, fireEvent } from "@testing-library/react"
 import { describe, it, expect, vi } from "vitest"
 import { renderWithTheme } from "../../../test-utils"
@@ -15,7 +16,11 @@ const BasicMenu = ({
   onDiscounts?: () => void
   onLogOut?: () => void
 }) => (
-  <Menu open={open} onClose={onClose} anchorOffset={80}>
+  <Menu
+    open={open}
+    onClose={onClose}
+    anchor={{ x: 200, y: 20, width: 120, height: 40 }}
+  >
     <Menu.Item onPress={onDiscounts}>Discount codes</Menu.Item>
     <Menu.Item variant="destructive" onPress={onLogOut}>
       Log out
@@ -36,12 +41,61 @@ describe("Menu", () => {
       expect(screen.getByText("Log out")).toBeInTheDocument()
     })
 
+    it("still renders with the deprecated anchorOffset", () => {
+      renderWithTheme(
+        <Menu open onClose={() => {}} anchorOffset={80}>
+          <Menu.Item onPress={() => {}}>Discount codes</Menu.Item>
+        </Menu>
+      )
+      expect(screen.getByText("Discount codes")).toBeInTheDocument()
+    })
+
     it("exposes each row as a menuitem", () => {
       renderWithTheme(<BasicMenu />)
       expect(screen.getAllByRole("menuitem")).toHaveLength(2)
     })
   })
 
+  describe("positioning", () => {
+    it("hangs the card below the trigger, right edges aligned", () => {
+      renderWithTheme(<BasicMenu />)
+      const anchor = screen.getByRole("menu").parentElement!
+      expect(anchor.style.top).toBe("68px")
+      expect(anchor.style.right).toBe(
+        `${Dimensions.get("window").width - 320}px`
+      )
+    })
+
+    it("keeps its position while closing after the anchor is cleared", () => {
+      const anchor = { x: 200, y: 20, width: 120, height: 40 }
+      const { rerender } = renderWithTheme(
+        <Menu open onClose={() => {}} anchor={anchor}>
+          <Menu.Item onPress={() => {}}>Discount codes</Menu.Item>
+        </Menu>
+      )
+      rerender(
+        <Menu open onClose={() => {}}>
+          <Menu.Item onPress={() => {}}>Discount codes</Menu.Item>
+        </Menu>
+      )
+      expect(screen.getByRole("menu").parentElement!.style.top).toBe("68px")
+    })
+
+    it("lines up left edges when aligned left", () => {
+      renderWithTheme(
+        <Menu
+          open
+          onClose={() => {}}
+          align="left"
+          anchor={{ x: 24, y: 20, width: 160, height: 40 }}
+        >
+          <Menu.Item onPress={() => {}}>Discount codes</Menu.Item>
+        </Menu>
+      )
+      expect(screen.getByRole("menu").parentElement!.style.left).toBe("24px")
+    })
+  })
+
   describe("interaction", () => {
     it("fires an item's onPress when tapped", () => {
       const onLogOut = vi.fn()