create-ej-app 17.0.0 → 19.0.0

package/template/nextjs/src/components/ui/field.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import { useMemo } from 'react'
+
+import { Label } from '~/components/ui/label'
+import { Separator } from '~/components/ui/separator'
+import { cn } from '~/lib/cn'
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+        horizontal:
+          'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        responsive:
+          'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+      }
+    },
+    defaultVariants: {
+      orientation: 'vertical'
+    }
+  }
+)
+
+function Field({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        'group/field-content flex flex-1 flex-col gap-1 leading-snug',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        'group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
+        'last:mt-0 nth-last-2:-mt-1',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map(error => [error?.message, error])).values()
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn('text-destructive text-sm font-normal', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle
+}

package/template/nextjs/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+import { cn } from '~/lib/cn'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/template/{base → nextjs}/src/components/ui/label.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import * as LabelPrimitive from '@radix-ui/react-label'
+import { Label as LabelPrimitive } from 'radix-ui'
 import * as React from 'react'
 
 import { cn } from '~/lib/cn'

package/template/{base → nextjs}/src/components/ui/separator.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { Separator as SeparatorPrimitive } from 'radix-ui'
 import * as React from 'react'
 
 import { cn } from '~/lib/cn'
@@ -17,7 +17,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
         className
       )}
       {...props}

package/template/{base → nextjs}/src/components/ui/sonner.tsx

@@ -32,6 +32,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
           '--border-radius': 'var(--radius)'
         } as React.CSSProperties
       }
+      toastOptions={{
+        classNames: {
+          toast: 'cn-toast'
+        }
+      }}
       {...props}
     />
   )

package/template/nextjs/src/db/common.ts

@@ -0,0 +1,31 @@
+import { createId } from '@paralleldrive/cuid2'
+import { sql } from 'drizzle-orm'
+import { boolean, timestamp, varchar } from 'drizzle-orm/pg-core'
+
+export const commonFieldDefs = {
+  id: (prefix: string) =>
+    varchar('id')
+      .primaryKey()
+      .$defaultFn(() => prefix + '_' + createId()),
+  date: (name: string) =>
+    timestamp(name, {
+      mode: 'date',
+      withTimezone: true
+    }),
+  dates: {
+    createdAt: timestamp('created_at', {
+      mode: 'date',
+      withTimezone: true
+    })
+      .notNull()
+      .defaultNow(),
+    updatedAt: timestamp('updated_at', {
+      mode: 'date',
+      withTimezone: true
+    })
+      .notNull()
+      .$onUpdate(() => sql`NOW()`)
+      .defaultNow()
+  },
+  isActive: boolean('is_active').notNull().default(true)
+}

package/template/{base → nextjs}/src/db/schema.ts

@@ -1,31 +1,5 @@
-import { createId } from '@paralleldrive/cuid2'
-import { boolean, pgTable, text, timestamp, varchar } from 'drizzle-orm/pg-core'
-
-const commonFieldDefs = {
-  id: (prefix: string) =>
-    varchar('id')
-      .primaryKey()
-      .$defaultFn(() => prefix + '_' + createId()),
-  date: (name: string) =>
-    timestamp(name, {
-      mode: 'date',
-      withTimezone: true
-    }),
-  dates: {
-    createdAt: timestamp('created_at', {
-      mode: 'date',
-      withTimezone: true
-    })
-      .notNull()
-      .defaultNow(),
-    updatedAt: timestamp('updated_at', {
-      mode: 'date',
-      withTimezone: true
-    })
-      .notNull()
-      .defaultNow()
-  }
-}
+import { boolean, pgTable, text } from 'drizzle-orm/pg-core'
+import { commonFieldDefs } from './common'
 
 export const usersTable = pgTable('users', {
   id: commonFieldDefs.id('user'),

package/template/nextjs/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/template/{base → nextjs}/src/lib/auth.ts

@@ -2,12 +2,8 @@ import { validateEmail } from '@ejekanshjain/simple-email-validator'
 import { createId } from '@paralleldrive/cuid2'
 import { APIError, betterAuth } from 'better-auth'
 import { drizzleAdapter } from 'better-auth/adapters/drizzle'
-import {
-  admin,
-  createAuthMiddleware,
-  lastLoginMethod,
-  magicLink
-} from 'better-auth/plugins'
+import { createAuthMiddleware } from 'better-auth/api'
+import { admin, lastLoginMethod, magicLink } from 'better-auth/plugins'
 import { headers } from 'next/headers'
 import { cache } from 'react'
 import { start } from 'workflow/api'

package/template/nextjs/src/lib/format-currency.ts

@@ -0,0 +1,27 @@
+export const formatCurrency = (
+  currencyCode: string,
+  num: number | string,
+  precision = 2
+) => {
+  const numCopy = Number(num)
+
+  switch (currencyCode) {
+    case 'INR':
+      return new Intl.NumberFormat('en-IN', {
+        style: 'currency',
+        currency: 'INR',
+        signDisplay: 'negative'
+      }).format(numCopy)
+    case 'USD':
+      return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        signDisplay: 'negative'
+      }).format(numCopy)
+    default:
+      console.warn(
+        `Unsupported currency: ${currencyCode}. Defaulting to fixed format.`
+      )
+      return numCopy.toFixed(precision)
+  }
+}

package/template/nextjs/src/lib/format-date.ts

@@ -0,0 +1,12 @@
+export const formatDate = (
+  date: Date | string | number | null | undefined,
+  options?: { short?: boolean; time?: boolean; noYear?: boolean }
+): string => {
+  if (date == null) return '—'
+  return new Date(date).toLocaleDateString('en-US', {
+    ...(options?.noYear ? {} : { year: 'numeric' }),
+    month: options?.short ? 'short' : 'long',
+    day: 'numeric',
+    ...(options?.time ? { hour: '2-digit', minute: '2-digit' } : {})
+  })
+}

package/template/nextjs/src/scripts/seed.ts

@@ -0,0 +1,11 @@
+const seedData = async () => {}
+
+if (import.meta.main) {
+  try {
+    await seedData()
+  } catch (err) {
+    console.error('Error seeding data:', err)
+  } finally {
+    process.exit(0)
+  }
+}

package/template/{base → nextjs}/src/scripts/test-mail.ts

@@ -2,10 +2,10 @@ import { render, toPlainText } from '@react-email/render'
 import TestEmail from '~/emails/test'
 import { sendEmail } from '~/lib/nodemailer'
 
-async function main() {
+async function sendTestMail() {
   const html = await render(
     TestEmail({
-      name: 'Ekansh Jain'
+      name: 'John Doe'
     }),
     {
       pretty: true
@@ -22,8 +22,14 @@ async function main() {
   })
 
   console.info('Test email sent successfully', result)
-
-  process.exit()
 }
 
-main()
+if (import.meta.main) {
+  try {
+    await sendTestMail()
+  } catch (err) {
+    console.error('Error sending test mail:', err)
+  } finally {
+    process.exit(0)
+  }
+}

package/template/{base → nextjs}/tsconfig.json

@@ -15,6 +15,8 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "allowUnreachableCode": false,
+    "noUncheckedSideEffectImports": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,

package/template/base/src/app/api/[[...slugs]]/route.ts

@@ -1,25 +0,0 @@
-import { Elysia } from 'elysia'
-import z from 'zod'
-
-export const elysiaApi = new Elysia({ prefix: '/api' })
-  .get('/', 'Hello from Elysia')
-  .post(
-    '/',
-    ({ body }) => {
-      return `Hello, ${body.name}!`
-    },
-    {
-      body: z.object({
-        name: z.string().trim().min(1).describe('Name of the user')
-      }),
-      detail: {
-        description: 'Greet a user by name'
-      }
-    }
-  )
-
-export const GET = elysiaApi.fetch
-export const POST = elysiaApi.fetch
-export const PUT = elysiaApi.fetch
-export const PATCH = elysiaApi.fetch
-export const DELETE = elysiaApi.fetch

package/template/base/src/components/ui/button.tsx

@@ -1,60 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '~/lib/cn'
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline'
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10'
-      }
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default'
-    }
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : 'button'
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }