@powerhousedao/codegen 4.1.0-dev.2 → 4.1.0-dev.21

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

@@ -2,88 +2,179 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/DriveExplorer.tsx"
 unless_exists: true
 ---
-import {
-  type BaseUiFileNode,
-  type BaseUiFolderNode,
-  type BaseUiNode,
-  type UiFileNode,
-  type UiFolderNode,
-  type UiNode,
+import { 
+  FolderItem,
+  FileItem,
+  type SharingType,
+  Breadcrumbs,
+  useBreadcrumbs,
+  useDrop,
 } from "@powerhousedao/design-system";
-import { useCallback, useState, useRef, useEffect } from "react";
-import type { FileNode, GetDocumentOptions, Node } from "document-drive";
-import { FileItemsGrid } from "./FileItemsGrid.js";
-import { FolderItemsGrid } from "./FolderItemsGrid.js";
-import { FolderTree } from "./FolderTree.js";
-import { useTransformedNodes } from "../hooks/useTransformedNodes.js";
-import { useSelectedFolderChildren } from "../hooks/useSelectedFolderChildren.js";
+import { useCallback, useState, useRef, useMemo } from "react";
+import type { FileNode, FolderNode, Node, GetDocumentOptions } from "document-drive";
+import { 
+  useNodes,
+  useSelectedDrive,
+  useSelectedFolder,
+  useFolderChildNodesForId,
+  useFileChildNodesForId,
+  useSetSelectedNode,
+  getDriveSharingType,
+  makeFolderNodeFromDrive,
+} from "@powerhousedao/state";
 import { EditorContainer } from "./EditorContainer.js";
+import { FolderTree } from "./FolderTree.js";
 import type { DocumentModelModule } from "document-model";
 import { CreateDocumentModal } from "@powerhousedao/design-system";
 import { CreateDocument } from "./CreateDocument.js";
-import { type DriveEditorContext, useDriveContext } from "@powerhousedao/reactor-browser";
+import {
+  type DriveEditorContext,
+  useDriveContext,
+} from "@powerhousedao/reactor-browser";
 
 interface DriveExplorerProps {
   driveId: string;
-  nodes: Node[];
-  onAddFolder: (name: string, parentFolder?: string) => void;
-  onDeleteNode: (nodeId: string) => void;
-  renameNode: (nodeId: string, name: string) => void;
-  onCopyNode: (nodeId: string, targetName: string, parentId?: string) => void;
+  onAddFolder: (name: string, parent: Node | undefined) => Promise<FolderNode | undefined>;
+  onRenameNode: (newName: string, node: Node) => Promise<Node | undefined>;
+  onCopyNode: (src: Node, target: Node | undefined) => Promise<void>;
+  onOpenDocument: (node: FileNode) => void;
+  showDeleteNodeModal: (node: Node) => void;
   context: DriveEditorContext;
 }
 
+/**
+ * Main drive explorer component with sidebar navigation and content area.
+ * Layout: Left sidebar (folder tree) + Right content area (files/folders + document editor)
+ */
 export function DriveExplorer({
   driveId,
-  nodes,
-  onDeleteNode,
-  renameNode,
-  onAddFolder,
+  onRenameNode,
+  onAddFolder: onAddFolderProp,
   onCopyNode,
+  onOpenDocument,
+  showDeleteNodeModal,
   context,
 }: DriveExplorerProps) {
-  const { getDocumentRevision } = context;
 
-  const [selectedNodeId, setSelectedNodeId] = useState<string | undefined>();
+  // === DOCUMENT EDITOR STATE ===
+  // Customize document opening/closing behavior here
   const [activeDocumentId, setActiveDocumentId] = useState<
     string | undefined
   >();
   const [openModal, setOpenModal] = useState(false);
   const selectedDocumentModel = useRef<DocumentModelModule | null>(null);
-  const { addDocument, documentModels } = useDriveContext();
+  
+  // === DRIVE CONTEXT HOOKS ===
+  // Core drive operations and document models
+  const { 
+    addDocument, 
+    documentModels, // Modify this to filter available document types
+    getSyncStatusSync,
+    isAllowedToCreateDocuments,
+    onAddFile,
+    onAddFolder,
+    onAddAndSelectNewFolder,
+    onDuplicateNode,
+    onMoveNode,
+  } = useDriveContext();
+  
+  // === STATE MANAGEMENT HOOKS ===
+  // Core state hooks for drive navigation
+  const nodes = useNodes(); // All nodes in the drive
+  const selectedDrive = useSelectedDrive(); // Current drive
+  const selectedFolder = useSelectedFolder(); // Currently selected folder
+  const setSelectedNode = useSetSelectedNode(); // Function to change selection
+  
+  // === BREADCRUMB PATH CALCULATION ===
+  // Local fix for correct breadcrumb ordering (replaces useSelectedNodePath)
+  // TODO: Remove this when state package breadcrumb ordering is fixed
+  const selectedNodePath = useMemo(() => {
+    if (!nodes || !selectedDrive || !selectedFolder) return [];
+    const driveFolderNode = makeFolderNodeFromDrive(selectedDrive);
+    
+    const path: Node[] = [];
+    let current = selectedFolder;
+    
+    // Build path from current folder up to root
+    while (current) {
+      path.unshift(current);
+      if (!current.parentFolder) break;
+      current = nodes.find((n) => n.id === current.parentFolder) as FolderNode;
+    }
+    
+    // Add drive at the beginning
+    if (driveFolderNode) {
+      path.unshift(driveFolderNode);
+    }
+    
+    return path;
+  }, [nodes, selectedDrive, selectedFolder]);
+  
+  // === COMPUTED VALUES ===
+  const selectedNodeId = selectedFolder?.id;
+  const sharingType: SharingType = getDriveSharingType(selectedDrive) as SharingType;
+  const selectedDriveAsFolderNode = makeFolderNodeFromDrive(selectedDrive);
 
-  // Dummy functions to satisfy component types
-  const dummyDuplicateNode = useCallback((node: BaseUiNode) => {
-    console.log("Duplicate node:", node);
-  }, []);
+  // === NAVIGATION SETUP ===
+  // Breadcrumbs for folder navigation
+  const { breadcrumbs, onBreadcrumbSelected } = useBreadcrumbs({
+    selectedNodePath,
+    setSelectedNode,
+  });
 
-  const dummyAddFile = useCallback(
-    async (file: File, parentNode: BaseUiNode | null) => {
-      console.log("Add file:", file, parentNode);
-    },
-    []
-  );
+  // Drag & drop functionality for file uploads
+  const { isDropTarget, dropProps } = useDrop({
+    node: selectedDriveAsFolderNode,
+    onAddFile,
+    onCopyNode,
+    onMoveNode,
+  });
 
-  const dummyMoveNode = useCallback(
-    async (uiNode: BaseUiNode, targetNode: BaseUiNode) => {
-      console.log("Move node:", uiNode, targetNode);
-    },
-    []
-  );
+  // === FOLDER/FILE CHILDREN ===
+  // Get current folder's contents
+  const nodeIdForChildren = selectedNodeId === undefined ? null : selectedNodeId;
+  const folderChildren = useFolderChildNodesForId(nodeIdForChildren);
+  const fileChildren = useFileChildNodesForId(nodeIdForChildren);
+  
+  // All folders for the sidebar tree view
+  const allFolders = nodes?.filter(n => n.kind === "folder") as FolderNode[] || [];
 
-  const handleNodeSelect = useCallback((node: BaseUiFolderNode) => {
-    console.log("Selected node:", node);
-    setSelectedNodeId(node.id);
-  }, []);
+  // === EVENT HANDLERS ===
+  // Customize document selection behavior here
+  const handleFileSelect = useCallback((nodeId: string | undefined) => {
+    if (!nodeId) return;
+    const fileNode = nodes?.find(n => n.id === nodeId) as FileNode;
+    if (fileNode) {
+      onOpenDocument(fileNode);
+    }
+    setActiveDocumentId(nodeId);
+  }, [nodes, onOpenDocument]);
 
-  const handleFileSelect = useCallback((node: BaseUiFileNode) => {
-    setActiveDocumentId(node.id);
-  }, []);
+  // Handle folder creation with optional name parameter
+  const handleCreateFolder = useCallback(async (folderName?: string) => {
+    let name: string | undefined = folderName;
+    
+    // If no name provided, prompt for it (for manual folder creation)
+    if (!name) {
+      const promptResult = prompt("Enter folder name:");
+      name = promptResult || undefined;
+    }
+    
+    if (name && name.trim()) {
+      try {
+        await onAddFolder(name.trim(), selectedFolder);
+      } catch (error) {
+        console.error("Failed to create folder:", error);
+      }
+    }
+  }, [onAddFolder, selectedFolder]);
 
+  // Close document editor and return to folder view
   const handleEditorClose = useCallback(() => {
     setActiveDocumentId(undefined);
   }, []);
 
+  // Handle document creation from modal
   const onCreateDocument = useCallback(
     async (fileName: string) => {
       setOpenModal(false);
@@ -91,58 +182,52 @@ export function DriveExplorer({
       const documentModel = selectedDocumentModel.current;
       if (!documentModel) return;
 
-      const node = await addDocument(
-        driveId,
-        fileName,
-        documentModel.documentModel.id,
-        selectedNodeId,
-      );
+      try {
+        const node = await addDocument(
+          driveId,
+          fileName,
+          documentModel.documentModel.id,
+          selectedNodeId,
+        );
 
-      selectedDocumentModel.current = null;
-      setActiveDocumentId(node.id);
+        selectedDocumentModel.current = null;
+        
+        if (node) {
+          // Customize: Auto-open created document by uncommenting below
+          // setActiveDocumentId(node.id);
+        }
+      } catch (error) {
+        console.error("Failed to create document:", error);
+      }
     },
-    [addDocument, driveId, selectedNodeId]
+    [addDocument, driveId, selectedNodeId],
   );
 
+  // Handle document type selection for creation
   const onSelectDocumentModel = useCallback(
     (documentModel: DocumentModelModule) => {
       selectedDocumentModel.current = documentModel;
       setOpenModal(true);
     },
-    []
+    [],
   );
 
+  // Document revision handling (placeholder implementation)
   const onGetDocumentRevision = useCallback(
-    (options?: GetDocumentOptions) => {
+    (_options?: GetDocumentOptions) => {
       if (!activeDocumentId) return;
-      return getDocumentRevision?.(activeDocumentId, options);
+      return undefined;
     },
-    [getDocumentRevision, activeDocumentId],
+    [activeDocumentId],
   );
 
+  // === DOCUMENT EDITOR DATA ===
+  // Filter available document types here if needed
   const filteredDocumentModels = documentModels;
 
-  // Transform nodes using the custom hook
-  const transformedNodes = useTransformedNodes(nodes, driveId);
-
-  // Separate folders and files
-  const folders = transformedNodes.filter(
-    (node): node is UiFolderNode => node.kind === "FOLDER"
-  );
-  const files = transformedNodes.filter(
-    (node): node is UiFileNode => node.kind === "FILE"
-  );
-
-  // Get children of selected folder using the custom hook
-  const selectedFolderChildren = useSelectedFolderChildren(
-    selectedNodeId,
-    folders,
-    files
-  );
-
-  // Get the active document info from nodes
+  // Get active document and its editor components
   const activeDocument = activeDocumentId
-    ? files.find((file) => file.id === activeDocumentId)
+    ? fileChildren.find((file) => file.id === activeDocumentId)
     : undefined;
 
   const documentModelModule = activeDocument
@@ -153,21 +238,33 @@ export function DriveExplorer({
     ? context.getEditor(activeDocument.documentType)
     : null;
 
+  // === RENDER ===
   return (
     <div className="flex h-full">
-      {/* Sidebar */}
-      <div className="w-64 border-r border-gray-200 p-4 overflow-y-auto">
-        <h2 className="text-lg font-semibold mb-4">Folders</h2>
-        <FolderTree
-          folders={folders}
-          selectedNodeId={selectedNodeId}
-          onSelectNode={handleNodeSelect}
-        />
+      {/* === LEFT SIDEBAR: Folder Navigation === */}
+      {/* Customize sidebar width by changing w-64 */}
+      <div className="w-64 border-r border-gray-200 bg-white overflow-y-auto">
+        <div className="p-4">
+          {/* Customize sidebar title here */}
+          <h2 className="text-lg font-semibold mb-4 text-gray-700">Drive Explorer</h2>
+          
+          {/* Folder tree navigation component */}
+          <FolderTree
+            folders={allFolders}
+            selectedNodeId={selectedNodeId}
+            onSelectNode={setSelectedNode}
+          />
+        </div>
       </div>
 
-      {/* Main Content */}
-      <div className="flex-1 p-4 overflow-y-auto">
+      {/* === RIGHT CONTENT AREA: Files/Folders or Document Editor === */}
+      <div 
+        className={`flex-1 p-4 overflow-y-auto ${isDropTarget ? "bg-blue-50 border-2 border-dashed border-blue-300" : ""}`}
+        {...dropProps}
+      >
+        {/* Conditional rendering: Document editor or folder contents */}
         {activeDocument && documentModelModule && editorModule ? (
+          // Document editor view
           <EditorContainer
             context={{
               ...context,
@@ -182,52 +279,116 @@ export function DriveExplorer({
             editorModule={editorModule}
           />
         ) : (
-          <>
-            <h2 className="text-lg font-semibold mb-4">Contents</h2>
-
-            {/* Folders Section */}
-            <FolderItemsGrid
-              folders={selectedFolderChildren.folders}
-              onSelectNode={handleNodeSelect}
-              onRenameNode={renameNode}
-              onDuplicateNode={(uiNode) =>
-                onCopyNode(
-                  uiNode.id,
-                  "Copy of " + uiNode.name,
-                  uiNode.parentFolder
-                )
-              }
-              onDeleteNode={onDeleteNode}
-              onAddFile={dummyAddFile}
-              onCopyNode={async (uiNode, targetNode) =>
-                onCopyNode(uiNode.id, "Copy of " + uiNode.name, targetNode.id)
-              }
-              onMoveNode={dummyMoveNode}
-              isAllowedToCreateDocuments={true}
-              onAddFolder={onAddFolder}
-              parentFolderId={selectedNodeId}
-            />
+          /* Folder contents view */
+          <div className="space-y-6">
+            {/* === HEADER SECTION === */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                {/* Folder title */}
+                <h2 className="text-lg font-semibold">
+                  {selectedFolder ? `Contents of "${selectedFolder.name}"` : "Root Contents"}
+                </h2>
+                {/* Customize: Add more action buttons here */}
+                {isAllowedToCreateDocuments && (
+                  <button
+                    onClick={() => handleCreateFolder()}
+                    className="px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600"
+                  >
+                    + New Folder
+                  </button>
+                )}
+              </div>
+              
+              {/* Navigation breadcrumbs */}
+              {breadcrumbs.length > 1 && (
+                <div className="border-b border-gray-200 pb-3">
+                  <Breadcrumbs
+                    breadcrumbs={breadcrumbs}
+                    createEnabled={isAllowedToCreateDocuments}
+                    onCreate={handleCreateFolder}
+                    onBreadcrumbSelected={onBreadcrumbSelected}
+                  />
+                </div>
+              )}
+            </div>
 
-            {/* Files Section */}
-            <FileItemsGrid
-              files={selectedFolderChildren.files}
-              onSelectNode={handleFileSelect}
-              onRenameNode={renameNode}
-              onDuplicateNode={dummyDuplicateNode}
-              onDeleteNode={onDeleteNode}
-              isAllowedToCreateDocuments={true}
-            />
+            {/* === FOLDERS SECTION === */}
+            {/* Customize grid layout by changing grid-cols-1 */}
+            {folderChildren.length > 0 && (
+              <div>
+                <h3 className="text-sm font-medium text-gray-500 mb-2">📁 Folders</h3>
+                <div className="grid grid-cols-1 gap-2">
+                  {folderChildren.map((folderNode) => (
+                    <FolderItem
+                      key={folderNode.id}
+                      folderNode={folderNode}
+                      isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+                      sharingType={sharingType}
+                      getSyncStatusSync={getSyncStatusSync}
+                      setSelectedNode={setSelectedNode}
+                      onAddFile={onAddFile}
+                      onCopyNode={onCopyNode}
+                      onMoveNode={onMoveNode}
+                      onRenameNode={onRenameNode}
+                      onDuplicateNode={onDuplicateNode}
+                      onAddFolder={onAddFolderProp}
+                      onAddAndSelectNewFolder={onAddAndSelectNewFolder}
+                      showDeleteNodeModal={showDeleteNodeModal}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* === FILES/DOCUMENTS SECTION === */}
+            {/* Customize grid layout by changing grid-cols-1 */}
+            {fileChildren.length > 0 && (
+              <div>
+                <h3 className="text-sm font-medium text-gray-500 mb-2">📄 Documents</h3>
+                <div className="grid grid-cols-1 gap-2">
+                  {fileChildren.map((fileNode) => (
+                    <FileItem
+                      key={fileNode.id}
+                      fileNode={fileNode}
+                      isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+                      sharingType={sharingType}
+                      getSyncStatusSync={getSyncStatusSync}
+                      setSelectedNode={(nodeId) => handleFileSelect(nodeId)}
+                      showDeleteNodeModal={showDeleteNodeModal}
+                      onRenameNode={onRenameNode}
+                      onDuplicateNode={onDuplicateNode}
+                      onAddFile={onAddFile}
+                      onCopyNode={onCopyNode}
+                      onMoveNode={onMoveNode}
+                      onAddFolder={onAddFolderProp}
+                      onAddAndSelectNewFolder={onAddAndSelectNewFolder}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* === EMPTY STATE === */}
+            {/* Customize empty state message and styling here */}
+            {folderChildren.length === 0 && fileChildren.length === 0 && (
+              <div className="text-center py-12 text-gray-500">
+                <p className="text-lg">📁 This folder is empty</p>
+                <p className="text-sm mt-2">Create your first document or folder below</p>
+              </div>
+            )}
 
-            {/* Create Document Section */}
+            {/* === DOCUMENT CREATION SECTION === */}
+            {/* Component for creating new documents */}
             <CreateDocument
               createDocument={onSelectDocumentModel}
               documentModels={filteredDocumentModels}
             />
-          </>
+          </div>
         )}
       </div>
 
-      {/* Create Document Modal */}
+      {/* === DOCUMENT CREATION MODAL === */}
+      {/* Modal for entering document name after selecting type */}
       <CreateDocumentModal
         onContinue={onCreateDocument}
         onOpenChange={(open) => setOpenModal(open)}
@@ -235,4 +396,4 @@ export function DriveExplorer({
       />
     </div>
   );
-} 
+}

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

@@ -30,11 +30,17 @@ export interface EditorContainerProps {
   documentType: string;
   onClose: () => void;
   title: string;
-  context: Omit<DriveEditorContext, "getDocumentRevision"> & Pick<EditorContext, "getDocumentRevision">;
+  context: Omit<DriveEditorContext, "getDocumentRevision"> &
+    Pick<EditorContext, "getDocumentRevision">;
   documentModelModule: DocumentModelModule<PHDocument>;
   editorModule: EditorModule;
 }
 
+/**
+ * Document editor container that wraps individual document editors.
+ * Handles document loading, toolbar, revision history, and dynamic editor loading.
+ * Customize toolbar actions and editor context here.
+ */
 export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
   const {
     title,
@@ -47,12 +53,15 @@ export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
     documentModelModule,
   } = props;
 
-  const [selectedTimelineItem, setSelectedTimelineItem] = useState<TimelineItem | null>(null);
+  // UI state for revision history and timeline
+  const [selectedTimelineItem, setSelectedTimelineItem] =
+    useState<TimelineItem | null>(null);
   const [showRevisionHistory, setShowRevisionHistory] = useState(false);
   const { useDocumentEditorProps } = useDriveContext();
 
   const user = context.user as User | undefined;
 
+  // Document data and editor state
   const { dispatch, error, document } = useDocumentEditorProps({
     documentId,
     documentType,
@@ -61,12 +70,14 @@ export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
     user,
   });
 
+  // Timeline data for revision history
   const timelineItems = useTimelineItems(
     documentId,
     document?.header.createdAtUtcIso,
     driveId,
   );
 
+  // Document export functionality - customize export behavior here
   const onExport = useCallback(async () => {
     if (document) {
       const ext = documentModelModule.documentModel.extension;
@@ -74,6 +85,7 @@ export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
     }
   }, [document?.header.revision.global, document?.header.revision.local]);
 
+  // Loading state component
   const loadingContent = (
     <div className="flex-1 flex justify-center items-center h-full">
       <DefaultEditorLoader />
@@ -82,9 +94,11 @@ export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
 
   if (!document) return loadingContent;
 
+  // Dynamically load the appropriate editor component for this document type
   const EditorComponent = editorModule.Component as FC<EditorProps<PHDocument>>;
 
   return showRevisionHistory ? (
+    // Revision history view
     <RevisionHistory
       documentId={documentId}
       documentTitle={title}
@@ -94,17 +108,20 @@ export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
       onClose={() => setShowRevisionHistory(false)}
     />
   ) : (
+    // Main editor view
     <Suspense fallback={loadingContent}>
+      {/* Document toolbar - customize available actions here */}
       <DocumentToolbar
         onClose={onClose}
         onExport={onExport}
         onShowRevisionHistory={() => setShowRevisionHistory(true)}
-        onSwitchboardLinkClick={() => {}}
+        onSwitchboardLinkClick={() => {}} // Customize switchboard integration
         title={title}
         timelineButtonVisible={editorModule.config.timelineEnabled}
         timelineItems={timelineItems.data}
         onTimelineItemClick={setSelectedTimelineItem}
       />
+      {/* Dynamic editor component based on document type */}
       <EditorComponent
         context={{
           ...context,