@powerhousedao/codegen 5.0.0 → 5.0.1-staging.11

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

@@ -2,150 +2,29 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/DriveExplorer.tsx"
 unless_exists: true
 ---
-import {
-  Breadcrumbs,
-  Button,
-  FileItem,
-  FolderItem,
-} from "@powerhousedao/design-system";
-import {
-  addFolder,
-  isFileNodeKind,
-  isFolderNodeKind,
-  useNodesInSelectedDriveOrFolder,
-  useSelectedDrive,
-  useSelectedFolder,
-  useUserPermissions,
-} from "@powerhousedao/reactor-browser";
 import type { EditorProps } from "document-model";
-import { CreateDocument } from "./CreateDocument.js";
 import { FolderTree } from "./FolderTree.js";
+import { DriveContents } from "./DriveContents.js";
 
 /**
  * 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: EditorProps) {
-  const { children } = props;
-  const { isAllowedToCreateDocuments } = useUserPermissions();
-  const [selectedDrive] = useSelectedDrive(); // Currently selected drive
-  const selectedFolder = useSelectedFolder(); // Currently selected folder
-
-  const nodes = useNodesInSelectedDriveOrFolder();
-  const folderNodes = nodes.filter((n) => isFolderNodeKind(n));
-  const fileNodes = nodes.filter((n) => isFileNodeKind(n));
-
-  // Handle folder creation with optional name parameter
-  const handleCreateFolder = 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 addFolder(
-          selectedDrive.header.id,
-          name.trim(),
-          selectedFolder?.id,
-        );
-      } catch (error) {
-        console.error("Failed to create folder:", error);
-      }
-    }
-  };
-
+export function DriveExplorer({ children }: EditorProps) {
   // if a document is selected then it's editor will be passed as children
   const showDocumentEditor = !!children;
 
-  // === RENDER ===
   return (
     <div className="flex h-full">
-      {/* === LEFT SIDEBAR: Folder and File Navigation === */}
-      {/* Sidebar component manages its own width, styling, and overflow */}
       <FolderTree />
-
-      {/* === 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
+          /* Document editor view */
           children
         ) : (
           /* 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 />
-              </div>
-            </div>
-
-            {/* === FOLDERS SECTION === */}
-            {folderNodes.length > 0 && (
-              <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>
-            )}
-
-            {/* === FILES/DOCUMENTS SECTION === */}
-            {fileNodes.length > 0 && (
-              <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>
-            )}
-
-            {/* === EMPTY STATE === */}
-            {/* Customize empty state message and styling here */}
-            {folderNodes.length === 0 && fileNodes.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>
+          <DriveContents />
         )}
       </div>
     </div>

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

@@ -0,0 +1,19 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/EmptyState.tsx"
+unless_exists: true
+---
+import { useNodesInSelectedDriveOrFolder } from "@powerhousedao/reactor-browser";
+
+/** Shows a message when the selected drive or folder is empty */
+export function EmptyState() {
+  const nodes = useNodesInSelectedDriveOrFolder();
+  const hasNodes = nodes.length > 0;
+  if (hasNodes) return null;
+
+  return (
+    <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>
+  );
+}

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

@@ -0,0 +1,29 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/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/Folders.esm.t

@@ -0,0 +1,28 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/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: "<%= rootDir %>/<%= h.changeCase.param(name) %>/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

@@ -4,6 +4,7 @@ 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

@@ -7,7 +7,10 @@ import type { EditorProps } from "document-model";
 import { DriveExplorer } from "./components/DriveExplorer.js";
 import { editorConfig } from "./config.js";
 
-export function Editor(props: EditorProps) {
+/** 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 (
     <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

@@ -1,12 +1,30 @@
+const { pascalCase, paramCase } = require("change-case");
+const { getModuleExports } = require("../utils.js");
+
 // @ts-check
 module.exports = {
   params: ({ args }) => {
+    const name = args.name;
+    const rootDir = args.rootDir;
+    const pascalCaseDriveEditorName = pascalCase(name);
+    const paramCaseDriveEditorName = paramCase(name);
+    const moduleExports = getModuleExports(
+      rootDir,
+      /export\s+const\s+(\w+)\s*:\s*EditorModule\s*=/,
+      {
+        paramCaseName: paramCaseDriveEditorName,
+        pascalCaseName: pascalCaseDriveEditorName,
+      }
+    );
     return {
-      rootDir: args.rootDir,
+      rootDir,
+      moduleExports,
       name: args.name,
       appId: args.appId,
-     isDragAndDropEnabled: args.isDragAndDropEnabled,
-     allowedDocumentTypes: args.allowedDocumentTypes,
+      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: "<%= rootDir %>/<%= h.changeCase.param(name) %>/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: "<%= rootDir %>/<%= paramCaseEditorName %>/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

@@ -2,110 +2,13 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/editor.tsx"
 unless_exists: true
 ---
-import { DocumentToolbar } from "@powerhousedao/design-system";
-import {
-  Button,
-  Form,
-  FormLabel,
-  StringField,
-} from "@powerhousedao/document-engineering";
-import {
-  setSelectedNode,
-  useParentFolderForSelectedNode,
-} from "@powerhousedao/reactor-browser";
-<% if(!documentType){ %>import { useSelectedDocument } from "@powerhousedao/reactor-browser";<% } else { %>import { useSelected<%= documentType.name %>Document %>} from "../hooks/use<%= documentType.name %>Document%>.js";<% } %>
-import { setName } from "document-model";<% if(documentType) { %>
-import { actions } from "<%= documentType.importPath %>";<% } %>
-
-export function Editor() {
-  const [document, dispatch] = <% if(documentType) { %>useSelected<%= documentType.name %>Document()<% } else { %>useSelectedDocument()<% } %>;
-  
-  // Get the parent folder node for the currently selected node
-  const parentFolder = useParentFolderForSelectedNode();
-
-<% if(!documentType){ %>
-  if (!document) {
-    return null;
-  }
-<% } %>
-  function handleSetName(values: { name: string }) {
-    if (values.name) {
-      dispatch(setName(values.name));
-    }
-  }
-
-  // Set the selected node to the parent folder node (close the editor)
-  function handleClose() {
-    setSelectedNode(parentFolder?.id);
-  }
+import { <%= editNameComponentName %> } from "./components/EditName.js";
 
+/** Implement your editor behavior here */
+export default function Editor() {
   return (
-    <div>
-      <DocumentToolbar document={document} onClose={handleClose} />
-      <div className="ph-default-styles py-10 text-center">
-        <div className="inline-flex flex-col gap-10 text-start">
-          {/* Edit document name form */}
-          <section className="flex justify-between">
-            <h1 className="text-start">{document.header.name}</h1>
-            <div className="flex flex-col space-y-2">
-              <Form
-                onSubmit={handleSetName}
-                defaultValues={{ name: document.header.name }}
-                className="flex flex-col gap-3 pt-2"
-              >
-                <div className="flex items-end gap-3">
-                  <div>
-                    <FormLabel htmlFor="name">
-                      <b className="mb-1">Change document name</b>
-                    </FormLabel>
-                    <StringField
-                      name="name"
-                      placeholder="Enter document name"
-                      className="mt-1"
-                    />
-                  </div>
-                  <Button type="submit">Edit</Button>
-                </div>
-              </Form>
-            </div>
-          </section>
-
-          {/* Document metadata */}
-          <section>
-            <ul className="grid grid-cols-2 gap-x-4 gap-y-1 text-gray-700">
-              <li>
-                <b className="mr-1">Id:</b>
-                {document.header.id}
-              </li>
-              <li>
-                <b className="mr-1">Created:</b>
-                {new Date(document.header.createdAtUtcIso).toLocaleString()}
-              </li>
-              <li>
-                <b className="mr-1">Type:</b>
-                {document.header.documentType}
-              </li>
-              <li>
-                <b className="mr-1">Last Modified:</b>
-                {new Date(
-                  document.header.lastModifiedAtUtcIso,
-                ).toLocaleString()}
-              </li>
-            </ul>
-          </section>
-
-          {/* Document state */}
-          <section className="inline-block">
-            <h2 className="mb-4">Document state</h2>
-            <textarea
-              rows={10}
-              readOnly
-              value={JSON.stringify(document.state, null, 2)}
-              className="font-mono"
-            ></textarea>
-          </section>
-        </div>
-      </div>
+    <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 %>,
+<% }); _%>
+]

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

@@ -1,6 +1,17 @@
+const {
+  pascalCase,
+  paramCase,
+  capitalCase,
+  camelCase,
+} = require("change-case");
+const { readdirSync, readFileSync } = require("fs");
+const { join } = require("path");
+const { getModuleExports } = require("../utils.js");
+
 // @ts-check
 module.exports = {
   params: ({ args }) => {
+    const rootDir = args.rootDir;
     const documentTypes = args.documentTypes
       .split(",")
       .map((type) => type.trim())
@@ -13,17 +24,75 @@ module.exports = {
     const documentType = singleDocumentType
       ? { ...documentTypesMap[singleDocumentType], type: singleDocumentType }
       : undefined;
-
+    const packageName = args.packageName;
+    const pascalCaseEditorName = pascalCase(args.name);
+    const paramCaseEditorName = paramCase(args.name);
+    const pascalCaseDocumentType = pascalCase(documentType?.name);
+    const paramCaseDocumentType = paramCase(documentType?.name);
+    const camelCaseDocumentType = camelCase(documentType?.name);
+    const documentVariableName = documentType
+      ? `${camelCaseDocumentType}Document`
+      : "document";
+    const phDocumentTypeName = documentType
+      ? `${pascalCaseDocumentType}Document`
+      : "Document";
+    const actionTypeName = `${pascalCaseDocumentType}Action`;
+    const documentModelDir = `${packageName}/document-models/${paramCaseDocumentType}`;
+    const hooksDir = `${packageName}/editors/hooks`;
+    const isDocumentOfTypeFunctionName = `is${phDocumentTypeName}`;
+    const assertIsDocumentOfTypeFunctionName = `assertIs${phDocumentTypeName}`;
+    const useByIdHookName = documentType
+      ? `use${phDocumentTypeName}ById`
+      : "useDocumentById";
+    const useSelectedHookName = documentType
+      ? `useSelected${phDocumentTypeName}`
+      : "useSelectedDocument";
+    const useInSelectedDriveHookName = documentType
+      ? `use${phDocumentTypeName}sInSelectedDrive`
+      : "useDocumentsInSelectedDrive";
+    const useInSelectedFolderHookName = documentType
+      ? `use${phDocumentTypeName}sInSelectedFolder`
+      : "useDocumentsInSelectedFolder";
+    const editNameComponentName = documentType
+      ? `Edit${pascalCaseDocumentType}Name`
+      : "EditDocumentName";
+    const moduleExports = getModuleExports(
+      rootDir,
+      /export\s+const\s+(\w+)\s*:\s*EditorModule\s*=/,
+      {
+        paramCaseName: paramCaseEditorName,
+        pascalCaseName: pascalCaseEditorName,
+      }
+    );
     return {
-      rootDir: args.rootDir,
+      rootDir,
+      moduleExports,
       documentModelsDir: args.documentModelsDir,
       name: args.name,
+      pascalCaseEditorName,
+      paramCaseEditorName,
+      pascalCaseDocumentType,
+      paramCaseDocumentType,
+      camelCaseDocumentType,
+      documentVariableName,
+      phDocumentTypeName,
+      actionTypeName,
+      hooksDir,
+      documentModelDir,
+      isDocumentOfTypeFunctionName,
+      assertIsDocumentOfTypeFunctionName,
+      useByIdHookName,
+      useSelectedHookName,
+      useInSelectedDriveHookName,
+      useInSelectedFolderHookName,
+      editNameComponentName,
       documentTypes: args.documentTypes
         .split(",")
         .filter((type) => type !== ""),
       documentTypesMap,
       editorId: args.editorId,
       documentType,
+      packageName,
     };
   },
 };

package/dist/src/codegen/.hygen/templates/powerhouse/generate-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";
+<% }); _%>