@adres/mgda-ui 0.0.0-stage → 0.0.1

package/src/components/drawer.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./button"
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer"
+
+const meta: Meta<typeof Drawer> = {
+  title: "Components/Drawer",
+  component: Drawer,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Drawer>
+
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent side="right">
+        <DrawerHeader>
+          <DrawerTitle>Filters</DrawerTitle>
+          <DrawerDescription>Refine your search results.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <p className="ax:t-body-sm ax:text-muted-foreground">Drawer content goes here.</p>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="outline">Close</Button>
+          </DrawerClose>
+          <Button>Apply</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+}

package/src/components/drawer.tsx

@@ -0,0 +1,385 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { motion, AnimatePresence, type PanInfo } from "motion/react"
+import { X } from "lucide-react"
+import { cn } from "../lib/cn"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
+import { transitions } from "../lib/motion"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type DrawerSide = "right" | "bottom" | "left" | "top"
+export type DrawerSize = "sm" | "md" | "lg"
+
+const DrawerSizeContext = React.createContext<DrawerSize>("md")
+
+// Tracks open state and an imperative setter so DrawerContent can drive
+// AnimatePresence independently of Radix's internal presence system, AND
+// can dismiss itself in response to drag-past-threshold gestures.
+interface DrawerOpenContextValue {
+  open:    boolean
+  setOpen: (open: boolean) => void
+}
+const DrawerOpenContext = React.createContext<DrawerOpenContextValue>({
+  open:    false,
+  setOpen: () => {},
+})
+
+// ─── Size tokens ──────────────────────────────────────────────────────────────
+
+// Left/right share the same width scale; top/bottom share heights.
+const SIDE_WIDTH: Record<DrawerSize, string> = {
+  sm: "ax:w-80",       // 320px - filters, quick actions
+  md: "ax:w-[480px]",  // 480px - detail panels
+  lg: "ax:w-1/2",      // 50vw  - wide layouts
+}
+
+const END_HEIGHT: Record<DrawerSize, string> = {
+  sm: "ax:max-h-[40vh]",
+  md: "ax:max-h-[60vh]",
+  lg: "ax:max-h-[80vh]",
+}
+
+const TITLE_SIZE: Record<DrawerSize, string> = {
+  sm: "ax:t-h5",
+  md: "ax:t-h4",
+  lg: "ax:t-h3",
+}
+
+const DESCRIPTION_SIZE: Record<DrawerSize, string> = {
+  sm: "ax:t-caption",
+  md: "ax:t-body-sm",
+  lg: "ax:t-body-sm",
+}
+
+// ─── Animation variants per side ─────────────────────────────────────────────
+//
+// All timings come from the design-system motion tokens (lib/motion.ts):
+//   transitions.slow      - enter (420ms, ease-out): large surface arriving
+//   transitions.exitSlow  - exit  (280ms, ease-in):  large surface leaving
+//   transitions.smooth    - backdrop enter
+//   transitions.exit      - backdrop exit
+//
+// Backdrop fades faster than the panel slides: it recedes before the
+// panel finishes leaving.
+
+const SLIDE = {
+  right:  {
+    initial: { x: "100%" },
+    animate: { x: 0,        transition: transitions.slow },
+    exit:    { x: "100%",   transition: transitions.exitSlow },
+  },
+  left:   {
+    initial: { x: "-100%" },
+    animate: { x: 0,        transition: transitions.slow },
+    exit:    { x: "-100%",  transition: transitions.exitSlow },
+  },
+  bottom: {
+    initial: { y: "100%" },
+    animate: { y: 0,        transition: transitions.slow },
+    exit:    { y: "100%",   transition: transitions.exitSlow },
+  },
+  top:    {
+    initial: { y: "-100%" },
+    animate: { y: 0,        transition: transitions.slow },
+    exit:    { y: "-100%",  transition: transitions.exitSlow },
+  },
+} as const
+
+// ─── Drag-to-close config per side ────────────────────────────────────────────
+//
+// All four sides support drag-to-close so touch users can swipe the panel
+// off-screen in its open direction. Past a threshold (offset OR velocity),
+// the drawer dismisses; below it, Framer's spring physics return the panel
+// to its open position automatically.
+
+const DRAG_OFFSET_THRESHOLD   = 100   // px past which release commits a dismiss
+const DRAG_VELOCITY_THRESHOLD = 500   // px/sec flick velocity that always commits
+
+interface DragConfig {
+  drag:            "x" | "y"
+  dragConstraints: { top: number; bottom: number; left: number; right: number }
+  /** Per-edge elasticity: 0 means "can't drag past this edge"; non-zero
+   *  allows resistive over-drag in that direction (the close direction). */
+  dragElastic:     { top: number; bottom: number; left: number; right: number }
+  /** Returns true when offset/velocity warrant dismissing. */
+  shouldClose:     (info: PanInfo) => boolean
+}
+
+const DRAG_BY_SIDE: Record<DrawerSide, DragConfig> = {
+  right: {
+    drag: "x",
+    dragConstraints: { top: 0, bottom: 0, left: 0, right: 0 },
+    dragElastic:     { top: 0, bottom: 0, left: 0, right: 0.4 },
+    shouldClose: ({ offset, velocity }) =>
+      offset.x > DRAG_OFFSET_THRESHOLD || velocity.x > DRAG_VELOCITY_THRESHOLD,
+  },
+  left: {
+    drag: "x",
+    dragConstraints: { top: 0, bottom: 0, left: 0, right: 0 },
+    dragElastic:     { top: 0, bottom: 0, left: 0.4, right: 0 },
+    shouldClose: ({ offset, velocity }) =>
+      offset.x < -DRAG_OFFSET_THRESHOLD || velocity.x < -DRAG_VELOCITY_THRESHOLD,
+  },
+  bottom: {
+    drag: "y",
+    dragConstraints: { top: 0, bottom: 0, left: 0, right: 0 },
+    dragElastic:     { top: 0, bottom: 0.4, left: 0, right: 0 },
+    shouldClose: ({ offset, velocity }) =>
+      offset.y > DRAG_OFFSET_THRESHOLD || velocity.y > DRAG_VELOCITY_THRESHOLD,
+  },
+  top: {
+    drag: "y",
+    dragConstraints: { top: 0, bottom: 0, left: 0, right: 0 },
+    dragElastic:     { top: 0.4, bottom: 0, left: 0, right: 0 },
+    shouldClose: ({ offset, velocity }) =>
+      offset.y < -DRAG_OFFSET_THRESHOLD || velocity.y < -DRAG_VELOCITY_THRESHOLD,
+  },
+}
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+// Wraps Radix Dialog.Root and mirrors the open state into DrawerOpenContext so
+// DrawerContent can use AnimatePresence without depending on Radix's internal
+// presence system (which conflicts with motion/react exit animations).
+export interface DrawerProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {}
+
+export function Drawer({
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen,
+  children,
+  ...props
+}: DrawerProps) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+    return () => { document.body.style.overflow = prev }
+  }, [isOpen])
+
+  const setOpen = React.useCallback(
+    (v: boolean) => { setInternalOpen(v); onOpenChange?.(v) },
+    [onOpenChange]
+  )
+
+  const ctx = React.useMemo<DrawerOpenContextValue>(
+    () => ({ open: isOpen, setOpen }),
+    [isOpen, setOpen]
+  )
+
+  return (
+    <DrawerOpenContext.Provider value={ctx}>
+      <DialogPrimitive.Root open={isOpen} onOpenChange={setOpen} {...props}>
+        {children}
+      </DialogPrimitive.Root>
+    </DrawerOpenContext.Provider>
+  )
+}
+
+// ─── Trigger / Close (pass-through) ──────────────────────────────────────────
+
+export const DrawerTrigger = DialogPrimitive.Trigger
+export const DrawerClose   = DialogPrimitive.Close
+
+// ─── Content ─────────────────────────────────────────────────────────────────
+
+export interface DrawerContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  side?:     DrawerSide
+  size?:     DrawerSize
+  /** Show the translucent backdrop. Default: true. */
+  backdrop?: boolean
+}
+
+export const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DrawerContentProps
+>(({ className, children, side = "right", size = "md", backdrop = true, ...props }, ref) => {
+  const { open: isOpen, setOpen } = React.useContext(DrawerOpenContext)
+  const reduce  = useReducedMotion()
+  const slide   = SLIDE[side]
+  const drag    = DRAG_BY_SIDE[side]
+
+  // Under reduced-motion collapse all transitions to instant and disable drag.
+  const panelVariants = reduce ? { initial: {}, animate: {}, exit: {} } : slide
+  const backdropEnter = reduce ? { duration: 0 } : transitions.smooth
+  const backdropExit  = reduce ? { duration: 0 } : transitions.exit
+  const dragProps     = reduce
+    ? {}
+    : {
+        drag:            drag.drag,
+        dragConstraints: drag.dragConstraints,
+        dragElastic:     drag.dragElastic,
+        onDragEnd:       (_: PointerEvent, info: PanInfo) => {
+          if (drag.shouldClose(info)) setOpen(false)
+        },
+      }
+
+  // Drag handle is only shown for bottom/top: the recognised mobile-sheet
+  // affordance. Left/right still support drag-to-close functionally, but the
+  // expected gesture on side panels is the edge-swipe rather than a handle.
+  const showDragHandle = !reduce && (side === "bottom" || side === "top")
+
+  return (
+    <DrawerSizeContext.Provider value={size}>
+      {/*
+       * forceMount on Portal bypasses Radix's own presence/animation system so
+       * motion/react AnimatePresence is the sole controller of mount/unmount.
+       */}
+      <DialogPrimitive.Portal forceMount>
+
+        {/* Backdrop - independent AnimatePresence so it fades separately from the panel */}
+        <AnimatePresence>
+          {isOpen && backdrop && (
+            <motion.div
+              key="drawer-backdrop"
+              // Black scrim in dark mode (`--foreground` flips light there); same opacity + blur.
+              className="ax:fixed ax:inset-0 ax:z-[1100] ax:bg-foreground/40 ax:dark:bg-black/40 ax:backdrop-blur-sm"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: backdropEnter }}
+              exit={{ opacity: 0,    transition: backdropExit  }}
+              aria-hidden="true"
+            />
+          )}
+        </AnimatePresence>
+
+        {/* Panel - separate AnimatePresence so enter/exit curves are fully independent */}
+        <AnimatePresence>
+          {isOpen && (
+            <DialogPrimitive.Content ref={ref} forceMount asChild {...props}>
+              <motion.div
+                className={cn(
+                  "ax:fixed ax:z-[1101] ax:flex ax:flex-col ax:bg-card ax:shadow-xl",
+                  side === "right"  && ["ax:right-0 ax:top-0 ax:h-full ax:border-l ax:border-border",        SIDE_WIDTH[size]],
+                  side === "left"   && ["ax:left-0 ax:top-0 ax:h-full ax:border-r ax:border-border",         SIDE_WIDTH[size]],
+                  side === "bottom" && ["ax:bottom-0 ax:left-0 ax:right-0 ax:rounded-t-xl ax:border-t ax:border-border", END_HEIGHT[size]],
+                  side === "top"    && ["ax:top-0 ax:left-0 ax:right-0 ax:rounded-b-xl ax:border-b ax:border-border",    END_HEIGHT[size]],
+                  className
+                )}
+                initial={panelVariants.initial}
+                animate={panelVariants.animate}
+                exit={panelVariants.exit}
+                {...dragProps}
+              >
+                {/* Drag handle affordance - bottom/top only */}
+                {showDragHandle && (
+                  <div
+                    aria-hidden="true"
+                    className={cn(
+                      "ax:absolute ax:left-1/2 ax:-translate-x-1/2 ax:h-1 ax:w-10 ax:rounded-full ax:bg-foreground/20",
+                      side === "bottom" && "ax:top-2",
+                      side === "top"    && "ax:bottom-2",
+                    )}
+                  />
+                )}
+                <DialogPrimitive.Close
+                  className={cn(
+                    "ax:absolute ax:right-md ax:top-md ax:z-10 ax:rounded-sm ax:opacity-70 ax:transition-opacity",
+                    "ax:hover:opacity-100 ax:focus:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-2",
+                    "ax:disabled:pointer-events-none"
+                  )}
+                >
+                  <X className="ax:size-4" aria-hidden="true" />
+                  <span className="ax:sr-only">Close</span>
+                </DialogPrimitive.Close>
+                {children}
+              </motion.div>
+            </DialogPrimitive.Content>
+          )}
+        </AnimatePresence>
+
+      </DialogPrimitive.Portal>
+    </DrawerSizeContext.Provider>
+  )
+})
+DrawerContent.displayName = "DrawerContent"
+
+// ─── Header ───────────────────────────────────────────────────────────────────
+
+export const DrawerHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      // pr-4xl (48px) reserves space for the absolute-positioned close button.
+      "ax:flex ax:flex-col ax:gap-2xs ax:px-xl ax:pt-xl ax:pb-md ax:pr-4xl ax:shrink-0 ax:border-b ax:border-border",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerHeader.displayName = "DrawerHeader"
+
+// ─── Body (scrollable content area) ──────────────────────────────────────────
+
+export const DrawerBody = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("ax:flex-1 ax:overflow-y-auto ax:px-xl ax:py-lg", className)}
+    {...props}
+  />
+))
+DrawerBody.displayName = "DrawerBody"
+
+// ─── Footer ───────────────────────────────────────────────────────────────────
+
+export const DrawerFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "ax:flex ax:items-center ax:justify-end ax:gap-xs ax:px-xl ax:py-md ax:shrink-0 ax:border-t ax:border-border",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerFooter.displayName = "DrawerFooter"
+
+// ─── Title ────────────────────────────────────────────────────────────────────
+
+export const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(DrawerSizeContext)
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn(TITLE_SIZE[size], className)}
+      {...props}
+    />
+  )
+})
+DrawerTitle.displayName = "DrawerTitle"
+
+// ─── Description ─────────────────────────────────────────────────────────────
+
+export const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(DrawerSizeContext)
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={cn("ax:text-muted-foreground", DESCRIPTION_SIZE[size], className)}
+      {...props}
+    />
+  )
+})
+DrawerDescription.displayName = "DrawerDescription"

package/src/components/dropdown-menu.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { User } from "lucide-react"
+import { Button } from "./button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof DropdownMenu>
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Account</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuLabel>My account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <User className="ax:size-4" />
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuItem>Billing</DropdownMenuItem>
+        <DropdownMenuItem variant="destructive">Sign out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}