@powerhousedao/codegen 0.49.2-dev.1 → 0.49.2-dev.2

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

@@ -0,0 +1,49 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/CreateDocument.tsx"
+unless_exists: true
+---
+import { Button } from "@powerhousedao/design-system";
+import { type DocumentModelModule } from "document-model";
+
+interface CreateDocumentProps {
+  documentModels?: DocumentModelModule[];
+  createDocument: (doc: DocumentModelModule) => void;
+}
+
+function getDocumentSpec(doc: DocumentModelModule) {
+  if ("documentModelState" in doc) {
+    return doc.documentModelState as DocumentModelModule["documentModel"];
+  }
+
+  return doc.documentModel;
+}
+
+export const CreateDocument: React.FC<CreateDocumentProps> = ({
+  documentModels,
+  createDocument,
+}) => {
+  return (
+    <div className="px-6">
+      <h3 className="mb-3 mt-4 text-sm font-bold text-gray-600">
+        New document
+      </h3>
+      <div className="flex w-full flex-wrap gap-4">
+        {documentModels?.map((doc) => {
+          const spec = getDocumentSpec(doc);
+          return (
+            <Button
+              key={spec.id}
+              color="light"
+              size="small"
+              className="cursor-pointer"
+              aria-details={spec.description}
+              onClick={() => createDocument(doc)}
+            >
+              <span className="text-sm">{spec.name}</span>
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}; 

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

@@ -0,0 +1,214 @@
+---
+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,
+} from "@powerhousedao/design-system";
+import { useCallback, useState, useRef, useEffect } from "react";
+import type { FileNode, 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 { EditorContext, DocumentModelModule } from "document-model";
+import { CreateDocumentModal } from "@powerhousedao/design-system";
+import { CreateDocument } from "./CreateDocument.js";
+import { 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: EditorContext;
+}
+
+export function DriveExplorer({
+  driveId,
+  nodes,
+  onDeleteNode,
+  renameNode,
+  onAddFolder,
+  onCopyNode,
+  context,
+}: DriveExplorerProps) {
+  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
+      );
+
+      selectedDocumentModel.current = null;
+      setActiveDocumentId(node.id);
+    },
+    [addDocument, driveId]
+  );
+
+  const onSelectDocumentModel = useCallback(
+    (documentModel: DocumentModelModule) => {
+      selectedDocumentModel.current = documentModel;
+      setOpenModal(true);
+    },
+    []
+  );
+
+  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
+  const activeDocument = activeDocumentId
+    ? files.find((file) => file.id === activeDocumentId)
+    : undefined;
+
+  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>
+
+      {/* Main Content */}
+      <div className="flex-1 p-4 overflow-y-auto">
+        {activeDocument ? (
+          <EditorContainer
+            context={context}
+            documentId={activeDocumentId!}
+            documentType={activeDocument.documentType}
+            driveId={driveId}
+            onClose={handleEditorClose}
+            title={activeDocument.name}
+          />
+        ) : (
+          <>
+            <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}
+            />
+          </>
+        )}
+      </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/EditorContainer.esm.t

@@ -0,0 +1,127 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/EditorContainer.tsx"
+unless_exists: true
+---
+import {
+  useDriveContext,
+  exportDocument,
+  type User,
+} from "@powerhousedao/reactor-browser";
+import {
+    documentModelDocumentModelModule,
+  type DocumentModelModule,
+  type EditorContext,
+  type EditorProps,
+  type PHDocument,
+} from "document-model";
+import {
+  DocumentToolbar,
+  RevisionHistory,
+  DefaultEditorLoader,
+} from "@powerhousedao/design-system";
+import { useState, Suspense, type FC, useCallback, lazy } from "react";
+
+export interface EditorContainerProps {
+  driveId: string;
+  documentId: string;
+  documentType: string;
+  onClose: () => void;
+  title: string;
+  context: EditorContext;
+}
+
+const documentModelsMap = {
+  [documentModelDocumentModelModule.documentModel.id]: documentModelDocumentModelModule,
+};
+
+const documentEditorMap = {
+  [documentModelDocumentModelModule.documentModel.id]: lazy(() =>
+    import('@powerhousedao/builder-tools/style.css').then(() =>
+      import("@powerhousedao/builder-tools/document-model-editor").then((m) => ({
+        default: m.documentModelEditorModule.Component,
+      }))
+    )
+  ),
+} as const;
+
+function getDocumentModel(documentType: string) {
+  return documentModelsMap[documentType];
+}
+
+function getDocumentEditor(documentType: string) {
+  return documentEditorMap[documentType];
+}
+
+export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
+  const { driveId, documentId, documentType, onClose, title, context } = props;
+
+  const [showRevisionHistory, setShowRevisionHistory] = useState(false);
+  const { useDocumentEditorProps } = useDriveContext();
+  const user = context.user as User | undefined;
+
+  const documentModelModule = getDocumentModel(
+    documentType,
+  ) as DocumentModelModule<PHDocument>;
+
+  const { dispatch, error, document } = useDocumentEditorProps({
+    documentId,
+    documentType,
+    driveId,
+    documentModelModule,
+    user,
+  });
+
+  const onExport = useCallback(async () => {
+    if (document) {
+      const ext = documentModelModule.documentModel.extension;
+      await exportDocument(document, title, ext);
+    }
+  }, [document?.revision.global, document?.revision.local]);
+
+  const loadingContent = (
+    <div className="flex-1 flex justify-center items-center h-full">
+      <DefaultEditorLoader />
+    </div>
+  );
+
+  if (!document) return loadingContent;
+
+  const Editor = getDocumentEditor(documentType);
+
+  if (!Editor) {
+    console.error("No editor found for document type:", documentType);
+    return (
+      <div className="flex-1">
+        No editor found for document type: {documentType}
+      </div>
+    );
+  }
+  const EditorComponent = Editor as FC<EditorProps<PHDocument>>;
+
+  return showRevisionHistory ? (
+    <RevisionHistory
+      documentId={documentId}
+      documentTitle={title}
+      globalOperations={document.operations.global}
+      key={documentId}
+      localOperations={document.operations.local}
+      onClose={() => setShowRevisionHistory(false)}
+    />
+  ) : (
+    <Suspense fallback={loadingContent}>
+      <DocumentToolbar
+        onClose={onClose}
+        onExport={onExport}
+        onShowRevisionHistory={() => setShowRevisionHistory(true)}
+        onSwitchboardLinkClick={() => {}}
+        title={title}
+      />
+      <EditorComponent
+        context={context}
+        dispatch={dispatch}
+        document={document}
+        error={error}
+      />
+    </Suspense>
+  );
+}; 

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

@@ -0,0 +1,44 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FileItemsGrid.tsx"
+unless_exists: true
+---
+import { FileItem, type UiFileNode, type BaseUiFileNode } from "@powerhousedao/design-system";
+
+interface FileItemsGridProps {
+  files: UiFileNode[];
+  onSelectNode: (node: BaseUiFileNode) => void;
+  onRenameNode: (nodeId: string, name: string) => void;
+  onDuplicateNode: (node: BaseUiFileNode) => void;
+  onDeleteNode: (nodeId: string) => void;
+  isAllowedToCreateDocuments: boolean;
+}
+
+export function FileItemsGrid({
+  files,
+  onSelectNode,
+  onRenameNode,
+  onDuplicateNode,
+  onDeleteNode,
+  isAllowedToCreateDocuments,
+}: FileItemsGridProps) {
+  if (files.length === 0) return null;
+
+  return (
+    <div>
+      <h3 className="text-sm font-medium text-gray-500 mb-2">Files</h3>
+      <div className="flex flex-wrap gap-2">
+        {files.map((file) => (
+          <FileItem
+            key={file.id}
+            uiNode={file}
+            onSelectNode={onSelectNode}
+            onRenameNode={(name) => onRenameNode(file.id, name)}
+            onDuplicateNode={onDuplicateNode}
+            onDeleteNode={() => onDeleteNode(file.id)}
+            isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+          />
+        ))}
+      </div>
+    </div>
+  );
+} 

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

@@ -0,0 +1,96 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FolderItemsGrid.tsx"
+unless_exists: true
+---
+import {
+  FolderItem,
+  type UiFolderNode,
+  type UiNode,
+  type BaseUiFolderNode,
+  type BaseUiNode,
+} from "@powerhousedao/design-system";
+import { useState } from "react";
+
+interface FolderItemsGridProps {
+  folders: UiFolderNode[];
+  onSelectNode: (node: BaseUiFolderNode) => void;
+  onRenameNode: (nodeId: string, name: string) => void;
+  onDuplicateNode: (node: BaseUiFolderNode) => void;
+  onDeleteNode: (nodeId: string) => void;
+  onAddFile: (file: File, parentNode: BaseUiNode | null) => Promise<void>;
+  onCopyNode: (uiNode: BaseUiNode, targetNode: BaseUiNode) => Promise<void>;
+  onMoveNode: (uiNode: BaseUiNode, targetNode: BaseUiNode) => Promise<void>;
+  isAllowedToCreateDocuments: boolean;
+  onAddFolder: (name: string, parentFolder?: string) => void;
+  parentFolderId?: string;
+}
+
+export function FolderItemsGrid({
+  folders,
+  onSelectNode,
+  onRenameNode,
+  onDuplicateNode,
+  onDeleteNode,
+  onAddFile,
+  onCopyNode,
+  onMoveNode,
+  isAllowedToCreateDocuments,
+  onAddFolder,
+  parentFolderId,
+}: FolderItemsGridProps) {
+  const [newFolderName, setNewFolderName] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newFolderName.trim()) {
+      onAddFolder(newFolderName.trim(), parentFolderId);
+      setNewFolderName("");
+    }
+  };
+
+  return (
+    <div className="mb-6">
+      <div className="flex items-center gap-4 mb-2">
+        <h3 className="text-sm font-medium text-gray-500">Folders</h3>
+        
+        {/* New Folder Input */}
+        <form onSubmit={handleSubmit} className="w-48">
+          <div className="relative">
+            <input
+              type="text"
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              placeholder="Create new folder..."
+              className="w-full px-3 py-1.5 pr-8 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+            <button
+              type="submit"
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none text-sm"
+            >
+              +
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {folders.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {folders.map((folder) => (
+            <FolderItem
+              key={folder.id}
+              uiNode={folder}
+              onSelectNode={onSelectNode}
+              onRenameNode={(name) => onRenameNode(folder.id, name)}
+              onDuplicateNode={onDuplicateNode}
+              onDeleteNode={() => onDeleteNode(folder.id)}
+              onAddFile={onAddFile}
+              onCopyNode={onCopyNode}
+              onMoveNode={onMoveNode}
+              isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+} 

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

@@ -0,0 +1,85 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FolderTree.tsx"
+unless_exists: true
+---
+import { useState } from 'react';
+import type { UiFolderNode } from "@powerhousedao/design-system";
+
+interface FolderTreeProps {
+  folders: UiFolderNode[];
+  selectedNodeId?: string;
+  onSelectNode: (node: UiFolderNode) => void;
+}
+
+export function FolderTree({ folders, selectedNodeId, onSelectNode }: FolderTreeProps) {
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+
+  const toggleFolder = (folderId: string) => {
+    setExpandedFolders(prev => {
+      const next = new Set(prev);
+      if (next.has(folderId)) {
+        next.delete(folderId);
+      } else {
+        next.add(folderId);
+      }
+      return next;
+    });
+  };
+
+  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;
+
+    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>
+    );
+  };
+
+  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>
+  );
+} 

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

@@ -0,0 +1,68 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/editor.tsx"
+unless_exists: true
+---
+import { type EditorProps, hashKey } from "document-model";
+import { type DocumentDriveDocument, addFolder, deleteNode, updateNode, generateNodesCopy, copyNode } from "document-drive";
+import { WagmiContext } from "@powerhousedao/design-system";
+import { DriveExplorer } from "./components/DriveExplorer.js";
+import { useCallback } from "react";
+
+export type IProps = EditorProps<DocumentDriveDocument>;
+
+export default function Editor(props: IProps) {
+  const { dispatch, context } = props;
+  
+  const onAddFolder = useCallback((name: string, parentFolder?: string) => {
+    dispatch(addFolder({
+      id: hashKey(),
+      name,
+      parentFolder,
+    }));
+  }, [dispatch]);
+
+  const onDeleteNode = useCallback((nodeId: string) => {
+    dispatch(deleteNode({ id: nodeId }));
+  }, [dispatch]);
+
+  const renameNode = useCallback((nodeId: string, name: string) => {
+    dispatch(updateNode({ id: nodeId, name }));
+  }, [dispatch]);
+
+  const onCopyNode = useCallback((nodeId: string, targetName: string, parentId?: string) => {
+    const generateId = () => hashKey();
+    
+    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]);
+
+  return (
+    <div
+      className="new-drive-explorer"
+      style={{ height: "100%" }}
+    >
+      <WagmiContext>
+        <DriveExplorer
+          driveId={props.document.state.global.id}
+          nodes={props.document.state.global.nodes}
+          onAddFolder={onAddFolder}
+          onDeleteNode={onDeleteNode}
+          renameNode={renameNode}
+          onCopyNode={onCopyNode}
+          context={context}
+        />
+      </WagmiContext>
+    </div>
+  );
+}