@codesinger0/shared-components 1.0.10 → 1.0.12

package/dist/components/CTAButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const CTAButton = ({ children, onClick, className = '', ...props }) => {
+  return (
+    <button
+      className={`btn-primary text-big rounded-sm px-6 py-3 transition-all duration-200 hover:brightness-90 inline-flex items-center gap-2 ${className}`}
+      onClick={onClick}
+      dir="rtl"
+      {...props}
+    >
+      {children}
+      <span className="text-xl">←</span>
+    </button>
+  );
+};
+
+export default CTAButton;

package/dist/components/LargeItemCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RoundButton } from './RoundButton.jsx'
+import RoundButton from './RoundButton.jsx'
 import { motion } from 'framer-motion'
 
 const LargeItemCard = ({

package/dist/components/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/SmallItemCard.jsx

@@ -0,0 +1,124 @@
+
+import React from 'react';
+import { ShoppingCart } from 'lucide-react';
+import SmallButton from './SmallButton';
+
+const SmallItemCard = ({
+  imageUrl,
+  label,
+  description,
+  price,
+  discountPrice,
+  className = '',
+  onClick,
+  onAddToCart,
+  ...props
+}) => {
+  // Calculate discount percentage
+  const hasDiscount = discountPrice && discountPrice < price;
+  const discountPercentage = hasDiscount
+    ? Math.round(((price - discountPrice) / price) * 100)
+    : 0;
+
+  const handleAddToCartClick = (event) => {
+    event.stopPropagation();
+    onAddToCart()
+  }
+
+  return (
+    <div
+      className={`glass-card cursor-pointer transition-all duration-300 hover:scale-104 ${className}`}
+      onClick={onClick}
+      dir="rtl"
+      {...props}
+    >
+      {/* Image Container */}
+      <div className="relative w-full h-40 overflow-hidden rounded-t-xl">
+        {imageUrl ? (
+          <img
+            src={imageUrl}
+            alt={label}
+            className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
+            onError={(e) => {
+              e.target.style.display = 'none';
+              e.target.nextElementSibling.style.display = 'flex';
+            }}
+          />
+        ) : null}
+
+        {/* Fallback for missing image */}
+        <div
+          className="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center"
+          style={{ display: imageUrl ? 'none' : 'flex' }}
+        >
+          <div className="text-center text-gray-400">
+            <div className="text-2xl mb-1">🍰</div>
+            <div className="text-xs font-medium">תמונה</div>
+          </div>
+        </div>
+
+        {/* Discount Badge */}
+        {hasDiscount && (
+          <div className="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold shadow-lg">
+            -{discountPercentage}%
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="p-4 flex flex-col">
+        {/* Name */}
+        <h3 className="subtitle font-semibold line-clamp-2 flex-shrink-0">
+          {label}
+        </h3>
+
+        {/* Description */}
+        {description && (
+          <div className="flex-grow">
+            <p className="caption-text line-clamp-2 leading-relaxed">
+              {description}
+            </p>
+          </div>
+        )}
+
+        {/* Price Section */}
+        <div className="mb-3 flex-shrink-0 leading-relaxed">
+          {hasDiscount ? (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className="price-tag text-green-600">
+                    ₪{discountPrice}
+                  </span>
+                  <span className="text-sm text-gray-400 line-through">
+                    ₪{price}
+                  </span>
+                </div>
+              </div>
+              <div className="text-xs text-green-600 font-medium">
+                חיסכון ₪{price - discountPrice}
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between">
+              <span className="price-tag">
+                ₪{price}
+              </span>
+            </div>
+          )}
+        </div>
+
+        <SmallButton
+          onClick={handleAddToCartClick}
+          className="w-full flex items-center justify-center gap-2"
+        >
+          <ShoppingCart size={16} />
+          הוסף לעגלה
+        </SmallButton>
+
+      </div>
+    </div>
+  );
+};
+
+export default SmallItemCard;

package/dist/components/SmallItemGrid.jsx

@@ -0,0 +1,308 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import SmallItemCard from './SmallItemCard';
+import CTAButton from './elements/CTAButton';
+import useEmblaCarousel from 'embla-carousel-react';
+import Autoplay from 'embla-carousel-autoplay';
+import { useItemModal } from '../context/ItemModalContext'
+
+const SmallItemsGrid = ({
+    maxRows = null,
+    showMoreType = 'button',
+    headerText = '',
+    className = '',
+    items,
+    onAddToCart,
+    autoplay = true,
+    isLighter = false,
+    ...props
+}) => {
+
+    const [showAllItems, setShowAllItems] = useState(false);
+    const { openModal } = useItemModal()
+
+    // Embla carousel setup
+    const autoplayOptions = {
+        delay: 3000,
+        stopOnInteraction: true,
+        stopOnMouseEnter: true,
+        rootNode: (emblaRoot) => emblaRoot.parentElement,
+    };
+
+    const plugins = autoplay ? [Autoplay(autoplayOptions)] : [];
+
+    const [emblaRef, emblaApi] = useEmblaCarousel(
+        {
+            loop: true,
+            dragFree: true,
+            containScroll: 'trimSnaps',
+            slidesToScroll: 1,
+            direction: 'rtl'
+        },
+        plugins
+    );
+
+    const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+    const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState([]);
+
+    const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
+    const scrollTo = useCallback((index) => emblaApi && emblaApi.scrollTo(index), [emblaApi]);
+
+    const onSelect = useCallback(() => {
+        if (!emblaApi) return;
+        setSelectedIndex(emblaApi.selectedScrollSnap());
+        setPrevBtnEnabled(emblaApi.canScrollPrev());
+        setNextBtnEnabled(emblaApi.canScrollNext());
+    }, [emblaApi]);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+        onSelect();
+        setScrollSnaps(emblaApi.scrollSnapList());
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect]);
+
+    const handleCardClick = (item) => {
+        openModal(item)
+    };
+
+    const toggleShowMore = () => {
+        setShowAllItems(!showAllItems);
+    };
+
+    // Calculate items per row based on CSS grid configuration
+    const getItemsPerRow = () => {
+        return window.innerWidth >= 768 ? 5 : 2; // md:grid-cols-5, grid-cols-2
+    };
+
+    // Calculate max items to show based on rows
+    const calculateMaxItems = () => {
+        if (!maxRows) return null;
+        return maxRows * getItemsPerRow();
+    };
+
+    // Determine if we need overflow handling
+    const maxItemsToShow = calculateMaxItems();
+    const needsOverflow = maxRows && items.length > maxItemsToShow;
+
+    // Calculate displayed items for button mode
+    const displayedItems = needsOverflow && !showAllItems
+        ? items.slice(0, maxItemsToShow)
+        : items;
+
+    const GridComponent = ({ items: gridItems }) => (
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 md:gap-6">
+            {gridItems.map(item => (
+                <SmallItemCard
+                    key={item.id}
+                    imageUrl={item.imageUrl}
+                    label={item.name}
+                    description={item.description}
+                    price={item.price}
+                    discountPrice={item.discountPrice}
+                    onClick={() => handleCardClick(item)}
+                    onAddToCart={() => onAddToCart(item)}
+                    className="hover:shadow-xl"
+                />
+            ))}
+        </div>
+    );
+
+    return (
+        <section className={`py-8 px-0 bg-main ${className}`} {...props}>
+            <div className="max-w-6xl mx-auto">
+                <h2 className={`${isLighter ? 'lighterTitle' : 'title'} text-center mb-12`}>{headerText}</h2>
+
+                {showMoreType === 'carousel' ? (
+                    // Embla Carousel Mode - infinite with autoscroll
+                    <div className="embla" dir="rtl">
+                        <div className="embla__viewport" ref={emblaRef}>
+                            <div className="embla__container">
+                                {items.map(item => (
+                                    <div key={item.id} className="embla__slide">
+                                        <SmallItemCard
+                                            imageUrl={item.imageUrl}
+                                            label={item.name}
+                                            description={item.description}
+                                            price={item.price}
+                                            discountPrice={item.discountPrice}
+                                            onClick={() => handleCardClick(item)}
+                                            onAddToCart={() => onAddToCart(item)}
+                                            className="h-full flex flex-col" />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Dots indicator */}
+                        <div className="embla__dots">
+                            {scrollSnaps.map((_, index) => (
+                                <button
+                                    key={index}
+                                    className={`embla__dot ${index === selectedIndex ? 'embla__dot--selected' : ''}`}
+                                    onClick={() => scrollTo(index)}
+                                />
+                            ))}
+                        </div>
+
+                        {/* Navigation buttons */}
+                        {!isLighter && <div className="embla__controls">
+                            <button
+                                className="embla__button embla__button--prev"
+                                onClick={scrollPrev}
+                                disabled={!prevBtnEnabled}
+                            >
+                                <svg className="embla__button__svg" viewBox="0 0 24 24">
+                                    <path d="M9 18l6-6-6-6" />
+                                </svg>
+                            </button>
+                            <button
+                                className="embla__button embla__button--next"
+                                onClick={scrollNext}
+                                disabled={!nextBtnEnabled}
+                            >
+                                <svg className="embla__button__svg" viewBox="0 0 24 24">
+                                    <path d="M15 18l-6-6 6-6" />
+                                </svg>
+                            </button>
+                        </div>}
+                    </div>
+                ) : (
+                    // Grid Mode (default or button)
+                    <>
+                        <GridComponent items={displayedItems} />
+
+                        {/* Show More Button */}
+                        {needsOverflow && showMoreType === 'button' && (
+                            <div className="text-center mt-8">
+                                <CTAButton onClick={toggleShowMore}>
+                                    {showAllItems ? 'ראה פחות' : `ראה עוד (${items.length - maxItemsToShow} נוספים)`}
+                                </CTAButton>
+                            </div>
+                        )}
+                    </>
+                )}
+            </div>
+
+            {/* Embla Carousel Styles */}
+            <style jsx>{`
+                .embla {
+                    max-width: 100%;
+                    margin: 0 auto;
+                }
+                
+                .embla__viewport {
+                    overflow: hidden;
+                }
+                
+                .embla__container {
+                    display: flex;
+                    user-select: none;
+                    -webkit-touch-callout: none;
+                    -khtml-user-select: none;
+                    -webkit-tap-highlight-color: transparent;
+                }
+                
+                .embla__slide {
+                    flex: 0 0 60%;
+                    min-width: 0;
+                    padding-left: 0.6rem;
+                    padding-right: 0.6rem;
+                }
+                
+                @media (min-width: 768px) {
+                    .embla__slide {
+                        flex: 0 0 33.333333%;
+                    }
+                }
+                
+                @media (min-width: 1024px) {
+                    .embla__slide {
+                        flex: 0 0 25%;
+                        min-width: 200px;
+                    }
+                }
+                
+                @media (min-width: 1280px) {
+                    .embla__slide {
+                        flex: 0 0 25%;
+                        min-width: 260px;
+                    }
+                }
+                
+                .embla__controls {
+                    display: flex;
+                    justify-content: center;
+                    gap: 1rem;
+                    margin-top: 2rem;
+                }
+                
+                .embla__button {
+                    background-color: var(--primary);
+                    color: white;
+                    border: none;
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    border-radius: 50%;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all 0.2s ease;
+                }
+                
+                .embla__button:hover:not(:disabled) {
+                    background-color: color-mix(in srgb, var(--primary) 80%, black);
+                    transform: scale(1.1);
+                }
+                
+                .embla__button:disabled {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+                }
+                
+                .embla__button__svg {
+                    width: 1rem;
+                    height: 1rem;
+                    fill: none;
+                    stroke: currentColor;
+                    stroke-width: 2;
+                    stroke-linecap: round;
+                    stroke-linejoin: round;
+                }
+                
+                .embla__dots {
+                    display: flex;
+                    justify-content: center;
+                    gap: 0.5rem;
+                    margin-top: 1rem;
+                }
+                
+                .embla__dot {
+                    background-color: var(--primary);
+                    border: none;
+                    width: 0.5rem;
+                    height: 0.5rem;
+                    border-radius: 50%;
+                    cursor: pointer;
+                    opacity: 0.3;
+                    transition: all 0.2s ease;
+                }
+                
+                .embla__dot--selected {
+                    opacity: 1;
+                    transform: scale(1.2);
+                }
+                
+                .embla__dot:hover {
+                    opacity: 0.7;
+                }
+            `}</style>
+        </section>
+    );
+};
+
+export default SmallItemsGrid;

package/dist/context/ItemModalContext.jsx

@@ -0,0 +1,40 @@
+// src/context/ItemModalContext.js
+import React, { createContext, useContext, useState } from 'react';
+
+const ItemModalContext = createContext();
+
+export const useItemModal = () => {
+  const context = useContext(ItemModalContext);
+  if (!context) {
+    throw new Error('useItemModal must be used within an ItemModalProvider');
+  }
+  return context;
+};
+
+export const ItemModalProvider = ({ children }) => {
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = (item) => {
+    console.log('Opening modal for item:', item);
+    setSelectedItem(item);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const value = {
+    selectedItem,
+    isModalOpen,
+    openModal,
+    closeModal
+  };
+
+  return (
+    <ItemModalContext.Provider value={value}>
+      {children}
+    </ItemModalContext.Provider>
+  );
+};

package/dist/index.js

@@ -1,2 +1,9 @@
 export { default as RoundButton } from './components/RoundButton';
-export { default as LargeItemCard } from './components/LargeItemCard';
+export { default as CTAButton } from './components/CTAButton';
+export { default as SmallButton } from './components/SmallButton';
+export { default as LargeItemCard } from './components/LargeItemCard';
+export { default as SmallItemGrid } from './components/SmallItemGrid';
+export { default as SmallItemCard } from './components/SmallItemCard';
+
+// Context
+export { ItemModalProvider, useItemModal } from './context/ItemModalContext';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [
@@ -12,7 +12,9 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "lucide-react": ">=0.263.1",
-    "framer-motion": ">=12.23.12"
+    "framer-motion": ">=12.23.12",
+    "embla-carousel-autoplay": ">=8.6.0",
+    "embla-carousel-react": ">=8.6.0"
   },
   "repository": {
     "type": "git",