@powerhousedao/codegen 4.1.0-dev.8 → 4.1.0-staging.1

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

@@ -2,49 +2,63 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/CreateDocument.tsx"
 unless_exists: true
 ---
+import {
+  addDocument,
+  useDocumentModelModules,
+  useSelectedDriveId,
+  useSelectedFolder,
+  type VetraDocumentModelModule,
+} from "@powerhousedao/reactor-browser";
 import { Button } from "@powerhousedao/design-system";
-import { type DocumentModelModule } from "document-model";
 
-interface CreateDocumentProps {
-  documentModels?: DocumentModelModule[];
-  createDocument: (doc: DocumentModelModule) => void;
-}
+/**
+ * Document creation UI component.
+ * Displays available document types as clickable buttons.
+ */
+export const CreateDocument = () => {
+  const selectedDriveId = useSelectedDriveId();
+  const selectedFolder = useSelectedFolder();
+  const documentModelModules = useDocumentModelModules();
 
-function getDocumentSpec(doc: DocumentModelModule) {
-  if ("documentModelState" in doc) {
-    return doc.documentModelState as DocumentModelModule["documentModel"];
+  async function handleAddDocument(module: VetraDocumentModelModule) {
+    if (!selectedDriveId) {
+      return;
+    }
+    await addDocument(
+      selectedDriveId,
+      `New ${module.documentModel.name} document`,
+      module.documentModel.id,
+      selectedFolder?.id,
+    );
   }
 
-  return doc.documentModel;
-}
-
-export const CreateDocument: React.FC<CreateDocumentProps> = ({
-  documentModels,
-  createDocument,
-}) => {
   return (
     <div className="px-6">
+      {/* Customize section title here */}
       <h3 className="mb-3 mt-4 text-sm font-bold text-gray-600">
         New document
       </h3>
+      {/* Customize layout by changing flex-wrap, gap, or grid layout */}
       <div className="flex w-full flex-wrap gap-4">
-        {documentModels?.map((doc) => {
-          const spec = getDocumentSpec(doc);
+        {documentModelModules?.map((documentModelModule) => {
           return (
             <Button
-              key={spec.id}
-              color="light"
+              key={documentModelModule.documentModel.id}
+              color="light" // Customize button appearance
               size="small"
               className="cursor-pointer"
-              title={spec.name}
-              aria-description={spec.description}
-              onClick={() => createDocument(doc)}
+              title={documentModelModule.documentModel.name}
+              aria-description={documentModelModule.documentModel.description}
+              onClick={() => handleAddDocument(documentModelModule)}
             >
-              <span className="text-sm">{spec.name}</span>
+              {/* Customize document type display format */}
+              <span className="text-sm">
+                {documentModelModule.documentModel.name}
+              </span>
             </Button>
           );
         })}
       </div>
     </div>
   );
-}; 
+};

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

@@ -3,231 +3,294 @@ 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,
+  CreateDocumentModal,
+  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 {
+  addDocument,
+  type DriveEditorProps,
+  getSyncStatusSync,
+  setSelectedNode,
+  useAllFolderNodes,
+  useDocumentModelModules,
+  useDriveContext,
+  useDriveSharingType,
+  useEditorModules,
+  useFileChildNodes,
+  useFolderChildNodes,
+  useSelectedDrive,
+  useSelectedFolder,
+  useSelectedNodePath,
+  useUserPermissions,
+} from "@powerhousedao/reactor-browser";
 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";
-
-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;
-}
+import { useCallback, useRef, useState } from "react";
+import { CreateDocument } from "./CreateDocument.jsx";
+import { EditorContainer } from "./EditorContainer.jsx";
+import { FolderTree } from "./FolderTree.jsx";
 
-export function DriveExplorer({
-  driveId,
-  nodes,
-  onDeleteNode,
-  renameNode,
-  onAddFolder,
-  onCopyNode,
-  context,
-}: DriveExplorerProps) {
-  const { getDocumentRevision } = context;
-
-  const [selectedNodeId, setSelectedNodeId] = useState<string | undefined>();
+/**
+ * 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) {
+  // === 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();
+  const editorModules = useEditorModules();
+  // === DRIVE CONTEXT HOOKS ===
+  // Core drive operations and document models
+  const {
+    onAddFile,
+    onAddFolder,
+    onCopyNode,
+    onDuplicateNode,
+    onMoveNode,
+    onRenameNode,
+    showDeleteNodeModal,
+  } = useDriveContext();
 
-  // Dummy functions to satisfy component types
-  const dummyDuplicateNode = useCallback((node: BaseUiNode) => {
-    console.log("Duplicate node:", node);
-  }, []);
+  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);
 
-  const dummyAddFile = useCallback(
-    async (file: File, parentNode: BaseUiNode | null) => {
-      console.log("Add file:", file, parentNode);
-    },
-    []
-  );
+  // === NAVIGATION SETUP ===
+  // Breadcrumbs for folder navigation
+  const { breadcrumbs, onBreadcrumbSelected } = useBreadcrumbs({
+    selectedNodePath,
+    setSelectedNode,
+  });
 
-  const dummyMoveNode = useCallback(
-    async (uiNode: BaseUiNode, targetNode: BaseUiNode) => {
-      console.log("Move node:", uiNode, targetNode);
-    },
-    []
-  );
+  const folderChildren = useFolderChildNodes();
+  const fileChildren = useFileChildNodes();
+
+  // All folders for the sidebar tree view
+  const allFolders = useAllFolderNodes();
 
-  const handleNodeSelect = useCallback((node: BaseUiFolderNode) => {
-    console.log("Selected node:", node);
-    setSelectedNodeId(node.id);
-  }, []);
+  // === EVENT HANDLERS ===
 
-  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;
 
-  const handleEditorClose = useCallback(() => {
-    setActiveDocumentId(undefined);
-  }, []);
+      // 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);
+        }
+      }
+    },
+    [onAddFolder, selectedFolder],
+  );
+
+  // Handle document creation from modal
   const onCreateDocument = useCallback(
     async (fileName: string) => {
       setOpenModal(false);
 
       const documentModel = selectedDocumentModel.current;
-      if (!documentModel) return;
+      if (!documentModel || !selectedDrive?.header.id) return;
 
-      const node = await addDocument(
-        driveId,
-        fileName,
-        documentModel.documentModel.id,
-        selectedNodeId,
-      );
+      try {
+        const node = await addDocument(
+          selectedDrive.header.id,
+          fileName,
+          documentModel.documentModel.id,
+          selectedFolder?.id,
+        );
 
-      selectedDocumentModel.current = null;
-      setActiveDocumentId(node.id);
-    },
-    [addDocument, driveId, selectedNodeId]
-  );
-
-  const onSelectDocumentModel = useCallback(
-    (documentModel: DocumentModelModule) => {
-      selectedDocumentModel.current = documentModel;
-      setOpenModal(true);
-    },
-    []
-  );
+        selectedDocumentModel.current = null;
 
-  const onGetDocumentRevision = useCallback(
-    (options?: GetDocumentOptions) => {
-      if (!activeDocumentId) return;
-      return getDocumentRevision?.(activeDocumentId, options);
+        if (node) {
+          // Customize: Auto-open created document by uncommenting below
+          // setActiveDocumentId(node.id);
+        }
+      } catch (error) {
+        console.error("Failed to create document:", error);
+      }
     },
-    [getDocumentRevision, activeDocumentId],
+    [addDocument, editorModules, selectedDrive?.header.id, selectedFolder?.id],
   );
 
-  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
-  );
+  // === DOCUMENT EDITOR DATA ===
+  // Filter available document types here if needed
+  const documentModelModules = useDocumentModelModules();
 
-  // 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
-    ? context.getDocumentModelModule(activeDocument.documentType)
+    ? documentModelModules?.find(
+        (m) => m.documentModel.id === activeDocument.documentType,
+      )
     : null;
 
   const editorModule = activeDocument
-    ? context.getEditor(activeDocument.documentType)
+    ? editorModules?.find((e) =>
+        e.documentTypes.includes(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 overflow-y-auto border-r border-gray-200 bg-white">
+        <div className="p-4">
+          {/* Customize sidebar title here */}
+          <h2 className="mb-4 text-lg font-semibold text-gray-700">
+            Drive Explorer
+          </h2>
+
+          {/* Folder tree navigation component */}
+          <FolderTree folders={allFolders} 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 overflow-y-auto p-4">
+        {/* Conditional rendering: Document editor or folder contents */}
         {activeDocument && documentModelModule && editorModule ? (
-          <EditorContainer
-            context={{
-              ...context,
-              getDocumentRevision: onGetDocumentRevision,
-            }}
-            documentId={activeDocumentId!}
-            documentType={activeDocument.documentType}
-            driveId={driveId}
-            onClose={handleEditorClose}
-            title={activeDocument.name}
-            documentModelModule={documentModelModule}
-            editorModule={editorModule}
-          />
+          // Document editor view
+          <EditorContainer handleClose={() => setActiveDocumentId(undefined)} />
         ) : (
-          <>
-            <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">
+            {/* === 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="rounded bg-blue-500 px-3 py-1 text-sm text-white 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>
+
+            {/* === FOLDERS SECTION === */}
+            {/* Customize grid layout by changing grid-cols-1 */}
+            {folderChildren.length > 0 && (
+              <div>
+                <h3 className="mb-2 text-sm font-medium text-gray-500">
+                  📁 Folders
+                </h3>
+                <div className="grid grid-cols-1 gap-2">
+                  {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={showDeleteNodeModal}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* === FILES/DOCUMENTS SECTION === */}
+            {/* Customize grid layout by changing grid-cols-1 */}
+            {fileChildren.length > 0 && (
+              <div>
+                <h3 className="mb-2 text-sm font-medium text-gray-500">
+                  📄 Documents
+                </h3>
+                <div className="grid grid-cols-1 gap-2">
+                  {fileChildren.map((fileNode) => (
+                    <FileItem
+                      key={fileNode.id}
+                      fileNode={fileNode}
+                      isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+                      sharingType={sharingType || "LOCAL"}
+                      getSyncStatusSync={getSyncStatusSync}
+                      setSelectedNode={setSelectedNode}
+                      showDeleteNodeModal={showDeleteNodeModal}
+                      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 />
+          </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 +298,4 @@ export function DriveExplorer({
       />
     </div>
   );
-} 
+}