create-ej-app 3.1.0 → 4.0.0

package/template/prisma/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/prisma/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/prisma/src/app/layout.tsx

@@ -0,0 +1,34 @@
+import { Analytics } from '@vercel/analytics/react'
+import { SpeedInsights } from '@vercel/speed-insights/next'
+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 />
+          <SpeedInsights />
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+
+export default RootLayout

package/template/prisma/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/prisma/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>
+  )
+}

package/template/prisma/src/components/data-table/data-table-column-header.tsx

@@ -0,0 +1,91 @@
+import { type Column } from '@tanstack/react-table'
+
+import { Icons } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/cn'
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>
+  }
+
+  return (
+    <div className={cn('flex items-center space-x-2', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            aria-label={
+              column.getIsSorted() === 'desc'
+                ? `Sorted descending. Click to sort ascending.`
+                : column.getIsSorted() === 'asc'
+                ? `Sorted ascending. Click to sort descending.`
+                : `Not sorted. Click to sort ascending.`
+            }
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <Icons.arrowDown className="ml-2 h-4 w-4" aria-hidden="true" />
+            ) : column.getIsSorted() === 'asc' ? (
+              <Icons.arrowUp className="ml-2 h-4 w-4" aria-hidden="true" />
+            ) : (
+              <Icons.arrowUpDown className="ml-2 h-4 w-4" aria-hidden="true" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            aria-label="Sort ascending"
+            onClick={() => column.toggleSorting(false)}
+          >
+            <Icons.arrowUp
+              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
+              aria-hidden="true"
+            />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            aria-label="Sort descending"
+            onClick={() => column.toggleSorting(true)}
+          >
+            <Icons.arrowDown
+              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
+              aria-hidden="true"
+            />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            aria-label="Hide column"
+            onClick={() => column.toggleVisibility(false)}
+          >
+            <Icons.eyeOff
+              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
+              aria-hidden="true"
+            />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/template/prisma/src/components/data-table/data-table-faceted-filter.tsx

@@ -0,0 +1,149 @@
+import { type Column } from '@tanstack/react-table'
+import { ComponentType } from 'react'
+
+import { Icons } from '@/components/icons'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/cn'
+
+export type FilterOption = {
+  label: string
+  value: string
+  icon?: ComponentType<{ className?: string }>
+}
+
+interface DataTableFacetedFilter<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: FilterOption[]
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options
+}: DataTableFacetedFilter<TData, TValue>) {
+  const selectedValues = new Set(column?.getFilterValue() as string[])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <Icons.plusCircle className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter(option => selectedValues.has(option.value))
+                    .map(option => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map(option => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value)
+                      } else {
+                        selectedValues.add(option.value)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      )
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected
+                          ? 'bg-primary text-primary-foreground'
+                          : 'opacity-50 [&_svg]:invisible'
+                      )}
+                    >
+                      <Icons.check
+                        className={cn('h-4 w-4')}
+                        aria-hidden="true"
+                      />
+                    </div>
+                    {option.icon && (
+                      <option.icon
+                        className="mr-2 h-4 w-4 text-muted-foreground"
+                        aria-hidden="true"
+                      />
+                    )}
+                    <span>{option.label}</span>
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/template/prisma/src/components/data-table/data-table-loading.tsx

@@ -0,0 +1,77 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+
+interface DataTableLoadingProps {
+  columnCount: number
+  rowCount?: number
+}
+
+export function DataTableLoading({
+  columnCount,
+  rowCount = 10
+}: DataTableLoadingProps) {
+  return (
+    <div className="w-full space-y-3 overflow-auto">
+      <div className="flex w-full items-center justify-between space-x-2 overflow-auto p-1">
+        <div className="flex flex-1 items-center space-x-2">
+          <Skeleton className="h-7 w-[150px] lg:w-[250px]" />
+          <Skeleton className="h-7 w-[70px] border-dashed" />
+        </div>
+        <Skeleton className="ml-auto hidden h-7 w-[70px] lg:flex" />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {Array.from({ length: 1 }).map((_, i) => (
+              <TableRow key={i} className="hover:bg-transparent">
+                {Array.from({ length: columnCount }).map((_, i) => (
+                  <TableHead key={i}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: rowCount }).map((_, i) => (
+              <TableRow key={i} className="hover:bg-transparent">
+                {Array.from({ length: columnCount }).map((_, i) => (
+                  <TableCell key={i}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8">
+        <div className="flex-1">
+          <Skeleton className="h-8 w-40" />
+        </div>
+        <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+          <div className="flex items-center space-x-2">
+            <Skeleton className="h-8 w-24" />
+            <Skeleton className="h-8 w-[70px]" />
+          </div>
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+            <Skeleton className="h-8 w-20" />
+          </div>
+          <div className="flex items-center space-x-2">
+            <Skeleton className="hidden h-8 w-8 lg:block" />
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="hidden h-8 w-8 lg:block" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}