create-ej-app 1.0.0 → 2.0.0

package/template/base/.env.example

@@ -0,0 +1,16 @@
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres?schema=public"
+NEXTAUTH_SECRET="secret"
+NEXTAUTH_URL="http://localhost:3000"
+EMAIL_SERVER_HOST="example.com"
+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=""

package/template/base/.eslintrc.cjs

@@ -0,0 +1,24 @@
+// 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')
+  },
+  plugins: ['@typescript-eslint'],
+  extends: ['next/core-web-vitals'],
+  rules: {}
+}
+
+module.exports = eslintConfig

package/template/base/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.cjs",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/cn"
+  }
+}

package/template/base/next.config.mjs

@@ -0,0 +1,18 @@
+/**
+ * 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 = {
+  experimental: {
+    serverActions: true
+  },
+  i18n: {
+    locales: ['en'],
+    defaultLocale: 'en'
+  }
+}
+
+export default nextConfig

package/template/base/package.json

@@ -0,0 +1,79 @@
+{
+  "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",
+    "prisma:push": "prisma db push",
+    "prisma:gen": "prisma generate",
+    "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",
+    "@radix-ui/react-alert-dialog": "^1.0.4",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@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",
+    "@types/node": "^20.6.3",
+    "@types/nodemailer": "^6.4.10",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "@vercel/analytics": "^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.50.0",
+    "eslint-config-next": "^13.5.2",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.274.0",
+    "next": "^13.5.2",
+    "next-auth": "^4.23.1",
+    "next-themes": "^0.2.1",
+    "nodemailer": "^6.9.5",
+    "postcss": "^8.4.30",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "prisma": "^5.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.46.2",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss": "^3.3.3",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.2.2",
+    "zod": "^3.22.2"
+  }
+}

package/template/base/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

package/template/base/prettier.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from 'prettier'
+
+const prettierConfig: Config = {
+  plugins: [require.resolve('prettier-plugin-tailwindcss')],
+  arrowParens: 'avoid',
+  trailingComma: 'none',
+  semi: false,
+  singleQuote: true
+}
+
+module.exports = prettierConfig

package/template/base/prisma/schema.prisma

@@ -0,0 +1,115 @@
+generator client {
+    provider = "prisma-client-js"
+}
+
+datasource db {
+    provider = "postgresql"
+    url      = env("DATABASE_URL")
+}
+
+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)
+
+    createdAt DateTime @default(now()) @db.Timestamptz()
+    updatedAt DateTime @default(now()) @updatedAt @db.Timestamptz()
+
+    @@unique([provider, providerAccountId])
+    @@map("Accounts")
+}
+
+model Session {
+    id           String   @id @default(cuid())
+    sessionToken String   @unique
+    userId       String
+    expires      DateTime @db.Timestamptz()
+
+    user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+    createdAt DateTime @default(now()) @db.Timestamptz()
+    updatedAt DateTime @default(now()) @updatedAt @db.Timestamptz()
+
+    @@map("Sessions")
+}
+
+model User {
+    id            String    @id @default(cuid())
+    name          String?
+    email         String?   @unique
+    emailVerified DateTime? @db.Timestamptz()
+    image         String?
+    roleId        String?
+
+    createdAt DateTime @default(now()) @db.Timestamptz()
+    updatedAt DateTime @default(now()) @updatedAt @db.Timestamptz()
+
+    accounts Account[]
+    sessions Session[]
+
+    createdTasks Task[] @relation("createdTasks")
+    updatedTasks Task[] @relation("updatedTasks")
+
+    @@map("Users")
+}
+
+model VerificationToken {
+    identifier String
+    token      String   @unique
+    expires    DateTime @db.Timestamptz()
+
+    @@unique([identifier, token])
+    @@map("VerificationTokens")
+}
+
+enum TaskStatus {
+    Backlog
+    Todo
+    In_Progress
+    Done
+    Cancelled
+}
+
+model Task {
+    id          String     @id @default(cuid())
+    title       String
+    status      TaskStatus
+    description Json?
+
+    images Resource[] @relation("taskImages")
+
+    createdAt   DateTime @default(now()) @db.Timestamptz()
+    updatedAt   DateTime @default(now()) @updatedAt @db.Timestamptz()
+    createdById String
+    createdBy   User     @relation("createdTasks", fields: [createdById], references: [id], onDelete: Cascade)
+    updatedById String
+    updatedBy   User     @relation("updatedTasks", fields: [updatedById], references: [id], onDelete: Cascade)
+
+    @@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/base/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/base/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/base/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/base/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/base/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/base/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/base/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>
+  )
+}