@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/state/context.md

@@ -1,349 +0,0 @@
-# React Context Patterns
-
-Patterns for using React Context effectively.
-
-## Basic Context
-
-```tsx
-// contexts/ThemeContext.tsx
-'use client'
-
-import { createContext, useContext, useState, ReactNode } from 'react'
-
-type Theme = 'light' | 'dark'
-
-interface ThemeContextType {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-  toggleTheme: () => void
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
-
-export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState<Theme>('light')
-
-  const toggleTheme = () => {
-    setTheme(prev => prev === 'light' ? 'dark' : 'light')
-  }
-
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  )
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext)
-
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider')
-  }
-
-  return context
-}
-```
-
-## Context with Reducer
-
-```tsx
-// contexts/CartContext.tsx
-'use client'
-
-import { createContext, useContext, useReducer, ReactNode, Dispatch } from 'react'
-
-interface CartItem {
-  id: string
-  name: string
-  price: number
-  quantity: number
-}
-
-interface CartState {
-  items: CartItem[]
-  total: number
-}
-
-type CartAction =
-  | { type: 'ADD_ITEM'; payload: Omit<CartItem, 'quantity'> }
-  | { type: 'REMOVE_ITEM'; payload: string }
-  | { type: 'UPDATE_QUANTITY'; payload: { id: string; quantity: number } }
-  | { type: 'CLEAR_CART' }
-
-function cartReducer(state: CartState, action: CartAction): CartState {
-  switch (action.type) {
-    case 'ADD_ITEM': {
-      const existing = state.items.find(i => i.id === action.payload.id)
-
-      if (existing) {
-        const items = state.items.map(i =>
-          i.id === action.payload.id
-            ? { ...i, quantity: i.quantity + 1 }
-            : i
-        )
-        return { ...state, items, total: calculateTotal(items) }
-      }
-
-      const items = [...state.items, { ...action.payload, quantity: 1 }]
-      return { ...state, items, total: calculateTotal(items) }
-    }
-
-    case 'REMOVE_ITEM': {
-      const items = state.items.filter(i => i.id !== action.payload)
-      return { ...state, items, total: calculateTotal(items) }
-    }
-
-    case 'UPDATE_QUANTITY': {
-      const items = state.items
-        .map(i => i.id === action.payload.id
-          ? { ...i, quantity: action.payload.quantity }
-          : i
-        )
-        .filter(i => i.quantity > 0)
-      return { ...state, items, total: calculateTotal(items) }
-    }
-
-    case 'CLEAR_CART':
-      return { items: [], total: 0 }
-
-    default:
-      return state
-  }
-}
-
-function calculateTotal(items: CartItem[]): number {
-  return items.reduce((sum, item) => sum + item.price * item.quantity, 0)
-}
-
-interface CartContextType {
-  state: CartState
-  dispatch: Dispatch<CartAction>
-  addItem: (item: Omit<CartItem, 'quantity'>) => void
-  removeItem: (id: string) => void
-  updateQuantity: (id: string, quantity: number) => void
-  clearCart: () => void
-}
-
-const CartContext = createContext<CartContextType | undefined>(undefined)
-
-export function CartProvider({ children }: { children: ReactNode }) {
-  const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 })
-
-  const addItem = (item: Omit<CartItem, 'quantity'>) =>
-    dispatch({ type: 'ADD_ITEM', payload: item })
-
-  const removeItem = (id: string) =>
-    dispatch({ type: 'REMOVE_ITEM', payload: id })
-
-  const updateQuantity = (id: string, quantity: number) =>
-    dispatch({ type: 'UPDATE_QUANTITY', payload: { id, quantity } })
-
-  const clearCart = () =>
-    dispatch({ type: 'CLEAR_CART' })
-
-  return (
-    <CartContext.Provider value={{
-      state, dispatch, addItem, removeItem, updateQuantity, clearCart
-    }}>
-      {children}
-    </CartContext.Provider>
-  )
-}
-
-export function useCart() {
-  const context = useContext(CartContext)
-  if (!context) {
-    throw new Error('useCart must be used within a CartProvider')
-  }
-  return context
-}
-```
-
-## Optimized Context
-
-```tsx
-// contexts/OptimizedContext.tsx
-// Split state and actions to prevent unnecessary re-renders
-
-import { createContext, useContext, useState, useMemo, ReactNode } from 'react'
-
-interface User {
-  id: string
-  name: string
-  email: string
-}
-
-// Separate contexts for state and actions
-const UserStateContext = createContext<User | null>(null)
-const UserActionsContext = createContext<{
-  setUser: (user: User | null) => void
-  updateUser: (updates: Partial<User>) => void
-} | null>(null)
-
-export function UserProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<User | null>(null)
-
-  // Memoize actions to prevent re-renders
-  const actions = useMemo(() => ({
-    setUser,
-    updateUser: (updates: Partial<User>) =>
-      setUser(prev => prev ? { ...prev, ...updates } : null)
-  }), [])
-
-  return (
-    <UserStateContext.Provider value={user}>
-      <UserActionsContext.Provider value={actions}>
-        {children}
-      </UserActionsContext.Provider>
-    </UserStateContext.Provider>
-  )
-}
-
-// Separate hooks
-export function useUser() {
-  const user = useContext(UserStateContext)
-  // null is a valid value, so we need a different check
-  return user
-}
-
-export function useUserActions() {
-  const context = useContext(UserActionsContext)
-  if (!context) {
-    throw new Error('useUserActions must be used within UserProvider')
-  }
-  return context
-}
-
-// Components that only read user won't re-render when actions change
-function UserDisplay() {
-  const user = useUser()
-  return <span>{user?.name}</span>
-}
-
-// Components that only use actions won't re-render when user changes
-function LogoutButton() {
-  const { setUser } = useUserActions()
-  return <button onClick={() => setUser(null)}>Logout</button>
-}
-```
-
-## Composable Providers
-
-```tsx
-// app/providers.tsx
-'use client'
-
-import { ThemeProvider } from '@/contexts/ThemeContext'
-import { UserProvider } from '@/contexts/UserContext'
-import { CartProvider } from '@/contexts/CartContext'
-import { QueryProvider } from '@/contexts/QueryContext'
-import { ReactNode } from 'react'
-
-type Provider = ({ children }: { children: ReactNode }) => JSX.Element
-
-function composeProviders(...providers: Provider[]) {
-  return ({ children }: { children: ReactNode }) =>
-    providers.reduceRight(
-      (acc, Provider) => <Provider>{acc}</Provider>,
-      children
-    )
-}
-
-const Providers = composeProviders(
-  QueryProvider,
-  ThemeProvider,
-  UserProvider,
-  CartProvider
-)
-
-export default Providers
-
-// app/layout.tsx
-import Providers from './providers'
-
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        <Providers>{children}</Providers>
-      </body>
-    </html>
-  )
-}
-```
-
-## Context with Local Storage
-
-```tsx
-// contexts/PersistentContext.tsx
-'use client'
-
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
-
-interface Settings {
-  notifications: boolean
-  language: string
-}
-
-const defaultSettings: Settings = {
-  notifications: true,
-  language: 'en'
-}
-
-const SettingsContext = createContext<{
-  settings: Settings
-  updateSettings: (updates: Partial<Settings>) => void
-} | null>(null)
-
-export function SettingsProvider({ children }: { children: ReactNode }) {
-  const [settings, setSettings] = useState<Settings>(defaultSettings)
-  const [mounted, setMounted] = useState(false)
-
-  // Load from localStorage on mount
-  useEffect(() => {
-    const stored = localStorage.getItem('settings')
-    if (stored) {
-      setSettings(JSON.parse(stored))
-    }
-    setMounted(true)
-  }, [])
-
-  // Persist to localStorage on change
-  useEffect(() => {
-    if (mounted) {
-      localStorage.setItem('settings', JSON.stringify(settings))
-    }
-  }, [settings, mounted])
-
-  const updateSettings = (updates: Partial<Settings>) => {
-    setSettings(prev => ({ ...prev, ...updates }))
-  }
-
-  // Prevent hydration mismatch
-  if (!mounted) {
-    return null
-  }
-
-  return (
-    <SettingsContext.Provider value={{ settings, updateSettings }}>
-      {children}
-    </SettingsContext.Provider>
-  )
-}
-
-export function useSettings() {
-  const context = useContext(SettingsContext)
-  if (!context) {
-    throw new Error('useSettings must be used within SettingsProvider')
-  }
-  return context
-}
-```
-
-## When to Use
-
-- Theme/preferences
-- Auth state
-- Shopping cart
-- Feature flags

package/skills/patterns/state/react-query.md

@@ -1,313 +0,0 @@
-# React Query Patterns
-
-Patterns for server state management with TanStack Query.
-
-## Setup
-
-```tsx
-// app/providers.tsx
-'use client'
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { useState } from 'react'
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  const [queryClient] = useState(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 60 * 1000, // 1 minute
-        refetchOnWindowFocus: false
-      }
-    }
-  }))
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  )
-}
-```
-
-## Basic Query
-
-```typescript
-// hooks/useUsers.ts
-import { useQuery } from '@tanstack/react-query'
-
-interface User {
-  id: string
-  name: string
-  email: string
-}
-
-async function fetchUsers(): Promise<User[]> {
-  const response = await fetch('/api/users')
-  if (!response.ok) throw new Error('Failed to fetch users')
-  return response.json()
-}
-
-export function useUsers() {
-  return useQuery({
-    queryKey: ['users'],
-    queryFn: fetchUsers
-  })
-}
-
-// Usage
-function UserList() {
-  const { data: users, isLoading, error } = useUsers()
-
-  if (isLoading) return <Skeleton />
-  if (error) return <Error message={error.message} />
-
-  return (
-    <ul>
-      {users?.map(user => (
-        <li key={user.id}>{user.name}</li>
-      ))}
-    </ul>
-  )
-}
-```
-
-## Parameterized Query
-
-```typescript
-// hooks/useUser.ts
-import { useQuery } from '@tanstack/react-query'
-
-async function fetchUser(id: string): Promise<User> {
-  const response = await fetch(`/api/users/${id}`)
-  if (!response.ok) throw new Error('User not found')
-  return response.json()
-}
-
-export function useUser(id: string) {
-  return useQuery({
-    queryKey: ['users', id],
-    queryFn: () => fetchUser(id),
-    enabled: !!id // Only fetch when id exists
-  })
-}
-
-// With options
-export function useUserWithOptions(id: string, options?: { enabled?: boolean }) {
-  return useQuery({
-    queryKey: ['users', id],
-    queryFn: () => fetchUser(id),
-    enabled: options?.enabled !== false && !!id,
-    staleTime: 5 * 60 * 1000, // 5 minutes
-    gcTime: 10 * 60 * 1000 // 10 minutes (formerly cacheTime)
-  })
-}
-```
-
-## Mutations
-
-```typescript
-// hooks/useCreateUser.ts
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-
-interface CreateUserData {
-  name: string
-  email: string
-}
-
-async function createUser(data: CreateUserData): Promise<User> {
-  const response = await fetch('/api/users', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(data)
-  })
-  if (!response.ok) throw new Error('Failed to create user')
-  return response.json()
-}
-
-export function useCreateUser() {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    mutationFn: createUser,
-    onSuccess: (newUser) => {
-      // Invalidate and refetch users list
-      queryClient.invalidateQueries({ queryKey: ['users'] })
-
-      // Or optimistically add to cache
-      queryClient.setQueryData(['users'], (old: User[] | undefined) =>
-        old ? [...old, newUser] : [newUser]
-      )
-    },
-    onError: (error) => {
-      console.error('Failed to create user:', error)
-    }
-  })
-}
-
-// Usage
-function CreateUserForm() {
-  const createUser = useCreateUser()
-
-  const handleSubmit = (data: CreateUserData) => {
-    createUser.mutate(data, {
-      onSuccess: () => {
-        toast.success('User created!')
-      }
-    })
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      {/* ... */}
-      <button disabled={createUser.isPending}>
-        {createUser.isPending ? 'Creating...' : 'Create'}
-      </button>
-    </form>
-  )
-}
-```
-
-## Optimistic Updates
-
-```typescript
-// hooks/useUpdateUser.ts
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-
-export function useUpdateUser() {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    mutationFn: updateUser,
-    onMutate: async (updatedUser) => {
-      // Cancel outgoing refetches
-      await queryClient.cancelQueries({ queryKey: ['users', updatedUser.id] })
-
-      // Snapshot previous value
-      const previousUser = queryClient.getQueryData(['users', updatedUser.id])
-
-      // Optimistically update
-      queryClient.setQueryData(['users', updatedUser.id], updatedUser)
-
-      // Return context with snapshot
-      return { previousUser }
-    },
-    onError: (err, updatedUser, context) => {
-      // Rollback on error
-      queryClient.setQueryData(
-        ['users', updatedUser.id],
-        context?.previousUser
-      )
-    },
-    onSettled: (data, error, variables) => {
-      // Always refetch to ensure cache is in sync
-      queryClient.invalidateQueries({ queryKey: ['users', variables.id] })
-    }
-  })
-}
-```
-
-## Infinite Query
-
-```typescript
-// hooks/usePosts.ts
-import { useInfiniteQuery } from '@tanstack/react-query'
-
-interface PostsResponse {
-  posts: Post[]
-  nextCursor: string | null
-}
-
-async function fetchPosts({ pageParam }: { pageParam?: string }): Promise<PostsResponse> {
-  const url = pageParam
-    ? `/api/posts?cursor=${pageParam}`
-    : '/api/posts'
-
-  const response = await fetch(url)
-  return response.json()
-}
-
-export function useInfinitePosts() {
-  return useInfiniteQuery({
-    queryKey: ['posts'],
-    queryFn: fetchPosts,
-    initialPageParam: undefined,
-    getNextPageParam: (lastPage) => lastPage.nextCursor
-  })
-}
-
-// Usage
-function PostFeed() {
-  const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage
-  } = useInfinitePosts()
-
-  return (
-    <div>
-      {data?.pages.map((page, i) => (
-        <Fragment key={i}>
-          {page.posts.map(post => (
-            <PostCard key={post.id} post={post} />
-          ))}
-        </Fragment>
-      ))}
-
-      <button
-        onClick={() => fetchNextPage()}
-        disabled={!hasNextPage || isFetchingNextPage}
-      >
-        {isFetchingNextPage ? 'Loading...' : hasNextPage ? 'Load More' : 'No more posts'}
-      </button>
-    </div>
-  )
-}
-```
-
-## Prefetching
-
-```typescript
-// Prefetch on hover
-function UserLink({ userId }: { userId: string }) {
-  const queryClient = useQueryClient()
-
-  const prefetchUser = () => {
-    queryClient.prefetchQuery({
-      queryKey: ['users', userId],
-      queryFn: () => fetchUser(userId)
-    })
-  }
-
-  return (
-    <Link href={`/users/${userId}`} onMouseEnter={prefetchUser}>
-      View User
-    </Link>
-  )
-}
-
-// Prefetch in Server Component
-async function UserPage({ params }: { params: { id: string } }) {
-  const queryClient = new QueryClient()
-
-  await queryClient.prefetchQuery({
-    queryKey: ['users', params.id],
-    queryFn: () => fetchUser(params.id)
-  })
-
-  return (
-    <HydrationBoundary state={dehydrate(queryClient)}>
-      <UserProfile userId={params.id} />
-    </HydrationBoundary>
-  )
-}
-```
-
-## When to Use
-
-- Server state
-- Data fetching
-- Caching
-- Optimistic updates