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

package/admin/src/components/RouteGuard.tsx

@@ -0,0 +1,264 @@
+/**
+ * Route Guard Component
+ *
+ * Protects routes by checking authentication and permissions.
+ * Shows appropriate UI for loading, unauthenticated, and unauthorized states.
+ *
+ * @example
+ * ```tsx
+ * // Protect a route requiring authentication
+ * <RouteGuard>
+ *   <ProtectedContent />
+ * </RouteGuard>
+ *
+ * // Protect a route requiring specific permissions
+ * <RouteGuard
+ *   requiredPermission={{ resource: 'settings', action: 'manage' }}
+ * >
+ *   <SettingsPage />
+ * </RouteGuard>
+ *
+ * // Require a specific role
+ * <RouteGuard requiredRole="admin">
+ *   <AdminOnlyContent />
+ * </RouteGuard>
+ * ```
+ */
+
+import type { ReactNode } from 'react';
+import { useAuth, type PermissionCheck } from '../contexts/AuthContext';
+import type { RoleName } from '../../../src/component/roles';
+import { Loader2 } from 'lucide-react';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface RouteGuardProps {
+  children: ReactNode;
+  /**
+   * Permission required to access this route.
+   * If not specified, only authentication is required.
+   */
+  requiredPermission?: PermissionCheck;
+  /**
+   * Role required to access this route.
+   * If not specified, any authenticated user with a role can access.
+   */
+  requiredRole?: RoleName | string;
+  /**
+   * Custom loading component.
+   */
+  loadingComponent?: ReactNode;
+  /**
+   * Custom unauthenticated component.
+   */
+  unauthenticatedComponent?: ReactNode;
+  /**
+   * Custom unauthorized component.
+   */
+  unauthorizedComponent?: ReactNode;
+  /**
+   * Callback when user is unauthenticated.
+   */
+  onUnauthenticated?: () => void;
+  /**
+   * Callback when user is unauthorized.
+   */
+  onUnauthorized?: () => void;
+}
+
+// =============================================================================
+// Default Components
+// =============================================================================
+
+function DefaultLoading() {
+  return (
+    <div className="route-guard route-guard--loading bg-background flex items-center justify-center min-h-screen">
+      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+    </div>
+  );
+}
+
+function DefaultUnauthenticated() {
+  return (
+    <div className="route-guard route-guard--unauthenticated">
+      <div className="route-guard-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </svg>
+      </div>
+      <h2>Authentication Required</h2>
+      <p>Please log in to access the admin panel.</p>
+    </div>
+  );
+}
+
+function DefaultUnauthorized({
+  requiredRole,
+  requiredPermission,
+}: {
+  requiredRole?: RoleName | string;
+  requiredPermission?: PermissionCheck;
+}) {
+  return (
+    <div className="route-guard route-guard--unauthorized">
+      <div className="route-guard-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+        </svg>
+      </div>
+      <h2>Access Denied</h2>
+      <p>You don't have permission to access this page.</p>
+      {requiredRole && (
+        <p className="route-guard-detail">
+          Required role: <strong>{requiredRole}</strong>
+        </p>
+      )}
+      {requiredPermission && (
+        <p className="route-guard-detail">
+          Required permission:{' '}
+          <strong>
+            {requiredPermission.action} on {requiredPermission.resource}
+          </strong>
+        </p>
+      )}
+    </div>
+  );
+}
+
+function DefaultError({ error }: { error: string }) {
+  return (
+    <div className="route-guard route-guard--error">
+      <div className="route-guard-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="8" x2="12" y2="12" />
+          <line x1="12" y1="16" x2="12.01" y2="16" />
+        </svg>
+      </div>
+      <h2>Authentication Error</h2>
+      <p>{error}</p>
+    </div>
+  );
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * Route Guard Component
+ *
+ * Wraps protected content and handles authentication/authorization checks.
+ */
+export function RouteGuard({
+  children,
+  requiredPermission,
+  requiredRole,
+  loadingComponent,
+  unauthenticatedComponent,
+  unauthorizedComponent,
+  onUnauthenticated,
+  onUnauthorized,
+}: RouteGuardProps) {
+  const { authState, role, checkPermission, error } = useAuth();
+
+  // Show loading state
+  if (authState === 'loading') {
+    return <>{loadingComponent ?? <DefaultLoading />}</>;
+  }
+
+  // Show error state
+  if (authState === 'error') {
+    return <DefaultError error={error ?? 'An error occurred'} />;
+  }
+
+  // Handle unauthenticated state
+  if (authState === 'unauthenticated') {
+    onUnauthenticated?.();
+    return <>{unauthenticatedComponent ?? <DefaultUnauthenticated />}</>;
+  }
+
+  // Check if user has any role (must be assigned to CMS)
+  if (!role) {
+    onUnauthorized?.();
+    return (
+      <>
+        {unauthorizedComponent ?? (
+          <DefaultUnauthorized
+            requiredRole={requiredRole}
+            requiredPermission={requiredPermission}
+          />
+        )}
+      </>
+    );
+  }
+
+  // Check required role
+  if (requiredRole && role !== requiredRole) {
+    onUnauthorized?.();
+    return (
+      <>
+        {unauthorizedComponent ?? (
+          <DefaultUnauthorized
+            requiredRole={requiredRole}
+            requiredPermission={requiredPermission}
+          />
+        )}
+      </>
+    );
+  }
+
+  // Check required permission
+  if (requiredPermission && !checkPermission(requiredPermission)) {
+    onUnauthorized?.();
+    return (
+      <>
+        {unauthorizedComponent ?? (
+          <DefaultUnauthorized
+            requiredRole={requiredRole}
+            requiredPermission={requiredPermission}
+          />
+        )}
+      </>
+    );
+  }
+
+  // User is authorized, render children
+  return <>{children}</>;
+}
+
+export default RouteGuard;

package/admin/src/components/Sidebar.tsx

@@ -0,0 +1,90 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import { Layers } from "lucide-react";
+import { cn } from "~/lib/cn";
+import { useAdminConfig } from "~/contexts";
+import { Icon } from "~/lib/icons";
+import type { NavItem } from "~/lib/admin-config";
+
+export function Sidebar() {
+  const routerState = useRouterState();
+  const currentPath = routerState.location.pathname;
+  const config = useAdminConfig();
+  const { navItems, branding, layout } = config;
+
+  const isActive = (to: string, exact?: boolean) => {
+    if (exact) {
+      return currentPath === to;
+    }
+    return currentPath.startsWith(to);
+  };
+
+  const renderNavItem = (item: NavItem) => (
+    <Link
+      key={item.id}
+      to={item.path}
+      className={cn(
+        "flex items-center gap-3 rounded-md px-2 py-2 text-sm font-medium transition-colors",
+        isActive(item.path, item.exact)
+          ? "bg-sidebar-accent text-sidebar-accent-foreground"
+          : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground"
+      )}
+    >
+      <Icon name={item.icon} className="size-5" />
+      <span className="flex-1">{item.label}</span>
+      {item.badge && (
+        <span className="rounded-full bg-sidebar-primary px-2 py-0.5 text-xs text-sidebar-primary-foreground">
+          {item.badge}
+        </span>
+      )}
+    </Link>
+  );
+
+  const sidebarWidth = layout.sidebarWidth;
+
+  return (
+    <aside
+      className="fixed inset-y-0 left-0 z-50 flex flex-col border-r border-sidebar-border bg-sidebar"
+      style={{ width: sidebarWidth }}
+    >
+      <div className="flex h-14 items-center gap-2 border-b border-sidebar-border px-4">
+        <Link to="/" className="flex items-center gap-2 font-semibold text-sidebar-foreground">
+          {branding.logo ? (
+            <img src={branding.logo} alt={branding.appName} className="size-8" />
+          ) : (
+            <div className="flex size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <Layers className="size-4" />
+            </div>
+          )}
+          <span className="text-base">{branding.appName}</span>
+        </Link>
+      </div>
+
+      <nav className="flex-1 space-y-6 overflow-y-auto p-4">
+        {navItems.main.length > 0 && (
+          <div className="space-y-1">
+            <span className="px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60">
+              Main
+            </span>
+            <div className="space-y-1 pt-2">{navItems.main.map(renderNavItem)}</div>
+          </div>
+        )}
+
+        {navItems.config.length > 0 && (
+          <div className="space-y-1">
+            <span className="px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60">
+              Configuration
+            </span>
+            <div className="space-y-1 pt-2">{navItems.config.map(renderNavItem)}</div>
+          </div>
+        )}
+      </nav>
+
+      <div className="border-t border-sidebar-border p-4">
+        <div className="flex items-center justify-between text-xs text-sidebar-foreground/60">
+          <span>Version</span>
+          <span className="font-mono">0.1.0</span>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/admin/src/components/TaxonomyEditor.tsx

@@ -0,0 +1,348 @@
+import { useState, useCallback, useEffect } from 'react'
+import { useMutation } from 'convex/react'
+import { api } from '../../convex/_generated/api'
+import { CmsDialog } from '~/components/cmsds/CmsDialog'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { Input } from '~/components/ui/input'
+import { Label } from '~/components/ui/label'
+import { Textarea } from '~/components/ui/textarea'
+import { Checkbox } from '~/components/ui/checkbox'
+
+interface Taxonomy {
+  _id: string
+  name: string
+  displayName: string
+  description?: string
+  isHierarchical: boolean
+  allowInlineCreation: boolean
+  isActive: boolean
+  icon?: string
+  sortOrder?: number
+}
+
+interface TaxonomyEditorProps {
+  taxonomy?: Taxonomy | null
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function TaxonomyEditor({
+  taxonomy,
+  onSave,
+  onCancel,
+}: TaxonomyEditorProps) {
+  const isEditing = !!taxonomy
+
+  const [formData, setFormData] = useState({
+    name: taxonomy?.name ?? '',
+    displayName: taxonomy?.displayName ?? '',
+    description: taxonomy?.description ?? '',
+    isHierarchical: taxonomy?.isHierarchical ?? false,
+    allowInlineCreation: taxonomy?.allowInlineCreation ?? true,
+    isActive: taxonomy?.isActive ?? true,
+    icon: taxonomy?.icon ?? '',
+    sortOrder: taxonomy?.sortOrder ?? 0,
+  })
+
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [submitError, setSubmitError] = useState<string | null>(null)
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false)
+
+  const createTaxonomy = useMutation(api.taxonomies.createTaxonomy)
+  const updateTaxonomy = useMutation(api.taxonomies.updateTaxonomy)
+
+  useEffect(() => {
+    if (taxonomy) {
+      setFormData({
+        name: taxonomy.name,
+        displayName: taxonomy.displayName,
+        description: taxonomy.description ?? '',
+        isHierarchical: taxonomy.isHierarchical,
+        allowInlineCreation: taxonomy.allowInlineCreation,
+        isActive: taxonomy.isActive,
+        icon: taxonomy.icon ?? '',
+        sortOrder: taxonomy.sortOrder ?? 0,
+      })
+    }
+  }, [taxonomy])
+
+  const handleChange = useCallback(
+    (field: keyof typeof formData, value: string | boolean | number) => {
+      setFormData((prev) => ({ ...prev, [field]: value }))
+      setErrors((prev) => {
+        const { [field]: _, ...rest } = prev
+        return rest
+      })
+    },
+    []
+  )
+
+  const generateSlug = useCallback((name: string) => {
+    return name
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '')
+  }, [])
+
+  const handleDisplayNameChange = useCallback(
+    (value: string) => {
+      handleChange('displayName', value)
+      if (!isEditing && !slugManuallyEdited) {
+        handleChange('name', generateSlug(value))
+      }
+    },
+    [handleChange, isEditing, slugManuallyEdited, generateSlug]
+  )
+
+  const validate = useCallback(() => {
+    const newErrors: Record<string, string> = {}
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'Slug is required'
+    } else if (!/^[a-z][a-z0-9-]*$/.test(formData.name)) {
+      newErrors.name =
+        'Slug must start with a letter and contain only lowercase letters, numbers, and hyphens'
+    }
+
+    if (!formData.displayName.trim()) {
+      newErrors.displayName = 'Display name is required'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }, [formData])
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault()
+
+      if (!validate()) return
+
+      setIsSubmitting(true)
+      setSubmitError(null)
+
+      try {
+        if (isEditing && taxonomy) {
+          await updateTaxonomy({
+            id: taxonomy._id,
+            displayName: formData.displayName,
+            description: formData.description || undefined,
+            allowInlineCreation: formData.allowInlineCreation,
+            icon: formData.icon || undefined,
+            sortOrder: formData.sortOrder,
+            isActive: formData.isActive,
+          })
+        } else {
+          await createTaxonomy({
+            name: formData.name,
+            displayName: formData.displayName,
+            description: formData.description || undefined,
+            isHierarchical: formData.isHierarchical,
+            allowInlineCreation: formData.allowInlineCreation,
+            icon: formData.icon || undefined,
+            sortOrder: formData.sortOrder,
+          })
+        }
+        onSave()
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : 'Failed to save taxonomy'
+        setSubmitError(message)
+      } finally {
+        setIsSubmitting(false)
+      }
+    },
+    [
+      validate,
+      isEditing,
+      taxonomy,
+      formData,
+      createTaxonomy,
+      updateTaxonomy,
+      onSave,
+    ]
+  )
+
+  return (
+    <CmsDialog
+      open={true}
+      onOpenChange={(open) => !open && !isSubmitting && onCancel()}
+      title={isEditing ? 'Edit Taxonomy' : 'Create Taxonomy'}
+      size="lg"
+      footer={
+        <>
+          <CmsButton variant="outline" onClick={onCancel} disabled={isSubmitting}>
+            Cancel
+          </CmsButton>
+          <CmsButton
+            variant="primary"
+            onClick={handleSubmit}
+            loading={isSubmitting}
+          >
+            {isEditing ? 'Save Changes' : 'Create Taxonomy'}
+          </CmsButton>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {submitError && (
+          <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
+            {submitError}
+          </div>
+        )}
+
+        <div className="space-y-2">
+          <Label htmlFor="displayName">
+            Display Name <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id="displayName"
+            value={formData.displayName}
+            onChange={(e) => handleDisplayNameChange(e.target.value)}
+            placeholder="e.g., Categories, Tags"
+            disabled={isSubmitting}
+            className={errors.displayName ? 'border-destructive' : ''}
+          />
+          {errors.displayName && (
+            <p className="text-xs text-destructive">{errors.displayName}</p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="name">
+            Slug <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id="name"
+            value={formData.name}
+            onChange={(e) => {
+              handleChange('name', e.target.value.toLowerCase())
+              setSlugManuallyEdited(true)
+            }}
+            placeholder="e.g., categories, tags"
+            disabled={isSubmitting || isEditing}
+            className={errors.name ? 'border-destructive' : ''}
+          />
+          {errors.name && (
+            <p className="text-xs text-destructive">{errors.name}</p>
+          )}
+          {isEditing && (
+            <p className="text-xs text-muted-foreground">
+              Slug cannot be changed after creation
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="description">Description</Label>
+          <Textarea
+            id="description"
+            value={formData.description}
+            onChange={(e) => handleChange('description', e.target.value)}
+            placeholder="Optional description"
+            rows={2}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="icon">Icon</Label>
+            <Input
+              id="icon"
+              value={formData.icon}
+              onChange={(e) => handleChange('icon', e.target.value)}
+              placeholder="e.g., 🏷️ or folder"
+              disabled={isSubmitting}
+            />
+            <p className="text-xs text-muted-foreground">Emoji or icon name</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="sortOrder">Sort Order</Label>
+            <Input
+              id="sortOrder"
+              type="number"
+              value={formData.sortOrder}
+              onChange={(e) =>
+                handleChange('sortOrder', parseInt(e.target.value) || 0)
+              }
+              disabled={isSubmitting}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-4 pt-2">
+          <div className="flex items-start gap-3">
+            <Checkbox
+              id="isHierarchical"
+              checked={formData.isHierarchical}
+              onCheckedChange={(checked) =>
+                handleChange('isHierarchical', checked as boolean)
+              }
+              disabled={isSubmitting || isEditing}
+            />
+            <div className="space-y-0.5">
+              <Label
+                htmlFor="isHierarchical"
+                className="cursor-pointer font-medium"
+              >
+                Hierarchical
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                Terms can have parent-child relationships (like categories)
+              </p>
+              {isEditing && (
+                <p className="text-xs text-amber-600">
+                  Hierarchy type cannot be changed after creation
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-start gap-3">
+            <Checkbox
+              id="allowInlineCreation"
+              checked={formData.allowInlineCreation}
+              onCheckedChange={(checked) =>
+                handleChange('allowInlineCreation', checked as boolean)
+              }
+              disabled={isSubmitting}
+            />
+            <div className="space-y-0.5">
+              <Label
+                htmlFor="allowInlineCreation"
+                className="cursor-pointer font-medium"
+              >
+                Allow inline creation
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                Users can create new terms while editing content
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-3">
+            <Checkbox
+              id="isActive"
+              checked={formData.isActive}
+              onCheckedChange={(checked) =>
+                handleChange('isActive', checked as boolean)
+              }
+              disabled={isSubmitting}
+            />
+            <div className="space-y-0.5">
+              <Label htmlFor="isActive" className="cursor-pointer font-medium">
+                Active
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                Inactive taxonomies are hidden from content editors
+              </p>
+            </div>
+          </div>
+        </div>
+      </form>
+    </CmsDialog>
+  )
+}