Component Composition Patterns

'use client'
 
import {
  Close,
  Content,
  Description,
  Overlay,
  Portal,
  Root,
  Title,
  Trigger,
} from '@radix-ui/react-dialog'
import { X } from 'lucide-react'
import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 
import { cn } from '@repo/ui/lib/utils'
 
// Re-export Root and Trigger directly (no customization needed)
const DialogRoot = Root
const DialogTrigger = Trigger
const DialogClose = Close
 
/**
 * Dialog.Overlay - Covers the screen behind the dialog
 */
function DialogOverlay({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof Overlay>) {
  return (
    <Overlay
      className={cn(
        'data-[state=closed]:animate-out data-[state=open]:animate-in',
        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
        'fixed inset-0 z-50 bg-black/80',
        className
      )}
      {...props}
    />
  )
}
 
/**
 * Dialog.Content - The dialog panel itself
 * Children can be Server Components (passed through)
 */
function DialogContent({
  children,
  className,
  ...props
}: ComponentPropsWithoutRef<typeof Content>) {
  return (
    <Portal>
      <DialogOverlay />
      <Content
        className={cn(
          'data-[state=closed]:animate-out data-[state=open]:animate-in',
          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
          'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
          'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
          'fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]',
          'gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200',
          className
        )}
        {...props}
      >
        {children}
        <Close
          className={cn(
            'absolute top-4 right-4 rounded-sm opacity-70',
            'ring-offset-background transition-opacity hover:opacity-100',
            'focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none',
            'disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'
          )}
        >
          <X className="size-4" />
          <span className="sr-only">Close</span>
        </Close>
      </Content>
    </Portal>
  )
}
 
/**
 * Dialog.Header - Container for title and description
 */
function DialogHeader({
  className,
  ...props
}: ComponentPropsWithoutRef<'div'>) {
  return (
    <div
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}
 
/**
 * Dialog.Footer - Container for action buttons
 */
function DialogFooter({
  className,
  ...props
}: ComponentPropsWithoutRef<'div'>) {
  return (
    <div
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className
      )}
      {...props}
    />
  )
}
 
/**
 * Dialog.Title - Accessible dialog title
 */
function DialogTitle({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof Title>) {
  return (
    <Title
      className={cn('font-semibold text-lg leading-none tracking-tight', className)}
      {...props}
    />
  )
}
 
/**
 * Dialog.Description - Accessible dialog description
 */
function DialogDescription({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof Description>) {
  return (
    <Description
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}
 
// Export individual components (required for Server Component compatibility)
export {
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
}

{
  "name": "@repo/ui",
  "exports": {
    "./globals.css": "./src/styles/globals.css",
    "./lib/*": "./src/lib/*.ts",
    "./components/*": "./src/components/*.tsx",
    "./hooks/*": "./src/hooks/*.ts"
  }
}

// Server Component - renders server content inside the dialog
 
import { Button } from '@repo/ui/components/button'
import {
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@repo/ui/components/dialog'
 
// Simulated server data
async function getTermsContent(): Promise<string> {
  // This would fetch from a CMS or database in a real app
  return `By using this service, you agree to our terms. These terms were
  last updated on ${new Date().toLocaleDateString()}. Server-rendered content
  can be passed as children to client components.`
}
 
export default async function DialogDemoPage() {
  // Fetch content on the server
  const termsContent = await getTermsContent()
 
  return (
    <main className="flex flex-col gap-8 p-8">
      <div>
        <h1 className="font-bold text-3xl">Dialog Compound Component</h1>
        <p className="mt-2 text-muted-foreground">
          Compound API with server-rendered content inside client dialog.
        </p>
      </div>
 
      {/* Confirmation dialog example */}
      <section className="rounded-lg border bg-muted/50 p-6">
        <h2 className="font-semibold text-lg">Confirmation Dialog</h2>
        <p className="mb-4 text-sm text-muted-foreground">
          Gates a destructive action with user confirmation.
        </p>
 
        <DialogRoot>
          <DialogTrigger asChild>
            <Button type="button" variant="destructive">
              Delete Account
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Are you sure?</DialogTitle>
              <DialogDescription>
                This action cannot be undone. Your account and all associated
                data will be permanently deleted.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose asChild>
                <Button type="button" variant="outline">
                  Cancel
                </Button>
              </DialogClose>
              <Button type="button" variant="destructive">
                Delete
              </Button>
            </DialogFooter>
          </DialogContent>
        </DialogRoot>
      </section>
 
      {/* Server content inside dialog */}
      <section className="rounded-lg border bg-muted/50 p-6">
        <h2 className="font-semibold text-lg">Server Content in Dialog</h2>
        <p className="mb-4 text-sm text-muted-foreground">
          Terms content fetched on server, rendered inside client dialog.
        </p>
 
        <DialogRoot>
          <DialogTrigger asChild>
            <Button type="button" variant="outline">
              View Terms
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Terms of Service</DialogTitle>
              <DialogDescription>
                Please read these terms carefully.
              </DialogDescription>
            </DialogHeader>
            {/* Server-rendered content passed through */}
            <div className="rounded-md bg-muted p-4 text-sm">
              {termsContent}
            </div>
            <DialogFooter>
              <DialogClose asChild>
                <Button type="button">I Understand</Button>
              </DialogClose>
            </DialogFooter>
          </DialogContent>
        </DialogRoot>
      </section>
 
      {/* A11y notes */}
      <section className="rounded-lg border bg-muted/50 p-6">
        <h2 className="font-semibold text-lg">Accessibility Features</h2>
        <ul className="mt-2 list-inside list-disc space-y-1 text-sm text-muted-foreground">
          <li>Focus trap: Tab cycles through dialog elements only</li>
          <li>Escape key: Closes the dialog</li>
          <li>Click outside: Closes the dialog</li>
          <li>ARIA: Title and Description linked via aria-labelledby/describedby</li>
          <li>Screen reader: Announces dialog open/close</li>
        </ul>
      </section>
    </main>
  )
}

// Server Component - blog app also uses the shared Dialog
 
import { Button } from '@repo/ui/components/button'
import {
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@repo/ui/components/dialog'
 
export default function BlogDialogDemoPage() {
  return (
    <main className="flex flex-col gap-8 p-8">
      <div>
        <h1 className="font-bold text-3xl">Blog: Dialog Demo</h1>
        <p className="mt-2 text-muted-foreground">
          Same compound component from @repo/ui works in blog app.
        </p>
      </div>
 
      {/* Newsletter signup dialog */}
      <section className="rounded-lg border bg-muted/50 p-6">
        <h2 className="font-semibold text-lg">Newsletter Signup</h2>
        <p className="mb-4 text-sm text-muted-foreground">
          Example: gate newsletter subscription behind a dialog.
        </p>
 
        <DialogRoot>
          <DialogTrigger asChild>
            <Button type="button">Subscribe to Newsletter</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Join Our Newsletter</DialogTitle>
              <DialogDescription>
                Get the latest articles delivered to your inbox.
              </DialogDescription>
            </DialogHeader>
            <form className="flex flex-col gap-4">
              <input
                type="email"
                placeholder="your@email.com"
                className="rounded-md border bg-background px-3 py-2 text-sm"
              />
              <DialogFooter>
                <DialogClose asChild>
                  <Button type="button" variant="outline">
                    Cancel
                  </Button>
                </DialogClose>
                <Button type="submit">Subscribe</Button>
              </DialogFooter>
            </form>
          </DialogContent>
        </DialogRoot>
      </section>
    </main>
  )
}

// ❌ BREAKS in Server Components
export const Dialog = {
  Root: DialogRoot,
  Trigger: DialogTrigger,
  Content: DialogContent,
}
 
// ✅ WORKS
export {
  DialogRoot,
  DialogTrigger,
  DialogContent,
}

// ❌ BREAKS
import { Dialog } from '@repo/ui/components/dialog'
<Dialog.Root>...</Dialog.Root>
 
// ✅ WORKS
import { DialogRoot, DialogTrigger, DialogContent } from '@repo/ui/components/dialog'
<DialogRoot>...</DialogRoot>