create-vexcms 0.0.20 → 0.1.0-alpha.2

package/templates/base-nextjs/src/components/component-example.tsx

@@ -1,474 +1,66 @@
-"use client"
+"use client";
 
-import {
-  BellIcon,
-  BluetoothIcon,
-  CreditCardIcon,
-  DownloadIcon,
-  EyeIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileTextIcon,
-  FolderIcon,
-  FolderOpenIcon,
-  FolderSearchIcon,
-  HelpCircleIcon,
-  KeyboardIcon,
-  LanguagesIcon,
-  LayoutIcon,
-  LogOutIcon,
-  MailIcon,
-  MonitorIcon,
-  MoonIcon,
-  MoreHorizontalIcon,
-  MoreVerticalIcon,
-  PaletteIcon,
-  PlusIcon,
-  SaveIcon,
-  SettingsIcon,
-  ShieldIcon,
-  SunIcon,
-  UserIcon,
-} from "lucide-react"
-import * as React from "react"
+import { ThemeToggle } from "@vexcms/react";
+import { TerminalIcon, UserIcon } from "lucide-react";
+import Link from "next/link";
 
-import { Example, ExampleWrapper } from "~/components/example"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "~/components/ui/alert-dialog"
-import { Badge } from "~/components/ui/badge"
-import { Button } from "~/components/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card"
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "~/components/ui/combobox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu"
-import { Field, FieldGroup, FieldLabel } from "~/components/ui/field"
-import { Input } from "~/components/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select"
-import { Textarea } from "~/components/ui/textarea"
-import { ThemeToggle } from "~/components/ui/theme-toggle"
+import { signOut, useSession } from "~/auth/client";
+import { Button } from "~/components/ui/button";
 
 export function ComponentExample() {
-  return (
-    <ExampleWrapper>
-      <ThemeToggle className="absolute w-md:top-10 right-10 top-2" />
-      <CardExample />
-      <FormExample />
-    </ExampleWrapper>
-  )
-}
+  const { data: session } = useSession();
 
-function CardExample() {
   return (
-    <Example className="items-center justify-center" title="Card">
-      <Card className="relative w-full max-w-sm overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
-        <img
-          alt="Photo by mymind on Unsplash"
-          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
-          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          title="Photo by mymind on Unsplash"
-        />
-        <CardHeader>
-          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
-          <CardDescription>
-            Switch to the improved way to explore your data, with natural language. Monitoring will
-            no longer be available on the Pro plan in November, 2025
-          </CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <AlertDialog>
-            <AlertDialogTrigger render={<Button />}>
-              <PlusIcon data-icon="inline-start" />
-              Show Dialog
-            </AlertDialogTrigger>
-            <AlertDialogContent size="sm">
-              <AlertDialogHeader>
-                <AlertDialogMedia>
-                  <BluetoothIcon />
-                </AlertDialogMedia>
-                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  Do you want to allow the USB accessory to connect to this device?
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
-                <AlertDialogAction>Allow</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-          <Badge className="ml-auto" variant="secondary">
-            Warning
-          </Badge>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
+    <div className="bg-background flex min-h-screen flex-col items-center justify-center gap-8 p-6 text-center">
+      <div className="absolute top-4 right-4 flex items-center gap-2">
+        {session?.user && (
+          <>
+            <div className="bg-muted flex size-8 items-center justify-center rounded-full">
+              <UserIcon className="text-muted-foreground size-4" />
+            </div>
+            <span className="text-sm font-medium">{session.user.name}</span>
+          </>
+        )}
+        <ThemeToggle />
+      </div>
 
-const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] as const
+      <div className="flex flex-col items-center gap-4">
+        <div className="bg-foreground text-background flex size-14 items-center justify-center rounded-2xl">
+          <TerminalIcon className="size-7" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h1 className="text-3xl font-bold tracking-tight">Vex CMS</h1>
+          <p className="text-muted-foreground max-w-sm text-base">
+            The CMS built for Convex. Real-time, type-safe, developer first.
+          </p>
+        </div>
+      </div>
 
-const roleItems = [
-  { label: "Developer", value: "developer" },
-  { label: "Designer", value: "designer" },
-  { label: "Manager", value: "manager" },
-  { label: "Other", value: "other" },
-]
+      <div className="flex gap-3">
+        {session?.user ? (
+          <div className="flex gap-4">
+            <Link href="/admin">
+              <Button>Admin</Button>
+            </Link>
+            <Button onClick={() => signOut()} variant="outline">
+              Sign out
+            </Button>
+          </div>
+        ) : (
+          <>
+            <Button nativeButton={false} render={<Link href="/auth/sign-up" />}>
+              Sign up
+            </Button>
+            <Button nativeButton={false} render={<Link href="/auth/sign-in" />} variant="outline">
+              Sign in
+            </Button>
+          </>
+        )}
+      </div>
 
-function FormExample() {
-  const [notifications, setNotifications] = React.useState({
-    email: true,
-    push: true,
-    sms: false,
-  })
-  const [theme, setTheme] = React.useState("light")
-
-  return (
-    <Example title="Form">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>User Information</CardTitle>
-          <CardDescription>Please fill in your details below</CardDescription>
-          <CardAction>
-            <DropdownMenu>
-              <DropdownMenuTrigger render={<Button size="icon" variant="ghost" />}>
-                <MoreVerticalIcon />
-                <span className="sr-only">More options</span>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56">
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>File</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <FileIcon />
-                    New File
-                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <FolderIcon />
-                    New Folder
-                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <FolderOpenIcon />
-                      Open Recent
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <FileCodeIcon />
-                            Project Alpha
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <FileCodeIcon />
-                            Project Beta
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <MoreHorizontalIcon />
-                              More Projects
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuItem>
-                                  <FileCodeIcon />
-                                  Project Gamma
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                  <FileCodeIcon />
-                                  Project Delta
-                                </DropdownMenuItem>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <FolderSearchIcon />
-                            Browse...
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <SaveIcon />
-                    Save
-                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <DownloadIcon />
-                    Export
-                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>View</DropdownMenuLabel>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.email}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        email: checked === true,
-                      })
-                    }
-                  >
-                    <EyeIcon />
-                    Show Sidebar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.sms}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        sms: checked === true,
-                      })
-                    }
-                  >
-                    <LayoutIcon />
-                    Show Status Bar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <PaletteIcon />
-                      Theme
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-                          <DropdownMenuRadioGroup onValueChange={setTheme} value={theme}>
-                            <DropdownMenuRadioItem value="light">
-                              <SunIcon />
-                              Light
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="dark">
-                              <MoonIcon />
-                              Dark
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="system">
-                              <MonitorIcon />
-                              System
-                            </DropdownMenuRadioItem>
-                          </DropdownMenuRadioGroup>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>Account</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <UserIcon />
-                    Profile
-                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CreditCardIcon />
-                    Billing
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <SettingsIcon />
-                      Settings
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <KeyboardIcon />
-                            Keyboard Shortcuts
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <LanguagesIcon />
-                            Language
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <BellIcon />
-                              Notifications
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuGroup>
-                                  <DropdownMenuLabel>Notification Types</DropdownMenuLabel>
-                                  <DropdownMenuCheckboxItem
-                                    checked={notifications.push}
-                                    onCheckedChange={(checked) =>
-                                      setNotifications({
-                                        ...notifications,
-                                        push: checked === true,
-                                      })
-                                    }
-                                  >
-                                    <BellIcon />
-                                    Push Notifications
-                                  </DropdownMenuCheckboxItem>
-                                  <DropdownMenuCheckboxItem
-                                    checked={notifications.email}
-                                    onCheckedChange={(checked) =>
-                                      setNotifications({
-                                        ...notifications,
-                                        email: checked === true,
-                                      })
-                                    }
-                                  >
-                                    <MailIcon />
-                                    Email Notifications
-                                  </DropdownMenuCheckboxItem>
-                                </DropdownMenuGroup>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <ShieldIcon />
-                            Privacy & Security
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <HelpCircleIcon />
-                    Help & Support
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <FileTextIcon />
-                    Documentation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <LogOutIcon />
-                    Sign Out
-                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="small-form-name">Name</FieldLabel>
-                  <Input id="small-form-name" placeholder="Enter your name" required />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="small-form-role">Role</FieldLabel>
-                  <Select defaultValue={null} items={roleItems}>
-                    <SelectTrigger id="small-form-role">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        {roleItems.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-              <Field>
-                <FieldLabel htmlFor="small-form-framework">Framework</FieldLabel>
-                <Combobox items={frameworks}>
-                  <ComboboxInput
-                    id="small-form-framework"
-                    placeholder="Select a framework"
-                    required
-                  />
-                  <ComboboxContent>
-                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
-                    <ComboboxList>
-                      {(item) => (
-                        <ComboboxItem key={item} value={item}>
-                          {item}
-                        </ComboboxItem>
-                      )}
-                    </ComboboxList>
-                  </ComboboxContent>
-                </Combobox>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="small-form-comments">Comments</FieldLabel>
-                <Textarea id="small-form-comments" placeholder="Add any additional comments" />
-              </Field>
-              <Field orientation="horizontal">
-                <Button type="submit">Submit</Button>
-                <Button type="button" variant="outline">
-                  Cancel
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </Example>
-  )
+      <code className="bg-muted text-muted-foreground rounded-lg px-4 py-2 font-mono text-sm">
+        npx create-vexcms@latest
+      </code>
+    </div>
+  );
 }

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

@@ -0,0 +1,13 @@
+import { api } from "@convex/_generated/api";
+
+import { fetchAuthQuery, getToken } from "~/auth/server";
+import { AuthProvider } from "~/context/AuthContext";
+
+export async function AuthServerProvider(props: { children: React.ReactNode }) {
+  const sessionToken = await getToken();
+  if (!sessionToken) {
+    return <AuthProvider value={{ user: null }}>{props.children}</AuthProvider>;
+  }
+  const auth = await fetchAuthQuery(api.auth.api.getUserOrg, {});
+  return <AuthProvider value={auth}>{props.children}</AuthProvider>;
+}

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

@@ -3,7 +3,12 @@
 import { type PropsWithChildren } from "react"
 
 import BetterAuthClientProvider from "~/auth/client"
+import ConvexClientProvider from "~/components/providers/convex"
 
 export default function ClientProviders({ children }: PropsWithChildren) {
-  return <BetterAuthClientProvider>{children}</BetterAuthClientProvider>
+  return (
+    <ConvexClientProvider>
+      <BetterAuthClientProvider>{children}</BetterAuthClientProvider>
+    </ConvexClientProvider>
+  )
 }

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

@@ -1,32 +1,64 @@
-"use client"
+"use client";
 
-import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react"
-import { ConvexQueryClient } from "@convex-dev/react-query"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { ConvexReactClient } from "convex/react"
-import { type ReactNode } from "react"
+import type { ReactNode } from "react";
 
-import { authClient } from "~/auth/client"
-import { env } from "~/env.mjs"
+import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConvexReactClient } from "convex/react";
 
-const convex = new ConvexReactClient(env.NEXT_PUBLIC_CONVEX_URL, {
-  expectAuth: true,
-})
-const convexQueryClient = new ConvexQueryClient(convex)
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      queryFn: convexQueryClient.queryFn(),
-      queryKeyHashFn: convexQueryClient.hashFn(),
+import { authClient } from "~/auth/client";
+import { env } from "~/env.mjs";
+
+function makeClients() {
+  const convex = new ConvexReactClient(env.NEXT_PUBLIC_CONVEX_URL, { expectAuth: true });
+  const convexQueryClient = new ConvexQueryClient(convex);
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        queryFn: convexQueryClient.queryFn(),
+        queryKeyHashFn: convexQueryClient.hashFn(),
+        // Deterministic: a thrown ConvexError re-fails identically, so retrying
+        // only delays the error reaching `error` (it sits in `failureReason`
+        // while retrying).
+        retry: false,
+        // Convex queries ride the Convex WebSocket, not `fetch`, so TanStack's
+        // `onlineManager` must never gate them: a paused query stays
+        // `status: "pending"` / `error: null` forever and ignores `retry`.
+        networkMode: "always",
+      },
     },
-  },
-})
-convexQueryClient.connect(queryClient)
+  });
+  convexQueryClient.connect(queryClient);
+  return { convex, queryClient };
+}
+
+let browserClients: ReturnType<typeof makeClients> | undefined;
 
+/**
+ * Wires Convex, TanStack Query, and Better Auth together for the app.
+ *
+ * Clients are module-level singletons connected synchronously so Convex
+ * reactive subscriptions are established before any query is added to the
+ * TanStack Query cache. See module-level comment above.
+ *
+ * @param props.children - The subtree that needs Convex and query access.
+ */
 export default function ConvexClientProvider({ children }: { children: ReactNode }) {
+  const { convex, queryClient } = getClients();
   return (
     <ConvexBetterAuthProvider authClient={authClient} client={convex}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </ConvexBetterAuthProvider>
-  )
+  );
+}
+
+function getClients() {
+  if (typeof window === "undefined") {
+    // Server: brand-new clients every request → no cross-request cache leak
+    return makeClients();
+  }
+  // Browser: singleton → preserves Convex WebSocket reactivity
+  browserClients ??= makeClients();
+  return browserClients;
 }

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

@@ -1,15 +1,18 @@
-import { NuqsAdapter } from "nuqs/adapters/next/app"
-import { type PropsWithChildren } from "react"
+import { ThemeProvider } from "@vexcms/react";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { type PropsWithChildren } from "react";
 
-import ConvexClientProvider from "./convex"
-import { ThemeProvider } from "./theme"
+import { AuthServerProvider } from "./auth";
+import ConvexClientProvider from "./convex";
 
 export default function ServerProviders({ children }: PropsWithChildren) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" disableTransitionOnChange enableSystem>
+    <ThemeProvider defaultTheme="system">
       <ConvexClientProvider>
-        <NuqsAdapter>{children}</NuqsAdapter>
+        <AuthServerProvider>
+          <NuqsAdapter>{children}</NuqsAdapter>
+        </AuthServerProvider>
       </ConvexClientProvider>
     </ThemeProvider>
-  )
+  );
 }