Code Quality Update

.github/workflows/chromatic.yml

@@ -36,6 +36,7 @@ jobs:
           exitOnceUploaded: true
           exitZeroOnChanges: true
           workingDir: packages/lib
+          forceRebuild: true
 
       - name: Run Storybook Tests
         run: |

.husky/pre-commit

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

.lintstagedrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  "(apps|packages)/**/*.(ts|tsx|js)": (filenames) => {
+    return [
+      `npx eslint --fix --max-warnings 0 ${filenames.join(" ")}`,
+      // `npx prettier --write ${filenames.join(" ")}`
+    ];
+  },
+};

.lycheeignore

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

apps/website/.eslintrc.json

@@ -1,3 +1,15 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "@dxc-technology/eslint-config/react-internal.js", "@dxc-technology/eslint-config/next.js"],
+  "rules": {
+    "no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    // TODO: Remove rules
+    "react/no-unescaped-entities": "off",
+    "import/no-anonymous-default-export": "off",
+    "react-hooks/exhaustive-deps": "off"
+  }
 }

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",

apps/website/pages/_app.tsx

@@ -13,14 +13,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;
 };
 
@@ -53,9 +53,12 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
   };
 
   const matchPaths = (linkPath: string) => {
-    const pathToBeMatched = currentPath.split("#")[0].slice(0, -1);
-    const desiredPaths = [linkPath, `${linkPath}/specifications`, `${linkPath}/usage`];
-    return desiredPaths.includes(pathToBeMatched);
+    const pathToBeMatched = currentPath?.split("#")[0]?.slice(0, -1);
+    if (pathToBeMatched) {
+      const desiredPaths = [linkPath, `${linkPath}/specifications`, `${linkPath}/usage`];
+      return desiredPaths.includes(pathToBeMatched);
+    }
+    return false;
   };
 
   return (

apps/website/screens/common/ComponentHeading.tsx

@@ -1,5 +1,4 @@
 import { DxcHeading } from "@dxc-technology/halstack-react";
-import React from "react";
 
 type ComponentHeadingProps = {
   name: string;

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 from "react";
+import { Children } from "react";
 
 type Props = { markdown: string };
 
@@ -16,9 +16,7 @@ const HalstackMarkdownParser = ({ markdown }: Props) => (
       code: ({ children }) => <Code>{children}</Code>,
       h3: ({ children }) => <DxcHeading level={4} text={children as string} />,
       ul: ({ children }) => (
-        <DxcBulletedList>
-          {React.Children.map(children, (child) => (child !== "\n" ? child : undefined))}
-        </DxcBulletedList>
+        <DxcBulletedList>{Children.map(children, (child) => (child !== "\n" ? child : undefined))}</DxcBulletedList>
       ),
       li: ({ children }) => <DxcBulletedList.Item>{children}</DxcBulletedList.Item>,
     }}

apps/website/screens/common/HeadingLink.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 import slugify from "slugify";
 import { DxcBleed, DxcHeading } from "@dxc-technology/halstack-react";

apps/website/screens/common/PageHeading.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+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/QuickNavContainer.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 import { DxcGrid, DxcQuickNav } from "@dxc-technology/halstack-react";
 import Section, { SectionType } from "./Section";

apps/website/screens/common/Section.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { ReactNode } from "react";
 import { DxcFlex } from "@dxc-technology/halstack-react";
 import HeadingLink from "./HeadingLink";
 
@@ -8,7 +8,7 @@ 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/TabsPageLayout.tsx

@@ -1,8 +1,6 @@
 import { useRouter } from "next/router";
 import { DxcNavTabs } from "@dxc-technology/halstack-react";
-import React from "react";
 import Link from "next/link";
-import styled from "styled-components";
 
 type TabsPageLayoutProps = {
   tabs: { label: string; path: string }[];

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

@@ -5,14 +5,14 @@ import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import theme from "./liveEditorTheme";
 import { DxcButton } from "@dxc-technology/halstack-react";
 
-type Example = {
+type ExampleType = {
   scope?: object;
   code?: string;
 };
 type ExamplePropTypes = {
   actionsVisible?: boolean;
   defaultIsVisible?: boolean;
-  example: Example;
+  example: ExampleType;
 };
 
 const icons = {
@@ -34,7 +34,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
   const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible);
   const [copied, changeCopied] = useState(false);
 
-  const liveEditorRef = useRef<HTMLDivElement>(null);
+  const liveEditorRef = useRef<HTMLDivElement | null>(null);
 
   const handleCodeOnClick = () => {
     changeIsCodeVisible(!isCodeVisible);

apps/website/screens/common/pagesList.ts

@@ -75,7 +75,7 @@ export const getNavigationLinks = (currentPath: string): NavigationLinks => {
   const previousLinkIndex = currentLinkIndex - 1;
   const previousLinkExists = previousLinkIndex >= 0;
   return {
-    previousLink: previousLinkExists ? links[previousLinkIndex] : null,
-    nextLink: nextLinkExists ? links[nextLinkIndex] : null,
+    previousLink: previousLinkExists ? (links[previousLinkIndex] ?? null) : null,
+    nextLink: nextLinkExists ? (links[nextLinkIndex] ?? null) : null,
   };
 };

apps/website/screens/components/badge/code/BadgeCodePage.tsx

@@ -13,89 +13,93 @@ const sections = [
     title: "Props",
     content: (
       <DxcTable>
-        <tr>
-          <th>Name</th>
-          <th>Type</th>
-          <th>Description</th>
-          <th>Default</th>
-        </tr>
-        <tr>
-          <td>label</td>
-          <td>
-            <TableCode>string</TableCode>
-          </td>
-          <td>Text to be placed in the badge.</td>
-          <td>-</td>
-        </tr>
-        <tr>
-          <td>mode</td>
-          <td>
-            <TableCode>'contextual' | 'notification'</TableCode>
-          </td>
-          <td>The available badge modes.</td>
-          <td>
-            <TableCode>'contextual'</TableCode>
-          </td>
-        </tr>
-        <tr>
-          <td>notificationLimit</td>
-          <td>
-            <TableCode>number</TableCode>
-          </td>
-          <td>
-            In notification mode, if the number entered as label is greater that this notification limit,{" "}
-            <TableCode>+notificationLimit</TableCode> will be shown. If not, the entered text will be shown as label.
-          </td>
-          <td>
-            <TableCode>99</TableCode>
-          </td>
-        </tr>
-        <tr>
-          <td>title</td>
-          <td>
-            <TableCode>string</TableCode>
-          </td>
-          <td>
-            Text representing advisory information related to the badge. Under the hood, this prop also serves as an
-            accessible label for the component.
-          </td>
-          <td>-</td>
-        </tr>
-        <tr>
-          <td>color</td>
-          <td>
-            <TableCode>'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple'</TableCode>
-          </td>
-          <td>Affects the visual style of the badge. It can be used following semantic purposes or not.</td>
-          <td>
-            <TableCode>'grey'</TableCode>
-          </td>
-        </tr>
-        <tr>
-          <td>icon</td>
-          <td>
-            <TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
-          </td>
-          <td>
-            <DxcLink newWindow href="https://fonts.google.com/icons">
-              Material Symbol
-            </DxcLink>{" "}
-            name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols,
-            replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol
-            name with <TableCode>"filled_"</TableCode>.
-          </td>
-          <td>-</td>
-        </tr>
-        <tr>
-          <td>size</td>
-          <td>
-            <TableCode>'small' | 'medium' | 'large'</TableCode>
-          </td>
-          <td>Size of the component.</td>
-          <td>
-            <TableCode>'medium'</TableCode>
-          </td>
-        </tr>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>label</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>Text to be placed in the badge.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>mode</td>
+            <td>
+              <TableCode>'contextual' | 'notification'</TableCode>
+            </td>
+            <td>The available badge modes.</td>
+            <td>
+              <TableCode>'contextual'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>notificationLimit</td>
+            <td>
+              <TableCode>number</TableCode>
+            </td>
+            <td>
+              In notification mode, if the number entered as label is greater that this notification limit,{" "}
+              <TableCode>+notificationLimit</TableCode> will be shown. If not, the entered text will be shown as label.
+            </td>
+            <td>
+              <TableCode>99</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>title</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              Text representing advisory information related to the badge. Under the hood, this prop also serves as an
+              accessible label for the component.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>color</td>
+            <td>
+              <TableCode>'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple'</TableCode>
+            </td>
+            <td>Affects the visual style of the badge. It can be used following semantic purposes or not.</td>
+            <td>
+              <TableCode>'grey'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>icon</td>
+            <td>
+              <TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
+            </td>
+            <td>
+              <DxcLink newWindow href="https://fonts.google.com/icons">
+                Material Symbol
+              </DxcLink>{" "}
+              name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols,
+              replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the
+              symbol name with <TableCode>"filled_"</TableCode>.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>size</td>
+            <td>
+              <TableCode>'small' | 'medium' | 'large'</TableCode>
+            </td>
+            <td>Size of the component.</td>
+            <td>
+              <TableCode>'medium'</TableCode>
+            </td>
+          </tr>
+        </tbody>
       </DxcTable>
     ),
   },