@powerhousedao/vetra 4.1.0-dev.9 → 4.1.0-dev.91

package/dist/document-models/vetra-package/src/tests/document-model.test.js

@@ -2,18 +2,110 @@
  * This is a scaffold file meant for customization:
  * - change it by adding new tests or modifying the existing ones
  */
-import { describe, it, expect } from "vitest";
-import utils, { initialGlobalState, initialLocalState, } from "../../gen/utils.js";
+import { describe, expect, it } from "vitest";
+import * as creators from "../../gen/base-operations/creators.js";
+import { reducer } from "../../gen/reducer.js";
+import utils from "../../gen/utils.js";
 describe("Vetra Package Document Model", () => {
-    it("should create a new Vetra Package document", () => {
+    it("should have correct initial values", () => {
         const document = utils.createDocument();
-        expect(document).toBeDefined();
-        expect(document.header.documentType).toBe("vetra/package-information");
+        expect(document.state.global.name).toBeNull();
+        expect(document.state.global.description).toBeNull();
+        expect(document.state.global.category).toBeNull();
+        expect(document.state.global.author).toEqual({
+            name: null,
+            website: null,
+        });
+        expect(document.state.global.keywords).toEqual([]);
+        expect(document.state.global.githubUrl).toBeNull();
+        expect(document.state.global.npmUrl).toBeNull();
     });
-    it("should create a new Vetra Package document with a valid initial state", () => {
+    it("should handle multiple operations and maintain consistency", () => {
         const document = utils.createDocument();
-        expect(document.state.global).toStrictEqual(initialGlobalState);
-        expect(document.state.local).toStrictEqual(initialLocalState);
+        let updatedDoc = reducer(document, creators.setPackageName({ name: "test-package" }));
+        updatedDoc = reducer(updatedDoc, creators.setPackageDescription({ description: "A test package" }));
+        updatedDoc = reducer(updatedDoc, creators.setPackageCategory({ category: "utility" }));
+        updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-1", label: "react" }));
+        updatedDoc = reducer(updatedDoc, creators.setPackageGithubUrl({
+            url: "https://github.com/user/test-package",
+        }));
+        // Verify state consistency
+        expect(updatedDoc.state.global.name).toBe("test-package");
+        expect(updatedDoc.state.global.description).toBe("A test package");
+        expect(updatedDoc.state.global.category).toBe("utility");
+        expect(updatedDoc.state.global.keywords).toHaveLength(1);
+        expect(updatedDoc.state.global.githubUrl).toBe("https://github.com/user/test-package");
+    });
+    it("should handle complete workflow: set metadata, author, and keywords", () => {
+        const document = utils.createDocument();
+        // Step 1: Set package metadata
+        let updatedDoc = reducer(document, creators.setPackageName({ name: "awesome-lib" }));
+        updatedDoc = reducer(updatedDoc, creators.setPackageDescription({
+            description: "An awesome library for everything",
+        }));
+        updatedDoc = reducer(updatedDoc, creators.setPackageCategory({ category: "library" }));
+        // Step 2: Set author information
+        updatedDoc = reducer(updatedDoc, creators.setPackageAuthor({
+            name: "Jane Developer",
+            website: "https://janedeveloper.com",
+        }));
+        // Step 3: Add keywords
+        updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-1", label: "javascript" }));
+        updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-2", label: "typescript" }));
+        updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-3", label: "react" }));
+        // Step 4: Set repository URLs
+        updatedDoc = reducer(updatedDoc, creators.setPackageGithubUrl({
+            url: "https://github.com/jane/awesome-lib",
+        }));
+        updatedDoc = reducer(updatedDoc, creators.setPackageNpmUrl({
+            url: "https://npmjs.com/package/awesome-lib",
+        }));
+        // Verify final state
+        expect(updatedDoc.operations.global).toHaveLength(9);
+        expect(updatedDoc.state.global.name).toBe("awesome-lib");
+        expect(updatedDoc.state.global.author.name).toBe("Jane Developer");
+        expect(updatedDoc.state.global.keywords).toHaveLength(3);
+        expect(updatedDoc.state.global.githubUrl).toBe("https://github.com/jane/awesome-lib");
+        expect(updatedDoc.state.global.npmUrl).toBe("https://npmjs.com/package/awesome-lib");
+    });
+    describe("Complex Scenarios", () => {
+        it("should handle author updates: full then partial", () => {
+            const document = utils.createDocument();
+            // Set full author
+            let updatedDoc = reducer(document, creators.setPackageAuthor({
+                name: "John Doe",
+                website: "https://johndoe.com",
+            }));
+            expect(updatedDoc.state.global.author.name).toBe("John Doe");
+            expect(updatedDoc.state.global.author.website).toBe("https://johndoe.com");
+            // Update only name
+            updatedDoc = reducer(updatedDoc, creators.setPackageAuthorName({ name: "Jane Doe" }));
+            expect(updatedDoc.state.global.author.name).toBe("Jane Doe");
+            expect(updatedDoc.state.global.author.website).toBe("https://johndoe.com");
+            // Update only website
+            updatedDoc = reducer(updatedDoc, creators.setPackageAuthorWebsite({
+                website: "https://janedoe.com",
+            }));
+            expect(updatedDoc.state.global.author.name).toBe("Jane Doe");
+            expect(updatedDoc.state.global.author.website).toBe("https://janedoe.com");
+        });
+        it("should maintain state integrity with keyword add/remove sequences", () => {
+            const document = utils.createDocument();
+            // Add multiple keywords
+            let updatedDoc = reducer(document, creators.addPackageKeyword({ id: "kw-a", label: "react" }));
+            updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-b", label: "vue" }));
+            updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-c", label: "angular" }));
+            expect(updatedDoc.state.global.keywords).toHaveLength(3);
+            // Remove middle one
+            updatedDoc = reducer(updatedDoc, creators.removePackageKeyword({ id: "kw-b" }));
+            expect(updatedDoc.state.global.keywords).toHaveLength(2);
+            // Add it back with new label value
+            updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-b", label: "svelte" }));
+            expect(updatedDoc.state.global.keywords).toHaveLength(3);
+            // Verify order and content
+            const keywordB = updatedDoc.state.global.keywords.find((kw) => kw.id === "kw-b");
+            expect(keywordB?.label).toBe("svelte");
+            // Verify operation history
+        });
     });
 });
-//# sourceMappingURL=document-model.test.js.map

package/dist/document-models/vetra-package/src/utils.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=utils.js.map

package/dist/editors/app-editor/components/AppEditorForm.d.ts

@@ -0,0 +1,2 @@
+export declare const AppEditorForm: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppEditorForm.d.ts.map

package/dist/editors/app-editor/components/AppEditorForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppEditorForm.d.ts","sourceRoot":"","sources":["../../../../editors/app-editor/components/AppEditorForm.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,+CA2OzB,CAAC"}

package/dist/editors/app-editor/components/AppEditorForm.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDocumentTypesInSelectedDrive, useSupportedDocumentTypesInReactor, } from "@powerhousedao/reactor-browser";
+import { useEffect, useState } from "react";
+import { actions } from "../../../document-models/app-module/index.js";
+import { StatusPill } from "../../components/index.js";
+import { useDebounce } from "../../hooks/index.js";
+import { useSelectedAppModuleDocument } from "../../hooks/useVetraDocument.js";
+const ALL_IN_DRIVE = "all-in-drive";
+const ALL_IN_REACTOR = "all-in-reactor";
+const ALLOW_ANY = "allow-any";
+export const AppEditorForm = () => {
+    const [document, dispatch] = useSelectedAppModuleDocument();
+    const documentName = document.state.global.name;
+    const status = document.state.global.status;
+    const isDragAndDropEnabled = document.state.global.isDragAndDropEnabled;
+    const allowedDocumentTypes = document.state.global.allowedDocumentTypes;
+    const [appName, setAppName] = useState(documentName);
+    const [isConfirmed, setIsConfirmed] = useState(status === "CONFIRMED");
+    const documentTypesInSelectedDrive = useDocumentTypesInSelectedDrive();
+    const supportedDocumentTypesInReactor = useSupportedDocumentTypesInReactor();
+    const [selectedDocumentTypes, setSelectedDocumentTypes] = useState(allowedDocumentTypes ?? []);
+    // Use the debounce hook for name changes
+    const onNameChange = (name) => {
+        if (name === documentName)
+            return;
+        dispatch(actions.setAppName({ name }));
+    };
+    useDebounce(appName, onNameChange, 300);
+    const onConfirm = () => {
+        dispatch(actions.setAppStatus({ status: "CONFIRMED" }));
+    };
+    const onDragAndDropToggle = (enabled) => {
+        if (enabled === isDragAndDropEnabled)
+            return;
+        dispatch(actions.setDragAndDropEnabled({ enabled }));
+    };
+    // Reset confirmation state if status changes back to DRAFT
+    useEffect(() => {
+        if (status === "DRAFT") {
+            setIsConfirmed(false);
+        }
+    }, [status]);
+    // Check if form should be read-only
+    const isReadOnly = isConfirmed || status === "CONFIRMED";
+    const handleConfirm = () => {
+        if (appName.trim()) {
+            setIsConfirmed(true); // Immediate UI update
+            onConfirm();
+        }
+    };
+    const handleAddDocumentType = (documentType) => {
+        if (!documentType || selectedDocumentTypes.includes(documentType))
+            return;
+        setSelectedDocumentTypes([...selectedDocumentTypes, documentType]);
+        dispatch(actions.addDocumentType({ documentType }));
+    };
+    const handleRemoveDocumentType = (documentType) => {
+        setSelectedDocumentTypes(selectedDocumentTypes.filter((dt) => dt !== documentType));
+        dispatch(actions.removeDocumentType({ documentType }));
+    };
+    const handleAddAllDocumentTypesInDrive = () => {
+        const newDocumentTypes = [
+            ...new Set([
+                ...selectedDocumentTypes,
+                ...(documentTypesInSelectedDrive ?? []),
+            ]),
+        ];
+        setSelectedDocumentTypes(newDocumentTypes);
+        dispatch(actions.setDocumentTypes({ documentTypes: newDocumentTypes }));
+    };
+    const handleAddAllDocumentTypesInReactor = () => {
+        const newDocumentTypes = [
+            ...new Set([
+                ...selectedDocumentTypes,
+                ...(supportedDocumentTypesInReactor ?? []),
+            ]),
+        ];
+        setSelectedDocumentTypes(newDocumentTypes);
+        dispatch(actions.setDocumentTypes({ documentTypes: newDocumentTypes }));
+    };
+    const handleAllowAnyDocumentType = () => {
+        setSelectedDocumentTypes([]);
+        dispatch(actions.setDocumentTypes({ documentTypes: [] }));
+    };
+    const handleDocumentTypeSelection = (selectedValue) => {
+        if (selectedValue === ALL_IN_DRIVE) {
+            handleAddAllDocumentTypesInDrive();
+        }
+        else if (selectedValue === ALL_IN_REACTOR) {
+            handleAddAllDocumentTypesInReactor();
+        }
+        else if (selectedValue === ALLOW_ANY) {
+            handleAllowAnyDocumentType();
+        }
+        else {
+            handleAddDocumentType(selectedValue);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6 bg-white p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "App Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "app-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "App Name" }), _jsx("input", { id: "app-name", type: "text", value: appName, onChange: (e) => setAppName(e.target.value), disabled: isReadOnly, className: `w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, placeholder: "Enter app name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "document-types", className: "mb-2 block text-sm font-medium text-gray-700", children: "Document Types" }), _jsxs("div", { className: "space-y-2", children: [!isReadOnly && (_jsxs("select", { onChange: (e) => handleDocumentTypeSelection(e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { children: "Select a document type to add" }), _jsx("option", { children: "--- Vetra drive document types ---" }), _jsx("option", { value: ALL_IN_DRIVE, children: "Add all document types in Vetra drive" }), documentTypesInSelectedDrive
+                                        ?.filter((dt) => !selectedDocumentTypes.includes(dt))
+                                        .map((docType) => (_jsx("option", { value: docType, children: docType }, docType))), _jsx("option", { children: "--- Reactor document types ---" }), _jsx("option", { value: ALL_IN_REACTOR, children: "Add all document types in Reactor" }), supportedDocumentTypesInReactor
+                                        ?.filter((dt) => !selectedDocumentTypes.includes(dt))
+                                        .map((docType) => (_jsx("option", { value: docType, children: docType }, docType))), _jsx("option", { children: "--- Allow any document type ---" }), _jsx("option", { value: ALLOW_ANY, children: "Allow any document type" })] })), _jsx("div", { className: "space-y-1", children: selectedDocumentTypes.length > 0 ? (selectedDocumentTypes.map((type) => (_jsxs("div", { className: "flex items-center py-1", children: [_jsx("span", { className: "text-sm text-gray-700", children: type }), !isReadOnly && (_jsx("button", { onClick: () => handleRemoveDocumentType(type), className: "ml-2 text-gray-400 hover:text-gray-600 focus:outline-none", children: "\u00D7" }))] }, type)))) : (_jsx("span", { className: "text-sm text-gray-700", children: "All documents (*)" })) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-md mb-4 font-medium text-gray-900", children: "Drag and Drop Settings" }), _jsx("div", { className: "mb-4", children: _jsxs("label", { htmlFor: "drag-and-drop-enabled", className: "flex items-center", children: [_jsx("input", { id: "drag-and-drop-enabled", type: "checkbox", checked: isDragAndDropEnabled, onChange: (e) => onDragAndDropToggle(e.target.checked), disabled: isReadOnly, className: `mr-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 ${isReadOnly ? "cursor-not-allowed" : ""}` }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Enable drag and drop" })] }) })] }), !isReadOnly && (_jsx("div", { children: _jsx("button", { onClick: handleConfirm, disabled: !appName.trim(), className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-300", children: "Confirm" }) }))] }));
+};

package/dist/editors/app-editor/config.d.ts

@@ -0,0 +1,3 @@
+import type { PHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+export declare const editorConfig: PHDocumentEditorConfig;
+//# sourceMappingURL=config.d.ts.map

package/dist/editors/app-editor/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,eAAO,MAAM,YAAY,EAAE,sBAE1B,CAAC"}

package/dist/editors/app-editor/config.js

@@ -0,0 +1,3 @@
+export const editorConfig = {
+    isExternalControlsEnabled: false,
+};

package/dist/editors/app-editor/editor.d.ts

@@ -0,0 +1,2 @@
+export declare function Editor(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor.d.ts.map

package/dist/editors/app-editor/editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/editor.tsx"],"names":[],"mappings":"AAKA,wBAAgB,MAAM,4CASrB"}

package/dist/editors/app-editor/editor.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentToolbar } from "@powerhousedao/design-system";
+import { useSetPHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+import { AppEditorForm } from "./components/AppEditorForm.js";
+import { editorConfig } from "./config.js";
+export function Editor() {
+    useSetPHDocumentEditorConfig(editorConfig);
+    return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(AppEditorForm, {})] }));
+}

package/dist/editors/app-editor/editor.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=editor.test.d.ts.map

package/dist/editors/app-editor/editor.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.test.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/editor.test.tsx"],"names":[],"mappings":""}