@salla.sa/twilight-theme-engine 1.0.85 → 1.0.87

package/tailwind/components/layout/WidgetHead.tsx.txt

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { useTwilight } from '../../providers/twilight-context';
+import { HookSlot } from '../../hooks/HookSlot';
+
+/**
+ * Pushes the equal-height product card configuration to the GTM dataLayer.
+ * Mirrors PHP `HeadWidget::run()` -> `GoogleTagManager::set('equalHeight', ...)`.
+ *
+ * @param settings - Flat settings map from the store (keyed by dot-path strings).
+ */
+export function pushEqualHeightConfig(settings: Record<string, unknown>): void {
+  const isEnabled = settings['products::card.equal-height.enabled'];
+  if (isEnabled === undefined || isEnabled === null) return;
+
+  window.dataLayer = window.dataLayer ?? [];
+  window.dataLayer.push({
+    equalHeight: {
+      isEnabled: Boolean(isEnabled),
+      max: Number(settings['products::card.equal-height.max-pixel'] ?? 300),
+      classType: String(settings['products::card.equal-height.type'] ?? 'min'),
+    },
+  });
+}
+
+/**
+ * WidgetHead - Client-side head infrastructure widget.
+ *
+ * Handles runtime-only head operations that cannot be done in SSR head():
+ * - Pushes `equalHeight` config to GTM dataLayer (requires window).
+ * - Exposes `head:start`, `head`, and `head:end` HookSlots for theme customisation.
+ *
+ * Static head elements (favicon, msapplication tiles, theme colors, hreflang, custom CSS/JS)
+ * are handled in __root.tsx head() function.
+ *
+ * Renders no visible UI.
+ */
+export function WidgetHead() {
+  const { store } = useTwilight();
+
+  // ── equalHeight → GTM dataLayer ───────────────────────────────────────────
+  useEffect(() => {
+    const settings = (store.settings as unknown as Record<string, unknown>) ?? {};
+    pushEqualHeightConfig(settings);
+  }, [store.id, store.settings]);
+
+  return (
+    <>
+      <HookSlot name="head:start" ssr />
+      <HookSlot name="head" ssr />
+      <HookSlot name="head:end" ssr />
+    </>
+  );
+}

package/tailwind/components/layout/index.ts.txt

@@ -0,0 +1,27 @@
+import {
+  LazyHeader,
+  LazyFooter,
+  LazyCopyright,
+  LazyMasterLayout,
+  LazyWidgetHead,
+  LazyCustomerLayout,
+} from './lazy';
+
+// Lazy-loaded layout components (code-split)
+export {
+  LazyHeader as Header,
+  LazyFooter as Footer,
+  LazyCopyright as Copyright,
+  LazyMasterLayout as MasterLayout,
+  LazyWidgetHead as WidgetHead,
+  LazyCustomerLayout as CustomerLayout,
+};
+
+// Eager: the header renders it on the server, so it can't suspend.
+export { PageAdvertisements } from './PageAdvertisements';
+
+// Export utilities directly (not components)
+export { pushEqualHeightConfig } from './WidgetHead';
+
+// Shared types
+export type { LayoutProps } from './types';

package/tailwind/components/layout/lazy.ts.txt

@@ -0,0 +1,25 @@
+import { lazy } from 'react';
+
+/**
+ * Lazy-loaded layout components
+ * Use these for code-splitting layout sections
+ */
+export const LazyHeader = lazy(() => import('./Header').then((m) => ({ default: m.Header })));
+
+export const LazyFooter = lazy(() => import('./Footer').then((m) => ({ default: m.Footer })));
+
+export const LazyCopyright = lazy(() =>
+  import('./Copyright').then((m) => ({ default: m.Copyright }))
+);
+
+export const LazyMasterLayout = lazy(() =>
+  import('./MasterLayout').then((m) => ({ default: m.MasterLayout }))
+);
+
+export const LazyWidgetHead = lazy(() =>
+  import('./WidgetHead').then((m) => ({ default: m.WidgetHead }))
+);
+
+export const LazyCustomerLayout = lazy(() =>
+  import('./CustomerLayout').then((m) => ({ default: m.CustomerLayout }))
+);

package/tailwind/components/layout/types.ts.txt

@@ -0,0 +1,11 @@
+/**
+ * Layout Component Types
+ * Only types shared across multiple components.
+ */
+
+import type { ReactNode } from 'react';
+
+/** Base props for layout components with children */
+export interface LayoutProps {
+  children: ReactNode;
+}

package/tailwind/components/modal/ImageModal.tsx.txt

@@ -0,0 +1,70 @@
+/**
+ * ImageModal - Modal for displaying images in full scale
+ *
+ * Used for previewing images like tax certificates, etc.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ * const [imageSrc, setImageSrc] = useState('');
+ *
+ * <a onClick={() => { setImageSrc('/images/tax-certificate.jpg'); setIsOpen(true); }}>
+ *   <img src="/images/tax-thumb.png" />
+ * </a>
+ *
+ * <ImageModal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   src={imageSrc}
+ *   alt="Tax Certificate"
+ * />
+ * ```
+ */
+
+import { useState, type ImgHTMLAttributes } from 'react';
+import { Modal } from './Modal';
+
+export interface ImageModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Image source URL */
+  src: string;
+  /** Alt text for the image */
+  alt?: string;
+  /** Title shown in modal header */
+  title?: string;
+  /** Additional props for the img element */
+  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'>;
+}
+
+function ModalImage({ src, alt, imgProps }: Pick<ImageModalProps, 'src' | 'alt' | 'imgProps'>) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  return (
+    <>
+      {!isLoaded && <div className="animate-pulse bg-gray-200 w-full h-64 rounded" />}
+      <img
+        src={src}
+        alt={alt}
+        className={`max-w-full max-h-[70vh] object-contain ${isLoaded ? 'block' : 'hidden'}`}
+        onLoad={() => setIsLoaded(true)}
+        {...imgProps}
+      />
+    </>
+  );
+}
+
+export function ImageModal({ isOpen, onClose, src, alt = '', title, imgProps }: ImageModalProps) {
+  if (!src) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" position="center">
+      <Modal.Header onClose={onClose} showCloseButton>
+        {title || ''}
+      </Modal.Header>
+      <Modal.Body className="flex items-center justify-center min-h-64">
+        <ModalImage key={src} src={src} alt={alt} imgProps={imgProps} />
+      </Modal.Body>
+    </Modal>
+  );
+}

package/tailwind/components/modal/Modal.tsx.txt

@@ -0,0 +1,245 @@
+/**
+ * Modal Component
+ *
+ * A controlled modal dialog with backdrop, close button, and keyboard support.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setIsOpen(true)}>Open Modal</button>
+ *       <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *         <Modal.Header>Modal Title</Modal.Header>
+ *         <Modal.Body>Modal content here</Modal.Body>
+ *         <Modal.Footer>
+ *           <Button onClick={() => setIsOpen(false)}>Close</Button>
+ *         </Modal.Footer>
+ *       </Modal>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+
+import React, { useEffect, useCallback, useRef, type ReactNode, type HTMLAttributes } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  /**
+   * Close modal when clicking backdrop
+   * @default true
+   */
+  closeOnBackdropClick?: boolean;
+  /**
+   * Close modal on Escape key
+   * @default true
+   */
+  closeOnEscape?: boolean;
+  /**
+   * Prevent body scroll when modal is open
+   * @default true
+   */
+  preventBodyScroll?: boolean;
+  /**
+   * Size of the modal
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /**
+   * Position of the modal
+   * @default 'center'
+   */
+  position?: 'center' | 'top';
+  /**
+   * Additional className for the modal content
+   */
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  full: 'max-w-full mx-4',
+};
+
+const positionClasses = {
+  center: 'items-center',
+  top: 'items-start pt-10',
+};
+
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  preventBodyScroll = true,
+  size = 'md',
+  position = 'center',
+  className,
+}: ModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  // Handle Escape key
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && closeOnEscape) {
+        onClose();
+      }
+    },
+    [closeOnEscape, onClose]
+  );
+
+  // Bound to the backdrop, which covers the wrapper and is a sibling of the panel
+  const handleBackdropClick = useCallback(
+    (event: React.MouseEvent) => {
+      if (closeOnBackdropClick && event.target === event.currentTarget) {
+        onClose();
+      }
+    },
+    [closeOnBackdropClick, onClose]
+  );
+
+  // Focus management and body scroll
+  useEffect(() => {
+    if (isOpen) {
+      // Store the previously focused element
+      previousActiveElement.current = document.activeElement as HTMLElement;
+
+      // Focus the modal
+      modalRef.current?.focus();
+
+      // Prevent body scroll
+      if (preventBodyScroll) {
+        document.body.classList.add('menu-opened');
+      }
+
+      // Add keyboard listener
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+
+      // Restore body scroll
+      if (preventBodyScroll) {
+        document.body.classList.remove('menu-opened');
+      }
+
+      // Restore focus
+      previousActiveElement.current?.focus();
+    };
+  }, [isOpen, handleKeyDown, preventBodyScroll]);
+
+  if (!isOpen || typeof document === 'undefined') {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className={`fixed inset-0 z-50 flex justify-center ${positionClasses[position]}`}
+      aria-modal="true"
+      role="dialog"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 transition-opacity"
+        role="presentation"
+        onClick={handleBackdropClick}
+        onKeyDown={(e) => {
+          if ((e.key === 'Enter' || e.key === ' ') && closeOnBackdropClick) {
+            e.preventDefault();
+            onClose();
+          }
+        }}
+      />
+
+      {/* Modal Content */}
+      <div
+        ref={modalRef}
+        tabIndex={-1}
+        className={`relative z-10 w-full rounded-lg bg-white shadow-xl transform transition-all duration-200 ease-out ${sizeClasses[size]} ${isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'} ${className || ''}`}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+// Modal Sub-components
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+Modal.Header = function ModalHeader({
+  children,
+  showCloseButton = true,
+  onClose,
+  className,
+  ...props
+}: ModalHeaderProps) {
+  return (
+    <div
+      className={`flex items-center justify-between border-b border-gray-200 px-6 py-4 ${className || ''}`}
+      {...props}
+    >
+      <h2 className="text-lg font-semibold text-gray-900">{children}</h2>
+      {showCloseButton && onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500"
+        >
+          <span className="sr-only">Close</span>
+          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+Modal.Body = function ModalBody({ children, className, ...props }: ModalBodyProps) {
+  return (
+    <div className={`px-6 py-4 ${className || ''}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+Modal.Footer = function ModalFooter({ children, className, ...props }: ModalFooterProps) {
+  return (
+    <div
+      className={`flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 ${className || ''}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/tailwind/components/modal/index.ts.txt

@@ -0,0 +1,39 @@
+/**
+ * Modal Component System
+ *
+ * Controlled modal dialog with composable parts.
+ * Eager-loaded because Modal uses compound component pattern (Modal.Header, Modal.Body).
+ * ImageModal is lazy-loaded since it's a standalone component.
+ *
+ * @example
+ * ```tsx
+ * import { Modal } from '@salla.sa/twilight-theme-engine/components/modal';
+ *
+ * function ConfirmDialog({ isOpen, onClose, onConfirm }) {
+ *   return (
+ *     <Modal isOpen={isOpen} onClose={onClose} size="sm">
+ *       <Modal.Header onClose={onClose}>Confirm Action</Modal.Header>
+ *       <Modal.Body>Are you sure you want to proceed?</Modal.Body>
+ *       <Modal.Footer>
+ *         <Button variant="outline" onClick={onClose}>Cancel</Button>
+ *         <Button onClick={onConfirm}>Confirm</Button>
+ *       </Modal.Footer>
+ *     </Modal>
+ *   );
+ * }
+ * ```
+ */
+
+// Modal is eager (compound component pattern)
+export {
+  Modal,
+  type ModalProps,
+  type ModalHeaderProps,
+  type ModalBodyProps,
+  type ModalFooterProps,
+} from './Modal';
+
+// ImageModal is lazy (standalone component)
+import { LazyImageModal } from './lazy';
+export { LazyImageModal as ImageModal };
+export type { ImageModalProps } from './ImageModal';

package/tailwind/components/modal/lazy.ts.txt

@@ -0,0 +1,10 @@
+import { lazy } from 'react';
+
+/**
+ * Lazy-loaded modal components
+ * ImageModal is lazy-loaded since it's a standalone component.
+ * Modal is kept eager because it uses compound component pattern.
+ */
+export const LazyImageModal = lazy(() =>
+  import('./ImageModal').then((m) => ({ default: m.ImageModal }))
+);

package/tailwind/components/navigation/MainMenu.tsx.txt

@@ -0,0 +1,94 @@
+import { useMemo, memo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useTwilight } from '../../providers/twilight-context';
+import { useTranslation } from '../../providers/I18nProvider';
+import { Link } from '../common';
+import { menu } from '../../api/menu';
+import type { MenuItem } from '../../types';
+
+const SKELETON_ITEMS = [
+  { id: 'first', width: 'w-16' },
+  { id: 'second', width: 'w-20' },
+  { id: 'third', width: 'w-24' },
+  { id: 'fourth', width: 'w-16' },
+  { id: 'fifth', width: 'w-20' },
+];
+
+const MainMenuSkeleton = memo(function MainMenuSkeleton() {
+  return (
+    <nav>
+      <ul className="main-menu">
+        {SKELETON_ITEMS.map(({ id, width }) => (
+          <li key={id} className="!hidden lg:!block root-level">
+            <Link to="#">
+              <span className={`inline-block animate-pulse rounded bg-gray-200 h-4 ${width}`} />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+});
+
+export function MainMenu() {
+  const { theme } = useTwilight();
+  const { data: menus = [], isLoading } = useQuery(menu.queries.header());
+  const { t } = useTranslation();
+
+  const { visibleMenus, hiddenMenus } = useMemo(() => {
+    const enableMore = theme?.settings?.is_more_button_enabled;
+    const visibleCount = 7;
+
+    if (enableMore && menus.length > visibleCount) {
+      return {
+        visibleMenus: menus.slice(0, visibleCount),
+        hiddenMenus: menus.slice(visibleCount),
+      };
+    }
+
+    return { visibleMenus: menus, hiddenMenus: [] };
+  }, [menus, theme?.settings?.enable_more_menu, theme?.settings?.is_more_button_enabled]);
+
+  if (isLoading) {
+    return <MainMenuSkeleton />;
+  }
+
+  const renderItem = (item: MenuItem, isChild = false, inMoreMenu = false) => {
+    const hasChildren = item.has_children && item.children && item.children.length > 0;
+    const showDropdown = hasChildren && !inMoreMenu;
+
+    return (
+      <li
+        key={item.id}
+        className={`${isChild ? 'relative' : '!hidden lg:!block root-level'} ${hasChildren ? 'has-children' : ''}`}
+      >
+        <Link to={item.url}>
+          <span>{item.title}</span>
+        </Link>
+        {showDropdown && (
+          <div className="sub-menu w-56">
+            <ul>{item?.children?.map((child: MenuItem) => renderItem(child, true))}</ul>
+          </div>
+        )}
+      </li>
+    );
+  };
+
+  return (
+    <nav>
+      <ul className="main-menu">
+        {visibleMenus.map((item) => renderItem(item))}
+        {hiddenMenus.length > 0 && (
+          <li id="more-menu-dropdown" className="!hidden lg:!block root-level has-children">
+            <Link to="#">
+              <span>{t('common.titles.more', 'More')}</span>
+            </Link>
+            <div className="sub-menu w-56">
+              <ul>{hiddenMenus.map((item) => renderItem(item, true, true))}</ul>
+            </div>
+          </li>
+        )}
+      </ul>
+    </nav>
+  );
+}