@butternutbox/pawprint-native 0.14.0 → 0.15.0

package/package.json

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

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

@@ -0,0 +1,132 @@
+import React, { useEffect, useRef, useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { Menu as MenuIcon } from "@butternutbox/pawprint-icons/core"
+import { Menu } from "./Menu"
+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"],
+      description: "Which edge the card aligns to"
+    },
+    width: { control: "number", description: "Card width in px" }
+  }
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    height: 64,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    paddingHorizontal: 8
+  }
+})
+
+// `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.
+
+export const Playground = {
+  args: {
+    open: true,
+    align: "right",
+    width: 360
+  },
+  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])
+
+    return (
+      <View>
+        <View ref={ref} style={styles.bar} onLayout={measure}>
+          <IconButton
+            icon={MenuIcon}
+            variant="text"
+            aria-label="Open menu"
+            onPress={() => setOpen(true)}
+          />
+        </View>
+        <Menu
+          {...args}
+          open={open}
+          onClose={() => setOpen(false)}
+          anchorOffset={anchorOffset}
+        >
+          <Menu.Item onPress={() => {}}>Option 1</Menu.Item>
+          <Menu.Item onPress={() => {}}>Option 2</Menu.Item>
+          <Menu.Item variant="destructive" onPress={() => {}}>
+            Option 3
+          </Menu.Item>
+          <Menu.Item variant="destructive" divider={false} onPress={() => {}}>
+            Option 4
+          </Menu.Item>
+        </Menu>
+      </View>
+    )
+  }
+}
+
+// --- Interactive (tap the burger) ---
+
+export const Interactive = {
+  name: "Interactive / Header trigger",
+  render: () => {
+    const [open, setOpen] = useState(false)
+    const { ref, anchorOffset, measure } = useBarAnchor()
+
+    return (
+      <View>
+        <View ref={ref} style={styles.bar} onLayout={measure}>
+          <IconButton
+            icon={MenuIcon}
+            variant="text"
+            aria-label="Open menu"
+            onPress={() => setOpen(true)}
+          />
+        </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)}
+          >
+            Option 2
+          </Menu.Item>
+        </Menu>
+      </View>
+    )
+  }
+}

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

@@ -0,0 +1,60 @@
+import React from "react"
+import { screen, fireEvent } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Menu } from "./Menu"
+
+const BasicMenu = ({
+  open = true,
+  onClose = () => {},
+  onDiscounts = () => {},
+  onLogOut = () => {}
+}: {
+  open?: boolean
+  onClose?: () => void
+  onDiscounts?: () => void
+  onLogOut?: () => void
+}) => (
+  <Menu open={open} onClose={onClose} anchorOffset={80}>
+    <Menu.Item onPress={onDiscounts}>Discount codes</Menu.Item>
+    <Menu.Item variant="destructive" onPress={onLogOut}>
+      Log out
+    </Menu.Item>
+  </Menu>
+)
+
+describe("Menu", () => {
+  describe("rendering", () => {
+    it("does not render items when closed", () => {
+      renderWithTheme(<BasicMenu open={false} />)
+      expect(screen.queryByText("Discount codes")).not.toBeInTheDocument()
+    })
+
+    it("renders every item when open", () => {
+      renderWithTheme(<BasicMenu />)
+      expect(screen.getByText("Discount codes")).toBeInTheDocument()
+      expect(screen.getByText("Log out")).toBeInTheDocument()
+    })
+
+    it("exposes each row as a menuitem", () => {
+      renderWithTheme(<BasicMenu />)
+      expect(screen.getAllByRole("menuitem")).toHaveLength(2)
+    })
+  })
+
+  describe("interaction", () => {
+    it("fires an item's onPress when tapped", () => {
+      const onLogOut = vi.fn()
+      renderWithTheme(<BasicMenu onLogOut={onLogOut} />)
+      fireEvent.click(screen.getByText("Log out"))
+      expect(onLogOut).toHaveBeenCalledTimes(1)
+    })
+
+    it("does not close when a row is tapped (consumer decides)", () => {
+      const onClose = vi.fn()
+      renderWithTheme(<BasicMenu onClose={onClose} />)
+      fireEvent.click(screen.getByText("Discount codes"))
+      expect(onClose).not.toHaveBeenCalled()
+    })
+  })
+})

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

@@ -0,0 +1,143 @@
+import React from "react"
+import { Modal, Pressable, View } from "react-native"
+import styled from "@emotion/native"
+import { MenuItem } from "./MenuItem"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+export type MenuAlign = "left" | "right"
+
+export type MenuProps = {
+  /** Whether the menu is visible. */
+  open: boolean
+  /** Called when the user taps outside the card or dismisses via the OS. */
+  onClose: () => void
+  /**
+   * Distance, in px, from the top of the screen to where the menu drops from —
+   * typically the bottom edge of the bar/header the menu hangs beneath, so the
+   * card opens flush below it.
+   */
+  anchorOffset?: number
+  /** Which edge the card aligns to. Defaults to `right`. */
+  align?: MenuAlign
+  /** Card width in px. Defaults to 360 (capped at 90% of the screen). */
+  width?: number
+  /** Accessibility label for the outside-tap dismiss layer. */
+  closeAccessibilityLabel?: string
+  /** `Menu.Item` rows. */
+  children: React.ReactNode
+}
+
+// Full-screen, transparent tap-catcher that dismisses on any outside press.
+// Sits beneath the card so the card renders over it. The page is left
+// undarkened — matching web and the designs — so this layer is invisible and
+// only exists to capture outside taps.
+const DismissLayer = styled(Pressable)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+})
+
+// Positions the card against the aligned edge, flush beneath the anchor
+// (`top` set inline to `anchorOffset`).
+const Anchor = styled(View)<{ align: MenuAlign }>(({ theme, align }) => {
+  const inset = parseTokenValue(theme.tokens.semantics.dimensions.spacing.md)
+
+  return {
+    position: "absolute",
+    ...(align === "right" ? { right: inset } : { left: inset })
+  }
+})
+
+// A Pressable (rather than a View) so taps on the card's own chrome are
+// captured and don't fall through to the DismissLayer, which would dismiss it.
+const Card = styled(Pressable)<{ width: number }>(({ theme, width }) => {
+  const { borderRadius } = theme.tokens.semantics.dimensions
+  const { shadow, background } = theme.tokens.semantics.colour
+
+  return {
+    width,
+    maxWidth: "90%",
+    borderRadius: parseTokenValue(borderRadius.md),
+    overflow: "hidden",
+    backgroundColor: background.surface.default,
+    // Shadow token colour carries its own alpha, so opacity stays at 1.
+    shadowColor: shadow.md.color,
+    shadowOffset: {
+      width: parseTokenValue(shadow.md.offsetX),
+      height: parseTokenValue(shadow.md.offsetY)
+    },
+    shadowOpacity: 1,
+    shadowRadius: parseTokenValue(shadow.md.blur),
+    elevation: 8
+  }
+})
+
+const MenuRoot = ({
+  open,
+  onClose,
+  anchorOffset = 0,
+  align = "right",
+  width = 360,
+  closeAccessibilityLabel = "Close menu",
+  children
+}: MenuProps) => {
+  return (
+    <Modal
+      visible={open}
+      transparent
+      statusBarTranslucent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <DismissLayer
+        onPress={onClose}
+        accessible={false}
+        accessibilityLabel={closeAccessibilityLabel}
+      />
+      <Anchor align={align} style={{ top: anchorOffset }}>
+        <Card
+          width={width}
+          onPress={() => {}}
+          accessible={false}
+          accessibilityRole="menu"
+        >
+          {children}
+        </Card>
+      </Anchor>
+    </Modal>
+  )
+}
+
+MenuRoot.displayName = "Menu"
+
+/**
+ * A dropdown menu that expands beneath an anchor (typically a header/bar).
+ * Tapping outside the card dismisses it; the page behind is left undarkened.
+ * The consumer owns open/close state and supplies the rows as `Menu.Item`
+ * children; the app-specific content stays at the call site.
+ *
+ * Pass `anchorOffset` (the anchor bar's bottom edge in window coordinates) so
+ * the card drops just below it.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ * const [barHeight, setBarHeight] = useState(0)
+ *
+ * <View onLayout={(e) => setBarHeight(e.nativeEvent.layout.height)}>
+ *   <Pressable onPress={() => setOpen(true)}>...</Pressable>
+ * </View>
+ * <Menu open={open} onClose={() => setOpen(false)} anchorOffset={barHeight}>
+ *   <Menu.Item onPress={onDiscounts}>Discount codes</Menu.Item>
+ *   <Menu.Item variant="destructive" divider={false} onPress={onLogOut}>
+ *     Log out
+ *   </Menu.Item>
+ * </Menu>
+ * ```
+ */
+export const Menu = Object.assign(MenuRoot, {
+  Item: MenuItem
+})

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

@@ -0,0 +1,103 @@
+import React from "react"
+import { Pressable, type PressableProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+export type MenuItemVariant = "action" | "destructive"
+
+type MenuItemOwnProps = {
+  /**
+   * `action` renders the label in the brand action colour, `destructive` in
+   * the error colour (e.g. "Log out"). Defaults to `action`.
+   */
+  variant?: MenuItemVariant
+  onPress: () => void
+  /** The label. A string is rendered with the row's own Typography. */
+  children: React.ReactNode
+  /**
+   * Whether to render a divider beneath the row. Defaults to `true`; set
+   * `false` on the last row so the border doesn't sit against the card's
+   * rounded bottom edge.
+   */
+  divider?: boolean
+}
+
+export type MenuItemProps = MenuItemOwnProps &
+  Omit<PressableProps, keyof MenuItemOwnProps | "children">
+
+// A full-width, centre-aligned row. `divider` paints the bottom border; set it
+// `false` on the last row so the border doesn't sit against the card's rounded
+// bottom edge.
+const Row = styled(Pressable)<{ divider: boolean }>(({ theme, divider }) => {
+  const { spacing } = theme.tokens.semantics.dimensions
+  const { colour } = theme.tokens.semantics
+
+  return {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: parseTokenValue(spacing.md),
+    paddingHorizontal: parseTokenValue(spacing.md),
+    borderBottomWidth: divider ? 1 : 0,
+    borderBottomColor: colour.border.divider
+  }
+})
+
+/**
+ * A single row inside a {@link Menu}. Renders its label centred, coloured by
+ * `variant`, with a divider beneath it unless `divider` is set to `false`.
+ *
+ * @example
+ * ```tsx
+ * <Menu.Item variant="destructive" divider={false} onPress={onLogOut}>
+ *   Log out
+ * </Menu.Item>
+ * ```
+ */
+export const MenuItem = React.forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  MenuItemProps
+>(({ variant = "action", onPress, children, divider = true, ...rest }, ref) => {
+  const theme = useTheme()
+  const { colour, typography } = theme.tokens.semantics
+
+  // The action colour lives under `colour.text.action`, which Typography's
+  // semantic-key `color` prop deliberately excludes — so we render in token
+  // mode (font token + hex colour). Both colours still come from tokens.
+  const labelColour =
+    variant === "destructive" ? colour.text.error : colour.text.action.default
+
+  const label =
+    typeof children === "string" || typeof children === "number"
+      ? String(children)
+      : undefined
+
+  return (
+    <Row
+      ref={ref}
+      divider={divider}
+      onPress={onPress}
+      accessible
+      accessibilityRole="menuitem"
+      accessibilityLabel={label}
+      {...rest}
+    >
+      {label !== undefined ? (
+        <Typography
+          token={typography.body.medium.md}
+          align="center"
+          color={labelColour}
+        >
+          {label}
+        </Typography>
+      ) : (
+        children
+      )}
+    </Row>
+  )
+})
+
+MenuItem.displayName = "Menu.Item"

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

@@ -0,0 +1,4 @@
+export { Menu } from "./Menu"
+export type { MenuProps, MenuAlign } from "./Menu"
+export { MenuItem } from "./MenuItem"
+export type { MenuItemProps, MenuItemVariant } from "./MenuItem"

package/src/components/molecules/index.ts

@@ -18,6 +18,7 @@ export * from "./Slider"
 export * from "./Notification"
 export * from "./StackedNotifications"
 export * from "./Tooltip"
+export * from "./Menu"
 export * from "./MessageCard"
 export * from "./DatePicker"
 export * from "./PictureSelector"