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

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

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

@@ -0,0 +1,125 @@
+import { memo, useState, useCallback } from 'react';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import type { Product } from '../../types';
+
+interface SectionItem {
+  title?: string;
+  name?: string;
+  type?: string;
+  id?: string;
+  products?: Product[];
+  limit?: number;
+}
+
+interface MainProduct {
+  id?: string;
+  title?: string;
+  value?: string;
+  product?: Product;
+}
+
+export interface FeaturedProductsStyle1Props {
+  data: {
+    items: SectionItem[];
+    main_product?: MainProduct;
+    position?: number;
+    [key: string]: unknown;
+  };
+}
+
+export const FeaturedProductsStyle1 = memo(function FeaturedProductsStyle1({
+  data,
+}: FeaturedProductsStyle1Props) {
+  const items = data.items || [];
+  const mainProduct = data.main_product;
+
+  const [activeTab, setActiveTab] = useState<string>(items[0]?.id || '');
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const handleTabClick = useCallback(
+    (tabId: string) => {
+      if (tabId === activeTab) return;
+      setIsAnimating(true);
+      setActiveTab(tabId);
+      setTimeout(() => setIsAnimating(false), 100);
+    },
+    [activeTab]
+  );
+
+  if (!items.length) return null;
+
+  const hasMultipleSections = items.length > 1;
+
+  return (
+    <>
+      <div className="s-block__title">
+        <div className="right-side">
+          <h2>{mainProduct?.title}</h2>
+        </div>
+        {hasMultipleSections && (
+          <div className="tabs hide-scroll hidden lg:flex">
+            {items.map((section) => (
+              <SallaButton
+                key={section.id}
+                shape="link"
+                onClick={() => handleTabClick(section.id || '')}
+                className={`tab-trigger ${activeTab === section.id ? 'is-active' : ''}`}
+              >
+                {section.title || section.name}
+              </SallaButton>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className={`grid grid-cols-1 gap-8 ${mainProduct?.product ? 'lg:grid-cols-2' : ''}`}>
+        {mainProduct?.product && (
+          <div className="flex flex-col">
+            <custom-salla-product-card
+              shadow-on-hover
+              product={JSON.stringify(mainProduct.product)}
+              isSpecial
+            ></custom-salla-product-card>
+          </div>
+        )}
+        <div className="flex flex-col">
+          {hasMultipleSections && (
+            <div className="tabs mb-4 sm:mb-8 hide-scroll lg:hidden">
+              {items.map((section) => (
+                <SallaButton
+                  key={section.id}
+                  shape="link"
+                  onClick={() => handleTabClick(section.id || '')}
+                  className={`tab-trigger ${activeTab === section.id ? 'is-active' : ''}`}
+                >
+                  {section.title || section.name}
+                </SallaButton>
+              ))}
+            </div>
+          )}
+
+          <div className="tabs-wrapper flex flex-1">
+            {items.map((section) => {
+              const isActive = activeTab === section.id;
+              return (
+                <div
+                  key={section.id}
+                  className={`tabs__item grid-cols-2 ${mainProduct?.product ? '' : 'lg:grid-cols-4'} ${isActive ? 'is-active' : ''} ${isAnimating && isActive ? 'opacity-0 translate-y-3' : ''} ${!isAnimating && isActive ? 'opacity-100 translate-y-0' : ''}`}
+                >
+                  {section.products
+                    ?.slice(0, mainProduct?.product ? 4 : 8)
+                    .map((product, productIndex) => (
+                      <custom-salla-product-card
+                        key={product.id || productIndex}
+                        product={JSON.stringify(product)}
+                      ></custom-salla-product-card>
+                    ))}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,127 @@
+import { memo, useState, useCallback } from 'react';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaProductsList } from '@salla.sa/twilight-components-react';
+import { SallaProductsSlider } from '@salla.sa/twilight-components-react';
+import { product, ProductsListSource } from '../../api/product';
+import { ProductCard } from '../../components/product';
+
+interface ProductSource {
+  source: ProductsListSource;
+  limit?: number;
+  source_value?: number | number[];
+}
+
+interface SectionItem {
+  title?: string;
+  name?: string;
+  type?: string;
+  id?: string;
+  products: ProductSource;
+  limit?: number;
+}
+
+export interface FeaturedProductsStyle2Props {
+  data: {
+    items: SectionItem[];
+    position?: number;
+    is_slider?: boolean;
+    [key: string]: unknown;
+  };
+}
+
+export const FeaturedProductsStyle2 = memo(function FeaturedProductsStyle2({
+  data,
+}: FeaturedProductsStyle2Props) {
+  const items = data.items || [];
+  const isSlider = data.is_slider ?? true;
+
+  const [activeTab, setActiveTab] = useState<string>(items[0]?.id || '');
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const handleTabClick = useCallback(
+    (tabId: string) => {
+      if (tabId === activeTab) return;
+      setIsAnimating(true);
+      setActiveTab(tabId);
+      setTimeout(() => setIsAnimating(false), 100);
+    },
+    [activeTab]
+  );
+
+  const loader = useCallback(
+    (source: ProductsListSource, value?: number | number[], limit?: number) => {
+      return () =>
+        product.list({
+          source: source,
+          sourceValue: value,
+          perPage: limit,
+        });
+    },
+    []
+  );
+
+  if (!items.length) return null;
+
+  const hasMultipleSections = items.length > 1;
+
+  return (
+    <>
+      <div className="container">
+        {hasMultipleSections && (
+          <div className="tabs hide-scroll">
+            {items.map((section) => (
+              <SallaButton
+                key={section.id}
+                fill="outline"
+                onClick={() => handleTabClick(section.id || '')}
+                className={`tab-trigger ${activeTab === section.id ? 'is-active' : ''}`}
+              >
+                {section.title || section.name}
+              </SallaButton>
+            ))}
+          </div>
+        )}
+
+        <div className="tabs-wrapper">
+          {items.map((section) => {
+            const isActive = activeTab === section.id;
+            return (
+              <div
+                key={section.id}
+                className={`tabs__item ${isActive ? 'is-active' : ''} ${isAnimating && isActive ? 'opacity-0 translate-y-3' : ''} ${!isAnimating && isActive ? 'opacity-100 translate-y-0' : ''}`}
+              >
+                {isSlider ? (
+                  <SallaProductsSlider
+                    loader={loader(
+                      section.products.source,
+                      section.products?.source_value,
+                      section.products?.limit
+                    )}
+                    sliderProps={{ id: `section-${section.id}-slider` }}
+                  >
+                    {(product) => (
+                      <ProductCard className="s-products-slider-card" product={product} />
+                    )}
+                  </SallaProductsSlider>
+                ) : (
+                  <SallaProductsList
+                    loader={loader(
+                      section.products.source,
+                      section.products?.source_value,
+                      section.products?.limit
+                    )}
+                    itemsClassName="s-products-list-horizontal-cards"
+                  >
+                    {(products) =>
+                      products.map((product) => <ProductCard key={product.id} product={product} />)
+                    }
+                  </SallaProductsList>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,71 @@
+import { memo } from 'react';
+import { ProductCard } from '../product/ProductCard';
+import type { Product } from '../../types';
+
+interface SectionItem {
+  title?: string;
+  name?: string;
+  type?: string;
+  products?: Product[];
+  featured_product?: Product;
+  limit?: number;
+  id?: string;
+}
+
+export interface FeaturedProductsStyle3Props {
+  data: {
+    items: SectionItem[];
+    position?: number;
+    [key: string]: unknown;
+  };
+}
+
+export const FeaturedProductsStyle3 = memo(function FeaturedProductsStyle3({
+  data,
+}: FeaturedProductsStyle3Props) {
+  const items = data.items || [];
+
+  if (!items.length) return null;
+
+  return (
+    <>
+      <div className="inner">
+        {items.map((section, sectionIndex) => (
+          <div key={section.id || sectionIndex}>
+            <div className="s-block__title">
+              <h2>{section.title}</h2>
+            </div>
+            <div className="flex-1 grid lg:grid-cols-2 gap-4 sm:gap-8">
+              {section.featured_product ? (
+                <>
+                  <ProductCard product={section.featured_product} layout="fullImage" withShadow />
+                  <div className="grid gap-4 sm:gap-8">
+                    {section.products?.slice(0, 3).map((product, idx) => (
+                      <ProductCard
+                        key={product.id}
+                        product={product}
+                        layout="minimal"
+                        withShadow
+                        index={idx}
+                      />
+                    ))}
+                  </div>
+                </>
+              ) : (
+                section.products?.map((product, idx) => (
+                  <ProductCard
+                    key={product.id}
+                    product={product}
+                    layout="minimal"
+                    withShadow
+                    index={idx}
+                  />
+                ))
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+});