chore: introduce TS-enabled linting and formatting

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     "plugin:react/recommended",
     "prettier",
     "plugin:cypress/recommended",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -26,4 +26,22 @@ module.exports = {
       version: "detect",
     },
   },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      extends: [
+        "plugin:react/recommended",
+        "prettier",
+        "plugin:cypress/recommended",
+        "plugin:storybook/recommended",
+        "plugin:@typescript-eslint/recommended",
+      ],
+      plugins: ["@typescript-eslint"],
+      rules: {
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-non-null-assertion": 0,
+        "react/display-name": "off",
+      },
+    },
+  ],
 };

package.json

@@ -29,6 +29,8 @@
     "@storybook/react": "^7.6.4",
     "@storybook/react-webpack5": "^7.6.4",
     "@storybook/test": "^7.6.4",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.0.2",
     "babel-loader": "^8.2.0",
     "blink-diff": "^1.0.13",
@@ -56,7 +58,7 @@
     "style-loader": "^3.3.3",
     "svg-spritemap-webpack-plugin": "^3.7.1",
     "tailwindcss": "^3.3.6",
-    "vite": "^4.5.2",
+    "typescript": "5.3.3",
     "webpack": "^5.3.2",
     "webpack-cli": "^4.2.0",
     "yargs": "^16.2.0"
@@ -66,9 +68,9 @@
     "build:verbose": "node scripts/build.js -v",
     "watch": "node scripts/build.js -w",
     "dev": "./scripts/cleanstart.sh",
-    "format:check": "yarn prettier -c *.js src src/**/*.jsx cypress",
-    "format:write": "yarn prettier -w *.js src src/**/*.jsx cypress",
-    "lint": "eslint *.js src src/**/*.jsx cypress",
+    "format:check": "yarn prettier -c *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
+    "format:write": "yarn prettier -w *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
+    "lint": "eslint *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
     "cy:open": "cypress open",
     "cy:headless": "cypress run --quiet",
     "update:all": "./scripts/update-dependents.sh",

src/core/DropdownMenu/DropdownMenu.stories.tsx

@@ -32,6 +32,7 @@ export const Default: Story = {
         <a
           href="https://ably.com/docs"
           target="_blank"
+          rel="noreferrer"
           className="group block p-8 hover:bg-light-grey hover:text-cool-black rounded"
         >
           <p className="ui-featured-link group-hover:text-gui-hover font-light text-cool-black">

src/core/FeaturedLink/component.jsx

@@ -72,34 +72,34 @@ const FeaturedLink = ({
 
 FeaturedLink.propTypes = {
   /**
-    * Passed to the href in the anchor.
-    */
+   * Passed to the href in the anchor.
+   */
   url: T.string,
   /**
-    * Text size of the link.
-    */
+   * Text size of the link.
+   */
   children: T.node,
   /**
-    * Passed to the href in the anchor.
-    */
+   * Passed to the href in the anchor.
+   */
   textSize: T.string,
   /**
-    * Color of the icon. Depends on icons being drawn with strokes and the currentColor
-    * property being applied to all svgs. Use tailwind color classes (i.e.
-    * text-white).
-    */
+   * Color of the icon. Depends on icons being drawn with strokes and the currentColor
+   * property being applied to all svgs. Use tailwind color classes (i.e.
+   * text-white).
+   */
   iconColor: T.string,
   /**
-    * If true, removes the default vertical padding.
-    */
+   * If true, removes the default vertical padding.
+   */
   flush: T.bool,
   /**
-    * If true, the arrow is positioned on the left side of the text.
-    */
+   * If true, the arrow is positioned on the left side of the text.
+   */
   reverse: T.bool,
   /**
-    * Additional classes to be added to the link.
-    */
+   * Additional classes to be added to the link.
+   */
   additionalCSS: T.string,
   newWindow: T.bool,
   onClick: T.func,

src/core/Slider/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import Slider from "./component.jsx";
 
 export default {
@@ -10,7 +10,7 @@ export default {
   tags: ["autodocs"],
 };
 
-const Slide = ({ children }) => (
+const Slide = ({ children }: { children: ReactNode }) => (
   <div className="h-full p-24 bg-white rounded">
     <p className="ui-text-p2 text-center">{children}</p>
   </div>