create-ej-app 1.0.0

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

@@ -0,0 +1,61 @@
+import { User, UserType } from '@prisma/client'
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { authGuard } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+import { getUsers } 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 authGuard(['Root'])
+  if (!session) 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 [
+          keyof User | undefined,
+          'asc' | 'desc' | undefined
+        ])
+      : []
+
+  const name = searchParams.name
+  const email = searchParams.email
+
+  const type =
+    typeof searchParams.type === 'string'
+      ? (searchParams.type.split('.') as UserType[])
+      : undefined
+
+  const data = await getUsers({
+    page,
+    limit,
+    sortBy,
+    sortOrder,
+    name,
+    email,
+    type
+  })
+
+  return <Render data={data} />
+}
+
+export default Users

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

@@ -0,0 +1,108 @@
+'use client'
+
+import { UserType } from '@prisma/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 { formatDateTime, timesAgo } from '@/lib/formatDate'
+import { generateLabel } from '@/lib/generateLabel'
+import { GetUsersFnDataType } from './actions'
+
+const types = Object.values(UserType).map(x => ({
+  label: generateLabel(x),
+  value: x
+}))
+
+export const Render: FC<{
+  data: GetUsersFnDataType
+}> = ({ 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 }) => timesAgo(row.original.updatedAt)
+          }
+        ]}
+        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/src/app/(auth)/layout.tsx

@@ -0,0 +1,20 @@
+import { redirect } from 'next/navigation'
+import { ReactNode } from 'react'
+
+import { SiteFooter } from '@/components/site-footer'
+import { getAuthSession } from '@/lib/auth'
+
+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/src/app/(auth)/login/page.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link'
+
+import { Icons } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import { UserAuthForm } from './user-auth-form'
+
+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>
+        <UserAuthForm />
+        <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/src/app/(auth)/login/user-auth-form.tsx

@@ -0,0 +1,152 @@
+'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 { 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 { toast } from '@/components/ui/use-toast'
+import { cn } from '@/lib/cn'
+
+const userAuthSchema = z.object({
+  email: z.string().email()
+})
+
+type FormData = z.infer<typeof userAuthSchema>
+
+interface UserAuthFormProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const UserAuthForm: FC = ({
+  className,
+  ...props
+}: UserAuthFormProps) => {
+  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({
+        title: 'Something went wrong.',
+        description: 'Your sign in request failed. Please try again.',
+        variant: 'destructive'
+      })
+    }
+
+    return toast({
+      title: '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/src/app/(marketing)/layout.tsx

@@ -0,0 +1,42 @@
+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'
+import Link from 'next/link'
+
+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/src/app/(marketing)/page.tsx

@@ -0,0 +1,96 @@
+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://prisma.io',
+    title: 'Prisma',
+    description: 'Prisma is a next-generation ORM for Node.js and TypeScript.'
+  },
+  {
+    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="max-w-5xl w-full 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="mt-12 flex place-items-center before:absolute before:h-[300px] before:w-[240px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial 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:bg-gradient-conic 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] z-[-1]">
+        <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 text-center lg:max-w-5xl lg:w-full lg:grid-cols-4 lg:text-left gap-2">
+        {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/src/app/api/auth/[...nextauth]/route.ts

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

package/template/src/app/globals.css

@@ -0,0 +1,76 @@
+@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/src/app/layout.tsx

@@ -0,0 +1,32 @@
+import { Analytics } from '@vercel/analytics/react'
+import { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { ReactNode } from 'react'
+
+import { ThemeProvider } from '@/components/theme-provider'
+import { Toaster } from '@/components/ui/toaster'
+import { siteConfig } from '@/lib/siteConfig'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: siteConfig.name,
+  description: siteConfig.description
+}
+
+const RootLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          {children}
+          <Analytics />
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+
+export default RootLayout