@codesinger0/shared-components 1.0.46 → 1.0.48

package/dist/components/Menu.jsx

@@ -0,0 +1,224 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { useMediaQuery } from "react-responsive";
+import useScrollLock from '../hooks/useScrollLock';
+
+const Menu = ({
+  // Business info
+  businessInfo = {},
+  
+  // Navigation items
+  navigationItems = [],
+  
+  // Auth/Action buttons component
+  AuthButtonsComponent = null,
+  
+  // User context (for admin check)
+  isAdmin = false,
+  
+  // Customization
+  mobileBreakpoint = 900,
+  logoClassName = '',
+  menuItemClassName = '',
+  sidebarWidth = 'w-80',
+  
+  // Callbacks
+  onMenuItemClick = () => {},
+}) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });
+
+  // Close sidebar when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isSidebarOpen && !event.target.closest('.sidebar') && !event.target.closest('.hamburger')) {
+        setIsSidebarOpen(false);
+      }
+    };
+
+    if (isSidebarOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isSidebarOpen]);
+
+  useScrollLock(isSidebarOpen && isMobile);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const handleMenuItemClick = (item) => {
+    setIsSidebarOpen(false);
+    onMenuItemClick(item);
+  };
+
+  // Desktop Menu Component
+  const DesktopMenu = () => (
+    <nav className="sticky top-0 z-50 bg-menu py-4 border-b-2 border-primary">
+      <div className="w-full px-6 flex justify-between items-center">
+        {/* Left side - Auth buttons */}
+        <div className="flex items-center">
+          {AuthButtonsComponent && <AuthButtonsComponent />}
+        </div>
+
+        {/* Right side - Menu items and logo */}
+        <div className="flex items-center space-x-8 space-x-reverse">
+          {/* Menu items */}
+          <div className="flex items-center space-x-6 space-x-reverse mr-8" dir="rtl">
+            {navigationItems.map((item, index) => (
+              item.adminRoute && !isAdmin ? null : (
+                <Link
+                  key={index}
+                  to={item.href}
+                  onClick={() => handleMenuItemClick(item)}
+                  className={`subtitle font-normal cursor-pointer menu-item-hover px-4 py-2 rounded-md text transition-colors duration-500 ease-in-out hover:text-primary ${menuItemClassName}`}
+                >
+                  {item.label}
+                </Link>
+              )
+            ))}
+          </div>
+
+          {/* Desktop Logo */}
+          <Link to="/" className={`text-primary font-bold text-xl ml-8 ${logoClassName}`}>
+            <div className="text-primary font-bold text-xl ml-8">
+              <div className="relative w-24 h-12 lg:w-32 lg:h-16 overflow-hidden flex items-center justify-center">
+                <img
+                  src={businessInfo.logo}
+                  alt={businessInfo.name}
+                  className="relative z-10 w-full h-full object-contain"
+                  onError={(e) => {
+                    e.target.style.display = 'none';
+                    e.target.nextElementSibling.style.display = 'flex';
+                  }}
+                />
+                {/* Fallback text */}
+                <div
+                  className="relative z-10 w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                  style={{ display: 'none' }}
+                >
+                  {businessInfo.name?.slice(0, 2) || ''}
+                </div>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+
+  // Mobile Menu Component
+  const MobileMenu = () => (
+    <>
+      <nav className="sticky top-0 z-50 bg-menu px-4 py-2">
+        <div className="flex justify-between items-center">
+          {AuthButtonsComponent && <AuthButtonsComponent isMobile={true} />}
+
+          {/* Mobile Logo */}
+          <Link to="/" className={`text-primary font-bold text-xl ${logoClassName}`}>
+            <div className="text-primary font-bold text-lg">
+              <div className="w-25 h-12 overflow-hidden flex items-center justify-center">
+                <img
+                  src={businessInfo.logo}
+                  alt={businessInfo.name}
+                  className="w-full h-full object-contain"
+                  onError={(e) => {
+                    e.target.style.display = 'none';
+                    e.target.nextElementSibling.style.display = 'flex';
+                  }}
+                />
+                {/* Fallback text */}
+                <div
+                  className="w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                  style={{ display: 'none' }}
+                >
+                  {businessInfo.name?.slice(0, 2) || ''}
+                </div>
+              </div>
+            </div>
+          </Link>
+
+          {/* Hamburger button */}
+          <button
+            className="hamburger flex flex-col justify-center items-center w-8 h-8 focus:outline-none text-main"
+            onClick={toggleSidebar}
+            aria-label="תפריט"
+          >
+            <span className={`hamburger-line block w-6 h-0.5 mb-1 ${isSidebarOpen ? 'rotate-45 translate-y-1.5' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+            <span className={`hamburger-line block w-6 h-0.5 mb-1 ${isSidebarOpen ? 'opacity-0' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+            <span className={`hamburger-line block w-6 h-0.5 ${isSidebarOpen ? '-rotate-45 -translate-y-1.5' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+          </button>
+        </div>
+      </nav>
+
+      {/* Overlay + Sidebar (animated) */}
+      <AnimatePresence>
+        {isSidebarOpen && (
+          <>
+            {/* Overlay fade */}
+            <motion.div
+              key="overlay"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 0.5 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="fixed inset-0 bg-black z-40 supports-[height:100dvh]:h-[100dvh]"
+              onClick={() => setIsSidebarOpen(false)}
+              aria-hidden="true"
+            />
+
+            {/* Sidebar spring slide */}
+            <motion.aside
+              key="sidebar"
+              initial={{ x: '100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '100%' }}
+              transition={{ type: 'spring', stiffness: 320, damping: 28, mass: 0.9 }}
+              className={`sidebar fixed top-0 right-0 h-full ${sidebarWidth} bg-white shadow-lg z-50`}
+              role="dialog"
+              aria-label="תפריט צד"
+            >
+              <div className="p-6">
+                {/* Close button */}
+                <div className="flex justify-start mb-8">
+                  <button
+                    onClick={() => setIsSidebarOpen(false)}
+                    className="text-black hover:text-gray-700 text-2xl"
+                    aria-label="סגור תפריט"
+                  >
+                    ×
+                  </button>
+                </div>
+
+                {/* Menu items */}
+                <div className="flex flex-col space-y-3">
+                  {navigationItems.map((item, index) => (
+                    item.adminRoute && !isAdmin ? null : (
+                      <Link
+                        key={index}
+                        to={item.href}
+                        onClick={() => handleMenuItemClick(item)}
+                        className={`text-lg py-3 px-2 text-black text-right ${menuItemClassName}`}
+                      >
+                        {item.label}
+                      </Link>
+                    )
+                  ))}
+                </div>
+              </div>
+            </motion.aside>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+
+  return isMobile ? <MobileMenu /> : <DesktopMenu />;
+};
+
+export default Menu;

package/dist/index.js

@@ -9,6 +9,7 @@ export { default as QAAccordion } from './components/QAAccordion'
 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'
 
 // Modals
 export { default as ItemDetailsModal } from './components/modals/ItemDetailsModal'
@@ -20,4 +21,6 @@ export { CartProvider, useCart } from './context/CartContext'
 
 // Hooks
 export { default as useScrollLock } from './hooks/useScrollLock'
-export { useFirestoreCollection } from './hooks/useFirestoreCollection'
+
+// Utils
+export { default as ScrollToTop } from './utils/ScrollToTop'

package/dist/utils/ScrollToTop.jsx

@@ -0,0 +1,14 @@
+// ScrollToTop.jsx
+import { useLayoutEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export default function ScrollToTop({ behavior = 'auto' }) {
+  const { pathname } = useLocation();
+
+  // useLayoutEffect prevents visible jump because it runs before paint
+  useLayoutEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior });
+  }, [pathname, behavior]);
+
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [
@@ -14,6 +14,8 @@
     "embla-carousel-react": ">=8.6.0",
     "framer-motion": ">=12.23.12",
     "lucide-react": ">=0.263.1",
+    "react-router-dom": ">=7.9.1",
+    "react-responsive": ">=10.0.1",
     "react": ">=18.0.0"
   },
   "repository": {

package/dist/hooks/useFirestoreCollection.js

@@ -1,243 +0,0 @@
-import { useState } from 'react';
-import {
-  collection,
-  doc,
-  getDocs,
-  getDoc,
-  addDoc,
-  setDoc,
-  updateDoc,
-  deleteDoc,
-  orderBy,
-  query,
-  serverTimestamp
-} from 'firebase/firestore';
-
-/**
- * Generic Firestore Collection Hook
- * 
- * @param {string} collectionName - Name of the Firestore collection
- * @param {Function} ModelClass - Constructor function for the model class
- * @param {Object} options - Configuration options
- * @param {string} options.defaultSortField - Default field to sort by (default: 'createdAt')
- * @param {string} options.defaultSortOrder - Default sort order ('asc' or 'desc', default: 'desc')
- * @param {Object} options.errorMessages - Custom error messages for operations
- * @returns {Object} Hook state and methods
- */
-export const useFirestoreCollection = (
-  collectionName,
-  ModelClass,
-  options = {},
-  db
-) => {
-  const {
-    defaultSortField = 'createdAt',
-    defaultSortOrder = 'desc',
-    errorMessages = {}
-  } = options;
-
-  // Default error messages with option to override
-  const defaultErrorMessages = {
-    get: 'קבלת נתונים',
-    getById: 'קבלת פריט',
-    create: 'יצירת פריט',
-    update: 'עדכון פריט',
-    delete: 'מחיקת פריט',
-    notFound: 'פריט לא נמצא',
-    ...errorMessages
-  };
-
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  // Helper function to clear error
-  const clearError = () => setError(null);
-
-  // Helper function to handle errors
-  const handleError = (error, operation) => {
-    console.error(`Error in ${operation}:`, error);
-    setError(`שגיאה ב${defaultErrorMessages[operation] || operation}: ${error.message}`);
-    setLoading(false);
-  };
-
-  // Get all items
-  const getItems = async (sortField = defaultSortField, sortOrder = defaultSortOrder) => {
-    setLoading(true);
-    clearError();
-
-    try {
-      const q = query(
-        collection(db, collectionName), 
-        orderBy(sortField, sortOrder)
-      );
-      const querySnapshot = await getDocs(q);
-
-      const itemsData = [];
-      querySnapshot.forEach((doc) => {
-        itemsData.push(new ModelClass({
-          ...doc.data(),
-          id: doc.id
-        }));
-      });
-
-      setItems(itemsData);
-      setLoading(false);
-      return itemsData;
-    } catch (error) {
-      handleError(error, 'get');
-      return [];
-    }
-  };
-
-  // Get single item by ID
-  const getItem = async (itemId) => {
-    setLoading(true);
-    clearError();
-
-    try {
-      const docRef = doc(db, collectionName, itemId);
-      const docSnap = await getDoc(docRef);
-
-      if (docSnap.exists()) {
-        const itemData = new ModelClass({
-          ...docSnap.data(),
-          id: docSnap.id
-        });
-        setLoading(false);
-        return itemData;
-      } else {
-        const errorMsg = defaultErrorMessages.notFound;
-        setError(errorMsg);
-        setLoading(false);
-        throw new Error(errorMsg);
-      }
-    } catch (error) {
-      handleError(error, 'getById');
-      return null;
-    }
-  };
-
-  // Create new item
-const createItem = async (itemData, customId = null) => {
-    setLoading(true);
-    clearError();
-
-    try {
-      // Create Model instance and validate
-      const item = new ModelClass(itemData);
-      const validation = item.validate();
-
-      if (!validation.isValid) {
-        throw new Error(validation.errors.join(', '));
-      }
-
-      // Prepare item data with timestamps
-      const firestoreData = {
-        ...item.toFirestore(),
-        createdAt: serverTimestamp(),
-        updatedAt: serverTimestamp()
-      };
-
-      let docRef;
-      if (customId) {
-        // Use custom ID
-        docRef = doc(db, collectionName, customId);
-        await setDoc(docRef, firestoreData);
-      } else {
-        // Auto-generate ID
-        docRef = await addDoc(collection(db, collectionName), firestoreData);
-      }
-
-      // Return Model instance
-      const newItem = new ModelClass({
-        id: docRef.id,
-        ...item.toFirestore(),
-        createdAt: firestoreData.createdAt,
-        updatedAt: firestoreData.updatedAt
-      });
-
-      setLoading(false);
-      return newItem;
-    } catch (error) {
-      handleError(error, 'create');
-      return null;
-    }
-  };
-
-  const updateItem = async (itemId, updates) => {
-    setLoading(true);
-    clearError();
-
-    try {
-      // Get existing document first
-      const docRef = doc(db, collectionName, itemId);
-      const existingDoc = await getDoc(docRef);
-
-      if (!existingDoc.exists()) {
-        throw new Error('Document not found');
-      }
-
-      // Merge existing data with updates
-      const existingData = existingDoc.data();
-      const mergedData = { ...existingData, ...updates, id: itemId };
-
-      // Create Model instance and validate
-      const item = new ModelClass(mergedData);
-      const validation = item.validate();
-
-      if (!validation.isValid) {
-        throw new Error(validation.errors.join(', '));
-      }
-
-      // Prepare updates with timestamp
-      const updateData = {
-        ...item.toFirestore(),
-        updatedAt: serverTimestamp()
-      };
-
-      await updateDoc(docRef, updateData);
-      setLoading(false);
-
-      // Return Model instance
-      return new ModelClass({ id: itemId, ...updateData });
-    } catch (error) {
-      handleError(error, 'update');
-      return null;
-    }
-  };
-
-  // Delete item
-  const deleteItem = async (itemId) => {
-    setLoading(true);
-    clearError();
-
-    try {
-      const docRef = doc(db, collectionName, itemId);
-      await deleteDoc(docRef);
-      setLoading(false);
-
-      return true;
-    } catch (error) {
-      handleError(error, 'delete');
-      return false;
-    }
-  };
-
-  return {
-    // State
-    items,
-    loading,
-    error,
-
-    // Actions
-    getItems,
-    getItem,
-    createItem,
-    updateItem,
-    deleteItem,
-
-    // Utility
-    clearError
-  };
-};