@lightspeed/crane 2.0.4 → 3.0.0

package/template/page-templates/example-template/pages/home.ts

@@ -1,36 +1,34 @@
+import {
+  section,
+  content,
+  design,
+} from '@lightspeed/crane-api';
+
 export default {
   sections: [
-    {
-      type: 'default',
+    section.default({
       id: 'slider',
       showcase_id: '001',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'example-section',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'example-section',
       showcase_overrides: {
         content: {
-          section_title: {
-            type: 'INPUTBOX',
+          section_title: content.default.inputbox({
             text: '$label.template_standard_showcase_1.section_title.text',
-          },
-
-          images: {
-            type: 'DECK',
+          }),
+          images: content.default.deck({
             cards: [
               {
                 settings: {
-                  image_text: {
-                    type: 'TEXTAREA',
+                  image_text: content.default.textarea({
                     text: '$label.showcase_2.image_text_1.text',
-                  },
-                  image_content: {
-                    type: 'IMAGE',
+                  }),
+                  image_content: content.default.image({
                     imageData: {
                       set: {
                         MOBILE_WEBP_LOW_RES: {
@@ -48,21 +46,18 @@ export default {
                       },
                       borderInfo: {},
                     },
-                  },
-                  image_link: {
-                    type: 'INPUTBOX',
+                  }),
+                  image_link: content.default.inputbox({
                     text: '$label.showcase_2.image_link_1.text',
-                  },
+                  }),
                 },
               },
               {
                 settings: {
-                  image_text: {
-                    type: 'TEXTAREA',
+                  image_text: content.default.textarea({
                     text: '$label.showcase_2.image_text_2.text',
-                  },
-                  image_content: {
-                    type: 'IMAGE',
+                  }),
+                  image_content: content.default.image({
                     imageData: {
                       set: {
                         MOBILE_WEBP_LOW_RES: {
@@ -80,18 +75,15 @@ export default {
                       },
                       borderInfo: {},
                     },
-                  },
+                  }),
                 },
               },
-
               {
                 settings: {
-                  image_text: {
-                    type: 'TEXTAREA',
+                  image_text: content.default.textarea({
                     text: '$label.showcase_2.image_text_3.text',
-                  },
-                  image_content: {
-                    type: 'IMAGE',
+                  }),
+                  image_content: content.default.image({
                     imageData: {
                       set: {
                         MOBILE_WEBP_LOW_RES: {
@@ -109,18 +101,15 @@ export default {
                       },
                       borderInfo: {},
                     },
-                  },
+                  }),
                 },
               },
-
               {
                 settings: {
-                  image_text: {
-                    type: 'TEXTAREA',
+                  image_text: content.default.textarea({
                     text: '$label.showcase_2.image_text_4.text',
-                  },
-                  image_content: {
-                    type: 'IMAGE',
+                  }),
+                  image_content: content.default.image({
                     imageData: {
                       set: {
                         MOBILE_WEBP_LOW_RES: {
@@ -138,41 +127,37 @@ export default {
                       },
                       borderInfo: {},
                     },
-                  },
+                  }),
                 },
               },
             ],
-          },
+          }),
         },
         design: {
-          section_title: {
-            type: 'TEXT',
+          section_title: design.default.text({
             font: 'global.fontFamily.body',
             size: 42,
             bold: true,
             italic: true,
             color: '#222',
-          },
-          image_text: {
-            type: 'TEXT',
+          }),
+          image_text: design.default.text({
             size: 22,
             bold: false,
             italic: true,
-          },
-          background: {
-            type: 'BACKGROUND',
+          }),
+          background: design.default.background({
             style: 'COLOR',
             color: 'global.color.background',
-          },
-          image_content: {
-            type: 'IMAGE',
+          }),
+          image_content: design.default.image({
             overlay: 'GRADIENT',
             color: ['#FFFFFF', '#CCCCCC'],
-          },
+          }),
         },
         layoutId: 'Caption_Under_Image',
         blockName: '$label.showcase_2.blockName',
       },
-    },
+    }),
   ],
 };

package/template/page-templates/example-template/pages/product.ts

@@ -1,10 +1,7 @@
-import { StorePageConfiguration } from '@lightspeed/crane-api';
+import { section } from '@lightspeed/crane-api';
 
 export default {
   sections: [
-    {
-      type: 'store',
-      id: undefined,
-    },
+    section.store({}),
   ],
-} satisfies StorePageConfiguration;
+};

package/template/preview/sections/preview.html

@@ -63,7 +63,11 @@
 
   setDistFolderPath("../../../dist");
 
-  const showcaseModules = import.meta.glob('../../dist/sections/*/js/showcases/*.mjs');
+  const showcaseModules = {
+    ...import.meta.glob('../../dist/sections/*/js/showcases/*.mjs'),
+    ...import.meta.glob('../../dist/headers/*/js/showcases/*.mjs'),
+    ...import.meta.glob('../../dist/footers/*/js/showcases/*.mjs'),
+  };
   const select = document.getElementById('showcaseDropdown');
   const showCaseOptions = dropdownOptions(showcaseModules);
 
@@ -102,14 +106,14 @@
 
   select.addEventListener('change', async (e) => {
     const showcaseValue = e.target.value;
-    const [sectionName, showcaseId] = showcaseValue.split(':');
+    const [blockType, blockName, showcaseId] = showcaseValue.split(':');
 
     // Save the active showcase to sessionStorage
     saveActiveShowcase(showcaseValue);
 
     // Render the showcase
-    renderShowcase(sectionName, showcaseId);
-    fetch(`${window.location.origin}/chosen-section/${sectionName}`)
+    renderShowcase(blockType, blockName, showcaseId);
+    fetch(`${window.location.origin}/chosen-section/${blockName}`)
       .catch(console.error);
   });
 
@@ -131,8 +135,8 @@
 
   // Render the initial showcase
   if (initialShowcase) {
-    const [sectionName, showcaseId] = initialShowcase.split(':');
-    renderShowcase(sectionName, showcaseId);
+    const [blockType, blockName, showcaseId] = initialShowcase.split(':');
+    renderShowcase(blockType, blockName, showcaseId);
   }
 </script>
 </body>