@betterstart/cli 0.1.69 → 0.1.70

package/templates/init/pages/users/users-table.tsx

@@ -0,0 +1,219 @@
+'use client'
+
+import { authClient } from '@cms/auth/client'
+import { Button } from '@cms/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@cms/components/ui/select'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@cms/components/ui/table'
+import { useUsers } from '@cms/hooks/use-users'
+import type { UserData } from '@cms/types/auth'
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+  type VisibilityState,
+} from '@tanstack/react-table'
+import { parseAsInteger, useQueryState } from 'nuqs'
+import * as React from 'react'
+
+const PAGE_SIZE_OPTIONS = [
+  { value: '10', label: '10' },
+  { value: '20', label: '20' },
+  { value: '50', label: '50' },
+  { value: '100', label: '100' },
+  { value: 'all', label: 'All' },
+]
+
+interface UsersTableProps<TValue> {
+  columns: ColumnDef<UserData, TValue>[]
+}
+
+export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
+  const { data: session } = authClient.useSession()
+  const { data, error, isPending } = useUsers()
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+  const [pageIndex, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0))
+  const [pageSize, setPageSize] = useQueryState('size', parseAsInteger.withDefault(20))
+
+  const effectivePageSize = pageSize === -1 ? Number.MAX_SAFE_INTEGER : pageSize
+
+  const handlePageSizeChange = React.useCallback(
+    (value: string) => {
+      React.startTransition(() => {
+        if (value === 'all') {
+          setPageSize(-1)
+        } else {
+          setPageSize(Number(value))
+        }
+        setPageIndex(0)
+      })
+    },
+    [setPageSize, setPageIndex],
+  )
+
+  const handlePaginationChange = React.useCallback(
+    (
+      updater:
+        | { pageIndex: number; pageSize: number }
+        | ((old: { pageIndex: number; pageSize: number }) => {
+            pageIndex: number
+            pageSize: number
+          }),
+    ) => {
+      const currentPagination = { pageIndex, pageSize: effectivePageSize }
+      const newPagination = typeof updater === 'function' ? updater(currentPagination) : updater
+      React.startTransition(() => {
+        setPageIndex(newPagination.pageIndex)
+      })
+    },
+    [pageIndex, effectivePageSize, setPageIndex],
+  )
+
+  const table = useReactTable({
+    data: data?.users ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: handlePaginationChange,
+    meta: {
+      currentUser: session?.user
+        ? {
+            id: session.user.id,
+            email: session.user.email,
+            name: session.user.name,
+            image: session.user.image,
+            role: (session.user as { role?: string }).role || 'member',
+          }
+        : null,
+    },
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      pagination: {
+        pageIndex,
+        pageSize: effectivePageSize,
+      },
+    },
+  })
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-card border overflow-hidden rounded-lg">
+        <Table>
+          <TableHeader className="bg-secondary">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isPending ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <div className="text-muted-foreground">Loading users...</div>
+                </TableCell>
+              </TableRow>
+            ) : error ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <div className="text-destructive">Error: {error.message}</div>
+                </TableCell>
+              </TableRow>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No users found.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">Rows per page</span>
+          <Select
+            value={pageSize === -1 ? 'all' : String(pageSize)}
+            onValueChange={handlePageSizeChange}
+          >
+            <SelectTrigger className="w-[100px] h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PAGE_SIZE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <div className="text-sm text-muted-foreground">
+            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/init/types/auth.ts

@@ -0,0 +1,78 @@
+export interface AuthUser {
+  id: string
+  email: string
+  name: string
+  emailVerified: boolean
+  image: string | null
+  role: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface AuthSession {
+  user: AuthUser
+  isAuthenticated: boolean
+}
+
+export enum UserRole {
+  ADMIN = 'admin',
+  EDITOR = 'editor',
+  MEMBER = 'member',
+}
+
+export interface UserWithRole extends AuthUser {
+  role: UserRole
+}
+
+/** Type guard to check if a value is a valid UserRole */
+export function isUserRole(value: unknown): value is UserRole {
+  return typeof value === 'string' && Object.values(UserRole).includes(value as UserRole)
+}
+
+/** Check if user has one of the allowed roles */
+export function hasRequiredRole(userRole: UserRole, allowedRoles: UserRole[]): boolean {
+  return allowedRoles.includes(userRole)
+}
+
+export interface AuthState {
+  user: AuthUser | null
+  loading: boolean
+  error: Error | null
+}
+
+export interface UserData {
+  id: string
+  email: string
+  name: string
+  emailVerified: boolean
+  createdAt: string
+  updatedAt: string
+  role: string
+}
+
+export interface UsersResponse {
+  users: UserData[]
+  total: number
+}
+
+export interface CreateUserInput {
+  email: string
+  name: string
+  password: string
+}
+
+export interface CreateUserResult {
+  success: boolean
+  error?: string
+  user?: UserData
+}
+
+export interface UpdateUserRoleInput {
+  userId: string
+  role: UserRole
+}
+
+export interface UpdateUserRoleResult {
+  success: boolean
+  error?: string
+}

package/templates/init/types/index.ts

@@ -0,0 +1,79 @@
+export * from './auth'
+
+/** Markdown editor component types */
+export interface MDXComponent {
+  name: string
+  snippet: string
+  category: string
+}
+
+export interface MarkdownEditorProps {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  componentSnippets: Record<string, MDXComponent[]>
+}
+
+/** Upload types */
+export interface UploadedFile {
+  key: string
+  url: string
+  filename: string
+  size: number
+  contentType: string
+}
+
+export interface UploadFileResult {
+  success: boolean
+  error?: string
+  files?: UploadedFile[]
+}
+
+export interface UploadProgress {
+  filename: string
+  progress: number
+  loaded: number
+  total: number
+}
+
+/** API response types */
+export interface ApiResponse<T = unknown> {
+  success: boolean
+  data?: T
+  error?: string
+  message?: string
+}
+
+/** Database response types */
+export interface PaginationParams {
+  page: number
+  limit: number
+  sortBy?: string
+  sortOrder?: 'asc' | 'desc'
+}
+
+export interface PaginatedResponse<T> {
+  data: T[]
+  total: number
+  page: number
+  limit: number
+  totalPages: number
+}
+
+/** TanStack Table meta augmentation */
+declare module '@tanstack/react-table' {
+  // biome-ignore lint/correctness/noUnusedVariables: augmenting module
+  interface TableMeta<TData extends import('@tanstack/react-table').RowData> {
+    reorderMode?: boolean
+    onMoveRow?: (id: number, direction: 'up' | 'down') => void
+    currentUser?: {
+      id: string
+      email: string
+      name: string
+      image?: string | null
+      role: string
+    } | null
+  }
+}

package/templates/init/types/table-meta.ts

@@ -0,0 +1,16 @@
+import type { RowData } from '@tanstack/react-table'
+
+declare module '@tanstack/react-table' {
+  // biome-ignore lint/correctness/noUnusedVariables: augmenting module
+  interface TableMeta<TData extends RowData> {
+    reorderMode?: boolean
+    onMoveRow?: (id: number, direction: 'up' | 'down') => void
+    currentUser?: {
+      id: string
+      email: string
+      name: string
+      image?: string | null
+      role: string
+    } | null
+  }
+}

package/templates/init/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/init/utils/mailchimp.ts

@@ -0,0 +1,39 @@
+import mailchimp from '@mailchimp/mailchimp_marketing'
+
+if (process.env.BETTERSTART_MAILCHIMP_API_KEY && process.env.BETTERSTART_MAILCHIMP_SERVER_PREFIX) {
+  mailchimp.setConfig({
+    apiKey: process.env.BETTERSTART_MAILCHIMP_API_KEY,
+    server: process.env.BETTERSTART_MAILCHIMP_SERVER_PREFIX
+  })
+}
+
+/**
+ * Add an email address to the Mailchimp audience (fire-and-forget, non-blocking)
+ * Follows the same pattern as sendWebhook() in utils/webhook.ts
+ */
+export function addToMailchimpAudience(email: string): void {
+  if (
+    !process.env.BETTERSTART_MAILCHIMP_API_KEY ||
+    !process.env.BETTERSTART_MAILCHIMP_SERVER_PREFIX ||
+    !process.env.BETTERSTART_MAILCHIMP_AUDIENCE_ID
+  )
+    return
+
+  ;(async () => {
+    try {
+      await mailchimp.lists.addListMember(process.env.BETTERSTART_MAILCHIMP_AUDIENCE_ID!, {
+        email_address: email,
+        status: 'subscribed' as const,
+        merge_fields: {}
+      })
+    } catch (error: unknown) {
+      // Silently ignore "Member Exists" (user re-submitting form)
+      if (
+        (error as { response?: { body?: { title?: string } } })?.response?.body?.title ===
+        'Member Exists'
+      )
+        return
+      console.error('Failed to add to Mailchimp audience:', error)
+    }
+  })()
+}

package/templates/init/utils/seo.ts

@@ -0,0 +1,90 @@
+import type { Metadata } from 'next'
+
+interface CreateMetadataOptions {
+  title: string
+  description: string
+  path?: string
+  ogImage?: string
+  noIndex?: boolean
+}
+
+/**
+ * Create consistent Next.js metadata for CMS-generated pages.
+ * Use this in page.tsx files for entities that have public-facing pages.
+ */
+export function createMetadata({
+  title,
+  description,
+  path,
+  ogImage,
+  noIndex = false,
+}: CreateMetadataOptions): Metadata {
+  const metadata: Metadata = {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: 'website',
+      ...(ogImage && { images: [{ url: ogImage }] }),
+    },
+    twitter: {
+      card: ogImage ? 'summary_large_image' : 'summary',
+      title,
+      description,
+      ...(ogImage && { images: [ogImage] }),
+    },
+  }
+
+  if (path) {
+    metadata.alternates = { canonical: path }
+  }
+
+  if (noIndex) {
+    metadata.robots = { index: false, follow: false }
+  }
+
+  return metadata
+}
+
+/**
+ * Generate JSON-LD structured data for a blog post / article.
+ */
+export function generateArticleSchema({
+  title,
+  description,
+  url,
+  imageUrl,
+  datePublished,
+  dateModified,
+  authorName,
+}: {
+  title: string
+  description: string
+  url: string
+  imageUrl?: string
+  datePublished: string
+  dateModified?: string
+  authorName?: string
+}) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: title,
+    description,
+    url,
+    ...(imageUrl && { image: imageUrl }),
+    datePublished,
+    ...(dateModified && { dateModified }),
+    ...(authorName && {
+      author: { '@type': 'Person', name: authorName },
+    }),
+  }
+}
+
+/**
+ * Serialize a JSON-LD schema object to a string for embedding in a script tag.
+ */
+export function schemaToJson(schema: Record<string, unknown>): string {
+  return JSON.stringify(schema)
+}

package/templates/init/utils/validation.ts

@@ -0,0 +1,105 @@
+export interface FileValidationConfig {
+  maxSizeInBytes?: number
+  allowedTypes?: string[]
+  maxFiles?: number
+}
+
+export interface FileValidationError {
+  filename: string
+  error: string
+}
+
+export interface FileValidationResult {
+  valid: boolean
+  errors: FileValidationError[]
+}
+
+const DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB
+const DEFAULT_MAX_FILES = 10
+
+function isFileTypeAllowed(file: File, allowedTypes: string[]): boolean {
+  for (const type of allowedTypes) {
+    if (type.endsWith('/*')) {
+      const prefix = type.slice(0, -1)
+      if (file.type.startsWith(prefix)) return true
+    } else if (type.startsWith('.')) {
+      if (file.name.toLowerCase().endsWith(type.toLowerCase())) return true
+    } else {
+      if (file.type === type) return true
+    }
+  }
+  return false
+}
+
+/**
+ * Validate an array of files against size, type, and count constraints.
+ */
+export function validateFiles(
+  files: File[],
+  config: FileValidationConfig = {},
+): FileValidationResult {
+  const { maxSizeInBytes = DEFAULT_MAX_SIZE, allowedTypes, maxFiles = DEFAULT_MAX_FILES } = config
+
+  const errors: FileValidationError[] = []
+
+  if (files.length > maxFiles) {
+    errors.push({
+      filename: '',
+      error: `Too many files. Maximum is ${maxFiles}.`,
+    })
+  }
+
+  for (const file of files) {
+    if (file.size > maxSizeInBytes) {
+      const maxMB = Math.round(maxSizeInBytes / (1024 * 1024))
+      errors.push({
+        filename: file.name,
+        error: `File exceeds maximum size of ${maxMB}MB.`,
+      })
+    }
+
+    if (allowedTypes && allowedTypes.length > 0 && !isFileTypeAllowed(file, allowedTypes)) {
+      errors.push({
+        filename: file.name,
+        error: `File type "${file.type || 'unknown'}" is not allowed.`,
+      })
+    }
+  }
+
+  return { valid: errors.length === 0, errors }
+}
+
+/**
+ * Format bytes to a human-readable string.
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(1024))
+  return `${(bytes / 1024 ** i).toFixed(i === 0 ? 0 : 1)} ${units[i]}`
+}
+
+/**
+ * Check if a string is a valid URL.
+ */
+export function isValidUrl(str: string): boolean {
+  try {
+    new URL(str)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Slugify a string for use in URLs.
+ */
+export function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}

package/templates/init/utils/webhook.ts

@@ -0,0 +1,28 @@
+/**
+ * Send payload to webhook URL (fire-and-forget, non-blocking)
+ * @param webhookUrl - The webhook URL to send data to
+ * @param payload - The form data to send as URL-encoded
+ */
+export function sendWebhook(
+  webhookUrl: string | null | undefined,
+  payload: Record<string, unknown>,
+): void {
+  if (!webhookUrl) return // Fire-and-forget: runs in background, doesn't block
+  ;(async () => {
+    try {
+      const formData = new URLSearchParams()
+      for (const [key, value] of Object.entries(payload)) {
+        if (value === null || value === undefined) continue
+        const stringValue = typeof value === 'object' ? JSON.stringify(value) : String(value)
+        formData.append(key, stringValue)
+      }
+      await fetch(webhookUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: formData.toString(),
+      })
+    } catch (error) {
+      console.error('Webhook failed:', error)
+    }
+  })()
+}