@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/notifications/push.md

@@ -1,279 +0,0 @@
-# Push Notification Patterns
-
-Patterns for web push notifications.
-
-## Service Worker Setup
-
-```typescript
-// public/sw.js
-self.addEventListener('push', (event) => {
-  const data = event.data?.json() ?? {}
-
-  const options = {
-    body: data.body,
-    icon: data.icon || '/icon-192.png',
-    badge: '/badge.png',
-    data: { url: data.url },
-    actions: data.actions || []
-  }
-
-  event.waitUntil(
-    self.registration.showNotification(data.title, options)
-  )
-})
-
-self.addEventListener('notificationclick', (event) => {
-  event.notification.close()
-
-  const url = event.notification.data?.url || '/'
-
-  event.waitUntil(
-    clients.matchAll({ type: 'window' }).then((clientList) => {
-      for (const client of clientList) {
-        if (client.url === url && 'focus' in client) {
-          return client.focus()
-        }
-      }
-      return clients.openWindow(url)
-    })
-  )
-})
-```
-
-## Push Subscription
-
-```tsx
-// hooks/usePushNotifications.ts
-'use client'
-
-import { useState, useEffect } from 'react'
-
-const VAPID_PUBLIC_KEY = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!
-
-export function usePushNotifications() {
-  const [permission, setPermission] = useState<NotificationPermission>('default')
-  const [subscription, setSubscription] = useState<PushSubscription | null>(null)
-
-  useEffect(() => {
-    if ('Notification' in window) {
-      setPermission(Notification.permission)
-    }
-  }, [])
-
-  async function subscribe() {
-    try {
-      // Request permission
-      const perm = await Notification.requestPermission()
-      setPermission(perm)
-
-      if (perm !== 'granted') return null
-
-      // Register service worker
-      const registration = await navigator.serviceWorker.register('/sw.js')
-
-      // Subscribe to push
-      const sub = await registration.pushManager.subscribe({
-        userVisibleOnly: true,
-        applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
-      })
-
-      setSubscription(sub)
-
-      // Send subscription to server
-      await fetch('/api/push/subscribe', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(sub.toJSON())
-      })
-
-      return sub
-    } catch (error) {
-      console.error('Push subscription failed:', error)
-      return null
-    }
-  }
-
-  async function unsubscribe() {
-    if (!subscription) return
-
-    await subscription.unsubscribe()
-
-    await fetch('/api/push/unsubscribe', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ endpoint: subscription.endpoint })
-    })
-
-    setSubscription(null)
-  }
-
-  return {
-    permission,
-    subscription,
-    subscribe,
-    unsubscribe,
-    isSupported: 'PushManager' in window
-  }
-}
-
-function urlBase64ToUint8Array(base64String: string) {
-  const padding = '='.repeat((4 - base64String.length % 4) % 4)
-  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
-  const rawData = window.atob(base64)
-  return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)))
-}
-```
-
-## Server-Side Push
-
-```typescript
-// lib/push.ts
-import webpush from 'web-push'
-import { prisma } from '@/lib/db'
-
-webpush.setVapidDetails(
-  'mailto:support@myapp.com',
-  process.env.VAPID_PUBLIC_KEY!,
-  process.env.VAPID_PRIVATE_KEY!
-)
-
-interface PushPayload {
-  title: string
-  body: string
-  icon?: string
-  url?: string
-}
-
-export async function sendPushNotification(userId: string, payload: PushPayload) {
-  const subscriptions = await prisma.pushSubscription.findMany({
-    where: { userId }
-  })
-
-  const results = await Promise.allSettled(
-    subscriptions.map(async (sub) => {
-      try {
-        await webpush.sendNotification(
-          {
-            endpoint: sub.endpoint,
-            keys: {
-              p256dh: sub.p256dh,
-              auth: sub.auth
-            }
-          },
-          JSON.stringify(payload)
-        )
-      } catch (error: any) {
-        // Remove invalid subscriptions
-        if (error.statusCode === 410 || error.statusCode === 404) {
-          await prisma.pushSubscription.delete({
-            where: { id: sub.id }
-          })
-        }
-        throw error
-      }
-    })
-  )
-
-  return results
-}
-
-// Usage
-await sendPushNotification(userId, {
-  title: 'New Message',
-  body: 'You have a new message from John',
-  url: '/messages/123'
-})
-```
-
-## Subscribe API
-
-```typescript
-// app/api/push/subscribe/route.ts
-import { auth } from '@/auth'
-import { prisma } from '@/lib/db'
-
-export async function POST(request: Request) {
-  const session = await auth()
-  if (!session) {
-    return Response.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const subscription = await request.json()
-
-  await prisma.pushSubscription.upsert({
-    where: { endpoint: subscription.endpoint },
-    create: {
-      userId: session.user.id,
-      endpoint: subscription.endpoint,
-      p256dh: subscription.keys.p256dh,
-      auth: subscription.keys.auth
-    },
-    update: {
-      p256dh: subscription.keys.p256dh,
-      auth: subscription.keys.auth
-    }
-  })
-
-  return Response.json({ success: true })
-}
-```
-
-## Notification Preferences
-
-```tsx
-// components/NotificationSettings.tsx
-'use client'
-
-import { usePushNotifications } from '@/hooks/usePushNotifications'
-
-export function NotificationSettings() {
-  const { permission, subscription, subscribe, unsubscribe, isSupported } = usePushNotifications()
-
-  if (!isSupported) {
-    return <p>Push notifications are not supported in this browser.</p>
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="font-medium">Push Notifications</p>
-          <p className="text-sm text-gray-500">
-            {subscription ? 'Enabled' : 'Disabled'}
-          </p>
-        </div>
-
-        {subscription ? (
-          <button
-            onClick={unsubscribe}
-            className="rounded bg-red-100 px-4 py-2 text-red-700"
-          >
-            Disable
-          </button>
-        ) : (
-          <button
-            onClick={subscribe}
-            disabled={permission === 'denied'}
-            className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
-          >
-            Enable
-          </button>
-        )}
-      </div>
-
-      {permission === 'denied' && (
-        <p className="text-sm text-red-600">
-          Notifications are blocked. Please enable them in your browser settings.
-        </p>
-      )}
-    </div>
-  )
-}
-```
-
-## When to Use
-
-- Real-time updates
-- Message notifications
-- Reminders
-- Marketing engagement

package/skills/patterns/payments/checkout.md

@@ -1,303 +0,0 @@
-# Checkout Patterns
-
-Patterns for payment checkout flows with Stripe.
-
-## Checkout Session
-
-```typescript
-// lib/checkout.ts
-import Stripe from 'stripe'
-
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
-
-export async function createCheckoutSession({
-  userId,
-  priceId,
-  mode = 'subscription',
-  successUrl,
-  cancelUrl
-}: {
-  userId: string
-  priceId: string
-  mode?: 'subscription' | 'payment'
-  successUrl?: string
-  cancelUrl?: string
-}) {
-  const user = await prisma.user.findUnique({
-    where: { id: userId }
-  })
-
-  if (!user) throw new Error('User not found')
-
-  // Get or create customer
-  let customerId = user.stripeCustomerId
-
-  if (!customerId) {
-    const customer = await stripe.customers.create({
-      email: user.email,
-      name: user.name ?? undefined,
-      metadata: { userId }
-    })
-    customerId = customer.id
-
-    await prisma.user.update({
-      where: { id: userId },
-      data: { stripeCustomerId: customerId }
-    })
-  }
-
-  const session = await stripe.checkout.sessions.create({
-    customer: customerId,
-    mode,
-    payment_method_types: ['card'],
-    line_items: [{ price: priceId, quantity: 1 }],
-    success_url: successUrl ?? `${process.env.NEXT_PUBLIC_APP_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
-    cancel_url: cancelUrl ?? `${process.env.NEXT_PUBLIC_APP_URL}/checkout/canceled`,
-    metadata: { userId },
-    allow_promotion_codes: true,
-    billing_address_collection: 'auto',
-    tax_id_collection: { enabled: true }
-  })
-
-  return session
-}
-```
-
-## Checkout API Route
-
-```typescript
-// app/api/checkout/route.ts
-import { auth } from '@/auth'
-import { createCheckoutSession } from '@/lib/checkout'
-
-export async function POST(request: Request) {
-  const session = await auth()
-
-  if (!session?.user) {
-    return Response.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { priceId, mode } = await request.json()
-
-  if (!priceId) {
-    return Response.json({ error: 'Price ID required' }, { status: 400 })
-  }
-
-  try {
-    const checkoutSession = await createCheckoutSession({
-      userId: session.user.id,
-      priceId,
-      mode
-    })
-
-    return Response.json({ url: checkoutSession.url })
-  } catch (error) {
-    console.error('Checkout error:', error)
-    return Response.json({ error: 'Failed to create checkout' }, { status: 500 })
-  }
-}
-```
-
-## Checkout Button
-
-```tsx
-// components/checkout/CheckoutButton.tsx
-'use client'
-
-import { useState } from 'react'
-import { Button } from '@/components/ui/Button'
-
-interface Props {
-  priceId: string
-  mode?: 'subscription' | 'payment'
-  children: React.ReactNode
-}
-
-export function CheckoutButton({ priceId, mode = 'subscription', children }: Props) {
-  const [loading, setLoading] = useState(false)
-
-  async function handleCheckout() {
-    setLoading(true)
-
-    try {
-      const response = await fetch('/api/checkout', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ priceId, mode })
-      })
-
-      const { url, error } = await response.json()
-
-      if (error) {
-        throw new Error(error)
-      }
-
-      window.location.href = url
-    } catch (error) {
-      console.error('Checkout failed:', error)
-      alert('Failed to start checkout')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <Button onClick={handleCheckout} disabled={loading}>
-      {loading ? 'Loading...' : children}
-    </Button>
-  )
-}
-```
-
-## Success Page
-
-```tsx
-// app/checkout/success/page.tsx
-import { stripe } from '@/lib/stripe'
-import { redirect } from 'next/navigation'
-
-interface Props {
-  searchParams: { session_id?: string }
-}
-
-export default async function CheckoutSuccessPage({ searchParams }: Props) {
-  const sessionId = searchParams.session_id
-
-  if (!sessionId) {
-    redirect('/')
-  }
-
-  const session = await stripe.checkout.sessions.retrieve(sessionId, {
-    expand: ['subscription', 'customer']
-  })
-
-  if (session.payment_status !== 'paid') {
-    redirect('/checkout/canceled')
-  }
-
-  return (
-    <div className="mx-auto max-w-md py-12 text-center">
-      <div className="mb-4 text-5xl">✓</div>
-      <h1 className="mb-2 text-2xl font-bold">Payment Successful</h1>
-      <p className="mb-8 text-gray-600">
-        Thank you for your purchase. Your subscription is now active.
-      </p>
-      <a
-        href="/dashboard"
-        className="rounded-lg bg-black px-6 py-3 text-white hover:bg-gray-800"
-      >
-        Go to Dashboard
-      </a>
-    </div>
-  )
-}
-```
-
-## Embedded Checkout
-
-```tsx
-// components/checkout/EmbeddedCheckout.tsx
-'use client'
-
-import { useState, useEffect } from 'react'
-import { loadStripe } from '@stripe/stripe-js'
-import {
-  EmbeddedCheckout,
-  EmbeddedCheckoutProvider
-} from '@stripe/react-stripe-js'
-
-const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!)
-
-interface Props {
-  priceId: string
-}
-
-export function CheckoutForm({ priceId }: Props) {
-  const [clientSecret, setClientSecret] = useState('')
-
-  useEffect(() => {
-    fetch('/api/checkout/embedded', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ priceId })
-    })
-      .then(res => res.json())
-      .then(data => setClientSecret(data.clientSecret))
-  }, [priceId])
-
-  if (!clientSecret) {
-    return <div>Loading...</div>
-  }
-
-  return (
-    <EmbeddedCheckoutProvider stripe={stripePromise} options={{ clientSecret }}>
-      <EmbeddedCheckout />
-    </EmbeddedCheckoutProvider>
-  )
-}
-
-// API route for embedded checkout
-// app/api/checkout/embedded/route.ts
-export async function POST(request: Request) {
-  const session = await auth()
-  const { priceId } = await request.json()
-
-  const checkoutSession = await stripe.checkout.sessions.create({
-    ui_mode: 'embedded',
-    customer: user.stripeCustomerId,
-    mode: 'subscription',
-    line_items: [{ price: priceId, quantity: 1 }],
-    return_url: `${process.env.NEXT_PUBLIC_APP_URL}/checkout/return?session_id={CHECKOUT_SESSION_ID}`
-  })
-
-  return Response.json({ clientSecret: checkoutSession.client_secret })
-}
-```
-
-## One-Time Payment
-
-```typescript
-// lib/checkout.ts
-export async function createPaymentSession({
-  userId,
-  amount,
-  description,
-  metadata = {}
-}: {
-  userId: string
-  amount: number
-  description: string
-  metadata?: Record<string, string>
-}) {
-  const user = await prisma.user.findUnique({
-    where: { id: userId }
-  })
-
-  const session = await stripe.checkout.sessions.create({
-    customer: user?.stripeCustomerId ?? undefined,
-    customer_email: !user?.stripeCustomerId ? user?.email : undefined,
-    mode: 'payment',
-    payment_method_types: ['card'],
-    line_items: [{
-      price_data: {
-        currency: 'usd',
-        product_data: { name: description },
-        unit_amount: amount
-      },
-      quantity: 1
-    }],
-    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/payment/success`,
-    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/payment/canceled`,
-    metadata: { userId, ...metadata }
-  })
-
-  return session
-}
-```
-
-## When to Use
-
-- Subscription signup
-- One-time purchases
-- Upgrade flows
-- E-commerce checkout