@lightspeed/crane 2.0.4 → 3.0.0

package/template/reference/sections/tag-lines/showcases/2.ts

@@ -1,4 +1,10 @@
-export default {
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '2',
   layoutId: 'Image_Without_Border_Radius',
   previewImage: {
@@ -10,25 +16,20 @@ export default {
   },
   blockName: '$label.showcase_2.blockName',
   content: {
-    section_tagline: {
-      type: 'INPUTBOX',
+    section_tagline: content.default.inputbox({
       text: '$label.showcase_2.section_tagline.text',
-    },
-    section_title: {
-      type: 'INPUTBOX',
+    }),
+    section_title: content.default.inputbox({
       text: '$label.showcase_2.section_title.text',
-    },
-    highlighted_text: {
-      type: 'DECK',
+    }),
+    highlighted_text: content.default.deck({
       cards: [
         {
           settings: {
-            text: {
-              type: 'INPUTBOX',
+            text: content.default.inputbox({
               text: '$label.showcase_2.highlighted_text_1.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -46,17 +47,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
           settings: {
-            text: {
-              type: 'INPUTBOX',
+            text: content.default.inputbox({
               text: '$label.showcase_2.highlighted_text_2.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -74,17 +73,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
           settings: {
-            text: {
-              type: 'INPUTBOX',
+            text: content.default.inputbox({
               text: '$label.showcase_2.highlighted_text_3.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -102,13 +99,12 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
       ],
-    },
-    section_image: {
-      type: 'IMAGE',
+    }),
+    section_image: content.default.image({
       imageData: {
         set: {
           MOBILE_WEBP_LOW_RES: {
@@ -126,53 +122,47 @@ export default {
         },
         borderInfo: {},
       },
-    },
+    }),
   },
   design: {
-    background: {
-      type: 'BACKGROUND',
+    background: design.default.background({
       style: 'GRADIENT',
       color: ['#131313', '#292929'],
-    },
-    section_tagline: {
-      type: 'TEXT',
+    }),
+    section_tagline: design.default.text({
       font: 'pt_mono',
       size: 16,
       bold: true,
       italic: false,
       color: '#F4EFE3',
-    },
-    section_title: {
-      type: 'TEXT',
+    }),
+    section_title: design.default.text({
       font: 'pt_mono',
       size: 48,
       bold: true,
       italic: false,
       color: '#FFFFFF',
-    },
-    highlighted_text_1: {
-      type: 'TEXT',
+    }),
+    highlighted_text_1: design.default.text({
       font: 'pt_mono',
       size: 48,
       bold: true,
       italic: false,
       color: '#BAA33E',
-    },
-    highlighted_text_2: {
-      type: 'TEXT',
+    }),
+    highlighted_text_2: design.default.text({
       font: 'pt_mono',
       size: 48,
       bold: true,
       italic: false,
       color: '#8A91D0',
-    },
-    highlighted_text_3: {
-      type: 'TEXT',
+    }),
+    highlighted_text_3: design.default.text({
       font: 'pt_mono',
       size: 48,
       bold: true,
       italic: false,
       color: '#C3455C',
-    },
+    }),
   },
-} as const;
+});

package/template/reference/sections/tag-lines/showcases/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.showcase_1.blockName': 'Reference Section – Tag lines',
     '$label.showcase_1.section_tagline.text': 'Seasonal',
@@ -46,4 +48,4 @@ export default {
     '$label.showcase_2.highlighted_text_2.text': 'vélos hybrides',
     '$label.showcase_2.highlighted_text_3.text': 'vélos pliants',
   },
-} as const;
+});

package/template/reference/sections/trending-categories/TrendingCategories.vue

@@ -54,7 +54,7 @@ const backgroundStyle = computed<CSSProperties>(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .categories-wrapper {
   display: flex;
   flex-wrap: wrap;

package/template/reference/sections/trending-categories/component/CategoryItem.vue

@@ -6,6 +6,9 @@
     class="category"
   >
     <img v-if="category.imageUrl" class="category_image" :src="category.imageUrl" :alt="category.name" />
+    <div v-else class="category__background">
+      <div class="category__background__name">{{ category.name }}</div>
+    </div>
     <h4 class="category__title">{{ category.name }}</h4>
   </a>
 </template>
@@ -18,7 +21,7 @@
   const { category } = defineProps<Props>()
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .category {
   display: flex;
   flex-direction: column;
@@ -59,4 +62,18 @@
   color: #111;
   text-align: center;
 }
+
+.category__background {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: auto;
+  aspect-ratio: 3/4;
+
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.category__background__name {
+  text-align: center;
+}
 </style>

package/template/reference/sections/trending-categories/component/Title.vue

@@ -18,13 +18,13 @@ const titleDesign = useTextElementDesign<Design>('section_title');
 const titleStyle = computed(() => ({
   fontSize: `${titleDesign.size}px`,
   fontFamily: titleDesign.font,
-  color: (titleDesign.color as Color).hex,
+  color: (titleDesign.color as Color)?.hex,
   'font-style': titleDesign.italic ? 'italic' : 'normal',
   'font-weight': titleDesign.bold ? 'bold' : 'normal',
 }));
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .section-title {
   margin-bottom: 1rem;
   text-align: center;

package/template/reference/sections/trending-categories/settings/content.ts

@@ -1,14 +1,12 @@
+import { content } from '@lightspeed/crane-api';
+
 export default {
-  section_title: {
-    type: 'INPUTBOX',
+  section_title: content.inputbox({
     label: '$label.section_title.label',
     placeholder: '$label.section_title.placeholder',
-  },
-  trending_categories: {
-    type: 'CATEGORY_SELECTOR',
+  }),
+  trending_categories: content.categorySelector({
     label: '$label.trending_categories.label',
-    defaults: {
-      maxCategories: 4,
-    },
-  },
-} as const;
+    maxCategories: 4,
+  }),
+};

package/template/reference/sections/trending-categories/settings/design.ts

@@ -1,6 +1,7 @@
+import { design } from '@lightspeed/crane-api';
+
 export default {
-  section_title: {
-    type: 'TEXT',
+  section_title: design.text({
     label: '$label.section_title.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
@@ -12,9 +13,8 @@ export default {
       color: '#313131',
       visible: true,
     },
-  },
-  background: {
-    type: 'BACKGROUND',
+  }),
+  background: design.background({
     label: '$label.background.label',
     colors: [
       '#FFFFFF66',
@@ -29,5 +29,5 @@ export default {
       style: 'COLOR',
       color: 'global.color.background',
     },
-  },
-} as const;
+  }),
+};

package/template/reference/sections/trending-categories/settings/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.section_title.label': 'Main title',
     '$label.section_title.placeholder':
@@ -21,4 +23,4 @@ export default {
       'Ce sera le titre principal de cette section',
     '$label.trending_categories.label': 'Catégories tendance',
   },
-} as const;
+});

package/template/reference/sections/trending-categories/showcases/1.ts

@@ -1,4 +1,10 @@
-export default {
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '1',
   previewImage: {
     set: {
@@ -9,28 +15,21 @@ export default {
   },
   blockName: '$label.showcase_1.blockName',
   content: {
-    section_title: {
-      type: 'INPUTBOX',
+    section_title: content.default.inputbox({
       text: '$label.showcase_1.section_title.text',
-    },
-    trending_categories: {
-      type: 'CATEGORY_SELECTOR',
-      maxCategories: 4,
-    },
+    }),
   },
   design: {
-    section_title: {
-      type: 'TEXT',
+    section_title: design.default.text({
       font: 'global.fontFamily.body',
       size: 44,
       bold: true,
       italic: false,
       color: '#333',
-    },
-    background: {
-      type: 'BACKGROUND',
+    }),
+    background: design.default.background({
       style: 'COLOR',
       color: 'global.color.background',
-    },
+    }),
   },
-} as const;
+});

package/template/reference/sections/trending-categories/showcases/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.showcase_1.blockName': 'Reference Section — Trending Categories',
     '$label.showcase_1.section_title.text': 'Trending categories',
@@ -19,4 +21,4 @@ export default {
     '$label.showcase_1.section_description.text':
       'Découvrez nos catégories tendance',
   },
-} as const;
+});

package/template/reference/shared/components/Button.vue

@@ -78,7 +78,7 @@ const buttonStyles = computed<CSSProperties>(() => {
 });
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .button {
   --font-family: v-bind(buttonStyles.fontFamily);
   --background-color: v-bind(buttonStyles.backgroundColor);
@@ -103,11 +103,6 @@ const buttonStyles = computed<CSSProperties>(() => {
     }
   }
 
-  &__icon {
-    margin-left: 5px;
-    transition: transform 0.3s ease;
-  }
-
   &.pill {
     border-radius: 32px;
   }
@@ -148,4 +143,9 @@ const buttonStyles = computed<CSSProperties>(() => {
     padding: 0;
   }
 }
+
+.button__icon {
+  margin-left: 5px;
+  transition: transform 0.3s ease;
+}
 </style>

package/template/reference/shared/components/SectionWrapper.vue

@@ -6,7 +6,7 @@
   </section>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .section {
   padding: 60px 20px;
 
@@ -17,10 +17,10 @@
   @media screen and (min-width: 1200px) {
     padding: 100px;
   }
+}
 
-  &__wrapper {
-    max-width: 1120px;
-    margin: 0 auto;
-  }
+.section__wrapper {
+  max-width: 1120px;
+  margin: 0 auto;
 }
 </style>

package/template/reference/shared/components/Tagline.vue

@@ -12,23 +12,24 @@ const props = defineProps<{
   design: TextDesignData;
 }>();
 
-const backgroundLightness = computed<string>(() => `${(props.design.color as Color).hsl.l * 100}%`);
 const taglineStyles = computed<CSSProperties>(() => getTextStyles(props.design));
-</script>
-
-<style lang="scss" scoped>
-@function set-contrast-color($lightness) {
-  $threshold: 60%;
-  $contrastLightness: clamp(0%, calc((#{$lightness} - #{$threshold}) * -100), 100%);
 
-  @return hsl(0, 0%, $contrastLightness);
-}
+// Calculate contrast color: dark text for light backgrounds, light text for dark backgrounds
+const contrastColor = computed<string>(() => {
+  const lightness = (props.design.color as Color).hsl.l * 100;
+  const threshold = 60;
+  // If background lightness > 60%, use dark text (0% lightness), else use light text (100% lightness)
+  const contrastLightness = Math.max(0, Math.min(100, (lightness - threshold) * -100));
+  return `hsl(0, 0%, ${contrastLightness}%)`;
+});
+</script>
 
+<style scoped>
 .tagline {
   --font-size: v-bind(taglineStyles.fontSize);
   --font-family: v-bind(taglineStyles.fontFamily);
   --background-color: v-bind(taglineStyles.background);
-  --background-color-l: v-bind(backgroundLightness);
+  --contrast-color: v-bind(contrastColor);
   --font-style: v-bind(taglineStyles.fontStyle);
   --font-weight: v-bind(taglineStyles.fontWeight);
 
@@ -38,7 +39,7 @@ const taglineStyles = computed<CSSProperties>(() => getTextStyles(props.design))
   font-size: var(--font-size);
   font-family: var(--font-family);
   background: var(--background-color);
-  color: set-contrast-color(var(--background-color-l));
+  color: var(--contrast-color);
   font-style: var(--font-style);
   font-weight: var(--font-weight);
 }

package/template/reference/templates/reference-template-apparel/configuration.ts

@@ -1,4 +1,6 @@
-export default {
+import { template, section } from '@lightspeed/crane-api';
+
+export default template.configuration({
   metadata: {
     name: 'Reference Template — Apparel',
     description: 'This is a reference template geared towards apparel merchants to aid development and act as a starting point for your custom template.',
@@ -11,12 +13,10 @@ export default {
       },
     },
   },
-  header: {
-    type: 'default',
+  header: section.default({
     id: 'header',
-  },
-  footer: {
-    type: 'default',
+  }),
+  footer: section.default({
     id: 'footer',
-  },
-};
+  }),
+});

package/template/reference/templates/reference-template-apparel/pages/catalog.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/reference/templates/reference-template-apparel/pages/category.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/reference/templates/reference-template-apparel/pages/home.ts

@@ -1,34 +1,30 @@
+import { section } from '@lightspeed/crane-api';
+
 export default {
   sections: [
-    {
-      type: 'custom',
+    section.custom({
       id: 'intro-slider',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'tag-lines',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'about-us',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'example-section',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'featured-products',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'trending-categories',
       showcase_id: '1',
-    },
+    }),
   ],
 };

package/template/reference/templates/reference-template-apparel/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/reference/templates/reference-template-bike/configuration.ts

@@ -1,7 +1,9 @@
-export default {
+import { template, section } from '@lightspeed/crane-api';
+
+export default template.configuration({
   metadata: {
     name: 'Reference Template — Bike',
-    description: 'This is a reference template geared towards bike shops to aid development and act as a starting point for your custom template.',
+    description: 'This is a reference template geared towards bike shop to aid development and act as a starting point for your custom template.',
     preview_url: 'https://reference-template-bike.company.site/',
     cover_image: {
       set: {
@@ -11,12 +13,10 @@ export default {
       },
     },
   },
-  header: {
-    type: 'default',
+  header: section.default({
     id: 'header',
-  },
-  footer: {
-    type: 'default',
+  }),
+  footer: section.default({
     id: 'footer',
-  },
-};
+  }),
+});

package/template/reference/templates/reference-template-bike/pages/catalog.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/reference/templates/reference-template-bike/pages/category.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;
+};