@lightspeed/crane 1.4.2 → 2.0.1

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

@@ -0,0 +1,14 @@
+export default {
+  section_title: {
+    type: 'INPUTBOX',
+    label: '$label.section_title.label',
+    placeholder: '$label.section_title.placeholder',
+  },
+  trending_categories: {
+    type: 'CATEGORY_SELECTOR',
+    label: '$label.trending_categories.label',
+    defaults: {
+      maxCategories: 4,
+    },
+  },
+} as const;

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/shared/utils/styles.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'vue';
+
 import { getColorString } from './color.ts';
 
 export function getTextStyles(design: TextDesignData): CSSProperties {

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,5 @@
-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,5 @@
-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/1.ts

@@ -160,30 +160,11 @@ export default {
     },
     toggle: {
       type: 'TOGGLE',
-      label: '$label.showcase_1.toggle.label',
-      description: '$label.showcase_1.toggle.description',
-      defaults: {
-        enabled: true,
-      },
+      enabled: true,
     },
     selectbox: {
       type: 'SELECTBOX',
-      placeholder: '$label.showcase_1.selectbox.placeholder',
-      label: '$label.showcase_1.selectbox.label',
-      description: '$label.showcase_1.selectbox.description',
-      options: [
-        {
-          value: 'one',
-          label: '$label.showcase_1.selectbox.one.label',
-        },
-        {
-          value: 'two',
-          label: '$label.showcase_1.selectbox.two.label',
-        },
-      ],
-      defaults: {
-        value: 'one',
-      },
+      value: 'one',
     },
     info: {
       type: 'INFO',
@@ -196,7 +177,6 @@ export default {
     },
     button: {
       type: 'BUTTON',
-      label: '$label.showcase_1.button.label',
       title: '$label.showcase_1.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',

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

@@ -139,30 +139,11 @@ export default {
     },
     toggle: {
       type: 'TOGGLE',
-      label: '$label.showcase_2.toggle.label',
-      description: '$label.showcase_2.toggle.description',
-      defaults: {
-        enabled: true,
-      },
+      enabled: true,
     },
     selectbox: {
       type: 'SELECTBOX',
-      placeholder: '$label.showcase_2.selectbox.placeholder',
-      label: '$label.showcase_2.selectbox.label',
-      description: '$label.showcase_2.selectbox.description',
-      options: [
-        {
-          value: 'one',
-          label: '$label.showcase_2.selectbox.one.label',
-        },
-        {
-          value: 'two',
-          label: '$label.showcase_2.selectbox.two.label',
-        },
-      ],
-      defaults: {
-        value: 'one',
-      },
+      value: 'one',
     },
     info: {
       type: 'INFO',
@@ -175,7 +156,6 @@ export default {
     },
     button: {
       type: 'BUTTON',
-      label: '$label.showcase_2.button.label',
       title: '$label.showcase_2.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',

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

@@ -156,30 +156,11 @@ export default {
     },
     toggle: {
       type: 'TOGGLE',
-      label: '$label.showcase_3.toggle.label',
-      description: '$label.showcase_3.toggle.description',
-      defaults: {
-        enabled: true,
-      },
+      enabled: true,
     },
     selectbox: {
       type: 'SELECTBOX',
-      placeholder: '$label.showcase_3.selectbox.placeholder',
-      label: '$label.showcase_3.selectbox.label',
-      description: '$label.showcase_3.selectbox.description',
-      options: [
-        {
-          value: 'one',
-          label: '$label.showcase_3.selectbox.one.label',
-        },
-        {
-          value: 'two',
-          label: '$label.showcase_3.selectbox.two.label',
-        },
-      ],
-      defaults: {
-        value: 'one',
-      },
+      value: 'one',
     },
     info: {
       type: 'INFO',
@@ -192,7 +173,6 @@ export default {
     },
     button: {
       type: 'BUTTON',
-      label: '$label.showcase_1.button.label',
       title: '$label.showcase_1.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',