@codesinger0/shared-components 1.0.50 → 1.0.51

package/dist/components/MasonryItemCard.jsx

@@ -0,0 +1,351 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+import useScrollLock from '../hooks/useScrollLock'
+
+const MasonryImageList = ({ images = [], cols = 3, onImageClick = () => { } }) => {
+  // cols is the desktop column count; mobile will be forced to 2 via CSS
+  return (
+    <>
+      <div
+        className="masonry-columns h-full overflow-y-auto"
+        // set CSS variable so the component can control desktop column count
+        style={{ ['--masonry-cols']: cols }}
+      >
+        {images.map((img, i) => (
+          <button
+            key={i}
+            className="masonry-item w-full block mb-4 p-0 border-0 bg-transparent text-left"
+            onClick={() => onImageClick(i)}
+            aria-label={`open image ${i + 1}`}
+          >
+            <img
+              src={img.src || img}
+              alt={img.alt || `image-${i + 1}`}
+              loading="lazy"
+              className="masonry-img w-full h-auto rounded-lg block"
+              style={{ display: 'block' }}
+            />
+          </button>
+        ))}
+      </div>
+
+      <style jsx>{`
+        /* Container uses CSS columns to create the masonry stacking */
+        .masonry-columns {
+          column-gap: 0.75rem;
+          /* default: mobile 2 columns */
+          column-count: 2;
+          padding-right: 0.25rem; /* small padding so rtl scroll doesn't cut content */
+        }
+
+        /* Desktop: use the --masonry-cols variable */
+        @media (min-width: 1024px) {
+          .masonry-columns {
+            column-count: var(--masonry-cols);
+          }
+        }
+
+        /* Make each item avoid breaking across columns and have bottom margin */
+        .masonry-item {
+          /* avoid splitting an item between columns */
+          break-inside: avoid;
+          -webkit-column-break-inside: avoid;
+          page-break-inside: avoid;
+          margin-bottom: 0.75rem;
+        }
+
+        /* Image style */
+        .masonry-img {
+          width: 100%;
+          height: auto;
+          display: block;
+          object-fit: cover;
+          /* give images a subtle shadow & transition if desired */
+          transition: transform 0.2s ease, box-shadow 0.15s ease;
+        }
+        .masonry-item:hover .masonry-img {
+          transform: translateY(-2px) scale(1.01);
+        }
+
+        /* Optional: nicer scrollbar for the image column */
+        .masonry-columns::-webkit-scrollbar {
+          width: 10px;
+        }
+        .masonry-columns::-webkit-scrollbar-thumb {
+          border-radius: 9999px;
+          background: rgba(0, 0, 0, 0.12);
+        }
+      `}</style>
+    </>
+  );
+};
+
+// Image lightbox modal component
+const ImageLightbox = ({
+  images,
+  currentIndex,
+  isOpen,
+  onClose,
+  onNavigate
+}) => {
+  const currentImage = images[currentIndex];
+
+  useScrollLock(isOpen);
+
+  if (!currentImage) 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}
+          />
+
+          {/* 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={currentImage.src}
+              alt={currentImage.alt || currentImage.title || 'Gallery image'}
+              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 */}
+            {currentImage.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">
+                  {currentImage.title}
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+const MasonryItemCard = ({
+  images = [],
+  title,
+  subtitle,
+  description,
+  reverse = false,
+  textCols = 1,
+  imagesCols = 1,
+  mobileHeight = '60vh', // used for small screens
+  enableLightbox = true,
+  onImageClick,
+  className = '',
+  cols = 3, // default for desktop masonry (we want 3 per row on desktop)
+  ...props
+}) => {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  const totalCols = textCols + imagesCols;
+  // CSS variables to be applied to grid wrapper:
+  const textPct = `${(textCols / totalCols) * 100}%`;
+  const imagesPct = `${(imagesCols / totalCols) * 100}%`;
+
+  const handleImageClick = useCallback(
+    (index) => {
+      setCurrentImageIndex(index);
+
+      if (onImageClick) onImageClick(images[index], index);
+
+      if (enableLightbox) setLightboxOpen(true);
+    },
+    [images, onImageClick, enableLightbox]
+  );
+
+  const handleLightboxClose = useCallback(() => setLightboxOpen(false), []);
+  const handleLightboxNavigate = useCallback((index) => setCurrentImageIndex(index), []);
+
+  if (!images || images.length === 0) {
+    return (
+      <section className={`py-16 px-8 ${className}`} {...props}>
+        <div className="glass-card relative min-h-[48vh]">
+          <div className="max-w-7xl mx-auto px-6 pt-16">
+            <div className="text-center" dir="rtl">
+              <h2 className="title mb-4">{title}</h2>
+              <h3 className="subtitle mb-6">{subtitle}</h3>
+              <p className="content-text">אין תמונות להצגה</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <>
+      <section className={`relative w-full overflow-visible py-16 px-4 ${className}`} {...props}>
+        {/* NOTE: --text-frac / --image-frac are set inline so CSS can use them at lg and up */}
+        <div
+          className="glass-card relative min-h-[48vh] flex flex-col"
+          style={{ '--text-frac': textPct, '--image-frac': imagesPct }}
+        >
+          {/* top padding/content wrapper */}
+          <div className="max-w-7xl mx-auto px-6 pt-16 w-full flex-1">
+            {/* layout-grid will switch to two-column fractions on lg+ */}
+            <div className="layout-grid w-full h-full" dir="rtl">
+              {/* Text Content */}
+              <div
+                className={`text-column ${reverse ? 'lg:order-2' : 'lg:order-1'} px-2`}
+              >
+                <h2 className="title mb-6">{title}</h2>
+                <h3 className="subtitle mb-6">{subtitle}</h3>
+                <p className="content-text max-w-md mx-auto lg:mx-0">{description}</p>
+              </div>
+
+              {/* Desktop Masonry Images (visible on lg+) */}
+              <div
+                className={`image-column hidden lg:block ${reverse ? 'lg:order-1' : 'lg:order-2'} px-2 mb-8`}
+              >
+                {/* image-column fills available height and scrolls if needed */}
+                <MasonryImageList
+                  images={images}
+                  onImageClick={handleImageClick}
+                  cols={cols /* desktop: 3 by default from caller prop */}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile Masonry Images (visible on mobile) */}
+          <div
+            className="block lg:hidden mt-8 w-full px-4"
+            style={{ height: mobileHeight }}
+          >
+            <MasonryImageList
+              images={images}
+              onImageClick={handleImageClick}
+              cols={2} // mobile: 2 per row
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Lightbox */}
+      {enableLightbox && (
+        <ImageLightbox
+          images={images}
+          currentIndex={currentImageIndex}
+          isOpen={lightboxOpen}
+          onClose={handleLightboxClose}
+          onNavigate={handleLightboxNavigate}
+        />
+      )}
+
+      {/* Component styles */}
+      <style jsx>{`
+        /* The overall grid - single column by default; switches to two fractional columns at lg+ */
+        .layout-grid {
+          display: grid;
+          grid-template-columns: 1fr;
+          gap: 3rem;
+        }
+
+        /* At large screens, use the fractional widths computed in inline styles */
+        @media (min-width: 1024px) {
+          .layout-grid {
+            /* use CSS variables set from JS: --text-frac and --image-frac */
+            grid-template-columns: var(--text-frac) var(--image-frac);
+            align-items: start;
+            gap: 3rem;
+            height: 100%;
+          }
+
+          .text-column {
+            /* ensure text column doesn't overflow the parent */
+            height: 100%;
+          }
+
+          .image-column {
+            /* make image column take full height of the parent wrapper and be scrollable */
+            height: 100%;
+            max-height: 100%;
+            overflow-y: auto;
+          }
+        }
+
+        /* Keep mobile images area scrollable if images exceed mobileHeight (we set that inline) */
+        @media (max-width: 1023px) {
+          .layout-grid {
+            gap: 1.5rem;
+          }
+        }
+
+        /* Optional: small visual tweak to hide scrollbar in WebKit (if you want) */
+        .image-column::-webkit-scrollbar {
+          width: 8px;
+        }
+        .image-column::-webkit-scrollbar-thumb {
+          border-radius: 9999px;
+          background: rgba(0, 0, 0, 0.2);
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default MasonryItemCard;

package/dist/styles/shared-components.css

@@ -0,0 +1,29 @@
+    /* Glass Card - Glassmorphism Effect */
+    .glass-card {
+        @apply rounded-xl backdrop-blur-md;
+        background-color: var(--card-bg);
+        background: color-mix(in srgb, var(--card-bg) 75%, transparent);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--primary) 20%, transparent);
+        border: 1px solid color-mix(in srgb, var(--card-bg) 30%, transparent);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .glass-button {
+        background: rgba(255, 107, 53, 0.2);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 107, 53, 0.3);
+        transition: all 0.3s ease;
+    }
+
+    .glass-button:hover {
+        background: rgba(255, 107, 53, 0.3);
+        transform: translateY(-2px);
+        box-shadow: 0 12px 24px rgba(255, 107, 53, 0.2);
+    }
+
+    .glass-card:hover {
+        background: color-mix(in srgb, var(--card-bg) 55%, transparent);
+        box-shadow: 0 12px 40px 0 color-mix(in srgb, var(--primary) 30%, transparent);
+        transform: translateY(-2px);
+    }

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "dist/styles"
   ],
   "scripts": {
     "build": "rm -fr dist; cp -r src dist"