@powerhousedao/codegen 4.1.0-dev.7 → 4.1.0-dev.71

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

@@ -3,236 +3,231 @@ 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,
+  Breadcrumbs,
+  Button,
+  FileItem,
+  FolderItem,
+  useBreadcrumbs,
 } 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 { EditorContainer } from "./EditorContainer.js";
-import type { DocumentModelModule } from "document-model";
-import { CreateDocumentModal } from "@powerhousedao/design-system";
+import {
+  type DriveEditorProps,
+  getSyncStatusSync,
+  setSelectedNode,
+  showDeleteNodeModal,
+  useDriveSharingType,
+  useFileChildNodesForId,
+  useFolderChildNodesForId,
+  useNodeActions,
+  useNodes,
+  useSelectedDrive,
+  useSelectedFolder,
+  useSelectedNodePath,
+  useUserPermissions,
+} from "@powerhousedao/reactor-browser";
+import { useCallback } from "react";
 import { CreateDocument } from "./CreateDocument.js";
-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;
-  context: DriveEditorContext;
-}
-
-export function DriveExplorer({
-  driveId,
-  nodes,
-  onDeleteNode,
-  renameNode,
-  onAddFolder,
-  onCopyNode,
-  context,
-}: DriveExplorerProps) {
-  const { getDocumentRevision } = context;
-
-  const [selectedNodeId, setSelectedNodeId] = useState<string | undefined>();
-  const [activeDocumentId, setActiveDocumentId] = useState<
-    string | undefined
-  >();
-  const [openModal, setOpenModal] = useState(false);
-  const selectedDocumentModel = useRef<DocumentModelModule | null>(null);
-  const { addDocument, documentModels } = useDriveContext();
-
-  // Dummy functions to satisfy component types
-  const dummyDuplicateNode = useCallback((node: BaseUiNode) => {
-    console.log("Duplicate node:", node);
-  }, []);
-
-  const dummyAddFile = useCallback(
-    async (file: File, parentNode: BaseUiNode | null) => {
-      console.log("Add file:", file, parentNode);
-    },
-    []
-  );
-
-  const dummyMoveNode = useCallback(
-    async (uiNode: BaseUiNode, targetNode: BaseUiNode) => {
-      console.log("Move node:", uiNode, targetNode);
-    },
-    []
-  );
-
-  const handleNodeSelect = useCallback((node: BaseUiFolderNode) => {
-    console.log("Selected node:", node);
-    setSelectedNodeId(node.id);
-  }, []);
-
-  const handleFileSelect = useCallback((node: BaseUiFileNode) => {
-    setActiveDocumentId(node.id);
-  }, []);
-
-  const handleEditorClose = useCallback(() => {
-    setActiveDocumentId(undefined);
-  }, []);
-
-  const onCreateDocument = useCallback(
-    async (fileName: string) => {
-      setOpenModal(false);
-
-      const documentModel = selectedDocumentModel.current;
-      if (!documentModel) return;
-
-      const node = await addDocument(
-        driveId,
-        fileName,
-        documentModel.documentModel.id,
-        selectedNodeId,
-      );
-
-      selectedDocumentModel.current = null;
-      setActiveDocumentId(node.id);
-    },
-    [addDocument, driveId, selectedNodeId]
-  );
-
-  const onSelectDocumentModel = useCallback(
-    (documentModel: DocumentModelModule) => {
-      selectedDocumentModel.current = documentModel;
-      setOpenModal(true);
-    },
-    []
-  );
+import { FolderTree } from "./FolderTree.js";
 
-  const onGetDocumentRevision = useCallback(
-    (options?: GetDocumentOptions) => {
-      if (!activeDocumentId) return;
-      return getDocumentRevision?.(activeDocumentId, options);
+/**
+ * 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(props: DriveEditorProps) {
+  const { children, editorConfig } = props;
+
+  // === DRIVE CONTEXT HOOKS ===
+  // Core drive operations and document models
+  const {
+    onAddFile,
+    onAddFolder,
+    onCopyNode,
+    onDuplicateNode,
+    onMoveNode,
+    onRenameNode,
+  } = useNodeActions();
+
+  const { isAllowedToCreateDocuments } = useUserPermissions();
+  // === STATE MANAGEMENT HOOKS ===
+  // Core state hooks for drive navigation
+  const [selectedDrive] = useSelectedDrive(); // Currently selected drive
+  const selectedFolder = useSelectedFolder(); // Currently selected folder
+  const selectedNodePath = useSelectedNodePath();
+  const sharingType = useDriveSharingType(selectedDrive.header.id);
+
+  // === NAVIGATION SETUP ===
+  // Breadcrumbs for folder navigation
+  const { breadcrumbs, onBreadcrumbSelected } = useBreadcrumbs({
+    selectedNodePath,
+    setSelectedNode,
+  });
+
+  const selectedNodeId = selectedFolder?.id || selectedDrive.header.id;
+
+  const folderChildren = useFolderChildNodesForId(selectedNodeId);
+  const fileChildren = useFileChildNodesForId(selectedNodeId);
+
+  // All nodes (folders and files) for the sidebar tree view
+  const allNodes = useNodes() || [];
+
+  // === EVENT HANDLERS ===
+
+  // 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?.trim()) {
+        try {
+          await onAddFolder(name.trim(), selectedFolder);
+        } catch (error) {
+          console.error("Failed to create folder:", error);
+        }
+      }
     },
-    [getDocumentRevision, activeDocumentId],
-  );
-
-  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"
+    [onAddFolder, selectedFolder],
   );
 
-  // Get children of selected folder using the custom hook
-  const selectedFolderChildren = useSelectedFolderChildren(
-    selectedNodeId,
-    folders,
-    files
-  );
-
-  // Get the active document info from nodes
-  const activeDocument = activeDocumentId
-    ? files.find((file) => file.id === activeDocumentId)
-    : undefined;
-
-  const documentModelModule = activeDocument
-    ? context.getDocumentModelModule(activeDocument.documentType)
-    : null;
-
-  const editorModule = activeDocument
-    ? context.getEditor(activeDocument.documentType)
-    : null;
+  // if a document is selected then it's editor will be passed as children
+  const showDocumentEditor = !!children;
 
+  // === 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}
-        />
-      </div>
+      {/* === LEFT SIDEBAR: Folder and File Navigation === */}
+      {/* Sidebar component manages its own width, styling, and overflow */}
+      <FolderTree
+        driveId={selectedDrive.header.id}
+        driveName={selectedDrive.state.global.name}
+        nodes={allNodes}
+        selectedNodeId={selectedNodeId}
+        onSelectNode={setSelectedNode}
+      />
 
-      {/* Main Content */}
-      <div className="flex-1 p-4 overflow-y-auto">
-        {activeDocument && documentModelModule && editorModule ? (
-          <EditorContainer
-            context={{
-              ...context,
-              getDocumentRevision: onGetDocumentRevision,
-            }}
-            documentId={activeDocumentId!}
-            documentType={activeDocument.documentType}
-            driveId={driveId}
-            onClose={handleEditorClose}
-            title={activeDocument.name}
-            documentModelModule={documentModelModule}
-            editorModule={editorModule}
-          />
+      {/* === RIGHT CONTENT AREA: Files/Folders or Document Editor === */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {/* Conditional rendering: Document editor or folder contents */}
+        {showDocumentEditor ? (
+          // Document editor view
+          children
         ) : (
-          <>
-            <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}
-            />
-
-            {/* Files Section */}
-            <FileItemsGrid
-              files={selectedFolderChildren.files}
-              onSelectNode={handleFileSelect}
-              onRenameNode={renameNode}
-              onDuplicateNode={dummyDuplicateNode}
-              onDeleteNode={onDeleteNode}
-              isAllowedToCreateDocuments={true}
-            />
-
-            {/* Create Document Section */}
-            <CreateDocument
-              createDocument={onSelectDocumentModel}
-              documentModels={filteredDocumentModels}
-            />
-          </>
+          /* Folder contents view */
+          <div className="space-y-6 px-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="bg-gray-200 p-2 hover:bg-gray-300"
+                  >
+                    New Folder
+                  </Button>
+                )}
+              </div>
+
+              {/* Navigation breadcrumbs */}
+              <div className="border-b border-gray-200 pb-3">
+                <Breadcrumbs
+                  breadcrumbs={breadcrumbs}
+                  createEnabled={isAllowedToCreateDocuments}
+                  onCreate={handleCreateFolder}
+                  onBreadcrumbSelected={onBreadcrumbSelected}
+                />
+              </div>
+            </div>
+
+            {/* === FOLDERS SECTION === */}
+            {folderChildren.length > 0 && (
+              <div>
+                <h3 className="mb-2 text-sm font-bold text-gray-600">
+                  Folders
+                </h3>
+                <div className="flex flex-wrap gap-4">
+                  {folderChildren.map((folderNode) => (
+                    <FolderItem
+                      key={folderNode.id}
+                      folderNode={folderNode}
+                      isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+                      sharingType={sharingType || "LOCAL"}
+                      getSyncStatusSync={getSyncStatusSync}
+                      setSelectedNode={setSelectedNode}
+                      onAddFile={onAddFile}
+                      onCopyNode={onCopyNode}
+                      onMoveNode={onMoveNode}
+                      onRenameNode={onRenameNode}
+                      onDuplicateNode={onDuplicateNode}
+                      onAddFolder={onAddFolder}
+                      onAddAndSelectNewFolder={handleCreateFolder}
+                      showDeleteNodeModal={(node) =>
+                        showDeleteNodeModal(node.id)
+                      }
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* === FILES/DOCUMENTS SECTION === */}
+            {fileChildren.length > 0 && (
+              <div>
+                <h3 className="mb-2 text-sm font-semibold text-gray-600">
+                  Documents
+                </h3>
+                <div className="flex flex-wrap gap-4">
+                  {fileChildren.map((fileNode) => (
+                    <FileItem
+                      key={fileNode.id}
+                      fileNode={fileNode}
+                      isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+                      sharingType={sharingType || "LOCAL"}
+                      getSyncStatusSync={getSyncStatusSync}
+                      setSelectedNode={setSelectedNode}
+                      showDeleteNodeModal={(node) =>
+                        showDeleteNodeModal(node.id)
+                      }
+                      onRenameNode={onRenameNode}
+                      onDuplicateNode={onDuplicateNode}
+                      onAddFile={onAddFile}
+                      onCopyNode={onCopyNode}
+                      onMoveNode={onMoveNode}
+                      onAddFolder={onAddFolder}
+                      onAddAndSelectNewFolder={handleCreateFolder}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* === EMPTY STATE === */}
+            {/* Customize empty state message and styling here */}
+            {folderChildren.length === 0 && fileChildren.length === 0 && (
+              <div className="py-12 text-center text-gray-500">
+                <p className="text-lg">This folder is empty</p>
+                <p className="mt-2 text-sm">
+                  Create your first document or folder below
+                </p>
+              </div>
+            )}
+
+            {/* === DOCUMENT CREATION SECTION === */}
+            {/* Component for creating new documents */}
+            <CreateDocument documentTypes={editorConfig?.documentTypes} />
+          </div>
         )}
       </div>
-
-      {/* Create Document Modal */}
-      <CreateDocumentModal
-        onContinue={onCreateDocument}
-        onOpenChange={(open) => setOpenModal(open)}
-        open={openModal}
-      />
     </div>
   );
-} 
+}

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

@@ -2,84 +2,113 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FolderTree.tsx"
 unless_exists: true
 ---
-import { useState } from 'react';
-import type { UiFolderNode } from "@powerhousedao/design-system";
+import {
+  Sidebar,
+  SidebarProvider,
+  type SidebarNode,
+} from "@powerhousedao/document-engineering";
+import type { Node } from "document-drive";
+import { useMemo } from "react";
 
 interface FolderTreeProps {
-  folders: UiFolderNode[];
+  driveId: string;
+  driveName: string;
+  nodes: Node[];
   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());
+function isFolder(node: Node): boolean {
+  return node.kind === "folder";
+}
 
-  const toggleFolder = (folderId: string) => {
-    setExpandedFolders(prev => {
-      const next = new Set(prev);
-      if (next.has(folderId)) {
-        next.delete(folderId);
-      } else {
-        next.add(folderId);
+function buildSidebarNodes(
+  nodes: Node[],
+  parentId: string | null | undefined,
+): SidebarNode[] {
+  return nodes
+    .filter((n) => {
+      if (parentId == null) {
+        return n.parentFolder == null;
+      }
+      return n.parentFolder === parentId;
+    })
+    .map((node): SidebarNode => {
+      if (isFolder(node)) {
+        return {
+          id: node.id,
+          title: node.name,
+          icon: "FolderClose" as const,
+          expandedIcon: "FolderOpen" as const,
+          children: buildSidebarNodes(nodes, node.id),
+        };
       }
-      return next;
+      return {
+        id: node.id,
+        title: node.name,
+        icon: "File" as const,
+      };
     });
-  };
+}
 
-  const renderFolder = (folder: UiFolderNode, level: number = 0) => {
-    const hasChildren = folders.some(f => f.parentFolder === folder.id);
-    const isExpanded = expandedFolders.has(folder.id);
-    const isSelected = selectedNodeId === folder.id;
+function transformNodesToSidebarNodes(
+  nodes: Node[],
+  driveName: string,
+): SidebarNode[] {
+  return [
+    {
+      id: "root",
+      title: driveName,
+      icon: "Drive" as const,
+      children: buildSidebarNodes(nodes, null),
+    },
+  ];
+}
+
+/**
+ * Hierarchical folder tree navigation component using Sidebar from document-engineering.
+ * Displays folders and files in a tree structure with expand/collapse functionality, search, and resize support.
+ */
+export function FolderTree({
+  driveId,
+  driveName,
+  nodes,
+  selectedNodeId,
+  onSelectNode,
+}: FolderTreeProps) {
+  // Transform Node[] to hierarchical SidebarNode structure
+  const sidebarNodes = useMemo(
+    () => transformNodesToSidebarNodes(nodes, driveName),
+    [nodes, driveName],
+  );
 
-    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' : ''
-          }`}
-          style={{ paddingLeft: `${level * 16 + 8}px` }}
-          onClick={() => onSelectNode(folder)}
-        >
-          {hasChildren && (
-            <button
-              className="w-4 h-4 mr-1 flex items-center justify-center"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleFolder(folder.id);
-              }}
-            >
-              {isExpanded ? '▼' : '▶'}
-            </button>
-          )}
-          <span className="text-sm">{folder.name}</span>
-        </div>
-        {isExpanded && hasChildren && (
-          <div>
-            {folders
-              .filter(f => f.parentFolder === folder.id)
-              .map(child => renderFolder(child, level + 1))}
-          </div>
-        )}
-      </div>
-    );
+  const handleActiveNodeChange = (node: SidebarNode) => {
+    // If root node is selected, pass undefined to match existing behavior
+    if (node.id === "root") {
+      onSelectNode(undefined);
+    } else {
+      onSelectNode(node.id);
+    }
   };
+  // Map selectedNodeId to activeNodeId (use "root" when undefined)
+  const activeNodeId =
+    !selectedNodeId || selectedNodeId === driveId ? "root" : selectedNodeId;
 
   return (
-    <div className="space-y-1">
-      {/* Root Directory Option */}
-      <div
-        className={`flex items-center py-1 px-2 cursor-pointer hover:bg-gray-100 rounded ${
-          !selectedNodeId ? 'bg-gray-100' : ''
-        }`}
-        onClick={() => onSelectNode({ id: '', name: 'Root', kind: 'FOLDER' } as UiFolderNode)}
-      >
-        <span className="text-sm font-medium">Root</span>
-      </div>
-
-      {/* Folder Tree */}
-      {folders
-        .filter(folder => !folder.parentFolder)
-        .map(folder => renderFolder(folder))}
-    </div>
+    <SidebarProvider nodes={sidebarNodes}>
+      <Sidebar
+        className="pt-1"
+        nodes={sidebarNodes}
+        activeNodeId={activeNodeId}
+        onActiveNodeChange={handleActiveNodeChange}
+        sidebarTitle="Drive Explorer"
+        showSearchBar={true}
+        resizable={true}
+        allowPinning={false}
+        showStatusFilter={false}
+        initialWidth={256}
+        defaultLevel={2}
+      />
+    </SidebarProvider>
   );
-} 
+}