@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,285 @@
+import React, { useState } from "react"
+import { StyleSheet, View } from "react-native"
+import { Button } from "../../atoms/Button"
+import { Typography } from "../../atoms/Typography"
+import { Drawer } from "./Drawer"
+import type { DrawerProps } from "./Drawer"
+
+export default {
+  title: "Molecules/Drawer",
+  component: Drawer,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A bottom-sheet drawer with drag-to-dismiss and three header variants."
+      }
+    }
+  },
+  argTypes: {
+    defaultOpen: {
+      control: { type: "boolean" },
+      description: "Open on mount (uncontrolled)"
+    }
+  }
+}
+
+const bodyText =
+  "Fresh, nutritious meals tailored to your dog's unique needs — delivered straight to your door."
+
+export const Default = () => (
+  <View style={styles.container}>
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button variant="filled" colour="primary">
+          Open drawer
+        </Button>
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Header variant="titleAndText">
+            <Drawer.Title>Your plan</Drawer.Title>
+            <Drawer.Description>Tailored just for your dog</Drawer.Description>
+            <Drawer.Close />
+          </Drawer.Header>
+          <Drawer.Body>
+            <Typography>{bodyText}</Typography>
+          </Drawer.Body>
+          <Drawer.Footer>
+            <Button variant="filled" colour="primary">
+              Get started
+            </Button>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  </View>
+)
+
+export const ImageHeader = () => (
+  <View style={styles.container}>
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button variant="filled" colour="primary">
+          Open image drawer
+        </Button>
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Header
+            variant="image"
+            imageSource={{
+              uri: "https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=600"
+            }}
+          >
+            <Drawer.Close />
+          </Drawer.Header>
+          <Drawer.Body>
+            <Drawer.Title>Meet our recipes</Drawer.Title>
+            <Typography>{bodyText}</Typography>
+          </Drawer.Body>
+          <Drawer.Footer>
+            <Button variant="filled" colour="primary">
+              Explore recipes
+            </Button>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  </View>
+)
+
+export const FullBleedHeader = () => (
+  <View style={styles.container}>
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button variant="filled" colour="primary">
+          Open full bleed drawer
+        </Button>
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Header variant="fullBleed">
+            <Drawer.Title>Special offer</Drawer.Title>
+            <Drawer.Description>For new customers only</Drawer.Description>
+            <Drawer.Close />
+          </Drawer.Header>
+          <Drawer.Body>
+            <Typography>{bodyText}</Typography>
+          </Drawer.Body>
+          <Drawer.Footer>
+            <Button variant="filled" colour="primary">
+              Claim offer
+            </Button>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  </View>
+)
+
+export const WithoutFooter = () => (
+  <View style={styles.container}>
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button variant="filled" colour="primary">
+          Open drawer
+        </Button>
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Header variant="titleAndText">
+            <Drawer.Title>Information</Drawer.Title>
+            <Drawer.Close />
+          </Drawer.Header>
+          <Drawer.Body>
+            <Typography>{bodyText}</Typography>
+          </Drawer.Body>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  </View>
+)
+
+export const WithoutHeader = () => (
+  <View style={styles.container}>
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button variant="filled" colour="primary">
+          Open drawer
+        </Button>
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Grabber />
+          <Drawer.Close />
+          <Drawer.Body>
+            <Typography>{bodyText}</Typography>
+          </Drawer.Body>
+          <Drawer.Footer>
+            <Button variant="filled" colour="primary">
+              Continue
+            </Button>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  </View>
+)
+
+export const LongContent = () => (
+  <View style={styles.container}>
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button variant="filled" colour="primary">
+          Open long drawer
+        </Button>
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Header variant="titleAndText">
+            <Drawer.Title>Frequently asked questions</Drawer.Title>
+            <Drawer.Close />
+          </Drawer.Header>
+          <Drawer.Body>
+            {Array.from({ length: 14 }, (_, i) => (
+              <Typography
+                key={i}
+              >{`Question ${i + 1}: ${bodyText}`}</Typography>
+            ))}
+          </Drawer.Body>
+          <Drawer.Footer>
+            <Button variant="filled" colour="primary">
+              Got it
+            </Button>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  </View>
+)
+
+export const Controlled = () => {
+  const [open, setOpen] = useState(false)
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <Button variant="filled" colour="primary" onPress={() => setOpen(true)}>
+          Open
+        </Button>
+        <Button
+          variant="outlined"
+          colour="secondary"
+          onPress={() => setOpen(false)}
+        >
+          Close externally
+        </Button>
+      </View>
+      <Drawer.Root open={open} onOpenChange={setOpen}>
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content>
+            <Drawer.Header variant="titleAndText">
+              <Drawer.Title>Controlled</Drawer.Title>
+              <Drawer.Close />
+            </Drawer.Header>
+            <Drawer.Body>
+              <Typography>Open state is managed externally.</Typography>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </View>
+  )
+}
+
+export const Playground = (args: DrawerProps) => (
+  <View style={styles.container}>
+    <Drawer.Root {...args}>
+      <Drawer.Trigger>
+        <Button variant="filled" colour="primary">
+          Open drawer
+        </Button>
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Header variant="titleAndText">
+            <Drawer.Title>Drawer title</Drawer.Title>
+            <Drawer.Description>Drawer description</Drawer.Description>
+            <Drawer.Close />
+          </Drawer.Header>
+          <Drawer.Body>
+            <Typography>{bodyText}</Typography>
+          </Drawer.Body>
+          <Drawer.Footer>
+            <Button variant="filled" colour="primary">
+              Action
+            </Button>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  </View>
+)
+
+Playground.args = {
+  defaultOpen: false
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+    marginBottom: 16
+  }
+})

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

@@ -0,0 +1,180 @@
+import React from "react"
+import { screen, fireEvent } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Drawer } from "./Drawer"
+
+const BasicDrawer = ({
+  open,
+  onOpenChange
+}: {
+  open?: boolean
+  onOpenChange?: (v: boolean) => void
+}) => (
+  <Drawer.Root open={open} onOpenChange={onOpenChange}>
+    <Drawer.Trigger>
+      <button>Open</button>
+    </Drawer.Trigger>
+    <Drawer.Portal>
+      <Drawer.Overlay />
+      <Drawer.Content>
+        <Drawer.Header variant="titleAndText">
+          <Drawer.Title>Drawer title</Drawer.Title>
+          <Drawer.Description>Drawer description</Drawer.Description>
+          <Drawer.Close />
+        </Drawer.Header>
+        <Drawer.Body>
+          <p>Body content</p>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <p>Footer content</p>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Portal>
+  </Drawer.Root>
+)
+
+describe("Drawer", () => {
+  describe("rendering", () => {
+    it("renders the trigger", () => {
+      renderWithTheme(<BasicDrawer />)
+      expect(screen.getByText("Open")).toBeInTheDocument()
+    })
+
+    it("does not render drawer content when closed", () => {
+      renderWithTheme(<BasicDrawer />)
+      expect(screen.queryByText("Drawer title")).not.toBeInTheDocument()
+    })
+
+    it("renders all subcomponents when open", () => {
+      renderWithTheme(<BasicDrawer open />)
+      expect(screen.getByText("Drawer title")).toBeInTheDocument()
+      expect(screen.getByText("Drawer description")).toBeInTheDocument()
+      expect(screen.getByText("Body content")).toBeInTheDocument()
+      expect(screen.getByText("Footer content")).toBeInTheDocument()
+    })
+  })
+
+  describe("open / close", () => {
+    it("opens when trigger is pressed", () => {
+      renderWithTheme(<BasicDrawer />)
+      fireEvent.click(screen.getByText("Open"))
+      expect(screen.getByText("Drawer title")).toBeInTheDocument()
+    })
+
+    it("calls onOpenChange(true) when trigger is pressed (controlled)", () => {
+      const onOpenChange = vi.fn()
+      renderWithTheme(<BasicDrawer open={false} onOpenChange={onOpenChange} />)
+      fireEvent.click(screen.getByText("Open"))
+      expect(onOpenChange).toHaveBeenCalledWith(true)
+    })
+
+    it("calls onOpenChange(false) when close button is pressed", () => {
+      const onOpenChange = vi.fn()
+      renderWithTheme(<BasicDrawer open onOpenChange={onOpenChange} />)
+      fireEvent.click(screen.getByLabelText("Close"))
+      expect(onOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  describe("controlled mode", () => {
+    it("respects controlled open=true", () => {
+      renderWithTheme(<BasicDrawer open />)
+      expect(screen.getByText("Drawer title")).toBeInTheDocument()
+    })
+
+    it("respects controlled open=false", () => {
+      renderWithTheme(<BasicDrawer open={false} />)
+      expect(screen.queryByText("Drawer title")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("header variants", () => {
+    it("renders titleAndText variant", () => {
+      renderWithTheme(
+        <Drawer.Root open>
+          <Drawer.Portal>
+            <Drawer.Content>
+              <Drawer.Header variant="titleAndText">
+                <Drawer.Title>Title</Drawer.Title>
+                <Drawer.Close />
+              </Drawer.Header>
+            </Drawer.Content>
+          </Drawer.Portal>
+        </Drawer.Root>
+      )
+      expect(screen.getByText("Title")).toBeInTheDocument()
+    })
+
+    it("renders fullBleed variant", () => {
+      renderWithTheme(
+        <Drawer.Root open>
+          <Drawer.Portal>
+            <Drawer.Content>
+              <Drawer.Header variant="fullBleed">
+                <Drawer.Title>Full bleed</Drawer.Title>
+                <Drawer.Close />
+              </Drawer.Header>
+            </Drawer.Content>
+          </Drawer.Portal>
+        </Drawer.Root>
+      )
+      expect(screen.getByText("Full bleed")).toBeInTheDocument()
+    })
+
+    it("renders image variant", () => {
+      renderWithTheme(
+        <Drawer.Root open>
+          <Drawer.Portal>
+            <Drawer.Content>
+              <Drawer.Header variant="image">
+                <Drawer.Close />
+              </Drawer.Header>
+            </Drawer.Content>
+          </Drawer.Portal>
+        </Drawer.Root>
+      )
+      expect(screen.getByLabelText("Close")).toBeInTheDocument()
+    })
+  })
+
+  describe("without header", () => {
+    it("renders grabber and floating close when no header is used", () => {
+      renderWithTheme(
+        <Drawer.Root open>
+          <Drawer.Portal>
+            <Drawer.Content>
+              <Drawer.Grabber />
+              <Drawer.Close />
+              <Drawer.Body>
+                <p>No header</p>
+              </Drawer.Body>
+            </Drawer.Content>
+          </Drawer.Portal>
+        </Drawer.Root>
+      )
+      expect(screen.getByText("No header")).toBeInTheDocument()
+      expect(screen.getByLabelText("Close")).toBeInTheDocument()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("close button has accessible label", () => {
+      renderWithTheme(<BasicDrawer open />)
+      expect(screen.getByLabelText("Close")).toBeInTheDocument()
+    })
+
+    it("supports custom close aria-label", () => {
+      renderWithTheme(
+        <Drawer.Root open>
+          <Drawer.Portal>
+            <Drawer.Content>
+              <Drawer.Close aria-label="Dismiss drawer" />
+            </Drawer.Content>
+          </Drawer.Portal>
+        </Drawer.Root>
+      )
+      expect(screen.getByLabelText("Dismiss drawer")).toBeInTheDocument()
+    })
+  })
+})

package/src/components/molecules/Drawer/Drawer.tsx

@@ -0,0 +1,187 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { Modal, StyleSheet, View, type ViewProps } from "react-native"
+import { Slot } from "@rn-primitives/slot"
+import { DrawerContext } from "./DrawerContext"
+import { DrawerOverlay } from "./DrawerOverlay"
+import { DrawerContent } from "./DrawerContent"
+import { DrawerGrabber } from "./DrawerGrabber"
+import { DrawerHeader } from "./DrawerHeader"
+import { DrawerTitle } from "./DrawerTitle"
+import { DrawerDescription } from "./DrawerDescription"
+import { DrawerClose } from "./DrawerClose"
+import { DrawerBody } from "./DrawerBody"
+import { DrawerFooter } from "./DrawerFooter"
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+type DrawerRootOwnProps = {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+}
+
+export type DrawerProps = DrawerRootOwnProps &
+  Omit<ViewProps, keyof DrawerRootOwnProps>
+
+/**
+ * Root component for the native Drawer. Manages open/close state and provides
+ * context to all child components.
+ *
+ * Supports both controlled (`open` + `onOpenChange`) and uncontrolled
+ * (`defaultOpen`) usage.
+ *
+ * @example
+ * ```tsx
+ * <Drawer.Root>
+ *   <Drawer.Trigger>
+ *     <Button>Open</Button>
+ *   </Drawer.Trigger>
+ *   <Drawer.Portal>
+ *     <Drawer.Overlay />
+ *     <Drawer.Content>
+ *       <Drawer.Header variant="titleAndText">
+ *         <Drawer.Title>Title</Drawer.Title>
+ *         <Drawer.Close />
+ *       </Drawer.Header>
+ *       <Drawer.Body>Content</Drawer.Body>
+ *       <Drawer.Footer>
+ *         <Button>Action</Button>
+ *       </Drawer.Footer>
+ *     </Drawer.Content>
+ *   </Drawer.Portal>
+ * </Drawer.Root>
+ * ```
+ */
+const DrawerRoot = React.forwardRef<View, DrawerProps>(
+  (
+    {
+      open: controlledOpen,
+      defaultOpen = false,
+      onOpenChange,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const isControlled = useRef(controlledOpen !== undefined)
+    const [internalOpen, setInternalOpen] = useState(defaultOpen)
+    const [modalVisible, setModalVisible] = useState(
+      isControlled.current ? (controlledOpen ?? false) : defaultOpen
+    )
+
+    const isOpen = isControlled.current
+      ? (controlledOpen ?? false)
+      : internalOpen
+
+    useEffect(() => {
+      if (isOpen) setModalVisible(true)
+    }, [isOpen])
+
+    const openDrawer = useCallback(() => {
+      if (!isControlled.current) setInternalOpen(true)
+      onOpenChange?.(true)
+    }, [onOpenChange])
+
+    const closeDrawer = useCallback(() => {
+      if (!isControlled.current) setInternalOpen(false)
+      onOpenChange?.(false)
+    }, [onOpenChange])
+
+    const onExitComplete = useCallback(() => {
+      setModalVisible(false)
+    }, [])
+
+    const ctx = useMemo(
+      () => ({ isOpen, modalVisible, openDrawer, closeDrawer, onExitComplete }),
+      [isOpen, modalVisible, openDrawer, closeDrawer, onExitComplete]
+    )
+
+    return (
+      <DrawerContext.Provider value={ctx}>
+        <View ref={ref} {...rest}>
+          {children}
+        </View>
+      </DrawerContext.Provider>
+    )
+  }
+)
+
+DrawerRoot.displayName = "Drawer"
+
+// ─── Trigger ──────────────────────────────────────────────────────────────────
+
+export type DrawerTriggerProps = {
+  children: React.ReactElement
+}
+
+/**
+ * Merges `onPress` onto its single child element to open the drawer.
+ * Works with any pressable child (Button, Pressable, TouchableOpacity, etc.)
+ * without wrapping it in an extra Pressable that would swallow touch events.
+ */
+const DrawerTrigger = React.forwardRef<View, DrawerTriggerProps>(
+  ({ children }, ref) => {
+    const { openDrawer } = React.useContext(DrawerContext)
+    return (
+      <Slot ref={ref} onPress={openDrawer}>
+        {children}
+      </Slot>
+    )
+  }
+)
+
+DrawerTrigger.displayName = "Drawer.Trigger"
+
+// ─── Portal ───────────────────────────────────────────────────────────────────
+
+type DrawerPortalProps = {
+  children: React.ReactNode
+}
+
+/**
+ * Renders its children above the rest of the app using React Native `Modal`.
+ * The modal stays mounted during exit animations and unmounts once complete.
+ */
+const DrawerPortal = ({ children }: DrawerPortalProps) => {
+  const { modalVisible, closeDrawer } = React.useContext(DrawerContext)
+
+  if (!modalVisible) return null
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={closeDrawer}
+    >
+      <View style={styles.modalContainer}>{children}</View>
+    </Modal>
+  )
+}
+
+DrawerPortal.displayName = "Drawer.Portal"
+
+// ─── Compound export ──────────────────────────────────────────────────────────
+
+export const Drawer = Object.assign(DrawerRoot, {
+  Root: DrawerRoot,
+  Trigger: DrawerTrigger,
+  Portal: DrawerPortal,
+  Overlay: DrawerOverlay,
+  Content: DrawerContent,
+  Grabber: DrawerGrabber,
+  Header: DrawerHeader,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Close: DrawerClose,
+  Body: DrawerBody,
+  Footer: DrawerFooter
+})
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1
+  }
+})