@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/ui/tables.md

@@ -1,407 +0,0 @@
-# Data Table Patterns
-
-Patterns for building data tables with TanStack Table.
-
-## Basic Table
-
-```tsx
-// components/tables/DataTable.tsx
-'use client'
-
-import {
-  useReactTable,
-  getCoreRowModel,
-  flexRender,
-  ColumnDef
-} from '@tanstack/react-table'
-
-interface Props<T> {
-  data: T[]
-  columns: ColumnDef<T>[]
-}
-
-export function DataTable<T>({ data, columns }: Props<T>) {
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel()
-  })
-
-  return (
-    <table className="w-full border-collapse">
-      <thead>
-        {table.getHeaderGroups().map(headerGroup => (
-          <tr key={headerGroup.id}>
-            {headerGroup.headers.map(header => (
-              <th key={header.id} className="border-b p-2 text-left">
-                {flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )}
-              </th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody>
-        {table.getRowModel().rows.map(row => (
-          <tr key={row.id} className="hover:bg-gray-50">
-            {row.getVisibleCells().map(cell => (
-              <td key={cell.id} className="border-b p-2">
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-
-// Usage
-const columns: ColumnDef<User>[] = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'email', header: 'Email' },
-  {
-    accessorKey: 'role',
-    header: 'Role',
-    cell: ({ getValue }) => (
-      <span className="rounded bg-gray-100 px-2 py-1">
-        {getValue() as string}
-      </span>
-    )
-  }
-]
-
-<DataTable data={users} columns={columns} />
-```
-
-## Sortable Table
-
-```tsx
-// components/tables/SortableTable.tsx
-'use client'
-
-import {
-  useReactTable,
-  getCoreRowModel,
-  getSortedRowModel,
-  SortingState,
-  flexRender,
-  ColumnDef
-} from '@tanstack/react-table'
-import { useState } from 'react'
-import { ChevronUp, ChevronDown } from 'lucide-react'
-
-export function SortableTable<T>({ data, columns }: Props<T>) {
-  const [sorting, setSorting] = useState<SortingState>([])
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: { sorting },
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel()
-  })
-
-  return (
-    <table className="w-full">
-      <thead>
-        {table.getHeaderGroups().map(headerGroup => (
-          <tr key={headerGroup.id}>
-            {headerGroup.headers.map(header => (
-              <th
-                key={header.id}
-                className="cursor-pointer select-none p-2"
-                onClick={header.column.getToggleSortingHandler()}
-              >
-                <div className="flex items-center gap-1">
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
-                  {{
-                    asc: <ChevronUp className="h-4 w-4" />,
-                    desc: <ChevronDown className="h-4 w-4" />
-                  }[header.column.getIsSorted() as string] ?? null}
-                </div>
-              </th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      {/* ... tbody same as basic */}
-    </table>
-  )
-}
-```
-
-## Paginated Table
-
-```tsx
-// components/tables/PaginatedTable.tsx
-'use client'
-
-import {
-  useReactTable,
-  getCoreRowModel,
-  getPaginationRowModel,
-  PaginationState,
-  flexRender
-} from '@tanstack/react-table'
-import { useState } from 'react'
-
-export function PaginatedTable<T>({ data, columns }: Props<T>) {
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10
-  })
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: { pagination },
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel()
-  })
-
-  return (
-    <div>
-      <table className="w-full">
-        {/* ... thead and tbody */}
-      </table>
-
-      <div className="mt-4 flex items-center justify-between">
-        <div>
-          Page {table.getState().pagination.pageIndex + 1} of{' '}
-          {table.getPageCount()}
-        </div>
-
-        <div className="flex gap-2">
-          <button
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </button>
-          <button
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </button>
-        </div>
-
-        <select
-          value={pagination.pageSize}
-          onChange={e => table.setPageSize(Number(e.target.value))}
-        >
-          {[10, 20, 50, 100].map(size => (
-            <option key={size} value={size}>
-              Show {size}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  )
-}
-```
-
-## Filterable Table
-
-```tsx
-// components/tables/FilterableTable.tsx
-'use client'
-
-import {
-  useReactTable,
-  getCoreRowModel,
-  getFilteredRowModel,
-  ColumnFiltersState,
-  flexRender
-} from '@tanstack/react-table'
-import { useState } from 'react'
-
-export function FilterableTable<T>({ data, columns }: Props<T>) {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [globalFilter, setGlobalFilter] = useState('')
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: { columnFilters, globalFilter },
-    onColumnFiltersChange: setColumnFilters,
-    onGlobalFilterChange: setGlobalFilter,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel()
-  })
-
-  return (
-    <div>
-      {/* Global search */}
-      <input
-        type="text"
-        placeholder="Search all columns..."
-        value={globalFilter}
-        onChange={e => setGlobalFilter(e.target.value)}
-        className="mb-4 w-full rounded border p-2"
-      />
-
-      <table className="w-full">
-        <thead>
-          {table.getHeaderGroups().map(headerGroup => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
-                <th key={header.id} className="p-2">
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
-                  {header.column.getCanFilter() && (
-                    <input
-                      type="text"
-                      value={(header.column.getFilterValue() ?? '') as string}
-                      onChange={e => header.column.setFilterValue(e.target.value)}
-                      placeholder="Filter..."
-                      className="mt-1 w-full rounded border p-1 text-sm"
-                    />
-                  )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        {/* ... tbody */}
-      </table>
-    </div>
-  )
-}
-```
-
-## Selectable Table
-
-```tsx
-// components/tables/SelectableTable.tsx
-'use client'
-
-import {
-  useReactTable,
-  getCoreRowModel,
-  RowSelectionState,
-  flexRender,
-  ColumnDef
-} from '@tanstack/react-table'
-import { useState } from 'react'
-
-export function SelectableTable<T>({ data, columns, onSelectionChange }: Props<T> & {
-  onSelectionChange?: (selected: T[]) => void
-}) {
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
-  const selectionColumn: ColumnDef<T> = {
-    id: 'select',
-    header: ({ table }) => (
-      <input
-        type="checkbox"
-        checked={table.getIsAllRowsSelected()}
-        onChange={table.getToggleAllRowsSelectedHandler()}
-      />
-    ),
-    cell: ({ row }) => (
-      <input
-        type="checkbox"
-        checked={row.getIsSelected()}
-        onChange={row.getToggleSelectedHandler()}
-      />
-    )
-  }
-
-  const table = useReactTable({
-    data,
-    columns: [selectionColumn, ...columns],
-    state: { rowSelection },
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel()
-  })
-
-  // Notify parent of selection changes
-  const selectedRows = table.getSelectedRowModel().rows.map(r => r.original)
-
-  return (
-    <div>
-      <div className="mb-2 text-sm text-gray-500">
-        {selectedRows.length} of {data.length} selected
-      </div>
-
-      <table className="w-full">
-        {/* ... thead and tbody */}
-      </table>
-
-      {selectedRows.length > 0 && (
-        <div className="mt-4">
-          <button onClick={() => onSelectionChange?.(selectedRows)}>
-            Process Selected ({selectedRows.length})
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
-```
-
-## Server-Side Table
-
-```tsx
-// components/tables/ServerTable.tsx
-'use client'
-
-import { useQuery } from '@tanstack/react-query'
-import { useState } from 'react'
-
-interface TableParams {
-  page: number
-  pageSize: number
-  sortBy?: string
-  sortOrder?: 'asc' | 'desc'
-  filter?: string
-}
-
-export function ServerTable() {
-  const [params, setParams] = useState<TableParams>({
-    page: 1,
-    pageSize: 10
-  })
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['users', params],
-    queryFn: () => fetchUsers(params)
-  })
-
-  if (isLoading) return <TableSkeleton />
-
-  return (
-    <div>
-      <table>
-        {/* Render data.items */}
-      </table>
-
-      <Pagination
-        page={params.page}
-        pageSize={params.pageSize}
-        total={data.total}
-        onChange={(page) => setParams(p => ({ ...p, page }))}
-      />
-    </div>
-  )
-}
-```
-
-## When to Use
-
-- Data display
-- Admin panels
-- Reports
-- List views

package/skills/patterns/ui/toasts.md

@@ -1,300 +0,0 @@
-# Toast Notification Patterns
-
-Patterns for toast notifications with React Hot Toast and Sonner.
-
-## React Hot Toast Setup
-
-```tsx
-// components/providers/ToastProvider.tsx
-import { Toaster } from 'react-hot-toast'
-
-export function ToastProvider() {
-  return (
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        duration: 4000,
-        style: {
-          background: '#333',
-          color: '#fff'
-        },
-        success: {
-          iconTheme: {
-            primary: '#10B981',
-            secondary: '#fff'
-          }
-        },
-        error: {
-          iconTheme: {
-            primary: '#EF4444',
-            secondary: '#fff'
-          }
-        }
-      }}
-    />
-  )
-}
-
-// app/layout.tsx
-import { ToastProvider } from '@/components/providers/ToastProvider'
-
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        {children}
-        <ToastProvider />
-      </body>
-    </html>
-  )
-}
-```
-
-## Basic Toast Usage
-
-```tsx
-// components/UserActions.tsx
-'use client'
-
-import toast from 'react-hot-toast'
-
-export function UserActions() {
-  async function handleSave() {
-    const result = await saveData()
-
-    if (result.success) {
-      toast.success('Changes saved successfully')
-    } else {
-      toast.error('Failed to save changes')
-    }
-  }
-
-  function handleCopy() {
-    navigator.clipboard.writeText('text')
-    toast('Copied to clipboard', { icon: '📋' })
-  }
-
-  return (
-    <div>
-      <button onClick={handleSave}>Save</button>
-      <button onClick={handleCopy}>Copy</button>
-    </div>
-  )
-}
-```
-
-## Promise Toast
-
-```tsx
-// Automatic loading/success/error states
-async function handleSubmit() {
-  toast.promise(
-    submitForm(data),
-    {
-      loading: 'Saving...',
-      success: 'Successfully saved!',
-      error: (err) => `Error: ${err.message}`
-    }
-  )
-}
-
-// With custom styling
-toast.promise(
-  fetchData(),
-  {
-    loading: 'Loading data...',
-    success: (data) => `Loaded ${data.length} items`,
-    error: 'Failed to load'
-  },
-  {
-    style: { minWidth: '250px' },
-    success: { duration: 3000 },
-    error: { duration: 5000 }
-  }
-)
-```
-
-## Custom Toast Component
-
-```tsx
-// components/ui/CustomToast.tsx
-import toast from 'react-hot-toast'
-import { X } from 'lucide-react'
-
-interface Props {
-  title: string
-  message: string
-  action?: {
-    label: string
-    onClick: () => void
-  }
-}
-
-export function showCustomToast({ title, message, action }: Props) {
-  toast.custom((t) => (
-    <div
-      className={`${
-        t.visible ? 'animate-enter' : 'animate-leave'
-      } pointer-events-auto flex w-full max-w-md rounded-lg bg-white shadow-lg ring-1 ring-black/5`}
-    >
-      <div className="flex-1 p-4">
-        <p className="font-medium text-gray-900">{title}</p>
-        <p className="mt-1 text-sm text-gray-500">{message}</p>
-        {action && (
-          <button
-            onClick={() => {
-              action.onClick()
-              toast.dismiss(t.id)
-            }}
-            className="mt-2 text-sm font-medium text-blue-600 hover:text-blue-500"
-          >
-            {action.label}
-          </button>
-        )}
-      </div>
-      <div className="flex border-l">
-        <button
-          onClick={() => toast.dismiss(t.id)}
-          className="flex items-center justify-center p-4 hover:bg-gray-50"
-        >
-          <X className="h-5 w-5 text-gray-400" />
-        </button>
-      </div>
-    </div>
-  ), { duration: 5000 })
-}
-
-// Usage
-showCustomToast({
-  title: 'New message',
-  message: 'You have a new message from John',
-  action: {
-    label: 'View',
-    onClick: () => router.push('/messages')
-  }
-})
-```
-
-## Sonner Setup
-
-```tsx
-// components/providers/SonnerProvider.tsx
-import { Toaster } from 'sonner'
-
-export function SonnerProvider() {
-  return (
-    <Toaster
-      position="bottom-right"
-      richColors
-      closeButton
-      expand={false}
-      toastOptions={{
-        classNames: {
-          toast: 'bg-background border-border',
-          title: 'text-foreground',
-          description: 'text-muted-foreground'
-        }
-      }}
-    />
-  )
-}
-```
-
-## Sonner Usage
-
-```tsx
-// components/Actions.tsx
-'use client'
-
-import { toast } from 'sonner'
-
-export function Actions() {
-  // Basic
-  function showInfo() {
-    toast('Event has been created')
-  }
-
-  // Variants
-  function showVariants() {
-    toast.success('Successfully saved')
-    toast.error('Something went wrong')
-    toast.warning('Please check your input')
-    toast.info('New update available')
-  }
-
-  // With description
-  function showWithDescription() {
-    toast('Event created', {
-      description: 'Monday, January 3rd at 6:00pm'
-    })
-  }
-
-  // With action
-  function showWithAction() {
-    toast('File deleted', {
-      action: {
-        label: 'Undo',
-        onClick: () => restoreFile()
-      }
-    })
-  }
-
-  // Promise
-  async function showPromise() {
-    toast.promise(saveChanges(), {
-      loading: 'Saving...',
-      success: 'Changes saved!',
-      error: 'Could not save'
-    })
-  }
-
-  // Custom duration
-  function showPersistent() {
-    toast('Important message', {
-      duration: Infinity, // Won't auto-dismiss
-      closeButton: true
-    })
-  }
-
-  return <div>...</div>
-}
-```
-
-## Toast Context Hook
-
-```tsx
-// hooks/useToast.ts
-import toast from 'react-hot-toast'
-
-export function useToast() {
-  return {
-    success: (message: string) => toast.success(message),
-    error: (message: string) => toast.error(message),
-    loading: (message: string) => toast.loading(message),
-    dismiss: (id?: string) => toast.dismiss(id),
-    promise: <T,>(
-      promise: Promise<T>,
-      messages: { loading: string; success: string; error: string }
-    ) => toast.promise(promise, messages)
-  }
-}
-
-// Usage
-const { success, error, promise } = useToast()
-
-async function handleAction() {
-  try {
-    await doSomething()
-    success('Done!')
-  } catch (e) {
-    error('Failed!')
-  }
-}
-```
-
-## When to Use
-
-- Action feedback
-- Form submissions
-- Error notifications
-- Status updates