Enabled strict mode and added required changes to the current code

apps/website/pages/_app.tsx

@@ -12,14 +12,14 @@ import StatusBadge from "@/common/StatusBadge";
 import "../global-styles.css";
 
 type NextPageWithLayout = NextPage & {
-  getLayout?: (page: ReactElement) => ReactNode;
+  getLayout?: (_page: ReactElement) => ReactNode;
 };
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 type ApplicationLayoutWrapperProps = {
   condition: boolean;
-  wrapper: (children: React.ReactNode) => JSX.Element;
+  wrapper: (_children: ReactNode) => JSX.Element;
   children: ReactNode;
 };
 
@@ -52,9 +52,12 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   };
 
   const matchPaths = (linkPath: string) => {
-    const pathToBeMatched = currentPath.split("#")[0].slice(0, -1);
+    const pathToBeMatched = currentPath?.split("#")[0]?.slice(0, -1);
     const desiredPaths = [linkPath, `${linkPath}/specifications`, `${linkPath}/usage`];
-    return desiredPaths.includes(pathToBeMatched);
+    if (pathToBeMatched) {
+      return desiredPaths.includes(pathToBeMatched);
+    }
+    return false;
   };
 
   return (

apps/website/screens/common/Figure.tsx

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 import { DxcFlex } from "@dxc-technology/halstack-react";
+import { ReactNode } from "react";
 
 type DocImageProps = {
-  children: React.ReactNode;
-  caption: string | React.ReactNode;
+  children: ReactNode;
+  caption: string | ReactNode;
 };
 const Figure = ({ caption, children }: DocImageProps) => {
   return (

apps/website/screens/common/HalstackMarkdownParser.tsx

@@ -1,7 +1,7 @@
 import { DxcBulletedList, DxcHeading, DxcLink } from "@dxc-technology/halstack-react";
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 import Code from "./Code";
-import React, { Children } from "react";
+import { Children } from "react";
 
 const HalstackMarkdownParser = ({ markdown }: { markdown: string }) => (
   <ReactMarkdown
@@ -15,7 +15,7 @@ const HalstackMarkdownParser = ({ markdown }: { markdown: string }) => (
       h3: ({ children }) => (
         <DxcHeading
           level={4}
-          text={Children.map(children, (child) => (child as string).replace(/[^\x00-\x7F]/g, "")).join("")}
+          text={Children?.map(children, (child) => (child as string).replace(/[^\x00-\x7F]/g, ""))?.join("") ?? ""}
         />
       ),
       ul: ({ children }) => (

apps/website/screens/common/MainContent.tsx

@@ -14,9 +14,11 @@ const MainContainer = styled.div`
 `;
 
 const pathVersion =
-  process.env.NEXT_PUBLIC_SITE_VERSION === "next" || process.env.NODE_ENV === "development"
-    ? 0
-    : parseInt(process.env.NEXT_PUBLIC_SITE_VERSION?.split(".")[0], 10);
+  process.env.NEXT_PUBLIC_SITE_VERSION == null
+    ? null
+    : process.env.NEXT_PUBLIC_SITE_VERSION === "next" || process.env.NODE_ENV === "development"
+      ? 0
+      : parseInt(process.env.NEXT_PUBLIC_SITE_VERSION.split(".")[0]!, 10);
 
 const MainContent = ({ children }: { children: ReactNode }) => {
   const toast = useToast();

apps/website/screens/common/PageHeading.tsx

@@ -1,6 +1,7 @@
+import { ReactNode } from "react";
 import styled from "styled-components";
 
-const PageHeading = ({ children }: { children: React.ReactNode }) => {
+const PageHeading = ({ children }: { children: ReactNode }) => {
   return <PageHeadingContainer>{children}</PageHeadingContainer>;
 };
 

apps/website/screens/common/QuickNavContainerLayout.tsx

@@ -1,5 +1,7 @@
+import { ReactNode } from "react";
+
 type QuickNavContainerLayoutProps = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 const QuickNavContainerLayout = ({ children }: QuickNavContainerLayoutProps) => <>{children}</>;

apps/website/screens/common/Section.tsx

@@ -1,13 +1,14 @@
 import { DxcFlex } from "@dxc-technology/halstack-react";
 import HeadingLink from "./HeadingLink";
+import { ReactNode } from "react";
 
 type LevelEnum = 1 | 2 | 3 | 4 | 5;
 
 export type SectionType = {
   title: string;
   level?: LevelEnum;
   subSections?: SectionType[];
-  content?: React.ReactNode;
+  content?: ReactNode;
   navSubtitle?: string;
 };
 

apps/website/screens/common/StatusBadge.tsx

@@ -42,7 +42,7 @@ const getBadgeTitle = (status: StatusBadgeProps["status"]) => {
 
 const StatusBadge = ({ hasTitle = false, status }: StatusBadgeProps) => (
   <DxcBadge
-    label={status[0].toUpperCase() + status.slice(1)}
+    label={status[0]?.toUpperCase() + status.slice(1)}
     color={getBadgeColor(status)}
     title={hasTitle ? getBadgeTitle(status) : undefined}
     size="small"

apps/website/screens/common/TableCode.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import styled from "styled-components";
 
 const TableCode = styled.code`
@@ -8,7 +9,7 @@ const TableCode = styled.code`
   border-radius: 0.25rem;
 `;
 
-export const ExtendedTableCode = ({ children }: { children: React.ReactNode }) => (
+export const ExtendedTableCode = ({ children }: { children: ReactNode }) => (
   <ExtendedCodeContainer>
     <StyledExtendedCode>{children}</StyledExtendedCode>
   </ExtendedCodeContainer>

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import styled from "styled-components";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import theme from "./liveEditorTheme";
@@ -41,8 +41,8 @@ type ExamplePropTypes = {
   actionsVisible?: boolean;
   defaultIsVisible?: boolean;
   example: {
-    scope?: Record<string, any>;
-    code?: string;
+    scope: Record<string, any>;
+    code: string;
   };
 };
 

apps/website/screens/common/pagesList.ts

@@ -14,8 +14,8 @@ export type LinksSectionDetails = {
 };
 
 type NavigationLinks = {
-  previousLink: LinkDetails | null;
-  nextLink: LinkDetails | null;
+  previousLink?: LinkDetails;
+  nextLink?: LinkDetails;
 };
 
 export const themeGeneratorLinks = ["/theme-generator/opinionated-theme/", "/theme-generator/advanced-theme/"];
@@ -69,14 +69,10 @@ export const getNavigationLinks = (currentPath: string): NavigationLinks => {
   const links = LinksSections.flatMap((section) => section.links);
   const currentLinkIndex = getCurrentLinkIndex(links, currentPath);
   if (currentLinkIndex === -1) {
-    return { previousLink: null, nextLink: null };
+    return {};
   }
-  const nextLinkIndex = currentLinkIndex + 1;
-  const nextLinkExists = nextLinkIndex < links.length;
-  const previousLinkIndex = currentLinkIndex - 1;
-  const previousLinkExists = previousLinkIndex >= 0;
   return {
-    previousLink: previousLinkExists ? links[previousLinkIndex] : null,
-    nextLink: nextLinkExists ? links[nextLinkIndex] : null,
+    previousLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
+    nextLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
   };
 };

apps/website/screens/components/accordion/AccordionPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import PageHeading from "@/common/PageHeading";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const AccordionPageHeading = ({ children }: { children: React.ReactNode }) => {
+const AccordionPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/accordion" },
     { label: "Usage", path: "/components/accordion/usage" },

apps/website/screens/components/alert/AlertPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const AlertPageHeading = ({ children }: { children: React.ReactNode }) => {
+const AlertPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/alert" },
     { label: "Usage", path: "/components/alert/usage" },

apps/website/screens/components/alert/code/AlertCodePage.tsx

@@ -47,7 +47,7 @@ const sections = [
               message (e.g. closing the modal alert).
             </td>
             <td>
-              <TableCode>false</TableCode>
+              <TableCode>true</TableCode>
             </td>
           </tr>
           <tr>

apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const ApplicationLayoutPageHeading = ({ children }: { children: React.ReactNode }) => {
+const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/application-layout" },
     { label: "Usage", path: "/components/application-layout/usage" },

apps/website/screens/components/badge/BadgePageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const BadgePageHeading = ({ children }: { children: React.ReactNode }) => {
+const BadgePageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/badge" },
     { label: "Usage", path: "/components/badge/usage" },

apps/website/screens/components/bleed/BleedPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const BleedPageHeading = ({ children }: { children: React.ReactNode }) => {
+const BleedPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/bleed" },
     { label: "Usage", path: "/components/bleed/usage" },

apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx

@@ -2,8 +2,9 @@ import PageHeading from "@/common/PageHeading";
 import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const BreadcrumbsPageHeading = ({ children }: { children: React.ReactNode }) => {
+const BreadcrumbsPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/breadcrumbs" },
     { label: "Usage", path: "/components/breadcrumbs/usage" },

apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx

@@ -2,8 +2,9 @@ import PageHeading from "@/common/PageHeading";
 import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const BulletedListPageHeading = ({ children }: { children: React.ReactNode }) => {
+const BulletedListPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/bulleted-list" },
     { label: "Usage", path: "/components/bulleted-list/usage" },

apps/website/screens/components/button/ButtonPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const ButtonPageHeading = ({ children }: { children: React.ReactNode }) => {
+const ButtonPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/button" },
     { label: "Usage", path: "/components/button/usage" },

apps/website/screens/components/card/CardPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const CardPageHeading = ({ children }: { children: React.ReactNode }) => {
+const CardPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/card" },
     { label: "Usage", path: "/components/card/usage" },

apps/website/screens/components/checkbox/CheckboxPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const CheckboxPageHeading = ({ children }: { children: React.ReactNode }) => {
+const CheckboxPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/checkbox" },
     { label: "Usage", path: "/components/checkbox/usage" },

apps/website/screens/components/chip/ChipPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const ChipPageHeading = ({ children }: { children: React.ReactNode }) => {
+const ChipPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/chip" },
     { label: "Usage", path: "/components/chip/usage" },

apps/website/screens/components/container/ContainerPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const ContainerPageHeading = ({ children }: { children: React.ReactNode }) => {
+const ContainerPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/container" },
     { label: "Usage", path: "/components/container/usage" },

apps/website/screens/components/contextual-menu/ContextualMenuPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const ContextualMenuPageHeading = ({ children }: { children: React.ReactNode }) => {
+const ContextualMenuPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/contextual-menu" },
     { label: "Usage", path: "/components/contextual-menu/usage" },

apps/website/screens/components/data-grid/DataGridPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex, DxcAlert } from "@dxc-technology/halstack-react"
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const DataGridPageHeading = ({ children }: { children: React.ReactNode }) => {
+const DataGridPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/data-grid" },
     { label: "Usage", path: "/components/data-grid/usage" },

apps/website/screens/components/data-grid/code/DataGridCodePage.tsx

@@ -278,7 +278,6 @@ const sections = [
       </DxcTable>
     ),
   },
-  ,
   {
     title: "DxcDataGrid.ActionsCell",
     content: (

apps/website/screens/components/date-input/DateInputPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const DateInputPageHeading = ({ children }: { children: React.ReactNode }) => {
+const DateInputPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/date-input" },
     { label: "Usage", path: "/components/date-input/usage" },

apps/website/screens/components/dialog/DialogPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const DialogPageHeading = ({ children }: { children: React.ReactNode }) => {
+const DialogPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/dialog" },
     { label: "Usage", path: "/components/dialog/usage" },

apps/website/screens/components/divider/DividerPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const DividerPageHeading = ({ children }: { children: React.ReactNode }) => {
+const DividerPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/divider" },
     { label: "Usage", path: "/components/divider/usage" },

apps/website/screens/components/dropdown/DropdownPageLayout.tsx

@@ -2,8 +2,9 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
+import { ReactNode } from "react";
 
-const DropdownPageHeading = ({ children }: { children: React.ReactNode }) => {
+const DropdownPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/dropdown" },
     { label: "Usage", path: "/components/dropdown/usage" },