@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/ui/empty-states.md

@@ -1,320 +0,0 @@
-# Empty State Patterns
-
-Patterns for empty states and zero-data displays.
-
-## Basic Empty State
-
-```tsx
-// components/ui/EmptyState.tsx
-interface Props {
-  icon?: React.ReactNode
-  title: string
-  description: string
-  action?: {
-    label: string
-    onClick: () => void
-  }
-}
-
-export function EmptyState({ icon, title, description, action }: Props) {
-  return (
-    <div className="flex flex-col items-center justify-center py-12 text-center">
-      {icon && (
-        <div className="mb-4 rounded-full bg-gray-100 p-4 text-gray-400">
-          {icon}
-        </div>
-      )}
-
-      <h3 className="mb-2 text-lg font-medium">{title}</h3>
-      <p className="mb-6 max-w-sm text-gray-500">{description}</p>
-
-      {action && (
-        <button
-          onClick={action.onClick}
-          className="rounded-lg bg-black px-4 py-2 text-white hover:bg-gray-800"
-        >
-          {action.label}
-        </button>
-      )}
-    </div>
-  )
-}
-```
-
-## Illustrated Empty State
-
-```tsx
-// components/ui/IllustratedEmptyState.tsx
-import Image from 'next/image'
-
-interface Props {
-  illustration: string
-  title: string
-  description: string
-  children?: React.ReactNode
-}
-
-export function IllustratedEmptyState({
-  illustration,
-  title,
-  description,
-  children
-}: Props) {
-  return (
-    <div className="flex flex-col items-center py-16 text-center">
-      <Image
-        src={illustration}
-        alt=""
-        width={200}
-        height={200}
-        className="mb-6"
-      />
-
-      <h2 className="mb-2 text-xl font-semibold">{title}</h2>
-      <p className="mb-8 max-w-md text-gray-600">{description}</p>
-
-      {children}
-    </div>
-  )
-}
-
-// Usage
-<IllustratedEmptyState
-  illustration="/illustrations/no-projects.svg"
-  title="No projects yet"
-  description="Create your first project to get started with collaboration and task management."
->
-  <button className="rounded-lg bg-blue-600 px-6 py-3 text-white">
-    Create Project
-  </button>
-</IllustratedEmptyState>
-```
-
-## Search Empty State
-
-```tsx
-// components/ui/SearchEmptyState.tsx
-import { Search } from 'lucide-react'
-
-interface Props {
-  query: string
-  onClear: () => void
-}
-
-export function SearchEmptyState({ query, onClear }: Props) {
-  return (
-    <div className="flex flex-col items-center py-12 text-center">
-      <div className="mb-4 rounded-full bg-gray-100 p-4">
-        <Search className="h-8 w-8 text-gray-400" />
-      </div>
-
-      <h3 className="mb-2 text-lg font-medium">No results found</h3>
-      <p className="mb-4 text-gray-500">
-        No results for "<span className="font-medium">{query}</span>"
-      </p>
-
-      <div className="space-y-2 text-sm text-gray-500">
-        <p>Try:</p>
-        <ul className="list-inside list-disc">
-          <li>Using different keywords</li>
-          <li>Checking for typos</li>
-          <li>Using more general terms</li>
-        </ul>
-      </div>
-
-      <button
-        onClick={onClear}
-        className="mt-6 text-blue-600 hover:underline"
-      >
-        Clear search
-      </button>
-    </div>
-  )
-}
-```
-
-## Error Empty State
-
-```tsx
-// components/ui/ErrorState.tsx
-import { AlertTriangle, RefreshCw } from 'lucide-react'
-
-interface Props {
-  title?: string
-  message?: string
-  onRetry?: () => void
-}
-
-export function ErrorState({
-  title = 'Something went wrong',
-  message = 'We encountered an error loading this content.',
-  onRetry
-}: Props) {
-  return (
-    <div className="flex flex-col items-center py-12 text-center">
-      <div className="mb-4 rounded-full bg-red-100 p-4">
-        <AlertTriangle className="h-8 w-8 text-red-500" />
-      </div>
-
-      <h3 className="mb-2 text-lg font-medium text-gray-900">{title}</h3>
-      <p className="mb-6 max-w-sm text-gray-500">{message}</p>
-
-      {onRetry && (
-        <button
-          onClick={onRetry}
-          className="inline-flex items-center gap-2 rounded-lg border px-4 py-2 hover:bg-gray-50"
-        >
-          <RefreshCw className="h-4 w-4" />
-          Try again
-        </button>
-      )}
-    </div>
-  )
-}
-```
-
-## List Empty States
-
-```tsx
-// components/lists/EmptyListStates.tsx
-
-export function EmptyInbox() {
-  return (
-    <EmptyState
-      icon={<Inbox className="h-8 w-8" />}
-      title="Your inbox is empty"
-      description="When you receive messages, they'll appear here."
-    />
-  )
-}
-
-export function EmptyNotifications() {
-  return (
-    <EmptyState
-      icon={<Bell className="h-8 w-8" />}
-      title="No notifications"
-      description="You're all caught up! Check back later for updates."
-    />
-  )
-}
-
-export function EmptyTasks() {
-  return (
-    <EmptyState
-      icon={<CheckSquare className="h-8 w-8" />}
-      title="No tasks yet"
-      description="Create your first task to start organizing your work."
-      action={{
-        label: 'Create Task',
-        onClick: () => openCreateTaskModal()
-      }}
-    />
-  )
-}
-
-export function EmptyTeamMembers() {
-  return (
-    <EmptyState
-      icon={<Users className="h-8 w-8" />}
-      title="No team members"
-      description="Invite your team members to start collaborating."
-      action={{
-        label: 'Invite Members',
-        onClick: () => openInviteModal()
-      }}
-    />
-  )
-}
-```
-
-## Conditional Empty State
-
-```tsx
-// components/DataList.tsx
-interface Props<T> {
-  data: T[]
-  renderItem: (item: T) => React.ReactNode
-  emptyState: React.ReactNode
-  loading?: boolean
-  loadingSkeleton?: React.ReactNode
-}
-
-export function DataList<T>({
-  data,
-  renderItem,
-  emptyState,
-  loading,
-  loadingSkeleton
-}: Props<T>) {
-  if (loading) {
-    return loadingSkeleton ?? <DefaultSkeleton />
-  }
-
-  if (data.length === 0) {
-    return emptyState
-  }
-
-  return (
-    <div className="space-y-2">
-      {data.map(renderItem)}
-    </div>
-  )
-}
-
-// Usage
-<DataList
-  data={projects}
-  loading={isLoading}
-  loadingSkeleton={<ProjectsSkeleton />}
-  emptyState={
-    <EmptyState
-      icon={<Folder />}
-      title="No projects"
-      description="Create a project to get started"
-      action={{ label: 'New Project', onClick: handleCreate }}
-    />
-  }
-  renderItem={(project) => <ProjectCard project={project} />}
-/>
-```
-
-## Filter Empty State
-
-```tsx
-// components/ui/FilterEmptyState.tsx
-import { Filter } from 'lucide-react'
-
-interface Props {
-  filterCount: number
-  onClearFilters: () => void
-}
-
-export function FilterEmptyState({ filterCount, onClearFilters }: Props) {
-  return (
-    <div className="flex flex-col items-center py-12 text-center">
-      <div className="mb-4 rounded-full bg-gray-100 p-4">
-        <Filter className="h-8 w-8 text-gray-400" />
-      </div>
-
-      <h3 className="mb-2 text-lg font-medium">No matching results</h3>
-      <p className="mb-6 text-gray-500">
-        {filterCount} active {filterCount === 1 ? 'filter' : 'filters'} may be too restrictive.
-      </p>
-
-      <button
-        onClick={onClearFilters}
-        className="rounded-lg border px-4 py-2 hover:bg-gray-50"
-      >
-        Clear all filters
-      </button>
-    </div>
-  )
-}
-```
-
-## When to Use
-
-- Empty lists
-- Search results
-- Error recovery
-- Onboarding

package/skills/patterns/ui/forms.md

@@ -1,405 +0,0 @@
-# Form Patterns
-
-Patterns for building forms with React Hook Form and Zod.
-
-## Basic Form
-
-```tsx
-// components/forms/ContactForm.tsx
-'use client'
-
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-
-const formSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email'),
-  message: z.string().min(10, 'Message must be at least 10 characters')
-})
-
-type FormData = z.infer<typeof formSchema>
-
-export function ContactForm() {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    reset
-  } = useForm<FormData>({
-    resolver: zodResolver(formSchema)
-  })
-
-  async function onSubmit(data: FormData) {
-    await fetch('/api/contact', {
-      method: 'POST',
-      body: JSON.stringify(data)
-    })
-    reset()
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <div>
-        <label htmlFor="name">Name</label>
-        <input
-          id="name"
-          {...register('name')}
-          className="w-full rounded border p-2"
-        />
-        {errors.name && (
-          <p className="text-sm text-red-500">{errors.name.message}</p>
-        )}
-      </div>
-
-      <div>
-        <label htmlFor="email">Email</label>
-        <input
-          id="email"
-          type="email"
-          {...register('email')}
-          className="w-full rounded border p-2"
-        />
-        {errors.email && (
-          <p className="text-sm text-red-500">{errors.email.message}</p>
-        )}
-      </div>
-
-      <div>
-        <label htmlFor="message">Message</label>
-        <textarea
-          id="message"
-          {...register('message')}
-          rows={4}
-          className="w-full rounded border p-2"
-        />
-        {errors.message && (
-          <p className="text-sm text-red-500">{errors.message.message}</p>
-        )}
-      </div>
-
-      <button
-        type="submit"
-        disabled={isSubmitting}
-        className="rounded bg-black px-4 py-2 text-white disabled:opacity-50"
-      >
-        {isSubmitting ? 'Sending...' : 'Send'}
-      </button>
-    </form>
-  )
-}
-```
-
-## Server Action Form
-
-```tsx
-// app/actions.ts
-'use server'
-
-import { z } from 'zod'
-import { revalidatePath } from 'next/cache'
-
-const schema = z.object({
-  title: z.string().min(1),
-  content: z.string().min(1)
-})
-
-export async function createPost(formData: FormData) {
-  const parsed = schema.safeParse({
-    title: formData.get('title'),
-    content: formData.get('content')
-  })
-
-  if (!parsed.success) {
-    return { error: parsed.error.flatten().fieldErrors }
-  }
-
-  await prisma.post.create({ data: parsed.data })
-  revalidatePath('/posts')
-
-  return { success: true }
-}
-
-// components/CreatePostForm.tsx
-'use client'
-
-import { useFormState, useFormStatus } from 'react-dom'
-import { createPost } from '@/app/actions'
-
-function SubmitButton() {
-  const { pending } = useFormStatus()
-
-  return (
-    <button type="submit" disabled={pending}>
-      {pending ? 'Creating...' : 'Create Post'}
-    </button>
-  )
-}
-
-export function CreatePostForm() {
-  const [state, action] = useFormState(createPost, null)
-
-  return (
-    <form action={action} className="space-y-4">
-      <div>
-        <input name="title" placeholder="Title" />
-        {state?.error?.title && (
-          <p className="text-red-500">{state.error.title}</p>
-        )}
-      </div>
-
-      <div>
-        <textarea name="content" placeholder="Content" />
-        {state?.error?.content && (
-          <p className="text-red-500">{state.error.content}</p>
-        )}
-      </div>
-
-      <SubmitButton />
-    </form>
-  )
-}
-```
-
-## Dynamic Form Fields
-
-```tsx
-// components/forms/DynamicForm.tsx
-'use client'
-
-import { useForm, useFieldArray } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-
-const schema = z.object({
-  items: z.array(z.object({
-    name: z.string().min(1),
-    quantity: z.number().min(1)
-  })).min(1, 'Add at least one item')
-})
-
-type FormData = z.infer<typeof schema>
-
-export function DynamicForm() {
-  const { register, control, handleSubmit, formState: { errors } } = useForm<FormData>({
-    resolver: zodResolver(schema),
-    defaultValues: { items: [{ name: '', quantity: 1 }] }
-  })
-
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: 'items'
-  })
-
-  return (
-    <form onSubmit={handleSubmit(console.log)} className="space-y-4">
-      {fields.map((field, index) => (
-        <div key={field.id} className="flex gap-2">
-          <input
-            {...register(`items.${index}.name`)}
-            placeholder="Item name"
-          />
-          <input
-            type="number"
-            {...register(`items.${index}.quantity`, { valueAsNumber: true })}
-            placeholder="Qty"
-          />
-          <button type="button" onClick={() => remove(index)}>
-            Remove
-          </button>
-        </div>
-      ))}
-
-      {errors.items && (
-        <p className="text-red-500">{errors.items.message}</p>
-      )}
-
-      <div className="flex gap-2">
-        <button
-          type="button"
-          onClick={() => append({ name: '', quantity: 1 })}
-        >
-          Add Item
-        </button>
-        <button type="submit">Submit</button>
-      </div>
-    </form>
-  )
-}
-```
-
-## Multi-Step Form
-
-```tsx
-// components/forms/MultiStepForm.tsx
-'use client'
-
-import { useState } from 'react'
-import { useForm, FormProvider } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-
-const stepSchemas = {
-  personal: z.object({
-    name: z.string().min(1),
-    email: z.string().email()
-  }),
-  address: z.object({
-    street: z.string().min(1),
-    city: z.string().min(1),
-    zip: z.string().min(5)
-  }),
-  payment: z.object({
-    cardNumber: z.string().min(16),
-    expiry: z.string().min(5)
-  })
-}
-
-const fullSchema = z.object({
-  ...stepSchemas.personal.shape,
-  ...stepSchemas.address.shape,
-  ...stepSchemas.payment.shape
-})
-
-type FormData = z.infer<typeof fullSchema>
-
-const steps = ['personal', 'address', 'payment'] as const
-
-export function MultiStepForm() {
-  const [step, setStep] = useState(0)
-  const currentStep = steps[step]
-
-  const methods = useForm<FormData>({
-    resolver: zodResolver(fullSchema),
-    mode: 'onChange'
-  })
-
-  async function nextStep() {
-    const fields = Object.keys(stepSchemas[currentStep].shape) as (keyof FormData)[]
-    const isValid = await methods.trigger(fields)
-
-    if (isValid) {
-      setStep(s => Math.min(s + 1, steps.length - 1))
-    }
-  }
-
-  function prevStep() {
-    setStep(s => Math.max(s - 1, 0))
-  }
-
-  return (
-    <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(console.log)}>
-        {/* Progress indicator */}
-        <div className="mb-8 flex justify-between">
-          {steps.map((s, i) => (
-            <div
-              key={s}
-              className={`h-2 flex-1 ${i <= step ? 'bg-blue-500' : 'bg-gray-200'}`}
-            />
-          ))}
-        </div>
-
-        {/* Step content */}
-        {currentStep === 'personal' && <PersonalStep />}
-        {currentStep === 'address' && <AddressStep />}
-        {currentStep === 'payment' && <PaymentStep />}
-
-        {/* Navigation */}
-        <div className="mt-4 flex justify-between">
-          <button
-            type="button"
-            onClick={prevStep}
-            disabled={step === 0}
-          >
-            Back
-          </button>
-
-          {step < steps.length - 1 ? (
-            <button type="button" onClick={nextStep}>
-              Next
-            </button>
-          ) : (
-            <button type="submit">Submit</button>
-          )}
-        </div>
-      </form>
-    </FormProvider>
-  )
-}
-```
-
-## File Upload Form
-
-```tsx
-// components/forms/FileUploadForm.tsx
-'use client'
-
-import { useState, useCallback } from 'react'
-import { useDropzone } from 'react-dropzone'
-
-export function FileUploadForm() {
-  const [files, setFiles] = useState<File[]>([])
-  const [uploading, setUploading] = useState(false)
-
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    setFiles(prev => [...prev, ...acceptedFiles])
-  }, [])
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    accept: { 'image/*': ['.png', '.jpg', '.jpeg'] },
-    maxSize: 5 * 1024 * 1024 // 5MB
-  })
-
-  async function handleUpload() {
-    setUploading(true)
-
-    const formData = new FormData()
-    files.forEach(file => formData.append('files', file))
-
-    await fetch('/api/upload', { method: 'POST', body: formData })
-
-    setFiles([])
-    setUploading(false)
-  }
-
-  return (
-    <div className="space-y-4">
-      <div
-        {...getRootProps()}
-        className={`border-2 border-dashed p-8 text-center ${
-          isDragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
-        }`}
-      >
-        <input {...getInputProps()} />
-        <p>Drag files here, or click to select</p>
-      </div>
-
-      {files.length > 0 && (
-        <div className="space-y-2">
-          {files.map((file, i) => (
-            <div key={i} className="flex items-center justify-between">
-              <span>{file.name}</span>
-              <button onClick={() => setFiles(f => f.filter((_, j) => j !== i))}>
-                Remove
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      <button onClick={handleUpload} disabled={!files.length || uploading}>
-        {uploading ? 'Uploading...' : 'Upload'}
-      </button>
-    </div>
-  )
-}
-```
-
-## When to Use
-
-- User input
-- Data collection
-- File uploads
-- Multi-step processes