@lightspeed/crane 2.0.4 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -39,6 +39,7 @@
   "license": "MIT",
   "devDependencies": {
     "@jest/globals": "^30.0.4",
+    "@lightspeed/crane-internal": "workspace:*",
     "@lightspeed/eslint-config": "workspace:*",
     "@types/adm-zip": "^0.5.7",
     "@types/axios-concurrency": "^1.0.0",
@@ -64,10 +65,11 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.4",
-    "@lightspeed/crane-api": "1.1.0",
+    "@lightspeed/crane-api": "2.0.0",
     "@lightspeed/eslint-config-crane": "1.1.3",
     "@types/micromatch": "^4.0.8",
     "@types/prompts": "^2.4.2",
+    "@types/ws": "^8.5.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "adm-zip": "^0.5.16",
     "ajv": "^8.17.1",
@@ -92,7 +94,8 @@
     "vite-plugin-externals": "^0.6.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vue": "^3.5.21",
-    "vue-tsc": "^3.0.6"
+    "vue-tsc": "^3.0.6",
+    "ws": "^8.19.0"
   },
   "peerDependencies": {
     "vue": "^3.5.21"

package/template/blank/sections/blank-section/BlankSection.vue

@@ -0,0 +1,9 @@
+<template>
+  <h1>{{ t('$label.shared.title') }}</h1>
+</template>
+
+<script setup lang="ts">
+import { useTranslation, } from '@lightspeed/crane-api';
+
+const { t } = useTranslation();
+</script>

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

@@ -0,0 +1,6 @@
+import { createVueClientApp } from '@lightspeed/crane-api';
+
+import BlankSection from './BlankSection.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueClientApp<Content, Design>(BlankSection);

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

@@ -0,0 +1,6 @@
+import { createVueServerApp } from '@lightspeed/crane-api';
+
+import BlankSection from './BlankSection.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueServerApp<Content, Design>(BlankSection);

package/template/blank/sections/blank-section/settings/content.ts

@@ -0,0 +1,2 @@
+export default {
+} as const;

package/template/blank/sections/blank-section/settings/design.ts

@@ -0,0 +1,2 @@
+export default {
+} as const;

package/template/blank/sections/blank-section/settings/layout.ts

@@ -0,0 +1,2 @@
+export default [
+] as const;

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

@@ -0,0 +1,8 @@
+export default {
+  en: {
+  },
+  nl: {
+  },
+  fr: {
+  },
+} as const;

package/template/blank/sections/blank-section/showcases/1.ts

@@ -0,0 +1,15 @@
+import { showcase } from '@lightspeed/crane-api';
+
+export default showcase.init({
+  showcaseId: '1',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'blank_section_showcase_1_preview.jpg',
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {},
+  design: {},
+});

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

@@ -0,0 +1,10 @@
+export default {
+  en: {
+  },
+
+  nl: {
+  },
+
+  fr: {
+  },
+} as const;

package/template/blank/sections/blank-section/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/collections/example-collection/configuration.ts

@@ -0,0 +1,21 @@
+export default {
+  metadata: {
+    name: 'Example Collection',
+    description: 'Example Collection with custom sections, headers, and footers',
+    cover_image: {
+      set: {
+        ORIGINAL: {
+          url: 'collection_cover_image.png',
+        },
+      },
+    },
+  },
+  sections: [
+    {
+      type: 'custom',
+      id: 'example-section',
+      showcase_id: '1',
+      category: 'COLLECTIONS',
+    },
+  ],
+};

package/template/crane.config.json

@@ -1,4 +1,4 @@
 {
     "app_client_id": "test",
     "app_secret_key": "secret"
-}
+}

package/template/footers/example-footer/ExampleFooter.vue

@@ -42,7 +42,7 @@ const backgroundStyle = computed(() => {
 });
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .custom-footer {
   padding: 50px;
 
@@ -53,9 +53,9 @@ const backgroundStyle = computed(() => {
   @media screen and (min-width: 1200px) {
     padding: 100px;
   }
+}
 
-  &__blank_space {
-    height: 40px;
-  }
+.custom-footer__blank_space {
+  height: 40px;
 }
 </style>

package/template/footers/example-footer/component/LegalLinks.vue

@@ -16,5 +16,5 @@ const siteContent: SiteContent = baseProps.site?.value satisfies SiteContent;
 const legalLinks = siteContent.legalPages ?? [];
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 </style>

package/template/footers/example-footer/component/MadeWith.vue

@@ -19,5 +19,5 @@ const siteContent: SiteContent = baseProps.site?.value satisfies SiteContent;
 const madeWith = siteContent.madeWith;
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 </style>

package/template/footers/example-footer/component/ReportAbuse.vue

@@ -15,5 +15,5 @@ const siteContent: SiteContent = baseProps.site.value satisfies SiteContent;
 const reportAbuse = siteContent.reportAbuse;
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 </style>

package/template/footers/example-footer/settings/design.ts

@@ -1,11 +1,12 @@
+import { design } from '@lightspeed/crane-api';
+
 export default {
-  background: {
-    type: 'BACKGROUND',
+  background: design.background({
     label: '$label.background.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     defaults: {
       style: 'COLOR',
       color: 'global.color.background',
     },
-  },
-} as const;
+  }),
+};

package/template/footers/example-footer/settings/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.reportAbuse.label': 'Custom Footer',
     '$label.background.label': 'Background',
@@ -7,6 +9,5 @@ export default {
   nl: {
     '$label.reportAbuse.label': 'aangepaste voettekst',
     '$label.background.label': 'Achtergrond',
-
   },
-} as const;
+});

package/template/footers/example-footer/showcases/1.ts

@@ -1,4 +1,6 @@
-export default {
+import { showcase } from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '1',
   previewImage: {
     set: {
@@ -10,4 +12,4 @@ export default {
   blockName: '$label.showcase_1.blockName',
   content: {},
   design: {},
-} as const;
+});

package/template/footers/example-footer/showcases/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.showcase_1.blockName': 'Custom footer',
   },
@@ -6,4 +8,4 @@ export default {
   nl: {
     '$label.showcase_1.blockName': 'aangepaste voettekst',
   },
-} as const;
+});

package/template/headers/example-header/ExampleHeader.vue

@@ -22,7 +22,7 @@ import SearchForm from './component/SearchForm.vue';
 import Account from './component/Account.vue';
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .custom-header {
   display: flex;
   justify-content: space-between;

package/template/headers/example-header/component/Account.vue

@@ -16,5 +16,5 @@ const siteContent: SiteContent = baseProps.site.value satisfies SiteContent;
 const account = siteContent.account;
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 </style>

package/template/headers/example-header/component/CategoriesDropdown.vue

@@ -97,7 +97,7 @@ const getCategoryLink = (urlPath: string) => {
 };
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .categories-dropdown {
   position: absolute;
   top: 48px;

package/template/headers/example-header/component/Logo.vue

@@ -69,7 +69,7 @@ const logoFrameStyle = computed(() => ({
 }));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .logo-section {
   height: 100%;
   width: 300px;
@@ -84,12 +84,12 @@ const logoFrameStyle = computed(() => ({
 .logo-section-image {
   height: 100%;
   width: 100%;
-  display:block;
+  display: block;
+}
 
-  &__content {
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
-  }
+.logo-section-image__content {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
 }
 </style>

package/template/headers/example-header/component/NavigationMenu.vue

@@ -87,7 +87,7 @@ function hideDropdown() {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .navigation-menu {
   display: flex;
   gap: 16px;

package/template/headers/example-header/settings/content.ts

@@ -1 +1,8 @@
-export default {} as const;
+import { content } from '@lightspeed/crane-api';
+
+export default {
+  logo: content.logo({
+    label: '$label.logo.label',
+  }),
+  menu: content.navigationMenu({}),
+};

package/template/headers/example-header/settings/design.ts

@@ -1 +1,7 @@
-export default {} as const;
+import { design } from '@lightspeed/crane-api';
+
+export default {
+  logo: design.logo({
+    label: '$label.logo.label',
+  }),
+};

package/template/headers/example-header/settings/layout.ts

@@ -1 +1 @@
-export default [] as const;
+export default [];

package/template/headers/example-header/settings/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.logo.label': 'Logo',
   },
@@ -6,4 +8,4 @@ export default {
   nl: {
     '$label.logo.label': 'Logo',
   },
-} as const;
+});

package/template/headers/example-header/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,18 +15,16 @@ export default {
   },
   blockName: '$label.showcase_1.blockName',
   content: {
-    logo: {
-      type: 'LOGO',
+    logo: content.default.logo({
       logoType: 'TEXT',
       text: '$label.showcase_1.logo.text',
-    },
-    menu: {
-      type: 'NAVIGATION_MENU',
-    },
+    }),
+    menu: content.default.navigationMenu({
+      items: [],
+    }),
   },
   design: {
-    logo: {
-      type: 'LOGO',
+    logo: design.default.logo({
       font: 'global.fontFamily.body',
       size: 20,
       bold: true,
@@ -34,6 +38,6 @@ export default {
         width: 3,
         color: '#313131',
       },
-    },
+    }),
   },
-} as const;
+});

package/template/headers/example-header/showcases/2.ts

@@ -1,4 +1,9 @@
-export default {
+import {
+  content,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '2',
   previewImage: {
     set: {
@@ -9,11 +14,10 @@ export default {
   },
   blockName: '$label.showcase_2.blockName',
   content: {
-    menu: {
-      type: 'NAVIGATION_MENU',
-    },
-    logo: {
-      type: 'LOGO',
+    menu: content.default.navigationMenu({
+      items: [],
+    }),
+    logo: content.default.logo({
       logoType: 'IMAGE',
       imageData: {
         set: {
@@ -32,7 +36,7 @@ export default {
         },
         borderInfo: {},
       },
-    },
+    }),
   },
   design: {},
-} as const;
+});

package/template/headers/example-header/showcases/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.showcase_1.blockName': 'Custom Header',
     '$label.showcase_1.menu.text': 'Navigation Menu',
@@ -14,4 +16,4 @@ export default {
     '$label.showcase_2.menu.text': 'Navigatie Menu',
     '$label.showcase_1.logo.text': 'Voorbeeld Tekst Logo',
   },
-} as const;
+});

package/template/layouts/catalog/example-catalog/components/Icon.vue

@@ -23,30 +23,30 @@ const iconClass = computed(() => ({
 }));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  svg {
+  & svg {
     fill: v-bind(color);
     transition: all 0.3s ease;
   }
+}
 
-  &--small svg {
-    width: 16px;
-    height: 16px;
-  }
+.icon--small svg {
+  width: 16px;
+  height: 16px;
+}
 
-  &--medium svg {
-    width: 24px;
-    height: 24px;
-  }
+.icon--medium svg {
+  width: 24px;
+  height: 24px;
+}
 
-  &--large svg {
-    width: 32px;
-    height: 32px;
-  }
+.icon--large svg {
+  width: 32px;
+  height: 32px;
 }
 </style>

package/template/layouts/catalog/example-catalog/slots/custom-bottom-bar/CustomBottomBar.vue

@@ -20,7 +20,7 @@ const goToAccount = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .custom-bottom-bar {
   position: fixed;
   bottom: 0;

package/template/package.json

@@ -1,6 +1,7 @@
 {
   "name": "__placeholder__",
   "private": true,
+  "openSource": false,
   "version": "0.0.1",
   "type": "module",
   "scripts": {

package/template/page-templates/example-template/configuration.ts

@@ -1,10 +1,10 @@
-import { TemplateCategoriesList } from '@lightspeed/crane-api';
+import { template, section } from '@lightspeed/crane-api';
 
-export default {
+export default template.configuration({
   metadata: {
     name: 'Example Template :: Standard Preset',
     description: 'Standard Preset for the Example template',
-    categories: [TemplateCategoriesList.apparel_footwear],
+    categories: ['apparel_footwear'],
     preview_url: 'https://template_preview.company.site',
     cover_image: {
       set: {
@@ -14,12 +14,10 @@ export default {
       },
     },
   },
-  header: {
-    type: 'default',
+  header: section.default({
     id: 'header',
-  },
-  footer: {
-    type: 'default',
+  }),
+  footer: section.default({
     id: 'footer',
-  },
-};
+  }),
+});

package/template/page-templates/example-template/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/page-templates/example-template/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;
+};