@package-uploader/ui 1.1.2 → 1.1.4

package/src/components/BlockGroupingPanel.tsx

@@ -1,264 +0,0 @@
-import { useState } from 'react';
-import { useBlockGrouping, type BlockGroup } from '../hooks/useBlockGrouping';
-
-interface Block {
-  id: string;
-  type: string;
-  family?: string;
-  variant?: string;
-  title?: string;
-}
-
-interface BlockGroupingPanelProps {
-  lessonId: string;
-  blocks: Block[];
-  groups: BlockGroup[];
-  onGroupsChange: (groups: BlockGroup[]) => void;
-}
-
-/** Color palette for block families */
-function familyColor(family?: string): string {
-  switch (family) {
-    case 'text': return '#3b82f6';
-    case 'media': return '#22c55e';
-    case 'interactive': return '#a855f7';
-    case 'knowledge-check': return '#f59e0b';
-    case 'quote': return '#ec4899';
-    default: return '#6b7280';
-  }
-}
-
-export default function BlockGroupingPanel({
-  lessonId,
-  blocks,
-  groups,
-  onGroupsChange,
-}: BlockGroupingPanelProps) {
-  const [newGroupClass, setNewGroupClass] = useState('');
-  const [newGroupLabel, setNewGroupLabel] = useState('');
-  const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
-  const [editClass, setEditClass] = useState('');
-  const [editLabel, setEditLabel] = useState('');
-
-  const lessonBlockIds = blocks.map((b) => b.id);
-
-  const {
-    selectedBlockIds,
-    toggleBlock,
-    clearSelection,
-    canCreateGroup,
-    validationError,
-    createGroup,
-    removeGroup,
-    updateGroup,
-    isBlockGrouped,
-  } = useBlockGrouping({
-    lessonBlockIds,
-    lessonId,
-    groups,
-    onGroupsChange,
-  });
-
-  const handleCreateGroup = () => {
-    if (!canCreateGroup || !newGroupClass.trim()) return;
-    createGroup(newGroupClass, newGroupLabel || undefined);
-    setNewGroupClass('');
-    setNewGroupLabel('');
-  };
-
-  const startEditGroup = (group: BlockGroup) => {
-    setEditingGroupId(group.id);
-    setEditClass(group.className);
-    setEditLabel(group.label || '');
-  };
-
-  const saveEditGroup = () => {
-    if (editingGroupId) {
-      updateGroup(editingGroupId, { className: editClass, label: editLabel });
-      setEditingGroupId(null);
-    }
-  };
-
-  const cancelEdit = () => {
-    setEditingGroupId(null);
-  };
-
-  // Build blockId -> group lookup
-  const blockGroupMap = new Map<string, BlockGroup>();
-  for (const group of groups) {
-    for (const bid of group.blockIds) {
-      blockGroupMap.set(bid, group);
-    }
-  }
-
-  // Render a single block rectangle
-  const renderBlock = (block: Block, isGrouped: boolean) => {
-    const isSelected = selectedBlockIds.has(block.id);
-    const canSelect = !isGrouped;
-    const color = familyColor(block.family);
-    const label = [block.type, block.variant].filter(Boolean).join(' / ');
-
-    return (
-      <div
-        key={block.id}
-        className={`bgp-block${isSelected ? ' selected' : ''}${isGrouped ? ' grouped' : ''}`}
-        onClick={() => canSelect && toggleBlock(block.id)}
-        style={{ '--block-color': color } as React.CSSProperties}
-        title={canSelect ? 'Click to select' : 'Already in a group'}
-      >
-        <span className="bgp-block-color" />
-        <span className="bgp-block-label">{label}</span>
-        {block.title && (
-          <span className="bgp-block-title">
-            {block.title.length > 50 ? block.title.substring(0, 50) + '...' : block.title}
-          </span>
-        )}
-        {isSelected && <span className="bgp-block-check">&#10003;</span>}
-      </div>
-    );
-  };
-
-  // Render group header (with edit/ungroup controls)
-  const renderGroupHeader = (group: BlockGroup) => {
-    const isEditing = editingGroupId === group.id;
-
-    if (isEditing) {
-      return (
-        <div className="bgp-group-header">
-          <div className="bgp-group-edit">
-            <input
-              type="text"
-              value={editClass}
-              onChange={(e) => setEditClass(e.target.value)}
-              placeholder="CSS class(es)"
-              className="bgp-edit-input"
-            />
-            <input
-              type="text"
-              value={editLabel}
-              onChange={(e) => setEditLabel(e.target.value)}
-              placeholder="Label (optional)"
-              className="bgp-edit-input bgp-edit-input-sm"
-            />
-            <button className="bgp-btn bgp-btn-save" onClick={saveEditGroup}>Save</button>
-            <button className="bgp-btn bgp-btn-cancel" onClick={cancelEdit}>Cancel</button>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="bgp-group-header">
-        <span className="bgp-group-label">
-          {group.label || group.className}
-        </span>
-        <span className="bgp-group-class">.{group.className}</span>
-        <button
-          className="bgp-btn bgp-btn-edit"
-          onClick={() => startEditGroup(group)}
-          title="Edit group"
-        >
-          Edit
-        </button>
-        <button
-          className="bgp-btn bgp-btn-ungroup"
-          onClick={() => removeGroup(group.id)}
-          title="Remove group"
-        >
-          Ungroup
-        </button>
-      </div>
-    );
-  };
-
-  // Build flat display list, rendering groups as nested containers
-  const renderedGroups = new Set<string>();
-  const previewItems: React.ReactNode[] = [];
-
-  for (const block of blocks) {
-    const group = blockGroupMap.get(block.id);
-
-    if (group) {
-      // Skip blocks already rendered as part of their group
-      if (renderedGroups.has(group.id)) continue;
-      renderedGroups.add(group.id);
-
-      // Render the entire group container
-      const groupBlocks = group.blockIds
-        .map((bid) => blocks.find((b) => b.id === bid))
-        .filter(Boolean) as Block[];
-
-      previewItems.push(
-        <div key={`group-${group.id}`} className="bgp-group-wrapper">
-          {renderGroupHeader(group)}
-          {groupBlocks.map((b) => renderBlock(b, true))}
-        </div>
-      );
-    } else {
-      previewItems.push(renderBlock(block, false));
-    }
-  }
-
-  const hasSelection = selectedBlockIds.size > 0;
-
-  return (
-    <div className="block-grouping-panel">
-      <div className="bgp-header">
-        <span className="bgp-title">Block Groups</span>
-        {groups.length > 0 && (
-          <span className="bgp-count">{groups.length} group{groups.length !== 1 ? 's' : ''}</span>
-        )}
-      </div>
-
-      {/* Schematic preview */}
-      <div className="bgp-preview">
-        {previewItems}
-      </div>
-
-      {/* Create group controls */}
-      {hasSelection && (
-        <div className="bgp-create">
-          <div className="bgp-create-info">
-            {selectedBlockIds.size} block{selectedBlockIds.size !== 1 ? 's' : ''} selected
-            {validationError && <span className="bgp-validation-error"> — {validationError}</span>}
-          </div>
-          <div className="bgp-create-inputs">
-            <input
-              type="text"
-              value={newGroupClass}
-              onChange={(e) => setNewGroupClass(e.target.value)}
-              placeholder="CSS class(es) for wrapper..."
-              className="bgp-create-class"
-              onKeyDown={(e) => e.key === 'Enter' && handleCreateGroup()}
-            />
-            <input
-              type="text"
-              value={newGroupLabel}
-              onChange={(e) => setNewGroupLabel(e.target.value)}
-              placeholder="Label (optional)"
-              className="bgp-create-label"
-            />
-          </div>
-          <div className="bgp-create-actions">
-            <button
-              className="btn btn-sm btn-primary"
-              onClick={handleCreateGroup}
-              disabled={!canCreateGroup || !newGroupClass.trim()}
-            >
-              Create Group
-            </button>
-            <button className="btn btn-sm btn-secondary" onClick={clearSelection}>
-              Cancel
-            </button>
-          </div>
-        </div>
-      )}
-
-      {!hasSelection && groups.length === 0 && (
-        <div className="bgp-hint">
-          Click adjacent blocks above to select them, then create a group to wrap them in a container div.
-        </div>
-      )}
-    </div>
-  );
-}