create-ej-app 6.0.0 → 8.0.0

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

@@ -1,125 +1,20 @@
-import { notFound } from 'next/navigation'
-import { ReactNode } from 'react'
+import { redirect } from 'next/navigation'
+import { getAuthSession } from '~/lib/auth'
 
-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'
-import { checkForRolePermissionUseCase } from '@/use-case/role-permission'
+export default async function Layout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const authSession = await getAuthSession()
 
-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'
-    )
-  ])
+  if (!authSession) {
+    redirect('/auth')
+  }
 
   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'
-              },
-              ...(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,
-                root: session.user.type === 'Root'
-              }}
-            />
-            <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'
-              },
-              ...(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',
-                icon: 'settings'
-              }
-            ]}
-          />
-        </aside>
-        <main className="flex w-full flex-1 flex-col overflow-hidden">
-          {children}
-        </main>
-      </div>
-      <SiteFooter className="border-t" />
+    <div className="flex min-h-screen flex-col space-y-4">
+      <main className="flex-1">{children}</main>
     </div>
   )
 }
-
-export default Layout

package/template/base/src/app/(auth)/login/page.tsx

@@ -1,49 +1,72 @@
+import { ShoppingBag } from 'lucide-react'
 import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { Separator } from '~/components/ui/separator'
+import { getAuthSession } from '~/lib/auth'
+import { EmailLoginForm } from './email-login-form'
+import { SocialLoginButtons } from './social-login-buttons'
 
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import { Render } from './render'
+export default async function LoginPage() {
+  const authSession = await getAuthSession()
+
+  if (authSession) redirect('/')
 
-const LoginPage = () => {
   return (
-    <div className="container flex h-[90vh] w-screen flex-col items-center justify-center">
-      <Link href="/" className="absolute left-4 top-4">
-        <Button variant="ghost">
-          <Icons.chevronLeft className="mr-2 h-4 w-4" />
-          Back
-        </Button>
-      </Link>
-      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-80">
-        <div className="flex flex-col space-y-2 text-center">
-          <Icons.logo className="mx-auto h-6 w-6" />
-          <h1 className="text-2xl font-semibold tracking-tight">
-            Welcome back
-          </h1>
-          <p className="text-sm text-muted-foreground">
-            Enter your email to sign in to your account
-          </p>
-        </div>
-        <Render />
-        <p className="px-8 text-center text-sm text-muted-foreground">
-          By clicking continue, you agree to our{' '}
-          <Link
-            href="/terms"
-            className="underline underline-offset-4 hover:text-primary"
-          >
-            Terms of Service
-          </Link>{' '}
-          and{' '}
-          <Link
-            href="/privacy"
-            className="underline underline-offset-4 hover:text-primary"
-          >
-            Privacy Policy
-          </Link>
-          .
-        </p>
-      </div>
+    <div className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <ShoppingBag className="text-primary size-6" />
+          </div>
+          <CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
+          <CardDescription className="text-muted-foreground text-sm">
+            Sign in to your account to continue
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="border-muted-foreground/50 bg-muted/50 rounded-lg border border-dashed p-4">
+            <p className="text-muted-foreground text-sm">
+              <strong>New to our site?</strong> No need to create a separate
+              account. Simply use one of the options below to both sign up and
+              log in.
+            </p>
+          </div>
+
+          <EmailLoginForm />
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background text-muted-foreground px-2">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          <SocialLoginButtons />
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-4">
+          <Separator className="my-2" />
+          <div className="text-muted-foreground text-center text-sm">
+            <Link
+              href="/"
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              Return to home page
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
     </div>
   )
 }
-
-export default LoginPage

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

@@ -1,42 +1,14 @@
-import Link from 'next/link'
-import { ReactNode } from 'react'
-
-import { Icons } from '@/components/icons'
-import { MainNav } from '@/components/main-nav'
-import { SiteFooter } from '@/components/site-footer'
-import { Button } from '@/components/ui/button'
-import { getAuthSession } from '@/lib/auth'
-
-const Layout = async ({ children }: { children: ReactNode }) => {
-  const session = await getAuthSession()
+import { SiteFooter } from '~/components/site-footer'
 
+export default async function Layout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
   return (
     <div className="flex min-h-screen flex-col space-y-4">
-      <header className="sticky top-0 z-40 border-b bg-background">
-        <div className="container flex h-16 items-center justify-between py-4">
-          <MainNav />
-          <div className="flex items-center justify-center space-x-4">
-            {session?.user ? (
-              <Link href="/dashboard">
-                <Button size="sm" variant="secondary">
-                  Dashboard
-                </Button>
-              </Link>
-            ) : (
-              <Link href="/login">
-                <Button size="sm" variant="secondary">
-                  <Icons.login className="mr-2 h-4 w-4" />
-                  Sign In
-                </Button>
-              </Link>
-            )}
-          </div>
-        </div>
-      </header>
       <main className="flex-1">{children}</main>
-      <SiteFooter className="border-t" />
+      <SiteFooter />
     </div>
   )
 }
-
-export default Layout

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

@@ -1,97 +1,3 @@
-import Image from 'next/image'
-
-const links = [
-  {
-    href: 'https://nextjs.org',
-    title: 'Next.js',
-    description: 'Find in-depth information about Next.js features and API.'
-  },
-  {
-    href: 'https://typescriptlang.org',
-    title: 'TypeScript',
-    description:
-      'Learn about TypeScript and how it helps you write better JavaScript.'
-  },
-  {
-    href: 'https://orm.drizzle.team',
-    title: 'Drizzle',
-    description:
-      'Lightweight and performant TypeScript ORM with developer experience in mind.'
-  },
-  {
-    href: 'https://next-auth.js.org',
-    title: 'NextAuth.js',
-    description:
-      'Authentication for Next.js featuring sign in with GitHub and more.'
-  },
-  {
-    href: 'https://tailwindcss.com',
-    title: 'Tailwind CSS',
-    description:
-      'A utility-first CSS framework for rapidly building custom designs.'
-  },
-  {
-    href: 'https://shadcn.com',
-    title: 'Shadcn UI',
-    description: 'An awesome ui component library with tailwindcss.'
-  },
-  {
-    href: 'https://nextjs.org/docs/app/api-reference/functions/server-actions',
-    title: 'Server Actions',
-    description: 'Learn about Server Actions and how to use them.'
-  },
-  {
-    href: 'https://vercel.com/new',
-    title: 'Vercel',
-    description:
-      'Instantly deploy your Next.js site to a shareable URL with Vercel.'
-  }
-]
-
-const Home = () => {
-  return (
-    <div className="flex min-h-[80vh] flex-col items-center justify-between">
-      <div className="w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-      </div>
-
-      <div className="before:bg-gradient-radial after:bg-gradient-conic z-[-1] mt-12 flex place-items-center before:absolute before:h-[300px] before:w-[240px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[120px] after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
-        <Image
-          className="dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="my-8 grid gap-2 text-center lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-        {links.map((l, i) => (
-          <a
-            key={i}
-            href={l.href}
-            className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className="mb-3 text-2xl font-semibold">
-              {l.title + ' '}
-              <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                -&gt;
-              </span>
-            </h2>
-            <p className="m-0 max-w-[30ch] text-sm opacity-50">
-              {l.description}
-            </p>
-          </a>
-        ))}
-      </div>
-    </div>
-  )
+export default async function HomePage() {
+  return <div>Hello, World!</div>
 }
-
-export default Home

package/template/base/src/app/(marketing)/privacy/page.tsx

@@ -0,0 +1,3 @@
+export default async function PrivacyPage() {
+  return <div>Hello, World!</div>
+}

package/template/base/src/app/(marketing)/terms/page.tsx

@@ -0,0 +1,3 @@
+export default async function TermsPage() {
+  return <div>Hello, World!</div>
+}

package/template/base/src/app/globals.css

@@ -1,76 +1,128 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-  }
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground bg-background min-h-screen font-sans antialiased;
   }
+  button:not([disabled]),
+  [role='button']:not([disabled]) {
+    cursor: pointer;
+  }
+}
+
+@utility container {
+  @apply mx-auto p-4;
 }

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

@@ -1,12 +1,24 @@
-import { GeistSans } from 'geist/font/sans'
 import type { Metadata } from 'next'
 import { ThemeProvider } from 'next-themes'
-import NextTopLoader from 'nextjs-toploader'
-
-import { Toaster } from '@/components/ui/sonner'
-import { siteConfig } from '@/lib/siteConfig'
+import { Geist, Geist_Mono } from 'next/font/google'
+import { Loader } from '~/components/loader'
+import { ReactQueryProvider } from '~/components/react-query-provider'
+import { ScreenSize } from '~/components/screen-size'
+import { Toaster } from '~/components/ui/sonner'
+import { env } from '~/env'
+import { siteConfig } from '~/lib/siteConfig'
 import './globals.css'
 
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin']
+})
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin']
+})
+
 export const metadata: Metadata = {
   title: siteConfig.name,
   description: siteConfig.description
@@ -18,13 +30,16 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className={GeistSans.className} suppressHydrationWarning>
-      <body className="min-h-screen bg-background font-sans antialiased">
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <NextTopLoader color="#777" />
-          {children}
-          <Toaster />
-        </ThemeProvider>
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <ReactQueryProvider>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <Loader />
+            {children}
+            {env.APP_ENV === 'development' ? <ScreenSize /> : null}
+            <Toaster />
+          </ThemeProvider>
+        </ReactQueryProvider>
       </body>
     </html>
   )