@powerhousedao/vetra 6.0.0-dev.25 → 6.0.0-dev.251

package/dist/editor-Bku8e2dr.js

@@ -0,0 +1,242 @@
+import { C as setProcessorStatus, S as setProcessorName, _ as addDocumentType, b as removeDocumentType, v as addProcessorApp, w as setProcessorType, x as removeProcessorApp } from "./module-BWlCj_0C.js";
+import { StatusPill } from "./editors/components/index.js";
+import { n as useAvailableDocumentTypes, t as useDebounce } from "./hooks-Xexr33XS.js";
+import { n as useSelectedProcessorModuleDocument } from "./useVetraDocument-DoAwvHVi.js";
+import { useSetPHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+import { PROCESSOR_APPS } from "@powerhousedao/shared/processors";
+import { useCallback, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DocumentToolbar } from "@powerhousedao/design-system/connect";
+//#region editors/processor-editor/components/ProcessorEditorForm.tsx
+const ProcessorEditorForm = ({ processorName: initialProcessorName = "", processorType: initialProcessorType = "", documentTypes: initialDocumentTypes = [], processorApps: initialProcessorApps = [], status = "DRAFT", onNameChange, onTypeChange, onAddDocumentType, onRemoveDocumentType, onAddProcessorApp, onRemoveProcessorApp, onConfirm }) => {
+	const [processorName, setProcessorName] = useState(initialProcessorName);
+	const [processorType, setProcessorType] = useState(initialProcessorType);
+	const [documentTypes, setDocumentTypes] = useState(initialDocumentTypes);
+	const [selectedDocumentType, setSelectedDocumentType] = useState("");
+	const [processorApps, setProcessorApps] = useState(initialProcessorApps);
+	const [isConfirmed, setIsConfirmed] = useState(false);
+	const availableDocumentTypes = useAvailableDocumentTypes();
+	useDebounce(processorName, onNameChange, 300);
+	useDebounce(processorType, onTypeChange, 300);
+	useEffect(() => {
+		setProcessorName(initialProcessorName);
+	}, [initialProcessorName]);
+	useEffect(() => {
+		setProcessorType(initialProcessorType);
+	}, [initialProcessorType]);
+	useEffect(() => {
+		setDocumentTypes(initialDocumentTypes);
+	}, [initialDocumentTypes]);
+	useEffect(() => {
+		setProcessorApps(initialProcessorApps);
+	}, [initialProcessorApps]);
+	useEffect(() => {
+		if (status === "DRAFT") setIsConfirmed(false);
+	}, [status]);
+	const isReadOnly = isConfirmed || status === "CONFIRMED";
+	const handleConfirm = () => {
+		if (processorName.trim() && processorType && documentTypes.length > 0 && processorApps.length > 0) {
+			setIsConfirmed(true);
+			onConfirm?.();
+		}
+	};
+	const handleRemoveDocumentType = (id) => {
+		setDocumentTypes(documentTypes.filter((dt) => dt.id !== id));
+		onRemoveDocumentType?.(id);
+	};
+	const canConfirm = !!processorName.trim() && !!processorType && documentTypes.length > 0 && processorApps.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-medium text-gray-900",
+					children: "Processor Configuration"
+				}), /* @__PURE__ */ jsx(StatusPill, {
+					status: status === "CONFIRMED" ? "confirmed" : "draft",
+					label: status === "CONFIRMED" ? "Confirmed" : "Draft"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "processor-name",
+				className: "mb-2 block text-sm font-medium text-gray-700",
+				children: "Processor Name"
+			}), /* @__PURE__ */ jsx("input", {
+				id: "processor-name",
+				type: "text",
+				value: processorName,
+				onChange: (e) => setProcessorName(e.target.value),
+				disabled: isReadOnly,
+				className: `w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`,
+				placeholder: "Enter processor name"
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "processor-type",
+				className: "mb-2 block text-sm font-medium text-gray-700",
+				children: "Type"
+			}), /* @__PURE__ */ jsxs("select", {
+				id: "processor-type",
+				value: processorType,
+				onChange: (e) => setProcessorType(e.target.value),
+				disabled: isReadOnly,
+				className: `w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`,
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "Select type..."
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "analytics",
+						children: "Analytics"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "relational",
+						children: "Relational Database"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "document-types",
+				className: "mb-2 block text-sm font-medium text-gray-700",
+				children: "Document Types"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [!isReadOnly && availableDocumentTypes.length > 0 && /* @__PURE__ */ jsxs("select", {
+					id: "document-types",
+					value: selectedDocumentType,
+					onChange: (e) => {
+						const selectedValue = e.target.value;
+						if (selectedValue && !documentTypes.some((dt) => dt.documentType === selectedValue)) {
+							const id = Date.now().toString();
+							const newType = {
+								id,
+								documentType: selectedValue
+							};
+							setDocumentTypes([...documentTypes, newType]);
+							onAddDocumentType?.(id, selectedValue);
+						}
+						setSelectedDocumentType("");
+					},
+					className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none",
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "Select a document type to add"
+					}), availableDocumentTypes.filter((docType) => !documentTypes.some((dt) => dt.documentType === docType)).map((docType) => /* @__PURE__ */ jsx("option", {
+						value: docType,
+						children: docType
+					}, docType))]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-1",
+					children: documentTypes.map((type) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center py-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm text-gray-700",
+							children: type.documentType
+						}), !isReadOnly && /* @__PURE__ */ jsx("button", {
+							onClick: () => handleRemoveDocumentType(type.id),
+							className: "ml-2 text-gray-400 hover:text-gray-600 focus:outline-none",
+							children: "×"
+						})]
+					}, type.id))
+				})]
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "processor-apps",
+				className: "mb-2 block text-sm font-medium text-gray-700",
+				children: "Processor Apps"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [!isReadOnly && /* @__PURE__ */ jsx(Fragment, { children: PROCESSOR_APPS.map((processorApp) => /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-1",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						name: processorApp,
+						id: processorApp,
+						checked: processorApps.includes(processorApp),
+						onChange: (event) => {
+							if (event.target.checked) {
+								setProcessorApps((processorApps) => [...new Set([...processorApps, processorApp])]);
+								onAddProcessorApp?.(processorApp);
+							} else if (processorApps.length > 1) {
+								setProcessorApps((processorApps) => processorApps.filter((p) => p !== processorApp));
+								onRemoveProcessorApp?.(processorApp);
+							}
+						}
+					}), /* @__PURE__ */ jsx("label", {
+						htmlFor: processorApp,
+						children: processorApp
+					})]
+				}, processorApp)) }), /* @__PURE__ */ jsx("div", {
+					className: "space-y-1",
+					children: isReadOnly && processorApps.map((processorApp) => /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-gray-700",
+						children: processorApp
+					}, processorApp))
+				})]
+			})] }),
+			!isReadOnly && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("button", {
+				onClick: handleConfirm,
+				disabled: !canConfirm,
+				className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300",
+				children: "Confirm"
+			}) })
+		]
+	});
+};
+//#endregion
+//#region editors/processor-editor/config.ts
+const editorConfig = { isExternalControlsEnabled: false };
+//#endregion
+//#region editors/processor-editor/editor.tsx
+function Editor() {
+	useSetPHDocumentEditorConfig(editorConfig);
+	const [document, dispatch] = useSelectedProcessorModuleDocument();
+	const onConfirm = useCallback(() => {
+		dispatch([setProcessorStatus({ status: "CONFIRMED" })]);
+	}, [dispatch]);
+	const onNameChange = useCallback((name) => {
+		if (name === document.state.global.name) return;
+		dispatch(setProcessorName({ name }));
+	}, [document.state.global.name, dispatch]);
+	const onTypeChange = useCallback((type) => {
+		if (type === document.state.global.type) return;
+		dispatch(setProcessorType({ type }));
+	}, [document.state.global.type, dispatch]);
+	const onAddDocumentType = useCallback((id, documentType) => {
+		dispatch(addDocumentType({
+			id,
+			documentType
+		}));
+	}, [dispatch]);
+	const onRemoveDocumentType = useCallback((id) => {
+		dispatch(removeDocumentType({ id }));
+	}, [dispatch]);
+	const onAddProcessorApp = useCallback((processorApp) => {
+		dispatch(addProcessorApp({ processorApp }));
+	}, [dispatch]);
+	const onRemoveProcessorApp = useCallback((processorApp) => {
+		dispatch(removeProcessorApp({ processorApp }));
+	}, [dispatch]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-gray-50 p-6",
+		children: [/* @__PURE__ */ jsx(DocumentToolbar, {}), /* @__PURE__ */ jsx(ProcessorEditorForm, {
+			onNameChange,
+			onTypeChange,
+			onAddDocumentType,
+			onRemoveDocumentType,
+			onAddProcessorApp,
+			onRemoveProcessorApp,
+			status: document.state.global.status,
+			processorName: document.state.global.name ?? "",
+			processorType: document.state.global.type ?? "",
+			documentTypes: document.state.global.documentTypes ?? [],
+			processorApps: document.state.global.processorApps,
+			onConfirm
+		})]
+	});
+}
+//#endregion
+export { Editor as default };
+
+//# sourceMappingURL=editor-Bku8e2dr.js.map

package/dist/editor-Bku8e2dr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-Bku8e2dr.js","names":[],"sources":["../editors/processor-editor/components/ProcessorEditorForm.tsx","../editors/processor-editor/config.ts","../editors/processor-editor/editor.tsx"],"sourcesContent":["import {\n  PROCESSOR_APPS,\n  type ProcessorApp,\n  type ProcessorApps,\n} from \"@powerhousedao/shared/processors\";\nimport { useEffect, useState } from \"react\";\nimport type { DocumentTypeItem } from \"../../../document-models/processor-module/index.js\";\nimport { StatusPill } from \"../../components/index.js\";\nimport { useAvailableDocumentTypes, useDebounce } from \"../../hooks/index.js\";\n\nexport interface ProcessorEditorFormProps {\n  processorName?: string;\n  processorType?: string;\n  documentTypes?: DocumentTypeItem[];\n  processorApps?: ProcessorApps;\n  status?: string;\n  onNameChange?: (name: string) => void;\n  onTypeChange?: (type: string) => void;\n  onAddDocumentType?: (id: string, documentType: string) => void;\n  onRemoveDocumentType?: (id: string) => void;\n  onAddProcessorApp?: (processorApp: ProcessorApp) => void;\n  onRemoveProcessorApp?: (processorApp: ProcessorApp) => void;\n  onConfirm?: () => void;\n}\n\nexport const ProcessorEditorForm: React.FC<ProcessorEditorFormProps> = ({\n  processorName: initialProcessorName = \"\",\n  processorType: initialProcessorType = \"\",\n  documentTypes: initialDocumentTypes = [],\n  processorApps: initialProcessorApps = [],\n  status = \"DRAFT\",\n  onNameChange,\n  onTypeChange,\n  onAddDocumentType,\n  onRemoveDocumentType,\n  onAddProcessorApp,\n  onRemoveProcessorApp,\n  onConfirm,\n}) => {\n  const [processorName, setProcessorName] = useState(initialProcessorName);\n  const [processorType, setProcessorType] = useState(initialProcessorType);\n  const [documentTypes, setDocumentTypes] =\n    useState<DocumentTypeItem[]>(initialDocumentTypes);\n  const [selectedDocumentType, setSelectedDocumentType] = useState(\"\");\n  const [processorApps, setProcessorApps] = useState(initialProcessorApps);\n  const [isConfirmed, setIsConfirmed] = useState(false);\n\n  // Get available document types from the hook (combines reactor and vetra drive)\n  const availableDocumentTypes = useAvailableDocumentTypes();\n\n  // Use the debounce hook for name and type changes\n  useDebounce(processorName, onNameChange, 300);\n  useDebounce(processorType, onTypeChange, 300);\n\n  // Update local state when initial values change\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setProcessorName(initialProcessorName);\n  }, [initialProcessorName]);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setProcessorType(initialProcessorType);\n  }, [initialProcessorType]);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setDocumentTypes(initialDocumentTypes);\n  }, [initialDocumentTypes]);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setProcessorApps(initialProcessorApps);\n  }, [initialProcessorApps]);\n\n  // Reset confirmation state if status changes back to DRAFT\n  useEffect(() => {\n    if (status === \"DRAFT\") {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setIsConfirmed(false);\n    }\n  }, [status]);\n\n  // Check if form should be read-only\n  const isReadOnly = isConfirmed || status === \"CONFIRMED\";\n\n  const handleConfirm = () => {\n    if (\n      processorName.trim() &&\n      processorType &&\n      documentTypes.length > 0 &&\n      processorApps.length > 0\n    ) {\n      setIsConfirmed(true); // Immediate UI update\n      onConfirm?.();\n    }\n  };\n\n  const handleRemoveDocumentType = (id: string) => {\n    setDocumentTypes(documentTypes.filter((dt) => dt.id !== id));\n    onRemoveDocumentType?.(id);\n  };\n\n  const canConfirm =\n    !!processorName.trim() &&\n    !!processorType &&\n    documentTypes.length > 0 &&\n    processorApps.length > 0;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-lg font-medium text-gray-900\">\n          Processor Configuration\n        </h2>\n        <StatusPill\n          status={status === \"CONFIRMED\" ? \"confirmed\" : \"draft\"}\n          label={status === \"CONFIRMED\" ? \"Confirmed\" : \"Draft\"}\n        />\n      </div>\n\n      {/* Processor Name Field */}\n      <div>\n        <label\n          htmlFor=\"processor-name\"\n          className=\"mb-2 block text-sm font-medium text-gray-700\"\n        >\n          Processor Name\n        </label>\n        <input\n          id=\"processor-name\"\n          type=\"text\"\n          value={processorName}\n          onChange={(e) => setProcessorName(e.target.value)}\n          disabled={isReadOnly}\n          className={`w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none ${\n            isReadOnly ? \"cursor-not-allowed bg-gray-100\" : \"\"\n          }`}\n          placeholder=\"Enter processor name\"\n        />\n      </div>\n\n      {/* Processor Type Dropdown */}\n      <div>\n        <label\n          htmlFor=\"processor-type\"\n          className=\"mb-2 block text-sm font-medium text-gray-700\"\n        >\n          Type\n        </label>\n        <select\n          id=\"processor-type\"\n          value={processorType}\n          onChange={(e) => setProcessorType(e.target.value)}\n          disabled={isReadOnly}\n          className={`w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none ${\n            isReadOnly ? \"cursor-not-allowed bg-gray-100\" : \"\"\n          }`}\n        >\n          <option value=\"\">Select type...</option>\n          <option value=\"analytics\">Analytics</option>\n          <option value=\"relational\">Relational Database</option>\n        </select>\n      </div>\n\n      {/* Document Types Field */}\n      <div>\n        <label\n          htmlFor=\"document-types\"\n          className=\"mb-2 block text-sm font-medium text-gray-700\"\n        >\n          Document Types\n        </label>\n        <div className=\"space-y-2\">\n          {!isReadOnly && availableDocumentTypes.length > 0 && (\n            <select\n              id=\"document-types\"\n              value={selectedDocumentType}\n              onChange={(e) => {\n                const selectedValue = e.target.value;\n                if (\n                  selectedValue &&\n                  !documentTypes.some((dt) => dt.documentType === selectedValue)\n                ) {\n                  const id = Date.now().toString();\n                  const newType: DocumentTypeItem = {\n                    id,\n                    documentType: selectedValue,\n                  };\n                  setDocumentTypes([...documentTypes, newType]);\n                  onAddDocumentType?.(id, selectedValue);\n                }\n                setSelectedDocumentType(\"\");\n              }}\n              className=\"w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n            >\n              <option value=\"\">Select a document type to add</option>\n              {availableDocumentTypes\n                .filter(\n                  (docType) =>\n                    !documentTypes.some((dt) => dt.documentType === docType),\n                )\n                .map((docType) => (\n                  <option key={docType} value={docType}>\n                    {docType}\n                  </option>\n                ))}\n            </select>\n          )}\n          <div className=\"space-y-1\">\n            {documentTypes.map((type) => (\n              <div key={type.id} className=\"flex items-center py-1\">\n                <span className=\"text-sm text-gray-700\">\n                  {type.documentType}\n                </span>\n                {!isReadOnly && (\n                  <button\n                    onClick={() => handleRemoveDocumentType(type.id)}\n                    className=\"ml-2 text-gray-400 hover:text-gray-600 focus:outline-none\"\n                  >\n                    ×\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      {/* Processor Apps Field */}\n      <div>\n        <label\n          htmlFor=\"processor-apps\"\n          className=\"mb-2 block text-sm font-medium text-gray-700\"\n        >\n          Processor Apps\n        </label>\n        <div className=\"space-y-2\">\n          {!isReadOnly && (\n            <>\n              {PROCESSOR_APPS.map((processorApp) => (\n                <div key={processorApp} className=\"flex gap-1\">\n                  <input\n                    type=\"checkbox\"\n                    name={processorApp}\n                    id={processorApp}\n                    checked={processorApps.includes(processorApp)}\n                    onChange={(event) => {\n                      const isChecked = event.target.checked;\n                      if (isChecked) {\n                        setProcessorApps((processorApps) => [\n                          ...new Set([...processorApps, processorApp]),\n                        ]);\n                        onAddProcessorApp?.(processorApp);\n                      } else {\n                        if (processorApps.length > 1) {\n                          setProcessorApps((processorApps) =>\n                            processorApps.filter((p) => p !== processorApp),\n                          );\n                          onRemoveProcessorApp?.(processorApp);\n                        }\n                      }\n                    }}\n                  />\n                  <label htmlFor={processorApp}>{processorApp}</label>\n                </div>\n              ))}\n            </>\n          )}\n          <div className=\"space-y-1\">\n            {isReadOnly &&\n              processorApps.map((processorApp) => (\n                <span key={processorApp} className=\"text-sm text-gray-700\">\n                  {processorApp}\n                </span>\n              ))}\n          </div>\n        </div>\n      </div>\n      {/* Confirm Button - only show if not in read-only mode */}\n      {!isReadOnly && (\n        <div>\n          <button\n            onClick={handleConfirm}\n            disabled={!canConfirm}\n            className=\"rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300\"\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n","import type { PHDocumentEditorConfig } from \"@powerhousedao/reactor-browser\";\n\nexport const editorConfig: PHDocumentEditorConfig = {\n  isExternalControlsEnabled: false,\n};\n","import { DocumentToolbar } from \"@powerhousedao/design-system/connect\";\nimport { useSetPHDocumentEditorConfig } from \"@powerhousedao/reactor-browser\";\nimport type {\n  ProcessorApp,\n  ProcessorApps,\n} from \"@powerhousedao/shared/processors\";\nimport { useCallback } from \"react\";\nimport {\n  addDocumentType,\n  addProcessorApp,\n  removeDocumentType,\n  removeProcessorApp,\n  setProcessorName,\n  setProcessorStatus,\n  setProcessorType,\n} from \"../../document-models/processor-module/index.js\";\nimport { useSelectedProcessorModuleDocument } from \"../hooks/useVetraDocument.js\";\nimport { ProcessorEditorForm } from \"./components/ProcessorEditorForm.js\";\nimport { editorConfig } from \"./config.js\";\n\nexport default function Editor() {\n  useSetPHDocumentEditorConfig(editorConfig);\n  const [document, dispatch] = useSelectedProcessorModuleDocument();\n\n  const onConfirm = useCallback(() => {\n    // Dispatch all actions at once\n    dispatch([setProcessorStatus({ status: \"CONFIRMED\" })]);\n  }, [dispatch]);\n\n  const onNameChange = useCallback(\n    (name: string) => {\n      if (name === document.state.global.name) return;\n      dispatch(setProcessorName({ name }));\n    },\n    [document.state.global.name, dispatch],\n  );\n\n  const onTypeChange = useCallback(\n    (type: string) => {\n      if (type === document.state.global.type) return;\n      dispatch(setProcessorType({ type }));\n    },\n    [document.state.global.type, dispatch],\n  );\n\n  const onAddDocumentType = useCallback(\n    (id: string, documentType: string) => {\n      dispatch(addDocumentType({ id, documentType }));\n    },\n    [dispatch],\n  );\n\n  const onRemoveDocumentType = useCallback(\n    (id: string) => {\n      dispatch(removeDocumentType({ id }));\n    },\n    [dispatch],\n  );\n\n  const onAddProcessorApp = useCallback(\n    (processorApp: ProcessorApp) => {\n      dispatch(addProcessorApp({ processorApp }));\n    },\n    [dispatch],\n  );\n\n  const onRemoveProcessorApp = useCallback(\n    (processorApp: ProcessorApp) => {\n      dispatch(removeProcessorApp({ processorApp }));\n    },\n    [dispatch],\n  );\n\n  return (\n    <div className=\"bg-gray-50 p-6\">\n      <DocumentToolbar />\n      <ProcessorEditorForm\n        onNameChange={onNameChange}\n        onTypeChange={onTypeChange}\n        onAddDocumentType={onAddDocumentType}\n        onRemoveDocumentType={onRemoveDocumentType}\n        onAddProcessorApp={onAddProcessorApp}\n        onRemoveProcessorApp={onRemoveProcessorApp}\n        status={document.state.global.status}\n        processorName={document.state.global.name ?? \"\"}\n        processorType={document.state.global.type ?? \"\"}\n        documentTypes={document.state.global.documentTypes ?? []}\n        processorApps={document.state.global.processorApps as ProcessorApps}\n        onConfirm={onConfirm}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/editor-CbtrPBTP.js

@@ -0,0 +1,199 @@
+import { C as setAppStatus, S as setAppName, v as setDragAndDropEnabled, w as setDocumentTypes, x as removeDocumentType, y as addDocumentType } from "./module-CTPfENDU.js";
+import { s as useSelectedAppModuleDocument } from "./app-module-Bbj7PI-S.js";
+import { StatusPill } from "./editors/components/index.js";
+import { t as useDebounce } from "./hooks-Xexr33XS.js";
+import { useDocumentTypesInSelectedDrive, useSetPHDocumentEditorConfig, useSupportedDocumentTypesInReactor } from "@powerhousedao/reactor-browser";
+import { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DocumentToolbar } from "@powerhousedao/design-system/connect";
+//#region editors/app-editor/components/AppEditorForm.tsx
+const ALL_IN_DRIVE = "all-in-drive";
+const ALL_IN_REACTOR = "all-in-reactor";
+const ALLOW_ANY = "allow-any";
+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, handleSetAppName] = useState(documentName);
+	const [isConfirmed, setIsConfirmed] = useState(status === "CONFIRMED");
+	const documentTypesInSelectedDrive = useDocumentTypesInSelectedDrive();
+	const supportedDocumentTypesInReactor = useSupportedDocumentTypesInReactor();
+	const [selectedDocumentTypes, setSelectedDocumentTypes] = useState(allowedDocumentTypes ?? []);
+	useDebounce(appName, useCallback((name) => {
+		if (name === documentName) return;
+		console.log("onNameChange", name);
+		dispatch(setAppName({ name }));
+	}, [documentName]), 300);
+	const onConfirm = () => {
+		dispatch(setAppStatus({ status: "CONFIRMED" }));
+	};
+	const onDragAndDropToggle = (enabled) => {
+		if (enabled === isDragAndDropEnabled) return;
+		dispatch(setDragAndDropEnabled({ enabled }));
+	};
+	useEffect(() => {
+		if (status === "DRAFT") setIsConfirmed(false);
+	}, [status]);
+	const isReadOnly = isConfirmed || status === "CONFIRMED";
+	const handleConfirm = () => {
+		if (appName.trim()) {
+			setIsConfirmed(true);
+			onConfirm();
+		}
+	};
+	const handleAddDocumentType = (documentType) => {
+		if (!documentType || selectedDocumentTypes.includes(documentType)) return;
+		setSelectedDocumentTypes([...selectedDocumentTypes, documentType]);
+		dispatch(addDocumentType({ documentType }));
+	};
+	const handleRemoveDocumentType = (documentType) => {
+		setSelectedDocumentTypes(selectedDocumentTypes.filter((dt) => dt !== documentType));
+		dispatch(removeDocumentType({ documentType }));
+	};
+	const handleAddAllDocumentTypesInDrive = () => {
+		const newDocumentTypes = [...new Set([...selectedDocumentTypes, ...documentTypesInSelectedDrive ?? []])];
+		setSelectedDocumentTypes(newDocumentTypes);
+		dispatch(setDocumentTypes({ documentTypes: newDocumentTypes }));
+	};
+	const handleAddAllDocumentTypesInReactor = () => {
+		const newDocumentTypes = [...new Set([...selectedDocumentTypes, ...supportedDocumentTypesInReactor ?? []])];
+		setSelectedDocumentTypes(newDocumentTypes);
+		dispatch(setDocumentTypes({ documentTypes: newDocumentTypes }));
+	};
+	const handleAllowAnyDocumentType = () => {
+		setSelectedDocumentTypes([]);
+		dispatch(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 /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-medium text-gray-900",
+					children: "App Configuration"
+				}), /* @__PURE__ */ jsx(StatusPill, {
+					status: status === "CONFIRMED" ? "confirmed" : "draft",
+					label: status === "CONFIRMED" ? "Confirmed" : "Draft"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "app-name",
+				className: "mb-2 block text-sm font-medium text-gray-700",
+				children: "App Name"
+			}), /* @__PURE__ */ jsx("input", {
+				id: "app-name",
+				type: "text",
+				value: appName,
+				onChange: (e) => handleSetAppName(e.target.value),
+				disabled: isReadOnly,
+				className: `w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`,
+				placeholder: "Enter app name"
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "document-types",
+				className: "mb-2 block text-sm font-medium text-gray-700",
+				children: "Document Types"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [!isReadOnly && /* @__PURE__ */ 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:ring-2 focus:ring-blue-500 focus:outline-none",
+					children: [
+						/* @__PURE__ */ jsx("option", { children: "Select a document type to add" }),
+						/* @__PURE__ */ jsx("option", { children: "--- Vetra drive document types ---" }),
+						/* @__PURE__ */ jsx("option", {
+							value: ALL_IN_DRIVE,
+							children: "Add all document types in Vetra drive"
+						}),
+						documentTypesInSelectedDrive?.filter((dt) => !selectedDocumentTypes.includes(dt)).map((docType) => /* @__PURE__ */ jsx("option", {
+							value: docType,
+							children: docType
+						}, docType)),
+						/* @__PURE__ */ jsx("option", { children: "--- Reactor document types ---" }),
+						/* @__PURE__ */ jsx("option", {
+							value: ALL_IN_REACTOR,
+							children: "Add all document types in Reactor"
+						}),
+						supportedDocumentTypesInReactor?.filter((dt) => !selectedDocumentTypes.includes(dt)).map((docType) => /* @__PURE__ */ jsx("option", {
+							value: docType,
+							children: docType
+						}, docType)),
+						/* @__PURE__ */ jsx("option", { children: "--- Allow any document type ---" }),
+						/* @__PURE__ */ jsx("option", {
+							value: ALLOW_ANY,
+							children: "Allow any document type"
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-1",
+					children: selectedDocumentTypes.length > 0 ? selectedDocumentTypes.map((type) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center py-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm text-gray-700",
+							children: type
+						}), !isReadOnly && /* @__PURE__ */ jsx("button", {
+							onClick: () => handleRemoveDocumentType(type),
+							className: "ml-2 text-gray-400 hover:text-gray-600 focus:outline-none",
+							children: "×"
+						})]
+					}, type)) : /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-gray-700",
+						children: "All documents (*)"
+					})
+				})]
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "mb-4 text-base font-medium text-gray-900",
+				children: "Drag and Drop Settings"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ jsxs("label", {
+					htmlFor: "drag-and-drop-enabled",
+					className: "flex items-center",
+					children: [/* @__PURE__ */ jsx("input", {
+						id: "drag-and-drop-enabled",
+						type: "checkbox",
+						checked: isDragAndDropEnabled,
+						onChange: (e) => onDragAndDropToggle(e.target.checked),
+						disabled: isReadOnly,
+						className: `mr-2 size-4 rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500 ${isReadOnly ? "cursor-not-allowed" : ""}`
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium text-gray-700",
+						children: "Enable drag and drop"
+					})]
+				})
+			})] }),
+			!isReadOnly && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("button", {
+				onClick: handleConfirm,
+				disabled: !appName.trim(),
+				className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300",
+				children: "Confirm"
+			}) })
+		]
+	});
+};
+//#endregion
+//#region editors/app-editor/config.ts
+const editorConfig = { isExternalControlsEnabled: false };
+//#endregion
+//#region editors/app-editor/editor.tsx
+function Editor() {
+	useSetPHDocumentEditorConfig(editorConfig);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-gray-50 p-6",
+		children: [/* @__PURE__ */ jsx(DocumentToolbar, {}), /* @__PURE__ */ jsx(AppEditorForm, {})]
+	});
+}
+//#endregion
+export { Editor as default };
+
+//# sourceMappingURL=editor-CbtrPBTP.js.map

package/dist/editor-CbtrPBTP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-CbtrPBTP.js","names":[],"sources":["../editors/app-editor/components/AppEditorForm.tsx","../editors/app-editor/config.ts","../editors/app-editor/editor.tsx"],"sourcesContent":["import {\n  useDocumentTypesInSelectedDrive,\n  useSupportedDocumentTypesInReactor,\n} from \"@powerhousedao/reactor-browser\";\nimport {\n  addDocumentType,\n  removeDocumentType,\n  setAppName,\n  setAppStatus,\n  setDocumentTypes,\n  setDragAndDropEnabled,\n} from \"@powerhousedao/vetra/document-models/app-module\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useSelectedAppModuleDocument } from \"../../../document-models/app-module/index.js\";\nimport { StatusPill } from \"../../components/index.js\";\nimport { useDebounce } from \"../../hooks/index.js\";\n\nconst ALL_IN_DRIVE = \"all-in-drive\";\nconst ALL_IN_REACTOR = \"all-in-reactor\";\nconst ALLOW_ANY = \"allow-any\";\n\nexport const AppEditorForm = () => {\n  const [document, dispatch] = useSelectedAppModuleDocument();\n  const documentName = document.state.global.name;\n  const status = document.state.global.status;\n  const isDragAndDropEnabled = document.state.global.isDragAndDropEnabled;\n  const allowedDocumentTypes = document.state.global.allowedDocumentTypes;\n  const [appName, handleSetAppName] = useState(documentName);\n  const [isConfirmed, setIsConfirmed] = useState(status === \"CONFIRMED\");\n  const documentTypesInSelectedDrive = useDocumentTypesInSelectedDrive();\n  const supportedDocumentTypesInReactor = useSupportedDocumentTypesInReactor();\n  const [selectedDocumentTypes, setSelectedDocumentTypes] = useState(\n    allowedDocumentTypes ?? [],\n  );\n\n  // Use the debounce hook for name changes\n\n  const onNameChange = useCallback(\n    (name: string) => {\n      if (name === documentName) return;\n      console.log(\"onNameChange\", name);\n      dispatch(setAppName({ name }));\n    },\n    [documentName],\n  );\n\n  useDebounce(appName, onNameChange, 300);\n\n  const onConfirm = () => {\n    dispatch(setAppStatus({ status: \"CONFIRMED\" }));\n  };\n\n  const onDragAndDropToggle = (enabled: boolean) => {\n    if (enabled === isDragAndDropEnabled) return;\n    dispatch(setDragAndDropEnabled({ enabled }));\n  };\n\n  // Reset confirmation state if status changes back to DRAFT\n  useEffect(() => {\n    if (status === \"DRAFT\") {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setIsConfirmed(false);\n    }\n  }, [status]);\n\n  // Check if form should be read-only\n  const isReadOnly = isConfirmed || status === \"CONFIRMED\";\n\n  const handleConfirm = () => {\n    if (appName.trim()) {\n      setIsConfirmed(true); // Immediate UI update\n      onConfirm();\n    }\n  };\n\n  const handleAddDocumentType = (documentType: string) => {\n    if (!documentType || selectedDocumentTypes.includes(documentType)) return;\n    setSelectedDocumentTypes([...selectedDocumentTypes, documentType]);\n    dispatch(addDocumentType({ documentType }));\n  };\n\n  const handleRemoveDocumentType = (documentType: string) => {\n    setSelectedDocumentTypes(\n      selectedDocumentTypes.filter((dt) => dt !== documentType),\n    );\n    dispatch(removeDocumentType({ documentType }));\n  };\n\n  const handleAddAllDocumentTypesInDrive = () => {\n    const newDocumentTypes = [\n      ...new Set([\n        ...selectedDocumentTypes,\n        ...(documentTypesInSelectedDrive ?? []),\n      ]),\n    ];\n    setSelectedDocumentTypes(newDocumentTypes);\n    dispatch(setDocumentTypes({ documentTypes: newDocumentTypes }));\n  };\n\n  const handleAddAllDocumentTypesInReactor = () => {\n    const newDocumentTypes = [\n      ...new Set([\n        ...selectedDocumentTypes,\n        ...(supportedDocumentTypesInReactor ?? []),\n      ]),\n    ];\n    setSelectedDocumentTypes(newDocumentTypes);\n    dispatch(setDocumentTypes({ documentTypes: newDocumentTypes }));\n  };\n\n  const handleAllowAnyDocumentType = () => {\n    setSelectedDocumentTypes([]);\n    dispatch(setDocumentTypes({ documentTypes: [] }));\n  };\n\n  const handleDocumentTypeSelection = (selectedValue: string) => {\n    if (selectedValue === ALL_IN_DRIVE) {\n      handleAddAllDocumentTypesInDrive();\n    } else if (selectedValue === ALL_IN_REACTOR) {\n      handleAddAllDocumentTypesInReactor();\n    } else if (selectedValue === ALLOW_ANY) {\n      handleAllowAnyDocumentType();\n    } else {\n      handleAddDocumentType(selectedValue);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-lg font-medium text-gray-900\">App Configuration</h2>\n        <StatusPill\n          status={status === \"CONFIRMED\" ? \"confirmed\" : \"draft\"}\n          label={status === \"CONFIRMED\" ? \"Confirmed\" : \"Draft\"}\n        />\n      </div>\n\n      {/* App Name Field */}\n      <div>\n        <label\n          htmlFor=\"app-name\"\n          className=\"mb-2 block text-sm font-medium text-gray-700\"\n        >\n          App Name\n        </label>\n        <input\n          id=\"app-name\"\n          type=\"text\"\n          value={appName}\n          onChange={(e) => handleSetAppName(e.target.value)}\n          disabled={isReadOnly}\n          className={`w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none ${\n            isReadOnly ? \"cursor-not-allowed bg-gray-100\" : \"\"\n          }`}\n          placeholder=\"Enter app name\"\n        />\n      </div>\n\n      {/* Document Types Field */}\n      <div>\n        <label\n          htmlFor=\"document-types\"\n          className=\"mb-2 block text-sm font-medium text-gray-700\"\n        >\n          Document Types\n        </label>\n        <div className=\"space-y-2\">\n          {!isReadOnly && (\n            <select\n              onChange={(e) => handleDocumentTypeSelection(e.target.value)}\n              className=\"w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n            >\n              <option>Select a document type to add</option>\n              <option>--- Vetra drive document types ---</option>\n              <option value={ALL_IN_DRIVE}>\n                Add all document types in Vetra drive\n              </option>\n              {documentTypesInSelectedDrive\n                ?.filter((dt) => !selectedDocumentTypes.includes(dt))\n                .map((docType) => (\n                  <option key={docType} value={docType}>\n                    {docType}\n                  </option>\n                ))}\n              <option>--- Reactor document types ---</option>\n              <option value={ALL_IN_REACTOR}>\n                Add all document types in Reactor\n              </option>\n              {supportedDocumentTypesInReactor\n                ?.filter((dt) => !selectedDocumentTypes.includes(dt))\n                .map((docType) => (\n                  <option key={docType} value={docType}>\n                    {docType}\n                  </option>\n                ))}\n              <option>--- Allow any document type ---</option>\n              <option value={ALLOW_ANY}>Allow any document type</option>\n            </select>\n          )}\n          <div className=\"space-y-1\">\n            {selectedDocumentTypes.length > 0 ? (\n              selectedDocumentTypes.map((type) => (\n                <div key={type} className=\"flex items-center py-1\">\n                  <span className=\"text-sm text-gray-700\">{type}</span>\n                  {!isReadOnly && (\n                    <button\n                      onClick={() => handleRemoveDocumentType(type)}\n                      className=\"ml-2 text-gray-400 hover:text-gray-600 focus:outline-none\"\n                    >\n                      ×\n                    </button>\n                  )}\n                </div>\n              ))\n            ) : (\n              <span className=\"text-sm text-gray-700\">All documents (*)</span>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Drag and Drop Settings */}\n      <div>\n        <h3 className=\"mb-4 text-base font-medium text-gray-900\">\n          Drag and Drop Settings\n        </h3>\n\n        {/* Enable/Disable Switch */}\n        <div className=\"mb-4\">\n          <label htmlFor=\"drag-and-drop-enabled\" className=\"flex items-center\">\n            <input\n              id=\"drag-and-drop-enabled\"\n              type=\"checkbox\"\n              checked={isDragAndDropEnabled}\n              onChange={(e) => onDragAndDropToggle(e.target.checked)}\n              disabled={isReadOnly}\n              className={`mr-2 size-4 rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500 ${\n                isReadOnly ? \"cursor-not-allowed\" : \"\"\n              }`}\n            />\n            <span className=\"text-sm font-medium text-gray-700\">\n              Enable drag and drop\n            </span>\n          </label>\n        </div>\n      </div>\n\n      {/* Confirm Button - only show if not in read-only mode */}\n      {!isReadOnly && (\n        <div>\n          <button\n            onClick={handleConfirm}\n            disabled={!appName.trim()}\n            className=\"rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300\"\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n","import type { PHDocumentEditorConfig } from \"@powerhousedao/reactor-browser\";\n\nexport const editorConfig: PHDocumentEditorConfig = {\n  isExternalControlsEnabled: false,\n};\n","import { DocumentToolbar } from \"@powerhousedao/design-system/connect\";\nimport { useSetPHDocumentEditorConfig } from \"@powerhousedao/reactor-browser\";\nimport { AppEditorForm } from \"./components/AppEditorForm.js\";\nimport { editorConfig } from \"./config.js\";\n\nexport default function Editor() {\n  useSetPHDocumentEditorConfig(editorConfig);\n\n  return (\n    <div className=\"bg-gray-50 p-6\">\n      <DocumentToolbar />\n      <AppEditorForm />\n    </div>\n  );\n}\n"],"mappings":"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"}