create-ej-app 1.0.0 → 2.1.0

package/template/base/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/base/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/base/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/base/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/base/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/base/src/app/api/upload/route.ts

@@ -0,0 +1,45 @@
+import { GCPStorageClient } from '@ejekanshjain/cloud-storage'
+import { NextRequest, NextResponse } from 'next/server'
+
+import { env } from '@/env.mjs'
+import { getAuthSession } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+
+const storageClient = GCPStorageClient({
+  projectId: env.FIREBASE_PROJECT_ID!,
+  privateKey: env.FIREBASE_PRIVATE_KEY!,
+  clientEmail: env.FIREBASE_CLIENT_EMAIL!,
+  bucket: env.FIREBASE_STORAGE_BUCKET!,
+  defaultMediaPublic: true
+})
+
+export async function POST(request: NextRequest) {
+  const session = await getAuthSession()
+  if (!session)
+    return NextResponse.json({
+      success: false
+    })
+
+  const data = await request.formData()
+  const file: File | null = data.get('file') as unknown as File
+
+  if (!file) return NextResponse.json({ success: false })
+
+  const bytes = await file.arrayBuffer()
+  const buffer = Buffer.from(bytes)
+
+  const filename = `${Date.now()}-${Math.random()}-${file.name}`
+  const url = await storageClient.addFile({
+    filename,
+    data: buffer
+  })
+  const { id } = await prisma.resource.create({
+    data: {
+      newFilename: filename,
+      originalFilename: file.name,
+      url
+    }
+  })
+
+  return NextResponse.json({ success: true, id, url })
+}

package/template/base/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 '@/styles/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

package/template/base/src/components/app-nav-command.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+// import debounce from 'lodash/debounce'
+import { signOut } from 'next-auth/react'
+import { useTheme } from 'next-themes'
+import { useRouter } from 'next/navigation'
+import { FC, useCallback, useEffect, useState } from 'react'
+
+import { Icons } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from '@/components/ui/command'
+// import { doSearch, type SearchResult } from '../app/(app)/actions/doSearch'
+
+export const AppNavCommand: FC<{
+  modules: {
+    task: boolean
+  }
+}> = ({ modules }) => {
+  const [open, setOpen] = useState(false)
+  // const [search, setSearch] = useState('')
+  // const [searchResults, setSearchResults] = useState<SearchResult[]>([])
+  const { setTheme } = useTheme()
+  const router = useRouter()
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen(open => !open)
+      }
+    }
+
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [])
+
+  // useEffect(() => {
+  //   if (!search) {
+  //     setSearchResults([])
+  //     return
+  //   }
+  //   doSearch(search).then(results => setSearchResults(results))
+  // }, [search])
+
+  const runCommand = useCallback((command: () => unknown) => {
+    setOpen(false)
+    command()
+  }, [])
+
+  // const debouncedSearch = useMemo(
+  //   () =>
+  //     debounce((search: string) => {
+  //       setSearch(search)
+  //     }, 500),
+  //   []
+  // )
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className="relative w-36 justify-start text-sm text-muted-foreground lg:w-64"
+        onClick={() => setOpen(true)}
+      >
+        <span className="truncate">Command Menu</span>
+        <kbd className="pointer-events-none absolute right-2 top-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 lg:flex">
+          <span className="text-xs">⌘</span>K
+        </kbd>
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput
+            placeholder="Search..."
+            // onChangeCapture={e => {
+            //   debouncedSearch((e.target as any)?.value || '')
+            // }}
+          />
+          <CommandList>
+            <CommandEmpty>No search results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem
+                onSelect={() => runCommand(() => router.push('/dashboard'))}
+              >
+                <Icons.dashboard className="mr-2 h-4 w-4" />
+                Dashboard
+              </CommandItem>
+              {modules.task ? (
+                <CommandItem
+                  onSelect={() => runCommand(() => router.push('/tasks'))}
+                >
+                  <Icons.task className="mr-2 h-4 w-4" />
+                  Tasks
+                </CommandItem>
+              ) : undefined}
+            </CommandGroup>
+            <CommandGroup heading="Account">
+              <CommandItem
+                onSelect={() => runCommand(() => router.push('/settings'))}
+              >
+                <Icons.settings className="mr-2 h-4 w-4" />
+                Settings
+              </CommandItem>
+              <CommandItem
+                onSelect={() =>
+                  runCommand(() =>
+                    signOut({
+                      callbackUrl: `${window.location.origin}/login`
+                    })
+                  )
+                }
+              >
+                <Icons.logout className="mr-2 h-4 w-4" />
+                Sign Out
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Theme">
+              <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
+                <Icons.sun className="mr-2 h-4 w-4" />
+                Light
+              </CommandItem>
+              <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
+                <Icons.moon className="mr-2 h-4 w-4" />
+                Dark
+              </CommandItem>
+              <CommandItem
+                onSelect={() => runCommand(() => setTheme('system'))}
+              >
+                <Icons.laptop className="mr-2 h-4 w-4" />
+                System
+              </CommandItem>
+            </CommandGroup>
+            {/* {searchResults.length ? (
+              <CommandGroup heading="Search Results">
+                {searchResults.map((sr, i) => (
+                  <CommandItem
+                    key={i}
+                    onSelect={() => runCommand(() => router.push(sr.link))}
+                    value={sr.id}
+                  >
+                    {sr.title}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ) : undefined} */}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  )
+}

package/template/base/src/components/dark-mode-toggle.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { FC } from 'react'
+
+import { Icons } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+export const DarkModeToggle: FC = () => {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Icons.sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Icons.moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Icons.laptop className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}