create-ej-app 3.2.0 → 5.0.0

package/template/prisma/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "description": "A Legendary Next.js App",
+  "private": true,
+  "scripts": {
+    "postinstall": "prisma generate",
+    "lint": "next lint",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "db:push": "prisma db push",
+    "db:gen": "prisma generate",
+    "db:studio": "prisma studio"
+  },
+  "dependencies": {
+    "@editorjs/checklist": "^1.6.0",
+    "@editorjs/delimiter": "^1.4.0",
+    "@editorjs/editorjs": "^2.28.2",
+    "@editorjs/header": "^2.8.1",
+    "@editorjs/image": "^2.9.0",
+    "@editorjs/list": "^1.9.0",
+    "@editorjs/quote": "^2.6.0",
+    "@editorjs/table": "^2.3.0",
+    "@ejekanshjain/cloud-storage": "^3.2.0",
+    "@hookform/resolvers": "^3.3.3",
+    "@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.46",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vercel/analytics": "^1.1.1",
+    "@vercel/speed-insights": "^1.0.2",
+    "autoprefixer": "^10.4.16",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
+    "dayjs": "^1.11.10",
+    "editorjs-html": "^3.4.3",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.303.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.10",
+    "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",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.3.3",
+    "zod": "^3.22.4"
+  }
+}

package/template/prisma/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

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

@@ -0,0 +1,19 @@
+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 (
+    <Shell>
+      <Heading heading="Dashboard" />
+    </Shell>
+  )
+}
+
+export default DashboardPage

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

@@ -0,0 +1,90 @@
+import { notFound } from 'next/navigation'
+import { ReactNode } from 'react'
+
+import { AppNavCommand } from '@/components/app-nav-command'
+import { MainNav } from '@/components/main-nav'
+import { SideNav } from '@/components/side-nav'
+import { SiteFooter } from '@/components/site-footer'
+import { UserAccountNav } from '@/components/user-account-nav'
+import { getAuthSession } from '@/lib/auth'
+
+const Layout = async ({ children }: { children: ReactNode }) => {
+  const session = await getAuthSession()
+
+  if (!session?.user) return notFound()
+
+  return (
+    <div className="flex min-h-screen flex-col space-y-6">
+      <header className="sticky top-0 z-40 border-b bg-background">
+        <div className="container flex h-16 items-center justify-between py-4">
+          <MainNav
+            logoLink="/dashboard"
+            items={[
+              {
+                title: 'Dashboard',
+                href: '/dashboard'
+              },
+              {
+                title: 'Users',
+                href: '/users'
+              },
+              {
+                title: 'Tasks',
+                href: '/tasks'
+              }
+            ]}
+          />
+          <div className="flex items-center justify-center space-x-4">
+            <AppNavCommand
+              modules={{
+                task: true
+              }}
+            />
+            <UserAccountNav
+              user={{
+                name: session.user.name,
+                image: session.user.image,
+                email: session.user.email
+              }}
+            />
+          </div>
+        </div>
+      </header>
+      <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
+        <aside className="hidden w-[200px] flex-col md:flex">
+          <SideNav
+            items={[
+              {
+                title: 'Dashboard',
+                href: '/dashboard',
+                icon: 'dashboard'
+              },
+
+              {
+                title: 'Users',
+                href: '/users',
+                icon: 'user'
+              },
+              {
+                title: 'Tasks',
+                href: '/tasks',
+                icon: 'task'
+              },
+              {
+                title: 'Settings',
+                href: '/settings',
+                icon: 'settings'
+              }
+            ]}
+          />
+        </aside>
+        <main className="flex w-full flex-1 flex-col overflow-hidden">
+          {children}
+        </main>
+      </div>
+      <SiteFooter className="border-t" />
+    </div>
+  )
+}
+
+export default Layout

package/template/prisma/src/app/(app)/settings/actions.ts

@@ -0,0 +1,18 @@
+'use server'
+
+import { getAuthSession } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+
+export const updateName = async ({ name }: { name: string }) => {
+  const session = await getAuthSession()
+  if (!session?.user) throw new Error('Unauthorized')
+
+  await prisma.user.update({
+    where: {
+      id: session.user.id
+    },
+    data: {
+      name
+    }
+  })
+}

package/template/prisma/src/app/(app)/settings/loading.tsx

@@ -0,0 +1,28 @@
+import { Heading } from '@/components/heading'
+import { Shell } from '@/components/shell'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const Loading = () => {
+  return (
+    <Shell>
+      <Heading heading="Settings" text="Manage account and profile settings." />
+      <div className="grid gap-10">
+        <Card>
+          <CardHeader className="gap-2">
+            <Skeleton className="h-6 w-1/5" />
+            <Skeleton className="h-4 w-4/5" />
+          </CardHeader>
+          <CardContent className="h-10">
+            <Skeleton className="h-8 w-full max-w-[400px]" />
+          </CardContent>
+          <CardFooter>
+            <Skeleton className="h-8 w-full max-w-[120px]" />
+          </CardFooter>
+        </Card>
+      </div>
+    </Shell>
+  )
+}
+
+export default Loading

package/template/prisma/src/app/(app)/settings/page.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from 'next'
+
+import { Heading } from '@/components/heading'
+import { Shell } from '@/components/shell'
+import { getAuthSession } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+import { Render } from './render'
+
+export const metadata: Metadata = {
+  title: 'Settings' + ' | ' + siteConfig.name
+}
+
+const SettingsPage = async () => {
+  const session = await getAuthSession()
+
+  if (!session?.user) return
+
+  return (
+    <Shell>
+      <Heading heading="Settings" text="Manage account and profile settings." />
+      <div className="grid gap-10">
+        <Render name={session.user.name || ''} />
+      </div>
+    </Shell>
+  )
+}
+
+export default SettingsPage

package/template/prisma/src/app/(app)/settings/render.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter } from 'next/navigation'
+import { FC, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Icons } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { toast } from '@/components/ui/use-toast'
+import { updateName } from './actions'
+
+const userSchema = z.object({
+  name: z.string().nonempty()
+})
+
+type FormData = z.infer<typeof userSchema>
+
+export const Render: FC<{ name: string }> = ({ name }) => {
+  const form = useForm<FormData>({
+    resolver: zodResolver(userSchema),
+    defaultValues: {
+      name
+    }
+  })
+  const router = useRouter()
+  const [isSaving, setIsSaving] = useState(false)
+
+  async function onSubmit(data: FormData) {
+    setIsSaving(true)
+
+    try {
+      await updateName({
+        ...data
+      })
+      toast({
+        title: 'Your name has been updated.'
+      })
+      router.refresh()
+    } catch (err) {
+      toast({
+        title: 'Internal Server Error',
+        variant: 'destructive',
+        description: 'Please try again later.'
+      })
+    }
+
+    setIsSaving(false)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle>Your Name</CardTitle>
+            <CardDescription>
+              Please enter your full name or a display name you are comfortable
+              with.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="max-w-[400px]">
+                  <FormControl>
+                    <Input
+                      type="text"
+                      placeholder="Your Name"
+                      autoComplete="name"
+                      disabled={isSaving}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter>
+            <Button type="submit" disabled={isSaving}>
+              {isSaving ? (
+                <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Icons.save className="mr-2 h-4 w-4" />
+              )}
+              <span>Save</span>
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  )
+}

package/template/prisma/src/app/(app)/tasks/[id]/actions.ts

@@ -0,0 +1,147 @@
+'use server'
+
+import { TaskStatus } from '@prisma/client'
+import { revalidatePath } from 'next/cache'
+
+import { getAuthSession } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+import { storageClient } from '@/lib/storageClient'
+import { UnwrapPromise } from '@/types/UnwrapPromise'
+
+const handleImages = async (imageIds: string[], taskId: string) => {
+  const prevImages = await prisma.resource.findMany({
+    where: {
+      taskId
+    }
+  })
+
+  for (const p of prevImages) {
+    if (imageIds.includes(p.id)) continue
+    await Promise.all([
+      storageClient.deleteFile(p.newFilename),
+      prisma.resource.delete({
+        where: {
+          id: p.id
+        }
+      })
+    ])
+  }
+
+  if (imageIds.length)
+    await prisma.resource.updateMany({
+      where: {
+        id: {
+          in: imageIds
+        }
+      },
+      data: {
+        taskId
+      }
+    })
+}
+
+export const getTask = async (id: string) => {
+  const session = await getAuthSession()
+  if (!session) throw new Error('Unauthorized')
+
+  return await prisma.task.findUnique({
+    where: {
+      id
+    },
+    include: {
+      createdBy: {
+        select: {
+          id: true,
+          name: true
+        }
+      },
+      updatedBy: {
+        select: {
+          id: true,
+          name: true
+        }
+      }
+    }
+  })
+}
+
+export type GetTaskFnDataType = UnwrapPromise<ReturnType<typeof getTask>>
+
+export const createTask = async ({
+  title,
+  status,
+  description,
+  imageIds
+}: {
+  title: string
+  status: TaskStatus
+  description?: any
+  imageIds: string[]
+}) => {
+  const session = await getAuthSession()
+  if (!session) throw new Error('Unauthorized')
+
+  const { id } = await prisma.task.create({
+    data: {
+      title,
+      status,
+      description,
+      createdById: session.user.id,
+      updatedById: session.user.id
+    }
+  })
+  await handleImages(imageIds, id)
+
+  revalidatePath('/tasks')
+  revalidatePath(`/tasks/${id}`)
+
+  return id
+}
+
+export const updateTask = async ({
+  id,
+  title,
+  status,
+  description,
+  imageIds
+}: {
+  id: string
+  title: string
+  status: TaskStatus
+  description?: any
+  imageIds: string[]
+}) => {
+  const session = await getAuthSession()
+  if (!session) throw new Error('Unauthorized')
+
+  await prisma.task.update({
+    where: {
+      id
+    },
+    data: {
+      title,
+      status,
+      description,
+      updatedById: session.user.id
+    }
+  })
+  await handleImages(imageIds, id)
+
+  revalidatePath('/tasks')
+  revalidatePath(`/tasks/${id}`)
+}
+
+export const deleteTask = async (id: string) => {
+  const session = await getAuthSession()
+  if (!session) throw new Error('Unauthorized')
+
+  await handleImages([], id)
+  await prisma.task.delete({
+    where: {
+      id
+    }
+  })
+
+  revalidatePath('/tasks')
+  revalidatePath(`/tasks/${id}`)
+}

package/template/prisma/src/app/(app)/tasks/[id]/page.tsx

@@ -0,0 +1,25 @@
+import { Metadata } from 'next'
+
+import { siteConfig } from '@/lib/siteConfig'
+import { getTask } from './actions'
+import { Render } from './render'
+
+export const generateMetadata = async (props: {
+  params: { id: string }
+}): Promise<Metadata> => ({
+  title: 'Task - ' + props.params.id + ' | ' + siteConfig.name
+})
+
+const TaskPage = async ({
+  params: { id }
+}: {
+  params: {
+    id: string
+  }
+}) => {
+  const task = id !== 'new' ? await getTask(id) : undefined
+
+  return <Render task={task} />
+}
+
+export default TaskPage