@powerhousedao/codegen 4.1.0-dev.19 → 4.1.0-dev.20

package/dist/src/codegen/.hygen/templates/powerhouse/generate-drive-editor/components/FolderTree.esm.t

@@ -2,20 +2,32 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FolderTree.tsx"
 unless_exists: true
 ---
-import { useState } from 'react';
-import type { UiFolderNode } from "@powerhousedao/design-system";
+import { useState } from "react";
+import type { FolderNode } from "document-drive";
 
 interface FolderTreeProps {
-  folders: UiFolderNode[];
+  folders: FolderNode[];
   selectedNodeId?: string;
-  onSelectNode: (node: UiFolderNode) => void;
+  onSelectNode: (nodeId: string | undefined) => void;
 }
 
-export function FolderTree({ folders, selectedNodeId, onSelectNode }: FolderTreeProps) {
-  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+/**
+ * Hierarchical folder tree navigation component.
+ * Displays folders in a tree structure with expand/collapse functionality.
+ */
+export function FolderTree({
+  folders,
+  selectedNodeId,
+  onSelectNode,
+}: FolderTreeProps) {
+  // Track which folders are expanded
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
+    new Set(),
+  );
 
+  // Toggle folder expansion state
   const toggleFolder = (folderId: string) => {
-    setExpandedFolders(prev => {
+    setExpandedFolders((prev) => {
       const next = new Set(prev);
       if (next.has(folderId)) {
         next.delete(folderId);
@@ -26,20 +38,22 @@ export function FolderTree({ folders, selectedNodeId, onSelectNode }: FolderTree
     });
   };
 
-  const renderFolder = (folder: UiFolderNode, level: number = 0) => {
-    const hasChildren = folders.some(f => f.parentFolder === folder.id);
+  // Recursive function to render folder tree structure
+  const renderFolder = (folder: FolderNode, level: number = 0) => {
+    const hasChildren = folders.some((f) => f.parentFolder === folder.id);
     const isExpanded = expandedFolders.has(folder.id);
     const isSelected = selectedNodeId === folder.id;
 
     return (
       <div key={folder.id}>
         <div
-          className={`flex items-center py-1 px-2 cursor-pointer hover:bg-gray-100 rounded ${
-            isSelected ? 'bg-gray-100' : ''
+          className={`flex items-center py-1 px-2 cursor-pointer hover:bg-gray-100 rounded text-sm ${
+            isSelected ? "bg-blue-100 text-blue-800" : ""
           }`}
-          style={{ paddingLeft: `${level * 16 + 8}px` }}
-          onClick={() => onSelectNode(folder)}
+          style={{ paddingLeft: `${level * 16 + 8}px` }} // Customize indentation here
+          onClick={() => onSelectNode(folder.id)}
         >
+          {/* Expand/collapse button for folders with children */}
           {hasChildren && (
             <button
               className="w-4 h-4 mr-1 flex items-center justify-center"
@@ -48,16 +62,19 @@ export function FolderTree({ folders, selectedNodeId, onSelectNode }: FolderTree
                 toggleFolder(folder.id);
               }}
             >
-              {isExpanded ? '▼' : '▶'}
+              {isExpanded ? "▼" : "▶"} {/* Customize expand icons here */}
             </button>
           )}
-          <span className="text-sm">{folder.name}</span>
+          {!hasChildren && <div className="w-5 mr-1" />}
+          {/* Customize folder icon and styling here */}
+          <span>📁 {folder.name}</span>
         </div>
+        {/* Recursively render child folders when expanded */}
         {isExpanded && hasChildren && (
           <div>
             {folders
-              .filter(f => f.parentFolder === folder.id)
-              .map(child => renderFolder(child, level + 1))}
+              .filter((f) => f.parentFolder === folder.id)
+              .map((child) => renderFolder(child, level + 1))}
           </div>
         )}
       </div>
@@ -67,19 +84,20 @@ export function FolderTree({ folders, selectedNodeId, onSelectNode }: FolderTree
   return (
     <div className="space-y-1">
       {/* Root Directory Option */}
+      {/* Customize root folder appearance here */}
       <div
-        className={`flex items-center py-1 px-2 cursor-pointer hover:bg-gray-100 rounded ${
-          !selectedNodeId ? 'bg-gray-100' : ''
+        className={`flex items-center py-1 px-2 cursor-pointer hover:bg-gray-100 rounded text-sm ${
+          !selectedNodeId ? "bg-blue-100 text-blue-800" : ""
         }`}
-        onClick={() => onSelectNode({ id: '', name: 'Root', kind: 'FOLDER' } as UiFolderNode)}
+        onClick={() => onSelectNode(undefined)}
       >
-        <span className="text-sm font-medium">Root</span>
+        <span>🏠 Root</span>
       </div>
 
-      {/* Folder Tree */}
+      {/* Render top-level folders (no parent) */}
       {folders
-        .filter(folder => !folder.parentFolder)
-        .map(folder => renderFolder(folder))}
+        .filter((folder) => !folder.parentFolder)
+        .map((folder) => renderFolder(folder))}
     </div>
   );
-} 
+}

package/dist/src/codegen/.hygen/templates/powerhouse/generate-drive-editor/editor.esm.t

@@ -3,71 +3,66 @@ to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/editor.tsx"
 unless_exists: true
 ---
 import { type DriveEditorProps } from "@powerhousedao/reactor-browser";
-import { AnalyticsProvider } from '@powerhousedao/reactor-browser/analytics/context';
-import { DriveContextProvider } from "@powerhousedao/reactor-browser/hooks/useDriveContext";
-import { type DocumentDriveDocument, addFolder, deleteNode, updateNode, generateNodesCopy, copyNode } from "document-drive";
+import { AnalyticsProvider } from "@powerhousedao/reactor-browser/analytics/context";
+import { DriveContextProvider, useDriveContext } from "@powerhousedao/reactor-browser/hooks/useDriveContext";
+import { useInitializePHApp, useSetSelectedNode } from '@powerhousedao/state';
+import { type DocumentDriveDocument, type FileNode } from "document-drive";
 import { WagmiContext } from "@powerhousedao/design-system";
 import { DriveExplorer } from "./components/DriveExplorer.js";
 import { useCallback } from "react";
-import { generateId } from "document-model";
 
 export type IProps = DriveEditorProps<DocumentDriveDocument>;
 
+/**
+ * Base editor component that renders the drive explorer interface.
+ * Customize document opening behavior and drive-level actions here.
+ */
 export function BaseEditor(props: IProps) {
-  const { dispatch, context } = props;
-  
-  const onAddFolder = useCallback((name: string, parentFolder?: string) => {
-    dispatch(addFolder({
-      id: generateId(),
-      name,
-      parentFolder,
-    }));
-  }, [dispatch]);
+  const { context, document } = props;
 
-  const onDeleteNode = useCallback((nodeId: string) => {
-    dispatch(deleteNode({ id: nodeId }));
-  }, [dispatch]);
+  // Get drive operations from context
+  const {
+    onAddFolder,
+    onRenameNode,
+    onCopyNode,
+    showDeleteNodeModal,
+  } = useDriveContext();
 
-  const renameNode = useCallback((nodeId: string, name: string) => {
-    dispatch(updateNode({ id: nodeId, name }));
-  }, [dispatch]);
+  const setSelectedNode = useSetSelectedNode();
 
-  const onCopyNode = useCallback((nodeId: string, targetName: string, parentId?: string) => {
-    const copyNodesInput = generateNodesCopy({
-      srcId: nodeId,
-      targetParentFolder: parentId,
-      targetName,
-    }, () => generateId(), props.document.state.global.nodes);
-
-    const copyNodesAction = copyNodesInput.map(input => {
-      return copyNode(input);
-    });
-
-    for (const copyNodeAction of copyNodesAction) {
-      dispatch(copyNodeAction);
-    }
-  }, [dispatch, props.document.state.global.nodes]);
+  // Handle document opening - customize this to modify document open behavior
+  const onOpenDocument = useCallback(
+    (node: FileNode) => {
+      setSelectedNode(node.id);
+    },
+    [setSelectedNode],
+  );
 
   return (
-    <div
-      className="new-drive-explorer"
-      style={{ height: "100%" }}
-    >
+    <div className="new-drive-explorer" style={{ height: "100%" }}>
       <DriveExplorer
-        driveId={props.document.header.id}
-        nodes={props.document.state.global.nodes}
+        driveId={document.header.id}
         onAddFolder={onAddFolder}
-        onDeleteNode={onDeleteNode}
-        renameNode={renameNode}
+        onRenameNode={onRenameNode}
         onCopyNode={onCopyNode}
+        onOpenDocument={onOpenDocument}
+        showDeleteNodeModal={showDeleteNodeModal}
         context={context}
       />
     </div>
   );
 }
 
+/**
+ * Main editor entry point with required providers.
+ * useInitializePHApp() is required for state management to work properly.
+ */
 export default function Editor(props: IProps) {
+  // Required: Initialize Powerhouse app state
+  useInitializePHApp();
+
   return (
+    // Required context providers for drive functionality
     <DriveContextProvider value={props.context}>
       <WagmiContext>
         <AnalyticsProvider databaseName={props.context.analyticsDatabaseName}>