@lightspeed/crane 3.0.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.4",
-    "@lightspeed/crane-api": "2.0.0",
+    "@lightspeed/crane-api": "2.2.0",
     "@lightspeed/eslint-config-crane": "1.1.3",
     "@types/micromatch": "^4.0.8",
     "@types/prompts": "^2.4.2",

package/template/preview/shared/api-routes.ts

@@ -435,7 +435,7 @@ async function handleGetBlockConfigFull(
  */
 function getAvailableShowcases(blockType: BlockType, blockName: string, distPath: string): string[] {
   try {
-    const showcasesPath = path.join(distPath, blockType, blockName, 'js', 'showcases');
+    const showcasesPath = path.resolve(distPath, blockType, blockName, 'js', 'showcases');
 
     if (!fs.existsSync(showcasesPath)) {
       console.warn(`[API Routes] Showcases directory not found for ${blockType}/"${blockName}": ${showcasesPath}`);
@@ -511,20 +511,20 @@ async function handleGetTile(
 
       const showcaseIds = getShowcaseIds(blockType, blockName, distPath);
       return showcaseIds.map(async (showcaseId) => {
-        const { content, design } = await getShowcaseData(
+        const { content, design, tileName } = await getShowcaseData(
           blockType,
           blockName,
           showcaseId,
           distPath,
         );
-        return { blockName, showcaseId, content, design };
+        return { blockName, showcaseId, content, design, tileName };
       });
     });
 
     // Wait for all showcase data in parallel
     const allShowcaseData = await Promise.all(blockPromises);
-    for (const { blockName, showcaseId, content, design } of allShowcaseData) {
-      responseData = updateTilesSection(responseData, blockName, showcaseId, content, design);
+    for (const { blockName, showcaseId, content, design, tileName } of allShowcaseData) {
+      responseData = updateTilesSection(responseData, blockName, showcaseId, content, design, tileName);
     }
     res.statusCode = 200;
     res.setHeader('Content-Type', 'application/json');

package/template/preview/shared/preview.ts

@@ -239,25 +239,60 @@ export function mergeDesign(
   return result;
 }
 
+function parseAccordionDesign(comp: any): Record<string, any> {
+  const items: Record<string, any> = {};
+  Object.entries(comp.items || {}).forEach(([itemName, item]: [string, any]) => {
+    const editors: Record<string, any> = {};
+    Object.entries(item.editors || {}).forEach(([editorName, editor]: [string, any]) => {
+      editors[editorName] = editor.defaults || {};
+    });
+    items[itemName] = { label: item.label, editors };
+  });
+  return { sortable: comp.sortable, items };
+}
+
+function mergeAccordionShowcase(baseAccordion: Record<string, any>, showcaseAccordion: Record<string, any>): Record<string, any> {
+  const mergedItems: Record<string, any> = { ...baseAccordion.items };
+  Object.entries(showcaseAccordion.items || {}).forEach(([itemName, showcaseItem]: [string, any]) => {
+    const baseItem = mergedItems[itemName];
+    if (!baseItem) return;
+    mergedItems[itemName] = {
+      ...baseItem,
+      editors: { ...baseItem.editors, ...(showcaseItem.editors || {}) },
+    };
+  });
+  return { sortable: baseAccordion.sortable, items: mergedItems };
+}
+
 export function designTransformer(design: Record<string, any>, showCaseDesign: Record<string, any>, isApiRender: boolean = false): Record<string, any> {
   const parsedDesign: Record<string, any> = {};
   const parsedShowcaseDesign: Record<string, any> = {};
+  const accordionKeys: Set<string> = new Set();
+
   Object.entries(design || {}).forEach(([key, comp]) => {
     // Skip DIVIDER elements - they're UI-only and don't have runtime data
-    if (comp?.type === 'DIVIDER') {
+    if (comp?.type === 'DIVIDER' || comp?.type === 'INFO') {
       return;
     }
     // Skip BACKGROUND - it's handled separately by createBackgroundDesign
     if (comp?.type === 'BACKGROUND') {
       return;
     }
-    // Use defaults if available, otherwise use empty object
+    if (comp?.type === 'ACCORDION') {
+      accordionKeys.add(key);
+      parsedDesign[key] = parseAccordionDesign(comp);
+      return;
+    }
     parsedDesign[key] = comp?.defaults || {};
   });
 
   Object.entries(showCaseDesign || {}).forEach(([key, comp]) => {
     // Skip DIVIDER elements - they're UI-only and don't have runtime data
-    if (comp?.type === 'DIVIDER') {
+    if (comp?.type === 'DIVIDER' || comp?.type === 'INFO') {
+      return;
+    }
+    if (comp?.type === 'ACCORDION') {
+      parsedShowcaseDesign[key] = comp;
       return;
     }
     // Skip BACKGROUND - it's handled separately by createBackgroundDesign
@@ -268,7 +303,24 @@ export function designTransformer(design: Record<string, any>, showCaseDesign: R
     parsedShowcaseDesign[key] = type == 'TEXT' ? { ...withoutType, visible: true } : withoutType;
   });
 
-  let overridenDesign = mergeDesign(parsedDesign, parsedShowcaseDesign);
+  // Merge non-ACCORDION entries via shallow merge, then handle ACCORDION separately
+  const nonAccordionDesign: Record<string, any> = {};
+  const nonAccordionShowcase: Record<string, any> = {};
+  Object.entries(parsedDesign).forEach(([k, v]) => {
+    if (!accordionKeys.has(k)) nonAccordionDesign[k] = v;
+  });
+  Object.entries(parsedShowcaseDesign).forEach(([k, v]) => {
+    if (!accordionKeys.has(k)) nonAccordionShowcase[k] = v;
+  });
+
+  let overridenDesign = mergeDesign(nonAccordionDesign, nonAccordionShowcase);
+
+  accordionKeys.forEach(key => {
+    const showcase = parsedShowcaseDesign[key];
+    overridenDesign[key] = showcase
+      ? mergeAccordionShowcase(parsedDesign[key], showcase)
+      : parsedDesign[key];
+  });
 
   try {
     overridenDesign = updateHexColors(overridenDesign);
@@ -564,9 +616,14 @@ export async function getShowcaseData(blockType: BlockType, blockName: string, s
     true,
   );
 
+  // Resolve tileName from showcase blockName translation
+  const blockNameKey = (showcase as any).default?.blockName;
+  const tileName = blockNameKey ? (showcaseTranslations as any).default.en[blockNameKey] : undefined;
+
   return {
     content: overriddenContent,
     design: overriddenDesign,
+    tileName,
   };
 }
 

package/template/preview/shared/utils.ts

@@ -1,6 +1,7 @@
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 import * as fs from 'fs';
 import * as path from 'path';
+import * as urlFromNode from 'url';
 
 import { getShowcaseState, BlockType, BLOCK_TYPES } from './preview';
 
@@ -50,7 +51,11 @@ function addCacheBust(url: string): string {
  * Note: server.js modules are NOT loaded here - they are rendered via renderServerModule
  */
 export async function loadModule(modulePath: string): Promise<unknown> {
-  return import(/* @vite-ignore */ addCacheBust(modulePath));
+  const isWindows = typeof process !== 'undefined' && process.platform === 'win32';
+  const importPath = isWindows && path.isAbsolute(modulePath)
+    ? urlFromNode.pathToFileURL(modulePath).href
+    : modulePath;
+  return import(/* @vite-ignore */ addCacheBust(importPath));
 }
 
 /**
@@ -96,6 +101,7 @@ export async function fetchTiles(authToken?: string, tilesUrl?: string): Promise
  * @param showcaseId - The showcase ID to match
  * @param content - The new content to replace
  * @param design - The new design to replace
+ * @param tileName - The new tile name to replace
  * @returns The updated tiles response object
  */
 export function updateTilesSection(
@@ -104,6 +110,7 @@ export function updateTilesSection(
   showcaseId: string,
   content: any,
   design: any,
+  tileName?: string,
 ): any {
   const targetPattern = `_${sectionName}_${showcaseId}`;
 
@@ -115,6 +122,9 @@ export function updateTilesSection(
       const layout = design.layout || 'CUSTOM_LAYOUT';
       item.design = design;
       item.design.layout = layout;
+      if (tileName) {
+        item.tileName = tileName;
+      }
     }
     return item;
   });

package/template/sections/example-section/settings/design.ts

@@ -51,6 +51,14 @@ export default {
       color: '#333',
     },
   }),
+  info: design.info({
+    label: '$label.info.design.label',
+    description: '$label.info.design.description',
+    button: {
+      label: '$label.info.design.button.label',
+      link: 'https://example.com',
+    },
+  }),
   background: design.background({
     label: '$label.background.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],

package/template/sections/example-section/settings/layout.ts

@@ -30,6 +30,9 @@ export default [
       layout.designOverride.background({
         fieldName: 'background',
       }),
+      layout.designOverride.info({
+        fieldName: 'info',
+      }),
     ],
   }),
 ];

package/template/sections/example-section/settings/translations.ts

@@ -45,6 +45,10 @@ export default translation.init({
     '$label.info.label': 'Content.ts: Info',
     '$label.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
     '$label.info.button.label': 'Content.ts: Learn more',
+
+    '$label.info.design.label': 'Design.ts: Info',
+    '$label.info.design.description': 'Design.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.info.design.button.label': 'Design.ts: Learn more',
   },
 
   nl: {
@@ -87,6 +91,10 @@ export default translation.init({
     '$label.info.label': 'Informatie',
     '$label.info.description': 'Dit is een informatiedeel waar je enkele nuttige tips kunt geven over het gebruik van aangepaste secties',
     '$label.info.button.label': 'Meer informatie',
+
+    '$label.info.design.label': 'Design.ts: Informatie',
+    '$label.info.design.description': 'Design.ts: Dit is een informatiedeel waar je enkele nuttige tips kunt geven over het gebruik van aangepaste secties',
+    '$label.info.design.button.label': 'Design.ts: Meer informatie',
   },
 
   fr: {
@@ -130,5 +138,10 @@ export default translation.init({
     '$label.info.description': 'Content.ts: Ceci est une section d\'information où vous '
       + 'pouvez fournir des conseils utiles sur l\'utilisation de la section personnalisée',
     '$label.info.button.label': 'En savoir plus',
+
+    '$label.info.design.label': 'Design.ts: Info',
+    '$label.info.design.description': 'Design.ts: Ceci est une section d\'information où vous '
+      + 'pouvez fournir des conseils utiles sur l\'utilisation de la section personnalisée',
+    '$label.info.design.button.label': 'Design.ts: En savoir plus',
   },
 });

package/template/sections/example-section/showcases/1.ts

@@ -179,5 +179,8 @@ export default showcase.init({
       overlay: 'GRADIENT',
       color: ['#FFFFFF', '#000000'],
     }),
+    info: design.default.info({
+      description: '$label.showcase_1.info.design.text',
+    }),
   },
 });

package/template/sections/example-section/showcases/2.ts

@@ -170,5 +170,8 @@ export default showcase.init({
       overlay: 'GRADIENT',
       color: ['#FFFFFF', '#000000'],
     }),
+    info: design.default.info({
+      description: '$label.showcase_2.info.design.text',
+    }),
   },
 });

package/template/sections/example-section/showcases/3.ts

@@ -178,5 +178,8 @@ export default showcase.init({
       overlay: 'GRADIENT',
       color: ['#000000', '#00000033'],
     }),
+    info: design.default.info({
+      description: '$label.showcase_3.info.design.text',
+    }),
   },
 });

package/template/sections/example-section/showcases/translations.ts

@@ -34,6 +34,9 @@ export default translation.init({
     '$label.showcase_3.info.text': 'Showcase 3: This is info section where you can provide some useful tips regarding custom section usage',
     '$label.showcase_1.info.button.title': 'Showcase 1: Learn',
     '$label.showcase_3.info.button.title': 'Showcase 3: More',
+    '$label.showcase_1.info.design.text': 'Design.ts: Showcase 1 info description for design settings',
+    '$label.showcase_2.info.design.text': 'Design.ts: Showcase 2 info description for design settings',
+    '$label.showcase_3.info.design.text': 'Design.ts: Showcase 3 info description for design settings',
     '$label.showcase_1.button.defaults.title': 'Button Title',
     '$label.showcase_2.button.defaults.title': 'Button Title',
   },
@@ -70,6 +73,9 @@ export default translation.init({
     '$label.showcase_2.info.text': 'Hier is een gebied voor nuttige tips over het gebruik van aangepaste secties',
     '$label.showcase_1.info.button.title': 'Leren',
     '$label.showcase_3.info.button.title': 'Meer',
+    '$label.showcase_1.info.design.text': 'Showcase 1 infobeschrijving voor ontwerpinstellingen',
+    '$label.showcase_2.info.design.text': 'Showcase 2 infobeschrijving voor ontwerpinstellingen',
+    '$label.showcase_3.info.design.text': 'Showcase 3 infobeschrijving voor ontwerpinstellingen',
     '$label.showcase_1.button.defaults.title': 'Knoptitel',
     '$label.showcase_2.button.defaults.title': 'Knoptitel',
   },
@@ -109,6 +115,9 @@ export default translation.init({
       + 'l\'utilisation de la section personnalisée',
     '$label.showcase_1.info.button.title': 'Showcase 1: Apprendre',
     '$label.showcase_3.info.button.title': 'Showcase 3: Plus',
+    '$label.showcase_1.info.design.text': 'Description info du showcase 1 pour les paramètres de design',
+    '$label.showcase_2.info.design.text': 'Description info du showcase 2 pour les paramètres de design',
+    '$label.showcase_3.info.design.text': 'Description info du showcase 3 pour les paramètres de design',
     '$label.showcase_1.button.defaults.title': 'Titre du bouton',
     '$label.showcase_2.button.defaults.title': 'Titre du bouton',
   },