Merge main into next

.changeset/clever-ads-watch.md

@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": patch
+---
+
+Change "Add column" button label in `createColumnsBlock` to "Add item"

.changeset/sharp-trains-taste.md

@@ -0,0 +1,5 @@
+---
+"@comet/cms-admin": patch
+---
+
+Adapt styling of the dashboard header to match the Comet DXP design

.changeset/smooth-ravens-cry.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": patch
+---
+
+Preserve the default `Button` color when using the `sx` prop with the `textLight` or `textDark` variant

demo/build-and-run-site.sh

@@ -0,0 +1,24 @@
+# Execute this script via `npm run build-and-run-site`
+#
+# This script builds the site like in the CI and starts it.
+#
+# Reasons why you want to do this:
+# - Check if it builds without warnings
+# - Check if there are suggestions from next build
+# - Check if it behaves in the same way like the dev-server
+# - Check caching behaviour, e.g. Cache-Control header (which is always no-cache in dev-server)
+
+#!/usr/bin/env bash
+
+echo "[1/2] Build site..."
+cd site
+rm -f .env .env.local .env.site-configs
+rm -rf .next
+NODE_ENV=production npm run build
+ln -sf ../../.env ./
+ln -sf ../../.env.local ./
+ln -sf ../.env.site-configs ./
+echo ""
+
+echo "[2/2] Start site..."
+npx dotenv -e .env.secrets -e .env.site-configs -- npm run serve

demo/site-pages/package.json

@@ -33,6 +33,10 @@
         "graphql-request": "^3.7.0",
         "graphql-tag": "^2.12.6",
         "next": "^14.2.24",
+<<<<<<< HEAD
+=======
+        "pure-react-carousel": "^1.0.0",
+>>>>>>> main
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-intl": "^6.8.9",

demo/site/next.config.mjs

@@ -29,6 +29,17 @@ const nextConfig = {
     },
     cacheHandler: process.env.REDIS_ENABLED === "true" ? import.meta.resolve("./dist/cache-handler.js").replace("file://", "") : undefined,
     cacheMaxMemorySize: process.env.REDIS_ENABLED === "true" ? 0 : undefined, // disable default in-memory caching
+    rewrites: () => {
+        return {
+            afterFiles: [
+                {
+                    // Show a 404 instead of trying to render page for paths starting with /_next/ or /assets/ as they don't get rewritten in DomainRewriteMiddleware and cause errors in ...path page
+                    source: "/:prefix(_next|assets)/:path*",
+                    destination: "/404",
+                },
+            ],
+        };
+    },
 };
 
 export default withBundleAnalyzer(nextConfig);

demo/site/package.json

@@ -30,13 +30,28 @@
         "@opentelemetry/sdk-node": "^0.53.0",
         "cache-manager": "^5.7.6",
         "filesize": "^10.1.6",
+<<<<<<< HEAD
         "graphql": "^15.10.1",
         "ioredis": "^5.5.0",
         "lru-cache": "^11.0.2",
         "next": "^14.2.24",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-intl": "^6.8.9",
+=======
+        "fs-extra": "^9.0.0",
+        "graphql": "^15.0.0",
+        "graphql-tag": "^2.12.6",
+        "ioredis": "^5.4.1",
+        "lru-cache": "^11.0.1",
+        "next": "^14.2.24",
+        "pure-react-carousel": "^1.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-intl": "^6.0.0",
+        "react-is": "^17.0.2",
+        "react-select": "^5.8.0",
+>>>>>>> main
         "redraft": "^0.10.2",
         "styled-components": "^6.1.15",
         "swiper": "^11.2.4",

demo/site/server.ts

@@ -53,6 +53,16 @@ app.prepare().then(() => {
                 };
             }
 
+            const originalWriteHead = res.writeHead;
+            res.writeHead = function (statusCode: number, ...args: unknown[]) {
+                // since writeHead is a callback function, it's called after handle() -> we get the actual response statusCode
+                if (statusCode >= 400) {
+                    // prevent caching of error responses
+                    res.setHeader("Cache-Control", "private, no-cache, no-store, max-age=0, must-revalidate");
+                }
+                return originalWriteHead.apply(this, [statusCode, ...args]);
+            };
+
             await handle(req, res, parsedUrl);
         } catch (err) {
             console.error("Error occurred handling", req.url, err);

demo/site/src/app/not-found.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function NotFound404() {
+    return (
+        <html lang="en">
+            <body>
+                <p>Page not found.</p>
+                <Link href="/">Return Home</Link>
+            </body>
+        </html>
+    );
+}

docs/docs/6-deployment/index.md

@@ -42,4 +42,4 @@ Serverless container platforms are a good option for those who want to deploy Co
 
 #### Docker Compose
 
-For those with budget constraints, Docker Compose can be a viable option for deploying Comet applications.
+For those with budget constraints, [Docker Compose](https://docs.docker.com/compose/) can be a viable option for deploying Comet applications. An example deployment can be found [here](https://github.com/vivid-planet/comet-starter/tree/main/.docker-compose). The deployment only requires Docker to be installed on a server and leverages the power of [Traefik](https://doc.traefik.io/traefik/) to manage the ingress traffic (including SSL certificates).

docs/docs/7-migration-guide/migration-from-v6-to-v7.md

@@ -236,7 +236,7 @@ DamModule.register({
 })
 ```
 
-#### How to migrate (only required if CDN is used):
+#### How to migrate (only required if CDN is used with `DAM_CDN_ORIGIN_HEADER`):
 
 Remove the following env vars from the API
 
@@ -288,26 +288,7 @@ If you want to enable the origin check:
     + }
     ```
 
-3. Adjust `site/server.js`
-
-```diff
-// site/server.js
-
-- const cdnEnabled = process.env.CDN_ENABLED === "true";
-- const disableCdnOriginHeaderCheck = process.env.DISABLE_CDN_ORIGIN_HEADER_CHECK === "true";
-- const cdnOriginHeader = process.env.CDN_ORIGIN_HEADER;
-+ const cdnOriginCheckSecret = process.env.CDN_ORIGIN_CHECK_SECRET;
-
-// ...
-
-- if (cdnEnabled && !disableCdnOriginHeaderCheck) {
--    const incomingCdnOriginHeader = req.headers["x-cdn-origin-check"];
--    if (cdnOriginHeader !== incomingCdnOriginHeader) {
-+ if (cdnOriginCheckSecret) {
-+    if (req.headers["x-cdn-origin-check"] !== cdnOriginCheckSecret) {
-```
-
-4. DNS changes might be required. `api.example.com` should point to CDN, CDN should point to internal API domain
+3. DNS changes might be required. `api.example.com` should point to CDN, CDN should point to internal API domain
 
 ### API Generator: Remove support for `visible` boolean, use `status` enum instead
 
@@ -1080,6 +1061,25 @@ const nextConfig = {
 module.exports = withBundleAnalyzer(nextConfig);
 ```
 
+### Adjust CDN config in `site/server.js`
+
+```diff
+// site/server.js
+
+- const cdnEnabled = process.env.CDN_ENABLED === "true";
+- const disableCdnOriginHeaderCheck = process.env.DISABLE_CDN_ORIGIN_HEADER_CHECK === "true";
+- const cdnOriginHeader = process.env.CDN_ORIGIN_HEADER;
++ const cdnOriginCheckSecret = process.env.CDN_ORIGIN_CHECK_SECRET;
+
+// ...
+
+- if (cdnEnabled && !disableCdnOriginHeaderCheck) {
+-    const incomingCdnOriginHeader = req.headers["x-cdn-origin-check"];
+-    if (cdnOriginHeader !== incomingCdnOriginHeader) {
++ if (cdnOriginCheckSecret) {
++    if (req.headers["x-cdn-origin-check"] !== cdnOriginCheckSecret) {
+```
+
 ### Add a custom `InternalLinkBlock`
 
 The `InternalLinkBlock` provided by `@comet/cms-site` is deprecated.

docs/lint-staged.config.mjs

@@ -5,4 +5,5 @@
 export default {
     "*.{ts,tsx,js,jsx,json,css,scss,md}": () => "pnpm lint:eslint",
     "*.{js,json,md,yml,yaml}": () => "pnpm lint:prettier",
+    "docs/**": "cspell",
 };

packages/admin/admin/src/common/buttons/Button.tsx

@@ -71,6 +71,7 @@ const getMobileIconNode = ({ mobileIcon, startIcon, endIcon }: Pick<ButtonProps,
 export const Button = forwardRef(<C extends ElementType = "button">(inProps: ButtonProps<C>, ref: ForwardedRef<any>) => {
     const {
         slotProps,
+        sx,
         variant = "primary",
         responsive,
         mobileIcon = "auto",
@@ -97,6 +98,10 @@ export const Button = forwardRef(<C extends ElementType = "button">(inProps: But
 
     const commonButtonProps = {
         ...variantToMuiProps[variant],
+        sx: {
+            ...variantToMuiProps[variant].sx,
+            ...sx,
+        },
         ...restProps,
         ownerState,
         ...slotProps?.root,

packages/admin/cms-admin/src/blocks/factories/createColumnsBlock.tsx

@@ -392,10 +392,7 @@ export function createColumnsBlock<T extends BlockInterface>(
                                                             <LargeAddButtonContent>
                                                                 <LargeAddButtonIcon />
                                                                 <Typography>
-                                                                    <FormattedMessage
-                                                                        id="comet.blocks.columns.addColumn"
-                                                                        defaultMessage="Add column"
-                                                                    />
+                                                                    <FormattedMessage id="comet.blocks.columns.addItem" defaultMessage="Add item" />
                                                                 </Typography>
                                                             </LargeAddButtonContent>
                                                         </BlockAdminComponentButton>
@@ -410,8 +407,13 @@ export function createColumnsBlock<T extends BlockInterface>(
                                                                 size="large"
                                                                 startIcon={<Add />}
                                                             >
+<<<<<<< HEAD:packages/admin/cms-admin/src/blocks/factories/createColumnsBlock.tsx
                                                                 <FormattedMessage id="comet.blocks.columns.addColumn" defaultMessage="Add column" />
                                                             </BlockAdminComponentButton>
+=======
+                                                                <FormattedMessage id="comet.blocks.columns.addItem" defaultMessage="Add item" />
+                                                            </AdminComponentButton>
+>>>>>>> main:packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
                                                         </AdminComponentStickyFooter>
                                                     )}
                                                 </SelectPreviewComponent>

packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx

@@ -30,7 +30,7 @@ type RootProps = {
 
 const Root = styled("div")<RootProps>`
     position: relative;
-    height: 300px;
+    height: 230px;
     color: ${({ textColor }) => (textColor === "light" ? "white" : textColor === "dark" ? "black" : "inherit")};
     background-color: ${({ theme }) => theme.palette.grey[700]};
 
@@ -45,13 +45,25 @@ const Root = styled("div")<RootProps>`
                 background-image: url(${backgroundImageUrl["2x"]});
             }
         `}
+
+    ${({ theme }) => theme.breakpoints.up("sm")} {
+        height: 300px;
+    }
 `;
 
 const Greeting = styled(Typography)`
     position: absolute;
-    left: ${({ theme }) => theme.spacing(8)};
-    bottom: ${({ theme }) => theme.spacing(8)};
-    font-size: 55px;
-    line-height: 64px;
-    font-weight: 200;
+    left: ${({ theme }) => theme.spacing(4)};
+    bottom: 12px;
+    font-size: 30px;
+    line-height: 38px;
+    font-weight: 160;
+
+    ${({ theme }) => theme.breakpoints.up("sm")} {
+        left: ${({ theme }) => theme.spacing(8)};
+        bottom: ${({ theme }) => theme.spacing(8)};
+        font-size: 55px;
+        line-height: 64px;
+        font-weight: 200;
+    }
 `;

packages/admin/cms-admin/src/dashboard/DateTime.tsx

@@ -29,18 +29,34 @@ export const DateTime = () => {
 
 const Root = styled("div")`
     position: absolute;
-    top: ${({ theme }) => theme.spacing(4)};
-    right: ${({ theme }) => theme.spacing(8)};
-    font-weight: 200;
+    top: 16px;
+    right: ${({ theme }) => theme.spacing(4)};
     text-align: right;
+
+    ${({ theme }) => theme.breakpoints.up("sm")} {
+        top: ${({ theme }) => theme.spacing(4)};
+        right: ${({ theme }) => theme.spacing(8)};
+    }
 `;
 
 const DateContainer = styled("div")`
-    font-size: 33px;
-    line-height: 39px;
+    font-size: 24px;
+    line-height: 28px;
+    font-weight: 150;
+
+    ${({ theme }) => theme.breakpoints.up("sm")} {
+        font-size: 33px;
+        line-height: 39px;
+    }
 `;
 
 const TimeContainer = styled("div")`
-    font-size: 55px;
-    line-height: 64px;
+    font-size: 36px;
+    line-height: 42px;
+    font-weight: 170;
+
+    ${({ theme }) => theme.breakpoints.up("sm")} {
+        font-size: 55px;
+        line-height: 64px;
+    }
 `;

packages/site/cms-site/package.json

@@ -41,6 +41,7 @@
         "@types/lodash.isequal": "^4.5.8",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",
+<<<<<<< HEAD
         "chokidar-cli": "^3.0.0",
         "eslint": "^9.20.1",
         "jest": "^29.7.0",
@@ -49,6 +50,16 @@
         "next": "^14.2.24",
         "npm-run-all2": "^5.0.2",
         "prettier": "^3.5.2",
+=======
+        "chokidar-cli": "^2.0.0",
+        "eslint": "^8.0.0",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
+        "jest-junit": "^15.0.0",
+        "next": "^14.2.24",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^2.0.0",
+>>>>>>> main
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "styled-components": "^6.1.15",