@butternutbox/pawprint-native 0.0.1 → 0.1.0

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

@@ -0,0 +1,80 @@
+import React from "react"
+import { ScrollView, ScrollViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { useDrawerHeaderContext } from "./DrawerHeaderContext"
+import { useDrawerFooterContext } from "./DrawerFooterContext"
+
+export type DrawerBodyProps = ScrollViewProps
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledScrollView = styled(ScrollView)<{
+  bodyPaddingHorizontal: number
+  bodyPaddingRight: number
+  bodyGap: number
+  bodyPaddingVertical: number
+}>(
+  ({
+    bodyPaddingHorizontal,
+    bodyPaddingRight,
+    bodyGap,
+    bodyPaddingVertical
+  }) => ({
+    flexGrow: 1,
+    flexShrink: 1,
+    paddingLeft: bodyPaddingHorizontal,
+    paddingRight: bodyPaddingRight,
+    gap: bodyGap,
+    paddingTop: bodyPaddingVertical
+  })
+)
+
+/**
+ * Scrollable content area of the drawer. Grows to fill available space
+ * between the header and footer.
+ */
+export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
+  ({ children, contentContainerStyle, ...props }, ref) => {
+    const theme = useTheme()
+    const { spacing } = theme.tokens.components.drawer
+    const { buttons } = theme.tokens.components
+    const { content } = spacing
+    const headerContext = useDrawerHeaderContext()
+    const hasFooter = useDrawerFooterContext()
+    const insets = useSafeAreaInsets()
+
+    const gap = parseTokenValue(content.slot.gap)
+    const verticalPadding = parseTokenValue(content.slot.verticalPadding)
+    const bottomPadding = verticalPadding + (hasFooter ? 0 : insets.bottom)
+    const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
+
+    // When there's no header the close button floats in the top-right corner.
+    // Reserve space on the right so body content doesn't slide under it.
+    const paddingRight =
+      headerContext === null
+        ? parseTokenValue(spacing.close.right.md) +
+          parseTokenValue(buttons.size.sm.height)
+        : horizontalPadding
+
+    return (
+      <StyledScrollView
+        ref={ref}
+        bodyPaddingHorizontal={horizontalPadding}
+        bodyPaddingRight={paddingRight}
+        bodyGap={gap}
+        bodyPaddingVertical={verticalPadding}
+        contentContainerStyle={[
+          { gap, paddingBottom: bottomPadding },
+          contentContainerStyle
+        ]}
+        {...props}
+      >
+        {children}
+      </StyledScrollView>
+    )
+  }
+)
+
+DrawerBody.displayName = "Drawer.Body"

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

@@ -0,0 +1,76 @@
+import React from "react"
+import { View, ViewProps, StyleSheet } from "react-native"
+import { Close as CloseIcon } from "@butternutbox/pawprint-icons/core"
+import { useTheme } from "@emotion/react"
+import { IconButton } from "../../atoms/IconButton"
+import { useDrawerContext } from "./DrawerContext"
+import { useDrawerHeaderContext } from "./DrawerHeaderContext"
+
+export type DrawerCloseProps = {
+  "aria-label"?: string
+} & Omit<ViewProps, "children">
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+/**
+ * Close button for the drawer. When placed inside `Drawer.Header` the header
+ * manages its position. When used outside a header it renders as a floating
+ * button in the top-right corner of the panel.
+ *
+ * Colour is `"primary"` for the `image` variant and `"secondary"` otherwise.
+ */
+export const DrawerClose = React.forwardRef<View, DrawerCloseProps>(
+  ({ "aria-label": ariaLabel = "Close", ...props }, ref) => {
+    const theme = useTheme()
+    const { closeDrawer } = useDrawerContext()
+    const headerContext = useDrawerHeaderContext()
+    const { spacing } = theme.tokens.components.drawer
+
+    const defaultColour =
+      headerContext?.variant === "image" ? "primary" : "secondary"
+
+    const button = (
+      <IconButton
+        icon={CloseIcon}
+        variant="filled"
+        colour={defaultColour}
+        size="sm"
+        aria-label={ariaLabel}
+        onPress={closeDrawer}
+      />
+    )
+
+    if (!headerContext) {
+      return (
+        <View
+          ref={ref}
+          style={[
+            styles.floating,
+            {
+              top: parseTokenValue(spacing.close.top.md),
+              right: parseTokenValue(spacing.close.right.md)
+            }
+          ]}
+          {...props}
+        >
+          {button}
+        </View>
+      )
+    }
+
+    return (
+      <View ref={ref} {...props}>
+        {button}
+      </View>
+    )
+  }
+)
+
+DrawerClose.displayName = "Drawer.Close"
+
+const styles = StyleSheet.create({
+  floating: {
+    position: "absolute",
+    zIndex: 1
+  }
+})

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

@@ -0,0 +1,339 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import {
+  Animated,
+  Easing,
+  PanResponder,
+  StyleSheet,
+  View,
+  useWindowDimensions,
+  type ViewProps
+} from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { DrawerDragContext } from "./DrawerDragContext"
+import { useDrawerContext } from "./DrawerContext"
+import { DrawerFooterContext } from "./DrawerFooterContext"
+import {
+  DrawerHeaderContext,
+  type DrawerHeaderVariant
+} from "./DrawerHeaderContext"
+
+export type DrawerContentProps = Omit<ViewProps, "style">
+
+const OPEN_DURATION = 320
+const CLOSE_DURATION = 220
+const DISMISS_THRESHOLD = 80
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledPanel = styled(View)<{
+  panelBorderRadius: number
+  panelBgColor: string
+  panelMaxWidth: number
+  panelBorderWidth: number
+  panelBorderColor: string
+  panelShadowColor: string
+  panelShadowOffsetY: number
+  panelShadowBlur: number
+  panelFlex?: number
+}>(
+  ({
+    panelBorderRadius,
+    panelBgColor,
+    panelMaxWidth,
+    panelBorderWidth,
+    panelBorderColor,
+    panelShadowColor,
+    panelShadowOffsetY,
+    panelShadowBlur,
+    panelFlex
+  }) => ({
+    width: "100%",
+    maxWidth: panelMaxWidth,
+    alignSelf: "center",
+    ...(panelFlex != null ? { flex: panelFlex } : undefined),
+    borderTopLeftRadius: panelBorderRadius,
+    borderTopRightRadius: panelBorderRadius,
+    borderTopWidth: panelBorderWidth,
+    borderLeftWidth: panelBorderWidth,
+    borderRightWidth: panelBorderWidth,
+    borderColor: panelBorderColor,
+    backgroundColor: panelBgColor,
+    shadowColor: panelShadowColor,
+    shadowOffset: { width: 0, height: panelShadowOffsetY },
+    shadowOpacity: 1,
+    shadowRadius: panelShadowBlur,
+    elevation: 8,
+    overflow: "hidden"
+  })
+)
+
+/**
+ * Main panel container for the native drawer. Slides up from the bottom of
+ * the screen. Uses React Native `Animated` for entrance/exit and `PanResponder`
+ * on the grabber for drag-to-dismiss.
+ *
+ * Must be rendered inside `Drawer.Portal`.
+ *
+ * @example
+ * ```tsx
+ * <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.Content>
+ * </Drawer.Portal>
+ * ```
+ */
+export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
+  ({ children, ...props }, ref) => {
+    const theme = useTheme()
+    const { drawer, modal } = theme.tokens.components
+    const { colour, dimensions } = theme.tokens.semantics
+
+    const { isOpen, closeDrawer, onExitComplete } = useDrawerContext()
+
+    const { height: windowHeight } = useWindowDimensions()
+    const maxHeight = windowHeight * 0.9
+
+    // Keep a ref so the PanResponder (created once) always calls the latest
+    // closeDrawer without becoming a stale closure.
+    const closeDrawerRef = useRef(closeDrawer)
+    useEffect(() => {
+      closeDrawerRef.current = closeDrawer
+    }, [closeDrawer])
+
+    const translateY = useRef(new Animated.Value(9999)).current
+    const translateYValue = useRef(9999)
+    const panelHeightRef = useRef(0)
+    const entryRanRef = useRef(false)
+    const isOpenRef = useRef(isOpen)
+    const activeAnim = useRef<Animated.CompositeAnimation | null>(null)
+
+    // After the first onLayout we know the real rendered height (capped at
+    // MAX_HEIGHT). We immediately kick off the entry animation from that height
+    // and then set explicit height + flex: 1 on the panel so DrawerBody's
+    // ScrollView gets a bounded container and can scroll correctly.
+    const [panelHeight, setPanelHeight] = useState(0)
+
+    useEffect(() => {
+      const id = translateY.addListener(({ value }) => {
+        translateYValue.current = value
+      })
+      return () => translateY.removeListener(id)
+    }, [translateY])
+
+    // Clamp the cached panel height when the window shrinks (e.g. orientation
+    // change) so the entry animation never starts from below the screen.
+    useEffect(() => {
+      if (panelHeightRef.current > 0 && panelHeightRef.current > maxHeight) {
+        setPanelHeight(maxHeight)
+        panelHeightRef.current = maxHeight
+      }
+    }, [maxHeight])
+
+    const runEntry = useCallback(() => {
+      if (panelHeightRef.current === 0) return
+      translateY.setValue(panelHeightRef.current)
+      activeAnim.current?.stop()
+      const anim = Animated.timing(translateY, {
+        toValue: 0,
+        duration: OPEN_DURATION,
+        easing: Easing.bezier(0.32, 0.72, 0, 1),
+        useNativeDriver: true
+      })
+      activeAnim.current = anim
+      anim.start(() => {
+        activeAnim.current = null
+      })
+      entryRanRef.current = true
+    }, [translateY])
+
+    const runExit = useCallback(() => {
+      const height = panelHeightRef.current
+      if (height === 0) {
+        onExitComplete()
+        return
+      }
+      activeAnim.current?.stop()
+      const anim = Animated.timing(translateY, {
+        toValue: height * 1.1,
+        duration: CLOSE_DURATION,
+        easing: Easing.bezier(0.32, 0.72, 0, 1),
+        useNativeDriver: true
+      })
+      activeAnim.current = anim
+      anim.start(() => {
+        activeAnim.current = null
+        onExitComplete()
+      })
+    }, [translateY, onExitComplete])
+
+    useEffect(() => {
+      isOpenRef.current = isOpen
+      if (isOpen) {
+        entryRanRef.current = false
+        runEntry()
+      } else {
+        runExit()
+      }
+    }, [isOpen, runEntry, runExit])
+
+    const onLayout = useCallback(
+      ({ nativeEvent }: { nativeEvent: { layout: { height: number } } }) => {
+        const h = nativeEvent.layout.height
+        const capped = Math.min(h, maxHeight)
+
+        // Only update state when the effective height actually changes, to
+        // avoid re-render loops. Compare against the ref (kept in sync with
+        // state) so panelHeight doesn't need to be a dep of this callback.
+        if (capped !== panelHeightRef.current && capped > 0) {
+          setPanelHeight(capped)
+          panelHeightRef.current = capped
+        }
+
+        // Run entry on the first measurement. The animation starts from the
+        // capped height even though the panel may still be at natural size;
+        // the re-render that sets the explicit height happens while the panel
+        // is still off-screen, so there is no visible jump.
+        if (isOpenRef.current && !entryRanRef.current && capped > 0) {
+          panelHeightRef.current = capped
+          runEntry()
+        }
+      },
+      [runEntry, maxHeight]
+    )
+
+    const panResponder = useRef(
+      PanResponder.create({
+        // Claim the responder as soon as a touch starts on the grabber so the
+        // gesture is never stolen by a parent ScrollView.
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_evt, gestureState) =>
+          Math.abs(gestureState.dy) > 5 && gestureState.dy > 0,
+        onPanResponderGrant: () => {
+          activeAnim.current?.stop()
+          activeAnim.current = null
+        },
+        onPanResponderMove: (_evt, gestureState) => {
+          const next = Math.max(0, gestureState.dy)
+          translateY.setValue(next)
+        },
+        onPanResponderRelease: (_evt, gestureState) => {
+          const currentY = translateYValue.current
+          if (currentY > DISMISS_THRESHOLD || gestureState.vy > 0.5) {
+            const dismissAnim = Animated.timing(translateY, {
+              toValue: panelHeightRef.current * 1.1,
+              duration: CLOSE_DURATION,
+              easing: Easing.bezier(0.32, 0.72, 0, 1),
+              useNativeDriver: true
+            })
+            activeAnim.current = dismissAnim
+            dismissAnim.start(() => {
+              activeAnim.current = null
+              closeDrawerRef.current()
+            })
+          } else {
+            const snapAnim = Animated.spring(translateY, {
+              toValue: 0,
+              bounciness: 8,
+              useNativeDriver: true
+            })
+            activeAnim.current = snapAnim
+            snapAnim.start(() => {
+              activeAnim.current = null
+            })
+          }
+        },
+        onPanResponderTerminate: () => {
+          const snapAnim = Animated.spring(translateY, {
+            toValue: 0,
+            bounciness: 8,
+            useNativeDriver: true
+          })
+          activeAnim.current = snapAnim
+          snapAnim.start(() => {
+            activeAnim.current = null
+          })
+        }
+      })
+    ).current
+
+    const dragContextValue = useMemo(
+      () => ({ panHandlers: panResponder.panHandlers }),
+      [panResponder.panHandlers]
+    )
+
+    const hasFooter = React.Children.toArray(children).some(
+      (child) =>
+        React.isValidElement(child) &&
+        (child.type as { displayName?: string }).displayName === "Drawer.Footer"
+    )
+
+    const headerChild = React.Children.toArray(children).find(
+      (child) =>
+        React.isValidElement(child) &&
+        (child.type as { displayName?: string }).displayName === "Drawer.Header"
+    ) as React.ReactElement<{ variant?: DrawerHeaderVariant }> | undefined
+
+    const headerContextValue =
+      headerChild != null
+        ? {
+            variant:
+              headerChild.props.variant ??
+              ("titleAndText" as DrawerHeaderVariant)
+          }
+        : null
+
+    return (
+      <DrawerHeaderContext.Provider value={headerContextValue}>
+        <DrawerFooterContext.Provider value={hasFooter}>
+          <DrawerDragContext.Provider value={dragContextValue}>
+            <Animated.View
+              style={[
+                styles.animatedWrapper,
+                panelHeight > 0 ? { height: panelHeight } : undefined,
+                { transform: [{ translateY }] }
+              ]}
+            >
+              <StyledPanel
+                ref={ref}
+                onLayout={onLayout}
+                panelBorderRadius={parseTokenValue(drawer.borderRadius.top)}
+                panelBgColor={colour.background.container.default}
+                panelMaxWidth={parseTokenValue(drawer.size.maxWidth)}
+                panelFlex={panelHeight > 0 ? 1 : undefined}
+                panelBorderWidth={parseTokenValue(dimensions.borderWidth.sm)}
+                panelBorderColor={colour.border.default}
+                panelShadowColor={modal.shadow.color}
+                panelShadowOffsetY={parseTokenValue(modal.shadow.offsetY)}
+                panelShadowBlur={parseTokenValue(modal.shadow.blur)}
+                accessible
+                accessibilityRole="none"
+                accessibilityViewIsModal
+                {...props}
+              >
+                {children}
+              </StyledPanel>
+            </Animated.View>
+          </DrawerDragContext.Provider>
+        </DrawerFooterContext.Provider>
+      </DrawerHeaderContext.Provider>
+    )
+  }
+)
+
+DrawerContent.displayName = "Drawer.Content"
+
+const styles = StyleSheet.create({
+  animatedWrapper: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+})

package/src/components/molecules/Drawer/DrawerContext.ts

@@ -0,0 +1,19 @@
+import React from "react"
+
+export type DrawerContextValue = {
+  isOpen: boolean
+  modalVisible: boolean
+  openDrawer: () => void
+  closeDrawer: () => void
+  onExitComplete: () => void
+}
+
+export const DrawerContext = React.createContext<DrawerContextValue>({
+  isOpen: false,
+  modalVisible: false,
+  openDrawer: () => {},
+  closeDrawer: () => {},
+  onExitComplete: () => {}
+})
+
+export const useDrawerContext = () => React.useContext(DrawerContext)

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

@@ -0,0 +1,31 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+
+export type DrawerDescriptionProps = {
+  children: React.ReactNode
+} & Omit<ViewProps, "children">
+
+/**
+ * Description text for the drawer header.
+ */
+export const DrawerDescription = React.forwardRef<View, DrawerDescriptionProps>(
+  ({ children, ...props }, ref) => {
+    const theme = useTheme()
+    const { drawerHeader } = theme.tokens.components.drawer
+
+    return (
+      <View ref={ref} {...props}>
+        <Typography
+          token={drawerHeader.typography.description}
+          color={drawerHeader.colour.text.description}
+        >
+          {children}
+        </Typography>
+      </View>
+    )
+  }
+)
+
+DrawerDescription.displayName = "Drawer.Description"

package/src/components/molecules/Drawer/DrawerDragContext.ts

@@ -0,0 +1,11 @@
+import React from "react"
+import type { PanResponderInstance } from "react-native"
+
+export type DrawerDragContextValue = {
+  panHandlers: PanResponderInstance["panHandlers"]
+}
+
+export const DrawerDragContext =
+  React.createContext<DrawerDragContextValue | null>(null)
+
+export const useDrawerDragContext = () => React.useContext(DrawerDragContext)

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

@@ -0,0 +1,49 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+
+export type DrawerFooterProps = ViewProps
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledFooter = styled(View)<{
+  footerPaddingTop: number
+  footerPaddingHorizontal: number
+  footerPaddingBottom: number
+}>(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
+  flexShrink: 0,
+  paddingTop: footerPaddingTop,
+  paddingHorizontal: footerPaddingHorizontal,
+  paddingBottom: footerPaddingBottom
+}))
+
+/**
+ * Fixed footer section of the drawer. Typically contains action buttons.
+ */
+export const DrawerFooter = React.forwardRef<View, DrawerFooterProps>(
+  ({ children, ...props }, ref) => {
+    const theme = useTheme()
+    const { spacing } = theme.tokens.components.drawer
+    const insets = useSafeAreaInsets()
+
+    return (
+      <StyledFooter
+        ref={ref}
+        footerPaddingTop={parseTokenValue(spacing.footer.topPaddding)}
+        footerPaddingHorizontal={parseTokenValue(
+          spacing.footer.horizontalPadding
+        )}
+        footerPaddingBottom={
+          parseTokenValue(spacing.bottomPadding) + insets.bottom
+        }
+        {...props}
+      >
+        {children}
+      </StyledFooter>
+    )
+  }
+)
+
+DrawerFooter.displayName = "Drawer.Footer"

package/src/components/molecules/Drawer/DrawerFooterContext.ts

@@ -0,0 +1,6 @@
+import React from "react"
+
+export const DrawerFooterContext = React.createContext(false)
+
+export const useDrawerFooterContext = () =>
+  React.useContext(DrawerFooterContext)

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

@@ -0,0 +1,62 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { useDrawerDragContext } from "./DrawerDragContext"
+
+export type DrawerGrabberProps = ViewProps
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledWrapper = styled(View)<{ grabberPaddingTop: number }>(
+  ({ grabberPaddingTop }) => ({
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    paddingTop: grabberPaddingTop,
+    paddingBottom: grabberPaddingTop
+  })
+)
+
+const StyledBar = styled(View)<{
+  barWidth: number
+  barHeight: number
+  barBorderRadius: number
+  barColor: string
+}>(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+  width: barWidth,
+  height: barHeight,
+  borderRadius: barBorderRadius,
+  backgroundColor: barColor
+}))
+
+/**
+ * Standalone pull handle for the drawer. Attach to the top of `Drawer.Content`
+ * when `Drawer.Header` is not used. Activates drag-to-dismiss.
+ */
+export const DrawerGrabber = React.forwardRef<View, DrawerGrabberProps>(
+  (props, ref) => {
+    const theme = useTheme()
+    const dragContext = useDrawerDragContext()
+    const { drawer, grabber } = theme.tokens.components
+    const { borderRadius } = theme.tokens.semantics.dimensions
+
+    return (
+      <StyledWrapper
+        ref={ref}
+        grabberPaddingTop={parseTokenValue(drawer.spacing.grabber.paddingTop)}
+        {...(dragContext?.panHandlers ?? {})}
+        {...props}
+      >
+        <StyledBar
+          barWidth={parseTokenValue(grabber.size.bar.width)}
+          barHeight={parseTokenValue(grabber.size.bar.height)}
+          barBorderRadius={parseTokenValue(borderRadius.round)}
+          barColor={grabber.colour.background.default}
+        />
+      </StyledWrapper>
+    )
+  }
+)
+
+DrawerGrabber.displayName = "Drawer.Grabber"