add linters and prettier

.eslintrc.js

@@ -0,0 +1,60 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  // Specifies the ESLint parser
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended",
+    "react-app",
+    "plugin:sonarjs/recommended",
+    "plugin:jest-playwright/recommended",
+  ],
+  overrides: [
+    // Override some TypeScript rules just for .js files
+    {
+      files: ["*.js"],
+      rules: {
+        "@typescript-eslint/no-var-requires": "off", //
+      },
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020,
+    // Allows for the parsing of modern ECMAScript features
+    sourceType: "module", // Allows for the use of imports
+  },
+  plugins: ["@typescript-eslint", "react", "sonarjs"],
+  rules: {
+    "@typescript-eslint/camelcase": 0,
+    // Disable prop-types as we use TypeScript for type checking
+    "@typescript-eslint/explicit-function-return-type": "off",
+    camelcase: "off",
+    "react/jsx-no-target-blank": 0,
+    "react/prop-types": "off",
+    "sort-keys": [
+      "error",
+      "asc",
+      {
+        caseSensitive: true,
+        minKeys: 2,
+        natural: false,
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-recommended"
+}

lint-staged.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  "*.{js,jsx,ts,tsx,md,html,css,yml}": "npx prettier --write",
+};

package.json

@@ -17,12 +17,32 @@
     "@storybook/react": "^6.1.21",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
+    "@typescript-eslint/parser": "^4.16.1",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
-    "prettier": "2.2.1",
+    "concurrently": "^6.0.0",
+    "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-flowtype": "^5.3.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest-playwright": "^0.2.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-sonarjs": "^0.6.0",
+    "prettier": "^2.2.1",
+    "prettier-plugin-organize-imports": "^1.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rollup": "^2.40.0",
     "rollup-plugin-delete": "^2.0.0",
+    "stylelint": "^13.11.0",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-config-standard": "^20.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {
@@ -35,7 +55,9 @@
     "build": "rollup -c",
     "build-watch": "rollup -c -w",
     "start": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "lint": "concurrently \"node_modules/.bin/eslint src/**/*.{ts,tsx} --quiet --fix\" \"node_modules/.bin/stylelint --fix '**/*.{js,ts,tsx,css}'\"  \"npm run type-check\"",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {}
 }

src/core/Button/index.stories.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-
+import { storiesOf } from "@storybook/react";
+import React from "react";
 import Button from "./";
 
 export const text = "Click me!";

stylelint.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: "stylelint-config-recommended",
+  ignoreFiles: [
+    // (thuang): Ignore `venv` folder
+    "venv/**/*",
+  ],
+};