create-ej-app 24.0.0 → 26.0.0

package/template/saas-starter/src/app/(app)/app/_components/app-search.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { FC } from 'react'
+import { NavigationSearch } from '~/components/navigation-search'
+import { getAppNavigation } from '~/lib/app-navigation'
+
+export const AppSearch: FC<{ orgId: string; role: string }> = ({
+  orgId,
+  role
+}) => {
+  return (
+    <NavigationSearch
+      groups={getAppNavigation(orgId, role)}
+      dialogDescription="Search across this organization's pages and settings."
+    />
+  )
+}

package/template/saas-starter/src/app/(app)/app/_components/app-sidebar.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import { NavigationSidebar } from '~/components/navigation-sidebar'
+import { getAppNavigation, type UserOrganization } from '~/lib/app-navigation'
+import { OrganizationSwitcher } from './organization-switcher'
+
+export function AppSidebar({
+  organizations
+}: {
+  organizations: UserOrganization[]
+}) {
+  const params = useParams()
+  const orgId = params?.orgId as string | undefined
+  const role = organizations.find(o => o.id === orgId)?.role
+
+  if (!orgId || !role) {
+    return null
+  }
+
+  return (
+    <NavigationSidebar
+      groups={getAppNavigation(orgId, role)}
+      header={<OrganizationSwitcher organizations={organizations} />}
+    />
+  )
+}

package/template/saas-starter/src/app/(app)/app/_components/organization-context.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+type OrganizationContextType = {
+  id: string
+  name: string
+  role: string
+  memberId: string
+  userId: string
+}
+
+const OrganizationContext = createContext<OrganizationContextType>({
+  id: '',
+  name: '',
+  role: 'member',
+  memberId: '',
+  userId: ''
+})
+
+export const OrganizationContextProvider = ({
+  children,
+  value
+}: {
+  children: React.ReactNode
+  value: OrganizationContextType
+}) => {
+  return <OrganizationContext value={value}>{children}</OrganizationContext>
+}
+
+export const useOrganizationContext = () => {
+  const context = useContext(OrganizationContext)
+
+  if (!context) {
+    throw new Error(
+      'useOrganizationContext must be used within a OrganizationContextProvider'
+    )
+  }
+
+  return context
+}

package/template/saas-starter/src/app/(app)/app/_components/organization-switcher.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { Building2, ChevronsUpDown, PlusCircle } from 'lucide-react'
+import Image from 'next/image'
+import { useParams, useRouter } from 'next/navigation'
+import { useMemo } from 'react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '~/components/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem
+} from '~/components/ui/sidebar'
+import type { UserOrganization } from '~/lib/app-navigation'
+
+function OrganizationLogo({
+  logo,
+  name,
+  size
+}: {
+  logo: string | null
+  name: string
+  size: 'sm' | 'lg'
+}) {
+  if (logo) {
+    return (
+      <div
+        className={
+          size === 'lg'
+            ? 'relative aspect-square size-8 shrink-0 overflow-hidden rounded-lg'
+            : 'relative size-full overflow-hidden rounded-sm'
+        }
+      >
+        <Image
+          src={logo}
+          alt={name}
+          fill
+          sizes={size === 'lg' ? '32px' : '24px'}
+          className="object-cover"
+          unoptimized={logo.startsWith('data:')}
+        />
+      </div>
+    )
+  }
+
+  return size === 'lg' ? (
+    <div className="bg-primary text-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg">
+      <Building2 className="size-4" />
+    </div>
+  ) : (
+    <Building2 className="size-4 shrink-0" />
+  )
+}
+
+export function OrganizationSwitcher({
+  organizations
+}: {
+  organizations: UserOrganization[]
+}) {
+  const router = useRouter()
+  const params = useParams()
+  const activeOrgId = params?.orgId as string | undefined
+
+  const activeOrg = useMemo(
+    () => organizations.find(o => o.id === activeOrgId) ?? organizations[0],
+    [organizations, activeOrgId]
+  )
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <OrganizationLogo
+                logo={activeOrg?.logo ?? null}
+                name={activeOrg?.name ?? ''}
+                size="lg"
+              />
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">
+                  {activeOrg?.name ?? 'Select organization'}
+                </span>
+                {activeOrg ? (
+                  <span className="text-muted-foreground truncate text-xs capitalize">
+                    {activeOrg.role}
+                  </span>
+                ) : null}
+              </div>
+              <ChevronsUpDown className="ml-auto size-4 shrink-0" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Organizations
+            </DropdownMenuLabel>
+            {organizations.map(org => (
+              <DropdownMenuItem
+                key={org.id}
+                onClick={() => router.push(`/app/${org.id}/dashboard`)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center overflow-hidden rounded-sm border">
+                  <OrganizationLogo logo={org.logo} name={org.name} size="sm" />
+                </div>
+                <span className="truncate">{org.name}</span>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="gap-2 p-2"
+              onClick={() => router.push('/app/onboarding')}
+            >
+              <div className="bg-background text-muted-foreground flex size-6 items-center justify-center rounded-md border">
+                <PlusCircle className="size-4" />
+              </div>
+              <div className="text-muted-foreground font-medium">
+                Create organization
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

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

@@ -0,0 +1,52 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { NuqsAdapter } from 'nuqs/adapters/react'
+import { ImpersonationBanner } from '~/components/impersonation-banner'
+import { SidebarInset, SidebarProvider } from '~/components/ui/sidebar'
+import { TooltipProvider } from '~/components/ui/tooltip'
+import { getAuthSession } from '~/lib/auth'
+import { getUserOrganizationsCached } from '~/lib/organization-access'
+import { AppHeader } from './_components/app-header'
+import { AppSidebar } from './_components/app-sidebar'
+
+export default async function Layout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    return redirect('/login')
+  }
+
+  const cookieStore = await cookies()
+  const sidebarStateCookie = cookieStore.get('sidebar_state')?.value
+  const defaultOpen = sidebarStateCookie !== 'false'
+
+  const organizations = await getUserOrganizationsCached()
+
+  return (
+    <TooltipProvider>
+      <NuqsAdapter>
+        <SidebarProvider defaultOpen={defaultOpen}>
+          <AppSidebar organizations={organizations} />
+          <SidebarInset>
+            {authSession.session.impersonatedBy ? (
+              <ImpersonationBanner />
+            ) : null}
+            <AppHeader
+              user={{
+                name: authSession.user.name,
+                email: authSession.user.email,
+                image: authSession.user.image
+              }}
+              organizations={organizations}
+            />
+            <div className="flex flex-1 flex-col gap-4 p-4">{children}</div>
+          </SidebarInset>
+        </SidebarProvider>
+      </NuqsAdapter>
+    </TooltipProvider>
+  )
+}

package/template/saas-starter/src/app/(app)/app/onboarding/_components/create-organization-form.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2 } from 'lucide-react'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldTitle
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { organization } from '~/lib/auth-client'
+import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+import { stringValidation } from '~/lib/validations'
+
+const slugify = (value: string) =>
+  value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+const schema = z.object({
+  name: stringValidation,
+  slug: z
+    .string()
+    .trim()
+    .min(1, 'Slug is required')
+    .max(255)
+    .regex(
+      /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
+      'Use lowercase letters, numbers and hyphens only'
+    )
+})
+
+type Form = z.infer<typeof schema>
+
+export function CreateOrganizationForm() {
+  const [submitting, setSubmitting] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors }
+  } = useForm<Form>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: '', slug: '' }
+  })
+
+  const [slugEdited, setSlugEdited] = useState(false)
+
+  async function onSubmit(values: Form) {
+    setSubmitting(true)
+
+    const { data, error } = await organization.create({
+      name: values.name,
+      slug: values.slug
+    })
+
+    if (error || !data) {
+      toastErrorMessage(error?.message ?? 'Failed to create organization')
+      setSubmitting(false)
+      return
+    }
+
+    toastSuccessMessage(`${data.name} created`)
+    window.location.assign(`/app/${data.id}/dashboard`)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
+      <Field orientation="vertical">
+        <FieldContent>
+          <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
+            Organization name
+          </FieldTitle>
+          <Input
+            autoFocus
+            placeholder="Acme Inc."
+            {...register('name', {
+              onChange: e => {
+                if (!slugEdited) {
+                  setValue('slug', slugify(e.target.value), {
+                    shouldValidate: true
+                  })
+                }
+              }
+            })}
+            aria-invalid={!!errors.name}
+          />
+          <FieldError errors={[errors.name]} className="mt-1.5 text-[13px]" />
+        </FieldContent>
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldContent>
+          <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
+            Slug
+          </FieldTitle>
+          <Input
+            placeholder="acme-inc"
+            {...register('slug', {
+              onChange: () => setSlugEdited(true)
+            })}
+            aria-invalid={!!errors.slug}
+          />
+          <FieldDescription className="mt-1.5 text-[13px]">
+            A unique identifier used in links. Lowercase letters, numbers and
+            hyphens.
+          </FieldDescription>
+          <FieldError errors={[errors.slug]} className="mt-1.5 text-[13px]" />
+        </FieldContent>
+      </Field>
+
+      <div>
+        <Button type="submit" disabled={submitting}>
+          {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Create organization
+        </Button>
+      </div>
+    </form>
+  )
+}

package/template/saas-starter/src/app/(app)/app/onboarding/page.tsx

@@ -0,0 +1,42 @@
+import { ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+import { Button } from '~/components/ui/button'
+import { getUserOrganizationsCached } from '~/lib/organization-access'
+import { CreateOrganizationForm } from './_components/create-organization-form'
+
+export default async function Page() {
+  const organizations = await getUserOrganizationsCached()
+  const isFirstOrg = organizations.length === 0
+
+  return (
+    <div className="mx-auto flex w-full max-w-xl flex-col gap-8 px-2 py-8">
+      <div className="flex flex-col gap-2">
+        {!isFirstOrg ? (
+          <Button
+            asChild
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground -ml-2 w-fit"
+          >
+            <Link href="/app">
+              <ArrowLeft className="mr-2 size-4" />
+              Back to organizations
+            </Link>
+          </Button>
+        ) : null}
+        <h1 className="text-3xl font-bold tracking-tight">
+          {isFirstOrg
+            ? 'Create your organization'
+            : 'Create a new organization'}
+        </h1>
+        <p className="text-muted-foreground">
+          {isFirstOrg
+            ? 'Set up an organization to get started. You can invite teammates afterwards.'
+            : 'Spin up another workspace. You can switch between organizations at any time.'}
+        </p>
+      </div>
+
+      <CreateOrganizationForm />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(app)/app/page.tsx

@@ -0,0 +1,81 @@
+import { Building2, Plus } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { getUserOrganizationsCached } from '~/lib/organization-access'
+import { siteConfig } from '~/lib/siteConfig'
+
+export default async function Page() {
+  const organizations = await getUserOrganizationsCached()
+
+  if (organizations.length === 0) {
+    return redirect('/app/onboarding')
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-2 py-8">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-3xl font-bold tracking-tight">
+          Welcome to {siteConfig.name}
+        </h1>
+        <p className="text-muted-foreground">
+          Select an organization to manage, or create a new one.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {organizations.map(org => (
+          <Link
+            key={org.id}
+            href={`/app/${org.id}/dashboard`}
+            className="group"
+          >
+            <Card className="hover:border-primary h-full cursor-pointer transition-all duration-200 hover:shadow-md">
+              <CardHeader className="flex flex-row items-center gap-4">
+                {org.logo ? (
+                  <div className="relative size-10 shrink-0 overflow-hidden rounded-lg">
+                    <Image
+                      src={org.logo}
+                      alt={org.name}
+                      fill
+                      sizes="40px"
+                      className="object-cover"
+                      unoptimized={org.logo.startsWith('data:')}
+                    />
+                  </div>
+                ) : (
+                  <div className="bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground flex size-10 shrink-0 items-center justify-center rounded-lg transition-colors">
+                    <Building2 className="size-5" />
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  <CardTitle className="truncate text-lg">{org.name}</CardTitle>
+                  <CardDescription className="truncate text-xs capitalize">
+                    {org.role}
+                  </CardDescription>
+                </div>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+
+        <Link href="/app/onboarding" className="group">
+          <Card className="hover:border-primary hover:bg-muted/50 flex h-full min-h-28 cursor-pointer flex-col items-center justify-center border-dashed transition-all">
+            <div className="bg-muted mb-2 flex size-10 items-center justify-center rounded-full">
+              <Plus className="size-5" />
+            </div>
+            <div className="text-muted-foreground font-semibold">
+              Create organization
+            </div>
+          </Card>
+        </Link>
+      </div>
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/login/email-login-form.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Mail } from 'lucide-react'
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldLabel
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { signIn } from '~/lib/auth-client'
+import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+
+const emailLoginFormSchema = z.object({
+  email: z.email()
+})
+
+export const EmailLoginForm = ({
+  callbackUrl
+}: {
+  callbackUrl?: string | null
+}) => {
+  const form = useForm<z.infer<typeof emailLoginFormSchema>>({
+    resolver: zodResolver(emailLoginFormSchema),
+    defaultValues: {
+      email: ''
+    }
+  })
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSent, setIsSent] = useState('')
+
+  async function onSubmit(values: z.infer<typeof emailLoginFormSchema>) {
+    const email = values.email
+
+    if (!email) return
+
+    setIsLoading(true)
+    try {
+      const res = await signIn.magicLink({
+        email,
+        name: '',
+        callbackURL: callbackUrl || '/login'
+      })
+      if (res?.error) throw res.error
+      setIsSent(email)
+      toastSuccessMessage('Magic link sent! Check your email.')
+    } catch (err) {
+      console.error('Error sending magic link:', err)
+      if (
+        typeof err === 'object' &&
+        err &&
+        'message' in err &&
+        typeof err.message === 'string'
+      )
+        toastErrorMessage(err.message)
+      else toastErrorMessage('Something went wrong. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (isSent) {
+    return (
+      <div className="rounded-lg border p-4 text-center">
+        <Mail className="text-primary mx-auto mb-2 size-6" />
+        <h3 className="mb-1 text-sm font-medium">Check your email</h3>
+        <p className="text-muted-foreground text-xs">
+          We&apos;ve sent a magic link to <strong>{isSent}</strong>
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      <Controller
+        control={form.control}
+        name="email"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor="email">Email</FieldLabel>
+            <FieldContent>
+              <Input
+                id="email"
+                type="email"
+                placeholder="name@example.com"
+                autoCapitalize="off"
+                autoComplete="email"
+                autoFocus
+                aria-invalid={fieldState.invalid}
+                {...field}
+              />
+              <FieldError errors={[fieldState.error]} />
+            </FieldContent>
+          </Field>
+        )}
+      />
+      <Button type="submit" className="w-full" disabled={isLoading}>
+        {isLoading ? 'Sending...' : 'Send Magic Link'}
+      </Button>
+    </form>
+  )
+}