@alpaca-editor/core 1.0.3902 → 1.0.3904

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

@@ -26,11 +26,8 @@ export function ComponentTypeSelector({
   const [availableComponentTypes, setAvailableComponentTypes] = useState<
     string[]
   >([]);
-  const [isSettingsPanelCollapsed, setIsSettingsPanelCollapsed] =
-    useState(true);
   const [preselectedTypes, setPreselectedTypes] = useState<string[]>([]);
   const [searchFilter, setSearchFilter] = useState<string>("");
-  const contentRef = useRef<HTMLDivElement>(null);
 
   // Ensure selectedComponentTypes is always an array
   useEffect(() => {
@@ -175,7 +172,7 @@ export function ComponentTypeSelector({
     uniqueTypes: string[],
     stepPreselectedTypes: string[],
   ) => {
-    // Initialize selected types
+    // Initialize selected types from data (parent component should have already initialized this)
     if (
       data.selectedComponentTypes &&
       Array.isArray(data.selectedComponentTypes)
@@ -184,29 +181,16 @@ export function ComponentTypeSelector({
       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,
-      }));
+      setSelectedComponentTypes(validSelectedTypes);
     } else {
-      // Default to selecting all component types
-      setSelectedComponentTypes(uniqueTypes);
-      // Update data for persistence
-      setData((prev: WizardData) => ({
-        ...prev,
-        selectedComponentTypes: uniqueTypes,
-      }));
+      // Fallback initialization if parent didn't handle it
+      const initialSelection =
+        stepPreselectedTypes.length > 0 ? stepPreselectedTypes : uniqueTypes;
+      setSelectedComponentTypes(initialSelection);
+      setData({
+        ...data,
+        selectedComponentTypes: initialSelection,
+      });
     }
   };
 
@@ -254,242 +238,238 @@ export function ComponentTypeSelector({
   }, [schema, step]);
 
   return (
-    <div className="mt-3 pb-3">
-      <div className="mb-2 flex items-center justify-between">
-        <div>
-          <h3 className="text-sm font-medium">Layout Generation Settings</h3>
-          <div className="text-xs text-gray-500">
-            {selectedComponentTypes &&
-              Array.isArray(selectedComponentTypes) &&
-              selectedComponentTypes.length > 0 &&
-              `${selectedComponentTypes.length} component types`}
-            {(!selectedComponentTypes ||
-              !Array.isArray(selectedComponentTypes) ||
-              selectedComponentTypes.length === 0) &&
-              "Configure what the AI will use to generate the layout"}
-          </div>
-        </div>
-        <button
-          onClick={() => setIsSettingsPanelCollapsed(!isSettingsPanelCollapsed)}
-          className="flex h-6 w-6 items-center justify-center rounded bg-gray-200 p-1 text-gray-700 transition-colors duration-200 hover:bg-gray-300"
-          title={
-            isSettingsPanelCollapsed ? "Expand settings" : "Collapse settings"
-          }
-          aria-expanded={!isSettingsPanelCollapsed}
-        >
-          <svg
-            className={`h-4 w-4 transition-transform duration-300 ease-in-out ${
-              isSettingsPanelCollapsed ? "rotate-0" : "rotate-180"
-            }`}
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
-        </button>
+    <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
-        ref={contentRef}
-        className={`overflow-hidden transition-all duration-300 ease-in-out ${
-          isSettingsPanelCollapsed
-            ? "max-h-0 opacity-0"
-            : "max-h-[1000px] opacity-100"
-        }`}
-        style={{
-          transitionProperty: "max-height, opacity",
-        }}
-      >
-        <div className="pt-2">
-          <div className="mb-2">
-            <input
-              type="text"
-              value={searchFilter}
-              onChange={(e) => setSearchFilter(e.target.value)}
-              placeholder="Search components and placeholders..."
-              className="w-full rounded border border-gray-300 px-3 py-1 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
-            />
+      <div className="mb-3 flex flex-col gap-3">
+        {/* Component Types Section */}
+        <div className="min-w-0 flex-1 rounded border border-gray-200 bg-white p-2">
+          <div className="mb-2 flex items-center justify-between">
+            <h4 className="text-sm font-bold">Component Types</h4>
+            <span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-500">
+              {selectedComponentTypes && Array.isArray(selectedComponentTypes)
+                ? selectedComponentTypes.length
+                : 0}{" "}
+              of {availableComponentTypes.length} selected
+            </span>
           </div>
 
-          <div className="mb-3 flex flex-col gap-3">
-            {/* Component Types Section */}
-            <div className="min-w-0 flex-1 rounded border border-gray-200 bg-white p-2">
-              <div className="mb-2 flex items-center justify-between">
-                <h4 className="text-sm font-bold">Component Types</h4>
-                <span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-500">
-                  {selectedComponentTypes &&
-                  Array.isArray(selectedComponentTypes)
-                    ? selectedComponentTypes.length
-                    : 0}{" "}
-                  of {availableComponentTypes.length} selected
-                </span>
-              </div>
-
-              {/* Selected component tags */}
-              <div className="mb-2">
-                <div className="mb-2 flex flex-wrap gap-1">
-                  {selectedComponentTypes &&
+          {/* 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.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>
+                  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-4 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">
+                            <svg
+                              className="h-5 w-5 text-gray-400"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M4 6h16M4 10h16M4 14h16M4 18h16"
+                              />
+                            </svg>
+                            <h3 className="font-medium 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="text-xs text-gray-500 italic">
-                      No component types selected
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Component list */}
-              <div
-                className={`mb-2 max-h-28 overflow-y-auto rounded border border-gray-200 bg-white p-1 ${
-                  filteredComponentTypes.length === 0
-                    ? "flex items-center justify-center"
-                    : ""
-                }`}
-              >
-                {filteredComponentTypes.length > 0 ? (
-                  <div className="grid grid-cols-3 gap-1">
-                    {filteredComponentTypes.map((type) => {
-                      const isSelected =
-                        selectedComponentTypes &&
-                        Array.isArray(selectedComponentTypes) &&
-                        selectedComponentTypes.includes(type);
-                      const isPreselected = preselectedTypes.includes(type);
-                      return (
-                        <label
-                          key={type}
-                          className={`flex cursor-pointer items-center rounded-md border p-1 text-sm ${
+                      <div className="ml-4 flex-shrink-0">
+                        <div
+                          className={`flex h-6 w-6 items-center justify-center rounded-full border-2 ${
                             isSelected
-                              ? isPreselected
-                                ? "border-green-200 bg-green-50 text-green-700"
-                                : "border-blue-200 bg-blue-50 text-blue-700"
-                              : isPreselected
-                                ? "border-green-200 bg-green-50/30 text-green-700/70 hover:bg-green-50/50"
-                                : "border-transparent hover:bg-gray-100"
+                              ? "border-theme-secondary bg-theme-secondary"
+                              : "border-gray-300 bg-white"
                           }`}
                         >
-                          <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"
+                          {isSelected && (
+                            <svg
+                              className="h-3 w-3 text-white"
+                              fill="currentColor"
+                              viewBox="0 0 20 20"
                             >
-                              ★
-                            </span>
+                              <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>
                           )}
-                        </label>
-                      );
-                    })}
-                  </div>
-                ) : (
-                  <div className="p-4 text-sm text-gray-500">
-                    {searchFilter
-                      ? "No matching component types found"
-                      : "No component types available"}
+                        </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>
-              {/* Generate button and selection summary - always visible */}
-              <div className="flex w-full gap-2">
-                {/* Use recommended buttons - only show if not collapsed or if none are selected */}
-                {!isSettingsPanelCollapsed ||
-                  (selectedComponentTypes &&
-                    Array.isArray(selectedComponentTypes) &&
-                    selectedComponentTypes.length === 0 &&
-                    preselectedTypes.length > 0) || (
-                    <div className="flex gap-1">
-                      {preselectedTypes.length > 0 && (
-                        <button
-                          onClick={() => {
-                            setSelectedComponentTypes(preselectedTypes);
-                            setData({
-                              ...data,
-                              selectedComponentTypes: preselectedTypes,
-                            });
-                          }}
-                          disabled={
-                            selectedComponentTypes &&
-                            Array.isArray(selectedComponentTypes) &&
-                            preselectedTypes.length ===
-                              selectedComponentTypes.length &&
-                            preselectedTypes.every((type) =>
-                              selectedComponentTypes.includes(type),
-                            )
-                          }
-                          className="flex-1 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>
+          {/* 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`;
+}