canopycms 0.0.0 → 0.0.2

package/src/editor/group-manager/ExternalGroupsTab.tsx

@@ -1,114 +0,0 @@
-'use client'
-
-/**
- * External groups tab component
- */
-
-import React from 'react'
-import { Alert, Group, Loader, Paper, ScrollArea, Stack, Text, TextInput } from '@mantine/core'
-import { IconAlertCircle, IconBuilding, IconSearch } from '@tabler/icons-react'
-import type { ExternalGroup } from './types'
-
-export interface ExternalGroupsTabProps {
-  canEdit: boolean
-  searchQuery: string
-  searchResults: ExternalGroup[]
-  isSearching: boolean
-  searchError: string | null
-  onSearchQueryChange: (query: string) => void
-  canSearch: boolean
-}
-
-export const ExternalGroupsTab: React.FC<ExternalGroupsTabProps> = ({
-  canEdit,
-  searchQuery,
-  searchResults,
-  isSearching,
-  searchError,
-  onSearchQueryChange,
-  canSearch,
-}) => {
-  // Read-only view (when !canEdit)
-  if (!canEdit) {
-    return (
-      <div
-        style={{
-          flex: 1,
-          overflow: 'auto',
-          paddingTop: 'var(--mantine-spacing-md)',
-        }}
-      >
-        <Text size="sm" c="dimmed" mb="md">
-          External groups are read-only
-        </Text>
-      </div>
-    )
-  }
-
-  return (
-    <ScrollArea style={{ height: '100%' }} pt="md">
-      <Stack gap="sm" pb="md">
-        <Text size="sm" c="dimmed" mb="xs">
-          Search for external groups from your organization
-        </Text>
-
-        <TextInput
-          placeholder="Search external groups..."
-          value={searchQuery}
-          onChange={(e) => onSearchQueryChange(e.target.value)}
-          leftSection={<IconSearch size={16} />}
-          disabled={!canSearch}
-        />
-
-        {!canSearch && (
-          <Alert icon={<IconAlertCircle size={16} />} color="gray" title="Not Available">
-            External group search is not configured
-          </Alert>
-        )}
-
-        {isSearching && (
-          <Group justify="center" py="md">
-            <Loader size="sm" />
-            <Text size="sm" c="dimmed">
-              Searching...
-            </Text>
-          </Group>
-        )}
-
-        {searchError && (
-          <Alert icon={<IconAlertCircle size={16} />} color="red" title="Error">
-            {searchError}
-          </Alert>
-        )}
-
-        {searchResults.length > 0 && (
-          <Stack gap="xs">
-            {searchResults.map((group) => (
-              <Paper key={group.id} withBorder p="xs">
-                <Group justify="space-between" wrap="nowrap">
-                  <Group gap="xs" style={{ flex: 1, minWidth: 0 }}>
-                    <IconBuilding size={16} color="gray" style={{ flexShrink: 0 }} />
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <Text size="sm" fw={500} truncate>
-                        {group.name}
-                      </Text>
-                      <Text size="xs" c="dimmed" truncate>
-                        ID: {group.id}
-                      </Text>
-                    </div>
-                  </Group>
-                </Group>
-              </Paper>
-            ))}
-          </Stack>
-        )}
-
-        {searchQuery.trim() && !isSearching && searchResults.length === 0 && !searchError && (
-          <Text size="sm" c="dimmed" ta="center" py="md">
-            No external groups found
-          </Text>
-        )}
-      </Stack>
-    </ScrollArea>
-  )
-}

package/src/editor/group-manager/GroupCard.tsx

@@ -1,102 +0,0 @@
-'use client'
-
-/**
- * Card component for displaying a single group with its members
- */
-
-import React from 'react'
-import { ActionIcon, Badge, Group, Paper, Text, Tooltip } from '@mantine/core'
-import { IconEdit, IconTrash } from '@tabler/icons-react'
-import type { InternalGroup, UserSearchResult, CanopyGroupId, CanopyUserId } from './types'
-import { MemberList } from './MemberList'
-
-export interface GroupCardProps {
-  group: InternalGroup
-  onEdit: (group: InternalGroup) => void
-  onDelete: (groupId: CanopyGroupId) => void
-  onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
-  onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
-  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
-  // User search state
-  showUserSearch: boolean
-  searchQuery: string
-  searchResults: UserSearchResult[]
-  isSearching: boolean
-  searchError: string | null
-  onSearchQueryChange: (query: string) => void
-  onShowSearch: () => void
-  onHideSearch: () => void
-  canSearch: boolean
-}
-
-export const GroupCard: React.FC<GroupCardProps> = ({
-  group,
-  onEdit,
-  onDelete,
-  onAddMember,
-  onRemoveMember,
-  onGetUserMetadata,
-  showUserSearch,
-  searchQuery,
-  searchResults,
-  isSearching,
-  searchError,
-  onSearchQueryChange,
-  onShowSearch,
-  onHideSearch,
-  canSearch,
-}) => {
-  return (
-    <Paper withBorder p="sm" mb="xs">
-      <Group justify="space-between" mb="sm">
-        <div style={{ flex: 1 }}>
-          <Group gap="xs">
-            <Text size="sm" fw={500}>
-              {group.name}
-            </Text>
-            <Badge size="sm" variant="light">
-              {group.members?.length || 0} members
-            </Badge>
-          </Group>
-          <Text size="xs" c="dimmed" mt={4}>
-            ID: {group.id}
-          </Text>
-          {group.description && (
-            <Text size="xs" c="dimmed" mt={4}>
-              {group.description}
-            </Text>
-          )}
-        </div>
-        <Group gap="xs">
-          <Tooltip label="Edit group">
-            <ActionIcon size="sm" variant="subtle" onClick={() => onEdit(group)}>
-              <IconEdit size={16} />
-            </ActionIcon>
-          </Tooltip>
-          <Tooltip label="Delete group">
-            <ActionIcon size="sm" variant="subtle" color="red" onClick={() => onDelete(group.id)}>
-              <IconTrash size={16} />
-            </ActionIcon>
-          </Tooltip>
-        </Group>
-      </Group>
-
-      <MemberList
-        groupId={group.id}
-        members={group.members || []}
-        onRemoveMember={onRemoveMember}
-        onAddMember={onAddMember}
-        onGetUserMetadata={onGetUserMetadata}
-        showUserSearch={showUserSearch}
-        searchQuery={searchQuery}
-        searchResults={searchResults}
-        isSearching={isSearching}
-        searchError={searchError}
-        onSearchQueryChange={onSearchQueryChange}
-        onShowSearch={onShowSearch}
-        onHideSearch={onHideSearch}
-        canSearch={canSearch}
-      />
-    </Paper>
-  )
-}

package/src/editor/group-manager/GroupForm.tsx

@@ -1,66 +0,0 @@
-'use client'
-
-/**
- * Modal form for creating/editing groups
- */
-
-import React from 'react'
-import { Button, Group, Modal, Paper, Stack, Text, TextInput, Textarea } from '@mantine/core'
-import type { InternalGroup, GroupFormData } from './types'
-
-export interface GroupFormProps {
-  isOpen: boolean
-  editingGroup: InternalGroup | null
-  formData: GroupFormData
-  onFormChange: (data: Partial<GroupFormData>) => void
-  onSave: () => void
-  onClose: () => void
-}
-
-export const GroupForm: React.FC<GroupFormProps> = ({
-  isOpen,
-  editingGroup,
-  formData,
-  onFormChange,
-  onSave,
-  onClose,
-}) => {
-  return (
-    <Modal opened={isOpen} onClose={onClose} title={editingGroup ? 'Edit Group' : 'Create Group'}>
-      <Stack gap="md">
-        {editingGroup && (
-          <div>
-            <Text size="sm" fw={500} mb={4}>
-              ID (system-generated)
-            </Text>
-            <Paper p="xs" withBorder bg="gray.0">
-              <Text size="sm" ff="monospace" c="dimmed">
-                {editingGroup.id}
-              </Text>
-            </Paper>
-          </div>
-        )}
-        <TextInput
-          label="Group Name"
-          placeholder="e.g., Content Editors"
-          value={formData.name}
-          onChange={(e) => onFormChange({ name: e.target.value })}
-          required
-        />
-        <Textarea
-          label="Description"
-          placeholder="Optional description"
-          value={formData.description}
-          onChange={(e) => onFormChange({ description: e.target.value })}
-          rows={3}
-        />
-        <Group justify="flex-end" gap="sm">
-          <Button variant="subtle" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={onSave}>{editingGroup ? 'Save' : 'Create'}</Button>
-        </Group>
-      </Stack>
-    </Modal>
-  )
-}

package/src/editor/group-manager/InternalGroupsTab.tsx

@@ -1,147 +0,0 @@
-'use client'
-
-/**
- * Internal groups tab component
- */
-
-import React from 'react'
-import { Button, Group, Paper, ScrollArea, Stack, Text } from '@mantine/core'
-import { IconPlus, IconUsers } from '@tabler/icons-react'
-import type { InternalGroup, UserSearchResult, CanopyGroupId, CanopyUserId } from './types'
-import { GroupCard } from './GroupCard'
-
-export interface InternalGroupsTabProps {
-  groups: InternalGroup[]
-  canEdit: boolean
-  onCreateGroup: () => void
-  onEditGroup: (group: InternalGroup) => void
-  onDeleteGroup: (groupId: CanopyGroupId) => void
-  onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
-  onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
-  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
-  // User search state (shared across all groups)
-  activeSearchGroupId: string | null
-  searchQuery: string
-  searchResults: UserSearchResult[]
-  isSearching: boolean
-  searchError: string | null
-  onSearchQueryChange: (query: string) => void
-  onShowSearch: (groupId: string) => void
-  onHideSearch: () => void
-  canSearch: boolean
-}
-
-export const InternalGroupsTab: React.FC<InternalGroupsTabProps> = ({
-  groups,
-  canEdit,
-  onCreateGroup,
-  onEditGroup,
-  onDeleteGroup,
-  onAddMember,
-  onRemoveMember,
-  onGetUserMetadata,
-  activeSearchGroupId,
-  searchQuery,
-  searchResults,
-  isSearching,
-  searchError,
-  onSearchQueryChange,
-  onShowSearch,
-  onHideSearch,
-  canSearch,
-}) => {
-  // Read-only view
-  if (!canEdit) {
-    return (
-      <div
-        style={{
-          flex: 1,
-          overflow: 'auto',
-          paddingTop: 'var(--mantine-spacing-md)',
-        }}
-      >
-        {groups.length === 0 ? (
-          <Paper withBorder p="md" style={{ textAlign: 'center' }}>
-            <IconUsers size={32} color="gray" style={{ margin: '0 auto', marginBottom: 8 }} />
-            <Text size="sm" c="dimmed">
-              No internal groups
-            </Text>
-          </Paper>
-        ) : (
-          <Stack gap="xs" pb="md">
-            {groups.map((group) => (
-              <Paper key={group.id} withBorder p="sm">
-                <Group justify="space-between">
-                  <div>
-                    <Text size="sm" fw={500}>
-                      {group.name}
-                    </Text>
-                    {group.description && (
-                      <Text size="xs" c="dimmed">
-                        {group.description}
-                      </Text>
-                    )}
-                  </div>
-                  <Text size="sm" variant="light">
-                    {group.members?.length || 0} members
-                  </Text>
-                </Group>
-              </Paper>
-            ))}
-          </Stack>
-        )}
-      </div>
-    )
-  }
-
-  // Editable view
-  return (
-    <ScrollArea style={{ height: '100%' }} pt="md">
-      <Stack gap="sm" pb="md">
-        <Group justify="space-between" mb="xs">
-          <Text size="sm" fw={500} c="dimmed">
-            Manage your internal groups
-          </Text>
-          <Button
-            size="xs"
-            variant="light"
-            leftSection={<IconPlus size={14} />}
-            onClick={onCreateGroup}
-          >
-            Create Group
-          </Button>
-        </Group>
-
-        {groups.length === 0 ? (
-          <Paper withBorder p="md" style={{ textAlign: 'center' }}>
-            <IconUsers size={32} color="gray" style={{ margin: '0 auto', marginBottom: 8 }} />
-            <Text size="sm" c="dimmed">
-              No internal groups yet. Create one to get started.
-            </Text>
-          </Paper>
-        ) : (
-          groups.map((group) => (
-            <GroupCard
-              key={group.id}
-              group={group}
-              onEdit={onEditGroup}
-              onDelete={onDeleteGroup}
-              onAddMember={onAddMember}
-              onRemoveMember={onRemoveMember}
-              onGetUserMetadata={onGetUserMetadata}
-              showUserSearch={activeSearchGroupId === group.id}
-              searchQuery={searchQuery}
-              searchResults={searchResults}
-              isSearching={isSearching}
-              searchError={searchError}
-              onSearchQueryChange={onSearchQueryChange}
-              onShowSearch={() => onShowSearch(group.id)}
-              onHideSearch={onHideSearch}
-              canSearch={canSearch}
-            />
-          ))
-        )}
-      </Stack>
-    </ScrollArea>
-  )
-}

package/src/editor/group-manager/MemberList.tsx

@@ -1,184 +0,0 @@
-'use client'
-
-/**
- * Member list component with user search for adding members
- */
-
-import React from 'react'
-import {
-  ActionIcon,
-  Badge,
-  Button,
-  Group,
-  Loader,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-} from '@mantine/core'
-import { IconSearch, IconX } from '@tabler/icons-react'
-import type { UserSearchResult, CanopyGroupId, CanopyUserId } from './types'
-import { UserBadge } from '../components/UserBadge'
-
-export interface MemberListProps {
-  groupId: CanopyGroupId
-  members: CanopyUserId[]
-  onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
-  onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
-  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
-  // User search state
-  showUserSearch: boolean
-  searchQuery: string
-  searchResults: UserSearchResult[]
-  isSearching: boolean
-  searchError: string | null
-  onSearchQueryChange: (query: string) => void
-  onShowSearch: () => void
-  onHideSearch: () => void
-  canSearch: boolean
-}
-
-export const MemberList: React.FC<MemberListProps> = ({
-  groupId,
-  members,
-  onRemoveMember,
-  onAddMember,
-  onGetUserMetadata,
-  showUserSearch,
-  searchQuery,
-  searchResults,
-  isSearching,
-  searchError,
-  onSearchQueryChange,
-  onShowSearch,
-  onHideSearch,
-  canSearch,
-}) => {
-  const handleAddMember = (userId: CanopyUserId) => {
-    onAddMember(groupId, userId)
-    onHideSearch()
-  }
-
-  return (
-    <div>
-      <Text size="xs" fw={500} mb={4}>
-        Members
-      </Text>
-      <Group gap="xs" mb="xs">
-        {members.length > 0 ? (
-          members.map((userId) =>
-            onGetUserMetadata ? (
-              <UserBadge
-                key={userId}
-                userId={userId}
-                getUserMetadata={onGetUserMetadata}
-                variant="avatar-name"
-                size="xs"
-                badgeVariant="filled"
-                color="blue"
-                onRemove={() => onRemoveMember(groupId, userId)}
-                showEmailTooltip={true}
-              />
-            ) : (
-              <Badge
-                key={userId}
-                variant="filled"
-                color="blue"
-                pr={3}
-                rightSection={
-                  <ActionIcon
-                    size="xs"
-                    color="blue"
-                    radius="xl"
-                    variant="transparent"
-                    onClick={() => onRemoveMember(groupId, userId)}
-                  >
-                    <IconX size={10} style={{ color: 'white' }} />
-                  </ActionIcon>
-                }
-              >
-                {userId}
-              </Badge>
-            ),
-          )
-        ) : (
-          <Text size="xs" c="dimmed">
-            No members
-          </Text>
-        )}
-      </Group>
-
-      {/* Add member search panel */}
-      {showUserSearch ? (
-        <Paper withBorder p="sm" mt="xs">
-          <Stack gap="xs">
-            <TextInput
-              placeholder="Search users by name or email..."
-              value={searchQuery}
-              onChange={(e) => onSearchQueryChange(e.target.value)}
-              aria-label="Search users by name or email"
-              size="xs"
-            />
-            {isSearching && <Loader size="xs" />}
-            {searchError && (
-              <Text size="xs" c="red">
-                {searchError}
-              </Text>
-            )}
-            {searchResults.length > 0 && (
-              <Stack gap={4}>
-                {searchResults.map((user) => (
-                  <Paper
-                    key={user.id}
-                    p="xs"
-                    withBorder
-                    style={{ cursor: 'pointer' }}
-                    onClick={() => handleAddMember(user.id)}
-                  >
-                    {onGetUserMetadata ? (
-                      <UserBadge
-                        userId={user.id}
-                        getUserMetadata={onGetUserMetadata}
-                        variant="full"
-                        size="sm"
-                        cachedUser={user}
-                        showEmailTooltip={false}
-                      />
-                    ) : (
-                      <>
-                        <Text size="sm" fw={500}>
-                          {user.name}
-                        </Text>
-                        <Text size="xs" c="dimmed">
-                          {user.email}
-                        </Text>
-                      </>
-                    )}
-                  </Paper>
-                ))}
-              </Stack>
-            )}
-            {searchQuery.trim() && !isSearching && searchResults.length === 0 && (
-              <Text size="xs" c="dimmed">
-                No users found
-              </Text>
-            )}
-            <Button size="xs" variant="subtle" onClick={onHideSearch}>
-              Cancel
-            </Button>
-          </Stack>
-        </Paper>
-      ) : (
-        <Button
-          size="xs"
-          variant="subtle"
-          leftSection={<IconSearch size={14} />}
-          onClick={onShowSearch}
-          disabled={!canSearch}
-        >
-          Add Member
-        </Button>
-      )}
-    </div>
-  )
-}

package/src/editor/group-manager/hooks/useExternalGroupSearch.ts

@@ -1,63 +0,0 @@
-/**
- * Hook for external group search functionality
- */
-
-import { useState, useEffect } from 'react'
-import type { ExternalGroup } from '../types'
-
-export interface UseExternalGroupSearchOptions {
-  onSearchExternalGroups?: (query: string) => Promise<ExternalGroup[]>
-}
-
-export interface UseExternalGroupSearchResult {
-  searchQuery: string
-  searchResults: ExternalGroup[]
-  isSearching: boolean
-  searchError: string | null
-  setSearchQuery: (query: string) => void
-}
-
-export function useExternalGroupSearch({
-  onSearchExternalGroups,
-}: UseExternalGroupSearchOptions): UseExternalGroupSearchResult {
-  const [searchQuery, setSearchQuery] = useState('')
-  const [searchResults, setSearchResults] = useState<ExternalGroup[]>([])
-  const [isSearching, setIsSearching] = useState(false)
-  const [searchError, setSearchError] = useState<string | null>(null)
-
-  // Debounced external group search
-  useEffect(() => {
-    if (!searchQuery.trim()) {
-      setSearchResults([])
-      return
-    }
-
-    const timer = setTimeout(() => {
-      if (onSearchExternalGroups) {
-        setIsSearching(true)
-        setSearchError(null)
-        onSearchExternalGroups(searchQuery)
-          .then((results) => {
-            setSearchResults(results)
-            setSearchError(null)
-          })
-          .catch((err) => {
-            console.error('External group search failed:', err)
-            setSearchError('Failed to search external groups. Please try again.')
-            setSearchResults([])
-          })
-          .finally(() => setIsSearching(false))
-      }
-    }, 300)
-
-    return () => clearTimeout(timer)
-  }, [searchQuery, onSearchExternalGroups])
-
-  return {
-    searchQuery,
-    searchResults,
-    isSearching,
-    searchError,
-    setSearchQuery,
-  }
-}