convex-cms 0.0.3 → 0.0.5-alpha.2

package/admin/src/pages/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared Page Components
+ *
+ * These pages contain all the business logic and UI for the admin interface.
+ * They are used by both CLI routes (TanStack Router) and embed pages.
+ */
+
+export { ContentPage, type ContentPageProps } from "./ContentPage";
+export { ContentTypesPage, type ContentTypesPageProps } from "./ContentTypesPage";
+export { DashboardPage } from "./DashboardPage";
+export { MediaPage, type MediaPageProps } from "./MediaPage";
+export { SettingsPage, type SettingsPageProps } from "./SettingsPage";
+export { TaxonomiesPage, type TaxonomiesPageProps } from "./TaxonomiesPage";
+export { TrashPage, type TrashPageProps } from "./TrashPage";

package/admin/src/routeTree.gen.ts

@@ -0,0 +1,262 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as TrashRouteImport } from './routes/trash'
+import { Route as TaxonomiesRouteImport } from './routes/taxonomies'
+import { Route as SettingsRouteImport } from './routes/settings'
+import { Route as MediaRouteImport } from './routes/media'
+import { Route as ContentTypesRouteImport } from './routes/content-types'
+import { Route as ContentRouteImport } from './routes/content'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as EntriesEntryIdRouteImport } from './routes/entries/$entryId'
+import { Route as EntriesTypeContentTypeIdRouteImport } from './routes/entries/type/$contentTypeId'
+import { Route as EntriesNewContentTypeIdRouteImport } from './routes/entries/new.$contentTypeId'
+
+const TrashRoute = TrashRouteImport.update({
+  id: '/trash',
+  path: '/trash',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const TaxonomiesRoute = TaxonomiesRouteImport.update({
+  id: '/taxonomies',
+  path: '/taxonomies',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SettingsRoute = SettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const MediaRoute = MediaRouteImport.update({
+  id: '/media',
+  path: '/media',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ContentTypesRoute = ContentTypesRouteImport.update({
+  id: '/content-types',
+  path: '/content-types',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ContentRoute = ContentRouteImport.update({
+  id: '/content',
+  path: '/content',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const EntriesEntryIdRoute = EntriesEntryIdRouteImport.update({
+  id: '/entries/$entryId',
+  path: '/entries/$entryId',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const EntriesTypeContentTypeIdRoute =
+  EntriesTypeContentTypeIdRouteImport.update({
+    id: '/entries/type/$contentTypeId',
+    path: '/entries/type/$contentTypeId',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const EntriesNewContentTypeIdRoute = EntriesNewContentTypeIdRouteImport.update({
+  id: '/entries/new/$contentTypeId',
+  path: '/entries/new/$contentTypeId',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/content': typeof ContentRoute
+  '/content-types': typeof ContentTypesRoute
+  '/media': typeof MediaRoute
+  '/settings': typeof SettingsRoute
+  '/taxonomies': typeof TaxonomiesRoute
+  '/trash': typeof TrashRoute
+  '/entries/$entryId': typeof EntriesEntryIdRoute
+  '/entries/new/$contentTypeId': typeof EntriesNewContentTypeIdRoute
+  '/entries/type/$contentTypeId': typeof EntriesTypeContentTypeIdRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/content': typeof ContentRoute
+  '/content-types': typeof ContentTypesRoute
+  '/media': typeof MediaRoute
+  '/settings': typeof SettingsRoute
+  '/taxonomies': typeof TaxonomiesRoute
+  '/trash': typeof TrashRoute
+  '/entries/$entryId': typeof EntriesEntryIdRoute
+  '/entries/new/$contentTypeId': typeof EntriesNewContentTypeIdRoute
+  '/entries/type/$contentTypeId': typeof EntriesTypeContentTypeIdRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/content': typeof ContentRoute
+  '/content-types': typeof ContentTypesRoute
+  '/media': typeof MediaRoute
+  '/settings': typeof SettingsRoute
+  '/taxonomies': typeof TaxonomiesRoute
+  '/trash': typeof TrashRoute
+  '/entries/$entryId': typeof EntriesEntryIdRoute
+  '/entries/new/$contentTypeId': typeof EntriesNewContentTypeIdRoute
+  '/entries/type/$contentTypeId': typeof EntriesTypeContentTypeIdRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/content'
+    | '/content-types'
+    | '/media'
+    | '/settings'
+    | '/taxonomies'
+    | '/trash'
+    | '/entries/$entryId'
+    | '/entries/new/$contentTypeId'
+    | '/entries/type/$contentTypeId'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/content'
+    | '/content-types'
+    | '/media'
+    | '/settings'
+    | '/taxonomies'
+    | '/trash'
+    | '/entries/$entryId'
+    | '/entries/new/$contentTypeId'
+    | '/entries/type/$contentTypeId'
+  id:
+    | '__root__'
+    | '/'
+    | '/content'
+    | '/content-types'
+    | '/media'
+    | '/settings'
+    | '/taxonomies'
+    | '/trash'
+    | '/entries/$entryId'
+    | '/entries/new/$contentTypeId'
+    | '/entries/type/$contentTypeId'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ContentRoute: typeof ContentRoute
+  ContentTypesRoute: typeof ContentTypesRoute
+  MediaRoute: typeof MediaRoute
+  SettingsRoute: typeof SettingsRoute
+  TaxonomiesRoute: typeof TaxonomiesRoute
+  TrashRoute: typeof TrashRoute
+  EntriesEntryIdRoute: typeof EntriesEntryIdRoute
+  EntriesNewContentTypeIdRoute: typeof EntriesNewContentTypeIdRoute
+  EntriesTypeContentTypeIdRoute: typeof EntriesTypeContentTypeIdRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/trash': {
+      id: '/trash'
+      path: '/trash'
+      fullPath: '/trash'
+      preLoaderRoute: typeof TrashRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/taxonomies': {
+      id: '/taxonomies'
+      path: '/taxonomies'
+      fullPath: '/taxonomies'
+      preLoaderRoute: typeof TaxonomiesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/settings': {
+      id: '/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof SettingsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/media': {
+      id: '/media'
+      path: '/media'
+      fullPath: '/media'
+      preLoaderRoute: typeof MediaRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/content-types': {
+      id: '/content-types'
+      path: '/content-types'
+      fullPath: '/content-types'
+      preLoaderRoute: typeof ContentTypesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/content': {
+      id: '/content'
+      path: '/content'
+      fullPath: '/content'
+      preLoaderRoute: typeof ContentRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/entries/$entryId': {
+      id: '/entries/$entryId'
+      path: '/entries/$entryId'
+      fullPath: '/entries/$entryId'
+      preLoaderRoute: typeof EntriesEntryIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/entries/type/$contentTypeId': {
+      id: '/entries/type/$contentTypeId'
+      path: '/entries/type/$contentTypeId'
+      fullPath: '/entries/type/$contentTypeId'
+      preLoaderRoute: typeof EntriesTypeContentTypeIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/entries/new/$contentTypeId': {
+      id: '/entries/new/$contentTypeId'
+      path: '/entries/new/$contentTypeId'
+      fullPath: '/entries/new/$contentTypeId'
+      preLoaderRoute: typeof EntriesNewContentTypeIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ContentRoute: ContentRoute,
+  ContentTypesRoute: ContentTypesRoute,
+  MediaRoute: MediaRoute,
+  SettingsRoute: SettingsRoute,
+  TaxonomiesRoute: TaxonomiesRoute,
+  TrashRoute: TrashRoute,
+  EntriesEntryIdRoute: EntriesEntryIdRoute,
+  EntriesNewContentTypeIdRoute: EntriesNewContentTypeIdRoute,
+  EntriesTypeContentTypeIdRoute: EntriesTypeContentTypeIdRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/admin/src/router.tsx

@@ -0,0 +1,22 @@
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+/**
+ * Creates and configures the TanStack Router instance for the admin application.
+ * This function is called by TanStack Start to initialize routing.
+ */
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/admin/src/routes/__root.tsx

@@ -0,0 +1,250 @@
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from "@tanstack/react-router";
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { useMemo, type ReactNode } from "react";
+import globalsCss from "~/styles/globals.css?url";
+import { AdminLayout, RouteGuard } from "~/components";
+import {
+  AuthProvider,
+  BreadcrumbProvider,
+  SettingsConfigProvider,
+  ThemeProvider,
+  type GetUserHook,
+  type GetUserRoleHook,
+  type LogoutHook,
+} from "~/contexts";
+import type { AdminConfig } from "~/lib/admin-config";
+import { resolveAdminConfig } from "~/lib/admin-config";
+import { getServerConfig, type ServerConfig } from "~/lib/config.server";
+
+/**
+ * Auth Configuration
+ *
+ * These hooks integrate with the parent app's authentication system.
+ * In a real deployment, these would be provided by your auth provider
+ * (Clerk, Auth0, Convex Auth, etc.).
+ *
+ * For development/demo purposes, we provide a mock implementation.
+ * Replace these with actual auth integration in production.
+ */
+
+/**
+ * Mock user for development.
+ * Set AUTH_MODE=demo to use this, or customize for your auth provider.
+ */
+const mockGetUser: GetUserHook = () => {
+  // In development/demo mode, return a mock admin user
+  return {
+    id: "mock_user_123",
+    name: "Demo Admin",
+    email: "admin@example.com",
+  };
+};
+
+/**
+ * Mock role resolver for development.
+ * Returns 'admin' for the mock user.
+ */
+const mockGetUserRole: GetUserRoleHook = () => {
+  // In development/demo mode, return admin role
+  return "admin";
+};
+
+/**
+ * Mock logout handler.
+ */
+const mockLogout: LogoutHook = () => {
+  console.log("Logout called (mock mode)");
+};
+
+/**
+ * No-auth mode - for when auth is not configured.
+ * Returns null to indicate unauthenticated state.
+ */
+const noAuthGetUser: GetUserHook = () => null;
+const noAuthGetUserRole: GetUserRoleHook = () => null;
+const noAuthLogout: LogoutHook = () => {};
+
+/**
+ * Get auth hooks based on configuration.
+ * Extend this to support different auth providers.
+ */
+function getAuthConfig(authMode: string): {
+  getUser: GetUserHook;
+  getUserRole: GetUserRoleHook;
+  onLogout: LogoutHook;
+} {
+  switch (authMode) {
+    case "mock":
+    case "demo":
+      return {
+        getUser: mockGetUser,
+        getUserRole: mockGetUserRole,
+        onLogout: mockLogout,
+      };
+    case "none":
+    case "disabled":
+      return {
+        getUser: noAuthGetUser,
+        getUserRole: noAuthGetUserRole,
+        onLogout: noAuthLogout,
+      };
+    default:
+      // Default to mock mode for development convenience
+      // In production, you should configure your actual auth provider
+      return {
+        getUser: mockGetUser,
+        getUserRole: mockGetUserRole,
+        onLogout: mockLogout,
+      };
+  }
+}
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: "Convex CMS Admin",
+      },
+      {
+        name: "description",
+        content:
+          "Admin interface for Convex CMS - manage content, media, and publishing workflows",
+      },
+    ],
+    links: [
+      { rel: "stylesheet", href: globalsCss },
+      { rel: "icon", href: "/favicon.ico" },
+    ],
+  }),
+  // Load server config at route initialization
+  loader: async () => {
+    const config = await getServerConfig();
+    return { config };
+  },
+  component: RootComponent,
+});
+
+function RootComponent() {
+  const { config } = Route.useLoaderData();
+
+  const authConfig = useMemo(() => getAuthConfig(config.authMode), [config.authMode]);
+  const adminConfig = useMemo(
+    () => resolveAdminConfig(config.adminConfig),
+    [config.adminConfig]
+  );
+
+  return (
+    <RootDocument>
+      <ThemeProvider>
+        <BreadcrumbProvider>
+          <ConvexProviderWrapper config={config} adminConfig={adminConfig}>
+            <AuthProvider
+              getUser={authConfig.getUser}
+              getUserRole={authConfig.getUserRole}
+              onLogout={authConfig.onLogout}
+            >
+              <RouteGuard>
+                <AdminLayout>
+                  <Outlet />
+                </AdminLayout>
+              </RouteGuard>
+            </AuthProvider>
+          </ConvexProviderWrapper>
+        </BreadcrumbProvider>
+      </ThemeProvider>
+    </RootDocument>
+  );
+}
+
+function ConvexProviderWrapper({
+  children,
+  config,
+  adminConfig,
+}: {
+  children: ReactNode;
+  config: ServerConfig;
+  adminConfig: AdminConfig;
+}) {
+  const convex = useMemo(() => {
+    if (!config.convexUrl) return null;
+    return new ConvexReactClient(config.convexUrl);
+  }, [config.convexUrl]);
+
+  if (!convex) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6">
+        <div className="max-w-lg space-y-4 rounded-lg border border-amber-200 bg-amber-50 p-6 text-center">
+          <h2 className="text-xl font-semibold text-amber-900">
+            Convex Configuration Required
+          </h2>
+          <p className="text-sm text-amber-800">
+            Please provide a Convex deployment URL to connect to your backend.
+          </p>
+          <div className="space-y-2 text-left text-sm text-amber-700">
+            <p className="font-medium">Options:</p>
+            <ul className="list-inside list-disc space-y-1">
+              <li>
+                Run with URL:{" "}
+                <code className="rounded bg-amber-100 px-1">
+                  npx convex-cms admin --url YOUR_URL
+                </code>
+              </li>
+              <li>
+                Set environment variable:{" "}
+                <code className="rounded bg-amber-100 px-1">
+                  CONVEX_URL=YOUR_URL
+                </code>
+              </li>
+              <li>
+                Add to{" "}
+                <code className="rounded bg-amber-100 px-1">.env.local</code>:{" "}
+                <code className="rounded bg-amber-100 px-1">
+                  CONVEX_URL=YOUR_URL
+                </code>
+              </li>
+            </ul>
+          </div>
+          <p className="text-sm text-amber-700">
+            Run{" "}
+            <code className="rounded bg-amber-100 px-1">npx convex dev</code> to
+            start Convex and get your URL.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ConvexProvider client={convex}>
+      <SettingsConfigProvider baseConfig={adminConfig}>
+        {children}
+      </SettingsConfigProvider>
+    </ConvexProvider>
+  );
+}
+
+function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/admin/src/routes/content-types.tsx

@@ -0,0 +1,20 @@
+/**
+ * Content Types Route (CLI)
+ *
+ * Thin wrapper around the shared ContentTypesPage component.
+ * Provides TanStack Router integration and API access.
+ */
+
+import { createFileRoute } from "@tanstack/react-router";
+import { api } from "../../convex/_generated/api";
+import { ContentTypesPage } from "~/pages";
+import { useTanStackNavigation } from "~/lib/tanstack-adapter";
+
+export const Route = createFileRoute("/content-types")({
+	component: ContentTypesRoute,
+});
+
+function ContentTypesRoute() {
+	const navigation = useTanStackNavigation();
+	return <ContentTypesPage api={api.admin} navigation={navigation} />;
+}

package/admin/src/routes/content.tsx

@@ -0,0 +1,20 @@
+/**
+ * Content Route (CLI)
+ *
+ * Thin wrapper around the shared ContentPage component.
+ * Provides TanStack Router integration and API access.
+ */
+
+import { createFileRoute } from "@tanstack/react-router";
+import { api } from "../../convex/_generated/api";
+import { ContentPage } from "~/pages";
+import { useTanStackNavigation } from "~/lib/tanstack-adapter";
+
+export const Route = createFileRoute("/content")({
+	component: ContentRoute,
+});
+
+function ContentRoute() {
+	const navigation = useTanStackNavigation();
+	return <ContentPage api={api.admin} navigation={navigation} />;
+}

package/admin/src/routes/entries/$entryId.tsx

@@ -0,0 +1,107 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useQuery } from 'convex/react';
+import { api } from '../../../convex/_generated/api';
+import { ContentEntryEditor } from '~/components/ContentEntryEditor';
+import type { ContentType, ContentEntry } from '~/components/ContentEntryEditor';
+import { usePermissions, useBreadcrumbLabel } from '~/hooks';
+import { CmsEmptyState } from '~/components/cmsds/CmsEmptyState';
+import { CmsButton as _CmsButton } from '~/components/cmsds/CmsButton';
+import { FileText } from 'lucide-react';
+
+export const Route = createFileRoute('/entries/$entryId')({
+  component: EditEntryPage,
+});
+
+function EditEntryPage() {
+  const { entryId } = Route.useParams();
+  const navigate = useNavigate();
+  const { canDelete } = usePermissions();
+
+  const entry = useQuery(api.entries.get, { id: entryId });
+
+  const contentType = useQuery(
+    api.contentTypes.get,
+    entry ? { id: entry.contentTypeId } : 'skip'
+  );
+
+  const getEntryTitle = () => {
+    if (!entry || !contentType) return undefined;
+    const titleField = contentType.titleField ?? 'title';
+    const title = entry.data[titleField];
+    return typeof title === 'string' && title ? title : 'Untitled';
+  };
+
+  useBreadcrumbLabel(`/entries/${entryId}`, getEntryTitle());
+
+  if (entry === undefined || (entry && contentType === undefined)) {
+    return (
+      <div className="space-y-6 p-6">
+        <div className="flex flex-col items-center justify-center py-12">
+          <div className="size-8 animate-spin rounded-full border-2 border-muted border-t-primary" />
+          <p className="mt-4 text-sm text-muted-foreground">Loading entry...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (entry === null) {
+    return (
+      <div className="space-y-6 p-6">
+        <CmsEmptyState
+          icon={<FileText className="size-6" />}
+          title="Entry Not Found"
+          description="The content entry you're looking for doesn't exist or has been deleted."
+          action={{
+            label: 'Back to Content',
+            onClick: () => navigate({ to: '/content-types' }),
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (contentType === null) {
+    return (
+      <div className="space-y-6 p-6">
+        <CmsEmptyState
+          icon={<FileText className="size-6" />}
+          title="Content Type Not Found"
+          description="The content type for this entry doesn't exist or has been deleted."
+          action={{
+            label: 'Back to Content',
+            onClick: () => navigate({ to: '/content-types' }),
+          }}
+        />
+      </div>
+    );
+  }
+
+  // Handle successful save
+  const handleSave = (_savedEntry: ContentEntry) => {
+    // Stay on the page but show a success state
+    // The component will handle the success feedback
+  };
+
+  // Handle cancel
+  const handleCancel = () => {
+    navigate({ to: '/content' });
+  };
+
+  // Handle delete - navigate back to content list
+  const handleDelete = () => {
+    navigate({ to: '/content' });
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      <ContentEntryEditor
+        contentType={contentType as ContentType}
+        entry={entry as ContentEntry}
+        onSave={handleSave}
+        onCancel={handleCancel}
+        onDelete={handleDelete}
+        canDelete={canDelete('contentEntries')}
+      />
+    </div>
+  );
+}