canopycms 0.0.0 → 0.0.2

package/src/editor/components/EditorHeader.tsx

@@ -1,492 +0,0 @@
-import { forwardRef } from 'react'
-import { Badge, Box, Button, Group, Menu, Paper, Stack, Text, Title, Tooltip } from '@mantine/core'
-import { MdFolderOpen, MdKeyboardArrowDown } from 'react-icons/md'
-import { GoGitBranch } from 'react-icons/go'
-import type { OperatingMode } from '../../operating-mode'
-import type { BranchStatus } from '../../types'
-import type { EditorEntry } from '../Editor'
-import type { LogicalPath } from '../../paths/types'
-import { clientOperatingStrategy } from '../../operating-mode/client'
-
-/**
- * Props for the EditorHeader component.
- */
-export interface EditorHeaderProps {
-  /**
-   * Site title displayed in the top-left.
-   */
-  siteTitle: string
-
-  /**
-   * Optional site subtitle displayed below the title.
-   */
-  siteSubtitle?: string
-
-  /**
-   * Main header title displayed in the center.
-   */
-  headerTitle: string
-
-  /**
-   * Currently selected entry.
-   */
-  currentEntry: EditorEntry | undefined
-
-  /**
-   * Current branch name.
-   */
-  branchName: string
-
-  /**
-   * Operating mode.
-   */
-  operatingMode: OperatingMode
-
-  /**
-   * Whether operations are currently in progress.
-   */
-  busy: boolean
-
-  /**
-   * Breadcrumb segments to display.
-   */
-  breadcrumbSegments: string[]
-
-  /**
-   * List of edited files.
-   */
-  editedFiles: Array<{ path: LogicalPath; label: string }>
-
-  /**
-   * Number of modified files.
-   */
-  modifiedCount: number
-
-  /**
-   * Number of unresolved comments.
-   */
-  unresolvedCommentCount: number
-
-  /**
-   * Unresolved comments (for filtering).
-   */
-  comments: Array<{ resolved: boolean }>
-
-  /**
-   * Callback to open the entry navigator.
-   */
-  onNavigatorOpen: () => void
-
-  /**
-   * Callback to reload the current file.
-   */
-  onFileReload: () => void
-
-  /**
-   * Callback to discard the current file draft.
-   */
-  onFileDiscardDraft: () => void
-
-  /**
-   * Callback when an entry is selected.
-   */
-  onEntrySelect: (id: string) => void
-
-  /**
-   * Callback to reload all branch data.
-   */
-  onBranchReloadData: () => void
-
-  /**
-   * Callback to discard all drafts.
-   */
-  onBranchDiscardDrafts: () => void
-
-  /**
-   * Callback to open the branch manager.
-   */
-  onBranchManagerOpen: () => void
-
-  /**
-   * Callback to open the comments panel.
-   */
-  onCommentsPanelOpen: () => void
-
-  /**
-   * Callback to save the current file.
-   */
-  onSave: () => void
-
-  /**
-   * Callback to submit/publish the branch.
-   */
-  onSubmit: () => void
-
-  /**
-   * Whether the current entry has unsaved changes.
-   */
-  hasUnsavedChanges: boolean
-
-  /**
-   * Current branch status (undefined if unknown).
-   */
-  branchStatus: BranchStatus | undefined
-
-  /**
-   * Callback to withdraw the branch.
-   */
-  onWithdraw: () => void
-
-  /**
-   * Current user context for permission checks.
-   */
-  userContext?: { userId: string; groups?: string[] }
-
-  /**
-   * Branch creator user ID.
-   */
-  branchCreatedBy?: string
-
-  /**
-   * Branch access control lists.
-   */
-  branchAccess?: { allowedUsers?: string[]; allowedGroups?: string[] }
-}
-
-/**
- * Status color map matching BranchManager.tsx pattern.
- * Returns the Mantine color string for a given branch status.
- */
-const getStatusColor = (status: BranchStatus): string => {
-  const statusColorMap: Record<BranchStatus, string> = {
-    editing: 'brand',
-    submitted: 'green',
-    approved: 'teal',
-    locked: 'yellow',
-    archived: 'gray',
-  }
-  return statusColorMap[status] ?? 'gray'
-}
-
-/**
- * Header component for the Editor.
- * Contains site info, file navigation, breadcrumbs, branch selector, comments button, and action buttons.
- *
- * @example
- * ```tsx
- * <EditorHeader
- *   siteTitle="My Site"
- *   siteSubtitle="CMS"
- *   headerTitle="Edit Content"
- *   currentEntry={currentEntry}
- *   branchName="main"
- *   operatingMode="collaboration"
- *   busy={false}
- *   breadcrumbSegments={['Posts', 'My Post']}
- *   editedFiles={[]}
- *   modifiedCount={0}
- *   unresolvedCommentCount={0}
- *   comments={[]}
- *   onNavigatorOpen={() => setNavigatorOpen(true)}
- *   onFileReload={handleReload}
- *   onFileDiscardDraft={handleDiscardFileDraft}
- *   onEntrySelect={setSelectedId}
- *   onBranchReloadData={handleReloadBranchData}
- *   onBranchDiscardDrafts={handleDiscardDrafts}
- *   onBranchManagerOpen={() => setBranchManagerOpen(true)}
- *   onCommentsPanelOpen={() => setCommentsPanelOpen(true)}
- *   onSave={handleSave}
- *   onSubmit={() => handleSubmit(branchName)}
- * />
- * ```
- */
-export const EditorHeader = forwardRef<HTMLDivElement, EditorHeaderProps>(function EditorHeader(
-  {
-    siteTitle,
-    siteSubtitle,
-    headerTitle,
-    currentEntry,
-    branchName,
-    operatingMode,
-    busy,
-    breadcrumbSegments,
-    editedFiles,
-    modifiedCount,
-    unresolvedCommentCount: _,
-    comments,
-    onNavigatorOpen,
-    onFileReload,
-    onFileDiscardDraft,
-    onEntrySelect,
-    onBranchReloadData,
-    onBranchDiscardDrafts,
-    onBranchManagerOpen,
-    onCommentsPanelOpen,
-    onSave,
-    onSubmit,
-    hasUnsavedChanges,
-    branchStatus,
-    onWithdraw,
-    userContext,
-    branchCreatedBy,
-    branchAccess,
-  }: EditorHeaderProps,
-  ref,
-) {
-  return (
-    <Paper
-      ref={ref}
-      shadow="md"
-      withBorder
-      radius={0}
-      px={0}
-      py={0}
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: 70,
-      }}
-    >
-      <Box px="md" py="sm">
-        <Group justify="space-between" align="center" wrap="nowrap">
-          <Stack gap={2} style={{ minWidth: 0 }}>
-            <Title order={5} style={{ lineHeight: 1.1 }}>
-              {siteTitle}
-            </Title>
-            {siteSubtitle && (
-              <Text size="xs" c="dimmed">
-                {siteSubtitle}
-              </Text>
-            )}
-          </Stack>
-          <Stack gap={6} style={{ minWidth: 0, flex: 1, alignItems: 'center' }}>
-            <Title order={4} style={{ lineHeight: 1.1 }}>
-              {headerTitle}
-            </Title>
-            <Group
-              gap="sm"
-              wrap="wrap"
-              align="center"
-              style={{ minWidth: 0, justifyContent: 'center' }}
-            >
-              <Menu withinPortal shadow="sm">
-                <Menu.Target>
-                  <Button
-                    data-testid="file-dropdown-button"
-                    variant="outline"
-                    color="gray"
-                    size="xs"
-                    leftSection={<MdFolderOpen size={16} />}
-                    rightSection={<MdKeyboardArrowDown size={14} />}
-                  >
-                    {currentEntry?.label ?? 'No file selected'}
-                  </Button>
-                </Menu.Target>
-                <Menu.Dropdown>
-                  <Menu.Item onClick={onFileReload} disabled={!branchName || !currentEntry}>
-                    Reload File
-                  </Menu.Item>
-                  <Menu.Item
-                    data-testid="discard-file-draft-menu-item"
-                    onClick={onFileDiscardDraft}
-                    disabled={!currentEntry}
-                  >
-                    Discard File Draft
-                  </Menu.Item>
-                  <Menu.Divider />
-                  <Menu.Item data-testid="all-files-menu-item" onClick={onNavigatorOpen}>
-                    All Files
-                  </Menu.Item>
-                  <Menu.Divider />
-                  <Menu.Item disabled>{'TODO: replace with real modified file list'}</Menu.Item>
-                  <Menu.Divider />
-                  <Menu.Label>Recently modified</Menu.Label>
-                  {editedFiles.slice(0, 3).length === 0 ? (
-                    <Menu.Item disabled>&lt;none&gt;</Menu.Item>
-                  ) : (
-                    editedFiles.slice(0, 3).map((file) => (
-                      <Menu.Item
-                        key={file.path}
-                        onClick={() => {
-                          onEntrySelect(file.path)
-                          onNavigatorOpen()
-                        }}
-                      >
-                        {file.label}
-                      </Menu.Item>
-                    ))
-                  )}
-                </Menu.Dropdown>
-              </Menu>
-
-              <Group gap={4} wrap="wrap" align="center" style={{ minWidth: 0 }}>
-                {breadcrumbSegments.map((segment, idx) => (
-                  <Group key={`${segment}-${idx}`} gap={4} align="center" wrap="nowrap">
-                    {idx > 0 && (
-                      <Text size="xs" c="dimmed">
-                        /
-                      </Text>
-                    )}
-                    <Button variant="subtle" size="xs" px="xs" onClick={onNavigatorOpen}>
-                      {segment}
-                    </Button>
-                  </Group>
-                ))}
-              </Group>
-
-              <Menu withinPortal shadow="sm">
-                <Menu.Target>
-                  <Button
-                    variant="outline"
-                    color="gray"
-                    size="xs"
-                    leftSection={<GoGitBranch size={16} />}
-                    rightSection={<MdKeyboardArrowDown size={14} />}
-                    disabled={!branchName}
-                    data-testid="branch-dropdown-button"
-                  >
-                    {branchName || 'No branch selected'}
-                  </Button>
-                </Menu.Target>
-                <Menu.Dropdown data-testid="branch-menu">
-                  <Menu.Item onClick={onBranchReloadData} disabled={!branchName}>
-                    Reload All Files
-                  </Menu.Item>
-                  <Menu.Item onClick={onBranchDiscardDrafts} disabled={!branchName}>
-                    Discard All File Drafts
-                  </Menu.Item>
-                  <Menu.Divider />
-                  <Menu.Item onClick={onBranchManagerOpen} data-testid="manage-branches-menu-item">
-                    Change / Manage Branches
-                  </Menu.Item>
-                  <Menu.Divider />
-                  <Menu.Label>{`${modifiedCount} files modified`}</Menu.Label>
-                  {editedFiles.length === 0 ? (
-                    <Menu.Item disabled>No edited files yet</Menu.Item>
-                  ) : (
-                    editedFiles.map((file) => (
-                      <Menu.Item
-                        key={`branch-mod-${file.path}`}
-                        onClick={() => {
-                          onEntrySelect(file.path)
-                          onNavigatorOpen()
-                        }}
-                      >
-                        {file.label}
-                      </Menu.Item>
-                    ))
-                  )}
-                  <Menu.Divider />
-                  <Menu.Item disabled>{'TODO: replace with real modified file list'}</Menu.Item>
-                </Menu.Dropdown>
-              </Menu>
-
-              {clientOperatingStrategy(operatingMode ?? 'prod').supportsStatusBadge() &&
-                branchName &&
-                branchStatus && (
-                  <Badge
-                    color={getStatusColor(branchStatus)}
-                    variant="light"
-                    size="sm"
-                    data-testid={`header-status-badge-${branchStatus}`}
-                  >
-                    {branchStatus}
-                  </Badge>
-                )}
-
-              {clientOperatingStrategy(operatingMode ?? 'prod').supportsComments() &&
-                branchName && (
-                  <Button
-                    variant="outline"
-                    color="gray"
-                    size="xs"
-                    onClick={onCommentsPanelOpen}
-                    style={{ position: 'relative' }}
-                    data-testid="comments-button"
-                  >
-                    Comments
-                    {comments.filter((t) => !t.resolved).length > 0 && (
-                      <span
-                        style={{
-                          position: 'absolute',
-                          top: -6,
-                          right: -6,
-                          background: 'var(--mantine-color-grape-6)',
-                          color: 'white',
-                          borderRadius: '50%',
-                          width: 18,
-                          height: 18,
-                          fontSize: 10,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          fontWeight: 600,
-                        }}
-                      >
-                        {comments.filter((t) => !t.resolved).length}
-                      </span>
-                    )}
-                  </Button>
-                )}
-            </Group>
-          </Stack>
-          <Group gap="xs" wrap="nowrap">
-            <Tooltip
-              label={!hasUnsavedChanges && currentEntry ? 'No changes to save' : ''}
-              disabled={hasUnsavedChanges || !currentEntry}
-            >
-              <Button
-                data-testid="save-button"
-                variant="light"
-                size="sm"
-                onClick={onSave}
-                disabled={!branchName || !currentEntry || busy || !hasUnsavedChanges}
-              >
-                Save File
-              </Button>
-            </Tooltip>
-            {(() => {
-              const isSubmitted = branchStatus === 'submitted'
-              const isEditing = branchStatus === 'editing'
-
-              // Check if user can perform workflow actions (creator OR ACL access OR system branch)
-              const userIsCreator = userContext?.userId === branchCreatedBy
-              const isSystemBranch = branchCreatedBy === 'canopycms-system'
-              const userInACL =
-                userContext &&
-                branchAccess &&
-                (branchAccess.allowedUsers?.includes(userContext.userId) ||
-                  userContext.groups?.some((g) => branchAccess.allowedGroups?.includes(g)))
-
-              const canPerformAction =
-                (userIsCreator || userInACL || isSystemBranch) && (isEditing || isSubmitted)
-
-              return (
-                <Tooltip
-                  label={
-                    !canPerformAction
-                      ? 'You do not have permission to submit or withdraw this branch'
-                      : ''
-                  }
-                  disabled={canPerformAction}
-                >
-                  <Button
-                    size="sm"
-                    color={isSubmitted ? 'orange' : 'brand'}
-                    onClick={isSubmitted ? onWithdraw : onSubmit}
-                    disabled={!branchName || busy || !canPerformAction}
-                    data-testid={isSubmitted ? 'withdraw-button' : 'submit-button'}
-                  >
-                    {isSubmitted ? 'Withdraw Branch...' : 'Submit Branch...'}
-                  </Button>
-                </Tooltip>
-              )
-            })()}
-          </Group>
-        </Group>
-      </Box>
-    </Paper>
-  )
-})

package/src/editor/components/EditorSidebar.tsx

@@ -1,193 +0,0 @@
-import { ActionIcon, Menu, Paper, Stack } from '@mantine/core'
-import { MdAccountCircle, MdLogout, MdSettings } from 'react-icons/md'
-import { PiColumnsDuotone, PiRowsDuotone } from 'react-icons/pi'
-import { LuSquareDashed } from 'react-icons/lu'
-import type { PaneLayout } from '../EditorPanes'
-
-/**
- * Props for the EditorSidebar component.
- */
-export interface EditorSidebarProps {
-  /**
-   * Current layout mode (side or stacked).
-   */
-  layout: PaneLayout
-
-  /**
-   * Whether field highlighting is enabled.
-   */
-  highlightEnabled: boolean
-
-  /**
-   * Width of the sidebar in pixels.
-   */
-  sidebarWidth: number
-
-  /**
-   * Height of the header in pixels (for positioning).
-   */
-  headerHeight: number
-
-  /**
-   * Height of the footer in pixels (for positioning).
-   */
-  footerHeight: number
-
-  /**
-   * Callback when layout changes.
-   */
-  onLayoutChange: (layout: PaneLayout) => void
-
-  /**
-   * Callback when highlight toggle is clicked.
-   */
-  onHighlightToggle: () => void
-
-  /**
-   * Callback when permission manager should be opened.
-   */
-  onPermissionManagerOpen: () => void
-
-  /**
-   * Callback when group manager should be opened.
-   */
-  onGroupManagerOpen: () => void
-
-  /**
-   * Custom account component to render (e.g., Clerk's UserButton).
-   * If provided, replaces the default account button.
-   */
-  AccountComponent?: React.ComponentType
-
-  /**
-   * Callback when account button is clicked (if no AccountComponent provided).
-   */
-  onAccountClick?: () => void
-
-  /**
-   * Callback when logout button is clicked.
-   */
-  onLogoutClick?: () => void
-}
-
-/**
- * Sidebar component for the Editor.
- * Contains layout toggle, highlight toggle, settings menu, account button, and logout button.
- *
- * @example
- * ```tsx
- * <EditorSidebar
- *   layout={layout}
- *   highlightEnabled={highlightEnabled}
- *   sidebarWidth={60}
- *   headerHeight={60}
- *   footerHeight={40}
- *   onLayoutChange={setLayout}
- *   onHighlightToggle={() => setHighlightEnabled(!highlightEnabled)}
- *   onPermissionManagerOpen={() => setPermissionManagerOpen(true)}
- *   onGroupManagerOpen={() => setGroupManagerOpen(true)}
- * />
- * ```
- */
-export function EditorSidebar({
-  layout,
-  highlightEnabled,
-  sidebarWidth,
-  headerHeight,
-  footerHeight,
-  onLayoutChange,
-  onHighlightToggle,
-  onPermissionManagerOpen,
-  onGroupManagerOpen,
-  AccountComponent,
-  onAccountClick,
-  onLogoutClick,
-}: EditorSidebarProps) {
-  return (
-    <Paper
-      withBorder
-      shadow="sm"
-      radius={0}
-      style={{
-        position: 'fixed',
-        top: headerHeight,
-        bottom: footerHeight,
-        right: 0,
-        width: sidebarWidth,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: '10px 6px',
-        gap: 8,
-      }}
-    >
-      <Stack gap="sm" align="center" style={{ width: '100%', paddingTop: 6 }}>
-        <ActionIcon
-          variant="subtle"
-          size="lg"
-          radius="md"
-          aria-label="Toggle layout"
-          onClick={() => onLayoutChange(layout === 'side' ? 'stacked' : 'side')}
-        >
-          {layout === 'side' ? <PiRowsDuotone size={18} /> : <PiColumnsDuotone size={18} />}
-        </ActionIcon>
-
-        <ActionIcon
-          variant={highlightEnabled ? 'filled' : 'subtle'}
-          color={highlightEnabled ? 'brand' : 'gray'}
-          size="lg"
-          radius="md"
-          aria-pressed={highlightEnabled}
-          aria-label="Toggle highlights"
-          onClick={onHighlightToggle}
-        >
-          <LuSquareDashed size={18} />
-        </ActionIcon>
-      </Stack>
-      <Stack gap="xs" align="center">
-        <Menu shadow="md" width={200} position="left">
-          <Menu.Target>
-            <ActionIcon variant="subtle" size="lg" radius="md" aria-label="Settings">
-              <MdSettings size={18} />
-            </ActionIcon>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <Menu.Label>Settings</Menu.Label>
-            <Menu.Item onClick={onPermissionManagerOpen}>Manage Permissions</Menu.Item>
-            <Menu.Item onClick={onGroupManagerOpen}>Manage Groups</Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
-        {/* Account section - use custom component or default buttons */}
-        {AccountComponent ? (
-          <AccountComponent />
-        ) : (
-          <>
-            {onAccountClick && (
-              <ActionIcon
-                variant="subtle"
-                size="lg"
-                radius="md"
-                aria-label="Account"
-                onClick={onAccountClick}
-              >
-                <MdAccountCircle size={18} />
-              </ActionIcon>
-            )}
-            {onLogoutClick && (
-              <ActionIcon
-                variant="subtle"
-                size="lg"
-                radius="md"
-                aria-label="Sign out"
-                onClick={onLogoutClick}
-              >
-                <MdLogout size={18} />
-              </ActionIcon>
-            )}
-          </>
-        )}
-      </Stack>
-    </Paper>
-  )
-}