canopycms 0.0.0 → 0.0.2

package/src/editor/components/UserBadge.tsx

@@ -1,240 +0,0 @@
-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

@@ -1,6 +0,0 @@
-// 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

@@ -1,56 +0,0 @@
-'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

@@ -1,221 +0,0 @@
-'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

@@ -1,40 +0,0 @@
-/**
- * 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'