create-vexcms 0.0.19 → 0.1.0-alpha.2

package/templates/base-nextjs/src/app/admin/RichTextFieldWithMedia.tsx

@@ -1,101 +0,0 @@
-"use client"
-
-import { PlateEditorField } from "@vexcms/richtext/editor"
-import { defaultFeatures } from "@vexcms/richtext/editor"
-import { useMediaPickerState } from "@vexcms/admin-next"
-
-/**
- * Inner component that always calls useMediaPickerState (no conditional hook).
- */
-function WithMedia({
-  field,
-  fieldDef,
-  name,
-  mediaCollection,
-  generateUploadUrl,
-  createMediaDocument,
-  onUploadNew,
-}: {
-  field: any
-  fieldDef: any
-  name: string
-  mediaCollection: string
-  generateUploadUrl?: () => Promise<string>
-  createMediaDocument?: (props: { collectionSlug: string; fields: Record<string, unknown> }) => Promise<string>
-  onUploadNew?: () => void
-}) {
-  const mediaPicker = useMediaPickerState({
-    collectionSlug: mediaCollection,
-    searchField: "filename",
-    searchIndexName: "search_filename",
-    selectedId: null,
-  })
-
-  return (
-    <PlateEditorField
-      value={field.state.value}
-      onChange={(val: any) => field.handleChange(val)}
-      name={name}
-      label={fieldDef.label ?? name}
-      description={fieldDef.description}
-      features={defaultFeatures}
-      mediaCollection={mediaCollection}
-      mediaResults={mediaPicker.results}
-      mediaSearchTerm={mediaPicker.searchTerm}
-      onMediaSearchChange={mediaPicker.setSearchTerm}
-      mediaCanLoadMore={mediaPicker.canLoadMore}
-      onMediaLoadMore={mediaPicker.loadMore}
-      mediaIsLoading={mediaPicker.isLoading}
-      onUploadNew={onUploadNew}
-      generateUploadUrl={generateUploadUrl}
-      createMediaDocument={createMediaDocument}
-    />
-  )
-}
-
-/**
- * Wrapper that creates media picker state for a richtext field
- * when mediaCollection is configured.
- */
-export function RichTextFieldWithMedia({
-  field,
-  fieldDef,
-  name,
-  generateUploadUrl,
-  createMediaDocument,
-  onUploadNew,
-}: {
-  field: any
-  fieldDef: any
-  name: string
-  generateUploadUrl?: () => Promise<string>
-  createMediaDocument?: (props: { collectionSlug: string; fields: Record<string, unknown> }) => Promise<string>
-  onUploadNew?: () => void
-}) {
-  const mediaCollection = fieldDef?.mediaCollection as string | undefined
-
-  if (mediaCollection) {
-    return (
-      <WithMedia
-        field={field}
-        fieldDef={fieldDef}
-        name={name}
-        mediaCollection={mediaCollection}
-        generateUploadUrl={generateUploadUrl}
-        createMediaDocument={createMediaDocument}
-        onUploadNew={onUploadNew}
-      />
-    )
-  }
-
-  return (
-    <PlateEditorField
-      value={field.state.value}
-      onChange={(val: any) => field.handleChange(val)}
-      name={name}
-      label={fieldDef.label ?? name}
-      description={fieldDef.description}
-      features={defaultFeatures}
-    />
-  )
-}

package/templates/base-nextjs/src/app/admin/[[...path]]/page.tsx

@@ -1,15 +0,0 @@
-import { sanitizeConfigForClient } from "@vexcms/core"
-
-import config from "~/../vex.config"
-import { AdminPageWrapper } from "../AdminPageWrapper"
-
-const clientConfig = sanitizeConfigForClient(config)
-
-interface Props {
-  params: Promise<{ path?: string[] }>
-}
-
-export default async function Page({ params }: Props) {
-  const { path } = await params
-  return <AdminPageWrapper config={clientConfig} path={path} />
-}

package/templates/base-nextjs/src/app/admin/layout.tsx

@@ -1,51 +0,0 @@
-import { SidebarTrigger } from "@vexcms/ui"
-import { checkAdminAccess, sanitizeConfigForClient } from "@vexcms/core"
-import { redirect } from "next/navigation"
-
-import config from "~/../vex.config"
-import { getCurrentUser } from "~/auth/serverUtils"
-import { access } from "~/vexcms/access"
-import { AdminLayoutWrapper } from "./AdminLayoutWrapper"
-
-const clientConfig = sanitizeConfigForClient(config)
-
-export default async function AdminLayout({ children }: { children: React.ReactNode }) {
-  const user = await getCurrentUser()
-
-  // No user — redirect to sign in
-  if (!user) {
-    redirect("/auth/sign-in")
-  }
-
-  const userRoles = Array.isArray(user.role) ? user.role : [user.role].filter(Boolean)
-
-  // Check admin panel access
-  const hasAccess = checkAdminAccess({
-    access,
-    user: user as Record<string, any>,
-    userRoles,
-  })
-
-  if (!hasAccess) {
-    redirect("/?error=unauthorized")
-  }
-
-  const permissionUser = {
-    id: user.id,
-    roles: userRoles,
-    name: user.name,
-    email: user.email,
-    avatar: user.image,
-  }
-
-  return (
-    <AdminLayoutWrapper
-      config={clientConfig}
-      user={{ name: user.name, avatar: user.image, email: user.email }}
-      permissionUser={permissionUser}
-    >
-      <SidebarTrigger />
-      <div className="flex flex-col flex-1 min-h-0 overflow-hidden">{children}</div>
-    </AdminLayoutWrapper>
-  )
-}

package/templates/base-nextjs/src/components/providers/theme.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import * as React from "react"
-
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}

package/templates/base-nextjs/src/components/ui/theme-toggle.tsx

@@ -1,67 +0,0 @@
-"use client"
-
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
-import { type ComponentPropsWithRef } from "react"
-
-import { Button } from "~/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu"
-
-export function ThemeToggle({ ...divProps }: ComponentPropsWithRef<"div">) {
-  const { resolvedTheme, setTheme, theme } = useTheme()
-
-  return (
-    <div {...divProps}>
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          render={<Button size="icon" variant="outline" />}
-          suppressHydrationWarning
-        >
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuCheckboxItem
-            checked={Boolean(theme && theme === "light")}
-            disabled={Boolean(theme && theme === "light")}
-            onCheckedChange={(val) => {
-              if (val) {
-                setTheme("light")
-              }
-            }}
-          >
-            Light
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={Boolean(theme && theme === "dark")}
-            disabled={Boolean(theme && theme === "dark")}
-            onCheckedChange={(val) => {
-              if (val) {
-                setTheme("dark")
-              }
-            }}
-          >
-            Dark
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={Boolean(theme && theme === "system")}
-            disabled={Boolean(theme && theme === "system")}
-            onCheckedChange={(val) => {
-              if (val) {
-                setTheme("system")
-              }
-            }}
-          >
-            System
-          </DropdownMenuCheckboxItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}

package/templates/base-nextjs/src/db/types.ts

@@ -1,6 +0,0 @@
-import { type Doc, type Id } from "@convex/_generated/dataModel"
-
-import { type TABLE_SLUG_USERS } from "./constants"
-
-export type User = Doc<typeof TABLE_SLUG_USERS>
-export type UserID = Id<typeof TABLE_SLUG_USERS>

package/templates/base-nextjs/src/vexcms/access.ts

@@ -1,44 +0,0 @@
-import { defineAccess } from "@vexcms/core"
-
-import { USER_ROLES } from "~/db/constants"
-import { users } from "~/vexcms/collections/users"
-
-/**
- * Access control configuration for the admin panel.
- *
- * - `admin` on each role controls whether that role can access the admin panel.
- * - Resource permissions control CRUD access per collection.
- * - Add your own collections to `resources` for autocomplete in `permissions`.
- *
- * @see https://vexcms.dev/docs/access-control
- */
-export const access = defineAccess({
-  roles: [USER_ROLES.admin, USER_ROLES.editor, USER_ROLES.user],
-  adminRoles: [USER_ROLES.admin],
-  resources: [users],
-  userCollection: users,
-  permissions: {
-    admin: {
-      admin: true,
-      user: true,
-    },
-    editor: {
-      admin: true,
-      user: {
-        create: false,
-        delete: false,
-        read: true,
-        update: false,
-      },
-    },
-    user: {
-      admin: false,
-      user: {
-        create: false,
-        delete: false,
-        read: ({ data, user }) => data._id === user._id,
-        update: ({ data, user }) => data._id === user._id,
-      },
-    },
-  },
-})

package/templates/base-nextjs/src/vexcms/auth.ts

@@ -1,4 +0,0 @@
-import { betterAuthOptions } from "@convex/auth/options"
-import { vexBetterAuth } from "@vexcms/better-auth"
-
-export const auth = vexBetterAuth({ config: betterAuthOptions })

package/templates/base-nextjs/src/vexcms/collections/media.ts

@@ -1,15 +0,0 @@
-import { defineMediaCollection } from "@vexcms/core"
-
-import { TABLE_SLUG_MEDIA } from "~/db/constants"
-
-export const media = defineMediaCollection({
-  slug: TABLE_SLUG_MEDIA,
-  admin: {
-    group: "Media",
-    useAsTitle: "filename",
-  },
-  labels: {
-    plural: "Media",
-    singular: "Media",
-  },
-})

package/templates/base-nextjs/vex.config.ts

@@ -1,25 +0,0 @@
-import { defineConfig } from "@vexcms/core"
-import { convexFileStorage } from "@vexcms/file-storage-convex"
-
-import { auth } from "~/vexcms/auth"
-import { access } from "~/vexcms/access"
-
-export default defineConfig({
-  access,
-  admin: {
-    meta: {
-      titleSuffix: " | Admin",
-    },
-    sidebar: {
-      hideGlobals: true,
-    },
-    user: "user",
-  },
-  auth,
-  basePath: "/admin",
-  collections: [],
-  media: {
-    collections: [],
-    storageAdapter: convexFileStorage(),
-  },
-})

package/templates/marketing-site/src/app/(frontend)/preview/[slug]/PreviewPageContent.tsx

@@ -1,55 +0,0 @@
-"use client"
-
-import { RenderBlocks, useVexPreview } from "@vexcms/ui"
-import { convexQuery } from "@convex-dev/react-query"
-import { useQuery } from "@tanstack/react-query"
-import { anyApi } from "convex/server"
-
-import { blockComponents } from "~/vexcms/blocks"
-
-/**
- * Client component for live preview using TanStack Query.
- * initialData from server fetch eliminates loading flash.
- * The reactive subscription picks up draft snapshot changes in real-time.
- */
-export function PreviewPageContent({
-  slug,
-  initialData,
-}: {
-  slug: string
-  initialData?: Record<string, unknown> | null
-}) {
-  const { data: page } = useQuery({
-    ...convexQuery(anyApi.pages.getBySlug, {
-      slug,
-      _vexDrafts: "snapshot",
-    }),
-    initialData: initialData ?? undefined,
-  })
-
-  // Notify admin panel's live preview when data changes
-  useVexPreview({ data: page })
-
-  if (page === null || page === undefined) {
-    return (
-      <div className="mx-auto max-w-3xl px-4 py-12">
-        <h1 className="text-2xl font-bold">Preview not found</h1>
-        <p className="mt-2 text-muted-foreground">
-          No page with slug &ldquo;{slug}&rdquo; exists.
-        </p>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      {/* Preview banner */}
-      <div className="fixed top-0 left-0 right-0 z-50 border-b border-yellow-200 bg-yellow-50 px-4 py-2 text-center text-sm text-yellow-800">
-        Preview Mode — This page may not be published yet.
-      </div>
-      <div className="pt-10">
-        <RenderBlocks blocks={page.content} components={blockComponents} />
-      </div>
-    </>
-  )
-}

package/templates/marketing-site/src/app/(frontend)/preview/[slug]/page.tsx

@@ -1,27 +0,0 @@
-import { fetchQuery } from "convex/nextjs"
-
-import { api } from "@convex/_generated/api"
-
-import { normalizeSlug } from "~/lib/utils"
-import { PreviewPageContent } from "./PreviewPageContent"
-
-export default async function PreviewPage({
-  params,
-}: {
-  params: Promise<{ slug: string }>
-}) {
-  const { slug } = await params
-  const normalized = normalizeSlug(slug)
-
-  let initialData: Record<string, unknown> | null = null
-  try {
-    initialData = await fetchQuery(api.pages.getBySlug, {
-      slug: normalized,
-      _vexDrafts: "snapshot" as any,
-    })
-  } catch {
-    // Fall back to client-only fetch
-  }
-
-  return <PreviewPageContent slug={normalized} initialData={initialData} />
-}

package/templates/marketing-site/src/app/(frontend)/preview/layout.tsx

@@ -1,18 +0,0 @@
-import { ThemeInjector } from "~/components/ThemeInjector"
-import { ThemeStyle } from "~/components/ThemeStyle"
-
-export default function PreviewLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
-  return (
-    <>
-      {/* Server-rendered draft theme CSS — eliminates flash on preview load */}
-      <ThemeStyle drafts />
-      {/* Client-side theme injector — picks up real-time draft changes via snapshot */}
-      <ThemeInjector siteSettingsSlug="site_settings" drafts="snapshot" />
-      {children}
-    </>
-  )
-}

package/templates/marketing-site/src/app/admin/AdminLayoutWrapper.tsx

@@ -1,71 +0,0 @@
-"use client"
-
-import { useCallback } from "react"
-import { useMutation, useQuery } from "convex/react"
-import { useRouter } from "next/navigation"
-import { AdminLayout, OnboardingTour, useOnboardingTour } from "@vexcms/admin-next"
-import type { PermissionUser } from "@vexcms/admin-next"
-import type { ClientVexConfig } from "@vexcms/core"
-import { api } from "@convex/_generated/api"
-import { access } from "~/vexcms/access"
-
-/**
- * Client wrapper that provides the access config directly (not through RSC serialization).
- * Includes the onboarding tour for the marketing site template.
- */
-export function AdminLayoutWrapper({
-  config,
-  user,
-  permissionUser,
-  children,
-}: {
-  config: ClientVexConfig
-  user?: { name: string; email: string; avatar?: string }
-  permissionUser?: PermissionUser
-  children: React.ReactNode
-}) {
-  const router = useRouter()
-  const onboardingStatus = useQuery(api.vex.firstUser.getOnboardingStatus)
-  const completeOnboarding = useMutation(api.vex.firstUser.completeOnboarding)
-  const resetOnboarding = useMutation(api.vex.firstUser.resetOnboarding)
-
-  const handleComplete = useCallback(() => {
-    completeOnboarding()
-  }, [completeOnboarding])
-
-  const handleReset = useCallback(() => {
-    resetOnboarding()
-  }, [resetOnboarding])
-
-  const navigate = useCallback((path: string) => {
-    router.push(path)
-  }, [router])
-
-  const { showTour, completeTour } = useOnboardingTour({
-    config,
-    isComplete: onboardingStatus?.complete ?? true,
-    onComplete: handleComplete,
-    onReset: handleReset,
-  })
-
-  // Use the first collection as the example for the tour
-  const exampleCollection = config.collections[0]?.slug
-
-  return (
-    <AdminLayout
-      config={config}
-      user={user}
-      permissionUser={permissionUser}
-      access={access}
-    >
-      {children}
-      <OnboardingTour
-        active={showTour}
-        onComplete={completeTour}
-        basePath={config.basePath}
-        exampleCollection={exampleCollection}
-        navigate={navigate}
-      />
-    </AdminLayout>
-  )
-}

package/templates/marketing-site/src/components/ThemeInjector.tsx

@@ -1,128 +0,0 @@
-"use client"
-
-import { useQuery } from "convex/react"
-import { useVexPreview } from "@vexcms/ui"
-import { anyApi } from "convex/server"
-
-/**
- * CSS variable name mapping from camelCase field names to CSS custom property names.
- */
-const FIELD_TO_CSS_VAR: Record<string, string> = {
-  background: "background",
-  foreground: "foreground",
-  card: "card",
-  cardForeground: "card-foreground",
-  popover: "popover",
-  popoverForeground: "popover-foreground",
-  primary: "primary",
-  primaryForeground: "primary-foreground",
-  secondary: "secondary",
-  secondaryForeground: "secondary-foreground",
-  muted: "muted",
-  mutedForeground: "muted-foreground",
-  accent: "accent",
-  accentForeground: "accent-foreground",
-  destructive: "destructive",
-  destructiveForeground: "destructive-foreground",
-  border: "border",
-  input: "input",
-  ring: "ring",
-  chart1: "chart-1",
-  chart2: "chart-2",
-  chart3: "chart-3",
-  chart4: "chart-4",
-  chart5: "chart-5",
-  sidebar: "sidebar",
-  sidebarForeground: "sidebar-foreground",
-  sidebarPrimary: "sidebar-primary",
-  sidebarPrimaryForeground: "sidebar-primary-foreground",
-  sidebarAccent: "sidebar-accent",
-  sidebarAccentForeground: "sidebar-accent-foreground",
-  sidebarBorder: "sidebar-border",
-  sidebarRing: "sidebar-ring",
-}
-
-function buildCSSVars(colors: Record<string, unknown> | null | undefined): string {
-  if (!colors) return ""
-
-  const vars: string[] = []
-  for (const [fieldName, cssVar] of Object.entries(FIELD_TO_CSS_VAR)) {
-    const value = colors[fieldName]
-    if (typeof value === "string" && value) {
-      vars.push(`  --${cssVar}: ${value};`)
-    }
-  }
-  return vars.join("\n")
-}
-
-/**
- * Client component that reads the active theme from the site_settings global
- * and injects CSS variables for light and dark modes.
- *
- * @param props.siteSettingsSlug - The global slug for site settings
- * @param props.drafts - When "snapshot", reads draft/preview data instead of published
- */
-export function ThemeInjector({
-  siteSettingsSlug,
-  drafts,
-}: {
-  siteSettingsSlug: string
-  drafts?: "snapshot" | false
-}) {
-  // Use globals.get which supports draft awareness
-  const settingsDoc = useQuery(
-    anyApi.vex.globals?.get,
-    {
-      globalSlug: siteSettingsSlug,
-      ...(drafts ? { _vexDrafts: drafts } : {}),
-    },
-  ) as Record<string, unknown> | null | undefined
-
-  const activeThemeId = settingsDoc?.activeTheme as string | undefined
-
-  // Fetch the active theme document
-  // In draft mode, use versioned query to pick up unpublished theme changes
-  const theme = useQuery(
-    drafts
-      ? anyApi.vex.versions?.getDocumentForEdit
-      : anyApi.vex.api.themes?.get,
-    activeThemeId
-      ? drafts
-        ? { collectionSlug: "themes", documentId: activeThemeId }
-        : { id: activeThemeId }
-      : "skip",
-  ) as Record<string, unknown> | null | undefined
-
-  // In draft mode, notify the admin panel when settings or theme data changes
-  // so the live preview spinner stops
-  useVexPreview({ data: drafts ? { settings: settingsDoc, theme } : undefined })
-
-  if (!theme) return null
-
-  const lightColors = theme.light as Record<string, unknown> | undefined
-  const darkColors = theme.dark as Record<string, unknown> | undefined
-
-  const lightVars = buildCSSVars(lightColors)
-  const darkVars = buildCSSVars(darkColors)
-
-  if (!lightVars && !darkVars) return null
-
-  const css = [
-    lightVars ? `:root {\n${lightVars}\n}` : "",
-    darkVars ? `.dark {\n${darkVars}\n}` : "",
-  ]
-    .filter(Boolean)
-    .join("\n\n")
-
-  const radius = theme.radius as string | undefined
-  const fontFamily = theme.fontFamily as string | undefined
-  const extraVars: string[] = []
-  if (radius) extraVars.push(`  --radius: ${radius};`)
-  if (fontFamily) extraVars.push(`  --font-sans: ${fontFamily};`)
-
-  const extraCSS = extraVars.length > 0 ? `\n:root {\n${extraVars.join("\n")}\n}` : ""
-
-  return (
-    <style dangerouslySetInnerHTML={{ __html: css + extraCSS }} />
-  )
-}