create-ej-app 24.0.0 → 26.0.0

package/template/saas-starter/src/db/schema.ts

@@ -0,0 +1,191 @@
+import { sql } from 'drizzle-orm'
+import {
+  boolean,
+  index,
+  integer,
+  jsonb,
+  pgTable,
+  text,
+  uniqueIndex,
+  varchar
+} from 'drizzle-orm/pg-core'
+import { commonFieldDefs } from './common'
+import {
+  organizationSubscriptionIntervalEnum,
+  organizationSubscriptionPlanEnum,
+  organizationSubscriptionStatusEnum
+} from './enums'
+
+export * from './enums'
+
+export const usersTable = pgTable('users', {
+  id: commonFieldDefs.id('user'),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  emailVerified: boolean('email_verified').default(false).notNull(),
+  image: text('image'),
+  role: text('role'),
+  banned: boolean('banned').default(false),
+  banReason: text('ban_reason'),
+  banExpires: commonFieldDefs.date('ban_expires'),
+  ...commonFieldDefs.dates
+})
+
+export const sessionsTable = pgTable(
+  'sessions',
+  {
+    id: commonFieldDefs.id('session'),
+    expiresAt: commonFieldDefs.date('expires_at').notNull(),
+    token: text('token').notNull().unique(),
+    ipAddress: text('ip_address'),
+    userAgent: text('user_agent'),
+    userId: text('user_id')
+      .notNull()
+      .references(() => usersTable.id, { onDelete: 'cascade' }),
+    impersonatedBy: text('impersonated_by'),
+    activeOrganizationId: text('active_organization_id'),
+    ...commonFieldDefs.dates
+  },
+  table => [index().on(table.userId)]
+)
+
+export const accountsTable = pgTable(
+  'accounts',
+  {
+    id: commonFieldDefs.id('account'),
+    accountId: text('account_id').notNull(),
+    providerId: text('provider_id').notNull(),
+    userId: text('user_id')
+      .notNull()
+      .references(() => usersTable.id, { onDelete: 'cascade' }),
+    accessToken: text('access_token'),
+    refreshToken: text('refresh_token'),
+    idToken: text('id_token'),
+    accessTokenExpiresAt: commonFieldDefs.date('access_token_expires_at'),
+    refreshTokenExpiresAt: commonFieldDefs.date('refresh_token_expires_at'),
+    scope: text('scope'),
+    password: text('password'),
+    ...commonFieldDefs.dates
+  },
+  table => [index().on(table.userId)]
+)
+
+export const verificationsTable = pgTable('verifications', {
+  id: commonFieldDefs.id('verification'),
+  identifier: text('identifier').notNull(),
+  value: text('value').notNull(),
+  expiresAt: commonFieldDefs.date('expires_at').notNull(),
+  ...commonFieldDefs.dates
+})
+
+export const organizationsTable = pgTable('organizations', {
+  id: commonFieldDefs.id('organization'),
+  name: text('name').notNull(),
+  slug: text('slug').notNull().unique(),
+  logo: text('logo'),
+  metadata: text('metadata'),
+  ...commonFieldDefs.dates
+})
+
+export const membersTable = pgTable(
+  'members',
+  {
+    id: commonFieldDefs.id('member'),
+    organizationId: text('organization_id')
+      .notNull()
+      .references(() => organizationsTable.id, { onDelete: 'cascade' }),
+    userId: text('user_id')
+      .notNull()
+      .references(() => usersTable.id, { onDelete: 'cascade' }),
+    role: text('role').notNull(),
+    ...commonFieldDefs.dates
+  },
+  table => [index().on(table.organizationId), index().on(table.userId)]
+)
+
+export const invitationsTable = pgTable(
+  'invitations',
+  {
+    id: commonFieldDefs.id('invitation'),
+    organizationId: text('organization_id')
+      .notNull()
+      .references(() => organizationsTable.id, { onDelete: 'cascade' }),
+    email: text('email').notNull(),
+    role: text('role'),
+    status: text('status').default('pending').notNull(),
+    expiresAt: commonFieldDefs.date('expires_at'),
+    inviterId: text('inviter_id')
+      .notNull()
+      .references(() => usersTable.id, {
+        onDelete: 'cascade'
+      }),
+    ...commonFieldDefs.dates
+  },
+  table => [
+    index().on(table.organizationId),
+    index().on(table.email),
+    uniqueIndex()
+      .on(table.organizationId, table.email)
+      .where(sql`${table.status} = 'pending'`)
+  ]
+)
+
+export const organizationSubscriptionsTable = pgTable(
+  'organization_subscriptions',
+  {
+    id: commonFieldDefs.id('organization_subscription'),
+    organizationId: text('organization_id')
+      .notNull()
+      .unique()
+      .references(() => organizationsTable.id),
+    plan: organizationSubscriptionPlanEnum('plan').notNull().default('free'),
+    status: organizationSubscriptionStatusEnum('status')
+      .notNull()
+      .default('free'),
+    interval: organizationSubscriptionIntervalEnum('interval'),
+    billingEmail: text('billing_email'),
+    stripeCustomerId: text('stripe_customer_id').unique(),
+    stripeSubscriptionId: text('stripe_subscription_id').unique(),
+    hasUsedTrial: boolean('has_used_trial').notNull().default(false),
+    trialEndsAt: commonFieldDefs.date('trial_ends_at'),
+    currentPeriodEnd: commonFieldDefs.date('current_period_end'),
+    cancelAtPeriodEnd: boolean('cancel_at_period_end').notNull().default(false),
+    ...commonFieldDefs.dates
+  }
+)
+
+export const stripeWebhooksEventsTable = pgTable('stripe_webhooks_events', {
+  id: text('id').primaryKey(),
+  type: text('type').notNull(),
+  receivedAt: commonFieldDefs.date('received_at').notNull().defaultNow(),
+  processed: boolean('processed').notNull().default(false),
+  processedAt: commonFieldDefs.date('processed_at'),
+  error: text('error'),
+  payload: jsonb('payload') // store only on error
+})
+
+export const fileUploadsTable = pgTable(
+  'file_uploads',
+  {
+    id: varchar('id').primaryKey(),
+    // Object path e.g. uploads/organizations/organizationId/filename.jpg
+    key: text('key').notNull().unique(),
+    originalName: varchar('original_name').notNull(),
+    mimeType: varchar('mime_type').notNull(),
+    // In Bytes
+    size: integer('size').notNull(),
+    isTemp: boolean('is_temp').notNull().default(true),
+    uploadedBy: varchar('uploaded_by').references(() => usersTable.id, {
+      onDelete: 'set null'
+    }),
+    // Nullable: scopes upload to a organization for cleanup purposes
+    organizationId: varchar('organization_id').references(
+      () => organizationsTable.id
+    ),
+    ...commonFieldDefs.dates
+  },
+  table => [
+    index().on(table.uploadedBy),
+    index().on(table.isTemp, table.createdAt)
+  ]
+)

package/template/saas-starter/src/emails/components/email-layout.tsx

@@ -0,0 +1,63 @@
+import {
+  Body,
+  Container,
+  Head,
+  Hr,
+  Html,
+  pixelBasedPreset,
+  Preview,
+  Section,
+  Tailwind,
+  Text
+} from 'react-email'
+
+interface EmailLayoutProps {
+  previewText: string
+  companyName: string
+  children: React.ReactNode
+}
+
+export default function EmailLayout({
+  previewText,
+  companyName,
+  children
+}: EmailLayoutProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          presets: [pixelBasedPreset]
+        }}
+      >
+        <Body className="bg-gray-100 font-sans">
+          <Container className="mx-auto my-8 max-w-xl rounded-lg bg-white shadow-sm">
+            {/* Header */}
+            <Section className="rounded-t-lg bg-black px-8 py-6">
+              <Text className="m-0 text-center text-2xl font-bold text-white">
+                {companyName}
+              </Text>
+            </Section>
+
+            {/* Content */}
+            <Section className="px-8 py-6">{children}</Section>
+
+            {/* Footer */}
+            <Section className="rounded-b-lg bg-gray-50 px-8 py-6">
+              <Hr className="my-4 border-gray-200" />
+              <Text className="m-0 text-center text-sm text-gray-500">
+                &copy; {new Date().getUTCFullYear()} {companyName}. All rights
+                reserved.
+              </Text>
+              <Text className="m-0 mt-2 text-center text-xs text-gray-400">
+                This is an automated email. Please do not reply directly to this
+                message.
+              </Text>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  )
+}

package/template/saas-starter/src/emails/invitation.tsx

@@ -0,0 +1,56 @@
+import { Button, Heading, Text } from 'react-email'
+import EmailLayout from './components/email-layout'
+
+export interface InvitationEmailProps {
+  inviterName: string
+  organizationName: string
+  inviteLink: string
+  companyName: string
+}
+
+export default function InvitationEmail({
+  inviterName,
+  organizationName,
+  inviteLink,
+  companyName
+}: InvitationEmailProps) {
+  const previewText = `${inviterName} invited you to join ${organizationName}`
+
+  return (
+    <EmailLayout previewText={previewText} companyName={companyName}>
+      <Heading className="mb-4 text-2xl font-bold text-gray-900">
+        You've been invited to join {organizationName}
+      </Heading>
+
+      <Text className="mb-4 text-base text-gray-700">
+        <strong>{inviterName}</strong> has invited you to collaborate in{' '}
+        <strong>{organizationName}</strong> on {companyName}.
+      </Text>
+
+      <Button
+        href={inviteLink}
+        className="mb-4 rounded-lg bg-black px-6 py-3 text-center text-base font-semibold text-white no-underline"
+      >
+        Accept Invitation
+      </Button>
+
+      <Text className="mb-4 text-sm text-gray-600">
+        Or copy and paste this link into your browser:
+      </Text>
+
+      <Text className="mb-4 text-sm break-all text-blue-600">{inviteLink}</Text>
+
+      <Text className="text-sm text-gray-500">
+        If you weren't expecting this invitation, you can safely ignore this
+        email.
+      </Text>
+    </EmailLayout>
+  )
+}
+
+InvitationEmail.PreviewProps = {
+  inviterName: 'John Doe',
+  organizationName: 'Acme Inc',
+  inviteLink: 'https://example.com/accept-invitation/abc123',
+  companyName: 'Example Site'
+} satisfies InvitationEmailProps

package/template/saas-starter/src/emails/magic-link.tsx

@@ -0,0 +1,49 @@
+import { Button, Heading, Text } from 'react-email'
+import EmailLayout from './components/email-layout'
+
+export interface MagicLinkEmailProps {
+  magicLink: string
+  companyName: string
+}
+
+export default function MagicLinkEmail({
+  magicLink,
+  companyName
+}: MagicLinkEmailProps) {
+  const previewText = `Your magic link to sign in to ${companyName}`
+
+  return (
+    <EmailLayout previewText={previewText} companyName={companyName}>
+      <Heading className="mb-4 text-2xl font-bold text-gray-900">
+        Sign in to {companyName}
+      </Heading>
+
+      <Text className="mb-4 text-base text-gray-700">
+        Click the button below to securely sign in to your account. This link
+        will expire in 5 minutes.
+      </Text>
+
+      <Button
+        href={magicLink}
+        className="mb-4 rounded-lg bg-black px-6 py-3 text-center text-base font-semibold text-white no-underline"
+      >
+        Sign In
+      </Button>
+
+      <Text className="mb-4 text-sm text-gray-600">
+        Or copy and paste this link into your browser:
+      </Text>
+
+      <Text className="mb-4 text-sm break-all text-blue-600">{magicLink}</Text>
+
+      <Text className="text-sm text-gray-500">
+        If you didn't request this email, you can safely ignore it.
+      </Text>
+    </EmailLayout>
+  )
+}
+
+MagicLinkEmail.PreviewProps = {
+  magicLink: 'https://example.com/magic-link?token=abc123',
+  companyName: 'Example Site'
+} satisfies MagicLinkEmailProps

package/template/saas-starter/src/emails/test.tsx

@@ -0,0 +1,32 @@
+import { Button, Heading, Text } from 'react-email'
+import EmailLayout from './components/email-layout'
+
+interface TestEmailProps {
+  name: string
+}
+
+export default function TestEmail({ name }: TestEmailProps) {
+  return (
+    <EmailLayout previewText="This is a test email" companyName="Test">
+      <Heading className="mb-4 text-2xl font-bold text-gray-900">
+        Test Email for {name}
+      </Heading>
+      <Text className="mb-4 text-base text-gray-700">
+        This is a test email template to verify email functionality.
+      </Text>
+      <Text className="mb-6 text-base text-gray-700">
+        If you're seeing this, the email system is working correctly.
+      </Text>
+      <Button
+        href="https://example.com"
+        className="rounded-md bg-black px-5 py-3 text-center text-sm font-medium text-white"
+      >
+        Test Button
+      </Button>
+    </EmailLayout>
+  )
+}
+
+TestEmail.PreviewProps = {
+  name: 'John Doe'
+}

package/template/saas-starter/src/emails/welcome.tsx

@@ -0,0 +1,34 @@
+import { Heading, Text } from 'react-email'
+import EmailLayout from './components/email-layout'
+
+export interface WelcomeEmailProps {
+  userName: string
+  companyName: string
+}
+
+export default function WelcomeEmail({
+  userName,
+  companyName
+}: WelcomeEmailProps) {
+  const previewText = `Welcome to ${companyName}! Your account has been created successfully.`
+
+  return (
+    <EmailLayout previewText={previewText} companyName={companyName}>
+      <Heading className="mb-4 text-2xl font-bold text-gray-900">
+        Welcome to {companyName}! 🎉
+      </Heading>
+
+      <Text className="mb-4 text-base text-gray-700">Hi {userName},</Text>
+
+      <Text className="mb-4 text-base text-gray-700">
+        Thank you for creating an account with us. We're thrilled to have you as
+        part of our community!
+      </Text>
+    </EmailLayout>
+  )
+}
+
+WelcomeEmail.PreviewProps = {
+  userName: 'John Doe',
+  companyName: 'Example Site'
+} satisfies WelcomeEmailProps

package/template/saas-starter/src/env.ts

@@ -0,0 +1,66 @@
+import { createEnv } from '@t3-oss/env-nextjs'
+import { z } from 'zod'
+
+export const env = createEnv({
+  server: {
+    APP_ENV: z.enum(['development', 'staging', 'production']),
+    ANALYZE: z.string().optional(),
+    DATABASE_URL: z.url(),
+    BETTER_AUTH_URL: z.url(),
+    BETTER_AUTH_SECRET: z.string(),
+    BETTER_AUTH_GITHUB_ID: z.string(),
+    BETTER_AUTH_GITHUB_SECRET: z.string(),
+    BETTER_AUTH_GOOGLE_ID: z.string(),
+    BETTER_AUTH_GOOGLE_SECRET: z.string(),
+    EMAIL_SERVER_USER: z.string(),
+    EMAIL_SERVER_PASSWORD: z.string(),
+    EMAIL_SERVER_HOST: z.string(),
+    EMAIL_SERVER_PORT: z.string(),
+    EMAIL_FROM: z.email(),
+    STRIPE_SECRET_KEY: z.string(),
+    STRIPE_WEBHOOK_SECRET: z.string(),
+    STRIPE_PRICE_PRO_MONTHLY: z.string(),
+    STRIPE_PRICE_PRO_ANNUAL: z.string(),
+    STRIPE_PRICE_ULTIMATE_MONTHLY: z.string(),
+    STRIPE_PRICE_ULTIMATE_ANNUAL: z.string(),
+    STRIPE_PORTAL_CONFIGURATION_ID: z.string(),
+    R2_ACCOUNT_ID: z.string().optional(),
+    R2_ACCESS_KEY_ID: z.string().optional(),
+    R2_SECRET_ACCESS_KEY: z.string().optional(),
+    R2_BUCKET_NAME: z.string().optional(),
+    R2_PUBLIC_URL: z.url().optional()
+  },
+
+  client: {},
+
+  runtimeEnv: {
+    APP_ENV: process.env.APP_ENV,
+    ANALYZE: process.env.ANALYZE,
+    DATABASE_URL: process.env.DATABASE_URL,
+    BETTER_AUTH_URL: process.env.BETTER_AUTH_URL,
+    BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
+    BETTER_AUTH_GITHUB_ID: process.env.BETTER_AUTH_GITHUB_ID,
+    BETTER_AUTH_GITHUB_SECRET: process.env.BETTER_AUTH_GITHUB_SECRET,
+    BETTER_AUTH_GOOGLE_ID: process.env.BETTER_AUTH_GOOGLE_ID,
+    BETTER_AUTH_GOOGLE_SECRET: process.env.BETTER_AUTH_GOOGLE_SECRET,
+    EMAIL_SERVER_USER: process.env.EMAIL_SERVER_USER,
+    EMAIL_SERVER_PASSWORD: process.env.EMAIL_SERVER_PASSWORD,
+    EMAIL_SERVER_HOST: process.env.EMAIL_SERVER_HOST,
+    EMAIL_SERVER_PORT: process.env.EMAIL_SERVER_PORT,
+    EMAIL_FROM: process.env.EMAIL_FROM,
+    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
+    STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
+    STRIPE_PRICE_PRO_MONTHLY: process.env.STRIPE_PRICE_PRO_MONTHLY,
+    STRIPE_PRICE_PRO_ANNUAL: process.env.STRIPE_PRICE_PRO_ANNUAL,
+    STRIPE_PRICE_ULTIMATE_MONTHLY: process.env.STRIPE_PRICE_ULTIMATE_MONTHLY,
+    STRIPE_PRICE_ULTIMATE_ANNUAL: process.env.STRIPE_PRICE_ULTIMATE_ANNUAL,
+    STRIPE_PORTAL_CONFIGURATION_ID: process.env.STRIPE_PORTAL_CONFIGURATION_ID,
+    R2_ACCOUNT_ID: process.env.R2_ACCOUNT_ID,
+    R2_ACCESS_KEY_ID: process.env.R2_ACCESS_KEY_ID,
+    R2_SECRET_ACCESS_KEY: process.env.R2_SECRET_ACCESS_KEY,
+    R2_BUCKET_NAME: process.env.R2_BUCKET_NAME,
+    R2_PUBLIC_URL: process.env.R2_PUBLIC_URL
+  },
+
+  emptyStringAsUndefined: true
+})

package/template/saas-starter/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/saas-starter/src/instrumentation.ts

@@ -0,0 +1,26 @@
+import { SpanStatusCode } from '@opentelemetry/api'
+import {
+  ConsoleSpanExporter,
+  ReadableSpan,
+  SimpleSpanProcessor
+} from '@opentelemetry/sdk-trace-base'
+import { registerOTel } from '@vercel/otel'
+
+class SmartSamplingSpanProcessor extends SimpleSpanProcessor {
+  onEnd(span: ReadableSpan): void {
+    const isError = span.status.code === SpanStatusCode.ERROR
+    const isSlow = span.duration[0] * 1000 + span.duration[1] / 1e6 > 5000
+    const isLucky = Math.random() < 0 // Adjust this value to adjust the sampling rate for non-error and non-slow spans
+
+    if (isError || isSlow || isLucky) {
+      super.onEnd(span)
+    }
+  }
+}
+
+export function register() {
+  registerOTel({
+    serviceName: 'my-nextjs-app',
+    spanProcessors: [new SmartSamplingSpanProcessor(new ConsoleSpanExporter())]
+  })
+}

package/template/saas-starter/src/lib/actions.ts

@@ -0,0 +1,21 @@
+import { z } from 'zod'
+import { SortOrderEnum } from '~/components/data-table/enum'
+
+export const getPaginationSchema = (defaultPageSize = 10) => ({
+  page: z.coerce.number().int().positive().optional().default(1),
+  limit: z.coerce
+    .number()
+    .int()
+    .positive()
+    .min(10)
+    .max(100)
+    .optional()
+    .default(defaultPageSize)
+})
+
+export const getSortSchema = <T extends string>(
+  keys: readonly [T, ...T[]]
+) => ({
+  sortOrder: z.enum(SortOrderEnum).optional(),
+  sortBy: z.enum(keys).optional()
+})

package/template/saas-starter/src/lib/admin-navigation.ts

@@ -0,0 +1,31 @@
+import { Home, Users } from 'lucide-react'
+import { SidebarNavGroup } from '~/components/navigation-sidebar'
+
+const adminNavigation: SidebarNavGroup[] = [
+  {
+    label: 'Overview',
+    items: [
+      {
+        title: 'Dashboard',
+        url: '/admin',
+        exact: true,
+        icon: Home
+      }
+    ]
+  },
+  {
+    label: 'Settings',
+    items: [
+      {
+        title: 'Users & Roles',
+        url: '/admin/settings/users',
+        icon: Users
+      }
+    ]
+  }
+]
+
+export const getAdminNavigation = (isSuperAdmin: boolean): SidebarNavGroup[] =>
+  isSuperAdmin
+    ? adminNavigation
+    : adminNavigation.filter(group => !group.superadminOnly)

package/template/saas-starter/src/lib/app-navigation.ts

@@ -0,0 +1,59 @@
+import { CreditCard, Home, Settings, Users } from 'lucide-react'
+import { SidebarNavGroup } from '~/components/navigation-sidebar'
+
+export type UserOrganization = {
+  id: string
+  name: string
+  slug: string
+  logo: string | null
+  role: string
+  userId: string
+  memberId: string
+}
+
+export const canManageOrganization = (role: string): boolean =>
+  role === 'owner' || role === 'admin'
+
+export const getAppNavigation = (
+  orgId: string,
+  role: string
+): SidebarNavGroup[] => {
+  const groups: SidebarNavGroup[] = [
+    {
+      label: 'Overview',
+      items: [
+        {
+          title: 'Dashboard',
+          url: `/app/${orgId}/dashboard`,
+          icon: Home
+        }
+      ]
+    }
+  ]
+
+  if (canManageOrganization(role)) {
+    groups.push({
+      label: 'Settings',
+      items: [
+        {
+          title: 'General',
+          url: `/app/${orgId}/settings`,
+          icon: Settings,
+          exact: true
+        },
+        {
+          title: 'Members',
+          url: `/app/${orgId}/settings/members`,
+          icon: Users
+        },
+        {
+          title: 'Billing',
+          url: `/app/${orgId}/settings/billing`,
+          icon: CreditCard
+        }
+      ]
+    })
+  }
+
+  return groups
+}

package/template/saas-starter/src/lib/auth-client.ts

@@ -0,0 +1,29 @@
+'use client'
+
+import {
+  adminClient,
+  inferAdditionalFields,
+  lastLoginMethodClient,
+  magicLinkClient,
+  organizationClient
+} from 'better-auth/client/plugins'
+import { createAuthClient } from 'better-auth/react'
+import type { auth } from './auth'
+
+export const {
+  signIn,
+  signOut,
+  useSession,
+  getLastUsedLoginMethod,
+  admin,
+  organization,
+  useListOrganizations
+} = createAuthClient({
+  plugins: [
+    inferAdditionalFields<typeof auth>(),
+    magicLinkClient(),
+    adminClient(),
+    organizationClient(),
+    lastLoginMethodClient()
+  ]
+})