@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/ui/loading.md

@@ -1,291 +0,0 @@
-# Loading State Patterns
-
-Patterns for loading states and skeletons.
-
-## Skeleton Components
-
-```tsx
-// components/ui/Skeleton.tsx
-interface Props {
-  className?: string
-  variant?: 'text' | 'circular' | 'rectangular'
-  width?: string | number
-  height?: string | number
-}
-
-export function Skeleton({
-  className = '',
-  variant = 'text',
-  width,
-  height
-}: Props) {
-  const baseClasses = 'animate-pulse bg-gray-200'
-
-  const variantClasses = {
-    text: 'rounded',
-    circular: 'rounded-full',
-    rectangular: 'rounded-lg'
-  }
-
-  const style = {
-    width: typeof width === 'number' ? `${width}px` : width,
-    height: typeof height === 'number' ? `${height}px` : height
-  }
-
-  return (
-    <div
-      className={`${baseClasses} ${variantClasses[variant]} ${className}`}
-      style={style}
-    />
-  )
-}
-
-// Usage
-<Skeleton variant="circular" width={40} height={40} />
-<Skeleton variant="text" className="h-4 w-3/4" />
-<Skeleton variant="rectangular" className="h-48 w-full" />
-```
-
-## Card Skeleton
-
-```tsx
-// components/skeletons/CardSkeleton.tsx
-import { Skeleton } from '@/components/ui/Skeleton'
-
-export function CardSkeleton() {
-  return (
-    <div className="rounded-lg border bg-white p-6">
-      <div className="flex items-center gap-4">
-        <Skeleton variant="circular" width={48} height={48} />
-        <div className="flex-1 space-y-2">
-          <Skeleton className="h-4 w-1/2" />
-          <Skeleton className="h-3 w-1/3" />
-        </div>
-      </div>
-      <div className="mt-4 space-y-2">
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-2/3" />
-      </div>
-    </div>
-  )
-}
-
-export function CardGridSkeleton({ count = 6 }: { count?: number }) {
-  return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-      {Array.from({ length: count }).map((_, i) => (
-        <CardSkeleton key={i} />
-      ))}
-    </div>
-  )
-}
-```
-
-## Table Skeleton
-
-```tsx
-// components/skeletons/TableSkeleton.tsx
-import { Skeleton } from '@/components/ui/Skeleton'
-
-export function TableSkeleton({ rows = 5, cols = 4 }: { rows?: number; cols?: number }) {
-  return (
-    <div className="rounded-lg border">
-      {/* Header */}
-      <div className="flex gap-4 border-b bg-gray-50 p-4">
-        {Array.from({ length: cols }).map((_, i) => (
-          <Skeleton key={i} className="h-4 flex-1" />
-        ))}
-      </div>
-
-      {/* Rows */}
-      {Array.from({ length: rows }).map((_, rowIndex) => (
-        <div key={rowIndex} className="flex gap-4 border-b p-4 last:border-0">
-          {Array.from({ length: cols }).map((_, colIndex) => (
-            <Skeleton
-              key={colIndex}
-              className={`h-4 flex-1 ${colIndex === 0 ? 'w-1/4' : ''}`}
-            />
-          ))}
-        </div>
-      ))}
-    </div>
-  )
-}
-```
-
-## Loading Spinner
-
-```tsx
-// components/ui/Spinner.tsx
-interface Props {
-  size?: 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-export function Spinner({ size = 'md', className = '' }: Props) {
-  const sizeClasses = {
-    sm: 'h-4 w-4',
-    md: 'h-6 w-6',
-    lg: 'h-8 w-8'
-  }
-
-  return (
-    <svg
-      className={`animate-spin ${sizeClasses[size]} ${className}`}
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  )
-}
-
-// Full page loading
-export function PageLoader() {
-  return (
-    <div className="flex min-h-screen items-center justify-center">
-      <Spinner size="lg" />
-    </div>
-  )
-}
-```
-
-## Loading Button
-
-```tsx
-// components/ui/LoadingButton.tsx
-import { Spinner } from './Spinner'
-
-interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  loading?: boolean
-  children: React.ReactNode
-}
-
-export function LoadingButton({ loading, children, disabled, ...props }: Props) {
-  return (
-    <button
-      {...props}
-      disabled={disabled || loading}
-      className={`relative inline-flex items-center justify-center ${props.className}`}
-    >
-      {loading && (
-        <Spinner size="sm" className="absolute" />
-      )}
-      <span className={loading ? 'invisible' : ''}>{children}</span>
-    </button>
-  )
-}
-```
-
-## Next.js Loading UI
-
-```tsx
-// app/dashboard/loading.tsx
-import { CardGridSkeleton } from '@/components/skeletons/CardSkeleton'
-
-export default function DashboardLoading() {
-  return (
-    <div className="space-y-6">
-      {/* Stats skeleton */}
-      <div className="grid gap-4 md:grid-cols-4">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} className="rounded-lg border p-6">
-            <Skeleton className="mb-2 h-4 w-1/2" />
-            <Skeleton className="h-8 w-1/3" />
-          </div>
-        ))}
-      </div>
-
-      {/* Cards skeleton */}
-      <CardGridSkeleton count={6} />
-    </div>
-  )
-}
-```
-
-## Suspense Boundaries
-
-```tsx
-// app/dashboard/page.tsx
-import { Suspense } from 'react'
-import { CardGridSkeleton } from '@/components/skeletons/CardSkeleton'
-
-export default function DashboardPage() {
-  return (
-    <div className="space-y-6">
-      {/* Immediately rendered */}
-      <h1 className="text-2xl font-bold">Dashboard</h1>
-
-      {/* Stream in */}
-      <Suspense fallback={<CardGridSkeleton />}>
-        <DataCards />
-      </Suspense>
-
-      <Suspense fallback={<TableSkeleton />}>
-        <RecentActivity />
-      </Suspense>
-    </div>
-  )
-}
-
-async function DataCards() {
-  const data = await fetchData()
-  return <CardGrid data={data} />
-}
-```
-
-## Progress Indicator
-
-```tsx
-// components/ui/Progress.tsx
-interface Props {
-  value: number
-  max?: number
-  showLabel?: boolean
-  size?: 'sm' | 'md' | 'lg'
-}
-
-export function Progress({ value, max = 100, showLabel = false, size = 'md' }: Props) {
-  const percentage = Math.min(100, (value / max) * 100)
-
-  const sizeClasses = {
-    sm: 'h-1',
-    md: 'h-2',
-    lg: 'h-4'
-  }
-
-  return (
-    <div className="w-full">
-      <div className={`w-full overflow-hidden rounded-full bg-gray-200 ${sizeClasses[size]}`}>
-        <div
-          className="h-full rounded-full bg-blue-600 transition-all duration-300"
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-      {showLabel && (
-        <p className="mt-1 text-sm text-gray-500">{Math.round(percentage)}%</p>
-      )}
-    </div>
-  )
-}
-```
-
-## When to Use
-
-- Data fetching
-- Page transitions
-- Async operations
-- Upload progress

package/skills/patterns/ui/modals.md

@@ -1,338 +0,0 @@
-# Modal Patterns
-
-Patterns for building accessible modals and dialogs.
-
-## Basic Modal
-
-```tsx
-// components/ui/Modal.tsx
-'use client'
-
-import { useEffect, useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { X } from 'lucide-react'
-
-interface Props {
-  isOpen: boolean
-  onClose: () => void
-  title: string
-  children: React.ReactNode
-}
-
-export function Modal({ isOpen, onClose, title, children }: Props) {
-  const overlayRef = useRef<HTMLDivElement>(null)
-
-  // Close on escape
-  useEffect(() => {
-    function handleEscape(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
-    }
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape)
-      document.body.style.overflow = 'hidden'
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape)
-      document.body.style.overflow = ''
-    }
-  }, [isOpen, onClose])
-
-  // Close on overlay click
-  function handleOverlayClick(e: React.MouseEvent) {
-    if (e.target === overlayRef.current) onClose()
-  }
-
-  if (!isOpen) return null
-
-  return createPortal(
-    <div
-      ref={overlayRef}
-      onClick={handleOverlayClick}
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="modal-title"
-    >
-      <div className="relative w-full max-w-lg rounded-lg bg-white p-6 shadow-xl">
-        <div className="mb-4 flex items-center justify-between">
-          <h2 id="modal-title" className="text-xl font-semibold">
-            {title}
-          </h2>
-          <button
-            onClick={onClose}
-            className="rounded p-1 hover:bg-gray-100"
-            aria-label="Close modal"
-          >
-            <X className="h-5 w-5" />
-          </button>
-        </div>
-        {children}
-      </div>
-    </div>,
-    document.body
-  )
-}
-```
-
-## Radix Dialog
-
-```tsx
-// components/ui/Dialog.tsx
-'use client'
-
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { X } from 'lucide-react'
-
-export function Dialog({ children, ...props }: DialogPrimitive.DialogProps) {
-  return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>
-}
-
-export const DialogTrigger = DialogPrimitive.Trigger
-
-export function DialogContent({
-  children,
-  title,
-  description
-}: {
-  children: React.ReactNode
-  title: string
-  description?: string
-}) {
-  return (
-    <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-fadeIn" />
-      <DialogPrimitive.Content className="fixed left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl data-[state=open]:animate-scaleIn">
-        <DialogPrimitive.Title className="text-xl font-semibold">
-          {title}
-        </DialogPrimitive.Title>
-
-        {description && (
-          <DialogPrimitive.Description className="mt-2 text-gray-600">
-            {description}
-          </DialogPrimitive.Description>
-        )}
-
-        <div className="mt-4">{children}</div>
-
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded p-1 hover:bg-gray-100">
-          <X className="h-5 w-5" />
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPrimitive.Portal>
-  )
-}
-
-// Usage
-<Dialog>
-  <DialogTrigger asChild>
-    <button>Open Dialog</button>
-  </DialogTrigger>
-  <DialogContent title="Edit Profile">
-    <form>...</form>
-  </DialogContent>
-</Dialog>
-```
-
-## Confirmation Dialog
-
-```tsx
-// components/ui/ConfirmDialog.tsx
-'use client'
-
-import { useState } from 'react'
-import { Dialog, DialogContent } from './Dialog'
-
-interface Props {
-  title: string
-  message: string
-  confirmText?: string
-  cancelText?: string
-  variant?: 'danger' | 'warning' | 'default'
-  onConfirm: () => void | Promise<void>
-  trigger: React.ReactNode
-}
-
-export function ConfirmDialog({
-  title,
-  message,
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
-  variant = 'default',
-  onConfirm,
-  trigger
-}: Props) {
-  const [open, setOpen] = useState(false)
-  const [loading, setLoading] = useState(false)
-
-  async function handleConfirm() {
-    setLoading(true)
-    try {
-      await onConfirm()
-      setOpen(false)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const confirmClass = {
-    danger: 'bg-red-600 hover:bg-red-700',
-    warning: 'bg-amber-600 hover:bg-amber-700',
-    default: 'bg-black hover:bg-gray-800'
-  }[variant]
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent title={title} description={message}>
-        <div className="mt-6 flex justify-end gap-3">
-          <button
-            onClick={() => setOpen(false)}
-            className="rounded px-4 py-2 hover:bg-gray-100"
-          >
-            {cancelText}
-          </button>
-          <button
-            onClick={handleConfirm}
-            disabled={loading}
-            className={`rounded px-4 py-2 text-white ${confirmClass}`}
-          >
-            {loading ? 'Loading...' : confirmText}
-          </button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-// Usage
-<ConfirmDialog
-  title="Delete Item"
-  message="Are you sure you want to delete this item? This action cannot be undone."
-  confirmText="Delete"
-  variant="danger"
-  onConfirm={() => deleteItem(id)}
-  trigger={<button>Delete</button>}
-/>
-```
-
-## Sheet / Drawer
-
-```tsx
-// components/ui/Sheet.tsx
-'use client'
-
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { X } from 'lucide-react'
-
-type Side = 'left' | 'right' | 'top' | 'bottom'
-
-interface Props {
-  children: React.ReactNode
-  side?: Side
-  title: string
-}
-
-const sideClasses: Record<Side, string> = {
-  left: 'left-0 top-0 h-full w-80 data-[state=open]:animate-slideInLeft',
-  right: 'right-0 top-0 h-full w-80 data-[state=open]:animate-slideInRight',
-  top: 'top-0 left-0 w-full h-80 data-[state=open]:animate-slideInTop',
-  bottom: 'bottom-0 left-0 w-full h-80 data-[state=open]:animate-slideInBottom'
-}
-
-export function SheetContent({ children, side = 'right', title }: Props) {
-  return (
-    <SheetPrimitive.Portal>
-      <SheetPrimitive.Overlay className="fixed inset-0 bg-black/50" />
-      <SheetPrimitive.Content
-        className={`fixed bg-white p-6 shadow-xl ${sideClasses[side]}`}
-      >
-        <div className="mb-4 flex items-center justify-between">
-          <SheetPrimitive.Title className="text-lg font-semibold">
-            {title}
-          </SheetPrimitive.Title>
-          <SheetPrimitive.Close className="rounded p-1 hover:bg-gray-100">
-            <X className="h-5 w-5" />
-          </SheetPrimitive.Close>
-        </div>
-        {children}
-      </SheetPrimitive.Content>
-    </SheetPrimitive.Portal>
-  )
-}
-
-// Usage
-<Sheet>
-  <SheetTrigger asChild>
-    <button>Open Menu</button>
-  </SheetTrigger>
-  <SheetContent side="left" title="Navigation">
-    <nav>...</nav>
-  </SheetContent>
-</Sheet>
-```
-
-## Modal with Form
-
-```tsx
-// components/modals/EditUserModal.tsx
-'use client'
-
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/Dialog'
-
-interface Props {
-  user: User
-  onUpdate: (data: UserData) => Promise<void>
-}
-
-export function EditUserModal({ user, onUpdate }: Props) {
-  const [open, setOpen] = useState(false)
-  const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm({
-    defaultValues: { name: user.name, email: user.email }
-  })
-
-  async function onSubmit(data: UserData) {
-    await onUpdate(data)
-    setOpen(false)
-    reset(data)
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <button>Edit</button>
-      </DialogTrigger>
-      <DialogContent title="Edit User">
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div>
-            <label>Name</label>
-            <input {...register('name')} />
-          </div>
-          <div>
-            <label>Email</label>
-            <input {...register('email')} type="email" />
-          </div>
-          <div className="flex justify-end gap-2">
-            <button type="button" onClick={() => setOpen(false)}>
-              Cancel
-            </button>
-            <button type="submit" disabled={isSubmitting}>
-              {isSubmitting ? 'Saving...' : 'Save'}
-            </button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}
-```
-
-## When to Use
-
-- Confirmations
-- Quick forms
-- Notifications
-- Side panels