@betterstart/cli 0.1.69 → 0.1.70

package/templates/init/hooks/use-cms-theme.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import * as React from 'react'
+
+type Theme = 'light' | 'dark' | 'system'
+
+interface ThemeContext {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  resolvedTheme: 'light' | 'dark'
+}
+
+const CmsThemeContext = React.createContext<ThemeContext | undefined>(undefined)
+
+const STORAGE_KEY = 'cms-theme'
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+export function CmsThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = React.useState<Theme>('system')
+  const [resolved, setResolved] = React.useState<'light' | 'dark'>('light')
+
+  // Read from localStorage on mount
+  React.useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null
+    if (stored && ['light', 'dark', 'system'].includes(stored)) {
+      setThemeState(stored)
+    }
+  }, [])
+
+  // Resolve theme and apply .dark class to .cms-root
+  React.useEffect(() => {
+    const actual = theme === 'system' ? getSystemTheme() : theme
+    setResolved(actual)
+
+    const root = document.querySelector('.cms-root')
+    if (root) {
+      root.classList.toggle('dark', actual === 'dark')
+    }
+  }, [theme])
+
+  // Listen for system theme changes
+  React.useEffect(() => {
+    if (theme !== 'system') return
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = () => {
+      const actual = getSystemTheme()
+      setResolved(actual)
+      const root = document.querySelector('.cms-root')
+      if (root) {
+        root.classList.toggle('dark', actual === 'dark')
+      }
+    }
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [theme])
+
+  const setTheme = React.useCallback((t: Theme) => {
+    setThemeState(t)
+    localStorage.setItem(STORAGE_KEY, t)
+  }, [])
+
+  const value = React.useMemo(
+    () => ({ theme, setTheme, resolvedTheme: resolved }),
+    [theme, setTheme, resolved],
+  )
+
+  return <CmsThemeContext.Provider value={value}>{children}</CmsThemeContext.Provider>
+}
+
+export function useTheme(): ThemeContext {
+  const ctx = React.useContext(CmsThemeContext)
+  if (!ctx) throw new Error('useTheme must be used within CmsThemeProvider')
+  return ctx
+}

package/templates/init/hooks/use-editor-image-upload.ts

@@ -0,0 +1,82 @@
+'use client'
+
+import * as React from 'react'
+import { useUpload } from './use-upload'
+
+export interface EditorImageUploadResult {
+  url: string
+  filename: string
+}
+
+export interface UseEditorImageUploadOptions {
+  onImagesUploaded: (images: EditorImageUploadResult[]) => void
+}
+
+export function useEditorImageUpload({ onImagesUploaded }: UseEditorImageUploadOptions) {
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  const onImagesUploadedRef = React.useRef(onImagesUploaded)
+  onImagesUploadedRef.current = onImagesUploaded
+
+  const { upload, progress, mutation } = useUpload({
+    accept: 'image/*',
+    maxSizeInMB: 10,
+    prefix: 'images',
+    onSuccess: (result) => {
+      if (result.success && result.files) {
+        const images: EditorImageUploadResult[] = result.files.map((f) => ({
+          url: f.url,
+          filename: f.filename,
+        }))
+        onImagesUploadedRef.current(images)
+      }
+    },
+  })
+
+  const isUploading = mutation.isPending
+
+  const uploadImages = React.useCallback(
+    (files: File[]) => {
+      const imageFiles = files.filter((f) => f.type.startsWith('image/'))
+      if (imageFiles.length === 0) return
+      upload(imageFiles, 'images')
+    },
+    [upload],
+  )
+
+  const handleDrop = React.useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith('image/'))
+      if (files.length > 0) {
+        uploadImages(files)
+      }
+    },
+    [uploadImages],
+  )
+
+  const openFilePicker = React.useCallback(() => {
+    fileInputRef.current?.click()
+  }, [])
+
+  const handleFileInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files || [])
+      if (files.length > 0) {
+        uploadImages(files)
+      }
+      e.target.value = ''
+    },
+    [uploadImages],
+  )
+
+  return {
+    uploadImages,
+    isUploading,
+    progress,
+    handleDrop,
+    openFilePicker,
+    fileInputRef,
+    handleFileInputChange,
+  }
+}

package/templates/init/hooks/use-local-storage.ts

@@ -0,0 +1,46 @@
+import * as React from 'react'
+
+const CMS_STORAGE_PREFIX = 'cms-'
+
+/** Type-safe wrapper for localStorage operations with cms- prefix. */
+export function useLocalStorage<T>(key: string) {
+  const prefixedKey = CMS_STORAGE_PREFIX + key
+
+  const setItem = React.useCallback(
+    (value: T) => {
+      try {
+        localStorage.setItem(prefixedKey, JSON.stringify(value))
+      } catch {
+        // Silent failure for localStorage access errors
+      }
+    },
+    [prefixedKey],
+  )
+
+  const getItem = React.useCallback((): T | null => {
+    try {
+      const stored = localStorage.getItem(prefixedKey)
+      return stored ? JSON.parse(stored) : null
+    } catch {
+      return null
+    }
+  }, [prefixedKey])
+
+  const removeItem = React.useCallback(() => {
+    try {
+      localStorage.removeItem(prefixedKey)
+    } catch {
+      // Silent failure for localStorage access errors
+    }
+  }, [prefixedKey])
+
+  const hasItem = React.useCallback((): boolean => {
+    try {
+      return localStorage.getItem(prefixedKey) !== null
+    } catch {
+      return false
+    }
+  }, [prefixedKey])
+
+  return { setItem, getItem, removeItem, hasItem }
+}

package/templates/init/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/templates/init/hooks/use-upload.ts

@@ -0,0 +1,177 @@
+'use client'
+
+import type { UploadFileResult, UploadProgress } from '@cms/types'
+import { type FileValidationConfig, validateFiles } from '@cms/utils/validation'
+import { type UseMutationResult, useMutation } from '@tanstack/react-query'
+import * as React from 'react'
+
+export interface UseUploadOptions {
+  /** File validation configuration */
+  validationConfig?: FileValidationConfig
+  /** Accept string (e.g., "image/*") */
+  accept?: string
+  /** Maximum file size in MB */
+  maxSizeInMB?: number
+  /** Callback fired when upload progress changes */
+  onProgress?: (progress: UploadProgress[]) => void
+  /** Callback fired when upload succeeds */
+  onSuccess?: (result: UploadFileResult) => void
+  /** Callback fired when upload fails */
+  onError?: (error: Error) => void
+  /** Optional prefix for file paths in R2 */
+  prefix?: string
+}
+
+export interface UploadMutationVariables {
+  files: File[]
+  prefix?: string
+}
+
+export interface UseUploadReturn {
+  mutation: UseMutationResult<UploadFileResult, Error, UploadMutationVariables, unknown>
+  progress: UploadProgress[]
+  upload: (files: File[], prefix?: string) => void
+  validate: (files: File[]) => { valid: boolean; errors: string[] }
+}
+
+function parseAcceptTypes(accept: string): string[] {
+  return accept
+    .split(',')
+    .map((t) => t.trim())
+    .filter(Boolean)
+}
+
+export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
+  const {
+    validationConfig: providedConfig,
+    accept,
+    maxSizeInMB,
+    onProgress,
+    onSuccess,
+    onError,
+    prefix: defaultPrefix,
+  } = options
+
+  const validationConfig = React.useMemo<FileValidationConfig>(() => {
+    const config: FileValidationConfig = { ...providedConfig }
+
+    if (accept) {
+      const parsedTypes = parseAcceptTypes(accept)
+      if (config.allowedTypes && config.allowedTypes.length > 0) {
+        config.allowedTypes = [...config.allowedTypes, ...parsedTypes].filter(
+          (v, i, a) => a.indexOf(v) === i,
+        )
+      } else {
+        config.allowedTypes = parsedTypes
+      }
+    }
+
+    if (maxSizeInMB !== undefined) {
+      config.maxSizeInBytes = maxSizeInMB * 1024 * 1024
+    }
+
+    return config
+  }, [providedConfig, accept, maxSizeInMB])
+
+  const [progress, setProgress] = React.useState<UploadProgress[]>([])
+  const [_isPending, startTransition] = React.useTransition()
+
+  const mutation = useMutation<UploadFileResult, Error, UploadMutationVariables>({
+    mutationFn: async ({ files, prefix = defaultPrefix }) => {
+      const initialProgress: UploadProgress[] = files.map((file) => ({
+        filename: file.name,
+        progress: 0,
+        loaded: 0,
+        total: file.size,
+      }))
+      setProgress(initialProgress)
+      onProgress?.(initialProgress)
+
+      const formData = new FormData()
+      if (prefix) {
+        formData.append('prefix', prefix)
+      }
+
+      files.forEach((file, index) => {
+        formData.append(`file${index}`, file)
+      })
+
+      // Simulate progress since server doesn't support streaming
+      const progressInterval = setInterval(() => {
+        setProgress((prev) =>
+          prev.map((p) => {
+            const newProgress = Math.min(p.progress + 10, 90)
+            return {
+              ...p,
+              progress: newProgress,
+              loaded: Math.floor((p.total * newProgress) / 100),
+            }
+          }),
+        )
+      }, 200)
+
+      try {
+        if (validationConfig?.maxSizeInBytes) {
+          formData.append('maxSizeInBytes', validationConfig.maxSizeInBytes.toString())
+        }
+        if (validationConfig?.allowedTypes?.length) {
+          formData.append('allowedTypes', validationConfig.allowedTypes.join(','))
+        }
+
+        const response = await fetch('/api/cms/upload', {
+          method: 'POST',
+          body: formData,
+        })
+
+        const result = (await response.json()) as UploadFileResult
+
+        if (result.success) {
+          const completeProgress: UploadProgress[] = files.map((file) => ({
+            filename: file.name,
+            progress: 100,
+            loaded: file.size,
+            total: file.size,
+          }))
+          setProgress(completeProgress)
+          onProgress?.(completeProgress)
+        }
+
+        return result
+      } finally {
+        clearInterval(progressInterval)
+      }
+    },
+    onSuccess: (result) => {
+      onSuccess?.(result)
+      startTransition(() => {
+        setTimeout(() => {
+          setProgress([])
+        }, 2000)
+      })
+    },
+    onError: (error) => {
+      onError?.(error)
+      setProgress([])
+    },
+  })
+
+  const upload = React.useCallback(
+    (files: File[], prefix?: string) => {
+      mutation.mutate({ files, prefix })
+    },
+    [mutation],
+  )
+
+  const validate = React.useCallback(
+    (files: File[]) => {
+      const result = validateFiles(files, validationConfig)
+      return {
+        valid: result.valid,
+        errors: result.errors.map((e) => `${e.filename}: ${e.error}`),
+      }
+    },
+    [validationConfig],
+  )
+
+  return { mutation, progress, upload, validate }
+}

package/templates/init/hooks/use-users.ts

@@ -0,0 +1,13 @@
+'use client'
+
+import { getUsers } from '@cms/actions/users'
+import type { UsersResponse } from '@cms/types/auth'
+import { useQuery } from '@tanstack/react-query'
+
+export function useUsers() {
+  return useQuery<UsersResponse>({
+    queryKey: ['users'],
+    queryFn: () => getUsers(),
+    staleTime: 0,
+  })
+}

package/templates/init/lib/actions/form-settings.ts

@@ -0,0 +1,126 @@
+'use server'
+
+import db from '@cms/db'
+import { formSettings } from '@cms/db/schema'
+import { eq } from 'drizzle-orm'
+
+export interface FormSettingsData {
+  id: number
+  formName: string
+  webhookUrl: string | null
+  webhookEnabled: boolean
+  notificationEmails: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface UpsertFormSettingsInput {
+  webhookUrl?: string | null
+  webhookEnabled?: boolean
+  notificationEmails?: string | null
+}
+
+export interface FormSettingsResult {
+  success: boolean
+  error?: string
+  settings?: FormSettingsData
+}
+
+export async function getFormSettings(formName: string): Promise<FormSettingsData | null> {
+  try {
+    const [settings] = await db
+      .select()
+      .from(formSettings)
+      .where(eq(formSettings.formName, formName))
+      .limit(1)
+    return (settings as FormSettingsData) ?? null
+  } catch (error) {
+    console.error(`Error fetching form settings for ${formName}:`, error)
+    return null
+  }
+}
+
+export async function upsertFormSettings(
+  formName: string,
+  data: UpsertFormSettingsInput,
+): Promise<FormSettingsResult> {
+  try {
+    const existing = await getFormSettings(formName)
+
+    if (existing) {
+      const [updated] = await db
+        .update(formSettings)
+        .set({
+          ...data,
+          updatedAt: new Date().toISOString(),
+        })
+        .where(eq(formSettings.formName, formName))
+        .returning()
+      return { success: true, settings: updated as FormSettingsData }
+    }
+
+    const [created] = await db
+      .insert(formSettings)
+      .values({
+        formName,
+        webhookUrl: data.webhookUrl ?? null,
+        webhookEnabled: data.webhookEnabled ?? false,
+        notificationEmails: data.notificationEmails ?? null,
+      })
+      .returning()
+    return { success: true, settings: created as FormSettingsData }
+  } catch (error) {
+    console.error(`Error upserting form settings for ${formName}:`, error)
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to save form settings',
+    }
+  }
+}
+
+export async function getAllFormSettings(): Promise<FormSettingsData[]> {
+  try {
+    const settings = await db.select().from(formSettings)
+    return settings as FormSettingsData[]
+  } catch (error) {
+    console.error('Error fetching all form settings:', error)
+    return []
+  }
+}
+
+export async function testFormWebhook(
+  formName: string,
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    const settings = await getFormSettings(formName)
+    if (!settings?.webhookUrl) {
+      return { success: false, error: 'No webhook URL configured' }
+    }
+
+    const formData = new URLSearchParams()
+    formData.append('form_name', formName)
+    formData.append('test', 'true')
+    formData.append('message', 'This is a test webhook from BetterStart')
+    formData.append('timestamp', new Date().toISOString())
+
+    const response = await fetch(settings.webhookUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: formData.toString(),
+    })
+
+    if (!response.ok) {
+      return {
+        success: false,
+        error: `Webhook returned status ${response.status}`,
+      }
+    }
+
+    return { success: true }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to send test webhook',
+    }
+  }
+}

package/templates/init/lib/actions/profile.ts

@@ -0,0 +1,62 @@
+'use server'
+
+import { auth } from '@cms/auth'
+import { getSession } from '@cms/auth/middleware'
+import db from '@cms/db'
+import { user } from '@cms/db/schema'
+import { eq } from 'drizzle-orm'
+
+export interface UpdateEmailResult {
+  success: boolean
+  error?: string
+}
+
+/**
+ * Update the current user's email address.
+ * Requires the current password for verification.
+ */
+export async function updateEmail(
+  newEmail: string,
+  currentPassword: string
+): Promise<UpdateEmailResult> {
+  try {
+    const session = await getSession()
+    if (!session?.user) {
+      return { success: false, error: 'Not authenticated' }
+    }
+
+    // Verify current password
+    const verification = await auth.api.signInEmail({
+      body: { email: session.user.email, password: currentPassword },
+      asResponse: false,
+    })
+
+    if (!verification?.user) {
+      return { success: false, error: 'Incorrect password' }
+    }
+
+    // Check if new email is already taken
+    const existing = await db
+      .select({ id: user.id })
+      .from(user)
+      .where(eq(user.email, newEmail))
+      .limit(1)
+
+    if (existing.length > 0) {
+      return { success: false, error: 'Email already in use' }
+    }
+
+    // Update the email
+    await db
+      .update(user)
+      .set({ email: newEmail, updatedAt: new Date() })
+      .where(eq(user.id, session.user.id))
+
+    return { success: true }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to update email',
+    }
+  }
+}