@butternutbox/pawprint-native 1.1.2 → 1.2.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/index.ts

@@ -26,3 +26,4 @@ export * from "./Countdown"
 export * from "./ProductListingCard"
 export * from "./ProductDisplayCard"
 export * from "./TabNavigation"
+export * from "./FloatingActionButton"