Code Quality Update

.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.map((file) => `"${file}"`).join(" ")}`,
+      // `npx prettier --write ${filenames.map((file) => `"${file}"`).join(" ")}`
+    ];
+  },
+};

.lycheeignore

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

apps/website/.eslintrc.json

@@ -1,3 +1,19 @@
 {
-  "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/screens/common/HalstackMarkdownParser.tsx

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

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

@@ -55,14 +55,16 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
   };
 
   const handleCopy = () => {
-    navigator.clipboard
-      .writeText(example.code)
-      .then(() => {
-        toast.success({ message: "Code copied to the clipboard." });
-      })
-      .catch(() => {
-        toast.warning({ message: "Failed to copy the text to the clipboard." });
-      });
+    if (example.code) {
+      navigator.clipboard
+        .writeText(example.code)
+        .then(() => {
+          toast.success({ message: "Code copied to the clipboard." });
+        })
+        .catch(() => {
+          toast.warning({ message: "Failed to copy the text to the clipboard." });
+        });
+    }
   };
 
   return (

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 | number</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 | number</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>
     ),
   },