@codesinger0/shared-components 1.1.84 → 1.1.85

package/dist/components 2/elements/FixedWidthHeroVideo.jsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+
+const FixedWidthHeroVideo = ({
+  youtubeVideoId = "dQw4w9WgXcQ",
+  useYoutube = false,
+  videoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+}) => {
+  const [viewportSize, setViewportSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const updateViewportSize = () => {
+      setViewportSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    updateViewportSize();
+    window.addEventListener('resize', updateViewportSize);
+    return () => window.removeEventListener('resize', updateViewportSize);
+  }, []);
+
+
+  const youtubeEmbedUrl = `https://www.youtube.com/embed/${youtubeVideoId}?autoplay=1&mute=1&loop=1&playlist=${youtubeVideoId}&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1`;
+
+  return (
+    <div className="w-full">
+
+      {/* Hero Section */}
+      <section className="relative w-full h-screen overflow-hidden flex items-center justify-center">
+        {useYoutube ? (
+          /* YouTube Embed */
+          <iframe
+            className="absolute top-[35%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-0 pointer-events-none"
+            style={{
+              minWidth: '1200px',
+              width: 'max(100vw, 1200px)',
+              aspectRatio: '16/9',
+              minHeight: '120%',
+              border: 'none'
+            }}
+            src={youtubeEmbedUrl}
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+        ) : (
+          /* Direct Video */
+          <video
+            className="absolute top-[35%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-0 pointer-events-none"
+            style={{
+              minWidth: '1200px',
+              width: 'max(100vw, 1200px)',
+              aspectRatio: '16/9',
+              minHeight: '120%',
+              border: 'none'
+            }}
+            autoPlay
+            muted
+            loop
+            playsInline
+          >
+            <source src={videoUrl} type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        )}
+      </section>
+
+      {/* CSS Animation Styles */}
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+// Usage examples:
+// <FixedWidthHeroVideo useYoutube={false} />
+// <FixedWidthHeroVideo useYoutube={false} videoUrl="path/to/your/video.mp4" />
+// <FixedWidthHeroVideo useYoutube={true} youtubeVideoId="dQw4w9WgXcQ" />
+
+export default FixedWidthHeroVideo;

package/dist/components 2/elements/ImageLightbox.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+import useScrollLock from '../../hooks/useScrollLock';
+
+const ImageLightbox = ({
+  images,
+  currentIndex,
+  isOpen,
+  onClose,
+  onNavigate
+}) => {
+  const currentImage = images[currentIndex];
+
+  useScrollLock(isOpen);
+
+  if (!currentImage) return null;
+
+  // Handle both object format {src, alt, title} and string format
+  const imageSrc = typeof currentImage === 'string' ? currentImage : currentImage.src;
+  const imageAlt = typeof currentImage === 'string' ? 'Gallery image' : (currentImage.alt || currentImage.title || 'Gallery image');
+  const imageTitle = typeof currentImage === 'string' ? null : currentImage.title;
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center supports-[height:100dvh]:h-[100dvh]">
+          {/* Backdrop */}
+          <motion.div
+            key="backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="absolute inset-0 bg-black bg-opacity-90"
+            onClick={onClose}
+          />
+
+          {/* Image Container */}
+          <motion.div
+            key="image-container"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ type: "spring", stiffness: 300, damping: 25 }}
+            className="relative max-w-[90vw] max-h-[90vh] z-10"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Main Image */}
+            <img
+              src={imageSrc}
+              alt={imageAlt}
+              className="w-screen h-screen object-contain rounded-lg shadow-2xl"
+            />
+
+            {/* Close Button */}
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
+              aria-label="Close lightbox"
+            >
+              <X size={24} />
+            </button>
+
+            {/* Navigation Arrows */}
+            {images.length > 1 && (
+              <>
+                {currentIndex > 0 && (
+                  <button
+                    onClick={() => onNavigate(currentIndex - 1)}
+                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-3 rounded-full transition-all duration-200"
+                    aria-label="Previous image"
+                  >
+                    <ChevronLeft size={24} />
+                  </button>
+                )}
+
+                {currentIndex < images.length - 1 && (
+                  <button
+                    onClick={() => onNavigate(currentIndex + 1)}
+                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-3 rounded-full transition-all duration-200"
+                    aria-label="Next image"
+                  >
+                    <ChevronRight size={24} />
+                  </button>
+                )}
+              </>
+            )}
+
+            {/* Image Counter */}
+            {images.length > 1 && (
+              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
+                {currentIndex + 1} / {images.length}
+              </div>
+            )}
+
+            {/* Image Title */}
+            {imageTitle && (
+              <div className="absolute bottom-4 right-4 bg-black bg-opacity-50 text-white px-3 py-2 rounded-lg max-w-xs">
+                <div className="text-sm font-medium" dir="rtl">
+                  {imageTitle}
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default ImageLightbox;

package/dist/components 2/elements/RoundButton.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const RoundButton = ({ 
+  children, 
+  onClick, 
+  variant = 'primary', 
+  size = 'medium',
+  className = '',
+  ...props 
+}) => {
+  const baseClasses = 'rounded-full font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
+  
+  const variants = {
+    primary: 'btn-primary',
+    secondary: 'btn-secondary',
+    outline: 'border border-gray-300 text-main hover:ring-2 hover:ring-gray-500 hover:opacity-80'
+  };
+  
+  const sizes = {
+    xs: 'px-3 py-1.5 text-sm',
+    small: 'px-4 py-2 text-sm',
+    medium: 'px-6 py-3 text-base',
+    large: 'px-8 py-4 text-lg'
+  };
+  
+  const buttonClasses = `${baseClasses} ${variants[variant]} ${sizes[size]} ${className}`;
+
+  return (
+    <button
+      className={buttonClasses}
+      onClick={(e) => {
+        onClick?.(e);
+        // remove focus immediately after click
+        e.currentTarget.blur();
+      }}
+      dir="rtl"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default RoundButton;

package/dist/components 2/elements/SmallButton.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const SmallButton = ({ 
+  children, 
+  onClick, 
+  disabled = false,
+  className = '',
+  ...props 
+}) => {
+  return (
+    <button
+      className={`
+        btn-primary content-text px-3 py-1 
+        rounded-md font-medium 
+        transition-all duration-200 
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 
+        hover:brightness-90 
+        disabled:opacity-50 disabled:cursor-not-allowed 
+        ${className}
+      `}
+      onClick={(e) => {
+        onClick?.(e);
+        // remove focus right after click so the ring disappears
+        e.currentTarget.blur();
+      }}
+      disabled={disabled}
+      dir="rtl"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default SmallButton;

package/dist/components 2/elements/Toast.jsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+const variantStyles = {
+  success: 'bg-green-500 text-white',
+  error: 'bg-red-500 text-white',
+  info: 'bg-blue-500 text-white',
+  warning: 'bg-yellow-400 text-black',
+};
+
+const Toast = ({ id, message, onClose, duration = 3000, variant = 'info' }) => {
+  const [show, setShow] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShow(false);
+      setTimeout(() => onClose(id), 300); // match transition duration
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [id, onClose, duration]);
+
+  return (
+    <div
+      className={`fixed bottom-5 left-1/2 transform -translate-x-1/2
+                  px-4 py-2 rounded-lg shadow-lg
+                  text-sm sm:text-base md:text-lg
+                  max-w-xs sm:max-w-sm md:max-w-md
+                  transition-all duration-300
+                  ${variantStyles[variant]}
+                  ${show ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}
+    >
+      {message}
+    </div>
+  );
+};
+
+export default Toast;

package/dist/components 2/elements/VideoLightbox.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import useScrollLock from '../../hooks/useScrollLock';
+
+const VideoLightbox = ({
+  videoUrl,
+  isOpen,
+  onClose,
+  title
+}) => {
+  useScrollLock(isOpen);
+
+  if (!videoUrl) return null;
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center supports-[height:100dvh]:h-[100dvh]">
+          {/* Backdrop */}
+          <motion.div
+            key="backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="absolute inset-0 bg-black bg-opacity-90"
+            onClick={onClose}
+          />
+
+          {/* Video Container */}
+          <motion.div
+            key="video-container"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ type: "spring", stiffness: 300, damping: 25 }}
+            className="relative max-w-[90vw] max-h-[90vh] z-10"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Main Video */}
+            <video
+              src={videoUrl}
+              controls
+              autoPlay
+              className="w-screen h-screen object-contain rounded-lg shadow-2xl"
+              style={{ maxWidth: '90vw', maxHeight: '90vh' }}
+            >
+              Your browser does not support the video tag.
+            </video>
+
+            {/* Close Button */}
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
+              aria-label="Close lightbox"
+            >
+              <X size={24} />
+            </button>
+
+            {/* Video Title */}
+            {title && (
+              <div className="absolute bottom-4 right-4 bg-black bg-opacity-50 text-white px-3 py-2 rounded-lg max-w-xs">
+                <div className="text-sm font-medium" dir="rtl">
+                  {title}
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default VideoLightbox;

package/dist/components 2/modals/ItemDetailsModal.jsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ShoppingCart } from 'lucide-react';
+import SmallButton from '../elements/SmallButton';
+import useScrollLock from '../../hooks/useScrollLock';
+
+const ItemDetailsModal = ({ item, isOpen, onClose, onAddToCart }) => {
+  const [localOpen, setLocalOpen] = useState(Boolean(isOpen));
+  const closingRequestedRef = useRef(false);
+
+  // Sync with external isOpen state
+  useEffect(() => {
+    if (isOpen) {
+      setLocalOpen(true);
+      closingRequestedRef.current = false;
+    } else {
+      setLocalOpen(false);
+    }
+  }, [isOpen]);
+
+  useScrollLock(isOpen);
+
+  // Handle modal close request
+  const requestClose = () => {
+    closingRequestedRef.current = true;
+    setLocalOpen(false);
+  };
+
+  // Handle exit complete
+  const handleExitComplete = () => {
+    if (closingRequestedRef.current) {
+      onClose();
+      closingRequestedRef.current = false;
+    }
+  };
+
+  // Handle add to cart
+  const handleAddToCart = () => {
+    onAddToCart(item);
+    requestClose();
+  };
+
+  if (!item) return null;
+
+  // Calculate discount info
+  const hasDiscount = item.discountPrice && item.discountPrice < item.price;
+  const discountPercentage = hasDiscount
+    ? Math.round(((item.price - item.discountPrice) / item.price) * 100)
+    : 0;
+
+  return (
+    <div className={`fixed inset-0 z-50 flex items-center justify-center ${isOpen ? '' : 'pointer-events-none'} supports-[height:100dvh]:h-[100dvh]`}>
+      <AnimatePresence initial={false} mode="wait" onExitComplete={handleExitComplete}>
+        {localOpen && (
+          <>
+            {/* Backdrop */}
+            <motion.div
+              key="backdrop"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.18 }}
+              className="absolute inset-0 bg-black bg-opacity-30 backdrop-blur-sm pointer-events-auto"
+              onClick={requestClose}
+              aria-hidden="true"
+            />
+
+            {/* Modal Panel */}
+            <motion.div
+              key="modal-panel"
+              initial={{ opacity: 0, scale: 0.9, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.9, y: 20 }}
+              transition={{
+                type: "spring",
+                stiffness: 300,
+                damping: 30
+              }}
+              className="relative w-full max-w-2xl mx-4 max-h-[90vh] glass-card overflow-hidden pointer-events-auto"
+              dir="rtl"
+              role="dialog"
+              aria-modal="true"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Header */}
+              <div className="flex justify-between items-center p-6 border-b border-white/20">
+                <h2 className="subtitle font-bold text-right">{item.name || item.label}</h2>
+                <button
+                  onClick={requestClose}
+                  className="content-text hover:text-primary hover:bg-gray-100 p-2 rounded-md transition-colors duration-200"
+                  aria-label="סגור"
+                >
+                  <X size={20} />
+                </button>
+              </div>
+
+              {/* Content */}
+              <div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
+                <div className="grid md:grid-cols-2 gap-6">
+                  {/* Image Section */}
+                  <div className="relative">
+                    <div className="relative w-full h-64 md:h-80 overflow-hidden rounded-xl bg-gray-100">
+                      {item.imageUrl ? (
+                        <img
+                          src={item.imageUrl}
+                          alt={item.name || item.label}
+                          className="w-full h-full object-cover"
+                          onError={(e) => {
+                            e.target.style.display = 'none';
+                            e.target.nextElementSibling.style.display = 'flex';
+                          }}
+                        />
+                      ) : null}
+
+                      {/* Image Fallback */}
+                      <div
+                        className="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center"
+                        style={{ display: item.imageUrl ? 'none' : 'flex' }}
+                      >
+                        <div className="text-center text-gray-400">
+                          <div className="text-4xl mb-2">🍰</div>
+                          <div className="text-sm font-medium">תמונה</div>
+                        </div>
+                      </div>
+
+                      {/* Discount Badge */}
+                      {hasDiscount && (
+                        <div className="absolute top-3 left-3 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold shadow-lg">
+                          -{discountPercentage}%
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Details Section */}
+                  <div className="space-y-4">
+                    {/* Description */}
+                    {item.description && (
+                      <div>
+                        <h3 className="content-text font-medium mb-2">תיאור</h3>
+                        <p className="caption-text leading-relaxed">
+                          {item.description}
+                        </p>
+                      </div>
+                    )}
+
+                    {/* Price Section */}
+                    <div className="space-y-2">
+                      <h3 className="content-text font-medium">מחיר</h3>
+                      {hasDiscount ? (
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-3">
+                            <span className="text-2xl font-bold text-price">
+                              ₪{item.discountPrice}
+                            </span>
+                            <span className="text-sm text-gray-400 line-through">
+                              ₪{item.price}
+                            </span>
+                          </div>
+                          <div className="text-sm text-price font-medium">
+                            חיסכון ₪{item.price - item.discountPrice}
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="text-2xl font-bold text-price">
+                          ₪{item.price}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Add to Cart Button */}
+                    <div className="pt-4">
+                      <SmallButton
+                        onClick={handleAddToCart}
+                        className="w-full flex items-center justify-center gap-2"
+                      >
+                        <ShoppingCart size={16} />
+                        הוסף לעגלה
+                      </SmallButton>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default ItemDetailsModal;

package/dist/components 2/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