create-ej-app 24.0.0 → 26.0.0

package/template/saas-starter/src/app/globals.css

@@ -0,0 +1,240 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --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-destructive-foreground: var(--destructive-foreground);
+  --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);
+
+  --font-heading: var(--font-geist-sans);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+: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);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --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);
+}
+
+.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);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --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 outline-ring/50;
+  }
+
+  html {
+    @apply font-sans antialiased;
+  }
+
+  body {
+    @apply text-foreground bg-background min-h-screen;
+  }
+
+  button:not([disabled]),
+  [role='button']:not([disabled]) {
+    cursor: pointer;
+  }
+}
+
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@custom-variant data-open {
+  &:where([data-state='open']),
+  &:where([data-open]:not([data-open='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state='closed']),
+  &:where([data-closed]:not([data-closed='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state='checked']),
+  &:where([data-checked]:not([data-checked='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state='unchecked']),
+  &:where([data-unchecked]:not([data-unchecked='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected='true']) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled='true']),
+  &:where([data-disabled]:not([data-disabled='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state='active']),
+  &:where([data-active]:not([data-active='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation='horizontal']) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation='vertical']) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility container {
+  @apply mx-auto p-4;
+}

package/template/saas-starter/src/app/layout.tsx

@@ -0,0 +1,53 @@
+import type { Metadata } from 'next'
+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 { ThemeProvider } from '~/components/theme-provider'
+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
+}
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${geistSans.variable} ${geistMono.variable}`}
+    >
+      <body>
+        <ReactQueryProvider>
+          <ThemeProvider>
+            <Loader />
+            {children}
+            {env.APP_ENV === 'development' ? <ScreenSize /> : null}
+            <Toaster />
+          </ThemeProvider>
+        </ReactQueryProvider>
+      </body>
+    </html>
+  )
+}
+
+/** Forces dynamic rendering - page will be re-rendered on each request */
+export const dynamic = 'force-dynamic'

package/template/saas-starter/src/app/not-found.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { Button } from '~/components/ui/button'
+
+export default function NotFound() {
+  const pathname = usePathname()
+  const homeRoute = pathname?.startsWith('/admin') ? '/admin' : '/'
+
+  return (
+    <main className="bg-background text-foreground flex min-h-screen flex-col">
+      <section className="flex min-h-[60vh] flex-col items-center justify-center px-4">
+        <div className="text-center">
+          <h1 className="text-foreground mb-2 text-6xl font-bold">404</h1>
+          <p className="text-muted-foreground mb-8 text-xl">Page not found</p>
+          <p className="text-muted-foreground mb-8 max-w-md text-base">
+            The page you're looking for doesn't exist.
+          </p>
+          <Button asChild>
+            <Link href={homeRoute}>Return to Home</Link>
+          </Button>
+        </div>
+      </section>
+    </main>
+  )
+}

package/template/saas-starter/src/app/proxy.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server'
+
+export function proxy() {
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: [
+    {
+      /**
+       * Route matching pattern
+       *
+       * This regex pattern matches all routes EXCEPT:
+       * - /_next/static - Next.js static assets
+       * - /_next/image - Next.js image optimization
+       * - /favicon.ico - Browser favicon
+       * - /.well-known/workflow/ - Internal workflow paths
+       *
+       * Excluding these paths ensures that:
+       * 1. Static assets load efficiently without middleware overhead
+       * 2. Image optimization is not interrupted
+       * 3. Workflow execution and resumption function correctly
+       */
+      source:
+        '/((?!_next/static|_next/image|favicon.ico|.well-known/workflow/).*)'
+    }
+  ]
+}

package/template/saas-starter/src/app/robots.ts

@@ -0,0 +1,32 @@
+import type { MetadataRoute } from 'next'
+import { env } from '~/env'
+
+export const dynamic = 'force-dynamic'
+
+export default function robots(): MetadataRoute.Robots {
+  // Block all crawlers in staging to prevent accidental indexing
+  if (env.APP_ENV === 'staging') {
+    return {
+      rules: [
+        {
+          userAgent: '*',
+          disallow: '/'
+        }
+      ]
+    }
+  }
+
+  const baseUrl = env.BETTER_AUTH_URL
+
+  return {
+    rules: [
+      {
+        userAgent: '*',
+        allow: '/',
+        disallow: ['/api/', '/admin/', '/app/', '/accept-invitation/']
+      }
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+    host: baseUrl
+  }
+}

package/template/saas-starter/src/app/sitemap.ts

@@ -0,0 +1,20 @@
+import type { MetadataRoute } from 'next'
+import { env } from '~/env'
+
+export const dynamic = 'force-dynamic'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  if (env.APP_ENV === 'staging') return []
+
+  const baseUrl = env.BETTER_AUTH_URL
+  const lastModified = new Date()
+
+  const routes = ['/', '/privacy', '/terms', '/login']
+
+  return routes.map(path => ({
+    url: `${baseUrl}${path === '/' ? '' : path}`,
+    lastModified,
+    changeFrequency: path === '/' ? 'weekly' : 'monthly',
+    priority: path === '/' ? 1 : 0.7
+  }))
+}

package/template/saas-starter/src/components/dashboard-header.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { Separator } from '~/components/ui/separator'
+import { SidebarTrigger } from '~/components/ui/sidebar'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from '~/components/ui/tooltip'
+import { UserMenu } from '~/components/user-menu'
+
+type DashboardHeaderProps = {
+  user: {
+    name?: string | null
+    email?: string | null
+    image?: string | null
+  }
+  search?: ReactNode
+  actions?: ReactNode
+  fallbackName?: string
+  fallbackInitials?: string
+}
+
+export function DashboardHeader({
+  user,
+  search,
+  actions,
+  fallbackName,
+  fallbackInitials
+}: DashboardHeaderProps) {
+  return (
+    <header className="bg-background sticky top-0 z-50 flex h-14 shrink-0 items-center gap-2 border-b px-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <SidebarTrigger className="-ml-1 hidden sm:inline-flex" />
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          Toggle Sidebar{' '}
+          <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+            <span className="text-xs">⌘</span>B
+          </kbd>
+        </TooltipContent>
+      </Tooltip>
+      <SidebarTrigger className="-ml-1 sm:hidden" />
+
+      {search ? (
+        <>
+          <Separator orientation="vertical" className="mr-2" />
+          {search}
+        </>
+      ) : null}
+
+      <div className="flex flex-1 items-center justify-end gap-2">
+        {actions}
+        <UserMenu
+          user={user}
+          fallbackName={fallbackName}
+          fallbackInitials={fallbackInitials}
+        />
+      </div>
+    </header>
+  )
+}

package/template/saas-starter/src/components/data-table/enum.ts

@@ -0,0 +1,5 @@
+/** Sort direction values used by the DataTable for column ordering. */
+export enum SortOrderEnum {
+  ASC = 'asc',
+  DESC = 'desc'
+}