@akinon/pz-similar-products 1.92.0-rc.20 → 1.92.0-rc.21

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-similar-products
 
+## 1.92.0-rc.21
+
+### Minor Changes
+
+- d99a6a7: ZERO-3457: Fixed the settings prop and made sure everything is customizable.
+
 ## 1.92.0-rc.20
 
 ### Minor Changes

package/README.md

@@ -44,11 +44,12 @@
 - [Modern Pagination with Progress](#markdown-header-modern-pagination-with-progress)
 - [Advanced Modal with Custom Header & Controls](#markdown-header-advanced-modal-with-custom-header-controls)
 - [Complete Brand Theme Integration](#markdown-header-complete-brand-theme-integration)
+- [Advanced Component Customization](#markdown-header-advanced-component-customization)
 
 ### 📖 Styling Reference
 
-- [Available Style Targets (40+ options)](#markdown-header-available-style-targets-40-options)
-- [Available Render Functions (25+ options)](#markdown-header-available-render-functions-25-options)
+- [Available Style Targets (50+ options)](#markdown-header-available-style-targets-50-options)
+- [Available Render Functions (30+ options)](#markdown-header-available-render-functions-30-options)
 
 ### ✅ Best Practices
 
@@ -65,7 +66,7 @@
 - **✂️ Image Cropping**: Built-in cropping functionality with manual confirmation for precise searches
 - **🎛️ Advanced Filtering**: Dynamic facet-based filtering system
 - **📄 Multiple Pagination Modes**: Traditional pagination, load more button, and infinite scroll
-- **🎨 Granular Customization**: 40+ style targets and 25+ render points
+- **🎨 Granular Customization**: 50+ style targets and 30+ render points
 - **📱 Mobile Responsive**: Optimized for all device sizes
 - **⚡ Performance Optimized**: Lazy loading and efficient rendering
 - **🔧 TypeScript**: Full TypeScript support with detailed type definitions
@@ -174,49 +175,147 @@ interface SimilarProductsSettings {
   loadMoreThreshold?: number; // Pixels from bottom for auto load (default: 100)
   maxPagesLoadMore?: number; // Maximum pages to load in load-more mode
 
-  // 40+ granular style targets
+  // 50+ granular style targets
   customStyles?: {
     // Main components
     modal?: string;
+    modalContent?: string; // NEW: Grid container
     filterSidebar?: string;
     resultsGrid?: string;
+    resultsContainer?: string; // NEW: Results wrapper
+    imageSearchModal?: string;
 
-    // Deep nested elements
+    // Active filters
+    activeFiltersContainer?: string;
+    activeFiltersWrapper?: string; // NEW: Filters wrapper
+    activeFilterTag?: string;
+    activeFilterTagButton?: string;
+
+    // Controls section
+    controlsContainer?: string;
+    controlsInner?: string; // NEW: Controls inner wrapper
+    controlsLeft?: string; // NEW: Left controls (count, filter)
+    controlsRight?: string; // NEW: Right controls (sort)
+    itemCount?: string;
+    sortDropdown?: string;
+    filterToggleButton?: string;
+
+    // Filter sidebar mobile
+    filterSidebarMobileHeader?: string;
+    filterSidebarMobileTitle?: string; // NEW: Mobile title
+    filterSidebarMobileCloseButton?: string; // NEW: Mobile close button
+    filterSidebarMobileCounter?: string; // NEW: Mobile counter wrapper
+    filterSidebarMobileCounterText?: string; // NEW: Mobile counter text
+    filterGroup?: string;
+    filterGroupTitle?: string;
+    filterGroupContent?: string;
+    filterItem?: string;
+    filterItemInput?: string;
+    filterItemLabel?: string;
+    filterItemCount?: string;
+
+    // Image section
+    imageSection?: string;
+    imageContainer?: string;
+    imageWrapper?: string;
+    cropButton?: string;
+    tickButton?: string;
+    uploadButton?: string;
+    resetButton?: string;
+    errorMessage?: string;
+    cropControls?: string;
+
+    // Products grid
+    gridContainer?: string;
     productItem?: string;
+    productImageWrapper?: string;
     productImage?: string;
+    productInfo?: string;
     productTitle?: string;
     productPrice?: string;
+    productPriceContainer?: string; // NEW: Price wrapper
+    productOldPrice?: string;
+
+    // Pagination & load more
+    pagination?: string;
+    paginationContainer?: string;
+    paginationInfo?: string;
     paginationButton?: string;
+    paginationButtonActive?: string;
+    paginationButtonDisabled?: string;
+    paginationPrevious?: string;
+    paginationNext?: string;
     loadMoreButton?: string;
     loadMoreContainer?: string;
-    activeFilterTag?: string;
-    filterGroup?: string;
-    imageSection?: string;
+
+    // Loading & empty states
     loadingSpinner?: string;
-    // ... see examples for complete list
+    loadingOverlay?: string;
+    emptyState?: string;
+    emptyStateInner?: string; // NEW: Empty state inner wrapper
+    emptyStateIcon?: string;
+    emptyStateText?: string;
+
+    // Image search modal
+    imageSearchContent?: string; // NEW: Search modal grid
+    imageSearchUploadSection?: string; // NEW: Upload section
+    imageSearchUploadTitle?: string; // NEW: Upload title
+    imageSearchUploadArea?: string; // NEW: Drag & drop area
+    imageSearchUploadButton?: string; // NEW: Upload button
+    imageSearchTipsSection?: string; // NEW: Tips section
+    imageSearchTipsTitle?: string; // NEW: Tips title
+    imageSearchTipsList?: string; // NEW: Tips list
+    imageSearchTipsItem?: string; // NEW: Individual tip
+    imageSearchModalOverlay?: string; // NEW: Image search modal overlay
+
+    // Mobile active filters
+    mobileActiveFilters?: string;
+    mobileActiveFilterTag?: string;
+    mobileClearAllButton?: string;
   };
 
   // 25+ render functions for granular control
   customRenderers?: {
+    // Component-level renderers (full control)
+    Modal?: React.ComponentType<SimilarProductsModalProps>;
+    FilterSidebar?: React.ComponentType<FilterSidebarProps>;
+    ResultsGrid?: React.ComponentType<ResultsGridProps>;
+    ImageSearchModal?: React.ComponentType<any>;
+
+    // Granular render functions (30+ options)
     render?: {
       modal?: {
+        renderModal?: (props) => React.ReactNode; // Full modal override
         renderHeader?: (props) => React.ReactNode;
         renderActiveFilters?: (props) => React.ReactNode;
         renderControls?: (props) => React.ReactNode;
         renderItemCount?: (props) => React.ReactNode;
+        renderSortDropdown?: (props) => React.ReactNode;
+        renderFilterToggleButton?: (props) => React.ReactNode;
+        // ... see examples for complete list
+      };
+      filterSidebar?: {
+        renderSidebar?: (props) => React.ReactNode; // Full sidebar override
+        renderImageSection?: (props) => React.ReactNode;
+        renderFilterGroup?: (props) => React.ReactNode;
+        renderCropButton?: (props) => React.ReactNode;
+        renderTickButton?: (props) => React.ReactNode;
+        renderUploadButton?: (props) => React.ReactNode;
+        renderResetButton?: (props) => React.ReactNode;
         // ... see examples for complete list
       };
       resultsGrid?: {
+        renderGrid?: (props) => React.ReactNode; // Full grid override
         renderProductItem?: (props) => React.ReactNode;
         renderPagination?: (props) => React.ReactNode;
         renderGridContainer?: (props) => React.ReactNode;
+        renderLoadMore?: (props) => React.ReactNode;
+        renderEmptyState?: (props) => React.ReactNode;
         // ... see examples for complete list
       };
-      filterSidebar?: {
-        renderImageSection?: (props) => React.ReactNode;
-        renderFilterGroup?: (props) => React.ReactNode;
-        renderCropButton?: (props) => React.ReactNode;
-        // ... see examples for complete list
+      imageSearchModal?: {
+        renderModal?: (props) => React.ReactNode; // Full image search modal override
+        renderUploadArea?: (props) => React.ReactNode;
       };
     };
   };
@@ -817,7 +916,8 @@ export function SiteHeader() {
             settings: {
               maxFileSize: 5,
               customStyles: {
-                imageSearchModal: 'max-w-lg rounded-xl'
+                imageSearchModal: 'max-w-lg rounded-xl',
+                imageSearchModalOverlay: 'bg-black/70 backdrop-blur-sm' // Custom overlay
               }
             }
           }}
@@ -1226,9 +1326,160 @@ const hybridSettings = {
 };
 ```
 
+### Advanced Component Customization
+
+The plugin now supports complete component overrides and granular element styling for maximum flexibility:
+
+#### Full Component Override Example
+
+```tsx
+// Custom Image Search Modal Component
+const CustomImageSearchModal = ({
+  isOpen,
+  setIsOpen,
+  fileInputRef,
+  handleImageFileChange,
+  settings
+}) => {
+  return (
+    <Modal open={isOpen} setOpen={setIsOpen} className="custom-search-modal">
+      <div className="custom-grid p-8">
+        <div className="upload-section">
+          <h3 className="text-2xl font-bold mb-4">Upload Your Image</h3>
+          <div className="drag-drop-area border-2 border-dashed border-purple-300 rounded-xl p-12">
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleImageFileChange}
+              accept="image/*"
+              className="hidden"
+            />
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              className="w-full py-6 px-8 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl"
+            >
+              Choose Image
+            </button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+// Using component override
+const advancedComponentSettings = {
+  customRenderers: {
+    // Complete component replacement
+    ImageSearchModal: CustomImageSearchModal,
+
+    // Or use render functions for granular control
+    render: {
+      modal: {
+        renderModal: (props) => (
+          <CustomModal {...props} className="advanced-modal" />
+        )
+      },
+      filterSidebar: {
+        renderSidebar: (props) => (
+          <CustomFilterSidebar {...props} className="advanced-sidebar" />
+        )
+      },
+      resultsGrid: {
+        renderGrid: (props) => (
+          <CustomResultsGrid {...props} className="advanced-grid" />
+        )
+      }
+    }
+  }
+};
+```
+
+#### New Granular Style Targets
+
+```tsx
+const advancedStylingSettings = {
+  customStyles: {
+    // NEW: Modal structure
+    modalContent: 'md:grid-cols-3 gap-8',
+    resultsContainer: 'p-8 md:p-12',
+
+    // NEW: Control sections
+    controlsInner: 'border-none bg-gray-50 rounded-lg p-6',
+    controlsLeft: 'gap-6',
+    controlsRight: 'relative z-20',
+    activeFiltersWrapper: 'mb-6',
+
+    // NEW: Mobile filter sidebar
+    filterSidebarMobileTitle: 'text-3xl font-bold text-purple-600',
+    filterSidebarMobileCloseButton: 'w-10 h-10 bg-red-100 hover:bg-red-200',
+    filterSidebarMobileCounter: 'bg-blue-50 rounded-lg p-4',
+    filterSidebarMobileCounterText: 'text-blue-800 font-semibold',
+
+    // NEW: Product grid enhancements
+    productPriceContainer: 'flex flex-col space-y-2',
+    emptyStateInner: 'py-24',
+
+    // NEW: Image search modal sections
+    imageSearchContent: 'gap-12 md:grid-cols-1',
+    imageSearchUploadSection:
+      'bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-8',
+    imageSearchUploadTitle: 'text-2xl font-bold text-gray-800',
+    imageSearchUploadArea:
+      'border-4 border-dashed border-purple-300 hover:border-purple-500 transition-colors',
+    imageSearchUploadButton:
+      'bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700',
+    imageSearchTipsSection: 'bg-yellow-50 border-l-4 border-yellow-400',
+    imageSearchTipsTitle: 'text-yellow-800 font-bold',
+    imageSearchTipsList: 'text-yellow-700',
+    imageSearchTipsItem: 'hover:text-yellow-900 transition-colors',
+    imageSearchModalOverlay: 'bg-black/60 backdrop-blur-md' // NEW: Custom overlay
+  }
+};
+```
+
+#### Combined Approach Example
+
+```tsx
+// Mix component overrides with granular styling
+const hybridAdvancedSettings = {
+  customRenderers: {
+    // Override only specific components
+    ImageSearchModal: CustomImageSearchModal,
+
+    render: {
+      modal: {
+        renderHeader: ({ title, onClose }) => (
+          <div className="flex items-center justify-between bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-xl">
+            <h2 className="text-2xl font-bold">{title}</h2>
+            <button
+              onClick={onClose}
+              className="w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors"
+            >
+              ✕
+            </button>
+          </div>
+        )
+      }
+    }
+  },
+
+  customStyles: {
+    // Fine-tune specific elements
+    modalContent: 'md:grid-cols-4 gap-6',
+    resultsContainer: 'bg-gray-50 rounded-xl p-8',
+    productItem:
+      'bg-white rounded-lg shadow-sm hover:shadow-xl transition-all duration-300',
+    productPriceContainer:
+      'bg-gradient-to-r from-green-50 to-blue-50 rounded-lg p-3',
+    controlsInner: 'bg-white rounded-lg shadow-sm border p-6'
+  }
+};
+```
+
 ## Complete Styling Reference
 
-### Available Style Targets (40+ options)
+### Available Style Targets (50+ options)
 
 **Modal & Layout:**
 
@@ -1258,26 +1509,41 @@ const hybridSettings = {
 
 - `loadingSpinner`, `loadingOverlay`, `emptyState`, `emptyStateIcon`, `emptyStateText`
 
-### Available Render Functions (25+ options)
+### Available Render Functions (30+ options)
+
+**Component-Level Renderers (Full Control):**
+
+- `Modal` - Complete modal component override
+- `FilterSidebar` - Complete sidebar component override
+- `ResultsGrid` - Complete grid component override
+- `ImageSearchModal` - Complete image search modal override
 
 **Modal Renderers:**
 
-- `renderModal`, `renderHeader`, `renderCloseButton`, `renderActiveFilters`, `renderActiveFilterTag`
+- `renderModal` - Full modal override
+- `renderHeader`, `renderCloseButton`, `renderActiveFilters`, `renderActiveFilterTag`
 - `renderControls`, `renderSortDropdown`, `renderItemCount`, `renderFilterToggleButton`, `renderEmptyState`
 
 **Filter Sidebar Renderers:**
 
-- `renderSidebar`, `renderMobileHeader`, `renderImageSection`, `renderImageContainer`
+- `renderSidebar` - Full sidebar override
+- `renderMobileHeader`, `renderImageSection`, `renderImageContainer`
 - `renderCropButton`, `renderTickButton`, `renderUploadButton`, `renderResetButton`, `renderErrorMessage`
 - `renderFilterGroup`, `renderFilterGroupTitle`, `renderFilterItem`, `renderFilterItemInput`, `renderFilterItemLabel`, `renderFilterItemCount`
 - `renderMobileActiveFilters`
 
 **Results Grid Renderers:**
 
-- `renderGrid`, `renderGridContainer`, `renderProductItem`, `renderProductImage`, `renderProductInfo`, `renderProductTitle`, `renderProductPrice`
+- `renderGrid` - Full grid override
+- `renderGridContainer`, `renderProductItem`, `renderProductImage`, `renderProductInfo`, `renderProductTitle`, `renderProductPrice`
 - `renderPagination`, `renderPaginationButton`, `renderPaginationInfo`, `renderPaginationPrevious`, `renderPaginationNext`, `renderLoadMore`, `renderLoadMoreButton`
 - `renderLoadingState`, `renderLoadingOverlay`, `renderEmptyState`
 
+**Image Search Modal Renderers:**
+
+- `renderModal` - Full image search modal override
+- `renderUploadArea` - Upload section customization
+
 ## Best Practices
 
 ### Performance Optimization

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-similar-products",
-  "version": "1.92.0-rc.20",
+  "version": "1.92.0-rc.21",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {

package/src/hooks/use-similar-products.ts

@@ -58,7 +58,7 @@ export function useSimilarProducts(product: Product) {
       pagination: {
         current_page: 1,
         num_pages: 1,
-        page_size: 1,
+        page_size: 20,
         total_count: 0
       }
     }),
@@ -91,14 +91,6 @@ export function useSimilarProducts(product: Product) {
         searchParams.page = String(page);
       }
 
-      // Test için farklı parametre isimlerini deniyoruz
-      searchParams.page_size = '1';
-      searchParams.pageSize = '1';
-      searchParams.limit = '1';
-      searchParams.per_page = '1';
-      searchParams.size = '1';
-      console.log('🔍 API çağrısı searchParams:', searchParams);
-
       if (facets) {
         facets.forEach((facet) => {
           if (String(facet.key) === 'category_ids') return;
@@ -633,7 +625,21 @@ export function useSimilarProducts(product: Product) {
     if (!file) return;
 
     try {
-      const validation = await validateImageFileWithTranslation(file);
+      let processedFile = file;
+
+      if (file.type === 'image/webp') {
+        try {
+          const { convertWebPToJPEG } = await import(
+            '../utils/image-conversion'
+          );
+          processedFile = await convertWebPToJPEG(file);
+        } catch (error) {
+          console.error('WebP conversion failed:', error);
+          processedFile = file;
+        }
+      }
+
+      const validation = await validateImageFileWithTranslation(processedFile);
       if (!validation.isValid) {
         setFileError(validation.error!);
         return;
@@ -657,7 +663,7 @@ export function useSimilarProducts(product: Product) {
 
       reader.onerror = () =>
         setFileError(t('common.similar_products.errors.file_read_error'));
-      reader.readAsDataURL(file);
+      reader.readAsDataURL(processedFile);
     } catch (error) {
       setFileError(t('common.similar_products.errors.processing_error'));
     }
@@ -815,7 +821,7 @@ export function useSimilarProducts(product: Product) {
           result.facets,
           resultsWithResetSorter.facets
         ),
-        sorters: resultsWithResetSorter.sorters // Reset edilmiş sorter'ları kullan
+        sorters: resultsWithResetSorter.sorters
       };
       updateResultsAndKey(finalResult);
     }

package/src/types/index.ts

@@ -316,20 +316,29 @@ export interface SimilarProductsSettings {
   maxPagesLoadMore?: number;
   customStyles?: {
     modal?: string;
+    modalContent?: string;
     filterSidebar?: string;
     resultsGrid?: string;
     imageSearchModal?: string;
 
     activeFiltersContainer?: string;
+    activeFiltersWrapper?: string;
     activeFilterTag?: string;
     activeFilterTagButton?: string;
 
     controlsContainer?: string;
+    controlsInner?: string;
+    controlsLeft?: string;
+    controlsRight?: string;
     itemCount?: string;
     sortDropdown?: string;
     filterToggleButton?: string;
 
     filterSidebarMobileHeader?: string;
+    filterSidebarMobileTitle?: string;
+    filterSidebarMobileCloseButton?: string;
+    filterSidebarMobileCounter?: string;
+    filterSidebarMobileCounterText?: string;
     filterGroup?: string;
     filterGroupTitle?: string;
     filterGroupContent?: string;
@@ -356,6 +365,7 @@ export interface SimilarProductsSettings {
     productInfo?: string;
     productTitle?: string;
     productPrice?: string;
+    productPriceContainer?: string;
     productOldPrice?: string;
 
     pagination?: string;
@@ -372,12 +382,25 @@ export interface SimilarProductsSettings {
     loadingSpinner?: string;
     loadingOverlay?: string;
     emptyState?: string;
+    emptyStateInner?: string;
     emptyStateIcon?: string;
     emptyStateText?: string;
 
+    imageSearchContent?: string;
+    imageSearchUploadSection?: string;
+    imageSearchUploadTitle?: string;
+    imageSearchUploadArea?: string;
+    imageSearchUploadButton?: string;
+    imageSearchTipsSection?: string;
+    imageSearchTipsTitle?: string;
+    imageSearchTipsList?: string;
+    imageSearchTipsItem?: string;
+    imageSearchModalOverlay?: string;
+
     mobileActiveFilters?: string;
     mobileActiveFilterTag?: string;
     mobileClearAllButton?: string;
+    filterSidebarMobileOverlay?: string;
   };
   customRenderers?: {
     Modal?: React.ComponentType<SimilarProductsModalProps>;

package/src/utils/image-conversion.ts

@@ -0,0 +1,44 @@
+export const convertWebPToJPEG = (file: File): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.onload = () => {
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+
+      if (!ctx) {
+        reject(new Error('Canvas context not available'));
+        return;
+      }
+
+      ctx.drawImage(img, 0, 0);
+
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error('Failed to convert image'));
+            return;
+          }
+
+          const convertedFile = new File(
+            [blob],
+            file.name.replace(/\.webp$/i, '.jpg'),
+            {
+              type: 'image/jpeg',
+              lastModified: Date.now()
+            }
+          );
+
+          resolve(convertedFile);
+        },
+        'image/jpeg',
+        0.9
+      );
+    };
+
+    img.onerror = () => reject(new Error('Failed to load image'));
+    img.src = URL.createObjectURL(file);
+  });
+};

package/src/utils/index.ts

@@ -21,7 +21,12 @@ export const defaultSettings: Required<SimilarProductsSettings> = {
     render: {}
   },
   theme: {},
-  cssVariables: {}
+  cssVariables: {},
+  paginationType: 'pagination',
+  loadMoreText: '',
+  loadMoreStyle: 'button',
+  loadMoreThreshold: 10,
+  maxPagesLoadMore: 20
 };
 
 export function mergeSettings(