create-ej-app 12.0.0 → 15.0.0

package/template/old/src/app/(app)/users/page.tsx

@@ -1,62 +0,0 @@
-import { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-
-import { authGuard, getAuthSession } from '@/lib/auth'
-import { siteConfig } from '@/lib/siteConfig'
-import { getUsersAction } from './actions'
-import { Render } from './render'
-
-export const metadata: Metadata = {
-  title: 'Users' + ' | ' + siteConfig.name
-}
-
-const Users = async ({
-  searchParams
-}: {
-  searchParams: {
-    page?: string
-    limit?: string
-    sort?: string
-    name?: string
-    email?: string
-    type?: string
-  }
-}) => {
-  const session = await getAuthSession()
-  if (!session) return notFound()
-
-  const g = await authGuard(session)
-  if (!g) return notFound()
-
-  const page = searchParams.page ? parseInt(searchParams.page) : 1
-  const limit = searchParams.limit ? parseInt(searchParams.limit) : 10
-
-  const [sortBy, sortOrder] =
-    typeof searchParams.sort === 'string'
-      ? (searchParams.sort.split('.') as [any, 'asc' | 'desc' | undefined])
-      : []
-
-  const name = searchParams.name
-  const email = searchParams.email
-
-  const type =
-    typeof searchParams.type === 'string'
-      ? (searchParams.type.split('.') as any[])
-      : undefined
-
-  const data = await getUsersAction({
-    page,
-    limit,
-    sortBy,
-    sortOrder,
-    name,
-    email,
-    type
-  })
-
-  if (!data?.data) throw new Error('Users data not found')
-
-  return <Render data={data.data} />
-}
-
-export default Users

package/template/old/src/app/(app)/users/render.tsx

@@ -1,124 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { FC } from 'react'
-
-import { DataTable } from '@/components/data-table/data-table'
-import { DataTableColumnHeader } from '@/components/data-table/data-table-column-header'
-import { Heading } from '@/components/heading'
-import { Icons } from '@/components/icons'
-import { Shell } from '@/components/shell'
-import { Button } from '@/components/ui/button'
-import { User } from '@/db/schema'
-import { formatDateTime, timesAgo } from '@/lib/formatDate'
-import { generateLabel } from '@/lib/generateLabel'
-import { InferSelectModel } from 'drizzle-orm'
-
-const types = User.type.enumValues.map(x => ({
-  label: generateLabel(x),
-  value: x
-}))
-
-export const Render: FC<{
-  data: {
-    users: {
-      id: string
-      name?: string | null
-      email: string
-      type?: InferSelectModel<typeof User>['type']
-      role?: {
-        name: string
-      } | null
-      createdAt: Date
-      updatedAt?: Date | null
-    }[]
-    total: number
-  }
-}> = ({ data }) => {
-  return (
-    <Shell>
-      <Heading heading="Users" text="List of all the users">
-        <Link href="/users/new">
-          <Button>
-            <Icons.add className="mr-2 h-4 w-4" />
-            New
-          </Button>
-        </Link>
-      </Heading>
-      <DataTable
-        columns={[
-          {
-            accessorKey: 'name',
-            header: ({ column }) => (
-              <DataTableColumnHeader column={column} title="Name" />
-            ),
-            cell: ({ row }) => (
-              <Link
-                className="underline underline-offset-4"
-                href={`/users/${row.original.id}`}
-              >
-                {row.original.name}
-              </Link>
-            )
-          },
-          {
-            accessorKey: 'email',
-            header: ({ column }) => (
-              <DataTableColumnHeader column={column} title="Email" />
-            )
-          },
-          {
-            accessorKey: 'type',
-            header: ({ column }) => (
-              <DataTableColumnHeader column={column} title="Type" />
-            )
-          },
-          {
-            accessorKey: 'role',
-            header: ({ column }) => (
-              <DataTableColumnHeader column={column} title="Role" />
-            ),
-            cell: ({ row }) => row.original.role?.name,
-            enableSorting: false
-          },
-          {
-            accessorKey: 'createdAt',
-            header: ({ column }) => (
-              <DataTableColumnHeader column={column} title="Created At" />
-            ),
-            cell: ({ row }) => formatDateTime(row.original.createdAt)
-          },
-          {
-            accessorKey: 'updatedAt',
-            header: ({ column }) => (
-              <DataTableColumnHeader column={column} title="Updated At" />
-            ),
-            cell: ({ row }) =>
-              row.original.updatedAt
-                ? timesAgo(row.original.updatedAt)
-                : undefined
-          }
-        ]}
-        data={data.users}
-        total={data.total}
-        searchableColumns={[
-          {
-            id: 'name',
-            title: 'Name'
-          },
-          {
-            id: 'email',
-            title: 'Email'
-          }
-        ]}
-        filterableColumns={[
-          {
-            id: 'type',
-            title: 'Type',
-            options: types
-          }
-        ]}
-      />
-    </Shell>
-  )
-}

package/template/old/src/app/(auth)/layout.tsx

@@ -1,27 +0,0 @@
-import { Metadata } from 'next'
-import { redirect } from 'next/navigation'
-import { ReactNode } from 'react'
-
-import { SiteFooter } from '@/components/site-footer'
-import { getAuthSession } from '@/lib/auth'
-import { siteConfig } from '@/lib/siteConfig'
-
-export const metadata: Metadata = {
-  title: 'Login | ' + siteConfig.name,
-  description: siteConfig.description
-}
-
-const AuthLayout = async ({ children }: { children: ReactNode }) => {
-  const session = await getAuthSession()
-
-  if (session?.user) return redirect('/dashboard')
-
-  return (
-    <div className="flex min-h-screen flex-col justify-between">
-      <main>{children}</main>
-      <SiteFooter />
-    </div>
-  )
-}
-
-export default AuthLayout

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

@@ -1,49 +0,0 @@
-import Link from 'next/link'
-
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import { Render } from './render'
-
-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>
-  )
-}
-
-export default LoginPage

package/template/old/src/app/(auth)/login/render.tsx

@@ -1,146 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { signIn } from 'next-auth/react'
-import { useSearchParams } from 'next/navigation'
-import { FC, HTMLAttributes, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { z } from 'zod'
-
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { cn } from '@/lib/cn'
-
-const userAuthSchema = z.object({
-  email: z.string().email()
-})
-
-type FormData = z.infer<typeof userAuthSchema>
-
-interface RenderProps extends HTMLAttributes<HTMLDivElement> {}
-
-export const Render: FC = ({ className, ...props }: RenderProps) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors }
-  } = useForm<FormData>({
-    resolver: zodResolver(userAuthSchema)
-  })
-  const [isLoading, setIsLoading] = useState(false)
-  const [isGoogleLoading, setIsGoogleLoading] = useState(false)
-  const [isGithubLoading, setIsGithubLoading] = useState(false)
-
-  const searchParams = useSearchParams()
-
-  async function onSubmit(data: FormData) {
-    setIsLoading(true)
-
-    const signInResult = await signIn('email', {
-      email: data.email.toLowerCase(),
-      redirect: false,
-      callbackUrl: searchParams?.get('from') || '/dashboard'
-    })
-
-    setIsLoading(false)
-
-    if (!signInResult?.ok) {
-      return toast('Something went wrong.', {
-        description: 'Your sign in request failed. Please try again.'
-      })
-    }
-
-    return toast('Check your email', {
-      description: 'We sent you a login link. Be sure to check your spam too.'
-    })
-  }
-
-  return (
-    <div className={cn('grid gap-6', className)} {...props}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="grid gap-2">
-          <div className="grid gap-1">
-            <Label className="sr-only" htmlFor="email">
-              Email
-            </Label>
-            <Input
-              id="email"
-              placeholder="name@example.com"
-              type="email"
-              autoCapitalize="none"
-              autoComplete="email"
-              autoCorrect="off"
-              disabled={isLoading}
-              {...register('email')}
-            />
-            {errors?.email && (
-              <p className="px-1 text-xs text-red-600">
-                {errors.email.message}
-              </p>
-            )}
-          </div>
-          <Button
-            disabled={isLoading || isGoogleLoading || isGithubLoading}
-            type="submit"
-          >
-            {isLoading && (
-              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-            )}
-            Sign in with Email
-          </Button>
-        </div>
-      </form>
-      <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 px-2 text-muted-foreground">
-            Or continue with
-          </span>
-        </div>
-      </div>
-      <div className="grid gap-2">
-        <Button
-          variant="outline"
-          onClick={async () => {
-            setIsGoogleLoading(true)
-            await signIn('google', {
-              callbackUrl: searchParams?.get('from') || '/dashboard'
-            })
-            setIsGoogleLoading(false)
-          }}
-          disabled={isLoading || isGoogleLoading || isGithubLoading}
-        >
-          {isGoogleLoading ? (
-            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-          ) : (
-            <Icons.google className="mr-2 h-4 w-4" />
-          )}
-          Google
-        </Button>
-        <Button
-          variant="outline"
-          onClick={async () => {
-            setIsGithubLoading(true)
-            await signIn('github', {
-              callbackUrl: searchParams?.get('from') || '/dashboard'
-            })
-            setIsGithubLoading(false)
-          }}
-          disabled={isLoading || isGoogleLoading || isGithubLoading}
-        >
-          {isGithubLoading ? (
-            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-          ) : (
-            <Icons.github className="mr-2 h-4 w-4" />
-          )}
-          Github
-        </Button>
-      </div>
-    </div>
-  )
-}

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

@@ -1,42 +0,0 @@
-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()
-
-  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" />
-    </div>
-  )
-}
-
-export default Layout

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

@@ -1,97 +0,0 @@
-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 Home

package/template/old/src/app/api/auth/[...nextauth]/route.ts

@@ -1,7 +0,0 @@
-import NextAuth from 'next-auth'
-
-import { authOptions } from '@/lib/auth'
-
-const handler = NextAuth(authOptions)
-
-export { handler as GET, handler as POST }

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

@@ -1,76 +0,0 @@
-@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%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

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

@@ -1,31 +0,0 @@
-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 './globals.css'
-
-export const metadata: Metadata = {
-  title: siteConfig.name,
-  description: siteConfig.description
-}
-
-export default function RootLayout({
-  children
-}: Readonly<{
-  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>
-      </body>
-    </html>
-  )
-}