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

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

@@ -0,0 +1,28 @@
+import { lazy } from 'react';
+
+/**
+ * Lazy-loaded common components
+ * Use these for code-splitting non-critical components
+ *
+ * NOTE: Skeleton components are sourced from @salla.sa/twilight-components-react
+ * because they must render instantly during route transitions.
+ */
+export const LazyBreadcrumb = lazy(() =>
+  import('./Breadcrumb').then((m) => ({ default: m.Breadcrumb }))
+);
+
+export const LazyNoContent = lazy(() =>
+  import('./NoContent').then((m) => ({ default: m.NoContent }))
+);
+
+export const LazyRenderWhenVisible = lazy(() =>
+  import('./RenderWhenVisible').then((m) => ({ default: m.RenderWhenVisible }))
+);
+
+export const LazyCurrencySymbol = lazy(() =>
+  import('./CurrencySymbol').then((m) => ({ default: m.CurrencySymbol }))
+);
+
+export const LazyErrorPage = lazy(() =>
+  import('./ErrorPage').then((m) => ({ default: m.ErrorPage }))
+);

package/tailwind/components/defineComponent.ts.txt

@@ -0,0 +1,32 @@
+import { registry } from './ComponentRegistry';
+import type { ComponentType } from '../types';
+
+interface DefineComponentConfig<P = Record<string, unknown>> {
+  name: string;
+  component: ComponentType<P>;
+  override?: boolean;
+}
+
+export function defineComponent<P = Record<string, unknown>>(
+  config: DefineComponentConfig<P>
+): ComponentType<P> {
+  if (config.override) {
+    registry.override(config.name, config.component);
+  } else {
+    registry.register(config.name, config.component);
+  }
+
+  return config.component;
+}
+
+export function registerComponents(components: Record<string, ComponentType>): void {
+  for (const [name, component] of Object.entries(components)) {
+    registry.register(name, component);
+  }
+}
+
+export function overrideComponents(components: Record<string, ComponentType>): void {
+  for (const [name, component] of Object.entries(components)) {
+    registry.override(name, component);
+  }
+}

package/tailwind/components/drawer/Drawer.tsx.txt

@@ -0,0 +1,219 @@
+/**
+ * Drawer Component
+ *
+ * A slide-in panel from the side of the screen, commonly used for mobile menus.
+ */
+
+import React, { useEffect, useCallback, useRef, type ReactNode, type HTMLAttributes } from 'react';
+import { createPortal } from 'react-dom';
+import { useTwilight } from '../../providers/TwilightProvider';
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  /**
+   * Width of the drawer
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'full';
+  /**
+   * Close drawer when clicking backdrop
+   * @default true
+   */
+  closeOnBackdropClick?: boolean;
+  /**
+   * Close drawer on Escape key
+   * @default true
+   */
+  closeOnEscape?: boolean;
+  /**
+   * Prevent body scroll when drawer is open
+   * @default true
+   */
+  preventBodyScroll?: boolean;
+  /**
+   * Additional className for the drawer content
+   */
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-64',
+  md: 'w-80',
+  lg: 'w-96',
+  full: 'w-full',
+};
+
+export function Drawer({
+  isOpen,
+  onClose,
+  children,
+  size = 'md',
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  preventBodyScroll = true,
+  className,
+}: DrawerProps) {
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+  // Use TwilightProvider to get theme direction
+  // Position is automatically determined: left for LTR, right for RTL
+  const { theme } = useTwilight();
+  const isRtl = theme?.is_rtl ?? false;
+  const position = isRtl ? 'right' : 'left';
+
+  // Handle Escape key
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && closeOnEscape) {
+        onClose();
+      }
+    },
+    [closeOnEscape, onClose]
+  );
+
+  // Handle backdrop click
+  const handleBackdropClick = useCallback(
+    (_event: React.MouseEvent) => {
+      if (closeOnBackdropClick) {
+        onClose();
+      }
+    },
+    [closeOnBackdropClick, onClose]
+  );
+
+  // Focus management and body scroll
+  useEffect(() => {
+    if (isOpen) {
+      // Store the previously focused element
+      previousActiveElement.current = document.activeElement as HTMLElement;
+
+      // Focus the drawer
+      drawerRef.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;
+  }
+
+  // Translate classes: left drawer slides from -100%, right drawer slides from +100%
+  const translateClass = isOpen
+    ? 'translate-x-0'
+    : position === 'left'
+      ? '-translate-x-full'
+      : 'translate-x-full';
+
+  return createPortal(
+    <div className="fixed inset-0 z-[200]" aria-modal="true" role="dialog">
+      {/* Backdrop */}
+      <div
+        className={`absolute inset-0 bg-black/50 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
+        onClick={handleBackdropClick}
+        onKeyDown={(e) => {
+          if ((e.key === 'Enter' || e.key === ' ') && closeOnBackdropClick) {
+            e.preventDefault();
+            onClose();
+          }
+        }}
+        role="presentation"
+      />
+
+      {/* Drawer Content */}
+      <div
+        ref={drawerRef}
+        tabIndex={-1}
+        className={`fixed top-0 bottom-0 flex flex-col bg-white shadow-xl ${sizeClasses[size]} ${position === 'left' ? 'left-0' : 'right-0'} transform transition-transform duration-300 ease-out ${translateClass} ${className || ''}`}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+// Drawer Sub-components
+export interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+Drawer.Header = function DrawerHeader({
+  children,
+  showCloseButton = true,
+  onClose,
+  className,
+  ...props
+}: DrawerHeaderProps) {
+  return (
+    <div
+      className={`flex items-center justify-between border-b border-gray-200 px-4 py-3 ${className || ''}`}
+      {...props}
+    >
+      <h2 className="text-lg font-semibold text-gray-900">{children}</h2>
+      {showCloseButton && onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100 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 DrawerBodyProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+Drawer.Body = function DrawerBody({ children, className, ...props }: DrawerBodyProps) {
+  return (
+    <div className={`flex-1 overflow-y-auto px-4 py-3 ${className || ''}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+Drawer.Footer = function DrawerFooter({ children, className, ...props }: DrawerFooterProps) {
+  return (
+    <div className={`border-t border-gray-200 px-4 py-3 ${className || ''}`} {...props}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,38 @@
+/**
+ * Drawer Component System
+ *
+ * A slide-in panel for mobile navigation and side content.
+ * Eager-loaded because it uses compound component pattern (Drawer.Header, Drawer.Body).
+ *
+ * @example
+ * ```tsx
+ * import { Drawer } from '@salla.sa/twilight-theme-engine/components/drawer';
+ *
+ * function MobileNav() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setIsOpen(true)}>☰ Menu</button>
+ *       <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} position="left">
+ *         <Drawer.Header onClose={() => setIsOpen(false)}>Menu</Drawer.Header>
+ *         <Drawer.Body>
+ *           <nav className="space-y-2">
+ *             <a href="/" className="block py-2">Home</a>
+ *             <a href="/products" className="block py-2">Products</a>
+ *           </nav>
+ *         </Drawer.Body>
+ *       </Drawer>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+
+export {
+  Drawer,
+  type DrawerProps,
+  type DrawerHeaderProps,
+  type DrawerBodyProps,
+  type DrawerFooterProps,
+} from './Drawer';

package/tailwind/components/dropdown/Dropdown.tsx.txt

@@ -0,0 +1,166 @@
+/**
+ * Dropdown Component
+ *
+ * A controlled dropdown menu with keyboard navigation and click-away support.
+ *
+ * @example
+ * ```tsx
+ * function UserMenu() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <Dropdown isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *       <Dropdown.Trigger onClick={() => setIsOpen(!isOpen)}>
+ *         <button>Account ▼</button>
+ *       </Dropdown.Trigger>
+ *       <Dropdown.Menu>
+ *         <Dropdown.Item href="/profile">Profile</Dropdown.Item>
+ *         <Dropdown.Item href="/orders">Orders</Dropdown.Item>
+ *         <Dropdown.Item onClick={handleLogout}>Logout</Dropdown.Item>
+ *       </Dropdown.Menu>
+ *     </Dropdown>
+ *   );
+ * }
+ * ```
+ */
+
+import { type ReactNode, type HTMLAttributes } from 'react';
+import { useClickAway } from '@uidotdev/usehooks';
+
+export interface DropdownProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  /**
+   * Position of the dropdown menu
+   * @default 'bottom-start'
+   */
+  position?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+  /**
+   * Additional className for the dropdown container
+   */
+  className?: string;
+}
+
+const positionClasses = {
+  'bottom-start': 'top-full start-0',
+  'bottom-end': 'top-full end-0',
+  'top-start': 'bottom-full start-0',
+  'top-end': 'bottom-full end-0',
+};
+
+export function Dropdown({ isOpen, onClose, children, className }: DropdownProps) {
+  // useClickAway returns a ref that we attach to the container
+  // It calls the callback when clicking outside the element
+  const dropdownRef = useClickAway<HTMLDivElement>(() => {
+    if (isOpen) {
+      onClose();
+    }
+  });
+
+  return (
+    <div ref={dropdownRef} className={`relative inline-block ${className || ''}`}>
+      {children}
+    </div>
+  );
+}
+
+// Trigger Component
+export interface DropdownTriggerProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+Dropdown.Trigger = function DropdownTrigger({
+  children,
+  className,
+  ...props
+}: DropdownTriggerProps) {
+  return (
+    <div className={`inline-block ${className || ''}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+// Menu Component
+export interface DropdownMenuProps extends HTMLAttributes<HTMLUListElement> {
+  children: ReactNode;
+  isOpen?: boolean;
+  position?: DropdownProps['position'];
+}
+
+Dropdown.Menu = function DropdownMenu({
+  children,
+  isOpen = false,
+  position = 'bottom-start',
+  className,
+  ...props
+}: DropdownMenuProps) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <ul
+      className={`absolute z-40 mt-1 min-w-[10rem] rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5 animate-in fade-in slide-in-from-top-1 duration-100 ${positionClasses[position]} ${className || ''}`}
+      role="menu"
+      {...props}
+    >
+      {children}
+    </ul>
+  );
+};
+
+// Item Component
+export interface DropdownItemProps extends HTMLAttributes<HTMLLIElement> {
+  children: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  active?: boolean;
+}
+
+Dropdown.Item = function DropdownItem({
+  children,
+  href,
+  onClick,
+  disabled = false,
+  active = false,
+  className,
+  ...props
+}: DropdownItemProps) {
+  const classes = `flex cursor-pointer items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 ${active ? 'bg-gray-100 text-gray-900' : ''} ${disabled ? 'cursor-not-allowed opacity-50 hover:bg-transparent' : ''} ${className || ''}`;
+
+  if (href) {
+    return (
+      <li role="menuitem" {...props}>
+        <a href={href} className={classes}>
+          {children}
+        </a>
+      </li>
+    );
+  }
+
+  return (
+    <li
+      role="menuitem"
+      onClick={disabled ? undefined : onClick}
+      onKeyDown={(e) => {
+        if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
+      tabIndex={disabled ? -1 : 0}
+      className={classes}
+      {...props}
+    >
+      {children}
+    </li>
+  );
+};
+
+// Divider Component
+Dropdown.Divider = function DropdownDivider({ className }: HTMLAttributes<HTMLLIElement>) {
+  return <li className={`my-1 h-px bg-gray-200 ${className || ''}`} />;
+};

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

@@ -0,0 +1,40 @@
+/**
+ * Dropdown Component System
+ *
+ * A controlled dropdown menu with keyboard navigation.
+ * Eager-loaded because it uses compound component pattern (Dropdown.Trigger, Dropdown.Menu).
+ *
+ * @example
+ * ```tsx
+ * import { Dropdown } from '@salla.sa/twilight-theme-engine/components/dropdown';
+ *
+ * function SortDropdown() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const [sort, setSort] = useState('newest');
+ *
+ *   return (
+ *     <Dropdown isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *       <Dropdown.Trigger onClick={() => setIsOpen(!isOpen)}>
+ *         <button>Sort: {sort}</button>
+ *       </Dropdown.Trigger>
+ *       <Dropdown.Menu isOpen={isOpen}>
+ *         <Dropdown.Item onClick={() => { setSort('newest'); setIsOpen(false); }}>
+ *           Newest
+ *         </Dropdown.Item>
+ *         <Dropdown.Item onClick={() => { setSort('price-asc'); setIsOpen(false); }}>
+ *           Price: Low to High
+ *         </Dropdown.Item>
+ *       </Dropdown.Menu>
+ *     </Dropdown>
+ *   );
+ * }
+ * ```
+ */
+
+export {
+  Dropdown,
+  type DropdownProps,
+  type DropdownTriggerProps,
+  type DropdownMenuProps,
+  type DropdownItemProps,
+} from './Dropdown';

package/tailwind/components/home/BundleComponent.tsx.txt

@@ -0,0 +1,35 @@
+import { memo, useState, useEffect } from 'react';
+
+export interface BundleComponentProps {
+  data: {
+    component_name: string;
+    bundle_id: string;
+    [key: string]: unknown;
+  };
+}
+
+export const BundleComponent = memo(function BundleComponent(props: BundleComponentProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const { component_name: componentName, bundle_id: bundleId, ...rest } = props.data;
+  const config = JSON.stringify(rest);
+
+  return (
+    <>
+      <salla-custom-component
+        component-name={componentName}
+        bundle-id={bundleId}
+        config={config}
+        suppressHydrationWarning
+      />
+    </>
+  );
+});

package/tailwind/components/home/ComponentErrorBoundary.tsx.txt

@@ -0,0 +1,98 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { TwilightContext } from '../../providers/twilight-context';
+import type { TwilightContextValue } from '../../types/twilight';
+import type { HomeComponentData } from '../../types';
+
+interface ComponentErrorBoundaryProps {
+  children: ReactNode;
+  data: HomeComponentData;
+  position: number;
+}
+
+interface ComponentErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+function DevelopmentErrorCard({ error, data }: { error: Error; data: HomeComponentData }) {
+  return (
+    <section
+      dir="ltr"
+      className="s-block container overflow-hidden bg-red-50 border border-red-300 p-4"
+    >
+      <p className="text-red-800 text-sm font-bold">Home Component Error: {data.path}</p>
+      <p className="text-red-700 text-sm mt-2">{error.message}</p>
+      <details className="mt-2">
+        <summary className="text-xs cursor-pointer text-red-600">Stack Trace</summary>
+        <pre className="text-xs mt-1 overflow-auto max-h-32 text-red-700">{error.stack}</pre>
+      </details>
+      <details className="mt-2">
+        <summary className="text-xs cursor-pointer text-red-600">Component Data</summary>
+        <pre className="text-xs mt-1 overflow-auto max-h-32 text-red-700">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      </details>
+    </section>
+  );
+}
+
+export class ComponentErrorBoundary extends Component<
+  ComponentErrorBoundaryProps,
+  ComponentErrorBoundaryState
+> {
+  static contextType = TwilightContext;
+
+  declare context: TwilightContextValue | null;
+
+  constructor(props: ComponentErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ComponentErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  // Blocks are keyed by position, so a replacement block at the same position reuses
+  // this boundary. An error belongs to the block that threw it, not the position.
+  componentDidUpdate(prevProps: ComponentErrorBoundaryProps): void {
+    if (this.state.hasError && prevProps.data !== this.props.data) {
+      this.setState({ hasError: false, error: null });
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    if (!this.context) {
+      console.error('[ComponentErrorBoundary] Must be used within TwilightProvider');
+      return;
+    }
+    const { log } = this.context;
+    const { data, position } = this.props;
+
+    log.groupCollapsed(`HomeComponent Error: ${data.path || 'unknown'}`);
+    log.error('ERROR', error.message);
+    log.label('COMPONENT', data.path || 'unknown');
+    log.label('POSITION', position);
+    log.label('URL', typeof window !== 'undefined' ? window.location.href : 'SSR');
+    log.label('TIME', new Date().toISOString());
+    log.trace('STACK TRACE', error.stack || '');
+    log.trace('COMPONENT STACK', errorInfo.componentStack || '');
+    log.dir('COMPONENT DATA', data);
+    log.groupEnd();
+  }
+
+  render(): ReactNode {
+    const { hasError, error } = this.state;
+    const { children, data } = this.props;
+
+    if (hasError && error) {
+      if (process.env.NODE_ENV === 'production') {
+        return null;
+      }
+
+      return <DevelopmentErrorCard error={error} data={data} />;
+    }
+
+    return children;
+  }
+}