convex-cms 0.0.5-alpha.0 → 0.0.5-alpha.3

package/admin/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "~/lib/cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/admin/src/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/admin/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "~/lib/cn"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/admin/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "~/lib/cn"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/admin/src/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "~/lib/cn"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/admin/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "~/lib/cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/admin/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "~/lib/cn"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/admin/src/contexts/AdminConfigContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, type ReactNode } from "react";
+import type { AdminConfig, NavItem } from "../lib/admin-config";
+import { getVisibleNavItems } from "../lib/admin-config";
+
+interface AdminConfigContextValue extends AdminConfig {
+  navItems: { main: NavItem[]; config: NavItem[] };
+}
+
+const AdminConfigContext = createContext<AdminConfigContextValue | null>(null);
+
+export function AdminConfigProvider({
+  config,
+  children,
+}: {
+  config: AdminConfig;
+  children: ReactNode;
+}) {
+  const navItems = getVisibleNavItems(config);
+  const value: AdminConfigContextValue = { ...config, navItems };
+
+  return <AdminConfigContext.Provider value={value}>{children}</AdminConfigContext.Provider>;
+}
+
+export function useAdminConfig(): AdminConfigContextValue {
+  const config = useContext(AdminConfigContext);
+  if (!config) {
+    throw new Error("useAdminConfig must be used within AdminConfigProvider");
+  }
+  return config;
+}

package/admin/src/contexts/AuthContext.tsx

@@ -0,0 +1,330 @@
+/**
+ * Authentication Context Provider
+ *
+ * This module provides authentication state management for the admin UI.
+ * It integrates with the parent app's auth system via configurable hooks,
+ * allowing the CMS to work with any authentication provider.
+ *
+ * The context provides:
+ * - Current user information (id, name, email, role)
+ * - Authentication state (loading, authenticated, error)
+ * - Permission checking utilities
+ *
+ * @example
+ * ```tsx
+ * // In app setup, provide auth hooks
+ * <AuthProvider
+ *   getUser={async () => ({ id: 'user_123', name: 'John', email: 'john@example.com' })}
+ *   getUserRole={async ({ userId }) => 'editor'}
+ * >
+ *   <App />
+ * </AuthProvider>
+ *
+ * // In components, use the auth context
+ * const { user, role, isAuthenticated, isLoading } = useAuth();
+ * ```
+ */
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import {
+  hasPermission,
+  type RoleName,
+  type Resource,
+  type Action,
+  type OwnershipScope,
+} from '../../../src/component/roles';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * User information from the parent app's auth system.
+ */
+export interface AuthUser {
+  /** Unique user identifier */
+  id: string;
+  /** Display name */
+  name?: string;
+  /** Email address */
+  email?: string;
+  /** Avatar URL */
+  avatarUrl?: string;
+}
+
+/**
+ * Context for getting a user's role.
+ */
+export interface GetUserRoleContext {
+  userId: string;
+}
+
+/**
+ * Hook to get the current authenticated user.
+ * Returns null if not authenticated.
+ */
+export type GetUserHook = () => Promise<AuthUser | null> | AuthUser | null;
+
+/**
+ * Hook to get a user's role from the parent app.
+ * Should return the role name (e.g., 'admin', 'editor') or null if no role.
+ */
+export type GetUserRoleHook = (
+  context: GetUserRoleContext
+) => Promise<string | null> | string | null;
+
+/**
+ * Hook to handle logout.
+ */
+export type LogoutHook = () => Promise<void> | void;
+
+/**
+ * Authentication state.
+ */
+export type AuthState = 'loading' | 'authenticated' | 'unauthenticated' | 'error';
+
+/**
+ * Permission check parameters.
+ */
+export interface PermissionCheck {
+  resource: Resource;
+  action: Action;
+  scope?: OwnershipScope;
+}
+
+/**
+ * Auth context value provided to consumers.
+ */
+export interface AuthContextValue {
+  /** Current authenticated user, or null if not authenticated */
+  user: AuthUser | null;
+  /** Current user's role in the CMS, or null if no role assigned */
+  role: RoleName | string | null;
+  /** Current authentication state */
+  authState: AuthState;
+  /** Whether authentication is still loading */
+  isLoading: boolean;
+  /** Whether the user is authenticated */
+  isAuthenticated: boolean;
+  /** Error message if authentication failed */
+  error: string | null;
+  /** Check if the current user has a specific permission */
+  checkPermission: (permission: PermissionCheck) => boolean;
+  /** Logout the current user */
+  logout: () => Promise<void>;
+  /** Refresh authentication state */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Props for the AuthProvider component.
+ */
+export interface AuthProviderProps {
+  children: ReactNode;
+  /**
+   * Hook to get the current authenticated user.
+   * This should integrate with your auth provider (Clerk, Auth0, etc.).
+   */
+  getUser: GetUserHook;
+  /**
+   * Hook to get a user's CMS role.
+   * This maps the authenticated user to a CMS role.
+   */
+  getUserRole: GetUserRoleHook;
+  /**
+   * Hook to handle logout.
+   * Optional - if not provided, logout will just clear local state.
+   */
+  onLogout?: LogoutHook;
+  /**
+   * Whether to automatically redirect to login when unauthenticated.
+   * Defaults to false.
+   */
+  autoRedirectToLogin?: boolean;
+  /**
+   * URL to redirect to for login.
+   * Only used if autoRedirectToLogin is true.
+   */
+  loginUrl?: string;
+}
+
+// =============================================================================
+// Context
+// =============================================================================
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+// =============================================================================
+// Provider Component
+// =============================================================================
+
+/**
+ * Authentication Provider Component
+ *
+ * Wraps the application and provides authentication state to all children.
+ * Integrates with the parent app's auth system via hooks.
+ */
+export function AuthProvider({
+  children,
+  getUser,
+  getUserRole,
+  onLogout,
+  autoRedirectToLogin = false,
+  loginUrl = '/login',
+}: AuthProviderProps) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [role, setRole] = useState<RoleName | string | null>(null);
+  const [authState, setAuthState] = useState<AuthState>('loading');
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Load authentication state.
+   */
+  const loadAuth = useCallback(async () => {
+    setAuthState('loading');
+    setError(null);
+
+    try {
+      // Get the current user from the parent app's auth system
+      const currentUser = await getUser();
+
+      if (!currentUser) {
+        setUser(null);
+        setRole(null);
+        setAuthState('unauthenticated');
+
+        // Optionally redirect to login
+        if (autoRedirectToLogin && typeof window !== 'undefined') {
+          window.location.href = loginUrl;
+        }
+        return;
+      }
+
+      // Get the user's CMS role
+      const userRole = await getUserRole({ userId: currentUser.id });
+
+      setUser(currentUser);
+      setRole(userRole);
+      setAuthState('authenticated');
+    } catch (err) {
+      console.error('Authentication error:', err);
+      setUser(null);
+      setRole(null);
+      setError(err instanceof Error ? err.message : 'Authentication failed');
+      setAuthState('error');
+    }
+  }, [getUser, getUserRole, autoRedirectToLogin, loginUrl]);
+
+  /**
+   * Load auth on mount.
+   */
+  useEffect(() => {
+    loadAuth();
+  }, [loadAuth]);
+
+  /**
+   * Check if the current user has a specific permission.
+   */
+  const checkPermission = useCallback(
+    (permission: PermissionCheck): boolean => {
+      if (!role) {
+        return false;
+      }
+      return hasPermission(role, permission);
+    },
+    [role]
+  );
+
+  /**
+   * Logout the current user.
+   */
+  const logout = useCallback(async () => {
+    try {
+      if (onLogout) {
+        await onLogout();
+      }
+      setUser(null);
+      setRole(null);
+      setAuthState('unauthenticated');
+
+      if (autoRedirectToLogin && typeof window !== 'undefined') {
+        window.location.href = loginUrl;
+      }
+    } catch (err) {
+      console.error('Logout error:', err);
+      setError(err instanceof Error ? err.message : 'Logout failed');
+    }
+  }, [onLogout, autoRedirectToLogin, loginUrl]);
+
+  /**
+   * Refresh authentication state.
+   */
+  const refresh = useCallback(async () => {
+    await loadAuth();
+  }, [loadAuth]);
+
+  const value: AuthContextValue = {
+    user,
+    role,
+    authState,
+    isLoading: authState === 'loading',
+    isAuthenticated: authState === 'authenticated',
+    error,
+    checkPermission,
+    logout,
+    refresh,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * Hook to access authentication state.
+ *
+ * @throws Error if used outside of AuthProvider
+ *
+ * @example
+ * ```tsx
+ * function UserProfile() {
+ *   const { user, role, isAuthenticated, logout } = useAuth();
+ *
+ *   if (!isAuthenticated) {
+ *     return <LoginPrompt />;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Welcome, {user.name}!</p>
+ *       <p>Role: {role}</p>
+ *       <button onClick={logout}>Logout</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+
+  return context;
+}
+
+// =============================================================================
+// Default Export
+// =============================================================================
+
+export default AuthProvider;