@powerhousedao/codegen 4.1.0-dev.12 → 4.1.0-dev.121

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

@@ -0,0 +1,29 @@
+---
+to: "<%= driveEditorDir %>/components/Files.tsx"
+unless_exists: true
+---
+import { FileItem } from "@powerhousedao/design-system/connect";
+import {
+  useNodesInSelectedDriveOrFolder,
+  isFileNodeKind,
+} from "@powerhousedao/reactor-browser";
+
+/** Shows the files in the selected drive or folder */
+export function Files() {
+  const nodes = useNodesInSelectedDriveOrFolder();
+  const fileNodes = nodes.filter((n) => isFileNodeKind(n));
+  const hasFiles = fileNodes.length > 0;
+
+  if (!hasFiles) return null;
+
+  return (
+    <div>
+      <h3 className="mb-2 text-sm font-semibold text-gray-600">Documents</h3>
+      <div className="flex flex-wrap gap-4">
+        {fileNodes.map((fileNode) => (
+          <FileItem key={fileNode.id} fileNode={fileNode} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -1,85 +1,108 @@
 ---
-to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FolderTree.tsx"
+to: "<%= driveEditorDir %>/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 {
+  setSelectedNode,
+  useNodesInSelectedDrive,
+  useSelectedDrive,
+  useSelectedNode,
+} from "@powerhousedao/reactor-browser";
+import type { Node } from "document-drive";
+import { useMemo } from "react";
 
-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);
+function buildSidebarNodes(
+  nodes: Node[],
+  parentId: string | null | undefined,
+): SidebarNode[] {
+  return nodes
+    .filter((n) => {
+      if (parentId == null) {
+        return n.parentFolder == null;
       }
-      return next;
+      return n.parentFolder === parentId;
+    })
+    .map((node): SidebarNode => {
+      if (node.kind === "folder") {
+        return {
+          id: node.id,
+          title: node.name,
+          icon: "FolderClose" as const,
+          expandedIcon: "FolderOpen" as const,
+          children: buildSidebarNodes(nodes, node.id),
+        };
+      }
+      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() {
+  const [selectedDrive] = useSelectedDrive();
+  const nodes = useNodesInSelectedDrive();
+  const selectedNode = useSelectedNode();
+  const driveName = selectedDrive.header.name;
+  // 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") {
+      setSelectedNode(undefined);
+    } else {
+      setSelectedNode(node.id);
+    }
   };
+  // Map selectedNodeId to activeNodeId (use "root" when undefined)
+  const activeNodeId =
+    !selectedNode || selectedNode.id === selectedDrive.header.id
+      ? "root"
+      : selectedNode.id;
 
   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>
   );
-} 
+}

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

@@ -0,0 +1,28 @@
+---
+to: "<%= driveEditorDir %>/components/Folders.tsx"
+unless_exists: true
+---
+import { FolderItem } from "@powerhousedao/design-system/connect";
+import {
+  useNodesInSelectedDriveOrFolder,
+  isFolderNodeKind,
+} from "@powerhousedao/reactor-browser";
+
+/** Shows the folders in the selected drive or folder */
+export function Folders() {
+  const nodes = useNodesInSelectedDriveOrFolder();
+  const folderNodes = nodes.filter((n) => isFolderNodeKind(n));
+  const hasFolders = folderNodes.length > 0;
+  if (!hasFolders) return null;
+
+  return (
+    <div>
+      <h3 className="mb-2 text-sm font-bold text-gray-600">Folders</h3>
+      <div className="flex flex-wrap gap-4">
+        {folderNodes.map((folderNode) => (
+          <FolderItem key={folderNode.id} folderNode={folderNode} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+---
+to: "<%= driveEditorDir %>/components/NavigationBreadcrumbs.tsx"
+unless_exists: true
+---
+import { Breadcrumbs } from "@powerhousedao/design-system/connect";
+
+/** Shows the navigation breadcrumbs for the selected drive or folder */
+export function NavigationBreadcrumbs() {
+  return (
+    <div className="border-b border-gray-200 pb-3 space-y-3">
+      <Breadcrumbs />
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+---
+to: "<%= driveEditorDir %>/config.ts"
+unless_exists: true
+---
+import type { PHDriveEditorConfig } from "@powerhousedao/reactor-browser";
+
+/** Editor config for the <%= pascalCaseDriveEditorName %> */
+export const editorConfig: PHDriveEditorConfig = {
+  isDragAndDropEnabled: <%- isDragAndDropEnabled %>,
+  allowedDocumentTypes: <%- allowedDocumentTypes %>
+};

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

@@ -1,79 +1,18 @@
 ---
-to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/editor.tsx"
+to: "<%= driveEditorDir %>/editor.tsx"
 unless_exists: true
 ---
-import { type DriveEditorProps } from "@powerhousedao/reactor-browser";
-import { AnalyticsProvider } from '@powerhousedao/reactor-browser/analytics/context';
-import { DriveContextProvider } from "@powerhousedao/reactor-browser/hooks/useDriveContext";
-import { type DocumentDriveDocument, addFolder, deleteNode, updateNode, generateNodesCopy, copyNode } from "document-drive";
-import { WagmiContext } from "@powerhousedao/design-system";
+import { useSetPHDriveEditorConfig } from "@powerhousedao/reactor-browser";
+import type { EditorProps } from "document-model";
 import { DriveExplorer } from "./components/DriveExplorer.js";
-import { useCallback } from "react";
-import { generateId } from "document-model";
+import { editorConfig } from "./config.js";
 
-export type IProps = DriveEditorProps<DocumentDriveDocument>;
-
-export function BaseEditor(props: IProps) {
-  const { dispatch, context } = props;
-  
-  const onAddFolder = useCallback((name: string, parentFolder?: string) => {
-    dispatch(addFolder({
-      id: generateId(),
-      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 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%" }}
-    >
-      <DriveExplorer
-        driveId={props.document.header.id}
-        nodes={props.document.state.global.nodes}
-        onAddFolder={onAddFolder}
-        onDeleteNode={onDeleteNode}
-        renameNode={renameNode}
-        onCopyNode={onCopyNode}
-        context={context}
-      />
-    </div>
-  );
-}
-
-export default function Editor(props: IProps) {
+/** Editor component for the <%= pascalCaseDriveEditorName %> drive editor */
+export default function Editor(props: EditorProps) {
+  // set the config for this drive editor
+  // you can update these configs in `./config.ts`
+  useSetPHDriveEditorConfig(editorConfig);
   return (
-    <DriveContextProvider value={props.context}>
-      <WagmiContext>
-        <AnalyticsProvider databaseName={props.context.analyticsDatabaseName}>
-          <BaseEditor {...props} />
-        </AnalyticsProvider>
-      </WagmiContext>
-    </DriveContextProvider>
+    <DriveExplorer {...props} />
   );
-}
+}

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

@@ -0,0 +1,14 @@
+---
+force: true
+to: "<%= rootDir %>/editors.ts"
+---
+import type { EditorModule } from "document-model";
+<% moduleExports.forEach(me => { _%>
+import { <%= me.pascalCaseName %> } from "./<%= me.paramCaseName %>/module.js";
+<% }); _%>
+
+export const editors: EditorModule[] = [
+  <% moduleExports.forEach(me => { _%>
+<%= me.pascalCaseName %>,
+<% }); _%>
+]

package/dist/src/codegen/.hygen/templates/powerhouse/generate-drive-editor/index.js

@@ -0,0 +1,35 @@
+const { pascalCase, paramCase } = require("change-case");
+const { getModuleExports } = require("../utils.js");
+const path = require("path");
+
+// @ts-check
+module.exports = {
+  params: ({ args }) => {
+    const name = args.name;
+    const rootDir = args.rootDir;
+    const driveEditorDirName = args.driveEditorDirName || paramCase(args.name);
+    const driveEditorDir = path.join(rootDir, driveEditorDirName);
+    const pascalCaseDriveEditorName = pascalCase(name);
+    const paramCaseDriveEditorName = paramCase(name);
+    const moduleExports = getModuleExports(
+      rootDir,
+      /export\s+const\s+(\w+)\s*:\s*EditorModule\s*=/,
+      {
+        paramCaseName: driveEditorDirName,
+        pascalCaseName: pascalCaseDriveEditorName,
+      },
+    );
+
+    return {
+      rootDir,
+      driveEditorDir,
+      moduleExports,
+      name: args.name,
+      appId: args.appId,
+      isDragAndDropEnabled: args.isDragAndDropEnabled,
+      allowedDocumentTypes: args.allowedDocumentTypes,
+      pascalCaseDriveEditorName,
+      paramCaseDriveEditorName,
+    };
+  },
+};

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

@@ -1,9 +1,11 @@
 ---
 to: "<%= rootDir %>/index.ts"
-unless_exists: true
+force: true
 ---
 /**
 * This is a scaffold file meant for customization.
 * Delete the file and run the code generator again to have it reset
 */
-
+<% moduleExports.forEach(me => { _%>
+export { <%= me.pascalCaseName %> } from "./<%= me.paramCaseName %>/module.js";
+<% }); _%>

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

@@ -0,0 +1,15 @@
+---
+to: "<%= driveEditorDir %>/module.ts"
+force: true
+---
+import { type EditorModule } from "document-model";
+import { lazy } from "react";
+
+export const <%= pascalCaseDriveEditorName %>: EditorModule = {
+  Component: lazy(() => import("./editor.js")),
+  documentTypes: ["powerhouse/document-drive"],
+  config: {
+    id: "<%= appId || paramCaseDriveEditorName %>",
+    name: "<%= name %>",
+  },
+};

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

@@ -0,0 +1,78 @@
+---
+to: "<%= editorDir %>/components/EditName.tsx"
+unless_exists: true
+---
+import { setName } from "document-model";
+import type { FormEventHandler, MouseEventHandler } from "react";
+import { useState } from "react";
+<% if(!documentType){ %>import { useSelectedDocument } from "@powerhousedao/reactor-browser";<% } else { %>import { <%= useSelectedHookName %> %>} from "<%= documentModelDir %>";<% } %>
+
+/** Displays the name of the selected <%= pascalCaseDocumentType %> document and allows editing it */
+export function <%= editNameComponentName %>() {
+  const [<%= documentVariableName %>, dispatch] = <%= useSelectedHookName %>();
+  const [isEditing, setIsEditing] = useState(false);
+
+  if (!<%= documentVariableName %>) return null;
+
+  const <%= documentVariableName %>Name = <%= documentVariableName %>.header.name;
+
+  const onClickEdit<%= pascalCaseDocumentType %>Name: MouseEventHandler<HTMLButtonElement> = () => {
+    setIsEditing(true);
+  };
+
+  const onClickCancelEdit<%= pascalCaseDocumentType %>Name: MouseEventHandler<
+    HTMLButtonElement
+  > = () => {
+    setIsEditing(false);
+  };
+
+  const onSubmitSetName: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const nameInput = form.elements.namedItem("name") as HTMLInputElement;
+    const name = nameInput.value;
+    if (!name) return;
+
+    dispatch(setName(name));
+    setIsEditing(false);
+  };
+
+  if (isEditing)
+    return (
+      <form
+        className="flex gap-2 items-center justify-between"
+        onSubmit={onSubmitSetName}
+      >
+        <input
+          className="text-lg font-semibold text-gray-900 p-1"
+          type="text"
+          name="name"
+          defaultValue={<%= documentVariableName %>Name}
+          autoFocus
+        />
+        <div className="flex gap-2">
+          <button type="submit" className="text-sm text-gray-600">
+            Save
+          </button>
+          <button
+            className="text-sm text-red-800"
+            onClick={onClickCancelEdit<%= pascalCaseDocumentType %>Name}
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    );
+
+  return (
+    <div className="flex justify-between items-center">
+      <h2 className="text-lg font-semibold text-gray-900">{<%= documentVariableName %>Name}</h2>
+      <button
+        className="text-sm text-gray-600"
+        onClick={onClickEdit<%= pascalCaseDocumentType %>Name}
+      >
+        Edit Name
+      </button>
+    </div>
+  );
+}

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

@@ -1,26 +1,14 @@
 ---
-to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/editor.tsx"
+to: "<%= editorDir %>/editor.tsx"
 unless_exists: true
 ---
-<% if(!documentTypes.length){ %>import type { EditorProps, PHDocument } from 'document-model';<% } else { %>import type { EditorProps } from 'document-model';<% } %>
-<% documentTypes.forEach(type => { _%>
-import { type <%= documentTypesMap[type].name %>Document, actions } from "<%= documentTypesMap[type].importPath %>/index.js";
-%><% }); _%>
-import { Button } from '@powerhousedao/design-system';
+import { <%= editNameComponentName %> } from "./components/EditName.js";
 
-export type IProps = <% if(!documentTypes.length){ %>EditorProps<PHDocument><% } else { %><% documentTypes.forEach((type, index) => { _%>EditorProps<<%= documentTypesMap[type].name %>Document%>%>><% if(index < documentTypes.length - 1){ %> | <% }%><% }); _%> <% } %>;
-
-export default function Editor(props: IProps) {
-    return (
-        <div>
-            <div className="html-defaults-container">
-                <h1>This h1 will be styled</h1>
-                <p>This paragraph will also be styled.</p>
-                <button>Styled Button</button>
-            </div>
-            <div>
-                <h1>This h1 outside the container will NOT be styled by html-defaults.css</h1>
-            </div>
-        </div>
-    );
-};
+/** Implement your editor behavior here */
+export default function Editor() {
+  return (
+    <div className="py-4 px-8">
+      <<%= editNameComponentName %> />
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+---
+force: true
+to: "<%= rootDir %>/editors.ts"
+---
+import type { EditorModule } from "document-model";
+<% moduleExports.forEach(me => { _%>
+import { <%= me.pascalCaseName %> } from "./<%= me.paramCaseName %>/module.js";
+<% }); _%>
+
+export const editors: EditorModule[] = [
+  <% moduleExports.forEach(me => { _%>
+<%= me.pascalCaseName %>,
+<% }); _%>
+]