@lightspeed/crane 1.4.2 → 2.0.0

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

@@ -0,0 +1,33 @@
+export default {
+  section_title: {
+    type: '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],
+    defaults: {
+      font: 'global.fontFamily.body',
+      size: 40,
+      bold: true,
+      italic: false,
+      color: '#313131',
+      visible: true,
+    },
+  },
+  background: {
+    type: 'BACKGROUND',
+    label: '$label.background.label',
+    colors: [
+      '#FFFFFF66',
+      '#0000004D',
+      '#00000099',
+      '#64C7FF66',
+      '#F9947266',
+      '#C794CD66',
+      '#FFD17466',
+    ],
+    defaults: {
+      style: 'COLOR',
+      color: 'global.color.background',
+    },
+  },
+} as const;

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

@@ -0,0 +1,24 @@
+export default {
+  en: {
+    '$label.section_title.label': 'Main title',
+    '$label.section_title.placeholder':
+      'This will be the main title for this section',
+    '$label.trending_categories.label': 'Trending categories',
+
+    '$label.background.label': 'Background',
+  },
+
+  nl: {
+    '$label.section_title.label': 'Hoofdtitel',
+    '$label.section_title.placeholder':
+      'Dit wordt de hoofdtitel voor deze sectie',
+    '$label.trending_categories.label': 'Trending categorieën',
+  },
+
+  fr: {
+    '$label.section_title.label': 'Titre principal',
+    '$label.section_title.placeholder':
+      '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

@@ -0,0 +1,36 @@
+export default {
+  showcaseId: '1',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_1_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    section_title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_1.section_title.text',
+    },
+    trending_categories: {
+      type: 'CATEGORY_SELECTOR',
+      maxCategories: 4,
+    },
+  },
+  design: {
+    section_title: {
+      type: 'TEXT',
+      font: 'global.fontFamily.body',
+      size: 44,
+      bold: true,
+      italic: false,
+      color: '#333',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: 'global.color.background',
+    },
+  },
+} as const;

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

@@ -0,0 +1,22 @@
+export default {
+  en: {
+    '$label.showcase_1.blockName': 'Reference Section — Trending Categories',
+    '$label.showcase_1.section_title.text': 'Trending categories',
+    '$label.showcase_1.section_description.text':
+      'Discover our trending categories',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Referentiesectie — Trending categorieën',
+    '$label.showcase_1.section_title.text': 'Trending categorieën',
+    '$label.showcase_1.section_description.text':
+      'Ontdek onze trending categorieën',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Section de référence — Catégories tendance',
+    '$label.showcase_1.section_title.text': 'Catégories tendance',
+    '$label.showcase_1.section_description.text':
+      'Découvrez nos catégories tendance',
+  },
+} as const;

package/template/reference/sections/trending-categories/type.ts

@@ -0,0 +1,5 @@
+import ContentSettings from './settings/content.ts';
+import DesignSettings from './settings/design.ts';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

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

@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import { computed, CSSProperties } from 'vue';
-import { ButtonContent } from '@lightspeed/crane';
+import { ButtonContent } from '@lightspeed/crane-api';
 
 import { calculateFontColor } from '../utils/color.ts';
 

package/template/reference/templates/reference-template-apparel/pages/catalog.ts

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

package/template/reference/templates/reference-template-apparel/pages/category.ts

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

package/template/reference/templates/reference-template-apparel/pages/home.ts

@@ -20,5 +20,15 @@ export default {
       id: 'example-section',
       showcase_id: '1',
     },
+    {
+      type: 'custom',
+      id: 'featured-products',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'trending-categories',
+      showcase_id: '1',
+    },
   ],
 };

package/template/reference/templates/reference-template-apparel/pages/product.ts

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

package/template/reference/templates/reference-template-bike/pages/catalog.ts

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

package/template/reference/templates/reference-template-bike/pages/category.ts

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

package/template/reference/templates/reference-template-bike/pages/home.ts

@@ -20,5 +20,15 @@ export default {
       id: 'about-us',
       showcase_id: '2',
     },
+    {
+      type: 'custom',
+      id: 'featured-products',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'trending-categories',
+      showcase_id: '1',
+    },
   ],
 };

package/template/reference/templates/reference-template-bike/pages/product.ts

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

package/template/sections/example-section/ExampleSection.vue

@@ -3,6 +3,10 @@
     class="example-section"
     :style="backgroundStyle"
   >
+    <div class="example-section__static-text-example">
+      <h2>{{ t('$label.shared.title') }}</h2>
+    </div>
+    <div class="example-section__blank_space" />
     <CustomSectionExampleTitle />
     <div class="example-section__blank_space" />
     <CustomSectionExampleImagesGrid />
@@ -16,7 +20,8 @@
 <script setup lang="ts">
 import {
   useBackgroundElementDesign,
-} from '@lightspeed/crane';
+  useTranslation,
+} from '@lightspeed/crane-api';
 import { computed } from 'vue';
 import { Design } from './type.ts';
 import CustomSectionExampleTitle from './component/title/Title.vue';
@@ -26,6 +31,8 @@ import Selectbox from './component/selectbox/Selectbox.vue';
 import Toggle from './component/toggle/Toggle.vue';
 import Button from './component/button/Button.vue';
 
+const { t } = useTranslation();
+
 const backgroundDesign = useBackgroundElementDesign<Design>('background');
 const background = computed(() => ({
   type: backgroundDesign.background?.type,

package/template/sections/example-section/client.ts

@@ -1,4 +1,4 @@
-import { createVueClientApp } from '@lightspeed/crane';
+import { createVueClientApp } from '@lightspeed/crane-api';
 import ExampleSection from './ExampleSection.vue';
 import { Content, Design } from './type.ts';
 

package/template/sections/example-section/component/button/Button.vue

@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import {
   useButtonElementContent,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { Content } from '../../type.ts';
 import arrowIcon from '../../assets/arrow.svg';
 

package/template/sections/example-section/component/image/Image.vue

@@ -41,7 +41,7 @@ import {
   useImageElementDesign,
   useTextareaElementDesign,
   useLayoutElementDesign,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { Design } from '../../type.ts';
 import { ColorType } from '../../entity/color.ts';
 

package/template/sections/example-section/component/image/ImagesGrid.vue

@@ -26,7 +26,7 @@ import {
   ImageContent,
   TextAreaContent,
   InputBoxContent,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import CustomSectionExampleImage from './Image.vue';
 import { Content } from '../../type.ts';
 

package/template/sections/example-section/component/selectbox/Selectbox.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useBackgroundElementDesign, useSelectboxElementContent } from '@lightspeed/crane';
+import { useBackgroundElementDesign, useSelectboxElementContent } from '@lightspeed/crane-api';
 import { Content, Design } from '../../type.ts';
 import { isDark } from '../../../../shared/utils.ts';
 

package/template/sections/example-section/component/title/Title.vue

@@ -20,7 +20,7 @@
 import { computed } from 'vue';
 import {
   useInputboxElementContent, useTextareaElementContent, useTextElementDesign, useTextareaElementDesign,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { Content, Design } from '../../type.ts';
 
 const titleContent = useInputboxElementContent<Content>('section_title');

package/template/sections/example-section/component/toggle/Toggle.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useBackgroundElementDesign, useToggleElementContent } from '@lightspeed/crane';
+import { useBackgroundElementDesign, useToggleElementContent } from '@lightspeed/crane-api';
 import { Content, Design } from '../../type.ts';
 import { isDark } from '../../../../shared/utils.ts';
 

package/template/sections/example-section/entity/color.ts

@@ -1,4 +1,4 @@
 export enum ColorType {
-    SOLID = 'solid',
-    GRADIENT = 'gradient',
+  SOLID = 'solid',
+  GRADIENT = 'gradient',
 }

package/template/sections/example-section/server.ts

@@ -1,4 +1,4 @@
-import { createVueServerApp } from '@lightspeed/crane';
+import { createVueServerApp } from '@lightspeed/crane-api';
 import ExampleSection from './ExampleSection.vue';
 import { Content, Design } from './type.ts';
 

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

@@ -126,7 +126,7 @@ export default {
 
     '$label.info.label': 'Content.ts: Info',
     '$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',
+      + 'pouvez fournir des conseils utiles sur l\'utilisation de la section personnalisée',
     '$label.info.button.label': 'En savoir plus',
   },
 } as const;

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

@@ -3,8 +3,8 @@ export default {
     '$label.showcase_1.blockName': 'Reference Section — Retail',
     '$label.showcase_1.section_title.text': 'Trending collections',
     '$label.showcase_1.section_description.text': 'Discover our favorite pieces this season, and indulge yourself in '
-        + 'these timeless pieces suitable for every occasion. We offer free shipping and returns, and 24/7 fashion '
-        + 'advice through our mobile app.',
+      + 'these timeless pieces suitable for every occasion. We offer free shipping and returns, and 24/7 fashion '
+      + 'advice through our mobile app.',
     '$label.showcase_1.image_text_1.text': 'New Arrivals',
     '$label.showcase_1.image_text_2.text': 'Sport look',
     '$label.showcase_1.image_text_3.text': 'Summer accessories',
@@ -86,8 +86,8 @@ export default {
     '$label.showcase_1.blockName': 'Referentiesectie — Detailhandel',
     '$label.showcase_1.section_title.text': 'Trending collecties',
     '$label.showcase_1.section_description.text': 'Ontdek onze favoriete stukken van dit seizoen en verwen jezelf met '
-        + 'deze tijdloze stukken die geschikt zijn voor elke gelegenheid. Wij bieden gratis verzending en retourneren, '
-        + 'en 24/7 modeadvies via onze mobiele app.',
+      + 'deze tijdloze stukken die geschikt zijn voor elke gelegenheid. Wij bieden gratis verzending en retourneren, '
+      + 'en 24/7 modeadvies via onze mobiele app.',
     '$label.showcase_1.image_text_1.text': 'Nieuw binnen',
     '$label.showcase_1.image_text_2.text': 'Sportieve look',
     '$label.showcase_1.image_text_3.text': 'Zomeraccessoires',
@@ -128,7 +128,7 @@ export default {
 
     '$label.showcase_1.info.label': 'Content.ts: Info',
     '$label.showcase_1.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele nuttige tips '
-        + 'kunt geven over het gebruik van aangepaste secties',
+      + 'kunt geven over het gebruik van aangepaste secties',
     '$label.showcase_1.info.button.label': 'Content.ts: Meer informatie',
 
     '$label.showcase_2.button.label': 'Content.ts: Knop',
@@ -144,7 +144,7 @@ export default {
 
     '$label.showcase_2.info.label': 'Content.ts: Info',
     '$label.showcase_2.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele '
-        + 'nuttige tips kunt geven over het gebruik van aangepaste secties',
+      + 'nuttige tips kunt geven over het gebruik van aangepaste secties',
     '$label.showcase_2.info.button.label': 'Content.ts: Meer informatie',
 
     '$label.showcase_3.button.label': 'Content.ts: Knop',
@@ -160,7 +160,7 @@ export default {
 
     '$label.showcase_3.info.label': 'Content.ts: Info',
     '$label.showcase_3.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele nuttige tips '
-        + 'kunt geven over het gebruik van aangepaste secties',
+      + 'kunt geven over het gebruik van aangepaste secties',
     '$label.showcase_3.info.button.label': 'Content.ts: Meer informatie',
   },
 
@@ -168,8 +168,8 @@ export default {
     '$label.showcase_1.blockName': 'Section de référence — Vente au détail',
     '$label.showcase_1.section_title.text': 'Collections tendance',
     '$label.showcase_1.section_description.text': 'Découvrez nos pièces préférées de cette saison et offrez-vous ces '
-        + 'pièces intemporelles adaptées à toutes les occasions. Nous offrons la livraison et les retours gratuits, ainsi '
-        + 'que des conseils de mode 24/7 via notre application mobile.',
+      + 'pièces intemporelles adaptées à toutes les occasions. Nous offrons la livraison et les retours gratuits, ainsi '
+      + 'que des conseils de mode 24/7 via notre application mobile.',
     '$label.showcase_1.image_text_1.text': 'Nouveautés',
     '$label.showcase_1.image_text_2.text': 'Look sportif',
     '$label.showcase_1.image_text_3.text': 'Accessoires d\'été',
@@ -195,7 +195,7 @@ export default {
     '$label.showcase_3.image_text_3.text': 'Service de réparation',
     '$label.showcase_3.image_text_4.text': 'Accessoires pour vélos',
     '$label.showcase_1.info.text': 'Showcase 1: Ceci est une section d\'information où vous pouvez fournir des conseils utiles sur '
-        + 'l\'utilisation de la section personnalisée',
+      + 'l\'utilisation de la section personnalisée',
     '$label.showcase_2.info.text': 'Showcase 2: Ceci est une zone pour des conseils utiles sur l\'utilisation de la section personnalisée',
     '$label.showcase_1.info.button.title': 'Showcase 1: Apprendre',
     '$label.showcase_2.info.button.title': 'Showcase 2: Plus',
@@ -213,7 +213,7 @@ export default {
 
     '$label.showcase_1.info.label': 'Content.ts: Info',
     '$label.showcase_1.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',
+      + 'fournir des conseils utiles sur l\'utilisation de la section personnalisée',
     '$label.showcase_1.info.button.label': 'Content.ts: En savoir plus',
 
     '$label.showcase_2.button.label': 'Content.ts: Bouton',
@@ -229,7 +229,7 @@ export default {
 
     '$label.showcase_2.info.label': 'Content.ts: Info',
     '$label.showcase_2.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',
+      + 'des conseils utiles sur l\'utilisation de la section personnalisée',
     '$label.showcase_2.info.button.label': 'Content.ts: En savoir plus',
 
     '$label.showcase_3.button.label': 'Content.ts: Bouton',
@@ -245,7 +245,7 @@ export default {
 
     '$label.showcase_3.info.label': 'Content.ts: Info',
     '$label.showcase_3.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',
+      + 'des conseils utiles sur l\'utilisation de la section personnalisée',
     '$label.showcase_3.info.button.label': 'Content.ts: En savoir plus',
   },
 } as const;

package/template/shared/components/LanguageSelector.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { useVueBaseProps } from '@lightspeed/crane';
+import { useVueBaseProps } from '@lightspeed/crane-api';
 import { computed } from 'vue';
 import { Design } from '../../headers/example-header/type.ts';
 

package/template/shared/translation.ts

@@ -0,0 +1,16 @@
+export default {
+  en: {
+    '$label.shared.title': 'Title',
+    '$label.shared.description': 'Description',
+  },
+
+  nl: {
+    '$label.shared.title': 'Titel',
+    '$label.shared.description': 'Beschrijving',
+  },
+
+  fr: {
+    '$label.shared.title': 'Titre',
+    '$label.shared.description': 'Description',
+  },
+} as const;

package/template/shared/utils.ts

@@ -1,7 +1,9 @@
 export function isDark(color: string): boolean {
   if (!color) return false;
 
-  let r; let g; let b;
+  let r;
+  let g;
+  let b;
 
   if (color.startsWith('#')) {
     const hex = color.replace('#', '');

package/template/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "esnext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
+    "types": ["node", "@lightspeed/crane-api"],
 
     "moduleResolution": "node",
     "allowImportingTsExtensions": true,