@evershop/evershop 2.1.0 → 2.1.2

package/src/components/common/Area.tsx

@@ -1,5 +1,7 @@
 import { useAppState } from '@components/common/context/app.js';
-import React from 'react';
+import { generateComponentKey } from '@evershop/evershop/lib/util/keyGenerator';
+import type { WidgetInstance } from '@evershop/evershop/types/widget';
+import React, { useEffect, useState } from 'react';
 import type { ElementType } from 'react';
 
 interface Component {
@@ -31,14 +33,132 @@ interface AreaProps {
   [key: string]: unknown;
 }
 
-interface Widget extends Component {
-  props: Record<string, any>;
-  type: string;
-  areaId: string[];
+const DEBUG_KEY = 'evershop_area_debug';
+
+let toggleButtonMounted = false;
+let debugStylesMounted = false;
+
+function injectDebugStyles() {
+  if (process.env.NODE_ENV !== 'development') return;
+  if (debugStylesMounted || typeof document === 'undefined') return;
+  debugStylesMounted = true;
+  const style = document.createElement('style');
+  style.id = 'evershop-debug-styles';
+  style.textContent = [
+    '.evershop-debug-area__badge { opacity: 0; transition: opacity 0.15s ease; }',
+    '.evershop-debug-area:hover > .evershop-debug-area__badge { opacity: 1; }'
+  ].join('\n');
+  document.head.appendChild(style);
+}
+
+function injectToggleButton() {
+  if (process.env.NODE_ENV !== 'development') return;
+  if (toggleButtonMounted || typeof document === 'undefined') return;
+  toggleButtonMounted = true;
+
+  const btn = document.createElement('button');
+
+  const update = () => {
+    const active = localStorage.getItem(DEBUG_KEY) === '1';
+    btn.textContent = active ? 'Debug: ON' : 'Debug: OFF';
+    btn.style.background = active ? '#3b82f6' : '#6b7280';
+  };
+
+  Object.assign(btn.style, {
+    position: 'fixed',
+    bottom: '16px',
+    right: '16px',
+    zIndex: '99999',
+    padding: '6px 12px',
+    borderRadius: '6px',
+    border: 'none',
+    color: '#fff',
+    fontFamily: 'monospace',
+    fontSize: '12px',
+    cursor: 'pointer',
+    boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+    transition: 'background 0.2s'
+  });
+
+  btn.title = 'Toggle Area debug mode';
+  update();
+
+  btn.addEventListener('click', () => {
+    const next = localStorage.getItem(DEBUG_KEY) === '1' ? '0' : '1';
+    localStorage.setItem(DEBUG_KEY, next);
+    // Notify all tabs and same-page listeners
+    window.dispatchEvent(
+      new StorageEvent('storage', {
+        key: DEBUG_KEY,
+        newValue: next,
+        storageArea: localStorage
+      })
+    );
+    update();
+  });
+
+  document.body.appendChild(btn);
+}
+
+function useDebugMode(): boolean {
+  const [debug, setDebug] = useState(() => {
+    if (process.env.NODE_ENV !== 'development') return false;
+    try {
+      return localStorage.getItem(DEBUG_KEY) === '1';
+    } catch {
+      return false;
+    }
+  });
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'development') return;
+    injectToggleButton();
+    injectDebugStyles();
+
+    const handler = (e: StorageEvent) => {
+      if (e.key === DEBUG_KEY) {
+        setDebug(e.newValue === '1');
+      }
+    };
+    window.addEventListener('storage', handler);
+    return () => window.removeEventListener('storage', handler);
+  }, []);
+
+  return debug;
+}
+
+const AREA_COLORS = [
+  '#3b82f6',
+  '#10b981',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+  '#ec4899',
+  '#06b6d4',
+  '#84cc16',
+  '#f97316',
+  '#6366f1',
+  '#db2777',
+  '#14b8a6',
+  '#22c55e',
+  '#eab308',
+  '#f43f5e'
+];
+
+// Stable color per area ID
+function areaColor(id: string | undefined): string {
+  if (!id) return AREA_COLORS[0];
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = (hash << 5) - hash + id.charCodeAt(i);
+    hash |= 0;
+  }
+  return AREA_COLORS[Math.abs(hash) % AREA_COLORS.length];
 }
 
 function Area(props: AreaProps) {
   const context = useAppState();
+  const debug = useDebugMode();
   const {
     id,
     coreComponents,
@@ -55,8 +175,10 @@ function Area(props: AreaProps) {
     const wildCardWidgets = components?.['*'] || {};
     const assignedWidgets: Component[] = [];
 
-    widgets.forEach((widget: Widget) => {
-      const w = wildCardWidgets[widget.type];
+    widgets.forEach((widget: WidgetInstance) => {
+      const adminKey = generateComponentKey(`admin_widget_${widget.type}`);
+      const frontKey = generateComponentKey(`widget_${widget.type}`);
+      const w = wildCardWidgets[adminKey] || wildCardWidgets[frontKey];
       if (widget.areaId.includes(id) && w !== undefined) {
         assignedWidgets.push({
           id: widget.id,
@@ -77,8 +199,14 @@ function Area(props: AreaProps) {
     );
   })();
   const { propsMap } = context;
+  // In debug mode, always use a real wrapper element so borders/badges can render.
+  // noOuter is intentionally ignored when debug is active.
+  // The process.env.NODE_ENV guard lets Terser statically eliminate this in production.
+  const effectiveNoOuter =
+    process.env.NODE_ENV === 'development' && debug ? false : noOuter;
+
   let WrapperComponent: ElementType = React.Fragment;
-  if (noOuter !== true) {
+  if (effectiveNoOuter !== true) {
     if (wrapper !== undefined) {
       WrapperComponent = wrapper as ElementType;
     } else {
@@ -86,8 +214,8 @@ function Area(props: AreaProps) {
     }
   }
 
-  let areaWrapperProps = {};
-  if (noOuter === true) {
+  let areaWrapperProps: Record<string, any> = {};
+  if (effectiveNoOuter === true) {
     areaWrapperProps = {};
   } else if (typeof wrapperProps === 'object' && wrapperProps !== null) {
     areaWrapperProps = { className: className || '', ...wrapperProps };
@@ -95,39 +223,130 @@ function Area(props: AreaProps) {
     areaWrapperProps = { className: className || '' };
   }
 
+  const color =
+    process.env.NODE_ENV === 'development' && debug ? areaColor(id) : '';
+
+  if (
+    process.env.NODE_ENV === 'development' &&
+    debug &&
+    effectiveNoOuter !== true
+  ) {
+    const existingStyle = areaWrapperProps.style || {};
+    const existingClass = (areaWrapperProps.className || '') as string;
+    areaWrapperProps = {
+      ...areaWrapperProps,
+      className: `${existingClass} evershop-debug-area`.trim(),
+      style: {
+        ...existingStyle,
+        position: 'relative',
+        border: `2px dashed ${color}`,
+        padding: '5px',
+        boxSizing: 'border-box',
+        minHeight: '32px'
+      }
+    };
+  }
+
+  const renderedChildren = areaComponents.map((w, index) => {
+    const C = w.component.default;
+
+    const { id: componentId } = w;
+    const propsData = context.graphqlResponse;
+    const propKeys =
+      componentId !== undefined ? propsMap[componentId] || [] : [];
+
+    const componentProps = propKeys.reduce(
+      (acc: Record<string, any>, map: Record<string, any>) => {
+        const { origin, alias } = map;
+        acc[origin] = propsData[alias];
+        return acc;
+      },
+      {}
+    );
+    if (w.props) {
+      Object.assign(componentProps, w.props);
+    }
+
+    let rendered: React.ReactNode = null;
+
+    if (React.isValidElement(C)) {
+      rendered = <React.Fragment key={index}>{C}</React.Fragment>;
+    } else if (typeof C === 'string') {
+      rendered = <C key={index} {...componentProps} />;
+    } else if (typeof C === 'function') {
+      rendered = <C key={index} areaProps={props} {...componentProps} />;
+    }
+
+    if (!debug || rendered === null || process.env.NODE_ENV !== 'development') {
+      return rendered;
+    }
+
+    return (
+      <div
+        key={index}
+        className="evershop-debug-child"
+        style={{
+          position: 'relative',
+          outline: `1px solid ${color}40`,
+          outlineOffset: '1px'
+        }}
+      >
+        <span
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            zIndex: 9999,
+            background: `${color}cc`,
+            color: '#fff',
+            fontSize: '9px',
+            fontFamily: 'monospace',
+            padding: '1px 5px',
+            borderRadius: '0 0 0 4px',
+            lineHeight: '16px',
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none'
+          }}
+        >
+          order: {w.sortOrder ?? 0}
+        </span>
+        {rendered}
+      </div>
+    );
+  });
+
+  if (process.env.NODE_ENV === 'development' && debug) {
+    return (
+      <WrapperComponent {...areaWrapperProps}>
+        <span
+          className="evershop-debug-area__badge"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 9999,
+            background: color,
+            color: '#fff',
+            fontSize: '10px',
+            fontFamily: 'monospace',
+            padding: '1px 6px',
+            borderRadius: '0 0 4px 0',
+            lineHeight: '16px',
+            whiteSpace: 'nowrap',
+            cursor: 'default'
+          }}
+          title={`Area: #${id}`}
+        >
+          #{id}
+        </span>
+        {renderedChildren}
+      </WrapperComponent>
+    );
+  }
+
   return (
     <WrapperComponent {...areaWrapperProps}>
-      {areaComponents.map((w, index) => {
-        const C = w.component.default;
-
-        const { id } = w;
-        const propsData = context.graphqlResponse;
-        const propKeys = id !== undefined ? propsMap[id] || [] : [];
-
-        const componentProps = propKeys.reduce(
-          (acc: Record<string, any>, map: Record<string, any>) => {
-            const { origin, alias } = map;
-            acc[origin] = propsData[alias];
-            return acc;
-          },
-          {}
-        );
-        if (w.props) {
-          Object.assign(componentProps, w.props);
-        }
-        // Check if C is a React component
-        if (React.isValidElement(C)) {
-          return <React.Fragment key={index}>{C}</React.Fragment>;
-        }
-
-        if (typeof C === 'string') {
-          return <C key={index} {...componentProps} />;
-        }
-
-        return typeof C === 'function' ? (
-          <C key={index} areaProps={props} {...componentProps} />
-        ) : null;
-      })}
+      {renderedChildren}
     </WrapperComponent>
   );
 }

package/src/components/common/Editor.tsx

@@ -16,13 +16,16 @@ const Header: React.FC<{ data: { level: number; text: string } }> = ({
   return React.createElement(tagName, null, data.text);
 };
 
-const List: React.FC<{ data: { items: string[] } }> = ({ data }) => {
+const List: React.FC<{
+  data: { items: string[]; style: 'ordered' | 'unordered' };
+}> = ({ data }) => {
+  const ListTag = data.style === 'ordered' ? 'ol' : 'ul';
   return (
-    <ul>
+    <ListTag>
       {data.items.map((item, index) => (
         <li key={index}>{item}</li>
       ))}
-    </ul>
+    </ListTag>
   );
 };
 

package/src/components/common/ExtendableTable.tsx

@@ -1,4 +1,12 @@
 import Area from '@components/common/Area.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@components/common/ui/Table.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 
@@ -152,6 +160,7 @@ export function ExtendableTable<T = any>({
       onSort={onSort}
       currentSort={currentSort}
     >
+      <Area id={name} />
       <TableContent
         loading={loading}
         noHeader={noHeader}
@@ -180,7 +189,7 @@ function TableContent<T = any>({
   emptyMessage: string;
   className: string;
 }) {
-  const { columns, tableData, tableName } = useTableContext<T>();
+  const { columns, tableData } = useTableContext<T>();
 
   const handleSort = (key: string) => {
     if (!onSort) return;
@@ -194,15 +203,14 @@ function TableContent<T = any>({
 
   return (
     <>
-      <Area id={'shoppingCartItems'} />
-      <table className={className}>
+      <Table className={className}>
         {!noHeader && (
-          <thead>
-            <tr>
+          <TableHeader>
+            <TableRow>
               {columns
                 .filter((col) => !col.isRemoved)
                 .map((col) => (
-                  <th
+                  <TableHead
                     key={col.key}
                     className={`${col.header.className} ${
                       col.sortable ? 'cursor-pointer' : ''
@@ -210,33 +218,33 @@ function TableContent<T = any>({
                     onClick={() => col.sortable && handleSort(col.key)}
                     style={{ width: col.width }}
                   >
-                    <div className="flex items-center space-x-1">
-                      <span>{col.header.label}</span>
-                      {col.sortable && currentSort?.key === col.key && (
-                        <span className="text-blue-500">
-                          {currentSort.direction === 'asc' ? '↑' : '↓'}
-                        </span>
-                      )}
-                    </div>
-                  </th>
+                    <span>{col.header.label}</span>
+                    {col.sortable && currentSort?.key === col.key && (
+                      <span className="text-blue-500">
+                        {currentSort.direction === 'asc' ? '↑' : '↓'}
+                      </span>
+                    )}
+                  </TableHead>
                 ))}
-            </tr>
-          </thead>
+            </TableRow>
+          </TableHeader>
         )}
-        <tbody className="divide-y divide-gray-200">
+        <TableBody>
           {tableData.length === 0 ? (
-            <tr>
-              <td colSpan={columns.filter((col) => !col.isRemoved).length}>
+            <TableRow>
+              <TableCell
+                colSpan={columns.filter((col) => !col.isRemoved).length}
+              >
                 {emptyMessage}
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
           ) : (
             tableData.map((row, rowIndex) => (
-              <tr key={rowIndex}>
+              <TableRow key={rowIndex}>
                 {columns
                   .filter((col) => !col.isRemoved)
                   .map((col) => (
-                    <td
+                    <TableCell
                       key={col.key}
                       className={col.className}
                       style={{ width: col.width }}
@@ -244,13 +252,13 @@ function TableContent<T = any>({
                       {col.render
                         ? col.render(row, rowIndex, loading)
                         : row[col.key]}
-                    </td>
+                    </TableCell>
                   ))}
-              </tr>
+              </TableRow>
             ))
           )}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     </>
   );
 }

package/src/components/common/SimplePagination.tsx

@@ -1,5 +1,4 @@
-import { ChevronLeftIcon } from '@heroicons/react/24/outline';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React from 'react';
 
 interface SimplePaginationProps {
@@ -26,36 +25,36 @@ export function SimplePagination({
       <div className="flex gap-2">
         {page > 1 && (
           <a
-            className="hover:text-interactive border rounded p-[5px] border-divider"
+            className="hover:text-interactive border rounded p-1.25 border-divider"
             href="#"
             onClick={(e) => {
               e.preventDefault();
               setPage(page - 1);
             }}
           >
-            <ChevronLeftIcon width={15} height={15} />
+            <ChevronLeft width={15} height={15} />
           </a>
         )}
         {page === 1 && (
-          <span className="border rounded p-[5px] border-divider text-divider">
-            <ChevronLeftIcon width={15} height={15} />
+          <span className="border rounded p-1.25 border-divider text-divider">
+            <ChevronLeft width={15} height={15} />
           </span>
         )}
         {hasNext && (
           <a
-            className="hover:text-interactive border rounded p-[5px] border-divider"
+            className="hover:text-interactive border rounded p-1.25 border-divider"
             href="#"
             onClick={(e) => {
               e.preventDefault();
               setPage(page + 1);
             }}
           >
-            <ChevronRightIcon width={15} height={15} />
+            <ChevronRight width={15} height={15} />
           </a>
         )}
         {!hasNext && (
-          <span className="border rounded p-[5px] border-divider text-divider">
-            <ChevronRightIcon width={15} height={15} />
+          <span className="border rounded p-1.25 border-divider text-divider">
+            <ChevronRight width={15} height={15} />
           </span>
         )}
       </div>

package/src/components/common/StaticImage.tsx

@@ -11,8 +11,8 @@ export const StaticImage: React.FC<StaticImageProps> = ({
   quality = 75,
   ...props
 }) => {
-  const { graphqlResponse } = useAppState();
-  const baseUrl = graphqlResponse?.pageMeta?.baseUrl || '';
+  const { config } = useAppState();
+  const baseUrl = config?.pageMeta?.baseUrl || '';
 
   const imagePath = useMemo(() => {
     const formattedSubPath = subPath.startsWith('/')