create-ej-app 3.1.0 → 4.0.0

package/cli.js

@@ -40,10 +40,14 @@ commander_1.program.action(() => __awaiter(void 0, void 0, void 0, function* ()
             choices: [
                 {
                     name: 'base',
+                    message: 'Base setup with ts, shadcn, auth, drizzle, User Types and ACLs (roles & permissions)'
+                },
+                {
+                    name: 'prisma',
                     message: 'Base setup with ts, shadcn, prisma, auth, editor.js'
                 },
                 {
-                    name: 'advanced',
+                    name: 'prisma-advanced',
                     message: 'Advanced setup with User Types and ACLs (roles & permissions)'
                 }
             ]

package/cli.ts

@@ -1,16 +1,16 @@
 #!/usr/bin/env node
 
-import { program } from 'commander';
-import { prompt } from 'enquirer';
-import fs from 'fs';
-import path from 'path';
+import { program } from 'commander'
+import { prompt } from 'enquirer'
+import fs from 'fs'
+import path from 'path'
 //@ts-ignore
-import copydir from 'copy-dir';
+import copydir from 'copy-dir'
 
 interface Response {
-  projectName: string;
-  description: string;
-  template: string;
+  projectName: string
+  description: string
+  template: string
 }
 
 program.action(async () => {
@@ -34,48 +34,55 @@ program.action(async () => {
       choices: [
         {
           name: 'base',
+          message:
+            'Base setup with ts, shadcn, auth, drizzle, User Types and ACLs (roles & permissions)'
+        },
+        {
+          name: 'prisma',
           message: 'Base setup with ts, shadcn, prisma, auth, editor.js'
         },
         {
-          name: 'advanced',
+          name: 'prisma-advanced',
           message:
             'Advanced setup with User Types and ACLs (roles & permissions)'
         }
       ]
     }
-  ]);
+  ])
 
-  const { projectName, description, template } = response;
+  const { projectName, description, template } = response
 
-  const projectDir = path.join(process.cwd(), projectName);
+  const projectDir = path.join(process.cwd(), projectName)
 
   if (fs.existsSync(projectDir)) {
-    console.error(`Error: Directory '${projectName}' already exists.`);
-    process.exit(1);
+    console.error(`Error: Directory '${projectName}' already exists.`)
+    process.exit(1)
   }
 
-  fs.mkdirSync(projectDir);
+  fs.mkdirSync(projectDir)
 
-  const templateDir = path.join(__dirname, 'template', template);
-  copydir.sync(templateDir, projectDir);
+  const templateDir = path.join(__dirname, 'template', template)
+  copydir.sync(templateDir, projectDir)
 
-  const packageJsonFile = path.join(projectDir, 'package.json');
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonFile, 'utf-8'));
-  packageJson.name = projectName;
-  packageJson.description = description;
-  fs.writeFileSync(packageJsonFile, JSON.stringify(packageJson, null, 2));
+  const packageJsonFile = path.join(projectDir, 'package.json')
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonFile, 'utf-8'))
+  packageJson.name = projectName
+  packageJson.description = description
+  fs.writeFileSync(packageJsonFile, JSON.stringify(packageJson, null, 2))
 
-  const siteConfigFile = path.join(projectDir, 'src', 'lib', 'siteConfig.ts');
-  let siteConfig = fs.readFileSync(siteConfigFile, 'utf-8');
-  siteConfig = siteConfig.replace('Project Name', projectName);
-  siteConfig = siteConfig.replace('Project Description', description);
-  fs.writeFileSync(siteConfigFile, siteConfig);
+  const siteConfigFile = path.join(projectDir, 'src', 'lib', 'siteConfig.ts')
+  let siteConfig = fs.readFileSync(siteConfigFile, 'utf-8')
+  siteConfig = siteConfig.replace('Project Name', projectName)
+  siteConfig = siteConfig.replace('Project Description', description)
+  fs.writeFileSync(siteConfigFile, siteConfig)
 
-  const envExampleFile = path.join(projectDir, '.env.example');
-  const envExample = fs.readFileSync(envExampleFile, 'utf-8');
-  fs.writeFileSync(path.join(projectDir, '.env'), envExample);
+  const envExampleFile = path.join(projectDir, '.env.example')
+  const envExample = fs.readFileSync(envExampleFile, 'utf-8')
+  fs.writeFileSync(path.join(projectDir, '.env'), envExample)
 
-  console.log(`Created a new app called '${projectName}' 🎉\n\nTo get started, run the following commands:\n\ncd ${projectName}\nnpm install\nnpm run dev\n`);
-});
+  console.log(
+    `Created a new app called '${projectName}' 🎉\n\nTo get started, run the following commands:\n\ncd ${projectName}\nnpm install\nnpm run dev\n`
+  )
+})
 
-program.parse(process.argv);
+program.parse(process.argv)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ej-app",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Bootstrap a next.js app with my preferred setup",
   "main": "cli.js",
   "scripts": {
@@ -30,12 +30,12 @@
   },
   "homepage": "https://github.com/ejekanshjain/create-ej-app#readme",
   "dependencies": {
-    "commander": "^11.1.0",
+    "commander": "^12.1.0",
     "copy-dir": "^1.3.0",
     "enquirer": "^2.4.1"
   },
   "devDependencies": {
-    "@types/node": "^20.10.5",
-    "typescript": "^5.3.3"
+    "@types/node": "^20.14.9",
+    "typescript": "^5.5.2"
   }
 }

package/template/base/.env.example

@@ -1,4 +1,5 @@
-DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres?schema=public"
+NODE_ENV="development"
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
 NEXTAUTH_SECRET="secret"
 NEXTAUTH_URL="http://localhost:3000"
 EMAIL_SERVER_HOST="example.com"
@@ -6,11 +7,11 @@ EMAIL_SERVER_PORT="123"
 EMAIL_SERVER_USER="example@example.com"
 EMAIL_SERVER_PASSWORD="password"
 EMAIL_FROM="example@example.com"
-GOOGLE_ID=""
-GOOGLE_SECRET=""
-GITHUB_ID=""
-GITHUB_SECRET=""
-FIREBASE_PROJECT_ID=""
-FIREBASE_PRIVATE_KEY=""
-FIREBASE_CLIENT_EMAIL=""
-FIREBASE_STORAGE_BUCKET=""
+GOOGLE_ID="id"
+GOOGLE_SECRET="secret"
+GITHUB_ID="id"
+GITHUB_SECRET="secret"
+S3_REGION="ap-south-1"
+S3_BUCKET="bucket"
+S3_ACCESS_KEY="key"
+S3_SECRET_KEY="secret"

package/template/base/.eslintrc.cjs

@@ -1,24 +1,26 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path')
-
 /** @type {import("eslint").Linter.Config} */
 const eslintConfig = {
-  overrides: [
-    {
-      extends: [],
-      files: ['*.ts', '*.tsx'],
-      parserOptions: {
-        project: path.join(__dirname, 'tsconfig.json')
-      }
-    }
-  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: path.join(__dirname, 'tsconfig.json')
+    project: true
   },
-  plugins: ['@typescript-eslint'],
+  plugins: ['@typescript-eslint', 'drizzle'],
   extends: ['next/core-web-vitals'],
-  rules: {}
+  rules: {
+    '@typescript-eslint/array-type': 'off',
+    'drizzle/enforce-delete-with-where': [
+      'error',
+      {
+        drizzleObjectName: ['db', 'ctx.db']
+      }
+    ],
+    'drizzle/enforce-update-with-where': [
+      'error',
+      {
+        drizzleObjectName: ['db', 'ctx.db']
+      }
+    ]
+  }
 }
 
 module.exports = eslintConfig

package/template/base/components.json

@@ -5,9 +5,10 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "src/styles/globals.css",
+    "css": "src/app/globals.css",
     "baseColor": "neutral",
-    "cssVariables": true
+    "cssVariables": true,
+    "prefix": ""
   },
   "aliases": {
     "components": "@/components",

package/template/base/drizzle.config.ts

@@ -0,0 +1,11 @@
+import { type Config } from 'drizzle-kit'
+
+import { env } from '@/env.mjs'
+
+export default {
+  schema: './src/db/schema.ts',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: env.DATABASE_URL
+  }
+} satisfies Config

package/template/base/next.config.mjs

@@ -1,15 +1,4 @@
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
- * for Docker builds.
- */
-await import('./src/env.mjs')
-
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  i18n: {
-    locales: ['en'],
-    defaultLocale: 'en'
-  }
-}
+const nextConfig = {}
 
 export default nextConfig

package/template/base/package.json

@@ -4,77 +4,84 @@
   "description": "A Legendary Next.js App",
   "private": true,
   "scripts": {
-    "postinstall": "prisma generate",
+    "format": "prettier --write \"src/**/*.{js,cjs,mjs,jsx,ts,tsx}\"",
     "lint": "next lint",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "prisma:push": "prisma db push",
-    "prisma:gen": "prisma generate",
-    "prisma:studio": "prisma studio"
+    "db:generate": "drizzle-kit generate",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio"
   },
   "dependencies": {
+    "@auth/drizzle-adapter": "^1.4.1",
+    "@aws-sdk/client-s3": "^3.600.0",
+    "@aws-sdk/s3-presigned-post": "^3.600.0",
     "@editorjs/checklist": "^1.6.0",
+    "@editorjs/code": "^2.9.0",
     "@editorjs/delimiter": "^1.4.0",
-    "@editorjs/editorjs": "^2.28.2",
+    "@editorjs/editorjs": "^2.29.1",
     "@editorjs/header": "^2.8.1",
     "@editorjs/image": "^2.9.0",
+    "@editorjs/inline-code": "^1.5.0",
     "@editorjs/list": "^1.9.0",
+    "@editorjs/nested-list": "^1.4.2",
     "@editorjs/quote": "^2.6.0",
     "@editorjs/table": "^2.3.0",
-    "@ejekanshjain/cloud-storage": "^3.1.0",
-    "@hookform/resolvers": "^3.3.2",
-    "@next-auth/prisma-adapter": "^1.0.7",
-    "@prisma/client": "^5.7.1",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@t3-oss/env-nextjs": "^0.7.1",
-    "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/react-table": "^8.11.2",
-    "@types/eslint": "^8.56.0",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.5",
-    "@types/nodemailer": "^6.4.14",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
-    "@vercel/analytics": "^1.1.1",
-    "@vercel/speed-insights": "^1.0.2",
-    "autoprefixer": "^10.4.16",
+    "@hookform/resolvers": "^3.6.0",
+    "@paralleldrive/cuid2": "^2.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@t3-oss/env-nextjs": "^0.10.1",
+    "@tailwindcss/typography": "^0.5.13",
+    "@tanstack/react-table": "^8.17.3",
+    "@types/eslint": "^8.56.10",
+    "@types/node": "^20.14.9",
+    "@types/nodemailer": "^6.4.15",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "cmdk": "^0.2.0",
-    "dayjs": "^1.11.10",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "dayjs": "^1.11.11",
+    "drizzle-kit": "^0.22.7",
+    "drizzle-orm": "^0.31.2",
     "editorjs-html": "^3.4.3",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.0.4",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.302.0",
-    "next": "^14.0.4",
-    "next-auth": "^4.24.5",
-    "next-themes": "^0.2.1",
-    "nodemailer": "^6.9.7",
-    "postcss": "^8.4.32",
-    "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.5.9",
-    "prisma": "^5.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.49.2",
-    "tailwind-merge": "^2.2.0",
-    "tailwindcss": "^3.4.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.4",
+    "eslint-plugin-drizzle": "^0.2.3",
+    "geist": "^1.3.0",
+    "lucide-react": "^0.397.0",
+    "next": "^14.2.4",
+    "next-auth": "^4.24.7",
+    "next-safe-action": "^7.1.3",
+    "next-themes": "^0.3.0",
+    "nextjs-toploader": "^1.6.12",
+    "nodemailer": "^6.9.14",
+    "postcss": "^8.4.38",
+    "postcss-load-config": "^6.0.1",
+    "postgres": "^3.4.4",
+    "prettier": "^3.3.2",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.0",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.3.3",
-    "zod": "^3.22.4"
+    "typescript": "^5.5.2",
+    "zod": "^3.23.8"
   }
 }

package/template/base/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {}
+  }
+}
+
+export default config

package/template/base/prettier.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+const config = {
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
+  arrowParens: 'avoid',
+  trailingComma: 'none',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2
+}
+
+export default config

package/template/base/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

package/template/base/src/app/(app)/dashboard/layout.tsx

@@ -0,0 +1,14 @@
+import { Metadata } from 'next'
+import { ReactNode } from 'react'
+
+import { siteConfig } from '@/lib/siteConfig'
+
+export const metadata: Metadata = {
+  title: 'Dashboard' + ' | ' + siteConfig.name
+}
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return <>{children}</>
+}
+
+export default Layout

package/template/base/src/app/(app)/dashboard/page.tsx

@@ -1,12 +1,5 @@
-import { Metadata } from 'next'
-
 import { Heading } from '@/components/heading'
 import { Shell } from '@/components/shell'
-import { siteConfig } from '@/lib/siteConfig'
-
-export const metadata: Metadata = {
-  title: 'Dashboard' + ' | ' + siteConfig.name
-}
 
 const DashboardPage = () => {
   return (

package/template/base/src/app/(app)/layout.tsx

@@ -7,12 +7,22 @@ import { SideNav } from '@/components/side-nav'
 import { SiteFooter } from '@/components/site-footer'
 import { UserAccountNav } from '@/components/user-account-nav'
 import { getAuthSession } from '@/lib/auth'
+import { checkForRolePermissionUseCase } from '@/use-case/role-permission'
 
 const Layout = async ({ children }: { children: ReactNode }) => {
   const session = await getAuthSession()
 
   if (!session?.user) return notFound()
 
+  const isRoot = session.user.type === 'Root'
+  const [isTask] = await Promise.all([
+    checkForRolePermissionUseCase(
+      session.user.type,
+      session.user.roleId,
+      'TaskList'
+    )
+  ])
+
   return (
     <div className="flex min-h-screen flex-col space-y-6">
       <header className="sticky top-0 z-40 border-b bg-background">
@@ -24,20 +34,33 @@ const Layout = async ({ children }: { children: ReactNode }) => {
                 title: 'Dashboard',
                 href: '/dashboard'
               },
-              {
-                title: 'Users',
-                href: '/users'
-              },
-              {
-                title: 'Tasks',
-                href: '/tasks'
-              }
+              ...(isRoot
+                ? [
+                    {
+                      title: 'Users',
+                      href: '/users'
+                    },
+                    {
+                      title: 'Roles',
+                      href: '/roles'
+                    }
+                  ]
+                : []),
+              ...(isTask
+                ? [
+                    {
+                      title: 'Tasks',
+                      href: '/tasks'
+                    }
+                  ]
+                : [])
             ]}
           />
           <div className="flex items-center justify-center space-x-4">
             <AppNavCommand
               modules={{
-                task: true
+                task: true,
+                root: session.user.type === 'Root'
               }}
             />
             <UserAccountNav
@@ -59,17 +82,29 @@ const Layout = async ({ children }: { children: ReactNode }) => {
                 href: '/dashboard',
                 icon: 'dashboard'
               },
-
-              {
-                title: 'Users',
-                href: '/users',
-                icon: 'user'
-              },
-              {
-                title: 'Tasks',
-                href: '/tasks',
-                icon: 'task'
-              },
+              ...(isRoot
+                ? [
+                    {
+                      title: 'Users',
+                      href: '/users',
+                      icon: 'user' as const
+                    },
+                    {
+                      title: 'Roles',
+                      href: '/roles',
+                      icon: 'mixer' as const
+                    }
+                  ]
+                : []),
+              ...(isTask
+                ? [
+                    {
+                      title: 'Tasks',
+                      href: '/tasks',
+                      icon: 'task' as const
+                    }
+                  ]
+                : []),
               {
                 title: 'Settings',
                 href: '/settings',

package/template/base/src/app/(app)/roles/[id]/actions.ts

@@ -0,0 +1,59 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { z } from 'zod'
+
+import { authActionClient } from '@/lib/safe-action'
+import {
+  createRoleUseCase,
+  deleteRoleUseCase,
+  getRoleByIdWithPermissionsUseCase,
+  updateRoleUseCase
+} from '@/use-case/role'
+import { RoleCreateUpdateSchema, RoleUpdateServerSchema } from './validation'
+
+export const getRoleAction = authActionClient
+  .schema(z.string())
+  .action(async ({ parsedInput: id, ctx }) => {
+    return await getRoleByIdWithPermissionsUseCase(ctx.user.type, id)
+  })
+
+export const createRoleAction = authActionClient
+  .schema(RoleCreateUpdateSchema)
+  .action(async ({ parsedInput: { name, permissions }, ctx }) => {
+    const id = await createRoleUseCase(ctx.user.type, { name, permissions })
+
+    revalidatePath('/roles')
+    revalidatePath(`/roles/${id}`)
+
+    return {
+      success: true,
+      id
+    }
+  })
+
+export const updateRoleAction = authActionClient
+  .schema(RoleUpdateServerSchema)
+  .action(async ({ parsedInput: { id, name, permissions }, ctx }) => {
+    await updateRoleUseCase(ctx.user.type, { id, name, permissions })
+
+    revalidatePath('/roles')
+    revalidatePath(`/roles/${id}`)
+
+    return {
+      success: true
+    }
+  })
+
+export const deleteRoleAction = authActionClient
+  .schema(z.string())
+  .action(async ({ parsedInput: id, ctx }) => {
+    await deleteRoleUseCase(ctx.user.type, id)
+
+    revalidatePath('/roles')
+    revalidatePath(`/roles/${id}`)
+
+    return {
+      success: true
+    }
+  })