@codesinger0/shared-components 1.1.1 → 1.1.2

package/dist/components/products/CategoryList.jsx

@@ -0,0 +1,24 @@
+
+const CategoryList = ({ categories, selectedCategory, onCategorySelect, className = '' }) => (
+    <div className={className}>
+        <h3 className="subtitle font-semibold mb-4">קטגוריות</h3>
+        <div className="space-y-2">
+            {categories.map((category, index) => (
+                <button
+                    key={index}
+                    onClick={() => onCategorySelect(category)}
+                    className={`w-full text-right p-3 rounded-lg transition-all duration-200 ${selectedCategory === category
+                        ? 'text-white'
+                        : 'hover:opacity-80'
+                        }`}
+                    style={selectedCategory === category ? { backgroundColor: 'var(--primary)' } : {}}
+                    dir="rtl"
+                >
+                    <span className="content-text">{category}</span>
+                </button>
+            ))}
+        </div>
+    </div>
+);
+
+export default CategoryList

package/dist/components/products/PriceRangeSlider.jsx

@@ -0,0 +1,162 @@
+import { useState, useEffect } from 'react';
+
+const PriceRangeSlider = ({ min, max, value, onChange, className = '' }) => {
+    const [localValue, setLocalValue] = useState(value);
+
+    useEffect(() => {
+        setLocalValue(value);
+    }, [value]);
+
+    const handleMinChange = (e) => {
+        const newMin = Math.min(Number(e.target.value), localValue[1] - 1);
+        const newValue = [newMin, localValue[1]];
+        setLocalValue(newValue);
+        onChange(newValue);
+    };
+
+    const handleMaxChange = (e) => {
+        const newMax = Math.max(Number(e.target.value), localValue[0] + 1);
+        const newValue = [localValue[0], newMax];
+        setLocalValue(newValue);
+        onChange(newValue);
+    };
+
+    const percentage = (val) => ((val - min) / (max - min)) * 100;
+
+    const minPercent = percentage(localValue[0]);
+    const maxPercent = percentage(localValue[1]);
+
+    return (
+        <div className={`relative ${className}`}>
+            <div className="relative h-6 mb-4">
+                {/* Track */}
+                <div className="absolute top-1/2 w-full h-2 bg-gray-200 rounded transform -translate-y-1/2"></div>
+
+                {/* Active range */}
+                <div
+                    className="absolute top-1/2 h-2 rounded transform -translate-y-1/2"
+                    style={{
+                        insetInlineStart: `${minPercent}%`,
+                        insetInlineEnd: `${100 - maxPercent}%`,
+                        backgroundColor: 'var(--primary)'
+                    }}
+                ></div>
+
+                {/* Min slider - with z-index control */}
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    value={localValue[0]}
+                    onChange={handleMinChange}
+                    className="absolute w-full h-2 bg-transparent appearance-none cursor-pointer min-slider"
+                    style={{
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        zIndex: localValue[0] > max - 100 ? 5 : 3
+                    }}
+                />
+
+                {/* Max slider */}
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    value={localValue[1]}
+                    onChange={handleMaxChange}
+                    className="absolute w-full h-2 bg-transparent appearance-none cursor-pointer max-slider"
+                    style={{
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        zIndex: 4
+                    }}
+                />
+            </div>
+
+            {/* Values display */}
+            <div className="flex justify-between items-center text-sm content-text">
+                <span>₪{localValue[0].toLocaleString()}</span>
+                <span>₪{localValue[1].toLocaleString()}</span>
+            </div>
+
+            <style jsx>{`
+                .min-slider::-webkit-slider-thumb {
+                    appearance: none;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    background: var(--primary);
+                    cursor: pointer;
+                    border: 2px solid white;
+                    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+                    position: relative;
+                    z-index: 10;
+                }
+                
+                .min-slider::-moz-range-thumb {
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    background: var(--primary);
+                    cursor: pointer;
+                    border: 2px solid white;
+                    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+                    position: relative;
+                    z-index: 10;
+                }
+                
+                .max-slider::-webkit-slider-thumb {
+                    appearance: none;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    background: var(--primary);
+                    cursor: pointer;
+                    border: 2px solid white;
+                    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+                    position: relative;
+                    z-index: 10;
+                }
+                
+                .max-slider::-moz-range-thumb {
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    background: var(--primary);
+                    cursor: pointer;
+                    border: 2px solid white;
+                    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+                    position: relative;
+                    z-index: 10;
+                }
+                
+                /* Only show the thumb for each slider */
+                .min-slider {
+                    pointer-events: none;
+                }
+                
+                .min-slider::-webkit-slider-thumb {
+                    pointer-events: auto;
+                }
+                
+                .min-slider::-moz-range-thumb {
+                    pointer-events: auto;
+                }
+                
+                .max-slider {
+                    pointer-events: none;
+                }
+                
+                .max-slider::-webkit-slider-thumb {
+                    pointer-events: auto;
+                }
+                
+                .max-slider::-moz-range-thumb {
+                    pointer-events: auto;
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default PriceRangeSlider

package/dist/components/products/ProductsDisplay.jsx

@@ -0,0 +1,40 @@
+import SubCategorySection from "./SubcategorySection";
+
+const ProductsDisplay = ({
+    productsGroupedBySubCategory,
+    selectedCategory,
+    onProductClick,
+    onAddToCart
+}) => {
+    const subCategoryNames = Object.keys(productsGroupedBySubCategory);
+
+    if (subCategoryNames.length === 0) {
+        return (
+            <div className="glass-card px-12 text-center">
+                <h2 className="lighterTitle mb-4">אין מוצרים זמינים</h2>
+                <p className="content-text">
+                    {selectedCategory
+                        ? `לא נמצאו מוצרים בקטגוריה "${selectedCategory}" בטווח המחירים שנבחר`
+                        : 'בחר קטגוריה כדי לראות מוצרים'
+                    }
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            {subCategoryNames.map(subCategoryName => (
+                <SubCategorySection
+                    key={subCategoryName}
+                    subCategoryName={subCategoryName}
+                    products={productsGroupedBySubCategory[subCategoryName]}
+                    onProductClick={onProductClick}
+                    onAddToCart={onAddToCart}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default ProductsDisplay

package/dist/components/products/ProductsSidebar.jsx

@@ -0,0 +1,46 @@
+import CategoryList from "./CategoryList";
+import PriceRangeSlider from "./PriceRangeSlider";
+
+const ProductsSidebar = ({
+    categories,
+    selectedCategory,
+    onCategorySelect,
+    priceRange,
+    onPriceRangeChange,
+    minPrice,
+    maxPrice,
+    onResetFilters,
+    className = ''
+}) => (
+    <div className={`space-y-6 ${className}`} dir="rtl">
+        {/* Reset Filters Button */}
+        <button
+            onClick={onResetFilters}
+            className="w-full text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors duration-200"
+        >
+            אפס סינונים
+        </button>
+
+        {/* Price Range Filter */}
+        <div className="glass-card p-4">
+            <h3 className="subtitle font-semibold mb-4">סינון לפי מחיר</h3>
+            <PriceRangeSlider
+                min={minPrice}
+                max={maxPrice}
+                value={priceRange}
+                onChange={onPriceRangeChange}
+            />
+        </div>
+
+        {/* Category Selection */}
+        <div className="glass-card p-4">
+            <CategoryList
+                categories={categories}
+                selectedCategory={selectedCategory}
+                onCategorySelect={onCategorySelect}
+            />
+        </div>
+    </div>
+);
+
+export default ProductsSidebar

package/dist/components/products/SubcategorySection.jsx

@@ -0,0 +1,37 @@
+import SmallItemsGrid from "../SmallItemsGrid";
+
+// Subcategory Section Component
+const SubCategorySection = ({ subCategoryName, products, onProductClick, onAddToCart }) => {
+    if (!products || products.length === 0) {
+        return (
+            <div className="mb-2">
+                <div className="p-8 text-center">
+                    <span className='lighterTitle'>
+                        {subCategoryName}
+                    </span>
+                    <p className="content-text">אין מוצרים זמינים בקטגוריה זו</p>
+                </div>
+            </div>
+        );
+    }
+
+    // Transform products to SmallItemsGrid format
+    const gridItems = products;
+
+    return (
+        <div className="mb-2">
+            <SmallItemsGrid
+                isLighter={true}
+                headerText={subCategoryName}
+                items={gridItems}
+                showMoreType="carousel"
+                autoplay={false}
+                onItemClick={onProductClick}
+                onAddToCart={onAddToCart}
+                className="bg-transparent"
+            />
+        </div>
+    );
+};
+
+export default SubCategorySection

package/dist/index.js

@@ -10,7 +10,8 @@ export { default as AdvantagesList } from './components/AdvantagesList'
 export { default as ShoppingCartModal } from './components/cart/ShoppingCartModal'
 export { default as FloatingCartButton } from './components/cart/FloatingCartButton'
 export { default as Menu } from './components/Menu'
-export { default as ContactUs } from './components/ContactUs'
+export { default as ProductsDisplay } from './components/products/ProductsDisplay'
+export { default as ProductsSidebar } from './components/products/ProductsSidebar'
 
 // Modals
 export { default as ItemDetailsModal } from './components/modals/ItemDetailsModal'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [

package/dist/components/ContactUs.jsx

@@ -1,332 +0,0 @@
-import React, { useState } from 'react';
-
-const ContactUs = ({
-    title = "צרו קשר",
-    subtitle = "נשמח לשמוע מכם ולענות על כל שאלה",
-    agreeToTermsText = `אני מסכים/ה לתנאי השימוש ומדיניות הפרטיות של האתר,
-                                        ומאשר/ת קבלת עדכונים שיווקיים באימייל
-                                        (ניתן לבטל בכל עת).`,
-    submitContactMessage = () => { },
-    businessInfo = {},
-    className = ""
-}) => {
-    const [formData, setFormData] = useState({
-        name: '',
-        phone: '',
-        email: '',
-        message: '',
-        agreeToTerms: false
-    });
-
-    const [errors, setErrors] = useState({});
-    const [loading, setLoading] = useState(false);
-    const [submitted, setSubmitted] = useState(false);
-
-    // Handle input changes
-    const handleInputChange = (e) => {
-        const { name, value, type, checked } = e.target;
-        setFormData(prev => ({
-            ...prev,
-            [name]: type === 'checkbox' ? checked : value
-        }));
-
-        // Clear error for this field when user starts typing
-        if (errors[name]) {
-            setErrors(prev => ({ ...prev, [name]: '' }));
-        }
-    };
-
-    // Validation functions
-    const validateEmail = (email) => {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        return emailRegex.test(email);
-    };
-
-    const validatePhone = (phone) => {
-        const phoneRegex = /^[0-9\-\+\(\)\s]{10,}$/;
-        return phoneRegex.test(phone.replace(/\s/g, ''));
-    };
-
-    // Form validation
-    const validateForm = () => {
-        const newErrors = {};
-
-        if (!formData.name.trim()) {
-            newErrors.name = 'שם מלא הוא שדה חובה';
-        }
-
-        if (!formData.phone.trim()) {
-            newErrors.phone = 'מספר טלפון הוא שדה חובה';
-        } else if (!validatePhone(formData.phone)) {
-            newErrors.phone = 'מספר טלפון לא תקין';
-        }
-
-        if (!formData.email.trim()) {
-            newErrors.email = 'כתובת אימייל היא שדה חובה';
-        } else if (!validateEmail(formData.email)) {
-            newErrors.email = 'כתובת אימייל לא תקינה';
-        }
-
-        if (formData.message && formData.message.trim().length > 500) {
-            newErrors.message = 'ההודעה לא יכולה להיות ארוכה מ-500 תווים';
-        }
-
-        if (!formData.agreeToTerms) {
-            newErrors.agreeToTerms = 'יש לאשר את תנאי השימוש והפרטיות';
-        }
-
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
-
-    const handleSubmit = async () => {
-        if (!validateForm()) {
-            return;
-        }
-
-        setLoading(true);
-
-        try {
-            const result = await submitContactMessage({
-                name: formData.name,
-                email: formData.email,
-                phone: formData.phone,
-                message: formData.message || `צרו קשר מהאתר - שם: ${formData.name}, טלפון: ${formData.phone}, אימייל: ${formData.email}. ${formData.agreeToTerms ? 'הסכים לתנאי השימוש.' : ''}`
-            });
-
-            if (result) {
-                console.log('Contact message submitted successfully:', result);
-                setSubmitted(true);
-                // Reset form
-                setFormData({
-                    name: '',
-                    phone: '',
-                    email: '',
-                    message: '',
-                    agreeToTerms: false
-                });
-            } else {
-                setErrors({ submit: 'אירעה שגיאה בשליחת הטופס. אנא נסו שוב.' });
-            }
-
-        } catch (error) {
-            console.error('Submission error:', error);
-            setErrors({ submit: 'אירעה שגיאה בשליחת הטופס. אנא נסו שוב.' });
-        } finally {
-            setLoading(false);
-        }
-    };
-
-
-    // Success message component
-    if (submitted) {
-        return (
-            <section className={`py-16 px-4 bg-main ${className}`} dir="rtl">
-                <div className="max-w-4xl mx-auto">
-                    <div className="glass-card p-8 text-center">
-                        <h3 className="title mb-4">תודה רבה!</h3>
-                        <p className="subtitle mb-6">
-                            הטופס נשלח בהצלחה. נחזור אליכם בהקדם האפשרי.
-                        </p>
-                        <button
-                            onClick={() => setSubmitted(false)}
-                            className="btn-secondary"
-                        >
-                            שלח הודעה נוספת
-                        </button>
-                    </div>
-                </div>
-            </section>
-        );
-    }
-
-    return (
-        <section className={`py-16 px-4 bg-main ${className}`} dir="rtl">
-            <div className="max-w-4xl mx-auto">
-                {/* Header */}
-                <div className="text-center mb-12">
-                    <h2 className="title mb-4">{title}</h2>
-                    <p className="subtitle text-gray-600">{subtitle}</p>
-                </div>
-
-                {/* Contact Form */}
-                <div className="glass-card p-8">
-                    <div className="space-y-4">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            {/* Name Field */}
-                            <div>
-                                <label htmlFor="name" className="block subtitle font-semibold mb-2">
-                                    שם מלא *
-                                </label>
-                                <input
-                                    type="text"
-                                    id="name"
-                                    name="name"
-                                    value={formData.name}
-                                    onChange={handleInputChange}
-                                    className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.name
-                                        ? 'border-red-500 bg-red-50'
-                                        : 'border-gray-300 hover:border-gray-400 focus:border-primary'
-                                        }`}
-                                    placeholder="הכניסו את שמכם המלא"
-                                    dir="rtl"
-                                />
-                                {errors.name && (
-                                    <p className="text-red-500 text-sm mt-2">{errors.name}</p>
-                                )}
-                            </div>
-
-                            {/* Phone Field */}
-                            <div>
-                                <label htmlFor="phone" className="block subtitle font-semibold mb-2">
-                                    מספר טלפון *
-                                </label>
-                                <input
-                                    type="tel"
-                                    id="phone"
-                                    name="phone"
-                                    value={formData.phone}
-                                    onChange={handleInputChange}
-                                    className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.phone
-                                        ? 'border-red-500 bg-red-50'
-                                        : 'border-gray-300 hover:border-gray-400 focus:border-primary'
-                                        }`}
-                                    placeholder="050-1234567"
-                                    dir="ltr"
-                                />
-                                {errors.phone && (
-                                    <p className="text-red-500 text-sm mt-2">{errors.phone}</p>
-                                )}
-                            </div>
-                        </div>
-
-                        {/* Email Field */}
-                        <div>
-                            <label htmlFor="email" className="block subtitle font-semibold mb-2">
-                                כתובת אימייל *
-                            </label>
-                            <input
-                                type="email"
-                                id="email"
-                                name="email"
-                                value={formData.email}
-                                onChange={handleInputChange}
-                                className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.email
-                                    ? 'border-red-500 bg-red-50'
-                                    : 'border-gray-300 hover:border-gray-400 focus:border-primary'
-                                    }`}
-                                placeholder="example@email.com"
-                                dir="ltr"
-                            />
-                            {errors.email && (
-                                <p className="text-red-500 text-sm mt-2">{errors.email}</p>
-                            )}
-                        </div>
-
-                        {/* Message Field */}
-                        <div>
-                            <label htmlFor="message" className="block subtitle font-semibold mb-2">
-                                הודעה (אופציונלי)
-                            </label>
-                            <textarea
-                                id="message"
-                                name="message"
-                                value={formData.message}
-                                onChange={handleInputChange}
-                                rows={4}
-                                maxLength={500}
-                                className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 resize-vertical ${errors.message
-                                        ? 'border-red-500 bg-red-50'
-                                        : 'border-gray-300 hover:border-gray-400 focus:border-primary'
-                                    }`}
-                                placeholder="ספרו לנו מה אתם מחפשים, איך אנחנו יכולים לעזור לכם, או כל דבר אחר שתרצו לשתף איתנו..."
-                                dir="rtl"
-                            />
-                            <div className="flex justify-between items-center mt-1">
-                                {errors.message && (
-                                    <p className="text-red-500 text-sm">{errors.message}</p>
-                                )}
-                                <span className="text-xs text-gray-500 mr-auto">
-                                    {formData.message.length}/500 תווים
-                                </span>
-                            </div>
-                        </div>
-
-
-                        {/* Checkbox Agreement */}
-                        <div className="px-4 rounded-lg">
-                            <label className="flex items-start space-x-3 space-x-reverse cursor-pointer">
-                                <input
-                                    type="checkbox"
-                                    name="agreeToTerms"
-                                    checked={formData.agreeToTerms}
-                                    onChange={handleInputChange}
-                                    className="mt-1 w-5 h-5 text-primary border-2 border-gray-300 rounded focus:ring-primary focus:ring-2 focus:ring-opacity-20"
-                                />
-                                <div className="flex-1">
-                                    <span className="content-text leading-relaxed">
-                                        {agreeToTermsText}
-                                    </span>
-                                </div>
-                            </label>
-                            {errors.agreeToTerms && (
-                                <p className="text-red-500 text-sm mt-2">{errors.agreeToTerms}</p>
-                            )}
-                        </div>
-
-                        {/* Submit Error */}
-                        {errors.submit && (
-                            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-                                {errors.submit}
-                            </div>
-                        )}
-
-                        {/* Submit Button */}
-                        <div className="text-center pt-4">
-                            <button
-                                onClick={handleSubmit}
-                                disabled={loading}
-                                className={`btn-primary text-lg px-8 py-4 inline-flex items-center gap-3 transition-all duration-200 ${loading
-                                    ? 'opacity-50 cursor-not-allowed'
-                                    : 'hover:brightness-90 hover:scale-105'
-                                    }`}
-                            >
-                                {loading ? (
-                                    <>
-                                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
-                                        שולח...
-                                    </>
-                                ) : (
-                                    <>
-                                        שלח הודעה
-                                        <span className="text-xl">→</span>
-                                    </>
-                                )}
-                            </button>
-                        </div>
-                    </div>
-
-                    {/* Contact Info */}
-                    <div className="mt-12 pt-8 border-t border-gray-200">
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
-                            <div>
-                                <h4 className="subtitle font-semibold mb-1">טלפון</h4>
-                                <p className="content-text">{businessInfo.phone}</p>
-                            </div>
-                            <div>
-                                <h4 className="subtitle font-semibold mb-1">אימייל</h4>
-                                <p className="content-text">{businessInfo.email}</p>
-                            </div>
-                            <div>
-                                <h4 className="subtitle font-semibold mb-1">שעות פעילות</h4>
-                                <p className="content-text">{businessInfo.hours}</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default ContactUs;