@webdevarif/dashui 0.3.13 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webdevarif/dashui",
-    "version": "0.3.13",
-    "description": "Universal dashboard UI component library with design token system — by webdevarif",
+    "version": "0.5.0",
+    "description": "Universal dashboard UI component library — forms, inputs, media, tables, layouts. Modular categories: primitives, forms, dashboard, media, data, editors, ecommerce, cms.",
     "keywords": [
         "dashboard",
         "ui",
@@ -34,6 +34,7 @@
     },
     "files": [
         "dist",
+        "templates",
         "README.md"
     ],
     "scripts": {

package/templates/README.md

@@ -0,0 +1,74 @@
+# dashui Templates
+
+Copy-paste starter code for your Next.js project. Customize to your API/database.
+
+## What's included
+
+- **nextauth/** — NextAuth v6 edge-safe configuration + route handlers
+- **prisma/** — Base multi-tenant Prisma schemas (SaaS, E-commerce, CMS)
+- **hooks/** — SWR data fetching patterns (useFetch, useCreate, useUpdate, useDelete)
+- **middleware/** — Auth middleware, error handling, rate limiting
+- **api-patterns/** — CRUD route templates, file uploads, webhooks
+
+## Quick start
+
+### 1. Copy NextAuth config
+```bash
+cp templates/nextauth/auth.config.ts ./
+cp templates/nextauth/auth.ts ./
+cp -r templates/nextauth/route-handlers ./app/api/auth/
+```
+
+Then customize your provider credentials in `.env`.
+
+### 2. Copy Prisma schema
+```bash
+cp templates/prisma/multi-tenant-schema.prisma ./prisma/schema.prisma
+```
+
+Add your custom models.
+
+### 3. Copy data fetching hooks
+```bash
+cp templates/hooks/*.ts ./lib/
+```
+
+Use in components:
+```tsx
+const { data, error, isLoading } = useFetch('/api/products')
+```
+
+### 4. Copy middleware
+```bash
+cp templates/middleware/auth-middleware.ts ./lib/
+```
+
+Use in API routes:
+```tsx
+import { requireAuth } from '@/lib/auth-middleware'
+
+export async function POST(req) {
+  const user = await requireAuth(req)
+  // user is authenticated
+}
+```
+
+## Before publishing
+
+Each template is a starting point. **Customize to your needs:**
+- Environment variables (OAuth credentials, database URL, API keys)
+- Prisma relations (add your custom models)
+- API endpoints (match your backend structure)
+- Error handling (log to your service)
+- Rate limits (adjust for your use case)
+
+## FAQ
+
+**Q: Can I modify these templates?**
+A: Yes! They're in your project now. Make them yours.
+
+**Q: Why not a generator/CLI?**
+A: Copy-paste is simpler, more transparent, easier to customize. You see exactly what's installed.
+
+**Q: How do I keep up with dashui updates?**
+A: Components update → just re-export from dashui. Templates are static starter code — no updates needed unless you want them.

package/templates/api-patterns/CRUD-route.pattern.ts

@@ -0,0 +1,112 @@
+/**
+ * CRUD API Route Pattern
+ * 
+ * Copy and modify for your models.
+ * This example shows: GET, POST, PATCH, DELETE
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+import { requireAuth, requireRole } from '@/lib/auth-middleware'
+import { prisma } from '@/lib/prisma'
+
+// GET — List with pagination + filters
+export async function GET(req: NextRequest) {
+  try {
+    const user = await requireAuth(req)
+
+    const url = new URL(req.url)
+    const page = parseInt(url.searchParams.get('page') || '1')
+    const limit = parseInt(url.searchParams.get('limit') || '20')
+    const skip = (page - 1) * limit
+
+    // TODO: Add your filters/search logic here
+    const items = await prisma.product.findMany({
+      skip,
+      take: limit,
+      // where: { storeId: user.storeId }, // filter by user's store if applicable
+    })
+
+    const total = await prisma.product.count()
+
+    return NextResponse.json({
+      data: items,
+      pagination: { page, limit, total, pages: Math.ceil(total / limit) },
+    })
+  } catch (err) {
+    console.error('GET error:', err)
+    return NextResponse.json({ error: 'Failed to fetch' }, { status: 500 })
+  }
+}
+
+// POST — Create
+export async function POST(req: NextRequest) {
+  try {
+    const user = await requireAuth(req)
+    const body = await req.json()
+
+    // TODO: Validate body with zod or similar
+    if (!body.name) {
+      return NextResponse.json({ error: 'Name required' }, { status: 400 })
+    }
+
+    // TODO: Check permissions (user can create?)
+    const item = await prisma.product.create({
+      data: {
+        name: body.name,
+        description: body.description,
+        price: body.price,
+        // storeId: user.storeId, // if multi-tenant
+      },
+    })
+
+    return NextResponse.json(item, { status: 201 })
+  } catch (err) {
+    console.error('POST error:', err)
+    return NextResponse.json({ error: 'Failed to create' }, { status: 500 })
+  }
+}
+
+// PATCH — Update
+export async function PATCH(req: NextRequest) {
+  try {
+    const user = await requireAuth(req)
+    const body = await req.json()
+    const { id, ...data } = body
+
+    if (!id) {
+      return NextResponse.json({ error: 'ID required' }, { status: 400 })
+    }
+
+    // TODO: Check permissions (user owns this item?)
+    const item = await prisma.product.update({
+      where: { id },
+      data,
+    })
+
+    return NextResponse.json(item)
+  } catch (err) {
+    console.error('PATCH error:', err)
+    return NextResponse.json({ error: 'Failed to update' }, { status: 500 })
+  }
+}
+
+// DELETE
+export async function DELETE(req: NextRequest) {
+  try {
+    const user = await requireAuth(req)
+    const { searchParams } = new URL(req.url)
+    const id = searchParams.get('id')
+
+    if (!id) {
+      return NextResponse.json({ error: 'ID required' }, { status: 400 })
+    }
+
+    // TODO: Check permissions (user owns this item?)
+    await prisma.product.delete({ where: { id } })
+
+    return NextResponse.json({ success: true })
+  } catch (err) {
+    console.error('DELETE error:', err)
+    return NextResponse.json({ error: 'Failed to delete' }, { status: 500 })
+  }
+}

package/templates/hooks/useCreate.ts

@@ -0,0 +1,46 @@
+/**
+ * useCreate — POST request with optimistic update
+ * 
+ * Copy to: ./lib/hooks/useCreate.ts
+ * 
+ * Usage:
+ * const { mutate, isLoading, error } = useCreate('/api/products')
+ * await mutate({ name: 'New Product', price: 99.99 })
+ */
+
+import { useState } from 'react'
+
+export function useCreate<T = any>(endpoint: string) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  async function mutate(data: any) {
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+
+      if (!response.ok) {
+        throw new Error(`Create failed: ${response.statusText}`)
+      }
+
+      const result = await response.json()
+      return result as T
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Unknown error')
+      setError(error)
+      throw error
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return { mutate, isLoading, error }
+}

package/templates/hooks/useDelete.ts

@@ -0,0 +1,42 @@
+/**
+ * useDelete — DELETE request
+ * 
+ * Copy to: ./lib/hooks/useDelete.ts
+ * 
+ * Usage:
+ * const { mutate, isLoading, error } = useDelete('/api/products/123')
+ * await mutate()
+ */
+
+import { useState } from 'react'
+
+export function useDelete<T = any>(endpoint: string) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  async function mutate() {
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'DELETE',
+      })
+
+      if (!response.ok) {
+        throw new Error(`Delete failed: ${response.statusText}`)
+      }
+
+      const result = await response.json()
+      return result as T
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Unknown error')
+      setError(error)
+      throw error
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return { mutate, isLoading, error }
+}

package/templates/hooks/useFetch.ts

@@ -0,0 +1,30 @@
+/**
+ * useFetch — Generic SWR wrapper for GET requests
+ * 
+ * Copy to: ./lib/hooks/useFetch.ts
+ * 
+ * Usage:
+ * const { data, error, isLoading } = useFetch('/api/products')
+ */
+
+import useSWR from 'swr'
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
+export function useFetch<T = any>(endpoint: string | null) {
+  const { data, error, isLoading } = useSWR<T>(
+    endpoint, // null = skip fetching
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      dedupingInterval: 60000,
+    }
+  )
+
+  return {
+    data,
+    error,
+    isLoading,
+  }
+}

package/templates/hooks/useUpdate.ts

@@ -0,0 +1,46 @@
+/**
+ * useUpdate — PATCH request with optimistic update
+ * 
+ * Copy to: ./lib/hooks/useUpdate.ts
+ * 
+ * Usage:
+ * const { mutate, isLoading, error } = useUpdate('/api/products/123')
+ * await mutate({ name: 'Updated Product' })
+ */
+
+import { useState } from 'react'
+
+export function useUpdate<T = any>(endpoint: string) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  async function mutate(data: any) {
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+
+      if (!response.ok) {
+        throw new Error(`Update failed: ${response.statusText}`)
+      }
+
+      const result = await response.json()
+      return result as T
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Unknown error')
+      setError(error)
+      throw error
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return { mutate, isLoading, error }
+}

package/templates/middleware/auth-middleware.ts

@@ -0,0 +1,39 @@
+/**
+ * requireAuth — API route middleware to enforce authentication
+ * 
+ * Copy to: ./lib/auth-middleware.ts
+ * 
+ * Usage in API routes:
+ * export async function POST(req: Request) {
+ *   const user = await requireAuth(req)
+ *   // user is authenticated; access user.id, user.email, etc.
+ * }
+ */
+
+import { auth } from '@/auth'
+import { NextRequest } from 'next/server'
+
+export async function requireAuth(req: NextRequest) {
+  const session = await auth()
+
+  if (!session || !session.user) {
+    throw new Error('Unauthorized: Not authenticated', { cause: 'UNAUTHENTICATED' })
+  }
+
+  return session.user
+}
+
+export async function requireRole(req: NextRequest, requiredRole: string) {
+  const user = await requireAuth(req)
+
+  const role = (user as any).role || 'user'
+
+  // Simple role check (admin can do everything)
+  if (role === 'admin') return user
+
+  if (role !== requiredRole) {
+    throw new Error(`Forbidden: Requires role ${requiredRole}`, { cause: 'FORBIDDEN' })
+  }
+
+  return user
+}

package/templates/nextauth/auth.config.ts

@@ -0,0 +1,110 @@
+/**
+ * NextAuth v6 Edge-safe Config
+ * 
+ * Copy to: ./auth.config.ts
+ * Customize: Add your OAuth provider credentials to .env
+ * 
+ * Providers:
+ * - Credentials (username/password)
+ * - GitHub (OAuth)
+ * - Google (OAuth)
+ * - Add more as needed
+ */
+
+import type { NextAuthConfig } from 'next-auth'
+import Credentials from 'next-auth/providers/credentials'
+import GitHub from 'next-auth/providers/github'
+import Google from 'next-auth/providers/google'
+import { PrismaAdapter } from '@auth/prisma-adapter'
+import { prisma } from '@/lib/prisma'
+
+export const authConfig = {
+  providers: [
+    // Credentials provider (username/password)
+    Credentials({
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials?.password) {
+          return null
+        }
+
+        // TODO: Implement your credential validation logic
+        // Example: find user, verify password hash, return user
+        const user = await prisma.user.findUnique({
+          where: { email: credentials.email as string },
+        })
+
+        if (!user) return null
+
+        // Verify password (use bcrypt or similar)
+        // const isValid = await bcrypt.compare(credentials.password, user.password)
+        // if (!isValid) return null
+
+        return {
+          id: user.id,
+          email: user.email,
+          name: user.name,
+          image: user.image,
+        }
+      },
+    }),
+
+    // GitHub OAuth (register app: https://github.com/settings/apps)
+    GitHub({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+
+    // Google OAuth (create: https://console.cloud.google.com/)
+    Google({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
+  ],
+
+  adapter: PrismaAdapter(prisma),
+
+  pages: {
+    signIn: '/login',
+    error: '/login',
+  },
+
+  callbacks: {
+    // Add custom logic when user signs in
+    async signIn({ user, account, profile, email, credentials }) {
+      // Check if user is allowed, verify email domain, etc.
+      return true
+    },
+
+    // Add user role/permissions to session
+    async session({ session, user }) {
+      return {
+        ...session,
+        user: {
+          ...session.user,
+          id: user.id,
+          role: (user as any).role || 'user', // Adjust based on your schema
+        },
+      }
+    },
+
+    // Add user info to JWT token
+    async jwt({ token, user, account }) {
+      if (user) {
+        token.id = user.id
+        token.role = (user as any).role || 'user'
+      }
+      return token
+    },
+  },
+
+  events: {
+    // Log important events
+    async signIn({ user, account, profile, isNewUser }) {
+      console.log(`User signed in: ${user.email}`)
+    },
+
+    async signOut({ token }) {
+      console.log(`User signed out`)
+    },
+  },
+} satisfies NextAuthConfig

package/templates/nextauth/auth.ts

@@ -0,0 +1,11 @@
+/**
+ * NextAuth v6 Instance
+ * 
+ * Copy to: ./auth.ts
+ * Wraps auth.config.ts with handlers for API routes, middleware, client hooks
+ */
+
+import NextAuth from 'next-auth'
+import { authConfig } from './auth.config'
+
+export const { handlers, auth, signIn, signOut } = NextAuth(authConfig)

package/templates/nextauth/route-handlers/[auth].ts

@@ -0,0 +1,10 @@
+/**
+ * NextAuth API Route Handler
+ * 
+ * Copy to: ./app/api/auth/[auth]/route.ts
+ * This handles all NextAuth routes: signIn, signOut, callback, etc.
+ */
+
+import { handlers } from '@/auth'
+
+export const { GET, POST } = handlers