@powerhousedao/builder-profile 0.0.1

package/dist/editors/builder-profile/editor.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TextInput, Textarea, Icon } from "@powerhousedao/document-engineering";
+import { toast, ToastContainer } from "@powerhousedao/design-system";
+import { actions } from "../../document-models/builder-profile/index.js";
+import { useCallback, useState, useEffect, useRef } from "react";
+import { useSelectedBuilderProfileDocument } from "../hooks/useBuilderProfileDocument.js";
+// Image Modal Component
+function ImageModal({ isOpen, onClose, imageUrl, imageAlt, }) {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageDimensions, setImageDimensions] = useState({
+        width: 0,
+        height: 0,
+    });
+    if (!isOpen)
+        return null;
+    const handleImageLoad = (e) => {
+        const img = e.target;
+        setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+        setImageLoaded(true);
+    };
+    // Calculate modal size based on image dimensions with padding
+    const getModalSize = () => {
+        if (!imageLoaded)
+            return { width: "auto", height: "auto" };
+        const maxWidth = Math.min(imageDimensions.width + 100, window.innerWidth * 0.8);
+        const maxHeight = Math.min(imageDimensions.height + 100, window.innerHeight * 0.8);
+        return {
+            width: `${maxWidth}px`,
+            height: `${maxHeight}px`,
+        };
+    };
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm", onClick: onClose, children: _jsxs("div", { className: "relative bg-gray-900 rounded-lg shadow-2xl border-2 border-gray-700", style: getModalSize(), children: [_jsx("button", { onClick: onClose, className: "absolute -top-3 -right-3 z-10 w-8 h-8 bg-gray-800 hover:bg-gray-900 rounded-full flex items-center justify-center text-white transition-all duration-200 shadow-lg", children: _jsx(Icon, { name: "ArrowLeft", size: 16 }) }), _jsx("div", { className: "w-full h-full flex items-center justify-center p-8", children: _jsx("img", { src: imageUrl, alt: imageAlt, className: `max-w-full max-h-full object-contain rounded-lg ${imageLoaded ? "opacity-100" : "opacity-0"} transition-opacity duration-200`, onClick: (e) => e.stopPropagation(), onLoad: handleImageLoad }) })] }) }));
+}
+// Image URL input component with preview
+function ImageUrlInput({ label, value, onChange, placeholder, fileSize = "200KB", }) {
+    const [imageError, setImageError] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    // Reset image error when value changes
+    useEffect(() => {
+        setImageError(false);
+    }, [value]);
+    const handleImageClick = () => {
+        if (value &&
+            !imageError &&
+            (value.startsWith("http://") || value.startsWith("https://"))) {
+            setIsModalOpen(true);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: label }), _jsxs("div", { className: "border border-gray-300 rounded-lg p-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("div", { className: `flex-shrink-0 w-12 h-12 bg-gray-100 rounded border flex items-center justify-center overflow-hidden ${value &&
+                                                !imageError &&
+                                                (value.startsWith("http://") || value.startsWith("https://"))
+                                                ? "cursor-pointer hover:opacity-80 transition-opacity duration-200"
+                                                : ""}`, onClick: handleImageClick, children: value &&
+                                                !imageError &&
+                                                (value.startsWith("http://") ||
+                                                    value.startsWith("https://")) ? (_jsx("img", { src: value, alt: `${label} preview`, className: "w-full h-full object-cover", onError: () => setImageError(true), onLoad: () => setImageError(false) })) : (_jsx(Icon, { name: "Image", size: 24, className: "text-gray-400" })) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "text-xs text-gray-500", children: ["File Type: jpg | File Size: ", value ? fileSize : "0KB", imageError && value && (_jsx("div", { className: "text-red-500 mt-1", children: "\u26A0 Failed to load image" })), value &&
+                                                        !imageError &&
+                                                        (value.startsWith("http://") ||
+                                                            value.startsWith("https://")) && (_jsx("div", { className: "text-blue-600 mt-1", children: "\uD83D\uDCA1 Click image to view full size" }))] }) })] }) }), _jsx("div", { className: "mt-3", children: _jsx(TextInput, { className: "w-full", defaultValue: value || "", onBlur: (e) => {
+                                        if (e.target.value !== value) {
+                                            onChange(e.target.value);
+                                        }
+                                    }, placeholder: placeholder || "Enter image URL" }) })] })] }), _jsx(ImageModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), imageUrl: value, imageAlt: `${label} full size` })] }));
+}
+export default function Editor() {
+    // Getting dispatch from selected document
+    const [doc, dispatch] = useSelectedBuilderProfileDocument();
+    const state = doc.state.global;
+    // Track if we've already attempted to generate an ID
+    const idGeneratedRef = useRef(false);
+    // Auto-generate ID if not present (only once)
+    useEffect(() => {
+        if (!state?.id && !idGeneratedRef.current && dispatch) {
+            idGeneratedRef.current = true; // Mark as attempted
+            dispatch(actions.updateProfile({
+                id: doc.header.id,
+            }));
+        }
+    }, [state?.id, dispatch]);
+    // Generate slug from name
+    const generateSlug = useCallback((name) => {
+        return name
+            .toLowerCase()
+            .trim()
+            .replace(/[^a-z0-9\s-]/g, "") // Remove special characters except spaces and hyphens
+            .replace(/\s+/g, "-") // Replace spaces with hyphens
+            .replace(/-+/g, "-") // Replace multiple hyphens with single hyphen
+            .replace(/^-|-$/g, ""); // Remove leading/trailing hyphens
+    }, []);
+    // Handle field changes using the UPDATE_PROFILE operation
+    const handleFieldChange = useCallback((field, value) => {
+        if (!dispatch) {
+            console.error("Dispatch function not available");
+            toast(`Failed to update ${field} - no dispatch function`, {
+                type: "error",
+            });
+            return;
+        }
+        // If updating name and value is not empty, also update slug
+        if (field === "name" && value && value.trim()) {
+            const slug = generateSlug(value);
+            dispatch(actions.updateProfile({
+                name: value,
+                slug: slug,
+            }));
+        }
+        else {
+            // Only update the changed field along with id
+            const updateAction = actions.updateProfile({
+                [field]: value,
+            });
+            dispatch(updateAction);
+        }
+    }, [dispatch, generateSlug]);
+    return (_jsx("div", { className: "w-full bg-gray-50 min-h-screen", children: _jsxs("div", { className: "p-6 max-w-4xl mx-auto", children: [_jsxs("div", { className: "bg-white rounded-lg p-6 mb-6 shadow-sm", children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-2", children: "Builder Profile" }), _jsx("p", { className: "text-gray-600", children: "Create and manage your builder profile information" })] }), state && (state.name || state.icon || state.description) && (_jsxs("div", { className: "bg-white rounded-lg p-6 shadow-sm mb-6", children: [_jsx("h3", { className: "text-lg font-medium text-gray-900 mb-4", children: "Profile Preview" }), _jsx("div", { className: "border border-gray-200 rounded-lg p-4", children: _jsxs("div", { className: "flex items-start space-x-4", children: [_jsx("div", { className: "flex-shrink-0", children: state.icon ? (_jsx("img", { src: state.icon, alt: "Profile icon", className: "w-16 h-16 rounded-full object-cover border-2 border-gray-200" })) : (_jsx("div", { className: "w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center", children: _jsx(Icon, { name: "Image", size: 24, className: "text-gray-400" }) })) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: state.name || "Unnamed Builder" }), state.slug && (_jsxs("p", { className: "text-sm text-gray-500 mb-2", children: ["@", state.slug] })), state.description && (_jsx("p", { className: "text-gray-700", children: state.description }))] })] }) })] })), _jsx("div", { className: "bg-white rounded-lg p-6 shadow-sm", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Builder ID:" }), _jsxs("div", { className: "text-sm text-gray-500 flex items-center", children: [_jsx("span", { className: "mr-2", children: doc.header.id }), _jsx("button", { type: "button", className: "ml-1 p-1 rounded transition active:bg-gray-400 hover:bg-gray-200", title: "Copy Builder ID", onClick: () => {
+                                                    navigator.clipboard.writeText(doc.header.id || "");
+                                                    toast("Copied Builder ID!", {
+                                                        type: "success",
+                                                    });
+                                                }, children: _jsx(Icon, { name: "Copy", size: 16, className: "text-gray-400" }) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Builder Name:" }), _jsx(TextInput, { className: "w-full", defaultValue: state?.name || "", onBlur: (e) => {
+                                            if (e.target.value !== state?.name) {
+                                                handleFieldChange("name", e.target.value);
+                                            }
+                                        }, placeholder: "Enter your name" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Profile Slug:" }), _jsx(TextInput, { className: "w-full", value: state?.slug || "", onChange: (e) => {
+                                            handleFieldChange("slug", e.target.value);
+                                        }, placeholder: "your-profile-slug" }), _jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Used for your profile URL (lowercase, no spaces)" })] }), _jsx(ImageUrlInput, { label: "Profile Icon:", value: state?.icon || "", onChange: (value) => handleFieldChange("icon", value), placeholder: "BuilderIcon.jpg", fileSize: "200KB" }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Description:" }), _jsx(Textarea, { className: "w-full", defaultValue: state?.description || "", onBlur: (e) => {
+                                            if (e.target.value !== state?.description) {
+                                                handleFieldChange("description", e.target.value);
+                                            }
+                                        }, placeholder: "Tell us about yourself as a builder...", rows: 4, autoExpand: true })] })] }) }), _jsx(ToastContainer, { position: "bottom-right" })] }) }));
+}

package/dist/editors/builder-profile/index.d.ts

@@ -0,0 +1,3 @@
+import type { EditorModule } from "document-model";
+export declare const module: EditorModule;
+//# sourceMappingURL=index.d.ts.map

package/dist/editors/builder-profile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editors/builder-profile/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,eAAO,MAAM,MAAM,EAAE,YASpB,CAAC"}

package/dist/editors/builder-profile/index.js

@@ -0,0 +1,11 @@
+import Editor from "./editor.js";
+export const module = {
+    Component: Editor,
+    documentTypes: ["powerhouse/builder-profile"],
+    config: {
+        id: "builder-profile-editor",
+        disableExternalControls: true,
+        documentToolbarEnabled: true,
+        showSwitchboardLink: true,
+    },
+};

package/dist/editors/hooks/useBuilderProfileDocument.d.ts

@@ -0,0 +1,4 @@
+import type { BuilderProfileDocument } from "../../document-models/builder-profile/index.js";
+export declare function useBuilderProfileDocument(documentId: string | null | undefined): never[] | [BuilderProfileDocument, import("@powerhousedao/reactor-browser").DocumentDispatch<import("../../document-models/builder-profile/gen/actions.js").UpdateProfileAction>];
+export declare function useSelectedBuilderProfileDocument(): never[] | [BuilderProfileDocument, import("@powerhousedao/reactor-browser").DocumentDispatch<import("../../document-models/builder-profile/gen/actions.js").UpdateProfileAction>];
+//# sourceMappingURL=useBuilderProfileDocument.d.ts.map

package/dist/editors/hooks/useBuilderProfileDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBuilderProfileDocument.d.ts","sourceRoot":"","sources":["../../../editors/hooks/useBuilderProfileDocument.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,sBAAsB,EACvB,MAAM,gDAAgD,CAAC;AAExD,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,qLAMtC;AAED,wBAAgB,iCAAiC,sLAGhD"}

package/dist/editors/hooks/useBuilderProfileDocument.js

@@ -0,0 +1,8 @@
+import { useDocumentOfType, useSelectedDocumentId, } from "@powerhousedao/reactor-browser";
+export function useBuilderProfileDocument(documentId) {
+    return useDocumentOfType(documentId, "powerhouse/builder-profile");
+}
+export function useSelectedBuilderProfileDocument() {
+    const selectedDocumentId = useSelectedDocumentId();
+    return useBuilderProfileDocument(selectedDocumentId);
+}

package/dist/editors/index.d.ts

@@ -0,0 +1,3 @@
+export {};
+export { module as BuilderProfile } from "./builder-profile/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/editors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../editors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC;AACV,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/editors/index.js

@@ -0,0 +1 @@
+export { module as BuilderProfile } from "./builder-profile/index.js";

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Manifest } from "document-model";
+export declare const manifest: Manifest;
+export declare const documentModels: import("document-model").DocumentModelModule<import("./document-models/builder-profile/gen/ph-factories.js").BuilderProfilePHState>[];
+export declare const editors: import("document-model").EditorModule[];
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK1C,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,uIAAuC,CAAC;AACnE,eAAO,MAAM,OAAO,yCAAgC,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+import manifestJson from "./powerhouse.manifest.json" with { type: "json" };
+import * as documentModelsExports from './document-models/index.js';
+import * as editorsExports from './editors/index.js';
+export const manifest = manifestJson;
+export const documentModels = Object.values(documentModelsExports);
+export const editors = Object.values(editorsExports);

package/dist/powerhouse.manifest.json

@@ -0,0 +1,27 @@
+{
+    "name": "builder-profile",
+    "description": "A place to handle all builder profile related info",
+    "category": "Project Management",
+    "publisher": {
+        "name": "Powerhouse",
+        "url": "https://powerhouse.inc/"
+    },
+    "documentModels": [
+        {
+            "id": "powerhouse/builder-profile",
+            "name": "Builder Profile"
+        }
+    ],
+    "editors": [
+        {
+            "id": "builder-profile-editor",
+            "name": "Builder Profile Editor",
+            "documentTypes": [
+                "powerhouse/builder-profile"
+            ]
+        }
+    ],
+    "apps": [],
+    "subgraphs": [],
+    "importScripts": []
+}

package/dist/processors/index.d.ts

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

package/dist/processors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../processors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/dist/processors/index.js

@@ -0,0 +1 @@
+export {};