@webdevarif/dashui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webdevarif/dashui",
-    "version": "0.4.0",
+    "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",
@@ -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

package/templates/prisma/multi-tenant-schema.prisma

@@ -0,0 +1,165 @@
+// This is your Prisma schema file.
+// Learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+// ─── NextAuth Models ────────────────────────────────────────────────────────
+// Auto-generated by NextAuth + Prisma Adapter
+
+model Account {
+  id                 String  @id @default(cuid())
+  userId             String
+  type               String
+  provider           String
+  providerAccountId  String
+  refresh_token      String?  @db.Text
+  access_token       String?  @db.Text
+  expires_at         Int?
+  token_type         String?
+  scope              String?
+  id_token           String?  @db.Text
+  session_state      String?
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
+}
+
+model Session {
+  id           String   @id @default(cuid())
+  sessionToken String   @unique
+  userId       String
+  expires      DateTime
+  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+model VerificationToken {
+  identifier String
+  token      String   @unique
+  expires    DateTime
+
+  @@unique([identifier, token])
+}
+
+// ─── User & Auth ────────────────────────────────────────────────────────────
+
+model User {
+  id            String    @id @default(cuid())
+  name          String?
+  email         String    @unique
+  emailVerified DateTime?
+  password      String?   // Only for credentials provider
+  image         String?
+  role          String    @default("user") // "admin", "user", "moderator"
+  createdAt     DateTime  @default(now())
+  updatedAt     DateTime  @updatedAt
+
+  // Relations
+  accounts     Account[]
+  sessions     Session[]
+  stores       Store[]      @relation("storeOwner")
+  members      StoreMember[]
+  posts        Post[]
+}
+
+// ─── Multi-Tenant: Store/Organization ──────────────────────────────────────
+
+model Store {
+  id          String   @id @default(cuid())
+  name        String
+  slug        String   @unique
+  ownerId     String
+  owner       User     @relation("storeOwner", fields: [ownerId], references: [id], onDelete: Cascade)
+  description String?
+  logo        String?
+  settings    Json?    // Store-specific settings
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  // Relations
+  members     StoreMember[]
+  posts       Post[]
+  products    Product[]
+}
+
+model StoreMember {
+  id      String @id @default(cuid())
+  storeId String
+  userId  String
+  role    String @default("member") // "admin", "editor", "member", "viewer"
+
+  store Store @relation(fields: [storeId], references: [id], onDelete: Cascade)
+  user  User  @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([storeId, userId])
+}
+
+// ─── Content: Posts/Pages ──────────────────────────────────────────────────
+
+model Post {
+  id        String   @id @default(cuid())
+  storeId   String
+  title     String
+  slug      String
+  content   String   @db.Text
+  status    String   @default("draft") // "draft", "published", "scheduled", "archived"
+  type      String   @default("post") // "post", "page", "custom"
+  excerpt   String?
+  image     String?
+  authorId  String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  store  Store @relation(fields: [storeId], references: [id], onDelete: Cascade)
+  author User  @relation(fields: [authorId], references: [id], onDelete: Cascade)
+
+  @@unique([storeId, slug])
+  @@index([storeId])
+  @@index([authorId])
+}
+
+// ─── E-Commerce: Products ────────────────────────────────────────────────
+
+model Product {
+  id          String   @id @default(cuid())
+  storeId     String
+  name        String
+  description String?  @db.Text
+  price       Decimal  @db.Decimal(10, 2)
+  image       String?
+  published   Boolean  @default(false)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  store Store @relation(fields: [storeId], references: [id], onDelete: Cascade)
+
+  @@index([storeId])
+}
+
+// ─── Extend with your own models ────────────────────────────────────────────
+
+// Example: E-commerce orders
+// model Order {
+//   id          String @id @default(cuid())
+//   storeId     String
+//   userId      String
+//   total       Decimal
+//   status      String @default("pending")
+//   createdAt   DateTime @default(now())
+// }
+
+// Example: Blog comments
+// model Comment {
+//   id        String @id @default(cuid())
+//   postId    String
+//   userId    String
+//   content   String @db.Text
+//   createdAt DateTime @default(now())
+// }