@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,454 @@
+import { Dispatch, SetStateAction, useEffect, useState, useRef } 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 [preselectedTypes, setPreselectedTypes] = useState<string[]>([]);
+  const [searchFilter, setSearchFilter] = useState<string>("");
+
+  // Ensure selectedComponentTypes is always an array
+  useEffect(() => {
+    if (!selectedComponentTypes || !Array.isArray(selectedComponentTypes)) {
+      setSelectedComponentTypes([]);
+    }
+  }, [selectedComponentTypes]);
+
+  // 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) => {
+    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: string) => 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 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 from data (parent component should have already initialized this)
+    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);
+    } else {
+      // Fallback initialization if parent didn't handle it
+      const initialSelection =
+        stepPreselectedTypes.length > 0 ? stepPreselectedTypes : uniqueTypes;
+      setSelectedComponentTypes(initialSelection);
+      setData({
+        ...data,
+        selectedComponentTypes: initialSelection,
+      });
+    }
+  };
+
+  // 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.fields["preselectedComponents"]) {
+          // Split by comma or newline and trim whitespace
+          stepPreselectedTypes = step.fields["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="space-y-4">
+      <div className="mb-2">
+        <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"
+        />
+      </div>
+
+      <div className="mb-3 flex flex-col gap-3 py-2">
+        {/* Component Types Section */}
+        <div className="min-w-0 flex-1 rounded">
+          <div className="mb-2 flex items-center justify-between">
+            <h4 className="text-sm font-bold">Component Types</h4>
+          </div>
+
+          {/* Selected component tags */}
+          {/* <div className="mb-2">
+            <div className="mb-2 flex flex-wrap gap-1">
+              {selectedComponentTypes &&
+              Array.isArray(selectedComponentTypes) &&
+              selectedComponentTypes.length > 0 ? (
+                selectedComponentTypes.map((type) => (
+                  <div
+                    key={type}
+                    className={`flex items-center rounded-full px-2 py-1 text-xs ${
+                      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={`mb-2 max-h-96 space-y-2 overflow-y-auto ${
+              filteredComponentTypes.length === 0
+                ? "flex items-center justify-center"
+                : ""
+            }`}
+          >
+            {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: string) => {
+                  return `${componentType} component for your page layout`;
+                };
+
+                return (
+                  <div
+                    key={type}
+                    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)}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="min-w-0 flex-1">
+                        <div className="mb-1 flex items-center gap-2">
+                          <div className="flex items-center gap-2">
+                            <h3 className="text-sm text-gray-900">{type}</h3>
+                            {isPreselected && (
+                              <span
+                                className="text-theme-secondary text-sm"
+                                title="Recommended by template"
+                              >
+                                ★
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        {/* <p className="text-sm leading-relaxed text-gray-600">
+                          {getComponentDescription(type)}
+                        </p> */}
+                      </div>
+                      <div className="ml-4 flex-shrink-0">
+                        <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"
+                          }`}
+                        >
+                          {isSelected && (
+                            <svg
+                              className="h-3 w-3 text-white"
+                              fill="currentColor"
+                              viewBox="0 0 20 20"
+                            >
+                              <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"
+                              />
+                            </svg>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="p-8 text-center text-gray-500">
+                {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 &&
+                Array.isArray(selectedComponentTypes) &&
+                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"
+            >
+              Select All
+            </button>
+            <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"
+            >
+              Clear All
+            </button>
+          </div>
+
+          {/* Use recommended components button */}
+          {preselectedTypes.length > 0 && (
+            <div className="mt-2">
+              <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"
+              >
+                Use Recommended Components
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Helper function to get summary for parent card
+export function getComponentTypeSelectorSummary(
+  selectedComponentTypes?: string[],
+  availableComponentTypes?: string[],
+): string {
+  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`;
+}

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>
+    </>
+  );
+}