@lightspeed/crane 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "3.0.0",
+  "version": "3.1.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.1.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

@@ -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

@@ -243,8 +243,8 @@ export function designTransformer(design: Record<string, any>, showCaseDesign: R
   const parsedDesign: Record<string, any> = {};
   const parsedShowcaseDesign: Record<string, any> = {};
   Object.entries(design || {}).forEach(([key, comp]) => {
-    // Skip DIVIDER elements - they're UI-only and don't have runtime data
-    if (comp?.type === 'DIVIDER') {
+    // Skip DIVIDER and INFO elements - they're UI-only and don't have runtime data
+    if (comp?.type === 'DIVIDER' || comp?.type === 'INFO') {
       return;
     }
     // Skip BACKGROUND - it's handled separately by createBackgroundDesign
@@ -256,8 +256,8 @@ export function designTransformer(design: Record<string, any>, showCaseDesign: R
   });
 
   Object.entries(showCaseDesign || {}).forEach(([key, comp]) => {
-    // Skip DIVIDER elements - they're UI-only and don't have runtime data
-    if (comp?.type === 'DIVIDER') {
+    // Skip DIVIDER and INFO elements - they're UI-only and don't have runtime data
+    if (comp?.type === 'DIVIDER' || comp?.type === 'INFO') {
       return;
     }
     // Skip BACKGROUND - it's handled separately by createBackgroundDesign
@@ -564,9 +564,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

@@ -96,6 +96,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 +105,7 @@ export function updateTilesSection(
   showcaseId: string,
   content: any,
   design: any,
+  tileName?: string,
 ): any {
   const targetPattern = `_${sectionName}_${showcaseId}`;
 
@@ -115,6 +117,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',
   },