canopycms 0.0.0

package/src/editor/components/UserBadge.tsx

@@ -0,0 +1,240 @@
+import { Avatar, Badge, Tooltip, Group, Text, Skeleton, ActionIcon } from '@mantine/core'
+import { IconUserOff, IconX } from '@tabler/icons-react'
+import type { UserSearchResult } from '../../auth/types'
+import type { CanopyUserId } from '../../types'
+import { useUserMetadata } from '../hooks/useUserMetadata'
+
+export interface UserBadgeProps {
+  /** User ID to display */
+  userId: CanopyUserId
+
+  /** Function to fetch user metadata by ID */
+  getUserMetadata: (userId: string) => Promise<UserSearchResult | null>
+
+  /** Display mode */
+  variant?: 'avatar-only' | 'avatar-name' | 'full'
+
+  /** Show email tooltip on hover (default: true) */
+  showEmailTooltip?: boolean
+
+  /** Optional removal button */
+  onRemove?: (userId: CanopyUserId) => void
+
+  /** Color theme (for Badge wrapper) */
+  color?: string
+
+  /** Size (affects avatar and text size) */
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+
+  /** Badge variant (when using Badge wrapper) */
+  badgeVariant?: 'filled' | 'light' | 'outline'
+
+  /** Always show Badge wrapper (even without onRemove) */
+  showBadge?: boolean
+
+  /** Loading state override */
+  loading?: boolean
+
+  /** Cached user data to avoid fetching (e.g., from search results) */
+  cachedUser?: UserSearchResult
+}
+
+export const UserBadge: React.FC<UserBadgeProps> = ({
+  userId,
+  getUserMetadata,
+  variant = 'avatar-name',
+  showEmailTooltip = true,
+  onRemove,
+  color,
+  size = 'sm',
+  badgeVariant = 'filled',
+  showBadge = false,
+  loading: loadingOverride,
+  cachedUser,
+}) => {
+  const { userMetadata, isLoading, error } = useUserMetadata(userId, getUserMetadata, cachedUser)
+
+  const loading = loadingOverride ?? isLoading
+
+  // Avatar size mapping
+  const avatarSize = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+  }[size]
+
+  // Text size mapping
+  const textSize = {
+    xs: 'xs',
+    sm: 'sm',
+    md: 'sm',
+    lg: 'md',
+  }[size] as 'xs' | 'sm' | 'md'
+
+  // Loading state
+  if (loading) {
+    return (
+      <Group gap={4}>
+        <Skeleton circle height={avatarSize} width={avatarSize} />
+        {variant !== 'avatar-only' && <Skeleton height={12} width={60} />}
+      </Group>
+    )
+  }
+
+  // Error or missing user - fallback to userId
+  if (error || !userMetadata) {
+    const content = (
+      <Group gap={4}>
+        <Avatar size={avatarSize} color="gray" />
+        {variant !== 'avatar-only' && (
+          <Text size={textSize} c="dimmed">
+            {userId}
+          </Text>
+        )}
+      </Group>
+    )
+
+    return showEmailTooltip ? (
+      <Tooltip label={error ? 'Error loading user' : 'User not found'}>{content}</Tooltip>
+    ) : (
+      content
+    )
+  }
+
+  // Generate initials from name
+  const getInitials = (name: string): string => {
+    const parts = name.trim().split(/\s+/)
+    if (parts.length === 1) return parts[0].charAt(0).toUpperCase()
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
+  }
+
+  // Render avatar
+  const renderAvatar = () => {
+    // Special case: anonymous user
+    if (userId === 'anonymous') {
+      return (
+        <Avatar size={avatarSize} color="orange">
+          <IconUserOff size={avatarSize * 0.6} />
+        </Avatar>
+      )
+    }
+
+    // When inside Badge wrapper with filled/light variant, use white background for visibility
+    // For outline badges or no badge, use the passed color
+    let avatarColor = color || 'blue'
+    let avatarStyles: React.CSSProperties = {}
+
+    if (onRemove || showBadge) {
+      if (badgeVariant === 'filled') {
+        // Filled badges: white background with dark text for maximum contrast
+        avatarStyles = {
+          backgroundColor: 'white',
+          color: 'var(--mantine-color-dark-6)',
+        }
+      } else if (badgeVariant === 'light') {
+        // Light badges: use dark avatar for contrast
+        avatarColor = 'dark'
+      }
+      // outline badges: keep the passed color
+    }
+
+    return (
+      <Avatar
+        src={userMetadata.avatarUrl}
+        size={avatarSize}
+        color={avatarColor}
+        style={avatarStyles}
+      >
+        {!userMetadata.avatarUrl && getInitials(userMetadata.name)}
+      </Avatar>
+    )
+  }
+
+  // Render content based on variant
+  const renderContent = () => {
+    const avatar = renderAvatar()
+
+    switch (variant) {
+      case 'avatar-only':
+        return avatar
+
+      case 'full':
+        return (
+          <Group gap={4}>
+            {avatar}
+            <div>
+              <Text size={textSize} fw={500}>
+                {userMetadata.name}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {userMetadata.email}
+              </Text>
+            </div>
+          </Group>
+        )
+
+      case 'avatar-name':
+      default:
+        return (
+          <Group gap={4}>
+            {avatar}
+            <Text size={textSize} fw={500}>
+              {userId === 'anonymous' ? 'Anonymous (Public)' : userMetadata.name}
+            </Text>
+          </Group>
+        )
+    }
+  }
+
+  const content = renderContent()
+
+  // If onRemove or showBadge, wrap the content in a Badge
+  if (onRemove || showBadge) {
+    const badgeContent = (
+      <Badge
+        variant={badgeVariant}
+        color={color}
+        pr={onRemove ? 3 : 8}
+        pl={4}
+        rightSection={
+          onRemove ? (
+            <ActionIcon
+              size="xs"
+              radius="xl"
+              variant="transparent"
+              onClick={() => onRemove(userId)}
+              aria-label="Remove user"
+              style={{ color: 'white' }}
+            >
+              <IconX size={12} stroke={2.5} />
+            </ActionIcon>
+          ) : undefined
+        }
+        styles={{
+          label: {
+            textTransform: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+          },
+        }}
+      >
+        {content}
+      </Badge>
+    )
+
+    return showEmailTooltip && variant !== 'full' ? (
+      <Tooltip label={userMetadata.email}>{badgeContent}</Tooltip>
+    ) : (
+      badgeContent
+    )
+  }
+
+  // No badge wrapper - just wrap with tooltip if needed
+  return showEmailTooltip && variant !== 'full' ? (
+    <Tooltip label={userMetadata.email}>{content}</Tooltip>
+  ) : (
+    content
+  )
+}

package/src/editor/components/index.ts

@@ -0,0 +1,6 @@
+// Barrel export for all Editor UI components
+// Export components as they are created
+
+export * from './EditorFooter'
+export * from './EditorHeader'
+export * from './EditorSidebar'

package/src/editor/context/ApiClientContext.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+/**
+ * API Client Context
+ *
+ * Provides dependency injection for the API client via context-based pattern
+ * pattern that was duplicated across 6 hooks. This enables:
+ * - Clean testing via provider (no more resetApiClient() hacks)
+ * - Explicit dependency
+ * - No global mutable state
+ */
+
+import React, { createContext, useContext, useMemo } from 'react'
+import { createApiClient } from '../../api'
+
+export type ApiClient = ReturnType<typeof createApiClient>
+
+const ApiClientContext = createContext<ApiClient | null>(null)
+
+export interface ApiClientProviderProps {
+  children: React.ReactNode
+  /** Optional custom client for testing */
+  client?: ApiClient
+}
+
+/**
+ * Provider that creates and provides the API client.
+ * Use the client prop to inject a mock client for testing.
+ */
+export function ApiClientProvider({ children, client }: ApiClientProviderProps) {
+  const apiClient = useMemo(() => {
+    return client ?? createApiClient()
+  }, [client])
+
+  return <ApiClientContext.Provider value={apiClient}>{children}</ApiClientContext.Provider>
+}
+
+/**
+ * Hook to access the API client.
+ * Must be used within an ApiClientProvider.
+ */
+export function useApiClient(): ApiClient {
+  const client = useContext(ApiClientContext)
+  if (!client) {
+    throw new Error('useApiClient must be used within an ApiClientProvider')
+  }
+  return client
+}
+
+/**
+ * Hook that returns the API client or null if not in a provider.
+ * Useful for conditional usage or graceful degradation.
+ */
+export function useOptionalApiClient(): ApiClient | null {
+  return useContext(ApiClientContext)
+}

package/src/editor/context/EditorStateContext.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+/**
+ * Editor State Context
+ *
+ * Consolidates editor-wide state that was previously scattered across
+ * the Editor component. This reduces prop drilling and makes state
+ * management more explicit.
+ *
+ * Manages:
+ * - Loading states (branches, entries, comments)
+ * - Modal/drawer open states
+ * - Preview data and loading state
+ */
+
+import React, { createContext, useContext, useCallback, useState, useMemo } from 'react'
+import type { FormValue } from '../FormRenderer'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface LoadingState {
+  branches: boolean
+  entries: boolean
+  comments: boolean
+}
+
+export interface ModalState {
+  navigator: boolean
+  branchManager: boolean
+  groupManager: boolean
+  permissionManager: boolean
+  commentsPanel: boolean
+}
+
+export interface PreviewState {
+  data: FormValue
+  loading: FormValue
+}
+
+export interface EditorState {
+  loading: LoadingState
+  modals: ModalState
+  preview: PreviewState
+  /** True if any resource is loading */
+  busy: boolean
+}
+
+export interface EditorStateActions {
+  setLoading: (key: keyof LoadingState, value: boolean) => void
+  openModal: (key: keyof ModalState) => void
+  closeModal: (key: keyof ModalState) => void
+  toggleModal: (key: keyof ModalState) => void
+  setPreviewData: (data: FormValue) => void
+  setPreviewLoading: (loading: FormValue) => void
+}
+
+export interface EditorStateContextValue {
+  state: EditorState
+  actions: EditorStateActions
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const EditorStateContext = createContext<EditorStateContextValue | null>(null)
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+export interface EditorStateProviderProps {
+  children: React.ReactNode
+  /** Initial modal states (useful for deep linking) */
+  initialModals?: Partial<ModalState>
+}
+
+export function EditorStateProvider({ children, initialModals }: EditorStateProviderProps) {
+  // Loading states
+  const [loading, setLoadingState] = useState<LoadingState>({
+    branches: false,
+    entries: false,
+    comments: false,
+  })
+
+  // Modal states
+  const [modals, setModals] = useState<ModalState>({
+    navigator: false,
+    branchManager: false,
+    groupManager: false,
+    permissionManager: false,
+    commentsPanel: false,
+    ...initialModals,
+  })
+
+  // Preview states
+  const [previewData, setPreviewDataState] = useState<FormValue>({})
+  const [previewLoading, setPreviewLoadingState] = useState<FormValue>({})
+
+  // Computed busy state
+  const busy = loading.branches || loading.entries || loading.comments
+
+  // Actions
+  const setLoading = useCallback((key: keyof LoadingState, value: boolean) => {
+    setLoadingState((prev) => ({ ...prev, [key]: value }))
+  }, [])
+
+  const openModal = useCallback((key: keyof ModalState) => {
+    setModals((prev) => ({ ...prev, [key]: true }))
+  }, [])
+
+  const closeModal = useCallback((key: keyof ModalState) => {
+    setModals((prev) => ({ ...prev, [key]: false }))
+  }, [])
+
+  const toggleModal = useCallback((key: keyof ModalState) => {
+    setModals((prev) => ({ ...prev, [key]: !prev[key] }))
+  }, [])
+
+  const setPreviewData = useCallback((data: FormValue) => {
+    setPreviewDataState(data)
+  }, [])
+
+  const setPreviewLoading = useCallback((loading: FormValue) => {
+    setPreviewLoadingState(loading)
+  }, [])
+
+  // Memoize context value
+  const value = useMemo<EditorStateContextValue>(
+    () => ({
+      state: {
+        loading,
+        modals,
+        preview: {
+          data: previewData,
+          loading: previewLoading,
+        },
+        busy,
+      },
+      actions: {
+        setLoading,
+        openModal,
+        closeModal,
+        toggleModal,
+        setPreviewData,
+        setPreviewLoading,
+      },
+    }),
+    [
+      loading,
+      modals,
+      previewData,
+      previewLoading,
+      busy,
+      setLoading,
+      openModal,
+      closeModal,
+      toggleModal,
+      setPreviewData,
+      setPreviewLoading,
+    ],
+  )
+
+  return <EditorStateContext.Provider value={value}>{children}</EditorStateContext.Provider>
+}
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+/**
+ * Access the full editor state context.
+ * Must be used within an EditorStateProvider.
+ */
+export function useEditorState(): EditorStateContextValue {
+  const context = useContext(EditorStateContext)
+  if (!context) {
+    throw new Error('useEditorState must be used within an EditorStateProvider')
+  }
+  return context
+}
+
+/**
+ * Convenience hook for loading states only.
+ */
+export function useEditorLoading() {
+  const { state, actions } = useEditorState()
+  return {
+    ...state.loading,
+    busy: state.busy,
+    setLoading: actions.setLoading,
+  }
+}
+
+/**
+ * Convenience hook for modal states only.
+ */
+export function useEditorModals() {
+  const { state, actions } = useEditorState()
+  return {
+    ...state.modals,
+    openModal: actions.openModal,
+    closeModal: actions.closeModal,
+    toggleModal: actions.toggleModal,
+  }
+}
+
+/**
+ * Convenience hook for preview state only.
+ */
+export function useEditorPreview() {
+  const { state, actions } = useEditorState()
+  return {
+    data: state.preview.data,
+    loading: state.preview.loading,
+    setData: actions.setPreviewData,
+    setLoading: actions.setPreviewLoading,
+  }
+}

package/src/editor/context/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Editor Context Providers
+ *
+ * These contexts consolidate editor-wide state and dependencies:
+ *
+ * - ApiClientContext: Dependency injection for API client (context-based pattern)
+ * - EditorStateContext: Loading states, modal states, preview data
+ *
+ * Usage:
+ * ```tsx
+ * <ApiClientProvider>
+ *   <EditorStateProvider>
+ *     <Editor />
+ *   </EditorStateProvider>
+ * </ApiClientProvider>
+ * ```
+ */
+
+export {
+  ApiClientProvider,
+  useApiClient,
+  useOptionalApiClient,
+  type ApiClient,
+  type ApiClientProviderProps,
+} from './ApiClientContext'
+
+export {
+  EditorStateProvider,
+  useEditorState,
+  useEditorLoading,
+  useEditorModals,
+  useEditorPreview,
+  type EditorState,
+  type EditorStateActions,
+  type EditorStateContextValue,
+  type EditorStateProviderProps,
+  type LoadingState,
+  type ModalState,
+  type PreviewState,
+} from './EditorStateContext'