@lightspeed/crane 1.3.3 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",

package/template/preview/shared/mock.ts

@@ -0,0 +1,175 @@
+
+export type ExternalContentMock = ExternalContentData
+
+/**
+ * Default mock configuration
+ * Users can modify this in the compiled mock.js file
+ */
+export const externalContentMock: ExternalContentMock = {
+  site: {
+    isPreviewMode: true,
+    account: {
+      title: 'My Account',
+      url: '/account',
+      target: '_self'
+    },
+    cart: {
+      url: '/cart',
+      count: 3
+    },
+    languages: [
+      {
+        code: 'en',
+        description: 'English',
+        main: true,
+        selected: true,
+        url: '/en'
+      },
+      {
+        code: 'es',
+        description: 'Español',
+        main: false,
+        selected: false,
+        url: '/es'
+      }
+    ],
+    legalPages: [
+      {
+        title: 'Privacy Policy',
+        url: '/privacy'
+      },
+      {
+        title: 'Terms of Service',
+        url: '/terms'
+      },
+      {
+        title: 'Refund Policy',
+        url: '/refunds'
+      }
+    ],
+    reportAbuse: {
+      title: 'Report Abuse',
+      url: '/report-abuse',
+      target: '_blank'
+    },
+    madeWith: {
+      url: 'https://www.lightspeedhq.com',
+      target: '_blank',
+      icon: '/assets/lightspeed-icon.png',
+      poweredBy: 'Powered by',
+      company: 'Lightspeed'
+    }
+  },
+
+  category: {
+    categories: [
+      {
+        id: 1,
+        name: 'Electronics',
+        url: '/categories/electronics',
+        imageUrl: '/assets/electronics-category.jpg',
+        thumbnailImageUrl: '/assets/electronics-thumb.jpg',
+        alt: 'Electronics category',
+        imageBorderInfo: {
+          homogeneity: true,
+          color: {
+            r: 255,
+            g: 255,
+            b: 255,
+            a: 1
+          }
+        }
+      },
+      {
+        id: 2,
+        name: 'Clothing',
+        url: '/categories/clothing',
+        imageUrl: '/assets/clothing-category.jpg',
+        thumbnailImageUrl: '/assets/clothing-thumb.jpg',
+        alt: 'Clothing category'
+      },
+      {
+        id: 3,
+        name: 'Home & Garden',
+        url: '/categories/home-garden',
+        imageUrl: '/assets/home-garden-category.jpg',
+        thumbnailImageUrl: '/assets/home-garden-thumb.jpg',
+        alt: 'Home & Garden category'
+      }
+    ],
+    categoryTree: [
+      {
+        id: 1,
+        name: 'Electronics',
+        nameTranslated: {
+          en: 'Electronics',
+          es: 'Electrónicos'
+        },
+        urlPath: '/electronics',
+        enabled: true,
+        children: [
+          {
+            id: 11,
+            name: 'Smartphones',
+            nameTranslated: {
+              en: 'Smartphones',
+              es: 'Teléfonos inteligentes'
+            },
+            urlPath: '/electronics/smartphones',
+            enabled: true,
+            children: []
+          },
+          {
+            id: 12,
+            name: 'Laptops',
+            nameTranslated: {
+              en: 'Laptops',
+              es: 'Portátiles'
+            },
+            urlPath: '/electronics/laptops',
+            enabled: true,
+            children: []
+          }
+        ]
+      },
+      {
+        id: 2,
+        name: 'Clothing',
+        nameTranslated: {
+          en: 'Clothing',
+          es: 'Ropa'
+        },
+        urlPath: '/clothing',
+        enabled: true,
+        children: [
+          {
+            id: 21,
+            name: 'Men\'s Clothing',
+            nameTranslated: {
+              en: 'Men\'s Clothing',
+              es: 'Ropa para hombres'
+            },
+            urlPath: '/clothing/mens',
+            enabled: true,
+            children: []
+          },
+          {
+            id: 22,
+            name: 'Women\'s Clothing',
+            nameTranslated: {
+              en: 'Women\'s Clothing',
+              es: 'Ropa para mujeres'
+            },
+            urlPath: '/clothing/womens',
+            enabled: true,
+            children: []
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export function getExternalContentMock(): ExternalContentMock {
+  return externalContentMock;
+}

package/template/preview/shared/preview.ts

@@ -1,8 +1,10 @@
 /* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { loadModule} from "./utils.ts";
+import { getExternalContentMock } from "./mock";
 
 let distFolderPath: string | null = null;
+let currentApp: any = null;
 
 export function setDistFolderPath(path: string): void {
   distFolderPath = path;
@@ -28,13 +30,15 @@ interface ColorObject {
 }
 
 function hexToColorObject(hex: string): ColorObject {
-  const match = /^#?([0-9a-fA-F]{6})$/.exec(hex);
+  // Support both 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) hex colors
+  const match = /^#?([0-9a-fA-F]{6}([0-9a-fA-F]{2})?)$/.exec(hex);
   if (!match) throw new Error("Invalid hex color format");
   const cleanHex = match[1].toLowerCase();
   const r = parseInt(cleanHex.substring(0, 2), 16);
   const g = parseInt(cleanHex.substring(2, 4), 16);
   const b = parseInt(cleanHex.substring(4, 6), 16);
-  const a = 255;
+  // Extract alpha if present (8-digit hex), otherwise default to 255 (fully opaque)
+  const a = cleanHex.length === 8 ? parseInt(cleanHex.substring(6, 8), 16) : 255;
   const rNorm = r / 255, gNorm = g / 255, bNorm = b / 255;
   const max = Math.max(rNorm, gNorm, bNorm), min = Math.min(rNorm, gNorm, bNorm);
   const delta = max - min;
@@ -50,15 +54,15 @@ function hexToColorObject(hex: string): ColorObject {
     if (h < 0) h += 360;
   }
   return {
-    hex: `#${cleanHex}${a.toString(16).padStart(2, '0')}`,
+    hex: `#${cleanHex.substring(0, 6)}${a.toString(16).padStart(2, '0')}`,
     hsl: { h: Math.round(h), s: +(s * 100).toFixed(1), l: +(l * 100).toFixed(1) },
-    rgba: { r, g, b, a: 1 },
+    rgba: { r, g, b, a: +(a / 255).toFixed(2) },
   };
 }
 
 function updateHexColors(obj: any): any {
-  // Matches either 3-digit (#RGB) or 6-digit (#RRGGBB) hex
-  const hexRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+  // Matches 3-digit (#RGB), 6-digit (#RRGGBB), or 8-digit (#RRGGBBAA) hex
+  const hexRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
 
   function recurse(value: any): any {
     if (Array.isArray(value)) return value.map(recurse);
@@ -92,6 +96,77 @@ const replaceGlobalFont = (obj: any, font: string): void => {
   });
 };
 
+function createBackgroundStructure(type: 'solid' | 'gradient', config: any): any {
+  return {
+    background: {
+      background: {
+        type,
+        ...config,
+      },
+    },
+  };
+}
+
+// Helper function to create default gray background
+function createDefaultBackground(): any {
+  const defaultGrayColor = hexToColorObject('#F9F9F9');
+  return createBackgroundStructure('solid', {
+    solid: { color: defaultGrayColor },
+    color: 'global.color.background',
+  });
+}
+
+// Helper function to check if color is global reference
+function isGlobalColor(color: string): boolean {
+  return typeof color === 'string' && color.startsWith('global.');
+}
+
+function createBackgroundDesign(showcaseBackground: any): any {
+  // No background or invalid background
+  if (!showcaseBackground) {
+    return createDefaultBackground();
+  }
+
+  // Handle gradient backgrounds
+  if (showcaseBackground.style === 'GRADIENT' && Array.isArray(showcaseBackground.color)) {
+    const [fromColor, toColor] = showcaseBackground.color;
+
+    // If either color is global, use default
+    if (isGlobalColor(fromColor) || isGlobalColor(toColor)) {
+      return createDefaultBackground();
+    }
+
+    // Create gradient background
+    return createBackgroundStructure('gradient', {
+      solid: { color: hexToColorObject(fromColor) },
+      gradient: {
+        fromColor: hexToColorObject(fromColor),
+        toColor: hexToColorObject(toColor),
+      },
+      color: `gradient(${fromColor}, ${toColor})`,
+    });
+  }
+
+  // Handle solid color backgrounds
+  const solidColor = showcaseBackground.color;
+
+  // Global color reference
+  if (isGlobalColor(solidColor)) {
+    return createDefaultBackground();
+  }
+
+  // Specific hex color
+  if (typeof solidColor === 'string') {
+    return createBackgroundStructure('solid', {
+      solid: { color: hexToColorObject(solidColor) },
+      color: solidColor,
+    });
+  }
+
+  // Fallback to default
+  return createDefaultBackground();
+}
+
 function overrideSettingsFromShowcase(content: any, showcases: any): any {
   return Object.fromEntries(Object.entries(content).map(([k, v]) => [k, showcases[k] ?? v]));
 }
@@ -256,28 +331,14 @@ export async function renderShowcase(sectionName: string, showcaseId: string): P
   const showcase = await loadModule(`${distFolderPath}/sections/${sectionName}/js/showcases/${showcaseId}.mjs`);
   const design = await loadModule(`${distFolderPath}/sections/${sectionName}/js/settings/design.mjs`);
 
-  const { mount } = client.default.init();
+  // Get showcase background and create background design
+  const showcaseBackground = showcase.default?.design?.background;
+  const backgroundDesign = createBackgroundDesign(showcaseBackground);
 
   const ovveridenDesign = designTransformer(design.default, showcase.default.design || {});
 
   loadSectionCss(sectionName);
 
-  const backgroundDesign = {
-    background: {
-      background: {
-        type: 'solid',
-        solid: {
-          color: {
-            raw: '#F9F9F9',
-            hex: '#F9F9F9',
-            rgba: { r: 19, g: 19, b: 19, a: 1.0 },
-          },
-        },
-        color: 'global.color.background',
-      },
-    },
-  };
-
   const overriddenContent = getContentToRender(
     content.default,
     showcase.default.content || {},
@@ -286,15 +347,32 @@ export async function renderShowcase(sectionName: string, showcaseId: string): P
     sectionName
   );
 
-  mount('#app', {
+  // Get external content mock (can be customized in compiled mock.js)
+  const externalContentMock = getExternalContentMock();
+
+  // Ensure background design always overrides any existing background
+  const finalDesign = { ...ovveridenDesign };
+  finalDesign.background = backgroundDesign.background;
+
+  const state = {
     context: {
       globalDesign: { color: 'global.color.background' },
     },
     data: {
       content: overriddenContent,
-      design: { ...ovveridenDesign, ...backgroundDesign },
+      design: finalDesign,
       defaults: {},
       background: {},
+      externalContent: externalContentMock,
     },
-  });
+  };
+
+  // If app is already mounted, update it; otherwise mount it
+  if (currentApp) {
+    currentApp.update(state);
+  } else {
+    const { mount, update, unmount } = client.default.init();
+    currentApp = { update, unmount };
+    mount('#app', state);
+  }
 }