@parhelia/page-wizard 0.1.11004 → 0.1.11005

package/dist/dist/steps/ComponentTypesSelector.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+// Component Type and Placeholder Selection UI
+export function ComponentTypeSelector({ selectedComponentTypes, setSelectedComponentTypes, schema, data, setData, step, availableComponentTypes, }) {
+    const [preselectedTypes, setPreselectedTypes] = useState([]);
+    const [searchFilter, setSearchFilter] = useState("");
+    // Ensure selectedComponentTypes is always an array
+    useEffect(() => {
+        if (!selectedComponentTypes || !Array.isArray(selectedComponentTypes)) {
+            setSelectedComponentTypes([]);
+        }
+    }, [selectedComponentTypes]);
+    // Handle select all component types
+    const handleSelectAllComponents = () => {
+        if (availableComponentTypes) {
+            setSelectedComponentTypes(availableComponentTypes);
+            setData({
+                ...data,
+                selectedComponentTypes: availableComponentTypes,
+            });
+        }
+    };
+    // Handle clear all component types
+    const handleClearAllComponents = () => {
+        setSelectedComponentTypes([]);
+        setData({
+            ...data,
+            selectedComponentTypes: [],
+        });
+    };
+    // Toggle component type selection
+    const toggleComponentType = (type) => {
+        if (!setSelectedComponentTypes) {
+            console.error("setSelectedComponentTypes is not defined");
+            return;
+        }
+        try {
+            // Get the current selected types safely
+            const currentSelected = Array.isArray(selectedComponentTypes)
+                ? selectedComponentTypes
+                : [];
+            // Calculate the new selection
+            const newSelected = currentSelected.includes(type)
+                ? currentSelected.filter((t) => t !== type)
+                : [...currentSelected, type];
+            // Update the state
+            setSelectedComponentTypes(newSelected);
+            // Save selected types to wizard data
+            setData({
+                ...data,
+                selectedComponentTypes: newSelected,
+            });
+        }
+        catch (error) {
+            console.error("Error in toggleComponentType:", error);
+        }
+    };
+    // Filter available components by search term
+    const filteredComponentTypes = availableComponentTypes?.filter((type) => type.toLowerCase().includes(searchFilter.toLowerCase())) || [];
+    // Helper function to extract placeholders from the schema
+    const extractPlaceholders = (items) => {
+        if (!items)
+            return [];
+        if (items && "placeholders" in items) {
+            return items.placeholders.map((placeholder) => placeholder.name);
+        }
+        if (!Array.isArray(items))
+            return [];
+        let placeholders = [];
+        for (const item of items) {
+            // Add the current placeholder name if it exists
+            if ("name" in item && typeof item.name === "string") {
+                placeholders.push(item.name);
+            }
+            // Handle SchemaComponent objects
+            if ("placeholders" in item && Array.isArray(item.placeholders)) {
+                // Extract names from each placeholder
+                item.placeholders.forEach((placeholder) => {
+                    placeholders.push(placeholder.name);
+                    // Recursively process components in this placeholder
+                    if (placeholder.components && Array.isArray(placeholder.components)) {
+                        placeholders = [
+                            ...placeholders,
+                            ...extractPlaceholders(placeholder.components),
+                        ];
+                    }
+                });
+            }
+            // Handle SchemaPlaceholder objects
+            if ("components" in item && Array.isArray(item.components)) {
+                placeholders = [
+                    ...placeholders,
+                    ...extractPlaceholders(item.components),
+                ];
+            }
+        }
+        return placeholders;
+    };
+    // Initialize preselected types from step configuration
+    useEffect(() => {
+        if (availableComponentTypes && step.fields["preselectedComponents"]) {
+            // Parse preselected components from step if available
+            const stepPreselectedTypes = step.fields["preselectedComponents"]
+                .split(/[,\n\r]+/)
+                .map((type) => type.trim())
+                .filter((type) => type && availableComponentTypes.includes(type));
+            setPreselectedTypes(stepPreselectedTypes);
+        }
+    }, [availableComponentTypes, step]);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "mb-2", children: _jsx("input", { type: "text", value: searchFilter, onChange: (e) => setSearchFilter(e.target.value), placeholder: "Search components...", className: "focus:ring-theme-secondary w-full rounded border border-gray-300 px-3 py-1 text-sm focus:ring-1 focus:outline-none" }) }), _jsx("div", { className: "mb-3 flex flex-col gap-3 py-2", children: _jsxs("div", { className: "min-w-0 flex-1 rounded", children: [_jsx("div", { className: "mb-2 flex items-center justify-between", children: _jsx("h4", { className: "text-sm", children: "Component Types" }) }), _jsx("div", { className: `mb-2 max-h-96 space-y-2 overflow-y-auto ${filteredComponentTypes.length === 0
+                                ? "flex items-center justify-center"
+                                : ""}`, children: filteredComponentTypes.length > 0 ? (filteredComponentTypes.map((type) => {
+                                const isSelected = selectedComponentTypes &&
+                                    Array.isArray(selectedComponentTypes) &&
+                                    selectedComponentTypes.includes(type);
+                                const isPreselected = preselectedTypes.includes(type);
+                                // Generate a description for each component type
+                                const getComponentDescription = (componentType) => {
+                                    return `${componentType} component for your page layout`;
+                                };
+                                return (_jsx("div", { className: `relative cursor-pointer rounded-lg border p-2 transition-all ${isSelected
+                                        ? "border-theme-secondary bg-theme-secondary-50"
+                                        : "border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50"}`, onClick: () => toggleComponentType(type), children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "mb-1 flex items-center gap-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-sm text-gray-900", children: type }), isPreselected && (_jsx("span", { className: "text-theme-secondary text-sm", title: "Recommended by template", children: "\u2605" }))] }) }) }), _jsx("div", { className: "ml-4 flex-shrink-0", children: _jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-full border-2 ${isSelected
+                                                        ? "border-theme-secondary bg-theme-secondary"
+                                                        : "border-gray-300 bg-white"}`, children: isSelected && (_jsx("svg", { className: "h-3 w-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }) })] }) }, type));
+                            })) : (_jsx("div", { className: "p-8 text-center text-sm text-gray-500", children: searchFilter
+                                    ? "No matching component types found"
+                                    : "No component types available" })) }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { onClick: handleSelectAllComponents, disabled: selectedComponentTypes &&
+                                        Array.isArray(selectedComponentTypes) &&
+                                        availableComponentTypes &&
+                                        selectedComponentTypes.length === availableComponentTypes.length, className: "flex-1 rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400", children: "Select All" }), _jsx("button", { onClick: handleClearAllComponents, disabled: !selectedComponentTypes ||
+                                        !Array.isArray(selectedComponentTypes) ||
+                                        selectedComponentTypes.length === 0, className: "flex-1 rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400", children: "Clear All" })] }), preselectedTypes.length > 0 && (_jsx("div", { className: "mt-2", children: _jsx("button", { onClick: () => {
+                                    setSelectedComponentTypes(preselectedTypes);
+                                    setData({
+                                        ...data,
+                                        selectedComponentTypes: preselectedTypes,
+                                    });
+                                }, disabled: selectedComponentTypes &&
+                                    Array.isArray(selectedComponentTypes) &&
+                                    preselectedTypes.length === selectedComponentTypes.length &&
+                                    preselectedTypes.every((type) => selectedComponentTypes.includes(type)), className: "w-full rounded bg-green-500 px-2 py-1 text-xs text-white hover:bg-green-600 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400", children: "Use Recommended Components" }) }))] }) })] }));
+}
+// Helper function to get summary for parent card
+export function getComponentTypeSelectorSummary(selectedComponentTypes, availableComponentTypes) {
+    if (!selectedComponentTypes || !Array.isArray(selectedComponentTypes)) {
+        return "Configure what the AI will use to generate the layout";
+    }
+    if (selectedComponentTypes.length === 0) {
+        return "No component types selected";
+    }
+    const total = availableComponentTypes?.length || 0;
+    return `${selectedComponentTypes.length} of ${total} component types selected`;
+}
+//# sourceMappingURL=ComponentTypesSelector.js.map

package/dist/dist/steps/ComponentTypesSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentTypesSelector.js","sourceRoot":"","sources":["../../src/steps/ComponentTypesSelector.tsx"],"names":[],"mappings":"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"}

package/dist/dist/steps/Components.d.ts

@@ -0,0 +1,9 @@
+import { Thumbnail } from "@parhelia/core";
+import { WizardPageComponent, WizardPageModel } from "../PageWizard";
+export declare function Components({ pageModel, onFieldEdited, onComponentRemoved, thumbnails, setInternalState, }: {
+    pageModel?: WizardPageModel;
+    onFieldEdited: () => void;
+    onComponentRemoved: (component: WizardPageComponent) => void;
+    thumbnails: Thumbnail[];
+    setInternalState: (state: any) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/dist/steps/Components.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEditContext, SimpleIconButton } from "@parhelia/core";
+import { FieldEditor } from "./FieldEditor";
+import React from "react";
+import { X } from "lucide-react";
+export function Components({ pageModel, onFieldEdited, onComponentRemoved, thumbnails, setInternalState, }) {
+    const editContext = useEditContext();
+    if (!pageModel)
+        return _jsx("div", { children: "No layout generated yet" });
+    // Simplified component to only render component hierarchy
+    const SimpleLayoutItem = ({ components, depth = 0, }) => {
+        if (!components)
+            return null;
+        // Generate a random pastel background color based on component type
+        const getColorForType = (type) => {
+            // Simple hash function to generate consistent colors for the same type
+            const hash = type
+                .split("")
+                .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+            const hue = hash % 360;
+            return `hsl(${hue}, 70%, 90%)`;
+        };
+        const getThumbnailUrl = (mediaId) => {
+            if (!thumbnails)
+                return;
+            return thumbnails.find((thumbnail) => thumbnail.id === mediaId)?.thumbUrl;
+        };
+        const getImage = (field) => {
+            const url = getThumbnailUrl(field.value);
+            if (url) {
+                return _jsx("img", { src: url, alt: field.name, className: "mb-2" });
+            }
+            return field.value;
+        };
+        // Handle component with placeholders
+        const renderComponent = (component, collection) => {
+            const indent = depth * 20;
+            const componentType = component.type || "Unknown";
+            const borderColor = component.type
+                ? getColorForType(componentType)
+                : "#f0f0f0";
+            return (_jsxs("div", { className: "relative", style: {
+                    marginBottom: "8px",
+                    marginLeft: indent,
+                }, children: [_jsx("div", { className: "absolute top-0 right-0", children: _jsx(SimpleIconButton, { icon: _jsx(X, { size: 14 }), label: "Remove", onClick: () => {
+                                // Remove component from its collection
+                                const index = collection.findIndex((c) => c.id === component.id);
+                                if (index !== -1) {
+                                    collection.splice(index, 1);
+                                }
+                                onComponentRemoved(component);
+                            } }) }), _jsxs("div", { className: "mb-2 rounded-md border-2 bg-white px-2 py-1", style: {
+                            borderColor,
+                        }, children: [_jsxs("div", { className: "mb-2", children: [_jsx("span", { className: "text-gray-600", children: component.type }), ":", " ", component.name] }), _jsx("div", { className: "text-xs text-gray-500", children: component.fields?.map((field, index) => field.type === "Picture" || field.type === "Image" ? (_jsxs("div", { className: "cursor-pointer", onClick: async () => {
+                                        const currentImage = await editContext?.itemsRepository.getItem({
+                                            id: field.value,
+                                            language: "en",
+                                            version: 1,
+                                        });
+                                        const selectedImageId = await editContext?.selectMedia({
+                                            selectedIdPath: currentImage?.idPath || "",
+                                            mode: "images",
+                                        });
+                                        if (selectedImageId) {
+                                            const newImage = await editContext?.itemsRepository.getItem({
+                                                id: selectedImageId,
+                                                language: "en",
+                                                version: 1,
+                                            });
+                                            const newThumb = {
+                                                id: newImage?.id || "",
+                                                name: newImage?.name || "",
+                                                thumbUrl: newImage?.thumbnail || "",
+                                                previewUrl: newImage?.thumbnail || "",
+                                            };
+                                            field.value = selectedImageId;
+                                            setInternalState((state) => ({
+                                                ...state,
+                                                thumbnails: [...(state.thumbnails || []), newThumb],
+                                            }));
+                                            onFieldEdited();
+                                        }
+                                    }, children: [_jsxs("div", { className: "font-bold text-gray-900", children: [field.name, ":"] }), _jsx("div", { children: getImage(field) })] }, index)) : (_jsx(FieldEditor, { field: field, onFieldEdited: onFieldEdited }, index))) })] }), component.children && (_jsx(SimpleLayoutItem, { components: component.children, depth: depth + 1 }))] }, component.id));
+        };
+        return components.map((component, index) => (_jsx(React.Fragment, { children: renderComponent(component, components) }, component.id || index)));
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "relative w-full flex-1", children: _jsx("div", { className: "absolute inset-0 overflow-y-auto", children: pageModel ? (_jsx(SimpleLayoutItem, { components: pageModel.components })) : (_jsx("div", { children: "No layout generated yet" })) }) }) }));
+}
+//# sourceMappingURL=Components.js.map

package/dist/dist/steps/Components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Components.js","sourceRoot":"","sources":["../../src/steps/Components.tsx"],"names":[],"mappings":"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"}

package/dist/dist/steps/ContentStep.d.ts

@@ -0,0 +1,2 @@
+import type { StepComponentProps } from "../types";
+export declare function ContentStep({ wizard, step, parentItem, pageModel, setPageModel, data, setData, internalState, setInternalState, setStepCompleted, }: StepComponentProps): import("react/jsx-runtime").JSX.Element | "No parent item";