family-drawer

1"use client"
2 
3import {
4  createContext,
5  useContext,
6  useMemo,
7  useRef,
8  useState,
9  type ReactNode,
10} from "react"
11import { Slot } from "@radix-ui/react-slot"
12import clsx from "clsx"
13import { AnimatePresence, motion } from "motion/react"
14import useMeasure from "react-use-measure"
15import { Drawer } from "vaul"
16 
17// ============================================================================
18// Types
19// ============================================================================
20 
21type ViewComponent = React.ComponentType<Record<string, unknown>>
22 
23interface ViewsRegistry {
24  [viewName: string]: ViewComponent
25}
26 
27// ============================================================================
28// Context
29// ============================================================================
30 
31interface FamilyDrawerContextValue {
32  isOpen: boolean
33  view: string
34  setView: (view: string) => void
35  opacityDuration: number
36  elementRef: ReturnType<typeof useMeasure>[0]
37  bounds: ReturnType<typeof useMeasure>[1]
38  views: ViewsRegistry | undefined
39}
40 
41const FamilyDrawerContext = createContext<FamilyDrawerContextValue | undefined>(
42  undefined
43)
44 
45function useFamilyDrawer() {
46  const context = useContext(FamilyDrawerContext)
47  if (!context) {
48    throw new Error(
49      "FamilyDrawer components must be used within FamilyDrawerRoot"
50    )
51  }
52  return context
53}
54 
55// ============================================================================
56// Root Component
57// ============================================================================
58 
59interface FamilyDrawerRootProps {
60  children: ReactNode
61  open?: boolean
62  defaultOpen?: boolean
63  onOpenChange?: (open: boolean) => void
64  defaultView?: string
65  onViewChange?: (view: string) => void
66  views?: ViewsRegistry
67}
68 
69function FamilyDrawerRoot({
70  children,
71  open: controlledOpen,
72  defaultOpen = false,
73  onOpenChange,
74  defaultView = "default",
75  onViewChange,
76  views: customViews,
77}: FamilyDrawerRootProps) {
78  const [internalOpen, setInternalOpen] = useState(defaultOpen)
79  const [view, setView] = useState(defaultView)
80  const [elementRef, bounds] = useMeasure()
81  const previousHeightRef = useRef<number>(0)
82 
83  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen
84  const setIsOpen = onOpenChange || setInternalOpen
85 
86  const opacityDuration = useMemo(() => {
87    const currentHeight = bounds.height
88    const previousHeight = previousHeightRef.current
89 
90    const MIN_DURATION = 0.15
91    const MAX_DURATION = 0.27
92 
93// … truncated