@alpaca-editor/core 1.0.0

package/src/page-wizard/steps/ComponentTypesSelector.tsx

@@ -0,0 +1,443 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { WizardStep } from "../PageWizard";
+import {
+  PageSchema,
+  SchemaComponent,
+  SchemaPlaceholder,
+  WizardData,
+} from "../PageWizard";
+
+// Component Type and Placeholder Selection UI
+export function ComponentTypeSelector({
+  selectedComponentTypes,
+  setSelectedComponentTypes,
+  schema,
+  data,
+  setData,
+  step,
+}: {
+  selectedComponentTypes?: string[];
+  setSelectedComponentTypes: Dispatch<SetStateAction<string[]>>;
+  schema: PageSchema | string;
+  data: WizardData;
+  setData: (data: WizardData) => void;
+  step: WizardStep;
+}) {
+  const [availableComponentTypes, setAvailableComponentTypes] = useState<
+    string[]
+  >([]);
+  const [isSettingsPanelCollapsed, setIsSettingsPanelCollapsed] =
+    useState(true);
+  const [preselectedTypes, setPreselectedTypes] = useState<string[]>([]);
+  const [searchFilter, setSearchFilter] = useState<string>("");
+
+  // Handle select all component types
+  const handleSelectAllComponents = () => {
+    setSelectedComponentTypes(availableComponentTypes);
+    setData({
+      ...data,
+      selectedComponentTypes: availableComponentTypes,
+    });
+  };
+
+  // Handle clear all component types
+  const handleClearAllComponents = () => {
+    setSelectedComponentTypes([]);
+    setData({
+      ...data,
+      selectedComponentTypes: [],
+    });
+  };
+
+  // Toggle component type selection
+  const toggleComponentType = (type: string) => {
+    setSelectedComponentTypes((prevSelected: string[]) => {
+      const newSelected = prevSelected.includes(type)
+        ? prevSelected.filter((t: string) => t !== type)
+        : [...prevSelected, type];
+
+      // Save selected types to wizard data
+      setData({
+        ...data,
+        selectedComponentTypes: newSelected,
+      });
+
+      return newSelected;
+    });
+  };
+
+  // Filter available components by search term
+  const filteredComponentTypes = availableComponentTypes.filter((type) =>
+    type.toLowerCase().includes(searchFilter.toLowerCase())
+  );
+
+  // Helper function to recursively extract component types
+  const extractComponentTypes = (
+    items: PageSchema | SchemaComponent[]
+  ): string[] => {
+    if (!items || !Array.isArray(items)) return [];
+
+    let types: string[] = [];
+
+    for (const item of items) {
+      // Add the current component type if it exists
+      if ("type" in item) {
+        types.push(item.type);
+      }
+
+      // Process components in placeholders recursively
+      if ("placeholders" in item && Array.isArray(item.placeholders)) {
+        for (const placeholder of item.placeholders) {
+          if (placeholder.components && Array.isArray(placeholder.components)) {
+            types = [
+              ...types,
+              ...extractComponentTypes(placeholder.components),
+            ];
+          }
+        }
+      }
+
+      // Process components directly (for top-level structure)
+      if ("components" in item && Array.isArray(item.components)) {
+        types = [...types, ...extractComponentTypes(item.components)];
+      }
+    }
+
+    return types;
+  };
+
+  // Helper function to extract placeholders from the schema
+  const extractPlaceholders = (
+    items: PageSchema | SchemaComponent[]
+  ): string[] => {
+    if (!items || !Array.isArray(items)) return [];
+
+    let placeholders: string[] = [];
+
+    for (const item of items) {
+      // Add the current placeholder name if it exists
+      if ("name" in item) {
+        placeholders.push(item.name);
+      }
+
+      // Handle SchemaComponent objects
+      if ("placeholders" in item && Array.isArray(item.placeholders)) {
+        // Extract names from each placeholder
+        item.placeholders.forEach((placeholder: SchemaPlaceholder) => {
+          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 selections based on data or preselected values
+  const initializeSelections = (
+    uniqueTypes: string[],
+    stepPreselectedTypes: string[]
+  ) => {
+    // Initialize selected types
+    if (
+      data.selectedComponentTypes &&
+      Array.isArray(data.selectedComponentTypes)
+    ) {
+      // Filter out any types that are no longer available
+      const validSelectedTypes = data.selectedComponentTypes.filter((type) =>
+        uniqueTypes.includes(type)
+      );
+      setSelectedComponentTypes(
+        validSelectedTypes.length > 0
+          ? validSelectedTypes
+          : stepPreselectedTypes.length > 0
+          ? stepPreselectedTypes
+          : uniqueTypes
+      );
+    } else if (stepPreselectedTypes.length > 0) {
+      // Use preselected types from step
+      setSelectedComponentTypes(stepPreselectedTypes);
+      // Update data for persistence
+      setData((prev: WizardData) => ({
+        ...prev,
+        selectedComponentTypes: stepPreselectedTypes,
+      }));
+    } else {
+      // Default to selecting all component types
+      setSelectedComponentTypes(uniqueTypes);
+      // Update data for persistence
+      setData((prev: WizardData) => ({
+        ...prev,
+        selectedComponentTypes: uniqueTypes,
+      }));
+    }
+  };
+
+  // Extract component types and placeholders from wizard schema when available
+  useEffect(() => {
+    if (schema) {
+      try {
+        // Parse schema if it's a string
+        schema =
+          typeof schema === "string"
+            ? (JSON.parse(schema) as PageSchema)
+            : schema;
+
+        // Extract component types
+        const componentTypes = extractComponentTypes(schema);
+
+        // Remove duplicates and sort alphabetically
+        const uniqueTypes = Array.from(
+          new Set(componentTypes)
+        ).sort() as string[];
+
+        setAvailableComponentTypes(uniqueTypes);
+
+        // Parse preselected components from step if available
+        let stepPreselectedTypes: string[] = [];
+        if (step["preselectedComponents"]) {
+          // Split by comma or newline and trim whitespace
+          stepPreselectedTypes = step["preselectedComponents"]
+            .split(/[,\n\r]+/)
+            .map((type: string) => type.trim())
+            .filter((type: string) => type && uniqueTypes.includes(type)); // Only include valid types
+        }
+
+        // Set preselected types for UI differentiation
+        setPreselectedTypes(stepPreselectedTypes);
+
+        // Parse preselected placeholders from step if available
+
+        // Initialize component types and placeholders
+        initializeSelections(uniqueTypes, stepPreselectedTypes);
+      } catch (error) {
+        console.error("Error processing schema:", error);
+      }
+    }
+  }, [schema, step]);
+
+  return (
+    <div className="pb-3 mt-3">
+      <div className="flex justify-between items-center">
+        <div>
+          <h3 className="text-sm font-medium">
+            Layout Generation Settings
+          </h3>
+          <div className="text-xs text-gray-500">
+            {selectedComponentTypes &&
+              selectedComponentTypes.length > 0 &&
+              `${selectedComponentTypes.length} component types`}
+            {selectedComponentTypes &&
+              selectedComponentTypes.length === 0 &&
+              "Configure what the AI will use to generate the layout"}
+          </div>
+        </div>
+        <button
+          onClick={() => setIsSettingsPanelCollapsed(!isSettingsPanelCollapsed)}
+          className="bg-gray-200 text-gray-700 p-1 rounded flex items-center justify-center w-6 h-6 hover:bg-gray-300"
+          title={
+            isSettingsPanelCollapsed ? "Expand settings" : "Collapse settings"
+          }
+          aria-expanded={!isSettingsPanelCollapsed}
+        >
+          {isSettingsPanelCollapsed ? (
+            <span className="text-lg">↓</span>
+          ) : (
+            <span className="text-lg">↑</span>
+          )}
+        </button>
+      </div>
+
+      {!isSettingsPanelCollapsed && (
+        <>
+          <div className="mb-2">
+            <input
+              type="text"
+              value={searchFilter}
+              onChange={(e) => setSearchFilter(e.target.value)}
+              placeholder="Search components and placeholders..."
+              className="w-full px-3 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+          </div>
+
+          <div className="flex flex-col gap-3 mb-3">
+            {/* Component Types Section */}
+            <div className="flex-1 min-w-0 border border-gray-200 rounded p-2 bg-white">
+              <div className="flex justify-between items-center mb-2">
+                <h4 className="text-sm font-bold">Component Types</h4>
+                <span className="text-xs text-gray-500 px-2 py-1 rounded-full bg-gray-200">
+                  {selectedComponentTypes && selectedComponentTypes.length}
+                  of {availableComponentTypes.length} selected
+                </span>
+              </div>
+
+              {/* Selected component tags */}
+              <div className="mb-2">
+                <div className="flex flex-wrap gap-1 mb-2">
+                  {selectedComponentTypes &&
+                  selectedComponentTypes.length > 0 ? (
+                    selectedComponentTypes.map((type) => (
+                      <div
+                        key={type}
+                        className={`px-2 py-1 text-xs rounded-full flex items-center ${
+                          preselectedTypes.includes(type)
+                            ? "bg-green-100 text-green-800"
+                            : "bg-blue-100 text-blue-800"
+                        }`}
+                      >
+                        {type}
+                        <button
+                          onClick={() => toggleComponentType(type)}
+                          className={`ml-1 ${
+                            preselectedTypes.includes(type)
+                              ? "text-green-600 hover:text-green-800"
+                              : "text-blue-600 hover:text-blue-800"
+                          }`}
+                          aria-label={`Remove ${type}`}
+                        >
+                          ×
+                        </button>
+                      </div>
+                    ))
+                  ) : (
+                    <div className="text-xs text-gray-500 italic">
+                      No component types selected
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Component list */}
+              <div
+                className={`max-h-28 overflow-y-auto p-1 bg-white rounded border border-gray-200 mb-2 ${
+                  filteredComponentTypes.length === 0
+                    ? "flex justify-center items-center"
+                    : ""
+                }`}
+              >
+                {filteredComponentTypes.length > 0 ? (
+                  <div className="grid grid-cols-3 gap-1">
+                    {filteredComponentTypes.map((type) => {
+                      const isSelected =
+                        selectedComponentTypes &&
+                        selectedComponentTypes.includes(type);
+                      const isPreselected = preselectedTypes.includes(type);
+                      return (
+                        <label
+                          key={type}
+                          className={`flex items-center cursor-pointer p-1 rounded-md text-sm border ${
+                            isSelected
+                              ? isPreselected
+                                ? "bg-green-50 text-green-700 border-green-200"
+                                : "bg-blue-50 text-blue-700 border-blue-200"
+                              : isPreselected
+                              ? "bg-green-50/30 text-green-700/70 border-green-200 hover:bg-green-50/50"
+                              : "hover:bg-gray-100 border-transparent"
+                          }`}
+                        >
+                          <input
+                            type="checkbox"
+                            checked={isSelected}
+                            onChange={() => toggleComponentType(type)}
+                            className="mr-2"
+                          />
+                          {type}
+                          {isPreselected && (
+                            <span
+                              className="ml-1 text-xs text-green-600"
+                              title="Recommended by template"
+                            >
+                              ★
+                            </span>
+                          )}
+                        </label>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <div className="text-gray-500 text-sm p-4">
+                    {searchFilter
+                      ? "No matching component types found"
+                      : "No component types available"}
+                  </div>
+                )}
+              </div>
+
+              {/* Component type action buttons */}
+              <div className="flex gap-1">
+                <button
+                  onClick={handleSelectAllComponents}
+                  disabled={
+                    selectedComponentTypes &&
+                    selectedComponentTypes.length ===
+                      availableComponentTypes.length
+                  }
+                  className="flex-1 bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs hover:bg-gray-300 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
+                >
+                  Select All
+                </button>
+                <button
+                  onClick={handleClearAllComponents}
+                  disabled={
+                    selectedComponentTypes &&
+                    selectedComponentTypes.length === 0
+                  }
+                  className="flex-1 bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs hover:bg-gray-300 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
+                >
+                  Clear All
+                </button>
+              </div>
+              {/* Generate button and selection summary - always visible */}
+              <div className="w-full flex gap-2">
+                {/* Use recommended buttons - only show if not collapsed or if none are selected */}
+                {!isSettingsPanelCollapsed ||
+                  (selectedComponentTypes &&
+                    selectedComponentTypes.length === 0 &&
+                    preselectedTypes.length > 0) || (
+                    <div className="flex gap-1">
+                      {preselectedTypes.length > 0 && (
+                        <button
+                          onClick={() => {
+                            setSelectedComponentTypes(preselectedTypes);
+                            setData({
+                              ...data,
+                              selectedComponentTypes: preselectedTypes,
+                            });
+                          }}
+                          disabled={
+                            preselectedTypes.length ===
+                              (selectedComponentTypes?.length || 0) &&
+                            preselectedTypes.every((type) =>
+                              selectedComponentTypes?.includes(type)
+                            )
+                          }
+                          className="flex-1 bg-green-500 text-white px-2 py-1 rounded text-xs hover:bg-green-600 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
+                        >
+                          Use Recommended Components
+                        </button>
+                      )}
+                    </div>
+                  )}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/page-wizard/steps/Components.tsx

@@ -0,0 +1,193 @@
+import { useEditContext } from "../../editor/client/editContext";
+import { Thumbnail } from "../../editor/media-selector/Thumbnails";
+import { SimpleIconButton } from "../../editor/ui/SimpleIconButton";
+import {
+  WizardField,
+  WizardPageComponent,
+  WizardPageModel,
+} from "../PageWizard";
+import { FieldEditor } from "./FieldEditor";
+import React from "react";
+
+export function Components({
+  pageModel,
+  onFieldEdited,
+  onComponentRemoved,
+  thumbnails,
+  setInternalState,
+}: {
+  pageModel?: WizardPageModel;
+  onFieldEdited: () => void;
+  onComponentRemoved: (component: WizardPageComponent) => void;
+  thumbnails: Thumbnail[];
+  setInternalState: (state: any) => void;
+}) {
+  const editContext = useEditContext();
+  if (!pageModel) return <div>No layout generated yet</div>;
+
+  // Simplified component to only render component hierarchy
+  const SimpleLayoutItem = ({
+    components,
+    depth = 0,
+  }: {
+    components: WizardPageComponent[];
+    depth?: number;
+  }) => {
+    if (!components) return null;
+
+    // Generate a random pastel background color based on component type
+    const getColorForType = (type: string) => {
+      // 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: string) => {
+      if (!thumbnails) return;
+      return thumbnails.find((thumbnail) => thumbnail.id === mediaId)?.thumbUrl;
+    };
+
+    const getImage = (field: WizardField) => {
+      const url = getThumbnailUrl(field.value);
+      if (url) {
+        return <img src={url} alt={field.name} className="mb-2" />;
+      }
+      return field.value;
+    };
+
+    // Handle component with placeholders
+    const renderComponent = (
+      component: WizardPageComponent,
+      collection: WizardPageComponent[]
+    ) => {
+      const indent = depth * 20;
+      const componentType = component.type || "Unknown";
+      const borderColor = component.type
+        ? getColorForType(componentType)
+        : "#f0f0f0";
+
+      return (
+        <div
+          key={component.id}
+          className="relative"
+          style={{
+            marginBottom: "8px",
+            marginLeft: indent,
+          }}
+        >
+          <div className="absolute top-0 right-0">
+            <SimpleIconButton
+              icon="pi pi-times"
+              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);
+              }}
+            />
+          </div>
+          <div
+            className="mb-2 px-2 py-1 rounded-md bg-white border-2"
+            style={{
+              borderColor,
+            }}
+          >
+            <div className="mb-2">
+              <span className="text-gray-600">{component.type}</span>:{" "}
+              {component.name}
+            </div>
+            <div className="text-xs text-gray-500">
+              {component.fields?.map((field, index) =>
+                field.type === "Picture" || field.type === "Image" ? (
+                  <div
+                    key={index}
+                    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: Thumbnail = {
+                          id: newImage?.id || "",
+                          name: newImage?.name || "",
+                          thumbUrl: newImage?.thumbnail || "",
+                          previewUrl: newImage?.thumbnail || "",
+                        };
+                        field.value = selectedImageId;
+                        setInternalState((state: any) => ({
+                          ...state,
+                          thumbnails: [...(state.thumbnails || []), newThumb],
+                        }));
+                        onFieldEdited();
+                      }
+                    }}
+                  >
+                    <div className="font-bold text-gray-900">
+                      {field.name}:
+                    </div>
+                    <div>{getImage(field)}</div>
+                  </div>
+                ) : (
+                  <FieldEditor
+                    key={index}
+                    field={field}
+                    onFieldEdited={onFieldEdited}
+                  />
+                )
+              )}
+            </div>
+          </div>
+
+          {/* Recursively render child components in placeholders */}
+          {component.children && (
+            <SimpleLayoutItem
+              components={component.children}
+              depth={depth + 1}
+            />
+          )}
+        </div>
+      );
+    };
+
+    return components.map((component, index) => (
+      <React.Fragment key={component.id || index}>
+        {renderComponent(component, components)}
+      </React.Fragment>
+    ));
+  };
+
+  return (
+    <>
+      <div className="relative flex-1 w-full">
+        <div className="overflow-y-auto inset-0 absolute">
+          {pageModel ? (
+            <SimpleLayoutItem components={pageModel.components} />
+          ) : (
+            <div>No layout generated yet</div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}