@codesinger0/shared-components 1.1.57 → 1.1.58

package/dist/components/IconGrid.jsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import { Users, Monitor, Smartphone, ThumbsUp, Paintbrush } from 'lucide-react';
-
-const IconGrid = ({ items = [], className = '' }) => {
-  if (!items || items.length === 0) {
-    return null;
-  }
-
-  // Calculate rows distribution
-  const totalItems = items.length;
-  const isEven = totalItems % 2 === 0;
-  const itemsPerRow = Math.ceil(totalItems / 2);
-  
-  // Split items into rows
-  const topRowCount = isEven ? itemsPerRow : itemsPerRow;
-  const topRow = items.slice(0, topRowCount);
-  const bottomRow = items.slice(topRowCount);
-
-  const GridItem = ({ icon: Icon, text }) => (
-    <div className="flex flex-col items-center justify-center p-6 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl hover:shadow-lg transition-shadow duration-300">
-      <div className="w-20 h-20 mb-4 flex items-center justify-center">
-        <Icon className="w-full h-full text-main" strokeWidth={1.5} />
-      </div>
-      <p className="text-center text-gray-800 font-medium text-lg" dir="rtl">
-        {text}
-      </p>
-    </div>
-  );
-
-  return (
-    <div className={`w-full max-w-6xl mx-auto px-4 ${className}`}>
-      {/* Mobile: Single column */}
-      <div className="md:hidden space-y-4">
-        {items.map((item, index) => (
-          <GridItem key={index} {...item} />
-        ))}
-      </div>
-
-      {/* Desktop: Smart grid */}
-      <div className="hidden md:block space-y-4 mt-20 mb-20">
-        {/* Top row */}
-        <div 
-          className="grid gap-4 mb-4"
-          style={{
-            gridTemplateColumns: `repeat(${topRowCount}, 1fr)`,
-            justifyItems: 'center'
-          }}
-        >
-          {topRow.map((item, index) => (
-            <div key={index} className="w-full max-w-sm">
-              <GridItem {...item} />
-            </div>
-          ))}
-        </div>
-
-        {/* Bottom row - centered if fewer items */}
-        {bottomRow.length > 0 && (
-          <div 
-            className="grid gap-4"
-            style={{
-              gridTemplateColumns: `repeat(${bottomRow.length}, 1fr)`,
-              justifyItems: 'center',
-              maxWidth: bottomRow.length < topRowCount ? `${(bottomRow.length / topRowCount) * 100}%` : '100%',
-              margin: '0 auto'
-            }}
-          >
-            {bottomRow.map((item, index) => (
-              <div key={index} className="w-full max-w-sm">
-                <GridItem {...item} />
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// Demo
-const Demo = () => {
-  const demoItems = [
-    {
-      icon: Users,
-      text: 'מתאים לכל סוגי העסקים'
-    },
-    {
-      icon: Monitor,
-      text: 'חווית משתמש UX/UI'
-    },
-    {
-      icon: Smartphone,
-      text: 'התאמה מלאה לכל המסכים'
-    },
-    {
-      icon: ThumbsUp,
-      text: 'תמיכה מלאה'
-    },
-    {
-      icon: Paintbrush,
-      text: 'עיצוב יוצר נשימה'
-    }
-  ];
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-16">
-      <div className="max-w-7xl mx-auto px-4">
-        <h1 className="text-4xl font-bold text-center text-gray-800 mb-4" dir="rtl">
-          IconGrid Component
-        </h1>
-        <p className="text-center text-gray-600 mb-12" dir="rtl">
-          רכיב גריד חכם המתאים את עצמו למספר הפריטים
-        </p>
-
-        <IconGrid items={demoItems} />
-
-        <div className="mt-16 bg-white rounded-xl p-8 shadow-lg">
-          <h2 className="text-2xl font-bold mb-4" dir="rtl">תכונות:</h2>
-          <ul className="space-y-2 text-gray-700" dir="rtl">
-            <li>✅ מספר זוגי של פריטים - חלוקה שווה בין שורות</li>
-            <li>✅ מספר אי-זוגי - שורה עליונה עם פריט אחד נוסף, ממורכזת</li>
-            <li>✅ במובייל - עמודה אנכית בודדת</li>
-            <li>✅ תמיכה מלאה ב-RTL</li>
-            <li>✅ עיצוב רספונסיבי עם אנימציות</li>
-          </ul>
-
-          <h3 className="text-xl font-bold mt-6 mb-3" dir="rtl">דוגמת שימוש:</h3>
-          <pre className="bg-gray-50 p-4 rounded-lg overflow-x-auto text-sm">
-{`const items = [
-  { icon: Users, text: 'טקסט 1' },
-  { icon: Monitor, text: 'טקסט 2' },
-  { icon: Smartphone, text: 'טקסט 3' },
-  { icon: ThumbsUp, text: 'טקסט 4' },
-  { icon: Paintbrush, text: 'טקסט 5' }
-];
-
-<IconGrid items={items} />`}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default IconGrid;

package/dist/components/IntroSection.jsx

@@ -1,74 +0,0 @@
-import { motion } from "framer-motion";
-
-const IntroSection = ({
-    introHeight = '40vh',
-    introTitle,
-    introContent,
-    introImage,
-    classNames = {}
-}) => {
-    const {
-        introTitle: introTitleClass = 'title',
-        introContent: introContentClass = 'subtitle'
-    } = classNames;
-
-    return (
-        <>
-            {/* Introduction Section */}
-            <section className=" py-16 px-4" style={{ minHeight: introHeight }}>
-                <div className="max-w-6xl mx-auto" dir="rtl">
-                    {introImage ? (
-                        /* Layout with image */
-                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
-                            {/* Text Content */}
-                            <div className="text-center lg:text-right order-2 lg:order-1">
-                                <h2 className={introTitleClass + " mb-6"}>
-                                    {introTitle}
-                                </h2>
-                                <p className={introContentClass + " leading-relaxed"} style={{ whiteSpace: 'pre-line' }}>
-                                    {introContent}
-                                </p>
-                            </div>
-
-                            {/* Image */}
-                            <motion.div
-                                key={'image'}
-                                initial={{ opacity: 0, x: 50 }}
-                                whileInView={{ opacity: 1, x: 0 }}
-                                viewport={{ once: true }}
-                                transition={{ delay: 1 * 0.5 }}
-                                className="h-full"
-                            >
-                                <div className="order-1 lg:order-2 flex justify-center lg:justify-end">
-                                    <div className="w-full max-w-md lg:max-w-lg">
-                                        <img
-                                            src={introImage}
-                                            alt={introTitle || "Introduction image"}
-                                            className="w-full h-auto rounded-lg shadow-lg object-cover"
-                                            onError={(e) => {
-                                                e.target.style.display = 'none';
-                                                console.warn('Failed to load intro image:', introImage);
-                                            }}
-                                        />
-                                    </div>
-                                </div>
-                            </motion.div>
-                        </div>
-                    ) : (
-                        /* Text only layout (original) */
-                        <div className="text-center max-w-4xl mx-auto">
-                            <h2 className="title mb-6">
-                                {introTitle}
-                            </h2>
-                            <p className="subtitle leading-relaxed" style={{ whiteSpace: 'pre-line' }}>
-                                {introContent}
-                            </p>
-                        </div>
-                    )}
-                </div>
-            </section>
-        </>
-    );
-}
-
-export default IntroSection

package/dist/components/Menu.jsx

@@ -1,268 +0,0 @@
-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 = () => { },
-
-  // Children to display above menu items
-  children = null,
-}) => {
-  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);
-  };
-
-  const DesktopMenu = () => (
-    <nav className="sticky top-0 z-50 bg-menu border-b-2 border-primary">
-      {/* Parent container with two vertically stacked sections */}
-      <div className="w-full">
-
-        {/* Top section - Logo and Children content */}
-        {children && (<div className="w-full flex items-center py-4 px-6">
-          {/* Logo - takes only required space */}
-          <Link to="/" className={`flex-shrink-0 ${logoClassName}`}>
-            <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>
-          </Link>
-
-          {/* Children - grows to fill available space */}
-          <div className="flex-grow">
-            {children}
-          </div>
-        </div>
-        )}
-
-        {/* Bottom section - Menu navigation bar */}
-        <div className="w-full px-6 py-4 flex justify-between items-center">
-          {/* Left side - Auth buttons */}
-          <div className="flex items-center">
-            {AuthButtonsComponent && <AuthButtonsComponent />}
-          </div>
-
-          {/* Center / Right side - Menu items */}
-          <div className="flex-1 flex justify-center">
-            <div className="flex items-center space-x-6 space-x-reverse" 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>
-          </div>
-
-          {/* Right Side Render logo here if no children */}
-          {!children && (
-            <Link to="/" className={`flex-shrink-0 ${logoClassName}`}>
-              <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>
-            </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>
-
-          {/* Children next to logo */}
-          {children && (
-            <div>
-              {children}
-            </div>
-          )}
-
-          {/* 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;