create-ej-app 1.0.0 → 2.0.0

package/cli.js

@@ -7,7 +7,7 @@ const { prompt } = require('enquirer')
 const copydir = require('copy-dir')
 
 program
-  .version('1.0.0')
+  .version('2.0.0')
   .description('CLI tool to bootstrap a Next.js App')
   .action(async () => {
     const response = await prompt([
@@ -22,10 +22,23 @@ program
         name: 'description',
         message: 'Enter a description for the project:',
         initial: 'A Legendary Next.js App'
+      },
+      {
+        type: 'select',
+        name: 'template',
+        message: 'Select a template:',
+        choices: [
+          { name: 'Base', value: 'base' },
+          {
+            name: 'With user types and ACLs (roles & permissions)',
+            value: 'advanced'
+          }
+        ],
+        initial: 0
       }
     ])
 
-    const { projectName, description } = response
+    const { projectName, description, template } = response
 
     // Create a directory with the project name
     const projectDir = path.join(process.cwd(), projectName)
@@ -38,7 +51,7 @@ program
     fs.mkdirSync(projectDir)
 
     // Copy all files and subdirectories from your template folder to the new project directory
-    const templateDir = path.join(__dirname, 'template')
+    const templateDir = path.join(__dirname, 'template', template)
     copydir.sync(templateDir, projectDir)
 
     // Modify package.json in the new project directory to set the project name and description
@@ -55,6 +68,11 @@ program
     siteConfig = siteConfig.replace('Project Description', description)
     fs.writeFileSync(siteConfigFile, siteConfig)
 
+    // Copy .env.example to .env
+    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 Next.js app called '${projectName}'
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ej-app",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Bootstrap a next.js app with my preferred setup",
   "main": "cli.js",
   "scripts": {

package/template/{.env.example → advanced/.env.example}

@@ -10,3 +10,7 @@ GOOGLE_ID=""
 GOOGLE_SECRET=""
 GITHUB_ID=""
 GITHUB_SECRET=""
+FIREBASE_PROJECT_ID=""
+FIREBASE_PRIVATE_KEY=""
+FIREBASE_CLIENT_EMAIL=""
+FIREBASE_STORAGE_BUCKET=""

package/template/{components.json → advanced/components.json}

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.cjs",
-    "css": "src/app/globals.css",
+    "css": "src/styles/globals.css",
     "baseColor": "neutral",
     "cssVariables": true
   },

package/template/{package.json → advanced/package.json}

@@ -14,6 +14,15 @@
     "prisma:studio": "prisma studio"
   },
   "dependencies": {
+    "@editorjs/checklist": "^1.5.0",
+    "@editorjs/delimiter": "^1.3.0",
+    "@editorjs/editorjs": "^2.28.0",
+    "@editorjs/header": "^2.7.0",
+    "@editorjs/image": "^2.8.1",
+    "@editorjs/list": "^1.8.0",
+    "@editorjs/quote": "^2.5.0",
+    "@editorjs/table": "^2.2.2",
+    "@ejekanshjain/cloud-storage": "^3.0.0",
     "@hookform/resolvers": "^3.3.1",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.3.1",
@@ -29,6 +38,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
     "@t3-oss/env-nextjs": "^0.6.1",
+    "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-table": "^8.10.1",
     "@types/eslint": "^8.44.2",
     "@types/lodash": "^4.14.199",
@@ -44,6 +54,7 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "dayjs": "^1.11.10",
+    "editorjs-html": "^3.4.3",
     "eslint": "^8.50.0",
     "eslint-config-next": "^13.5.2",
     "lodash": "^4.17.21",

package/template/{prisma → advanced/prisma}/schema.prisma

@@ -123,7 +123,9 @@ model Task {
     id          String     @id @default(cuid())
     title       String
     status      TaskStatus
-    description String?
+    description Json?
+
+    images Resource[] @relation("taskImages")
 
     createdAt   DateTime @default(now()) @db.Timestamptz()
     updatedAt   DateTime @default(now()) @updatedAt @db.Timestamptz()
@@ -134,3 +136,18 @@ model Task {
 
     @@map("Tasks")
 }
+
+model Resource {
+    id               String @id @default(cuid())
+    originalFilename String
+    newFilename      String @unique
+    url              String @unique
+
+    taskId String?
+    task   Task?   @relation("taskImages", fields: [taskId], references: [id])
+
+    createdAt DateTime @default(now()) @db.Timestamptz()
+    updatedAt DateTime @default(now()) @updatedAt @db.Timestamptz()
+
+    @@map("Resources")
+}

package/template/{src → advanced/src}/app/(app)/tasks/[id]/actions.ts

@@ -37,11 +37,13 @@ export type GetTaskFnDataType = UnwrapPromise<ReturnType<typeof getTask>>
 export const createTask = async ({
   title,
   status,
-  description
+  description,
+  imageIds
 }: {
   title: string
   status: TaskStatus
-  description?: string | null
+  description?: any
+  imageIds: string[]
 }) => {
   const session = await authGuard(['Root', 'Normal'], 'TaskCreate')
   if (!session) throw new Error('Unauthorized')
@@ -55,6 +57,25 @@ export const createTask = async ({
       updatedById: session.user.id
     }
   })
+  await prisma.resource.updateMany({
+    where: {
+      taskId: id
+    },
+    data: {
+      taskId: null
+    }
+  })
+  if (imageIds.length)
+    await prisma.resource.updateMany({
+      where: {
+        id: {
+          in: imageIds
+        }
+      },
+      data: {
+        taskId: id
+      }
+    })
 
   revalidatePath('/tasks')
   revalidatePath(`/tasks/${id}`)
@@ -66,12 +87,14 @@ export const updateTask = async ({
   id,
   title,
   status,
-  description
+  description,
+  imageIds
 }: {
   id: string
   title: string
   status: TaskStatus
-  description?: string | null
+  description?: any
+  imageIds: string[]
 }) => {
   const session = await authGuard(['Root', 'Normal'], 'TaskUpdate')
   if (!session) throw new Error('Unauthorized')
@@ -87,6 +110,25 @@ export const updateTask = async ({
       updatedById: session.user.id
     }
   })
+  await prisma.resource.updateMany({
+    where: {
+      taskId: id
+    },
+    data: {
+      taskId: null
+    }
+  })
+  if (imageIds.length)
+    await prisma.resource.updateMany({
+      where: {
+        id: {
+          in: imageIds
+        }
+      },
+      data: {
+        taskId: id
+      }
+    })
 
   revalidatePath('/tasks')
   revalidatePath(`/tasks/${id}`)

package/template/{src → advanced/src}/app/(app)/tasks/[id]/render.tsx

@@ -1,10 +1,12 @@
 'use client'
 
+import EditorJS from '@editorjs/editorjs'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { TaskStatus } from '@prisma/client'
+import edjsHTML from 'editorjs-html'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { FC, useState } from 'react'
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 
@@ -40,10 +42,10 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
-import { Textarea } from '@/components/ui/textarea'
 import { toast } from '@/components/ui/use-toast'
 import { formatDateTime, timesAgo } from '@/lib/formatDate'
 import { generateLabel } from '@/lib/generateLabel'
+import '@/styles/editor.css'
 import {
   GetTaskFnDataType,
   createTask,
@@ -53,8 +55,7 @@ import {
 
 const TaskSchema = z.object({
   title: z.string().nonempty(),
-  status: z.nativeEnum(TaskStatus),
-  description: z.string().optional()
+  status: z.nativeEnum(TaskStatus)
 })
 
 type FormData = z.infer<typeof TaskSchema>
@@ -64,6 +65,8 @@ const statuses = Object.values(TaskStatus).map(x => ({
   value: x
 }))
 
+const edjsParser = edjsHTML()
+
 export const Render: FC<{
   task: GetTaskFnDataType | undefined
   canUpdate: boolean
@@ -74,24 +77,134 @@ export const Render: FC<{
     resolver: zodResolver(TaskSchema),
     defaultValues: {
       title: task?.title ?? '',
-      status: task?.status || 'Todo',
-      description: task?.description ?? ''
+      status: task?.status || 'Todo'
     }
   })
   const router = useRouter()
   const [isSaving, setIsSaving] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
+  const [isEditorMounted, setIsMounted] = useState<boolean>(false)
+
+  const editorRef = useRef<EditorJS>()
+
+  const initializeEditor = useCallback(async () => {
+    const EditorJS = (await import('@editorjs/editorjs')).default
+
+    // @ts-ignore
+    const Table = (await import('@editorjs/table')).default
+    // @ts-ignore
+    const List = (await import('@editorjs/list')).default
+    // @ts-ignore
+    const Image = (await import('@editorjs/image')).default
+    // @ts-ignore
+    const Header = (await import('@editorjs/header')).default
+    // @ts-ignore
+    const Quote = (await import('@editorjs/quote')).default
+    // @ts-ignore
+    const CheckList = (await import('@editorjs/checklist')).default
+    // @ts-ignore
+    const Delimiter = (await import('@editorjs/delimiter')).default
+
+    if (!editorRef.current) {
+      const editor = new EditorJS({
+        holder: 'editor',
+        onReady() {
+          editorRef.current = editor
+        },
+        placeholder: 'Type here to write...',
+        inlineToolbar: true,
+        data: task?.description as any,
+        tools: {
+          header: Header,
+          list: List,
+          image: {
+            class: Image,
+            config: {
+              uploader: {
+                async uploadByFile(file: any) {
+                  const formData = new FormData()
+                  formData.append('file', file)
+                  const res = await fetch('/api/upload', {
+                    method: 'POST',
+                    body: formData
+                  })
+                  const json = await res.json()
+                  if (json.success && json.id && json.url) {
+                    return {
+                      success: true,
+                      file: {
+                        id: json.id,
+                        url: json.url
+                      }
+                    }
+                  } else {
+                    return {
+                      success: false
+                    }
+                  }
+                }
+              }
+            }
+          },
+          table: Table,
+          checklist: CheckList,
+          quote: Quote,
+          delimiter: Delimiter
+        }
+      })
+    }
+  }, [task?.description])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') setIsMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!isEditorMounted) return
+
+    initializeEditor()
+
+    return () => {
+      editorRef.current?.destroy()
+      editorRef.current = undefined
+    }
+  }, [isEditorMounted, initializeEditor])
+
+  const editorHTML = useMemo(() => {
+    if (!task?.description) return ''
+    return edjsParser.parse(task.description as any).join('')
+  }, [task?.description])
+  console.log(editorHTML)
 
   async function onSubmit(data: FormData) {
     setIsSaving(true)
     try {
+      const editorData = await editorRef.current?.save()
+      const imageIds: string[] = []
+      if (editorData?.blocks)
+        for (const b of editorData.blocks)
+          if (
+            b.type === 'image' &&
+            b.data &&
+            b.data.file &&
+            b.data.file.id &&
+            b.data.file.url
+          )
+            imageIds.push(b.data.file.id)
+
       if (!task) {
-        const newId = await createTask(data)
+        const newId = await createTask({
+          ...data,
+          description: editorData,
+          imageIds
+        })
         router.replace(`/tasks/${newId}`)
       } else {
         await updateTask({
           id: task.id,
-          ...data
+          ...data,
+          description: editorData,
+          imageIds
         })
       }
       toast({
@@ -243,23 +356,21 @@ export const Render: FC<{
             )}
           />
 
-          <FormField
-            control={form.control}
-            name="description"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Description</FormLabel>
-                <FormControl>
-                  <Textarea
-                    placeholder="Enter description here"
-                    disabled={isSaving}
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+          {isEditorMounted ? (
+            <div className="col-span-1 md:col-span-2 w-full mt-5 prose prose-neutral mx-auto dark:prose-invert">
+              <h3 className="w-full bg-transparent text-3xl font-bold">
+                Description
+              </h3>
+              <div id="editor" className="min-h-[360px] w-full" />
+              <p className="text-sm text-gray-500">
+                Use{' '}
+                <kbd className="rounded-md border bg-muted px-1 text-xs uppercase">
+                  Tab
+                </kbd>{' '}
+                to open the command menu.
+              </p>
+            </div>
+          ) : undefined}
         </form>
       </Form>
       {task ? (

package/template/{src → advanced/src}/app/(app)/tasks/actions.ts

@@ -12,7 +12,6 @@ export const getTasks = async ({
   sortBy,
   sortOrder,
   title,
-  description,
   status
 }: {
   page: number
@@ -20,7 +19,6 @@ export const getTasks = async ({
   sortBy?: keyof Task
   sortOrder?: 'asc' | 'desc'
   title?: string
-  description?: string
   status?: TaskStatus[]
 }) => {
   const session = await authGuard(['Root', 'Normal'], 'TaskList')
@@ -30,9 +28,6 @@ export const getTasks = async ({
     title: title
       ? { contains: title, mode: 'insensitive' as const }
       : undefined,
-    description: description
-      ? { contains: description, mode: 'insensitive' as const }
-      : undefined,
     status: status?.length ? { in: status } : undefined
   }
   const [tasks, total] = await Promise.all([
@@ -41,7 +36,6 @@ export const getTasks = async ({
       select: {
         id: true,
         title: true,
-        description: true,
         status: true,
         createdAt: true,
         updatedAt: true,

package/template/{src → advanced/src}/app/(app)/tasks/page.tsx

@@ -19,7 +19,6 @@ const TasksPage = async ({
     limit?: string
     sort?: string
     title?: string
-    description?: string
     status?: string
   }
 }) => {
@@ -38,7 +37,6 @@ const TasksPage = async ({
       : []
 
   const title = searchParams.title
-  const description = searchParams.description
 
   const status =
     typeof searchParams.status === 'string'
@@ -56,7 +54,6 @@ const TasksPage = async ({
     sortBy,
     sortOrder,
     title,
-    description,
     status
   })
 

package/template/{src → advanced/src}/app/(app)/tasks/render.tsx

@@ -55,12 +55,6 @@ export const Render: FC<{
                 row.original.title
               )
           },
-          {
-            accessorKey: 'description',
-            header: ({ column }) => (
-              <DataTableColumnHeader column={column} title="Description" />
-            )
-          },
           {
             accessorKey: 'status',
             header: ({ column }) => (
@@ -105,10 +99,6 @@ export const Render: FC<{
           {
             id: 'title',
             title: 'Title'
-          },
-          {
-            id: 'description',
-            title: 'Description'
           }
         ]}
         filterableColumns={[

package/template/advanced/src/app/api/upload/route.ts

@@ -0,0 +1,45 @@
+import { GCPStorageClient } from '@ejekanshjain/cloud-storage'
+import { NextRequest, NextResponse } from 'next/server'
+
+import { env } from '@/env.mjs'
+import { getAuthSession } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+
+const storageClient = GCPStorageClient({
+  projectId: env.FIREBASE_PROJECT_ID!,
+  privateKey: env.FIREBASE_PRIVATE_KEY!,
+  clientEmail: env.FIREBASE_CLIENT_EMAIL!,
+  bucket: env.FIREBASE_STORAGE_BUCKET!,
+  defaultMediaPublic: true
+})
+
+export async function POST(request: NextRequest) {
+  const session = await getAuthSession()
+  if (!session)
+    return NextResponse.json({
+      success: false
+    })
+
+  const data = await request.formData()
+  const file: File | null = data.get('file') as unknown as File
+
+  if (!file) return NextResponse.json({ success: false })
+
+  const bytes = await file.arrayBuffer()
+  const buffer = Buffer.from(bytes)
+
+  const filename = `${Date.now()}-${Math.random()}-${file.name}`
+  const url = await storageClient.addFile({
+    filename,
+    data: buffer
+  })
+  const { id } = await prisma.resource.create({
+    data: {
+      newFilename: filename,
+      originalFilename: file.name,
+      url
+    }
+  })
+
+  return NextResponse.json({ success: true, id, url })
+}

package/template/{src → advanced/src}/app/layout.tsx

@@ -6,7 +6,7 @@ import { ReactNode } from 'react'
 import { ThemeProvider } from '@/components/theme-provider'
 import { Toaster } from '@/components/ui/toaster'
 import { siteConfig } from '@/lib/siteConfig'
-import './globals.css'
+import '@/styles/globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 

package/template/{src → advanced/src}/env.mjs

@@ -28,7 +28,11 @@ export const env = createEnv({
     GOOGLE_ID: z.string().min(1),
     GOOGLE_SECRET: z.string().min(1),
     GITHUB_ID: z.string().min(1),
-    GITHUB_SECRET: z.string().min(1)
+    GITHUB_SECRET: z.string().min(1),
+    FIREBASE_PROJECT_ID: z.string().min(1),
+    FIREBASE_PRIVATE_KEY: z.string().min(1),
+    FIREBASE_CLIENT_EMAIL: z.string().min(1),
+    FIREBASE_STORAGE_BUCKET: z.string().min(1)
   },
 
   /**
@@ -57,7 +61,11 @@ export const env = createEnv({
     GOOGLE_ID: process.env.GOOGLE_ID,
     GOOGLE_SECRET: process.env.GOOGLE_SECRET,
     GITHUB_ID: process.env.GITHUB_ID,
-    GITHUB_SECRET: process.env.GITHUB_SECRET
+    GITHUB_SECRET: process.env.GITHUB_SECRET,
+    FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
+    FIREBASE_PRIVATE_KEY: process.env.FIREBASE_PRIVATE_KEY,
+    FIREBASE_CLIENT_EMAIL: process.env.FIREBASE_CLIENT_EMAIL,
+    FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.

package/template/advanced/src/styles/editor.css

@@ -0,0 +1,61 @@
+.dark .ce-block--selected .ce-block__content,
+.dark .ce-inline-toolbar,
+.dark .codex-editor--narrow .ce-toolbox,
+.dark .ce-conversion-toolbar,
+.dark .ce-settings,
+.dark .ce-settings__button,
+.dark .ce-toolbar__settings-btn,
+.dark .cdx-button,
+.dark .ce-popover,
+.dark .ce-toolbar__plus:hover {
+  background: theme('colors.popover.DEFAULT');
+  color: inherit;
+  border-color: theme('colors.border');
+}
+
+.dark .ce-inline-tool,
+.dark .ce-conversion-toolbar__label,
+.dark .ce-toolbox__button,
+.dark .cdx-settings-button,
+.dark .ce-toolbar__plus {
+  color: inherit;
+}
+
+.dark .ce-popover__item-icon,
+.dark .ce-conversion-tool__icon {
+  background-color: theme('colors.muted.DEFAULT');
+  box-shadow: none;
+}
+
+.dark .cdx-search-field {
+  border-color: theme('colors.border');
+  background: theme('colors.input');
+  color: inherit;
+}
+
+.dark ::selection {
+  background: theme('colors.accent.DEFAULT');
+}
+
+.dark .cdx-settings-button:hover,
+.dark .ce-settings__button:hover,
+.dark .ce-toolbox__button--active,
+.dark .ce-toolbox__button:hover,
+.dark .cdx-button:hover,
+.dark .ce-inline-toolbar__dropdown:hover,
+.dark .ce-inline-tool:hover,
+.dark .ce-popover__item:hover,
+.dark .ce-conversion-tool:hover,
+.dark .ce-toolbar__settings-btn:hover {
+  background-color: theme('colors.accent.DEFAULT');
+  color: theme('colors.accent.foreground');
+}
+
+.dark .cdx-notify--error {
+  background: theme('colors.destructive.DEFAULT') !important;
+}
+
+.dark .cdx-notify__cross::after,
+.dark .cdx-notify__cross::before {
+  background: white;
+}

package/template/{tailwind.config.ts → advanced/tailwind.config.ts}

@@ -73,7 +73,7 @@ const tailwindConfig: Config = {
       }
     }
   },
-  plugins: [require('tailwindcss-animate')]
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')]
 }
 
 module.exports = tailwindConfig