@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/ui/dropdowns.md

@@ -1,476 +0,0 @@
-# Dropdown Patterns
-
-Patterns for dropdown menus and select components.
-
-## Basic Dropdown Menu
-
-```tsx
-// components/ui/DropdownMenu.tsx
-'use client'
-
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { forwardRef } from 'react'
-import { cn } from '@/lib/utils'
-
-export const DropdownMenu = DropdownMenuPrimitive.Root
-export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-export const DropdownMenuContent = forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 shadow-md',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = 'DropdownMenuContent'
-
-export const DropdownMenuItem = forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-      'focus:bg-gray-100 focus:text-gray-900',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = 'DropdownMenuItem'
-
-export const DropdownMenuSeparator = forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-gray-200', className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = 'DropdownMenuSeparator'
-```
-
-## User Menu Dropdown
-
-```tsx
-// components/UserMenu.tsx
-'use client'
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@/components/ui/DropdownMenu'
-import { signOut, useSession } from 'next-auth/react'
-import { User, Settings, LogOut, CreditCard } from 'lucide-react'
-import Link from 'next/link'
-import Image from 'next/image'
-
-export function UserMenu() {
-  const { data: session } = useSession()
-
-  if (!session?.user) return null
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className="flex items-center gap-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
-          {session.user.image ? (
-            <Image
-              src={session.user.image}
-              alt={session.user.name ?? ''}
-              width={32}
-              height={32}
-              className="rounded-full"
-            />
-          ) : (
-            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
-              <User className="h-4 w-4" />
-            </div>
-          )}
-        </button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="end" className="w-56">
-        <div className="px-2 py-1.5">
-          <p className="text-sm font-medium">{session.user.name}</p>
-          <p className="text-xs text-gray-500">{session.user.email}</p>
-        </div>
-
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem asChild>
-          <Link href="/settings/profile" className="flex items-center gap-2">
-            <User className="h-4 w-4" />
-            Profile
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem asChild>
-          <Link href="/settings" className="flex items-center gap-2">
-            <Settings className="h-4 w-4" />
-            Settings
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem asChild>
-          <Link href="/billing" className="flex items-center gap-2">
-            <CreditCard className="h-4 w-4" />
-            Billing
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem
-          onClick={() => signOut()}
-          className="text-red-600 focus:text-red-600"
-        >
-          <LogOut className="mr-2 h-4 w-4" />
-          Sign out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-```
-
-## Actions Dropdown
-
-```tsx
-// components/ActionsDropdown.tsx
-'use client'
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@/components/ui/DropdownMenu'
-import { MoreHorizontal, Edit, Copy, Archive, Trash2 } from 'lucide-react'
-
-interface ActionsDropdownProps {
-  onEdit?: () => void
-  onDuplicate?: () => void
-  onArchive?: () => void
-  onDelete?: () => void
-}
-
-export function ActionsDropdown({
-  onEdit,
-  onDuplicate,
-  onArchive,
-  onDelete
-}: ActionsDropdownProps) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className="rounded p-1 hover:bg-gray-100 focus:outline-none focus:ring-2">
-          <MoreHorizontal className="h-4 w-4" />
-          <span className="sr-only">Actions</span>
-        </button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="end">
-        {onEdit && (
-          <DropdownMenuItem onClick={onEdit}>
-            <Edit className="mr-2 h-4 w-4" />
-            Edit
-          </DropdownMenuItem>
-        )}
-
-        {onDuplicate && (
-          <DropdownMenuItem onClick={onDuplicate}>
-            <Copy className="mr-2 h-4 w-4" />
-            Duplicate
-          </DropdownMenuItem>
-        )}
-
-        {onArchive && (
-          <DropdownMenuItem onClick={onArchive}>
-            <Archive className="mr-2 h-4 w-4" />
-            Archive
-          </DropdownMenuItem>
-        )}
-
-        {onDelete && (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={onDelete}
-              className="text-red-600 focus:text-red-600"
-            >
-              <Trash2 className="mr-2 h-4 w-4" />
-              Delete
-            </DropdownMenuItem>
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-```
-
-## Combobox / Searchable Select
-
-```tsx
-// components/ui/Combobox.tsx
-'use client'
-
-import { useState } from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import * as Popover from '@radix-ui/react-popover'
-import { cn } from '@/lib/utils'
-
-interface Option {
-  value: string
-  label: string
-}
-
-interface ComboboxProps {
-  options: Option[]
-  value?: string
-  onChange: (value: string) => void
-  placeholder?: string
-  searchPlaceholder?: string
-  emptyText?: string
-}
-
-export function Combobox({
-  options,
-  value,
-  onChange,
-  placeholder = 'Select option...',
-  searchPlaceholder = 'Search...',
-  emptyText = 'No results found.'
-}: ComboboxProps) {
-  const [open, setOpen] = useState(false)
-  const [search, setSearch] = useState('')
-
-  const filteredOptions = options.filter(option =>
-    option.label.toLowerCase().includes(search.toLowerCase())
-  )
-
-  const selectedOption = options.find(opt => opt.value === value)
-
-  return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>
-        <button
-          role="combobox"
-          aria-expanded={open}
-          className={cn(
-            'flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500',
-            !value && 'text-gray-500'
-          )}
-        >
-          {selectedOption?.label ?? placeholder}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </button>
-      </Popover.Trigger>
-
-      <Popover.Portal>
-        <Popover.Content
-          className="z-50 w-[--radix-popover-trigger-width] rounded-md border bg-white shadow-md"
-          sideOffset={4}
-        >
-          <div className="p-2">
-            <input
-              type="text"
-              placeholder={searchPlaceholder}
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              className="w-full rounded border px-2 py-1.5 text-sm focus:outline-none focus:ring-1"
-            />
-          </div>
-
-          <div className="max-h-60 overflow-auto p-1">
-            {filteredOptions.length === 0 ? (
-              <p className="p-2 text-center text-sm text-gray-500">{emptyText}</p>
-            ) : (
-              filteredOptions.map(option => (
-                <button
-                  key={option.value}
-                  onClick={() => {
-                    onChange(option.value)
-                    setOpen(false)
-                    setSearch('')
-                  }}
-                  className={cn(
-                    'flex w-full items-center rounded-sm px-2 py-1.5 text-sm',
-                    'hover:bg-gray-100 focus:bg-gray-100 focus:outline-none',
-                    value === option.value && 'bg-gray-100'
-                  )}
-                >
-                  <Check
-                    className={cn(
-                      'mr-2 h-4 w-4',
-                      value === option.value ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                  {option.label}
-                </button>
-              ))
-            )}
-          </div>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  )
-}
-```
-
-## Multi-Select Dropdown
-
-```tsx
-// components/ui/MultiSelect.tsx
-'use client'
-
-import { useState } from 'react'
-import { X, Check, ChevronsUpDown } from 'lucide-react'
-import * as Popover from '@radix-ui/react-popover'
-import { cn } from '@/lib/utils'
-
-interface Option {
-  value: string
-  label: string
-}
-
-interface MultiSelectProps {
-  options: Option[]
-  value: string[]
-  onChange: (value: string[]) => void
-  placeholder?: string
-  maxDisplay?: number
-}
-
-export function MultiSelect({
-  options,
-  value,
-  onChange,
-  placeholder = 'Select options...',
-  maxDisplay = 3
-}: MultiSelectProps) {
-  const [open, setOpen] = useState(false)
-
-  const selectedOptions = options.filter(opt => value.includes(opt.value))
-
-  const toggleOption = (optionValue: string) => {
-    if (value.includes(optionValue)) {
-      onChange(value.filter(v => v !== optionValue))
-    } else {
-      onChange([...value, optionValue])
-    }
-  }
-
-  const removeOption = (optionValue: string) => {
-    onChange(value.filter(v => v !== optionValue))
-  }
-
-  return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>
-        <button
-          className={cn(
-            'flex min-h-[38px] w-full flex-wrap items-center gap-1 rounded-md border px-2 py-1',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500'
-          )}
-        >
-          {selectedOptions.length === 0 ? (
-            <span className="text-sm text-gray-500">{placeholder}</span>
-          ) : (
-            <>
-              {selectedOptions.slice(0, maxDisplay).map(option => (
-                <span
-                  key={option.value}
-                  className="flex items-center gap-1 rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-800"
-                >
-                  {option.label}
-                  <button
-                    onClick={e => {
-                      e.stopPropagation()
-                      removeOption(option.value)
-                    }}
-                    className="hover:text-blue-600"
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                </span>
-              ))}
-              {selectedOptions.length > maxDisplay && (
-                <span className="text-xs text-gray-500">
-                  +{selectedOptions.length - maxDisplay} more
-                </span>
-              )}
-            </>
-          )}
-          <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
-        </button>
-      </Popover.Trigger>
-
-      <Popover.Portal>
-        <Popover.Content
-          className="z-50 w-[--radix-popover-trigger-width] rounded-md border bg-white p-1 shadow-md"
-          sideOffset={4}
-        >
-          <div className="max-h-60 overflow-auto">
-            {options.map(option => (
-              <button
-                key={option.value}
-                onClick={() => toggleOption(option.value)}
-                className={cn(
-                  'flex w-full items-center rounded-sm px-2 py-1.5 text-sm',
-                  'hover:bg-gray-100 focus:bg-gray-100 focus:outline-none'
-                )}
-              >
-                <div
-                  className={cn(
-                    'mr-2 flex h-4 w-4 items-center justify-center rounded border',
-                    value.includes(option.value)
-                      ? 'border-blue-500 bg-blue-500 text-white'
-                      : 'border-gray-300'
-                  )}
-                >
-                  {value.includes(option.value) && <Check className="h-3 w-3" />}
-                </div>
-                {option.label}
-              </button>
-            ))}
-          </div>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  )
-}
-```
-
-## When to Use
-
-- Navigation menus
-- User account menus
-- Action menus
-- Searchable selects
-- Multi-select inputs