@betterstart/cli 0.1.68 → 0.1.70

package/templates/init/components/layout/cms-header.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Button } from '@cms/components/ui/button'
+import { SidebarTrigger, useSidebar } from '@cms/components/ui/sidebar'
+import { useTheme } from '@cms/hooks/use-cms-theme'
+import { Moon, Sun } from 'lucide-react'
+
+export function CmsHeader() {
+  const { theme, setTheme } = useTheme()
+  const { state } = useSidebar()
+
+  return (
+    <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border w-full sticky top-0 z-50">
+      <div className="flex items-center px-5 gap-1 flex-1 w-full justify-between">
+        <div className="flex items-center gap-2 w-full">
+          {state === 'collapsed' && <SidebarTrigger />}
+        </div>
+        <div className="flex items-center gap-2 ml-auto">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+          >
+            <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}

package/templates/init/components/layout/cms-nav-link.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { SidebarMenuButton } from '@cms/components/ui/sidebar'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+export function CmsNavLink({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  const pathname = usePathname()
+  const isActive =
+    href === '/cms'
+      ? pathname === '/cms'
+      : pathname === href || pathname.startsWith(href + '/')
+
+  return (
+    <SidebarMenuButton asChild isActive={isActive}>
+      <Link href={href}>{children}</Link>
+    </SidebarMenuButton>
+  )
+}

package/templates/init/components/layout/cms-providers.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Toaster } from '@cms/components/ui/sonner'
+import { CmsThemeProvider } from '@cms/hooks/use-cms-theme'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { useState } from 'react'
+
+export function CmsProviders({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            refetchOnMount: false,
+            refetchOnReconnect: false,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <CmsThemeProvider>
+        <NuqsAdapter>
+          {children}
+          <Toaster position="top-right" richColors />
+        </NuqsAdapter>
+      </CmsThemeProvider>
+    </QueryClientProvider>
+  )
+}

package/templates/init/components/layout/cms-search.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@cms/components/ui/button'
+import { Command, Search } from 'lucide-react'
+
+export const CmsSearch = () => {
+  return (
+    <div className="flex items-center gap-2 relative w-full max-w-[240px]">
+      <Button
+        variant="outline"
+        className="w-full text-left items-center pr-1.5! py-0 rounded-lg bg-white"
+        size="lg"
+      >
+        <Search className="shrink-0 size-3.5 -ml-0.5 text-muted-foreground/70" />
+        <span className="w-full font-normal text-sm text-muted-foreground/70 [text-box-trim:trim-both]">
+          Quick search...
+        </span>
+        <div className="flex items-center gap-1 py-0.5 border rounded-full corner-squircle px-2 border-border bg-background">
+          <Command className="size-3! text-muted-foreground" />
+          <span className="font-mono text-xs font-medium">K</span>
+        </div>
+      </Button>
+    </div>
+  )
+}
+
+CmsSearch.displayName = 'CmsSearch'

package/templates/init/components/layout/cms-sidebar.tsx

@@ -0,0 +1,192 @@
+import { cn } from '@cms/utils/cn'
+import { getSession } from '@cms/auth/middleware'
+import { Avatar, AvatarFallback, AvatarImage, } from '@cms/components/ui/avatar'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@cms/components/ui/sidebar'
+import { Button, buttonVariants } from '@cms/components/ui/button'
+import { cms } from '@cms/data/cms'
+import { type CmsNavigationItem, cmsNavigation } from '@cms/data/navigation'
+import { BookOpen, Ellipsis, Settings, Users } from 'lucide-react'
+import Link from 'next/link'
+import { Fragment } from 'react'
+import { CmsSignOut } from './cms-sign-out'
+import { getSetting } from '@/cms/lib/actions/settings'
+import { CmsNavLink } from './cms-nav-link'
+import { CmsSearch } from './cms-search'
+import { Separator } from '@cms/components/ui/separator'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@cms/components/ui/dropdown-menu"
+
+function groupNavItems(items: CmsNavigationItem[]) {
+  const groups: { label: string | null; items: CmsNavigationItem[] }[] = []
+  const groupMap = new Map<string | null, CmsNavigationItem[]>()
+
+  for (const item of items) {
+    const key = item.group ?? null
+    if (!groupMap.has(key)) {
+      const arr: CmsNavigationItem[] = []
+      groupMap.set(key, arr)
+      groups.push({ label: key, items: arr })
+    }
+    groupMap.get(key)!.push(item)
+  }
+
+  return groups
+}
+
+export async function CmsSidebar(props: React.ComponentProps<typeof Sidebar>) {
+  const session = await getSession()
+  const settings = await getSetting()
+  const user = session?.user ?? null
+  const groups = groupNavItems(cmsNavigation)
+
+  console.log({ settings });
+
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader className="border-b border-border h-14 items-center flex w-full">
+        <div className="flex items-center gap-2 w-full relative h-full">
+          <Link href="/cms" className="flex items-center gap-2 w-full">
+            <Avatar className="size-8">
+              <AvatarImage src={settings?.logo || "https://assets.betterstart.dev/assets/betterstart-logo.svg"} />
+              <AvatarFallback className="text-sm font-semibold text-foreground">
+                {settings?.siteName?.charAt(0) ?? cms.name?.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex text-foreground items-center gap-1 w-full group-data-[collapsible=icon]:hidden">
+              <span className="text-sm font-medium line-clamp-1">
+                {settings?.siteName ?? cms.name}
+              </span>
+            </div>
+          </Link>
+        </div>
+      </SidebarHeader>
+      <SidebarContent className='pb-2'>
+        <SidebarGroup className="pb-1">
+          <CmsSearch />
+        </SidebarGroup>
+
+        {groups.map((group) => (
+          <Fragment key={group.label ?? '_ungrouped'}>
+            <SidebarGroup>
+              {group.label && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <SidebarMenuItem key={item.href}>
+                    <CmsNavLink href={item.href}>
+                      {item.icon && (
+                        <item.icon strokeWidth={2} />
+                      )}
+                      <span>{item.label}</span>
+                    </CmsNavLink>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+          </Fragment>
+        ))}
+
+        <SidebarGroup className="mt-auto gap-2">
+          <Separator />
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <CmsNavLink href="/cms/users">
+                <Users strokeWidth={2} />
+                <span>Users</span>
+              </CmsNavLink>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <CmsNavLink href="/cms/settings">
+                <Settings strokeWidth={2} />
+                <span>Settings</span>
+              </CmsNavLink>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <Separator />
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        {user && (
+          <SidebarMenu>
+            <SidebarMenuItem className='pb-4'>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className='bg-transparent! px-0 w-full justify-start text-left ring-0! border-none'>
+                    <Avatar className="size-8 shrink-0">
+                      <AvatarImage src={user.image ?? undefined} />
+                      <AvatarFallback className="text-xs font-semibold group-hover:bg-white">
+                        {user.name?.charAt(0) ?? user.email?.charAt(0) ?? '?'}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="flex-1 truncate group-data-[collapsible=icon]:hidden">
+                      <p className="font-medium truncate">{user.name}</p>
+                    </div>
+
+                    <div className="group-data-[collapsible=icon]:hidden">
+                      <span className={cn(buttonVariants({ variant: 'outline', size: 'icon' }), 'rounded-full group-hover:bg-white size-6!')}>
+                        <Ellipsis strokeWidth={2} />
+                      </span>
+                    </div>
+                  </Button>
+
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="w-68 p-0">
+                  <DropdownMenuGroup className='py-2 border-b border-border px-2'>
+                    <DropdownMenuItem className="w-full flex justify-between items-center gap-2 py-2 pr-1 pl-3 cursor-pointer" asChild>
+                      <Link href="/cms/profile" prefetch={true}>
+                        <div className="flex gap-2 items-center flex-1 min-w-0">
+                          <div className="flex flex-col min-w-0">
+                            <p className="font-medium truncate">{user.name}</p>
+                            <p className="text-sm text-muted-foreground [text-box-trim:trim-start] truncate">{user.email}</p>
+                          </div>
+                        </div>
+                        <Button variant="ghost" className="size-8 pointer-events-none shrink-0">
+                          <Settings strokeWidth={2} className="size-4" />
+                        </Button>
+                      </Link>
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuGroup className='py-2 border-b border-border px-2'>
+                    <DropdownMenuItem className='p-0'>
+                      <Button
+                        variant="ghost"
+                        className='justify-between w-full px-3'
+                        asChild
+                      >
+                        <Link href="https://betterstart.io/docs" target="_blank">
+                          <span>Docs</span>
+                          <BookOpen className="size-4" />
+                        </Link>
+                      </Button>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className='p-0'>
+                      <CmsSignOut className='justify-between w-full px-3' />
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        )}
+      </SidebarFooter>
+    </Sidebar>
+  )
+}

package/templates/init/components/layout/cms-sign-out.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { signOut } from '@cms/auth/client'
+import { Button } from '@cms/components/ui/button'
+import { LogOut } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+export function CmsSignOut({ className }: { className?: string }) {
+  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+
+  async function handleSignOut() {
+    setIsLoading(true)
+    await signOut()
+    router.push('/cms/login')
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={handleSignOut}
+      disabled={isLoading}
+      className={className}
+    >
+      <span>Log Out</span>
+      <LogOut className="size-4" />
+    </Button>
+  )
+}

package/templates/init/components/shared/delete-dialog.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@cms/components/ui/alert-dialog'
+import { Button } from '@cms/components/ui/button'
+import { Trash2 } from 'lucide-react'
+
+interface DeleteDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+  isPending?: boolean
+  title?: string
+  description?: string
+  trigger?: React.ReactNode
+}
+
+export function DeleteDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  isPending = false,
+  title = 'Are you sure?',
+  description = 'This action cannot be undone. This will permanently delete this item.',
+  trigger,
+}: DeleteDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault()
+              onConfirm()
+            }}
+            disabled={isPending}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isPending ? 'Deleting...' : 'Delete'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+interface DeleteButtonProps {
+  onClick: () => void
+  label?: string
+  count?: number
+}
+
+export function DeleteButton({ onClick, label = 'item', count }: DeleteButtonProps) {
+  return (
+    <Button variant="destructive" size="default" onClick={onClick}>
+      <Trash2 className="size-3.5 -ml-0.5" strokeWidth={2} />
+      Delete {count !== undefined ? `${count} ${count === 1 ? label : `${label}s`}` : label}
+    </Button>
+  )
+}

package/templates/init/components/shared/page-header.tsx

@@ -0,0 +1,23 @@
+interface PageHeaderProps {
+  title: string
+  children?: React.ReactNode
+  search?: React.ReactNode
+  actions?: React.ReactNode
+  back?: React.ReactNode
+}
+
+export function PageHeader({ title, children, search, actions, back }: PageHeaderProps) {
+  return (
+    <div className="grid grid-cols-3 items-center justify-between w-full h-14 px-4 border-b border-border sticky top-0 bg-background/60 backdrop-blur-md z-10">
+      <div className="flex items-center justify-start gap-2 w-full">{back && back}</div>
+      <div className="flex items-center justify-center gap-2">
+        <h2 className="text-sm font-medium tracking-tight">{title}</h2>
+      </div>
+      <div className="flex items-center justify-end gap-2">
+        {children && children}
+        {search && search}
+        {actions && actions}
+      </div>
+    </div>
+  )
+}

package/templates/init/components/shared/status-badge.tsx

@@ -0,0 +1,43 @@
+import { Badge, type BadgeProps } from '@cms/components/ui/badge'
+import { cn } from '@cms/utils/cn'
+
+type StatusVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
+
+const statusStyles: Record<StatusVariant, string> = {
+  default: 'bg-secondary text-secondary-foreground',
+  success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
+  warning: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300',
+  error: 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300',
+  info: 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300',
+}
+
+interface StatusBadgeProps extends Omit<BadgeProps, 'variant'> {
+  status: StatusVariant
+}
+
+export function StatusBadge({ status, className, ...props }: StatusBadgeProps) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn('border-none font-medium', statusStyles[status], className)}
+      {...props}
+    />
+  )
+}
+
+/** Map boolean values to status badges */
+export function BooleanBadge({
+  value,
+  trueLabel = 'Yes',
+  falseLabel = 'No',
+}: {
+  value: boolean
+  trueLabel?: string
+  falseLabel?: string
+}) {
+  return (
+    <StatusBadge status={value ? 'success' : 'default'}>
+      {value ? trueLabel : falseLabel}
+    </StatusBadge>
+  )
+}

package/templates/init/data/navigation.ts

@@ -0,0 +1,39 @@
+import type { LucideIcon } from 'lucide-react'
+import { ChartSpline, FileText, House, ImagePlay, Tag } from 'lucide-react'
+
+export interface CmsNavigationItem {
+  label: string
+  href: string
+  icon?: LucideIcon
+  group?: string
+}
+
+export const cmsNavigation: CmsNavigationItem[] = [
+  {
+    label: 'Overview',
+    href: '/cms',
+    icon: House,
+  },
+  {
+    label: 'Analytics',
+    href: '/cms/analytics',
+    icon: ChartSpline,
+  },
+  {
+    label: 'Media',
+    href: '/cms/media',
+    icon: ImagePlay,
+  },
+  {
+    label: 'Categories',
+    href: '/cms/categories',
+    icon: Tag,
+    group: 'Blog',
+  },
+  {
+    label: 'Posts',
+    href: '/cms/posts',
+    icon: FileText,
+    group: 'Blog',
+  },
+]

package/templates/init/db/client.ts

@@ -0,0 +1,8 @@
+import { neon } from '@neondatabase/serverless'
+import { drizzle } from 'drizzle-orm/neon-http'
+import * as schema from './schema'
+
+const sql = neon(process.env.BETTERSTART_DATABASE_URL!)
+const db = drizzle({ client: sql, schema })
+
+export default db

package/templates/init/db/schema.ts

@@ -0,0 +1,88 @@
+import { sql } from 'drizzle-orm'
+import { boolean, pgTable, serial, text, timestamp, uniqueIndex, varchar } from 'drizzle-orm/pg-core'
+
+// ============================================================================
+// Better Auth tables
+// ============================================================================
+
+export const user = pgTable('user', {
+  id: text('id').primaryKey(),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  emailVerified: boolean('email_verified').notNull().default(false),
+  image: text('image'),
+  role: text('role').notNull().default('member'),
+  createdAt: timestamp('created_at').notNull().defaultNow(),
+  updatedAt: timestamp('updated_at').notNull().defaultNow(),
+})
+
+export const session = pgTable('session', {
+  id: text('id').primaryKey(),
+  expiresAt: timestamp('expires_at').notNull(),
+  token: text('token').notNull().unique(),
+  createdAt: timestamp('created_at').notNull().defaultNow(),
+  updatedAt: timestamp('updated_at').notNull().defaultNow(),
+  ipAddress: text('ip_address'),
+  userAgent: text('user_agent'),
+  userId: text('user_id')
+    .notNull()
+    .references(() => user.id, { onDelete: 'cascade' }),
+})
+
+export const account = pgTable('account', {
+  id: text('id').primaryKey(),
+  accountId: text('account_id').notNull(),
+  providerId: text('provider_id').notNull(),
+  userId: text('user_id')
+    .notNull()
+    .references(() => user.id, { onDelete: 'cascade' }),
+  accessToken: text('access_token'),
+  refreshToken: text('refresh_token'),
+  idToken: text('id_token'),
+  accessTokenExpiresAt: timestamp('access_token_expires_at'),
+  refreshTokenExpiresAt: timestamp('refresh_token_expires_at'),
+  scope: text('scope'),
+  password: text('password'),
+  createdAt: timestamp('created_at').notNull().defaultNow(),
+  updatedAt: timestamp('updated_at').notNull().defaultNow(),
+})
+
+export const verification = pgTable('verification', {
+  id: text('id').primaryKey(),
+  identifier: text('identifier').notNull(),
+  value: text('value').notNull(),
+  expiresAt: timestamp('expires_at').notNull(),
+  createdAt: timestamp('created_at').defaultNow(),
+  updatedAt: timestamp('updated_at').defaultNow(),
+})
+
+// ============================================================================
+// Form Settings (shared table for all form configurations)
+// ============================================================================
+
+export const formSettings = pgTable(
+  'FormSettings',
+  {
+    id: serial().primaryKey().notNull(),
+    formName: varchar('formName', { length: 100 }).notNull(),
+    webhookUrl: text('webhookUrl'),
+    webhookEnabled: boolean('webhookEnabled').default(false).notNull(),
+    notificationEmails: text('notificationEmails'),
+    createdAt: timestamp('createdAt', { precision: 3, mode: 'string' })
+      .default(sql`CURRENT_TIMESTAMP`)
+      .notNull(),
+    updatedAt: timestamp('updatedAt', { precision: 3, mode: 'string' })
+      .default(sql`CURRENT_TIMESTAMP`)
+      .notNull(),
+  },
+  (table) => [
+    uniqueIndex('FormSettings_formName_key').using(
+      'btree',
+      table.formName.asc().nullsLast().op('text_ops')
+    ),
+  ]
+)
+
+// ============================================================================
+// Generated entity tables (appended by `betterstart generate`)
+// ============================================================================

package/{dist/chunk-6JCWMKSY.js → templates/init/drizzle.config.ts}

@@ -1,6 +1,4 @@
-// src/init/templates/db/drizzle-config.ts
-function drizzleConfigTemplate() {
-  return `import { readFileSync } from 'node:fs'
+import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { defineConfig } from 'drizzle-kit'
 
@@ -8,7 +6,7 @@ import { defineConfig } from 'drizzle-kit'
 for (const envFile of ['.env.local', '.env']) {
   try {
     const content = readFileSync(resolve(process.cwd(), envFile), 'utf-8')
-    for (const line of content.split('\\n')) {
+    for (const line of content.split('\n')) {
       const trimmed = line.trim()
       if (!trimmed || trimmed.startsWith('#')) continue
       const eqIdx = trimmed.indexOf('=')
@@ -31,10 +29,3 @@ export default defineConfig({
     url: process.env.BETTERSTART_DATABASE_URL!
   }
 })
-`;
-}
-
-export {
-  drizzleConfigTemplate
-};
-//# sourceMappingURL=chunk-6JCWMKSY.js.map