@powerhousedao/codegen 4.1.0-dev.9 → 5.0.0-staging.1

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>
   );
-} 
+}

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

@@ -2,123 +2,102 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/EditorContainer.tsx"
 unless_exists: true
 ---
+import { getRevisionFromDate, useTimelineItems } from "@powerhousedao/common";
 import {
-  useDriveContext,
-  exportDocument,
-  type User,
-  type DriveEditorContext,
-} from "@powerhousedao/reactor-browser";
-import {
-  type EditorContext,
-  type DocumentModelModule,
-  type EditorModule,
-  type EditorProps,
-  type PHDocument,
-} from "document-model";
-import {
+  DefaultEditorLoader,
   DocumentToolbar,
   RevisionHistory,
-  DefaultEditorLoader,
   type TimelineItem,
 } from "@powerhousedao/design-system";
-import { useTimelineItems, getRevisionFromDate } from "@powerhousedao/common";
-import { useState, Suspense, type FC, useCallback } from "react";
-
-export interface EditorContainerProps {
-  driveId: string;
-  documentId: string;
-  documentType: string;
-  onClose: () => void;
-  title: string;
-  context: Omit<DriveEditorContext, "getDocumentRevision"> & Pick<EditorContext, "getDocumentRevision">;
-  documentModelModule: DocumentModelModule<PHDocument>;
-  editorModule: EditorModule;
-}
-
-export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
-  const {
-    title,
-    driveId,
-    context,
-    onClose,
-    documentId,
-    documentType,
-    editorModule,
-    documentModelModule,
-  } = props;
+import {
+  exportFile,
+  useEditorModuleById,
+  useSelectedDocument,
+  useSelectedDrive,
+} from "@powerhousedao/reactor-browser";
+import { Suspense, useCallback, useState } from "react";
 
-  const [selectedTimelineItem, setSelectedTimelineItem] = useState<TimelineItem | null>(null);
+/**
+ * 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 = (props: { handleClose: () => void }) => {
+  const { handleClose } = props;
+  // 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;
-
-  const { dispatch, error, document } = useDocumentEditorProps({
-    documentId,
-    documentType,
-    driveId,
-    documentModelModule,
-    user,
-  });
-
+  const [selectedDocument, dispatch] = useSelectedDocument();
+  const [selectedDrive] = useSelectedDrive();
+  // Timeline data for revision history
   const timelineItems = useTimelineItems(
-    documentId,
-    document?.header.createdAtUtcIso,
-    driveId,
+    selectedDocument?.header.id,
+    selectedDocument?.header.createdAtUtcIso,
+    selectedDrive?.header.id,
+  );
+  const editorModule = useEditorModuleById(
+    selectedDocument?.header.meta?.preferredEditor,
   );
 
+  // Document export functionality - customize export behavior here
   const onExport = useCallback(async () => {
-    if (document) {
-      const ext = documentModelModule.documentModel.extension;
-      await exportDocument(document, title, ext);
+    if (selectedDocument) {
+      await exportFile(selectedDocument);
     }
-  }, [document?.header.revision.global, document?.header.revision.local]);
+  }, [selectedDocument]);
 
+  // Loading state component
   const loadingContent = (
-    <div className="flex-1 flex justify-center items-center h-full">
+    <div className="flex h-full flex-1 items-center justify-center">
       <DefaultEditorLoader />
     </div>
   );
 
-  if (!document) return loadingContent;
+  if (!selectedDocument) return loadingContent;
 
-  const EditorComponent = editorModule.Component as FC<EditorProps<PHDocument>>;
+  // Dynamically load the appropriate editor component for this document type
+  const EditorComponent = editorModule?.Component;
+  if (!EditorComponent) return loadingContent;
 
   return showRevisionHistory ? (
+    // Revision history view
     <RevisionHistory
-      documentId={documentId}
-      documentTitle={title}
-      globalOperations={document.operations.global}
-      key={documentId}
-      localOperations={document.operations.local}
+      documentId={selectedDocument.header.id}
+      documentTitle={selectedDocument.header.name}
+      globalOperations={selectedDocument.operations.global}
+      key={selectedDocument.header.id}
+      localOperations={selectedDocument.operations.local}
       onClose={() => setShowRevisionHistory(false)}
     />
   ) : (
+    // Main editor view
     <Suspense fallback={loadingContent}>
+      {/* Document toolbar - customize available actions here */}
       <DocumentToolbar
-        onClose={onClose}
+        onClose={handleClose}
         onExport={onExport}
         onShowRevisionHistory={() => setShowRevisionHistory(true)}
-        onSwitchboardLinkClick={() => {}}
-        title={title}
+        onSwitchboardLinkClick={() => {}} // Customize switchboard integration
+        title={selectedDocument.header.name}
         timelineButtonVisible={editorModule.config.timelineEnabled}
         timelineItems={timelineItems.data}
         onTimelineItemClick={setSelectedTimelineItem}
       />
+      {/* Dynamic editor component based on document type */}
       <EditorComponent
         context={{
-          ...context,
           readMode: !!selectedTimelineItem,
           selectedTimelineRevision: getRevisionFromDate(
             selectedTimelineItem?.startDate,
             selectedTimelineItem?.endDate,
-            document.operations.global,
+            selectedDocument.operations.global,
           ),
         }}
         dispatch={dispatch}
         document={document}
-        error={error}
+        error={console.error}
       />
     </Suspense>
   );
-}; 
+};