Code Quality Update

.github/workflows/check-links.yml

@@ -13,4 +13,4 @@ jobs:
 
       - name: Link Checker
         id: lychee
-        uses: lycheeverse/lychee-action@v2.0.2
+        uses: lycheeverse/lychee-action@v2.0.2

.github/workflows/create-issue.yml

@@ -23,9 +23,6 @@ jobs:
         run: cd scripts && npm install
 
       - name: Run Autorespond Script
-        run: 
-          node scripts/new_issue-message.js
+        run: node scripts/new_issue-message.js
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-

.github/workflows/inactive-issues.yml

@@ -16,5 +16,5 @@ jobs:
           stale-issue-label: "stale"
           stale-issue-message: "This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed."
           close-issue-message: "This issue has been closed as it has been inactive for 15 days since being marked as stale."
-          exempt-issue-labels: 'non-closable'
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          exempt-issue-labels: "non-closable"
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lycheeignore

@@ -1,2 +1 @@
-http://localhost
-%25PUBLIC_URL%25
+http://localhost

apps/website/eslint.config.js

@@ -0,0 +1,9 @@
+import nextConfig from "@dxc-technology/eslint-config/next.js";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/** @type {import("eslint").Config[]} */
+export default [{ ignores: ["out/**", ".next/**", "eslint.config.js"] }, ...nextConfig({ tsconfigRootDir: __dirname })];

apps/website/global-styles.css

@@ -12,12 +12,13 @@
 /* TODO: Remove global styles completely from the website */
 body {
   margin: 0;
-  font-family: Open Sans, sans-serif;
+  font-family:
+    Open Sans,
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }

apps/website/next.config.js → apps/website/next.config.ts

@@ -1,12 +1,15 @@
-/** @type {import('next').NextConfig} */
-module.exports = {
+import type { NextConfig } from "next";
+import type { Configuration } from "webpack";
+
+const nextConfig: NextConfig = {
   images: {
     loader: "custom",
   },
   output: "export",
   trailingSlash: true,
-  webpack: (config) => {
-    config.module.rules.push({
+  webpack: (config: Configuration): Configuration => {
+    config.module = config.module || { rules: [] };
+    config.module.rules?.push({
       test: /\.md$/,
       use: "raw-loader",
     });
@@ -30,3 +33,5 @@ module.exports = {
     "@cloudscape-design/theming-runtime",
   ],
 };
+
+export default nextConfig;

apps/website/package.json

@@ -5,7 +5,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
     "@cloudscape-design/components": "^3.0.706",
@@ -33,8 +33,8 @@
     "@types/react": "^18",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.4",
+    "eslint": "^9.36.0",
+    "eslint-config-next": "15.5.4",
     "typescript": "^5.6.3"
   }
 }

apps/website/pages/_document.tsx

@@ -1,25 +1,27 @@
-import Document, { Head, Html, Main, NextScript } from "next/document";
+import Document, { DocumentContext, DocumentInitialProps, Head, Html, Main, NextScript } from "next/document";
 import createEmotionServer from "@emotion/server/create-instance";
-import React from "react";
 import createCache from "@emotion/cache";
+import { Children } from "react";
 
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx: any) {
+  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
     const originalRenderPage = ctx.renderPage;
 
     const cache = createCache({ key: "css", prepend: true });
-    const { extractCriticalToChunks } = createEmotionServer(cache);
+    const emotionServer = createEmotionServer(cache);
 
     ctx.renderPage = () =>
       originalRenderPage({
-        enhanceApp: (App: any) =>
+        enhanceApp: (App) =>
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           function EnhanceApp(props: any) {
             return <App emotionCache={cache} {...props} />;
           },
       });
 
     const initialProps = await Document.getInitialProps(ctx);
-    const emotionStyles = extractCriticalToChunks(initialProps.html);
+    const emotionStyles = emotionServer.extractCriticalToChunks(initialProps.html);
+
     const emotionStyleTags = emotionStyles.styles.map((style) => (
       <style
         data-emotion={`${style.key} ${style.ids.join(" ")}`}
@@ -30,10 +32,11 @@ export default class MyDocument extends Document {
 
     return {
       ...initialProps,
-      styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
+      styles: [...Children.toArray(initialProps.styles), ...emotionStyleTags],
     };
   }
-  render() {
+
+  render(): JSX.Element {
     return (
       <Html lang="en">
         <Head />

apps/website/pages/components/accordion/index.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import type { ReactElement } from "react";
+import { type ReactElement } from "react";
 import AccordionPageLayout from "screens/components/accordion/AccordionPageLayout";
 import AccordionOverviewPage from "screens/components/accordion/overview/AccordionOverviewPage";
 

apps/website/pages/foundations/tokens.tsx

@@ -10,4 +10,4 @@ const Tokens = () => (
   </>
 );
 
-export default Tokens;
+export default Tokens;

apps/website/pages/index.tsx

@@ -5,7 +5,11 @@ export default function Index() {
   const { asPath, push } = useRouter();
 
   useEffect(() => {
-    asPath === "/" && push("/overview/introduction");
+    if (asPath === "/") {
+      push("/overview/introduction").catch((err) => {
+        console.error("Navigation error:", err);
+      });
+    }
   }, [asPath, push]);
 
   return <></>;

apps/website/pages/overview/releases.tsx

@@ -12,7 +12,7 @@ export const getStaticProps: GetStaticProps<{
   releases: Release[];
 }> = async () => {
   const response = await fetch("https://api.github.com/repos/dxc-technology/halstack-react/releases");
-  const releases: Release[] = await response.json();
+  const releases = (await response.json()) as Release[];
   return { props: { releases } };
 };
 

apps/website/screens/common/CodeBlock.tsx

@@ -33,12 +33,17 @@ const CodeBlock = ({ children }: { children: ReactNode }) => {
   };
 
   const copyCode = () => {
-    navigator.clipboard.writeText(children as string).then(() => {
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 2500);
-    });
+    navigator.clipboard
+      .writeText(children as string)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 2500);
+      })
+      .catch((err) => {
+        console.error("Could not copy text: ", err);
+      });
   };
 
   return (
@@ -59,6 +64,6 @@ const CodeBlock = ({ children }: { children: ReactNode }) => {
       </PreformattedText>
     </DxcFlex>
   );
-}
+};
 
-export default CodeBlock
+export default CodeBlock;

apps/website/screens/common/HalstackMarkdownParser.tsx

@@ -15,6 +15,7 @@ const HalstackMarkdownParser = ({ markdown }: { markdown: string }) => (
       h3: ({ children }) => (
         <DxcHeading
           level={4}
+          // eslint-disable-next-line no-control-regex
           text={Children?.map(children, (child) => (child as string).replace(/[^\x00-\x7F]/g, ""))?.join("") ?? ""}
         />
       ),

apps/website/screens/common/Image.tsx

@@ -1,10 +1,11 @@
 import NextImage from "next/image";
+import type { StaticImageData } from "next/image";
 
 const customLoader = ({ src }: { src: string }) =>
   process.env.NODE_ENV === "production" ? src.replace("//", "/") : src;
 
 type ImageProps = {
-  src: any;
+  src: string | StaticImageData;
   alt: string;
   width?: number;
   height?: number;

apps/website/screens/common/MainContent.tsx

@@ -3,6 +3,12 @@ import { ReactNode, useState, useEffect } from "react";
 import styled from "@emotion/styled";
 import { responsiveSizes } from "./variables";
 
+interface NpmRegistryResponse {
+  "dist-tags": {
+    latest: string;
+  };
+}
+
 const MainContainer = styled.div`
   margin: 80px auto;
   max-width: 1124px;
@@ -25,16 +31,20 @@ const MainContent = ({ children }: { children: ReactNode }) => {
   const [latestRelease, setLatestRelease] = useState<number | null>(null);
 
   useEffect(() => {
-    (async () => {
+    const fetchLatestRelease = async () => {
       try {
         const response = await fetch("https://registry.npmjs.org/@dxc-technology/halstack-react/");
-        const data = await response.json();
-        const latestRelease = parseInt(data["dist-tags"].latest.split(".")[0], 10);
-        setLatestRelease(latestRelease);
+        const data = (await response.json()) as NpmRegistryResponse;
+        const majorVersionStr = data["dist-tags"].latest.split(".")[0];
+        if (majorVersionStr) {
+          const latestRelease = parseInt(majorVersionStr, 10);
+          setLatestRelease(latestRelease);
+        }
       } catch (error) {
         console.error("Error fetching version:", error);
       }
-    })();
+    };
+    void fetchLatestRelease();
   }, []);
 
   useEffect(() => {

apps/website/screens/common/Section.tsx

@@ -1,6 +1,6 @@
+import { ReactNode } from "react";
 import { DxcFlex } from "@dxc-technology/halstack-react";
 import HeadingLink from "./HeadingLink";
-import { ReactNode } from "react";
 
 type LevelEnum = 1 | 2 | 3 | 4 | 5;
 

apps/website/screens/common/example/Example.tsx

@@ -43,11 +43,11 @@ type ExamplePropTypes = {
   actionsVisible?: boolean;
   defaultIsVisible?: boolean;
   example: {
-    scope: Record<string, any>;
+    scope: Record<string, unknown>;
     code: string;
   };
 };
-
+//
 const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => {
   const toast = useToast();
   const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible);

apps/website/screens/common/sidenav/SidenavLogo.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import Image from "@/common/Image";
-import halstackLogo from "@/common/images/halstack_logo.svg";
 import { DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
+import halstackLogo from "@/common/images/halstack_logo.svg";
 
 const LogoContainer = styled.div`
   display: flex;
@@ -30,7 +30,13 @@ const SidenavLogo = ({ subtitle = "Design System" }: { subtitle?: string }) => {
     <DxcFlex alignItems="center">
       <LogoContainer>
         <DxcFlex alignItems="center" gap="var(--spacing-gap-s)">
-          <Image alt="Halstack logo" height={24} src={halstackLogo} width={24} />
+          <Image
+            alt="Halstack logo"
+            height={24}
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            src={halstackLogo}
+            width={24}
+          />
           <Title>Halstack</Title>
         </DxcFlex>
         <Subtitle>{subtitle}</Subtitle>

apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx

@@ -1,4 +1,4 @@
-import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import DocFooter from "@/common/DocFooter";
 import Image from "@/common/Image";
@@ -7,7 +7,6 @@ import Example from "@/common/example/Example";
 import basicExample from "./examples/basicExample";
 import nestedExample from "./examples/nestedExample";
 import placement from "./images/accordion_placement.png";
-import Link from "next/link";
 
 const sections = [
   {
@@ -139,7 +138,7 @@ const sections = [
               <DxcBulletedList.Item>
                 <strong>Single-open behavior</strong>
                 <DxcParagraph>
-                  Some implementations restrict the accordion to allow only one section to be open at a time. When a
+                  Some implementations restrict the accordion to allow only one section to be open at a time. When a
                   user expands a new section, the previously expanded section collapses automatically. This pattern is
                   suitable when:
                 </DxcParagraph>

apps/website/screens/components/alert/overview/AlertOverviewPage.tsx

@@ -25,8 +25,8 @@ const sections = [
       <>
         <DxcParagraph>
           Halstack's Alert component is designed to provide clear and accessible feedback to users, ensuring important
-          messages stand out within an interface. It supports different variants — info, success, warning, and
-          error — allowing teams to communicate various levels of urgency effectively. With options for dismissibility and
+          messages stand out within an interface. It supports different variants — info, success, warning, and error —
+          allowing teams to communicate various levels of urgency effectively. With options for dismissibility and
           customizable content, it adapts to different use cases while maintaining consistency. Its structured design
           enhances readability and ensures a non-intrusive yet noticeable presence.
         </DxcParagraph>