Changes for Release 2406.0.0

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
     - name: Use pnpm
       uses: pnpm/action-setup@v3
       with:
-        version: 8
+        version: 9
 
     - name: Use Node.js
       uses: actions/setup-node@v4

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## v2406.0.0
+
+*Released 20.06.2024*
+
+### Breaking Changes:
+
+- Updated pnpm to version 9
+- Updated `schema.json` to CoreMedia Content Cloud v12 - 2604.0
+
+
+### Features:
+
+- Changed `.graphqlconfig` to new format `graphql.config.yml`
+- Added `schema.graphql` into the workspace for code completion
+- Added support for CoreMedia Engagement Cloud configuration from settings.
+- Optimized stitching server (logging, code cleanup)
+- Updated storybook to v8
+
+### Bugfixes and Changes:
+
+- Updated minor versions of dependencies
+
+---
+
 ## v2404.1.0
 
 *Released 25.04.2024*
@@ -11,7 +35,7 @@
 ### Bugfixes and Changes:
 
 - Updated `schema.json` and `interfaces.json` to CoreMedia Content Cloud v12 - 2404.2
-  (fixing inheritance order of the interfaces) 
+  (fixing inheritance order of the interfaces)
 - Fixed fragmented preview
 - Fixed umlauts in GraphQL queries, re #210
 - Added script "clean" to @coremedia-labs/graphql-layer for code generation
@@ -67,12 +91,12 @@
 
 ### Features:
 
-- Added CoreMedia Byside Tag Integration
+- Added CoreMedia Tag Integration
 
 ### Bugfixes and Changes:
 
 - Updated minor versions of dependencies
-- Updated eslint and prettier to latest major versions, but keeping the old prettier config "trailingComma": "es5" 
+- Updated eslint and prettier to latest major versions, but keeping the old prettier config "trailingComma": "es5"
 
 ---
 
@@ -173,7 +197,7 @@
     `CAMPAIGN_ENDPOINT` and `CAMPAIGN_AUTHORIZATION_ID` are set.
   - The Spark app will fetch and render Campaign data on content pages, category pages, and product detail pages,
     if new environment variable `VITE_CAMPAIGN_ENABLED` is set to "true".
-- Added rendering of assigned CMDownloads on product detail pages 
+- Added rendering of assigned CMDownloads on product detail pages
 - Added support for CMImageMap inline overlays
 
 ### Breaking Changes:
@@ -182,7 +206,7 @@
 
 ### Bugfixes and Changes:
 
-- Fixed possibly wrong vite chunk splitting, if the workspace path included one 
+- Fixed possibly wrong vite chunk splitting, if the workspace path included one
   of the keywords. This could lead to an empty page.
 - Updated minor versions of dependencies
 

Dockerfile

@@ -1,2 +1,2 @@
 FROM node:20
-RUN npm install -g pnpm@8
+RUN npm install -g pnpm@9

README.md

@@ -1,6 +1,6 @@
 ![CoreMedia Labs Logo](https://documentation.coremedia.com/badges/banner_coremedia_labs_wide.png)
 
-![CoreMedia Content Cloud Version](https://img.shields.io/static/v1?message=2404&label=CoreMedia%20Content%20Cloud&style=for-the-badge&labelColor=666666&color=672779 
+![CoreMedia Content Cloud Version](https://img.shields.io/static/v1?message=2406&label=CoreMedia%20Content%20Cloud&style=for-the-badge&labelColor=666666&color=672779 
 "This badge shows the CoreMedia version this project is compatible with. 
 Please read the versioning section of the project to see what other CoreMedia versions are supported and how to find them."
 )
@@ -50,7 +50,7 @@ Please refer to the [changelog](CHANGELOG.md) for more details.
 
 ## Quickstart
 
-You need at least Node.js 20 (LTS), pnpm 8 and a running instance of the CoreMedia Content Cloud.
+You need at least Node.js 20 (LTS), pnpm 9 and a running instance of the CoreMedia Content Cloud.
 Define your environment variables in `.env` file for the stitching server:
 
 [servers/stitching/.env](servers/stitching/.env.example)

apps/spark/.env.example

@@ -25,6 +25,6 @@ VITE_FQDN=https://<headless-stitching-server.example>
 # Set loglevel, default is "warn" for prod and "info" for dev.
 #VITE_LOGLEVEL=debug
 
-# Byside Integration, default URL: https://bywe2.byside.com/agent/bwc_we2.js
-#VITE_BYSIDE_WEBCARE_ID=<your-webcare-id>
-#VITE_BYSIDE_WEBCARE_SCRIPT_URL=<your-custom-tag-url>
+# Engagement Cloud Integration, default URL: https://bywe2.byside.com/agent/bwc_we2.js
+#VITE_ENGAGEMENT_CLOUD_ID=<your-webcare-id>
+#VITE_ENGAGEMENT_CLOUD_TAG_URL=<your-custom-tag-url>

apps/spark/.storybook/main.js

@@ -1,14 +1,23 @@
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+export default {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook"
+  ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {}
   },
+
   core: {
     disableTelemetry: true
   },
-  docs: {
-    autodocs: true
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
   }
-};
+};

apps/spark/.storybook/preview.jsx

@@ -9,7 +9,7 @@ import { ImageBox } from "../src/components/Media/ResponsiveImage";
 import { StyledImage } from "../src/components/Media/Image";
 
 export const parameters = {
-  actions: {argTypesRegex: "^on[A-Z].*"},
+  actions: {},
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -57,3 +57,4 @@ export const decorators = [
     </>
   ),
 ];
+export const tags = ["autodocs"];

apps/spark/package.json

@@ -17,25 +17,25 @@
     "build-storybook": "storybook build -o dist/storybook"
   },
   "dependencies": {
-    "@apollo/client": "^3.10.1",
+    "@apollo/client": "^3.10.5",
     "@coremedia-labs/graphql-layer": "workspace:^",
     "@coremedia-labs/preview-integration": "workspace:^",
     "@coremedia-labs/view-dispatcher": "workspace:^",
-    "@js-joda/core": "^5.6.2",
-    "@js-joda/timezone": "^2.21.0",
-    "country-flag-icons": "^1.5.11",
+    "@js-joda/core": "^5.6.3",
+    "@js-joda/timezone": "^2.21.1",
+    "country-flag-icons": "^1.5.12",
     "crypto-hash": "^2.0.1",
-    "graphql": "^16.8.1",
-    "i18next": "^23.11.2",
+    "graphql": "^16.8.2",
+    "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^7.2.1",
-    "i18next-http-backend": "^2.5.1",
+    "i18next-http-backend": "^2.5.2",
     "loglevel": "^1.9.1",
     "query-string": "^7.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.3.0",
     "react-i18next": "^11.18.6",
-    "react-is": "^18.2.0",
+    "react-is": "^18.3.1",
     "react-player": "^2.16.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^5.3.4",
@@ -45,37 +45,37 @@
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.18",
-    "@storybook/addon-backgrounds": "^7.6.18",
-    "@storybook/addon-docs": "^7.6.18",
-    "@storybook/addon-essentials": "^7.6.18",
-    "@storybook/addon-links": "^7.6.18",
-    "@storybook/addon-measure": "^7.6.18",
-    "@storybook/addon-outline": "^7.6.18",
-    "@storybook/client-api": "^7.6.17",
-    "@storybook/client-logger": "^7.6.18",
-    "@storybook/node-logger": "^7.6.18",
-    "@storybook/react": "^7.6.18",
-    "@storybook/react-vite": "^7.6.18",
-    "@types/node": "^20.12.7",
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-backgrounds": "^8.1.10",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-measure": "^8.1.10",
+    "@storybook/addon-outline": "^8.1.10",
+    "@storybook/client-logger": "^8.1.10",
+    "@storybook/node-logger": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@types/node": "^20.14.5",
     "@types/react": "^17.0.80",
     "@types/react-dom": "^17.0.25",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-slick": "^0.23.13",
     "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
-    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.8.0",
-    "prettier": "^3.2.5",
-    "storybook": "^7.6.18",
+    "prettier": "^3.3.2",
+    "storybook": "^8.1.10",
     "typedoc": "^0.25.13",
     "typescript": "~5.2.2",
     "vite": "^4.5.3",

apps/spark/public/locales/de/translation.json

@@ -63,6 +63,7 @@
     "type_CMArticle": "Stories",
     "type_CMCategory": "Kategorien",
     "type_CMChannel": "Seiten",
+    "type_CMCollection": "Sammlungen",
     "type_CMEvent": "Events",
     "type_CMExternalChannel": "External Channels",
     "type_CMExternalPage": "Externe Seiten",

apps/spark/public/locales/en/translation.json

@@ -63,6 +63,7 @@
     "type_CMArticle": "Stories",
     "type_CMCategory": "Categories",
     "type_CMChannel": "Pages",
+    "type_CMCollection": "Collections",
     "type_CMEvent": "Events",
     "type_CMExternalChannel": "External Channels",
     "type_CMExternalPage": "External Pages",

apps/spark/public/locales/fr/translation.json

@@ -63,6 +63,7 @@
     "type_CMArticle": "Stories",
     "type_CMCategory": "Categories",
     "type_CMChannel": "Pages",
+    "type_CMCollection": "Collections",
     "type_CMEvent": "Events",
     "type_CMExternalChannel": "External Channels",
     "type_CMExternalPage": "External Pages",

apps/spark/public/locales/it/translation.json

@@ -62,6 +62,7 @@
     "filters": "Filtri",
     "type_CMArticle": "Stories",
     "type_CMCategory": "Categories",
+    "type_CMCollection": "Collezioni",
     "type_CMChannel": "Pages",
     "type_CMEvent": "Events",
     "type_CMExternalChannel": "External Channels",

apps/spark/src/components/App/App.tsx

@@ -13,7 +13,7 @@ import { PreviewContextProvider } from "../../context/PreviewContextProvider";
 import SearchStateContextProvider from "../../context/SearchStateContext";
 import CommercePreviewPage from "../../pages/CommercePreviewPage";
 import AppRoutes from "./AppRoutes";
-import BysideTag from "./BysideTag";
+import CmecTag from "./CmecTag";
 import PageContext from "./PageContext";
 import ScrollToTop from "./ScrollToTop";
 import { GlobalStyle } from "./GlobalStyle";
@@ -67,7 +67,7 @@ const App: FC = () => {
                       <AppRoutes />
                     </PageContext>
                   </Switch>
-                  <BysideTag />
+                  <CmecTag />
                 </HelmetProvider>
               </SearchStateContextProvider>
             </CartContextProvider>

apps/spark/src/components/App/CmecTag.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from "react";
+import { Helmet } from "react-helmet-async";
+import log from "loglevel";
+import { useSiteContextState } from "../../context/SiteContextProvider";
+import { isPreview } from "../../utils/Preview/Preview";
+
+const CmecTag: FC = () => {
+  const { siteLocale, cmecConfig } = useSiteContextState();
+  let cmecVars = "";
+
+  /* no cmec configuration available, just load p13n */
+  if (!cmecConfig) {
+    return <></>;
+  }
+
+  log.info("Loading CoreMedia Engagement Cloud Tag", cmecConfig.id, cmecConfig.url);
+
+  cmecVars = `var bysideWebcare_webcare_id="${cmecConfig?.id}";`;
+  const lang = new Intl.Locale(siteLocale);
+  cmecVars += `var bysideWebcare_lang="${lang.language}";`;
+  cmecVars += `var bysideWebcare_locale="${siteLocale}";`;
+  if (isPreview()) {
+    cmecVars += `var bysideWebcare_preview=true;`;
+  }
+
+  return (
+    <Helmet>
+      <script>{cmecVars}</script>
+      <script src={cmecConfig?.url}></script>
+    </Helmet>
+  );
+};
+
+export default CmecTag;