canopycms 0.0.0 → 0.0.2

package/src/editor/permission-manager/PermissionEditor.tsx

@@ -1,321 +0,0 @@
-'use client'
-
-/**
- * Permission editor panel for a selected tree node.
- * Handles permission CRUD with tabs for each level.
- */
-
-import React from 'react'
-import { ActionIcon, Badge, Button, Group, Paper, Stack, Tabs, Text, Tooltip } from '@mantine/core'
-import { IconSearch, IconX, IconUserOff } from '@tabler/icons-react'
-import type {
-  TreeNode,
-  PermissionLevel,
-  PermissionTarget,
-  GroupSelectItem,
-  UserSearchResult,
-} from './types'
-import { PERMISSION_LEVELS, LEVEL_CONFIG } from './constants'
-import { GroupSelector } from './GroupSelector'
-import { UserSelector } from './UserSelector'
-import { UserBadge } from '../components/UserBadge'
-
-export interface PermissionEditorProps {
-  node: TreeNode
-  activeLevel: PermissionLevel
-  onSetActiveLevel: (level: PermissionLevel) => void
-  canEdit: boolean
-  groups: GroupSelectItem[]
-  /** Whether this node is selected (used for search panel visibility) */
-  isSelected: boolean
-  // User search
-  userSearchResults: UserSearchResult[]
-  isSearchingUsers: boolean
-  showUserSearch: boolean
-  userSearchQuery: string
-  userSearchError: string | null
-  onSearchUsers: (query: string) => void
-  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
-  onToggleUserSearch: (show: boolean) => void
-  onAddUser: (path: string, level: PermissionLevel, userId: string) => void
-  onRemoveUser: (path: string, level: PermissionLevel, userId: string) => void
-  // Group search
-  showGroupSearch: boolean
-  groupSearchQuery: string
-  filteredGroups: GroupSelectItem[]
-  onSearchGroups: (query: string) => void
-  onToggleGroupSearch: (show: boolean) => void
-  onAddGroup: (path: string, level: PermissionLevel, groupId: string) => void
-  onRemoveGroup: (path: string, level: PermissionLevel, groupId: string) => void
-}
-
-export const PermissionEditor: React.FC<PermissionEditorProps> = ({
-  node,
-  activeLevel,
-  onSetActiveLevel,
-  canEdit,
-  groups,
-  isSelected,
-  userSearchResults,
-  isSearchingUsers,
-  showUserSearch,
-  userSearchQuery,
-  userSearchError,
-  onSearchUsers,
-  onGetUserMetadata,
-  onToggleUserSearch,
-  onAddUser,
-  onRemoveUser,
-  showGroupSearch,
-  groupSearchQuery,
-  filteredGroups,
-  onSearchGroups,
-  onToggleGroupSearch,
-  onAddGroup,
-  onRemoveGroup,
-}) => {
-  const directPerm = node.directPermission
-  const inheritedPerm = node.inheritedPermission
-
-  // Get permission target for a level (from direct or inherited)
-  const getTargetForLevel = (
-    level: PermissionLevel,
-    source: 'direct' | 'inherited',
-  ): PermissionTarget | undefined => {
-    const perm = source === 'direct' ? directPerm : inheritedPerm
-    return perm?.[level]
-  }
-
-  return (
-    <Paper withBorder p="sm" ml={32} mt="xs" mb="xs">
-      <Stack gap="sm">
-        <Text size="xs" fw={500} c="dimmed">
-          Path: {node.path}
-          {node.type === 'folder' ? '/**' : ''}
-        </Text>
-
-        {/* Level tabs - keepMounted={false} ensures only active panel is in DOM */}
-        <Tabs
-          value={activeLevel}
-          onChange={(v) => onSetActiveLevel(v as PermissionLevel)}
-          keepMounted={false}
-        >
-          <Tabs.List>
-            {PERMISSION_LEVELS.map((level) => (
-              <Tabs.Tab key={level} value={level} leftSection={LEVEL_CONFIG[level].icon}>
-                {LEVEL_CONFIG[level].label}
-              </Tabs.Tab>
-            ))}
-          </Tabs.List>
-
-          {PERMISSION_LEVELS.map((level) => {
-            const directTarget = getTargetForLevel(level, 'direct')
-            const inheritedTarget = getTargetForLevel(level, 'inherited')
-
-            return (
-              <Tabs.Panel key={level} value={level} pt="sm">
-                {/* Inherited permissions display */}
-                {inheritedTarget && (
-                  <div style={{ marginBottom: 'var(--mantine-spacing-sm)' }}>
-                    <Text size="xs" fw={500} mb={4} c="dimmed">
-                      Inherited from parent
-                    </Text>
-                    <Group gap="xs">
-                      {inheritedTarget.allowedGroups?.map((groupId) => {
-                        const groupInfo = groups.find((g) => g.value === groupId)
-                        return (
-                          <Badge
-                            key={`inherited-group-${groupId}`}
-                            variant="outline"
-                            color="gray"
-                            size="xs"
-                          >
-                            {groupInfo?.label ?? groupId}
-                          </Badge>
-                        )
-                      })}
-                      {inheritedTarget.allowedUsers?.map((userId) =>
-                        onGetUserMetadata ? (
-                          <UserBadge
-                            key={`inherited-user-${userId}`}
-                            userId={userId}
-                            getUserMetadata={onGetUserMetadata}
-                            variant="avatar-name"
-                            size="xs"
-                            badgeVariant="outline"
-                            color="gray"
-                            showEmailTooltip={true}
-                            showBadge={true}
-                          />
-                        ) : (
-                          <Badge
-                            key={`inherited-user-${userId}`}
-                            variant="outline"
-                            color={userId === 'anonymous' ? 'orange' : 'gray'}
-                            size="xs"
-                            leftSection={
-                              userId === 'anonymous' ? <IconUserOff size={10} /> : undefined
-                            }
-                          >
-                            {userId === 'anonymous' ? 'Anonymous (Public)' : userId}
-                          </Badge>
-                        ),
-                      )}
-                    </Group>
-                  </div>
-                )}
-
-                {canEdit ? (
-                  <div>
-                    <Text size="xs" fw={500} mb={4}>
-                      {LEVEL_CONFIG[level].label} Access
-                    </Text>
-
-                    {/* Badges for groups and users */}
-                    <Group gap="xs" mb="xs">
-                      {(directTarget?.allowedGroups ?? []).map((groupId) => {
-                        const groupInfo = groups.find((g) => g.value === groupId)
-                        return (
-                          <Badge
-                            key={`group-${groupId}`}
-                            variant="filled"
-                            color={LEVEL_CONFIG[level].color}
-                            pr={3}
-                            rightSection={
-                              <ActionIcon
-                                size="xs"
-                                color={LEVEL_CONFIG[level].color}
-                                radius="xl"
-                                variant="transparent"
-                                onClick={() => onRemoveGroup(node.path, level, groupId)}
-                              >
-                                <IconX size={12} stroke={2.5} style={{ color: 'white' }} />
-                              </ActionIcon>
-                            }
-                          >
-                            {groupInfo?.label ?? groupId}
-                          </Badge>
-                        )
-                      })}
-
-                      {(directTarget?.allowedUsers ?? []).map((userId) =>
-                        onGetUserMetadata ? (
-                          <UserBadge
-                            key={`user-${userId}`}
-                            userId={userId}
-                            getUserMetadata={onGetUserMetadata}
-                            variant="avatar-name"
-                            size="xs"
-                            badgeVariant="filled"
-                            color={userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color}
-                            onRemove={() => onRemoveUser(node.path, level, userId)}
-                            showEmailTooltip={true}
-                          />
-                        ) : (
-                          <Badge
-                            key={`user-${userId}`}
-                            variant="filled"
-                            color={userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color}
-                            pr={3}
-                            leftSection={
-                              userId === 'anonymous' ? <IconUserOff size={12} /> : undefined
-                            }
-                            rightSection={
-                              <ActionIcon
-                                size="xs"
-                                color={
-                                  userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color
-                                }
-                                radius="xl"
-                                variant="transparent"
-                                onClick={() => onRemoveUser(node.path, level, userId)}
-                              >
-                                <IconX size={12} stroke={2.5} style={{ color: 'white' }} />
-                              </ActionIcon>
-                            }
-                          >
-                            {userId === 'anonymous' ? 'Anonymous (Public)' : userId}
-                          </Badge>
-                        ),
-                      )}
-
-                      {(!directTarget?.allowedGroups || directTarget.allowedGroups.length === 0) &&
-                        (!directTarget?.allowedUsers || directTarget.allowedUsers.length === 0) && (
-                          <Text size="xs" c="dimmed">
-                            No groups or users assigned for {level}
-                          </Text>
-                        )}
-                    </Group>
-
-                    {/* Action buttons */}
-                    <Group gap="xs">
-                      <Button
-                        size="xs"
-                        variant="subtle"
-                        leftSection={<IconSearch size={14} />}
-                        onClick={() => onToggleGroupSearch(!showGroupSearch)}
-                      >
-                        {showGroupSearch ? 'Cancel' : 'Add Groups'}
-                      </Button>
-
-                      <Button
-                        size="xs"
-                        variant="subtle"
-                        leftSection={<IconSearch size={14} />}
-                        onClick={() => onToggleUserSearch(!showUserSearch)}
-                      >
-                        {showUserSearch ? 'Cancel' : 'Add User'}
-                      </Button>
-
-                      {/* Anonymous user button - only show if not already added */}
-                      {!(directTarget?.allowedUsers ?? []).includes('anonymous') && (
-                        <Tooltip label="Allow unauthenticated/public access">
-                          <Button
-                            size="xs"
-                            variant="subtle"
-                            color="orange"
-                            leftSection={<IconUserOff size={14} />}
-                            onClick={() => onAddUser(node.path, level, 'anonymous')}
-                          >
-                            Add Anonymous
-                          </Button>
-                        </Tooltip>
-                      )}
-                    </Group>
-
-                    {/* Group search panel - only show when this node is selected and on active level */}
-                    {showGroupSearch && isSelected && activeLevel === level && (
-                      <GroupSelector
-                        searchQuery={groupSearchQuery}
-                        onSearchChange={onSearchGroups}
-                        filteredGroups={filteredGroups}
-                        onSelectGroup={(groupId) => onAddGroup(node.path, level, groupId)}
-                      />
-                    )}
-
-                    {/* User search panel - only show when this node is selected and on active level */}
-                    {showUserSearch && isSelected && activeLevel === level && (
-                      <UserSelector
-                        searchQuery={userSearchQuery}
-                        onSearchChange={onSearchUsers}
-                        searchResults={userSearchResults}
-                        isSearching={isSearchingUsers}
-                        searchError={userSearchError}
-                        onSelectUser={(userId) => onAddUser(node.path, level, userId)}
-                        onGetUserMetadata={onGetUserMetadata}
-                      />
-                    )}
-                  </div>
-                ) : (
-                  <Text size="xs" c="dimmed">
-                    {directTarget ? 'Read-only view' : 'No direct permissions set'}
-                  </Text>
-                )}
-              </Tabs.Panel>
-            )
-          })}
-        </Tabs>
-      </Stack>
-    </Paper>
-  )
-}

package/src/editor/permission-manager/PermissionLevelBadge.tsx

@@ -1,53 +0,0 @@
-'use client'
-
-/**
- * Badge component for displaying permission levels
- */
-
-import React from 'react'
-import { Badge, Tooltip } from '@mantine/core'
-import type { PermissionLevel, PermissionTarget } from './types'
-import { LEVEL_CONFIG } from './constants'
-
-export interface PermissionLevelBadgeProps {
-  level: PermissionLevel
-  target?: PermissionTarget
-  inherited?: PermissionTarget
-}
-
-/**
- * Displays a badge for a permission level.
- * Shows filled badge for direct permissions, outlined for inherited.
- */
-export const PermissionLevelBadge: React.FC<PermissionLevelBadgeProps> = ({
-  level,
-  target,
-  inherited,
-}) => {
-  const hasPerms =
-    target && ((target.allowedUsers?.length ?? 0) > 0 || (target.allowedGroups?.length ?? 0) > 0)
-  const hasInherited =
-    !hasPerms &&
-    inherited &&
-    ((inherited.allowedUsers?.length ?? 0) > 0 || (inherited.allowedGroups?.length ?? 0) > 0)
-
-  if (hasPerms) {
-    return (
-      <Badge size="xs" variant="filled" color={LEVEL_CONFIG[level].color}>
-        {LEVEL_CONFIG[level].label}
-      </Badge>
-    )
-  }
-
-  if (hasInherited) {
-    return (
-      <Tooltip label={`${LEVEL_CONFIG[level].label} inherited from parent`}>
-        <Badge size="xs" variant="outline" color="gray">
-          {LEVEL_CONFIG[level].label}
-        </Badge>
-      </Tooltip>
-    )
-  }
-
-  return null
-}

package/src/editor/permission-manager/PermissionTree.tsx

@@ -1,237 +0,0 @@
-'use client'
-
-/**
- * Tree visualization component for permission management.
- * Renders the content tree with permission badges and handles selection.
- */
-
-import React from 'react'
-import { ActionIcon, Collapse } from '@mantine/core'
-import { IconChevronRight, IconChevronDown, IconFolder, IconFile } from '@tabler/icons-react'
-import type {
-  TreeNode,
-  PermissionLevel,
-  PermissionTarget,
-  GroupSelectItem,
-  UserSearchResult,
-} from './types'
-import { PERMISSION_LEVELS } from './constants'
-import { PermissionLevelBadge } from './PermissionLevelBadge'
-import { PermissionEditor } from './PermissionEditor'
-
-export interface PermissionTreeProps {
-  node: TreeNode
-  expandedNodes: Set<string>
-  selectedNode: string | null
-  canEdit: boolean
-  groups: GroupSelectItem[]
-  activeLevel: PermissionLevel
-  // User search props
-  userSearchResults: UserSearchResult[]
-  isSearchingUsers: boolean
-  showUserSearch: boolean
-  userSearchQuery: string
-  userSearchError: string | null
-  // Group search props
-  showGroupSearch: boolean
-  groupSearchQuery: string
-  filteredGroups: GroupSelectItem[]
-  // Callbacks
-  onToggle: (path: string) => void
-  onSelect: (path: string | null) => void
-  onSetActiveLevel: (level: PermissionLevel) => void
-  onUpdatePermission: (
-    path: string,
-    level: PermissionLevel,
-    updates: Partial<PermissionTarget>,
-  ) => void
-  onSearchUsers: (query: string) => void
-  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
-  onToggleUserSearch: (show: boolean) => void
-  onAddUser: (path: string, level: PermissionLevel, userId: string) => void
-  onRemoveUser: (path: string, level: PermissionLevel, userId: string) => void
-  onSearchGroups: (query: string) => void
-  onToggleGroupSearch: (show: boolean) => void
-  onAddGroup: (path: string, level: PermissionLevel, groupId: string) => void
-  onRemoveGroup: (path: string, level: PermissionLevel, groupId: string) => void
-}
-
-export const PermissionTree: React.FC<PermissionTreeProps> = ({
-  node,
-  expandedNodes,
-  selectedNode,
-  canEdit,
-  groups,
-  activeLevel,
-  userSearchResults,
-  isSearchingUsers,
-  showUserSearch,
-  userSearchQuery,
-  userSearchError,
-  showGroupSearch,
-  groupSearchQuery,
-  filteredGroups,
-  onToggle,
-  onSelect,
-  onSetActiveLevel,
-  onUpdatePermission,
-  onSearchUsers,
-  onGetUserMetadata,
-  onToggleUserSearch,
-  onAddUser,
-  onRemoveUser,
-  onSearchGroups,
-  onToggleGroupSearch,
-  onAddGroup,
-  onRemoveGroup,
-}) => {
-  const isExpanded = expandedNodes.has(node.path)
-  const isSelected = selectedNode === node.path
-  const hasChildren = node.children.length > 0
-
-  const handleClick = () => {
-    if (node.type === 'folder') {
-      onToggle(node.path)
-    }
-    onSelect(node.path === selectedNode ? null : node.path)
-  }
-
-  const directPerm = node.directPermission
-  const inheritedPerm = node.inheritedPermission
-
-  // Get permission target for a level (from direct or inherited)
-  const getTargetForLevel = (
-    level: PermissionLevel,
-    source: 'direct' | 'inherited',
-  ): PermissionTarget | undefined => {
-    const perm = source === 'direct' ? directPerm : inheritedPerm
-    return perm?.[level]
-  }
-
-  return (
-    <div>
-      {/* Tree node row */}
-      <div
-        style={{
-          display: 'flex',
-          gap: 'var(--mantine-spacing-xs)',
-          padding: '4px var(--mantine-spacing-xs)',
-          cursor: 'pointer',
-          backgroundColor: isSelected ? 'var(--mantine-color-blue-light)' : 'transparent',
-          borderRadius: 'var(--mantine-radius-sm)',
-        }}
-        onClick={handleClick}
-      >
-        {/* Tree controls and icon - fixed width container */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'flex-start',
-            gap: 'var(--mantine-spacing-xs)',
-            flexShrink: 0,
-          }}
-        >
-          {node.type === 'folder' && hasChildren && (
-            <ActionIcon size="xs" variant="transparent" color="gray">
-              {isExpanded ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-            </ActionIcon>
-          )}
-          {(node.type === 'file' || (node.type === 'folder' && !hasChildren)) && (
-            <div style={{ width: 18 }} />
-          )}
-          {node.type === 'folder' ? <IconFolder size={16} /> : <IconFile size={16} />}
-          <span style={{ fontSize: '14px', whiteSpace: 'nowrap' }}>{node.name}</span>
-        </div>
-
-        {/* Show permission level badges */}
-        <div
-          style={{
-            display: 'flex',
-            gap: 4,
-            flexWrap: 'wrap',
-            alignItems: 'center',
-            minWidth: 0,
-          }}
-        >
-          {PERMISSION_LEVELS.map((level) => (
-            <PermissionLevelBadge
-              key={level}
-              level={level}
-              target={getTargetForLevel(level, 'direct')}
-              inherited={getTargetForLevel(level, 'inherited')}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* Expanded permission editor - use Collapse for animation, content stays in DOM for test accessibility */}
-      <Collapse in={isSelected}>
-        <PermissionEditor
-          node={node}
-          activeLevel={activeLevel}
-          onSetActiveLevel={onSetActiveLevel}
-          canEdit={canEdit}
-          groups={groups}
-          userSearchResults={userSearchResults}
-          isSearchingUsers={isSearchingUsers}
-          showUserSearch={showUserSearch}
-          userSearchQuery={userSearchQuery}
-          userSearchError={userSearchError}
-          onSearchUsers={onSearchUsers}
-          onGetUserMetadata={onGetUserMetadata}
-          onToggleUserSearch={onToggleUserSearch}
-          onAddUser={onAddUser}
-          onRemoveUser={onRemoveUser}
-          showGroupSearch={showGroupSearch}
-          groupSearchQuery={groupSearchQuery}
-          filteredGroups={filteredGroups}
-          onSearchGroups={onSearchGroups}
-          onToggleGroupSearch={onToggleGroupSearch}
-          onAddGroup={onAddGroup}
-          onRemoveGroup={onRemoveGroup}
-          isSelected={isSelected}
-        />
-      </Collapse>
-
-      {/* Children */}
-      {node.type === 'folder' && hasChildren && (
-        <Collapse in={isExpanded}>
-          <div style={{ paddingLeft: 16 }}>
-            {node.children.map((child) => (
-              <PermissionTree
-                key={child.path}
-                node={child}
-                expandedNodes={expandedNodes}
-                selectedNode={selectedNode}
-                canEdit={canEdit}
-                groups={groups}
-                activeLevel={activeLevel}
-                userSearchResults={userSearchResults}
-                isSearchingUsers={isSearchingUsers}
-                showUserSearch={showUserSearch}
-                userSearchQuery={userSearchQuery}
-                userSearchError={userSearchError}
-                showGroupSearch={showGroupSearch}
-                groupSearchQuery={groupSearchQuery}
-                filteredGroups={filteredGroups}
-                onToggle={onToggle}
-                onSelect={onSelect}
-                onSetActiveLevel={onSetActiveLevel}
-                onUpdatePermission={onUpdatePermission}
-                onSearchUsers={onSearchUsers}
-                onGetUserMetadata={onGetUserMetadata}
-                onToggleUserSearch={onToggleUserSearch}
-                onAddUser={onAddUser}
-                onRemoveUser={onRemoveUser}
-                onSearchGroups={onSearchGroups}
-                onToggleGroupSearch={onToggleGroupSearch}
-                onAddGroup={onAddGroup}
-                onRemoveGroup={onRemoveGroup}
-              />
-            ))}
-          </div>
-        </Collapse>
-      )}
-    </div>
-  )
-}