@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,454 +0,0 @@
-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

@@ -1,193 +0,0 @@
-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>
-    </>
-  );
-}