From 3d08c1a38a4020fefa50a4db398e4598b5e299f8 Mon Sep 17 00:00:00 2001 From: Michael Riehemann Date: Tue, 1 Jul 2025 17:35:47 +0200 Subject: [PATCH 1/2] Changes for Release 2506.0.0 --- CHANGELOG.md | 27 +- Dockerfile | 4 +- README.md | 4 +- apps/Dockerfile | 2 +- apps/spark/.env.example | 2 +- apps/spark/.storybook/main.js | 4 +- apps/spark/package.json | 64 +- apps/spark/src/components/App/App.tsx | 2 +- apps/spark/src/components/App/CmecTag.tsx | 8 +- .../src/components/Cart/DetailedCart.tsx | 11 +- apps/spark/src/components/Date/Date.tsx | 9 +- apps/spark/src/components/Error/Alert.tsx | 6 +- apps/spark/src/components/Footer/Footer.tsx | 12 +- apps/spark/src/components/Header/Header.tsx | 2 +- apps/spark/src/components/Media/Image.tsx | 2 +- .../spark/src/components/Media/ModalVideo.tsx | 2 +- .../src/components/Person/PersonWithInfo.tsx | 2 +- .../src/components/Product/ProductActions.tsx | 4 +- .../Search/Filters/CheckboxFilterEntry.tsx | 2 +- .../Search/Filters/SearchFilter.tsx | 4 +- .../src/components/Search/SearchFilters.tsx | 2 +- .../src/components/Search/SearchQuery.tsx | 2 +- apps/spark/src/components/Slider/Slider.tsx | 12 +- .../spark/src/context/SiteContextProvider.tsx | 2 +- apps/spark/src/pages/AuthorPage.tsx | 14 +- apps/spark/src/pages/CategoryPage.tsx | 18 +- apps/spark/src/pages/CommercePreviewPage.tsx | 17 +- apps/spark/src/pages/DetailPage.tsx | 14 +- apps/spark/src/pages/Page.tsx | 12 +- apps/spark/src/pages/PreviewPage.tsx | 19 +- apps/spark/src/pages/ProductPage.tsx | 18 +- apps/spark/src/pages/SearchPage.tsx | 11 +- apps/spark/src/pages/TopicPage.tsx | 11 +- apps/spark/src/stories/Button.stories.tsx | 33 +- .../src/stories/CarouselBanner.stories.tsx | 33 +- apps/spark/src/stories/DetailPage.stories.tsx | 45 +- apps/spark/src/stories/HeroBanner.stories.tsx | 39 +- .../src/stories/LandscapeBanner.stories.tsx | 31 +- .../src/stories/LeftRightBanner.stories.tsx | 31 +- apps/spark/src/stories/Navigation.stories.tsx | 61 +- .../src/stories/PortraitBanner.stories.tsx | 31 +- .../src/stories/SquareBanner.stories.tsx | 31 +- apps/spark/vite.config.ts | 6 +- apps/standalone-fragment/package.json | 20 +- docs/apps/concepts/cmec.md | 2 +- docs/apps/development.md | 4 +- package.json | 8 +- packages/graphql-layer/package.json | 22 +- .../src/__downloaded__/schema.graphql | 11621 ++++++----- .../src/__downloaded__/schema.json | 16422 ++++++++-------- .../src/queries/FragmentPreview.query.graphql | 3 + .../src/queries/PageByPath.query.graphql | 2 + .../src/queries/Site.query.graphql | 4 + .../detail/CMTeasableDetail.fragment.graphql | 3 + .../detail/CategoryDetail.fragment.graphql | 5 + .../detail/ProductDetail.fragment.graphql | 8 + packages/preview-integration/package.json | 10 +- packages/view-dispatcher/package.json | 4 +- pnpm-lock.yaml | 8230 ++++---- servers/mocking/package.json | 14 +- servers/stitching/Dockerfile | 10 +- servers/stitching/package.json | 40 +- servers/stitching/src/executors.ts | 53 +- servers/stitching/tsconfig.json | 7 +- 64 files changed, 18445 insertions(+), 18713 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d65a44a..9a36c0d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,35 @@ # Changelog +## v2506.0.0 + +*Released 02.07.2025* + +### Breaking Changes: + +- Updated `node.js` to 22 LTS +- Updated pnpm to version 10 +- Updated `schema.json` to CoreMedia Content Cloud v12 - 2506.0 + +### Features: + +- Enhanced CoreMedia Engagement Cloud integration + +### Bugfixes and Changes: + +- Updated vite to v7 +- Updated storybook to v9 +- Updated minor versions of dependencies +- Updated nginx docker image to v1.29 + +--- + ## v2412.0.0 -*Released 04.03.2025* +*Released 03.04.2025* ### Breaking Changes: -- Updated `schema.json` to CoreMedia Content Cloud v12 - 2604.0 +- Updated `schema.json` to CoreMedia Content Cloud v12 - 2412.0 ### Features: diff --git a/Dockerfile b/Dockerfile index 7729f60a..30107190 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,2 +1,2 @@ -FROM node:20 -RUN npm install -g pnpm@9 +FROM node:22-slim +RUN npm install -g pnpm@10 diff --git a/README.md b/README.md index 17f80505..60e857f3 100644 --- a/README.md +++ b/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=2412&label=CoreMedia%20Content%20Cloud&style=for-the-badge&labelColor=666666&color=672779 +![CoreMedia Content Cloud Version](https://img.shields.io/static/v1?message=2506&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 9 and a running instance of the CoreMedia Content Cloud. +You need at least Node.js 22 (LTS), pnpm 10 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) diff --git a/apps/Dockerfile b/apps/Dockerfile index 58f476d0..8b52fb2a 100644 --- a/apps/Dockerfile +++ b/apps/Dockerfile @@ -1,4 +1,4 @@ -FROM nginx:1.24-alpine +FROM nginx:1.29-alpine COPY spark/dist /usr/share/nginx/html COPY standalone-fragment/dist /usr/share/nginx/html/standalone diff --git a/apps/spark/.env.example b/apps/spark/.env.example index a437c103..0271ac1b 100644 --- a/apps/spark/.env.example +++ b/apps/spark/.env.example @@ -25,6 +25,6 @@ VITE_FQDN=https:// # Set loglevel, default is "warn" for prod and "info" for dev. #VITE_LOGLEVEL=debug -# Engagement Cloud Integration, default URL: https://bywe2.byside.com/agent/bwc_we2.js +# Engagement Cloud Integration, default URL: https://cdn.engagement.coremedia.cloud/cmec_we2.js #VITE_ENGAGEMENT_CLOUD_ID= #VITE_ENGAGEMENT_CLOUD_TAG_URL= diff --git a/apps/spark/.storybook/main.js b/apps/spark/.storybook/main.js index 7db4f572..05c2ee68 100644 --- a/apps/spark/.storybook/main.js +++ b/apps/spark/.storybook/main.js @@ -2,8 +2,8 @@ export default { stories: ["../src/**/*.stories.@(ts|tsx)"], addons: [ "@storybook/addon-links", - "@storybook/addon-essentials", - "@chromatic-com/storybook" + "@chromatic-com/storybook", + "@storybook/addon-docs" ], framework: { diff --git a/apps/spark/package.json b/apps/spark/package.json index d11eef54..155f30a5 100644 --- a/apps/spark/package.json +++ b/apps/spark/package.json @@ -18,71 +18,63 @@ "build-storybook": "storybook build -o dist/storybook" }, "dependencies": { - "@apollo/client": "^3.11.10", + "@apollo/client": "^3.13.8", "@coremedia-labs/graphql-layer": "workspace:^", "@coremedia-labs/preview-integration": "workspace:^", "@coremedia-labs/view-dispatcher": "workspace:^", - "@js-joda/core": "^5.6.3", - "@js-joda/timezone": "^2.21.1", - "country-flag-icons": "^1.5.13", + "@js-joda/core": "^5.6.5", + "@js-joda/timezone": "^2.22.0", + "country-flag-icons": "^1.5.19", "crypto-hash": "^2.0.1", - "graphql": "^16.9.0", + "graphql": "^16.11.0", "i18next": "^23.16.8", - "i18next-browser-languagedetector": "^7.2.1", - "i18next-http-backend": "^2.7.1", + "i18next-browser-languagedetector": "^7.2.2", + "i18next-http-backend": "^2.7.3", "loglevel": "^1.9.2", "query-string": "^7.1.3", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-helmet-async": "^1.3.0", + "react-helmet-async": "^2.0.5", "react-i18next": "^11.18.6", "react-is": "^18.3.1", "react-player": "^2.16.0", "react-responsive": "^9.0.2", "react-router-dom": "^5.3.4", "react-router-hash-link": "^2.4.3", - "react-slick": "^0.30.2", + "react-slick": "^0.30.3", "require-from-string": "^2.0.2", "slick-carousel": "^1.8.1", "styled-components": "^5.3.11" }, "devDependencies": { - "@chromatic-com/storybook": "^3.2.2", - "@storybook/addon-actions": "^8.4.5", - "@storybook/addon-backgrounds": "^8.4.5", - "@storybook/addon-docs": "^8.4.5", - "@storybook/addon-essentials": "^8.4.5", - "@storybook/addon-links": "^8.4.5", - "@storybook/addon-measure": "^8.4.5", - "@storybook/addon-outline": "^8.4.5", - "@storybook/client-logger": "^8.4.5", - "@storybook/node-logger": "^8.4.5", - "@storybook/react": "^8.4.5", - "@storybook/react-vite": "^8.4.5", - "@types/node": "^20.17.6", - "@types/react": "^17.0.83", - "@types/react-dom": "^17.0.25", + "@chromatic-com/storybook": "^4.0.1", + "@storybook/addon-docs": "^9.0.15", + "@storybook/addon-links": "^9.0.15", + "@storybook/react-vite": "^9.0.15", + "@types/node": "^22.15.34", + "@types/react": "^17.0.87", + "@types/react-dom": "^17.0.26", "@types/react-router-dom": "^5.3.3", "@types/react-router-hash-link": "^2.4.9", "@types/react-slick": "^0.23.13", "@types/styled-components": "^5.1.34", "@typescript-eslint/eslint-plugin": "^7.18.0", "@typescript-eslint/parser": "^7.18.0", - "@vitejs/plugin-react-swc": "^3.7.1", - "dotenv": "^16.4.5", + "@vitejs/plugin-react-swc": "^3.10.2", + "dotenv": "^16.6.1", "eslint": "^8.57.1", "eslint-config-prettier": "^9.1.0", - "eslint-import-resolver-typescript": "^3.6.3", - "eslint-plugin-import": "^2.31.0", - "eslint-plugin-prettier": "^5.2.1", - "eslint-plugin-react": "^7.37.2", - "eslint-plugin-storybook": "^0.11.1", - "prettier": "^3.3.3", - "storybook": "^8.4.5", - "typedoc": "^0.26.11", + "eslint-import-resolver-typescript": "^3.10.1", + "eslint-plugin-import": "^2.32.0", + "eslint-plugin-prettier": "^5.5.1", + "eslint-plugin-react": "^7.37.5", + "eslint-plugin-storybook": "^9.0.15", + "prettier": "^3.6.2", + "storybook": "^9.0.15", + "typedoc": "^0.28.7", "typescript": "~5.2.2", - "vite": "^5.4.17", - "vitest": "^2.1.9" + "vite": "^7.0.0", + "vitest": "^3.2.4" }, "browserslist": { "production": [ diff --git a/apps/spark/src/components/App/App.tsx b/apps/spark/src/components/App/App.tsx index 31cc119e..d34a5700 100644 --- a/apps/spark/src/components/App/App.tsx +++ b/apps/spark/src/components/App/App.tsx @@ -32,7 +32,7 @@ const App: FC = () => { setLogLevel(); const location = useLocation(); - const rootSegment = getRootSegment(location.pathname) || "calista"; + const rootSegment = getRootSegment(location.pathname) || "corporate"; const previewDate = getPreviewDate(location.search); const previewCampaignId = getPreviewCampaignId(location.search); const urlSearchParams = useMemo(() => new URLSearchParams(location.search), [location.search]); diff --git a/apps/spark/src/components/App/CmecTag.tsx b/apps/spark/src/components/App/CmecTag.tsx index 28a17afb..d295dc64 100644 --- a/apps/spark/src/components/App/CmecTag.tsx +++ b/apps/spark/src/components/App/CmecTag.tsx @@ -5,12 +5,12 @@ import { useSiteContextState } from "../../context/SiteContextProvider"; import { isPreview } from "../../utils/Preview/Preview"; const CmecTag: FC = () => { - const { siteLocale, cmecConfig } = useSiteContextState(); + const { siteLocale, siteId, cmecConfig } = useSiteContextState(); let cmecVars = ""; /* no cmec configuration available, just load p13n */ if (!cmecConfig) { - return <>; + return null; } log.info("Loading CoreMedia Engagement Cloud Tag", cmecConfig.id, cmecConfig.url); @@ -18,10 +18,12 @@ const CmecTag: FC = () => { cmecVars = `var bysideWebcare_webcare_id="${cmecConfig?.id}";`; const lang = new Intl.Locale(siteLocale); cmecVars += `var bysideWebcare_lang="${lang.language}";`; - cmecVars += `var bysideWebcare_locale="${siteLocale}";`; + cmecVars += `var bysideWebcare_site_id="${siteId}";`; if (isPreview()) { cmecVars += `var bysideWebcare_preview=true;`; } + // we need to tell the cmec script that the page is loaded asynchronously + cmecVars += `var bysideWebcare_processAfterContentLoaded = true;`; return ( diff --git a/apps/spark/src/components/Cart/DetailedCart.tsx b/apps/spark/src/components/Cart/DetailedCart.tsx index 1a4d8a64..d3cff998 100644 --- a/apps/spark/src/components/Cart/DetailedCart.tsx +++ b/apps/spark/src/components/Cart/DetailedCart.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import styled, { css } from "styled-components"; +import { Helmet } from "react-helmet-async"; import { useCartContextState } from "../../context/CartContext"; import Link from "../Link/Link"; import ProductPricing, { formatPrice } from "../Product/ProductPricing"; @@ -152,7 +153,7 @@ const CartContent = styled.div<{ addBorder?: boolean }>` `; const DetailedCart: React.FC = () => { - const { rootSegment } = useSiteContextState(); + const { rootSegment, cmecConfig } = useSiteContextState(); const { cartItems, itemCount, increase, decrease, removeProduct, total, hideSideCart } = useCartContextState(); const { t } = useTranslation(); @@ -160,8 +161,16 @@ const DetailedCart: React.FC = () => { hideSideCart(); }, []); + // cmec extra metrics + const cmecPageData = `var bysideWebcare_content_unavailable = new Date().getTime();`; + return ( + {!!cmecConfig && ( + + + + )} {t("DetailedCart.headline")} {itemCount === 0 && ( diff --git a/apps/spark/src/components/Date/Date.tsx b/apps/spark/src/components/Date/Date.tsx index 97ba882a..8743d62e 100644 --- a/apps/spark/src/components/Date/Date.tsx +++ b/apps/spark/src/components/Date/Date.tsx @@ -1,8 +1,9 @@ import React from "react"; -import { convert, ZonedDateTime } from "@js-joda/core"; import styled from "styled-components"; +import { convert, ZonedDateTime } from "@js-joda/core"; +import "@js-joda/timezone/dist/js-joda-timezone-10-year-range"; import { metaDataProperty } from "../../utils/Preview/MetaData"; -import "@js-joda/timezone"; +import { useSiteContextState } from "../../context/SiteContextProvider"; interface Props { date: string | undefined; @@ -11,11 +12,13 @@ interface Props { export const Time = styled.time``; const Date: React.FC = ({ date }) => { + const { siteLocale } = useSiteContextState(); + let parsedDate: string | undefined = ""; if (date !== undefined) { const zonedDateTime = ZonedDateTime.parse(date); const jsDate: Date = convert(zonedDateTime).toDate(); - parsedDate = jsDate.toLocaleDateString("en-US"); + parsedDate = jsDate.toLocaleDateString(siteLocale); } return (