From 640c861ac26733f3d56a2c6566b948349c27d50a Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sat, 17 Jan 2026 16:54:00 +0000 Subject: [PATCH] Generated by Spark: Load molecule and organism component trees from json --- COMPONENT_TREE_JSON_LOADING.md | 240 +++++++++ src/App.tsx | 9 +- src/components/ComponentTreeDemoPage.tsx | 9 + src/components/ComponentTreeViewer.tsx | 323 +++++++++++ src/config/component-trees/index.ts | 35 ++ src/config/component-trees/molecules.json | 363 +++++++++++++ src/config/component-trees/organisms.json | 625 ++++++++++++++++++++++ src/hooks/use-component-tree-loader.ts | 123 +++++ 8 files changed, 1726 insertions(+), 1 deletion(-) create mode 100644 COMPONENT_TREE_JSON_LOADING.md create mode 100644 src/components/ComponentTreeDemoPage.tsx create mode 100644 src/components/ComponentTreeViewer.tsx create mode 100644 src/config/component-trees/index.ts create mode 100644 src/config/component-trees/molecules.json create mode 100644 src/config/component-trees/organisms.json create mode 100644 src/hooks/use-component-tree-loader.ts diff --git a/COMPONENT_TREE_JSON_LOADING.md b/COMPONENT_TREE_JSON_LOADING.md new file mode 100644 index 0000000..8995636 --- /dev/null +++ b/COMPONENT_TREE_JSON_LOADING.md @@ -0,0 +1,240 @@ +# Component Tree JSON Loading System + +## Overview + +This system loads molecule and organism component trees from JSON files into the application's KV store on startup. Component trees define the hierarchical structure of reusable UI components with their props, children, and metadata. + +## File Structure + +``` +src/ +├── config/ +│ └── component-trees/ +│ ├── index.ts # Exports and utility functions +│ ├── molecules.json # Molecule component trees +│ └── organisms.json # Organism component trees +├── hooks/ +│ └── use-component-tree-loader.ts # Hook for loading and managing trees +└── components/ + ├── ComponentTreeViewer.tsx # UI for viewing component trees + └── ComponentTreeDemoPage.tsx # Demo page +``` + +## Component Tree Structure + +Each component tree follows this schema: + +```typescript +interface ComponentTree { + id: string // Unique identifier + name: string // Display name + description: string // Description of the component + category: 'molecule' | 'organism' // Component category + rootNodes: ComponentNode[] // Root component nodes + createdAt: number // Timestamp + updatedAt: number // Timestamp +} + +interface ComponentNode { + id: string // Unique node ID + type: string // Component type (Button, Card, etc.) + name: string // Node name + props: Record // Component props + children: ComponentNode[] // Child nodes +} +``` + +## JSON Files + +### molecules.json + +Contains component trees for molecule-level components: +- SearchInput +- DataCard +- StatCard +- ActionBar +- EmptyState +- FileTabs + +### organisms.json + +Contains component trees for organism-level components: +- AppHeader +- NavigationMenu +- SchemaEditorCanvas +- TreeListPanel +- DataTable +- SchemaEditorSidebar + +## Usage + +### Loading Component Trees + +Component trees are automatically loaded on application startup via the `App.tsx` initialization: + +```typescript +const { loadComponentTrees } = useComponentTreeLoader() + +useEffect(() => { + loadSeedData() + .then(() => loadComponentTrees()) + .then(() => console.log('Trees loaded')) +}, []) +``` + +### Using the Hook + +```typescript +import { useComponentTreeLoader } from '@/hooks/use-component-tree-loader' + +function MyComponent() { + const { + isLoaded, + isLoading, + error, + moleculeTrees, + organismTrees, + allTrees, + getComponentTreeById, + getComponentTreeByName, + getComponentTreesByCategory, + reloadFromJSON, + } = useComponentTreeLoader() + + // Access trees from memory + const molecules = moleculeTrees + + // Get tree from KV store + const tree = await getComponentTreeById('mol-tree-1') + + // Reload from JSON files + await reloadFromJSON() +} +``` + +### Viewing Component Trees + +Use the `ComponentTreeViewer` component to visualize and explore loaded trees: + +```typescript +import { ComponentTreeViewer } from '@/components/ComponentTreeViewer' + +function MyPage() { + return +} +``` + +## API Reference + +### useComponentTreeLoader() + +Returns an object with: + +- `isLoaded: boolean` - Whether trees have been loaded +- `isLoading: boolean` - Whether loading is in progress +- `error: Error | null` - Any loading error +- `moleculeTrees: ComponentTree[]` - Array of molecule trees +- `organismTrees: ComponentTree[]` - Array of organism trees +- `allTrees: ComponentTree[]` - All trees combined +- `loadComponentTrees()` - Load trees from JSON to KV store +- `getComponentTrees()` - Get all trees from KV store +- `getComponentTreesByCategory(category)` - Get trees by category +- `getComponentTreeById(id)` - Get tree by ID +- `getComponentTreeByName(name)` - Get tree by name +- `reloadFromJSON()` - Force reload from JSON files + +### Config Functions + +From `@/config/component-trees`: + +```typescript +import componentTreesData from '@/config/component-trees' + +// Access trees +const molecules = componentTreesData.molecules +const organisms = componentTreesData.organisms +const all = componentTreesData.all + +// Utility functions +const tree = componentTreesData.getById('mol-tree-1') +const tree = componentTreesData.getByName('SearchInput') +const trees = componentTreesData.getByCategory('molecule') +``` + +## Adding New Component Trees + +1. Edit `molecules.json` or `organisms.json`: + +```json +{ + "molecules": [ + { + "id": "mol-tree-new", + "name": "NewComponent", + "description": "Description of the component", + "category": "molecule", + "rootNodes": [ + { + "id": "root-1", + "type": "div", + "name": "Container", + "props": { + "className": "flex gap-2" + }, + "children": [] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + } + ] +} +``` + +2. Reload in the application: + +```typescript +const { reloadFromJSON } = useComponentTreeLoader() +await reloadFromJSON() +``` + +Or restart the application for automatic loading. + +## Features + +- **Automatic Loading**: Trees are loaded on app startup +- **Merge Strategy**: New trees are merged with existing trees, preserving user modifications +- **Category Filtering**: Filter trees by molecule/organism category +- **Type Safety**: Full TypeScript support +- **Error Handling**: Graceful error handling with user feedback +- **Hot Reload**: Reload from JSON without restarting the app +- **Visual Explorer**: Built-in UI for viewing tree structures + +## Benefits + +1. **Separation of Concerns**: Component structures defined in JSON, separate from implementation +2. **Reusability**: Trees can be referenced and reused across the application +3. **Documentation**: JSON serves as living documentation of component hierarchy +4. **Version Control**: Easy to track changes to component structures +5. **Tooling**: Can be generated or validated by external tools + +## Integration with Existing System + +The component tree system integrates with: + +- **Project State**: Trees stored in KV store alongside other project data +- **Seed Data**: Loaded automatically with seed data on startup +- **Component Trees Feature**: Used by existing component tree builder/manager +- **Atomic Design**: Follows atomic design principles (molecules, organisms) + +## Future Enhancements + +Potential improvements: + +- JSON schema validation +- Component tree code generation +- Visual tree editor with drag-and-drop +- Tree composition (combining multiple trees) +- Tree versioning and history +- Export trees to React code +- Import trees from existing React components diff --git a/src/App.tsx b/src/App.tsx index db25702..813e006 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,6 +18,7 @@ import { useFileOperations } from '@/hooks/use-file-operations' import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts' import { useSeedData } from '@/hooks/data/use-seed-data' import { useRouterNavigation } from '@/hooks/use-router-navigation' +import { useComponentTreeLoader } from '@/hooks/use-component-tree-loader' console.log('[APP_ROUTER] ✅ Custom hooks imported') import { getPageShortcuts } from '@/config/page-loader' @@ -311,6 +312,7 @@ function App() { console.log('[APP_ROUTER] 🌱 Initializing seed data hook') const { loadSeedData } = useSeedData() + const { loadComponentTrees } = useComponentTreeLoader() const projectState = useProjectState() const { featureToggles, files, setFiles, ...restState } = projectState console.log('[APP_ROUTER] ✅ Hooks initialized') @@ -335,6 +337,11 @@ function App() { loadSeedData() .then(() => { console.log('[APP_ROUTER] ✅ Seed data loaded successfully') + console.log('[APP_ROUTER] 📦 Loading component trees from JSON') + return loadComponentTrees() + }) + .then(() => { + console.log('[APP_ROUTER] ✅ Component trees loaded successfully') }) .catch(err => { console.error('[APP_ROUTER] ❌ Seed data loading failed:', err) @@ -354,7 +361,7 @@ function App() { console.log('[APP_ROUTER] 🧹 Cleaning up initialization effect') clearTimeout(timer) } - }, [loadSeedData]) + }, [loadSeedData, loadComponentTrees]) const stateContext = { files, diff --git a/src/components/ComponentTreeDemoPage.tsx b/src/components/ComponentTreeDemoPage.tsx new file mode 100644 index 0000000..e08d2ef --- /dev/null +++ b/src/components/ComponentTreeDemoPage.tsx @@ -0,0 +1,9 @@ +import { ComponentTreeViewer } from '@/components/ComponentTreeViewer' + +export default function ComponentTreeDemoPage() { + return ( +
+ +
+ ) +} diff --git a/src/components/ComponentTreeViewer.tsx b/src/components/ComponentTreeViewer.tsx new file mode 100644 index 0000000..ef9d3ac --- /dev/null +++ b/src/components/ComponentTreeViewer.tsx @@ -0,0 +1,323 @@ +import { useState } from 'react' +import { useComponentTreeLoader } from '@/hooks/use-component-tree-loader' +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' +import { ScrollArea } from '@/components/ui/scroll-area' +import { Separator } from '@/components/ui/separator' +import { toast } from 'sonner' +import { + Cube, + TreeStructure, + ArrowsClockwise, + CheckCircle, + Warning, + Package, + Stack +} from '@phosphor-icons/react' + +export function ComponentTreeViewer() { + const { + isLoaded, + isLoading, + error, + moleculeTrees, + organismTrees, + allTrees, + reloadFromJSON, + } = useComponentTreeLoader() + + const [selectedTreeId, setSelectedTreeId] = useState(null) + + const handleReload = async () => { + try { + await reloadFromJSON() + toast.success('Component trees reloaded from JSON') + } catch (err) { + toast.error('Failed to reload component trees') + } + } + + const selectedTree = allTrees.find(tree => tree.id === selectedTreeId) + + return ( +
+
+
+ +
+

Component Trees

+

+ Molecules and organisms loaded from JSON +

+
+
+
+ {isLoaded && ( + + + {allTrees.length} trees loaded + + )} + +
+
+ + {error && ( +
+ +
+

Error loading component trees

+

{error.message}

+
+
+ )} + + + + + + Molecules + + {moleculeTrees.length} + + + + + Organisms + + {organismTrees.length} + + + + + All + + {allTrees.length} + + + + + +
+ +
+ {moleculeTrees.map(tree => ( + setSelectedTreeId(tree.id)} + > + + + + {tree.name} + + + {tree.description} + + + +
+ {tree.rootNodes.length} root nodes + + + {new Date(tree.updatedAt).toLocaleDateString()} + +
+ + + ))} +
+ + +
+ {selectedTree ? ( + + ) : ( +
+
+ +

Select a tree to view details

+
+
+ )} +
+
+ + + +
+ +
+ {organismTrees.map(tree => ( + setSelectedTreeId(tree.id)} + > + + + + {tree.name} + + + {tree.description} + + + +
+ {tree.rootNodes.length} root nodes + + + {new Date(tree.updatedAt).toLocaleDateString()} + +
+ + + ))} +
+ + +
+ {selectedTree ? ( + + ) : ( +
+
+ +

Select a tree to view details

+
+
+ )} +
+
+ + + +
+ +
+ {allTrees.map(tree => { + const category = (tree as any).category + return ( + setSelectedTreeId(tree.id)} + > + + + {category === 'molecule' ? ( + + ) : ( + + )} + {tree.name} + + {category} + + + + {tree.description} + + + +
+ {tree.rootNodes.length} root nodes + + + {new Date(tree.updatedAt).toLocaleDateString()} + +
+ + + ) + })} +
+ + +
+ {selectedTree ? ( + + ) : ( +
+
+ +

Select a tree to view details

+
+
+ )} +
+
+ + +
+ ) +} + +function TreeDetails({ tree }: { tree: any }) { + const renderNode = (node: any, depth = 0) => { + return ( +
+
+
+ {node.name || node.type} + + {node.type} + +
+ {node.props && Object.keys(node.props).length > 0 && ( +
+ Props: {Object.keys(node.props).length} +
+ )} +
+ {node.children && node.children.map((child: any) => renderNode(child, depth + 1))} +
+ ) + } + + return ( + +
+
+

{tree.name}

+

{tree.description}

+
+ + {tree.rootNodes.length} root nodes + + + ID: {tree.id} + +
+ +
+ +
+

Component Tree Structure

+ {tree.rootNodes.map((node: any) => renderNode(node))} +
+
+ + ) +} diff --git a/src/config/component-trees/index.ts b/src/config/component-trees/index.ts new file mode 100644 index 0000000..46e06c1 --- /dev/null +++ b/src/config/component-trees/index.ts @@ -0,0 +1,35 @@ +import moleculesData from './molecules.json' +import organismsData from './organisms.json' +import { ComponentTree } from '@/types/project' + +export const moleculeComponentTrees: ComponentTree[] = moleculesData.molecules +export const organismComponentTrees: ComponentTree[] = organismsData.organisms + +export const allComponentTrees: ComponentTree[] = [ + ...moleculeComponentTrees, + ...organismComponentTrees, +] + +export function getComponentTreesByCategory(category: 'molecule' | 'organism'): ComponentTree[] { + if (category === 'molecule') { + return moleculeComponentTrees + } + return organismComponentTrees +} + +export function getComponentTreeById(id: string): ComponentTree | undefined { + return allComponentTrees.find(tree => tree.id === id) +} + +export function getComponentTreeByName(name: string): ComponentTree | undefined { + return allComponentTrees.find(tree => tree.name === name) +} + +export default { + molecules: moleculeComponentTrees, + organisms: organismComponentTrees, + all: allComponentTrees, + getByCategory: getComponentTreesByCategory, + getById: getComponentTreeById, + getByName: getComponentTreeByName, +} diff --git a/src/config/component-trees/molecules.json b/src/config/component-trees/molecules.json new file mode 100644 index 0000000..f256b09 --- /dev/null +++ b/src/config/component-trees/molecules.json @@ -0,0 +1,363 @@ +{ + "molecules": [ + { + "id": "mol-tree-1", + "name": "SearchInput", + "description": "Search input with icon and clear button", + "category": "molecule", + "rootNodes": [ + { + "id": "search-root", + "type": "div", + "name": "SearchContainer", + "props": { + "className": "relative" + }, + "children": [ + { + "id": "search-icon", + "type": "Icon", + "name": "SearchIcon", + "props": { + "icon": "MagnifyingGlass", + "className": "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" + }, + "children": [] + }, + { + "id": "search-input", + "type": "Input", + "name": "SearchField", + "props": { + "placeholder": "Search...", + "className": "pl-10 pr-10" + }, + "children": [] + }, + { + "id": "clear-button", + "type": "Button", + "name": "ClearButton", + "props": { + "variant": "ghost", + "size": "sm", + "className": "absolute right-1 top-1/2 -translate-y-1/2" + }, + "children": [] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "mol-tree-2", + "name": "DataCard", + "description": "Card component for displaying data with header and content", + "category": "molecule", + "rootNodes": [ + { + "id": "card-root", + "type": "Card", + "name": "DataCardContainer", + "props": { + "className": "overflow-hidden" + }, + "children": [ + { + "id": "card-header", + "type": "CardHeader", + "name": "DataCardHeader", + "props": {}, + "children": [ + { + "id": "card-title", + "type": "CardTitle", + "name": "CardTitle", + "props": { + "className": "flex items-center gap-2" + }, + "children": [] + }, + { + "id": "card-description", + "type": "CardDescription", + "name": "CardDescription", + "props": {}, + "children": [] + } + ] + }, + { + "id": "card-content", + "type": "CardContent", + "name": "DataCardContent", + "props": {}, + "children": [] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "mol-tree-3", + "name": "StatCard", + "description": "Card for displaying statistics with label, value, and trend", + "category": "molecule", + "rootNodes": [ + { + "id": "stat-card-root", + "type": "Card", + "name": "StatCardContainer", + "props": { + "className": "p-6" + }, + "children": [ + { + "id": "stat-header", + "type": "div", + "name": "StatHeader", + "props": { + "className": "flex items-center justify-between mb-2" + }, + "children": [ + { + "id": "stat-label", + "type": "Text", + "name": "StatLabel", + "props": { + "className": "text-sm font-medium text-muted-foreground" + }, + "children": [] + }, + { + "id": "stat-icon", + "type": "Icon", + "name": "StatIcon", + "props": { + "className": "text-muted-foreground" + }, + "children": [] + } + ] + }, + { + "id": "stat-value", + "type": "div", + "name": "StatValue", + "props": { + "className": "text-3xl font-bold" + }, + "children": [] + }, + { + "id": "stat-trend", + "type": "div", + "name": "StatTrend", + "props": { + "className": "flex items-center gap-1 mt-2" + }, + "children": [ + { + "id": "trend-icon", + "type": "Icon", + "name": "TrendIcon", + "props": { + "className": "text-xs" + }, + "children": [] + }, + { + "id": "trend-text", + "type": "Text", + "name": "TrendText", + "props": { + "className": "text-xs text-muted-foreground" + }, + "children": [] + } + ] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "mol-tree-4", + "name": "ActionBar", + "description": "Toolbar with action buttons", + "category": "molecule", + "rootNodes": [ + { + "id": "action-bar-root", + "type": "div", + "name": "ActionBarContainer", + "props": { + "className": "flex items-center gap-2 p-2 bg-muted/50 rounded-lg border" + }, + "children": [ + { + "id": "action-buttons", + "type": "div", + "name": "ActionButtons", + "props": { + "className": "flex gap-1" + }, + "children": [] + }, + { + "id": "action-separator", + "type": "Separator", + "name": "ActionSeparator", + "props": { + "orientation": "vertical", + "className": "h-6" + }, + "children": [] + }, + { + "id": "action-secondary", + "type": "div", + "name": "SecondaryActions", + "props": { + "className": "flex gap-1 ml-auto" + }, + "children": [] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "mol-tree-5", + "name": "EmptyState", + "description": "Empty state component with icon, heading, and description", + "category": "molecule", + "rootNodes": [ + { + "id": "empty-state-root", + "type": "div", + "name": "EmptyStateContainer", + "props": { + "className": "flex flex-col items-center justify-center py-12 px-4 text-center" + }, + "children": [ + { + "id": "empty-icon", + "type": "div", + "name": "EmptyIcon", + "props": { + "className": "mb-4 text-muted-foreground" + }, + "children": [] + }, + { + "id": "empty-heading", + "type": "Heading", + "name": "EmptyHeading", + "props": { + "level": 3, + "className": "mb-2 font-semibold" + }, + "children": [] + }, + { + "id": "empty-description", + "type": "Text", + "name": "EmptyDescription", + "props": { + "className": "text-muted-foreground mb-4 max-w-md" + }, + "children": [] + }, + { + "id": "empty-action", + "type": "Button", + "name": "EmptyAction", + "props": { + "variant": "default" + }, + "children": [] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "mol-tree-6", + "name": "FileTabs", + "description": "Tabbed interface for file navigation", + "category": "molecule", + "rootNodes": [ + { + "id": "file-tabs-root", + "type": "div", + "name": "FileTabsContainer", + "props": { + "className": "flex items-center gap-1 bg-muted/30 px-2 overflow-x-auto" + }, + "children": [ + { + "id": "tab-list", + "type": "div", + "name": "TabList", + "props": { + "className": "flex gap-1" + }, + "children": [ + { + "id": "tab-item", + "type": "div", + "name": "TabItem", + "props": { + "className": "flex items-center gap-2 px-3 py-2 rounded-t-md hover:bg-background cursor-pointer" + }, + "children": [ + { + "id": "tab-icon", + "type": "FileIcon", + "name": "TabIcon", + "props": {}, + "children": [] + }, + { + "id": "tab-label", + "type": "Text", + "name": "TabLabel", + "props": { + "className": "text-sm" + }, + "children": [] + }, + { + "id": "tab-close", + "type": "Button", + "name": "TabClose", + "props": { + "variant": "ghost", + "size": "sm", + "className": "h-4 w-4 p-0" + }, + "children": [] + } + ] + } + ] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + } + ] +} diff --git a/src/config/component-trees/organisms.json b/src/config/component-trees/organisms.json new file mode 100644 index 0000000..f198ff3 --- /dev/null +++ b/src/config/component-trees/organisms.json @@ -0,0 +1,625 @@ +{ + "organisms": [ + { + "id": "org-tree-1", + "name": "AppHeader", + "description": "Main application header with navigation and actions", + "category": "organism", + "rootNodes": [ + { + "id": "app-header-root", + "type": "header", + "name": "AppHeaderContainer", + "props": { + "className": "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60" + }, + "children": [ + { + "id": "header-wrapper", + "type": "div", + "name": "HeaderWrapper", + "props": { + "className": "flex h-14 items-center px-4 gap-4" + }, + "children": [ + { + "id": "app-logo", + "type": "AppLogo", + "name": "AppLogo", + "props": {}, + "children": [] + }, + { + "id": "navigation-tabs", + "type": "Tabs", + "name": "NavigationTabs", + "props": { + "className": "flex-1" + }, + "children": [] + }, + { + "id": "header-actions", + "type": "div", + "name": "HeaderActions", + "props": { + "className": "flex items-center gap-2" + }, + "children": [ + { + "id": "search-button", + "type": "Button", + "name": "SearchButton", + "props": { + "variant": "ghost", + "size": "sm" + }, + "children": [] + }, + { + "id": "notifications-button", + "type": "Button", + "name": "NotificationsButton", + "props": { + "variant": "ghost", + "size": "sm" + }, + "children": [] + }, + { + "id": "user-menu", + "type": "DropdownMenu", + "name": "UserMenu", + "props": {}, + "children": [] + } + ] + } + ] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "org-tree-2", + "name": "NavigationMenu", + "description": "Sidebar navigation menu with hierarchical structure", + "category": "organism", + "rootNodes": [ + { + "id": "nav-menu-root", + "type": "nav", + "name": "NavigationMenuContainer", + "props": { + "className": "flex flex-col h-full w-64 border-r bg-muted/40" + }, + "children": [ + { + "id": "nav-header", + "type": "div", + "name": "NavHeader", + "props": { + "className": "p-4 border-b" + }, + "children": [ + { + "id": "nav-title", + "type": "Heading", + "name": "NavTitle", + "props": { + "level": 3, + "className": "font-semibold" + }, + "children": [] + } + ] + }, + { + "id": "nav-content", + "type": "ScrollArea", + "name": "NavContent", + "props": { + "className": "flex-1" + }, + "children": [ + { + "id": "nav-groups", + "type": "div", + "name": "NavGroups", + "props": { + "className": "py-2" + }, + "children": [ + { + "id": "nav-group", + "type": "div", + "name": "NavGroup", + "props": { + "className": "px-3 py-2" + }, + "children": [ + { + "id": "group-header", + "type": "div", + "name": "GroupHeader", + "props": { + "className": "mb-2 px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider" + }, + "children": [] + }, + { + "id": "nav-items", + "type": "div", + "name": "NavItems", + "props": { + "className": "space-y-1" + }, + "children": [] + } + ] + } + ] + } + ] + }, + { + "id": "nav-footer", + "type": "div", + "name": "NavFooter", + "props": { + "className": "p-4 border-t" + }, + "children": [] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "org-tree-3", + "name": "SchemaEditorCanvas", + "description": "Main canvas for visual schema editing with drag and drop", + "category": "organism", + "rootNodes": [ + { + "id": "canvas-root", + "type": "div", + "name": "CanvasContainer", + "props": { + "className": "relative h-full w-full bg-background" + }, + "children": [ + { + "id": "canvas-grid", + "type": "div", + "name": "CanvasGrid", + "props": { + "className": "absolute inset-0 bg-grid-pattern opacity-5" + }, + "children": [] + }, + { + "id": "canvas-content", + "type": "div", + "name": "CanvasContent", + "props": { + "className": "relative z-10 h-full p-8" + }, + "children": [ + { + "id": "canvas-elements", + "type": "div", + "name": "CanvasElements", + "props": { + "className": "space-y-4" + }, + "children": [] + } + ] + }, + { + "id": "canvas-toolbar", + "type": "div", + "name": "CanvasToolbar", + "props": { + "className": "absolute top-4 right-4 flex gap-2" + }, + "children": [ + { + "id": "zoom-controls", + "type": "div", + "name": "ZoomControls", + "props": { + "className": "flex items-center gap-1 bg-background border rounded-lg p-1 shadow-lg" + }, + "children": [] + }, + { + "id": "view-controls", + "type": "div", + "name": "ViewControls", + "props": { + "className": "flex items-center gap-1 bg-background border rounded-lg p-1 shadow-lg" + }, + "children": [] + } + ] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "org-tree-4", + "name": "TreeListPanel", + "description": "Panel for displaying and managing tree structures", + "category": "organism", + "rootNodes": [ + { + "id": "tree-panel-root", + "type": "div", + "name": "TreePanelContainer", + "props": { + "className": "flex flex-col h-full" + }, + "children": [ + { + "id": "panel-header", + "type": "div", + "name": "PanelHeader", + "props": { + "className": "flex items-center justify-between p-4 border-b" + }, + "children": [ + { + "id": "panel-title", + "type": "Heading", + "name": "PanelTitle", + "props": { + "level": 3, + "className": "font-semibold" + }, + "children": [] + }, + { + "id": "panel-actions", + "type": "div", + "name": "PanelActions", + "props": { + "className": "flex gap-2" + }, + "children": [ + { + "id": "add-tree-button", + "type": "Button", + "name": "AddTreeButton", + "props": { + "size": "sm", + "variant": "default" + }, + "children": [] + }, + { + "id": "refresh-button", + "type": "Button", + "name": "RefreshButton", + "props": { + "size": "sm", + "variant": "ghost" + }, + "children": [] + } + ] + } + ] + }, + { + "id": "search-section", + "type": "div", + "name": "SearchSection", + "props": { + "className": "p-4 border-b" + }, + "children": [ + { + "id": "search-input", + "type": "SearchInput", + "name": "TreeSearch", + "props": { + "placeholder": "Search trees..." + }, + "children": [] + } + ] + }, + { + "id": "tree-list", + "type": "ScrollArea", + "name": "TreeList", + "props": { + "className": "flex-1" + }, + "children": [ + { + "id": "tree-items", + "type": "div", + "name": "TreeItems", + "props": { + "className": "p-4 space-y-2" + }, + "children": [] + } + ] + }, + { + "id": "panel-footer", + "type": "div", + "name": "PanelFooter", + "props": { + "className": "p-4 border-t bg-muted/40" + }, + "children": [ + { + "id": "footer-stats", + "type": "div", + "name": "FooterStats", + "props": { + "className": "flex items-center justify-between text-xs text-muted-foreground" + }, + "children": [] + } + ] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "org-tree-5", + "name": "DataTable", + "description": "Complex data table with sorting, filtering, and pagination", + "category": "organism", + "rootNodes": [ + { + "id": "data-table-root", + "type": "div", + "name": "DataTableContainer", + "props": { + "className": "flex flex-col gap-4" + }, + "children": [ + { + "id": "table-toolbar", + "type": "div", + "name": "TableToolbar", + "props": { + "className": "flex items-center justify-between gap-4" + }, + "children": [ + { + "id": "table-search", + "type": "SearchInput", + "name": "TableSearch", + "props": { + "placeholder": "Filter results...", + "className": "max-w-sm" + }, + "children": [] + }, + { + "id": "table-actions", + "type": "div", + "name": "TableActions", + "props": { + "className": "flex items-center gap-2" + }, + "children": [ + { + "id": "filter-button", + "type": "Button", + "name": "FilterButton", + "props": { + "variant": "outline", + "size": "sm" + }, + "children": [] + }, + { + "id": "export-button", + "type": "Button", + "name": "ExportButton", + "props": { + "variant": "outline", + "size": "sm" + }, + "children": [] + } + ] + } + ] + }, + { + "id": "table-wrapper", + "type": "div", + "name": "TableWrapper", + "props": { + "className": "rounded-lg border bg-background" + }, + "children": [ + { + "id": "table", + "type": "Table", + "name": "DataTable", + "props": {}, + "children": [ + { + "id": "table-header", + "type": "TableHeader", + "name": "TableHeader", + "props": {}, + "children": [] + }, + { + "id": "table-body", + "type": "TableBody", + "name": "TableBody", + "props": {}, + "children": [] + } + ] + } + ] + }, + { + "id": "table-pagination", + "type": "div", + "name": "TablePagination", + "props": { + "className": "flex items-center justify-between" + }, + "children": [ + { + "id": "pagination-info", + "type": "Text", + "name": "PaginationInfo", + "props": { + "className": "text-sm text-muted-foreground" + }, + "children": [] + }, + { + "id": "pagination-controls", + "type": "div", + "name": "PaginationControls", + "props": { + "className": "flex items-center gap-2" + }, + "children": [] + } + ] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + }, + { + "id": "org-tree-6", + "name": "SchemaEditorSidebar", + "description": "Sidebar with component palette and properties panel", + "category": "organism", + "rootNodes": [ + { + "id": "sidebar-root", + "type": "aside", + "name": "SidebarContainer", + "props": { + "className": "w-80 border-l bg-muted/20 flex flex-col h-full" + }, + "children": [ + { + "id": "sidebar-tabs", + "type": "Tabs", + "name": "SidebarTabs", + "props": { + "className": "flex-1 flex flex-col", + "defaultValue": "components" + }, + "children": [ + { + "id": "tabs-list", + "type": "TabsList", + "name": "TabsList", + "props": { + "className": "w-full grid grid-cols-2 p-1 m-1" + }, + "children": [ + { + "id": "components-tab", + "type": "TabsTrigger", + "name": "ComponentsTab", + "props": { + "value": "components" + }, + "children": [] + }, + { + "id": "properties-tab", + "type": "TabsTrigger", + "name": "PropertiesTab", + "props": { + "value": "properties" + }, + "children": [] + } + ] + }, + { + "id": "components-content", + "type": "TabsContent", + "name": "ComponentsContent", + "props": { + "value": "components", + "className": "flex-1 mt-0" + }, + "children": [ + { + "id": "components-search", + "type": "div", + "name": "ComponentsSearch", + "props": { + "className": "p-4 border-b" + }, + "children": [] + }, + { + "id": "components-list", + "type": "ScrollArea", + "name": "ComponentsList", + "props": { + "className": "flex-1" + }, + "children": [] + } + ] + }, + { + "id": "properties-content", + "type": "TabsContent", + "name": "PropertiesContent", + "props": { + "value": "properties", + "className": "flex-1 mt-0" + }, + "children": [ + { + "id": "properties-panel", + "type": "ScrollArea", + "name": "PropertiesPanel", + "props": { + "className": "flex-1" + }, + "children": [] + } + ] + } + ] + } + ] + } + ], + "createdAt": 1704067200000, + "updatedAt": 1704067200000 + } + ] +} diff --git a/src/hooks/use-component-tree-loader.ts b/src/hooks/use-component-tree-loader.ts new file mode 100644 index 0000000..45f8501 --- /dev/null +++ b/src/hooks/use-component-tree-loader.ts @@ -0,0 +1,123 @@ +import { useCallback, useState, useEffect } from 'react' +import { ComponentTree } from '@/types/project' +import componentTreesData from '@/config/component-trees' + +export function useComponentTreeLoader() { + const [isLoaded, setIsLoaded] = useState(false) + const [isLoading, setIsLoading] = useState(false) + const [error, setError] = useState(null) + + const loadComponentTrees = useCallback(async () => { + if (isLoading || isLoaded) { + console.log('[COMPONENT_TREES] ⏭️ Skipping load (already loading or loaded)') + return + } + + console.log('[COMPONENT_TREES] 🚀 Starting component trees load') + setIsLoading(true) + setError(null) + console.time('[COMPONENT_TREES] Load duration') + + try { + if (!window.spark?.kv) { + console.warn('[COMPONENT_TREES] ⚠️ Spark KV not available') + throw new Error('Spark KV not available') + } + + const existingTrees = await window.spark.kv.get('project-component-trees') + + if (!existingTrees || existingTrees.length === 0) { + console.log('[COMPONENT_TREES] 📦 No existing component trees, loading from JSON') + await window.spark.kv.set('project-component-trees', componentTreesData.all) + console.log('[COMPONENT_TREES] ✅ Loaded', componentTreesData.all.length, 'component trees') + } else { + console.log('[COMPONENT_TREES] ✅ Found', existingTrees.length, 'existing component trees') + + const newTrees = componentTreesData.all.filter( + newTree => !existingTrees.some(existingTree => existingTree.id === newTree.id) + ) + + if (newTrees.length > 0) { + console.log('[COMPONENT_TREES] 📦 Merging', newTrees.length, 'new component trees') + const mergedTrees = [...existingTrees, ...newTrees] + await window.spark.kv.set('project-component-trees', mergedTrees) + console.log('[COMPONENT_TREES] ✅ Merged component trees, total:', mergedTrees.length) + } + } + + setIsLoaded(true) + console.log('[COMPONENT_TREES] ✅ Component trees load complete') + } catch (err) { + console.error('[COMPONENT_TREES] ❌ Failed to load component trees:', err) + setError(err instanceof Error ? err : new Error('Unknown error')) + } finally { + setIsLoading(false) + console.timeEnd('[COMPONENT_TREES] Load duration') + } + }, [isLoading, isLoaded]) + + const getComponentTrees = useCallback(async (): Promise => { + if (!window.spark?.kv) { + console.warn('[COMPONENT_TREES] ⚠️ Spark KV not available') + return [] + } + + const trees = await window.spark.kv.get('project-component-trees') + return trees || [] + }, []) + + const getComponentTreesByCategory = useCallback(async (category: 'molecule' | 'organism'): Promise => { + const trees = await getComponentTrees() + return trees.filter(tree => (tree as any).category === category) + }, [getComponentTrees]) + + const getComponentTreeById = useCallback(async (id: string): Promise => { + const trees = await getComponentTrees() + return trees.find(tree => tree.id === id) + }, [getComponentTrees]) + + const getComponentTreeByName = useCallback(async (name: string): Promise => { + const trees = await getComponentTrees() + return trees.find(tree => tree.name === name) + }, [getComponentTrees]) + + const reloadFromJSON = useCallback(async () => { + console.log('[COMPONENT_TREES] 🔄 Reloading component trees from JSON') + setIsLoading(true) + setError(null) + + try { + if (!window.spark?.kv) { + throw new Error('Spark KV not available') + } + + await window.spark.kv.set('project-component-trees', componentTreesData.all) + console.log('[COMPONENT_TREES] ✅ Reloaded', componentTreesData.all.length, 'component trees') + setIsLoaded(true) + } catch (err) { + console.error('[COMPONENT_TREES] ❌ Failed to reload component trees:', err) + setError(err instanceof Error ? err : new Error('Unknown error')) + } finally { + setIsLoading(false) + } + }, []) + + useEffect(() => { + loadComponentTrees() + }, []) + + return { + isLoaded, + isLoading, + error, + loadComponentTrees, + getComponentTrees, + getComponentTreesByCategory, + getComponentTreeById, + getComponentTreeByName, + reloadFromJSON, + moleculeTrees: componentTreesData.molecules, + organismTrees: componentTreesData.organisms, + allTrees: componentTreesData.all, + } +}