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

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>
+  );
+}

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

@@ -0,0 +1,160 @@
+import { useState, useCallback, useEffect, memo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useTwilight } from '../../providers/twilight-context';
+import { useTranslation } from '../../providers/I18nProvider';
+import { Drawer } from '../../components/drawer';
+import { Link } from '../common';
+import { menu } from '../../api/menu';
+import type { MenuItem } from '../../types';
+
+export interface MobileMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const MOBILE_SKELETON_ITEMS = 5;
+const SKELETON_WIDTHS = ['w-32', 'w-28', 'w-36', 'w-24', 'w-30'];
+
+const MobileMenuSkeleton = memo(function MobileMenuSkeleton() {
+  return (
+    <ul className="divide-y divide-gray-100">
+      {Array.from({ length: MOBILE_SKELETON_ITEMS }, (_, i) => (
+        <li key={i} className="py-4">
+          <span
+            className={`inline-block animate-pulse rounded bg-gray-200 h-5 ${SKELETON_WIDTHS[i]}`}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+});
+
+export function MobileMenu(props: MobileMenuProps) {
+  if (!props.isOpen) return null;
+  return <MobileMenuContent {...props} />;
+}
+
+function MobileMenuContent({ onClose }: MobileMenuProps) {
+  const { theme } = useTwilight();
+  const { data: menus = [], isLoading } = useQuery(menu.queries.header());
+  const { t } = useTranslation();
+
+  const [menuStack, setMenuStack] = useState<{ title: string; items: MenuItem[] }[]>([]);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const currentLevel = menuStack[menuStack.length - 1] ?? { title: '', items: menus };
+  const isRootLevel = menuStack.length === 0;
+
+  const openSubmenu = useCallback((item: MenuItem) => {
+    if (item.children && item.children.length > 0) {
+      setIsAnimating(true);
+      setMenuStack((prev) => [...prev, { title: item.title, items: item.children! }]);
+      requestAnimationFrame(() => {
+        setIsAnimating(false);
+      });
+    }
+  }, []);
+
+  const goBack = useCallback(() => {
+    setIsAnimating(true);
+    setMenuStack((prev) => prev.slice(0, -1));
+    requestAnimationFrame(() => {
+      setIsAnimating(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    document.body.classList.add('menu-opened');
+    return () => document.body.classList.remove('menu-opened');
+  }, []);
+
+  const getListAnimationClass = () => {
+    if (isAnimating) {
+      return theme.is_rtl ? 'translate-x-4 opacity-0' : '-translate-x-4 opacity-0';
+    }
+    return 'translate-x-0 opacity-100';
+  };
+
+  return (
+    <>
+      <Drawer
+        isOpen
+        onClose={onClose}
+        size="md"
+        closeOnBackdropClick={true}
+        preventBodyScroll={false}
+        className="overflow-visible"
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t('common.buttons.close', 'Close')}
+          className="absolute top-0 w-12 h-12 flex items-center justify-center bg-[#d35a51] text-white hover:bg-red-600 transition-colors z-50 ltr:-right-12 rtl:-left-12"
+        >
+          <i className="sicon-cancel text-xl leading-none"></i>
+        </button>
+
+        <Drawer.Header showCloseButton={false} onClose={onClose}>
+          <div className="flex items-center gap-2 w-full">
+            {!isRootLevel && (
+              <button
+                type="button"
+                className="text-gray-500 hover:text-gray-800 transition-colors flex-shrink-0"
+                onClick={goBack}
+                aria-label={t('common.buttons.back', 'Back')}
+              >
+                <i className="sicon-keyboard_arrow_left text-xl flex items-center justify-center"></i>
+              </button>
+            )}
+            <span className="font-bold text-lg truncate flex-1 text-center pr-6 rtl:pl-6 rtl:pr-0">
+              {isRootLevel ? t('blocks.header.main_menu', 'Menu') : currentLevel.title}
+            </span>
+          </div>
+        </Drawer.Header>
+        <Drawer.Body className="p-0 overflow-hidden">
+          <nav className="mobile-menu h-full overflow-y-auto">
+            {isLoading ? (
+              <MobileMenuSkeleton />
+            ) : (
+              <ul
+                className={`divide-y divide-gray-100 transition-all duration-200 ease-out ${getListAnimationClass()}`}
+              >
+                {currentLevel.items.map((item) => {
+                  const hasChildren =
+                    item.has_children && item.children && item.children.length > 0;
+
+                  return (
+                    <li key={item.id} className="mobile-menu-item">
+                      {hasChildren ? (
+                        <button
+                          type="button"
+                          className="flex items-center justify-between w-full py-4 hover:text-primary transition-colors text-start group"
+                          onClick={() => openSubmenu(item)}
+                        >
+                          <span className="text-gray-800 group-hover:text-primary font-medium text-base">
+                            {item.title}
+                          </span>
+                          <i className="sicon-keyboard_arrow_right rtl:rotate-180 text-gray-500 group-hover:text-primary text-lg flex items-center justify-center h-full"></i>
+                        </button>
+                      ) : (
+                        <Link
+                          to={item.url}
+                          className="block w-full py-4 hover:text-primary transition-colors text-gray-800 font-medium text-base group"
+                          onClick={onClose}
+                        >
+                          <span className="group-hover:translate-x-1 rtl:group-hover:-translate-x-1 inline-block transition-transform">
+                            {item.title}
+                          </span>
+                        </Link>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </nav>
+        </Drawer.Body>
+      </Drawer>
+    </>
+  );
+}

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

@@ -0,0 +1,4 @@
+import { LazyMainMenu, LazyMobileMenu } from './lazy';
+
+// Lazy-loaded navigation components (code-split)
+export { LazyMainMenu as MainMenu, LazyMobileMenu as MobileMenu };

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

@@ -0,0 +1,11 @@
+import { lazy } from 'react';
+
+/**
+ * Lazy-loaded navigation components
+ * Use these for code-splitting navigation sections
+ */
+export const LazyMainMenu = lazy(() => import('./MainMenu').then((m) => ({ default: m.MainMenu })));
+
+export const LazyMobileMenu = lazy(() =>
+  import('./MobileMenu').then((m) => ({ default: m.MobileMenu }))
+);