Release/16.0.2

.github/workflows/publish-next.yml

@@ -21,16 +21,6 @@ jobs:
           node-version: 22.x
           registry-url: https://registry.npmjs.org/
 
-      - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v1
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: us-west-2
-          role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
-          role-duration-seconds: 3600
-          role-skip-session-tagging: true
-
       - name: Install dependencies
         run: npm install
 
@@ -45,15 +35,10 @@ jobs:
       - name: Test library accessibility
         run: npm run test:accessibility
 
-      # - name: Publish NEXT version to npm
-      #   run: |
-      #     sed -i "s#\"version\": \".*\"#\"version\": \"$(jq -r .version ./packages/lib/package.json)-${GITHUB_SHA:0:7}\"#" ./packages/lib/package.json
-      #     cd packages/lib
-      #     npm publish --tag next --access public
-      #   env:
-      #     NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
-
-      # - name: Move NEXT website to S3
-      #   run: |
-      #     aws s3 rm s3://design-system-react-cdk-site/halstack/next/ --recursive
-      #     aws s3 cp ./apps/website/out/ s3://design-system-react-cdk-site/halstack/next/ --recursive
+      - name: Publish NEXT version to npm
+        run: |
+          sed -i "s#\"version\": \".*\"#\"version\": \"$(jq -r .version ./packages/lib/package.json)-${GITHUB_SHA:0:7}\"#" ./packages/lib/package.json
+          cd packages/lib
+          npm publish --tag next --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

.github/workflows/publish-release.yml

@@ -18,16 +18,6 @@ jobs:
           node-version: 22.x
           registry-url: https://registry.npmjs.org/
 
-      # - name: Configure AWS Credentials
-      #   uses: aws-actions/configure-aws-credentials@v1
-      #   with:
-      #     aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-      #     aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-      #     aws-region: us-west-2
-      #     role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
-      #     role-duration-seconds: 3600
-      #     role-skip-session-tagging: true
-
       - name: Install dependencies
         run: npm install
 
@@ -48,19 +38,3 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
           TAG_NAME: ${{ github.event.release.tag_name }}
-
-      # - name: Install scripts dependencies
-      #   run: cd scripts && npm install
-
-      # - name: Move RELEASE website to S3
-      #   run: node scripts/release-website.js $TAG_NAME
-      #   env:
-      #     TAG_NAME: ${{ github.event.release.tag_name }}
-
-      # - name: Execute script version
-      #   run: node scripts/create-version.js $TAG_NAME
-
-      # - name: Deploy version to S3 Bucket
-      #   run: |
-      #     aws s3 rm s3://design.system.components.catalog/guidelines/version --recursive
-      #     aws s3 cp ./catalog/version/ s3://design.system.components.catalog/guidelines/version --recursive

.github/workflows/publish-website.yml

@@ -21,25 +21,10 @@ jobs:
           node-version: 22.x
           registry-url: https://registry.npmjs.org/
 
-      # - name: Configure AWS Credentials
-      #   uses: aws-actions/configure-aws-credentials@v1
-      #   with:
-      #     aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-      #     aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-      #     aws-region: us-west-2
-      #     role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
-      #     role-duration-seconds: 3600
-      #     role-skip-session-tagging: true
-
       - name: Install dependencies
         run: npm install
 
       - name: Build library and website
         env:
           NEXT_PUBLIC_SITE_VERSION: next
         run: npm run build
-
-      # - name: Move website to S3
-      #   run: |
-      #     aws s3 rm s3://design-system-react-cdk-site/halstack/next/ --recursive
-      #     aws s3 cp ./apps/website/out/ s3://design-system-react-cdk-site/halstack/next/ --recursive

apps/website/eslint.config.mjs

@@ -1,9 +1,25 @@
+import nextPlugin from "@next/eslint-plugin-next";
 import nextConfig from "@dxc-technology/eslint-config/next.js";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
+import js from "@eslint/js";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 
 const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __dirname = path.dirname(__filename);
 
-/** @type {import("eslint").Config[]} */
-export default [{ ignores: ["out/**", ".next/**", "eslint.config.mjs"] }, ...nextConfig({ tsconfigRootDir: __dirname })];
+export default [
+  js.configs.recommended,
+  {
+    plugins: { "@next/next": nextPlugin },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+    },
+  },
+  ...nextConfig({
+    tsconfigRootDir: __dirname,
+    tsconfigName: "tsconfig.lint.json",
+  }),
+  {
+    ignores: ["out/**", ".next/**"],
+  },
+];

apps/website/hooks/useCopyToClipboard.tsx

@@ -0,0 +1,20 @@
+import { useToast } from "@dxc-technology/halstack-react";
+
+const useCopyToClipboard = () => {
+  const toast = useToast();
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        toast.success({ message: "Code copied to the clipboard." });
+      })
+      .catch(() => {
+        toast.warning({ message: "Failed to copy the text to the clipboard." });
+      });
+  };
+
+  return handleCopy;
+};
+
+export default useCopyToClipboard;

apps/website/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/website/package.json

@@ -2,12 +2,13 @@
   "name": "website",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "next dev --webpack",
+    "build": "next build --webpack",
     "start": "next start",
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@adobe/leonardo-contrast-colors": "^1.0.0",
     "@cloudscape-design/components": "^3.0.706",
     "@dxc-technology/halstack-react": "*",
     "@emotion/cache": "^11.14.0",
@@ -16,7 +17,7 @@
     "@emotion/styled": "^11.14.1",
     "@radix-ui/react-popover": "^1.0.7",
     "cross-env": "^7.0.3",
-    "next": "^15.5.7",
+    "next": "^16.1.7",
     "raw-loader": "^4.0.2",
     "react": "^18",
     "react-color": "^2.19.3",
@@ -29,12 +30,13 @@
   },
   "devDependencies": {
     "@dxc-technology/typescript-config": "*",
+    "@eslint/js": "^9.31.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18",
     "eslint": "^9.39.1",
-    "eslint-config-next": "16.0.5",
+    "eslint-config-next": "16.0.8",
     "typescript": "^5.6.3"
   }
 }

apps/website/pages/_app.tsx

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, useMemo, useState } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue } from "@dxc-technology/halstack-react";
+import { DxcApplicationLayout, DxcInset, DxcLink, DxcTextInput, DxcToastsQueue } from "@dxc-technology/halstack-react";
 import MainContent from "@/common/MainContent";
 import { useRouter } from "next/router";
 import { LinkDetails, LinksSectionDetails, LinksSections } from "@/common/pagesList";
@@ -32,6 +32,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
   const [filter, setFilter] = useState("");
   const [isExpanded, setIsExpanded] = useState(true);
   const { asPath: currentPath } = useRouter();
+  const isThemeGenerator = currentPath.includes("/theme-generator");
 
   const matchPaths = (linkPath: string) => {
     const desiredPaths = [linkPath, `${linkPath}/code`];
@@ -42,6 +43,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
   const createNavItem = (link: LinkDetails): Item => ({
     label: link.label,
     href: link.path,
+    icon: link.icon,
     selected: matchPaths(link.path),
     badge: link.status && link.status !== "stable" ? <StatusBadge hasTitle status={link.status} /> : undefined,
     renderItem: ({ children }: { children: ReactNode }) => (
@@ -56,6 +58,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
       if ("links" in link) {
         return {
           label: link.label,
+          icon: link.icon,
           items: normalizeNavTabs(link.links),
         } as GroupItem;
       }
@@ -103,34 +106,55 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
       </Head>
       <DxcApplicationLayout
         logo={{ src: dxcLogo, alt: "DXC Technology" }}
-        header={<DxcApplicationLayout.Header />}
+        header={
+          isThemeGenerator ? (
+            <DxcApplicationLayout.Header
+              appTitle="Theme Generator"
+              sideContent={
+                !currentPath.includes("/theme-generator/user-guide") && (
+                  <DxcInset horizontal="var(--spacing-padding-xs)">
+                    <Link href="/theme-generator/user-guide" legacyBehavior passHref>
+                      <DxcLink newWindow icon="description">
+                        User guide
+                      </DxcLink>
+                    </Link>
+                  </DxcInset>
+                )
+              }
+            />
+          ) : (
+            <DxcApplicationLayout.Header />
+          )
+        }
         sidenav={
-          <DxcApplicationLayout.Sidenav
-            navItems={navItems}
-            appTitle={isExpanded && <SidenavLogo />}
-            topContent={
-              isExpanded && (
-                <DxcTextInput
-                  placeholder="Search docs"
-                  value={filter}
-                  onChange={({ value }) => {
-                    setFilter(value);
-                  }}
-                  size="fillParent"
-                  clearable
-                />
-              )
-            }
-            expanded={isExpanded}
-            onExpandedChange={() => {
-              setIsExpanded((currentlyExpanded) => !currentlyExpanded);
-            }}
-          />
+          !isThemeGenerator && (
+            <DxcApplicationLayout.Sidenav
+              navItems={navItems}
+              appTitle={isExpanded && <SidenavLogo />}
+              topContent={
+                isExpanded && (
+                  <DxcTextInput
+                    placeholder="Search docs"
+                    value={filter}
+                    onChange={({ value }) => {
+                      setFilter(value);
+                    }}
+                    size="fillParent"
+                    clearable
+                  />
+                )
+              }
+              expanded={isExpanded}
+              onExpandedChange={() => {
+                setIsExpanded((currentlyExpanded) => !currentlyExpanded);
+              }}
+            />
+          )
         }
       >
         <DxcApplicationLayout.Main>
           <DxcToastsQueue duration={7000}>
-            <MainContent>{componentWithLayout}</MainContent>
+            {!isThemeGenerator ? <MainContent>{componentWithLayout}</MainContent> : <>{componentWithLayout}</>}
           </DxcToastsQueue>
         </DxcApplicationLayout.Main>
       </DxcApplicationLayout>

apps/website/pages/principles/data-visualization.tsx → apps/website/pages/guidelines/data-visualization.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import DataVisualizationPage from "screens/principles/data-visualization/DataVisualizationPage";
+import DataVisualizationPage from "screens/guidelines/data-visualization/DataVisualizationPage";
 
 const DataVisualization = () => (
   <>

apps/website/pages/principles/localization.tsx → apps/website/pages/guidelines/localization.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import LocalizationPage from "screens/principles/localization/LocalizationPage";
+import LocalizationPage from "screens/guidelines/localization/LocalizationPage";
 
 const Localization = () => (
   <>

apps/website/pages/guidelines/themes.tsx

@@ -0,0 +1,13 @@
+import Head from "next/head";
+import ThemesPage from "screens/guidelines/themes/ThemesPage";
+
+const Themes = () => (
+  <>
+    <Head>
+      <title>Themes — Halstack Design System</title>
+    </Head>
+    <ThemesPage />
+  </>
+);
+
+export default Themes;

apps/website/pages/migration/16/component-updates.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import Components16MigrationPage from "screens/migration/Components16MigrationPage";
+import Components16MigrationPage from "screens/migration/components/Components16MigrationPage";
 
 const Components16Migration = () => (
   <>