feat: Run prettier and ESLint for staged files on pre-commit hook [PR #1 - Linting and Formatting]

.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  extends: [
+    "standard-with-typescript",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier",
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    extraFileExtensions: [".md", ".css"],
+  },
+  plugins: ["react", "react-hooks"],
+  rules: {},
+};

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1 @@
+{}

README.md

@@ -1,7 +1,7 @@
 <img src="https://static.mparticle.com/sdk/mp_logo_black.svg" width="280"><br>
 
-
 # mParticle Aquarium
+
 mParticle Component Library
 
 ## Contributing

docs/dev.md

@@ -0,0 +1,5 @@
+### Editor configuration
+
+- **Prettier**: For configuring your editor to play nicely with Prettier, take a look at the [Editors doc page](https://prettier.io/docs/en/editors).
+  - Also, if you're using VSCode you might want to set prettier as the default formatter and also turn on "Format on Save" option.
+- **ESLint**: Check [Integrations doc page](https://eslint.org/docs/latest/use/integrations)

package.json

@@ -4,9 +4,9 @@
   "description": "mParticle Component Library",
   "license": "Apache-2.0",
   "keywords": [
-      "mparticle",
-      "analytics",
-      "cdp"
+    "mparticle",
+    "analytics",
+    "cdp"
   ],
   "repository": "https://github.com/mParticle/aquarium/",
   "publishConfig": {
@@ -23,7 +23,6 @@
     "antd": "5.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.3.2",
     "storybook": "7.6.2"
   },
   "devDependencies": {
@@ -38,8 +37,19 @@
     "@storybook/test": "7.6.2",
     "@storybook/test-runner": "0.16.0",
     "@storybook/testing-library": "0.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
     "concurrently": "8.2.2",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "http-server": "14.1.1",
+    "prettier": "3.1.1",
+    "typescript": "^5.3.3",
     "vite": "4.5.1",
     "wait-on": "7.2.0"
   },
@@ -49,6 +59,7 @@
     "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npm run build-storybook --quiet && NODE_NO_WARNINGS=1 npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:127.0.0.1:6006 && npm run test-storybook\"",
     "build-dist": "sh ./scripts/build-dist.sh",
     "build-storybook": "storybook build",
-    "tokens-to-css": "npx style-dictionary build --config ./style-dictionary.json"
+    "tokens-to-css": "npx style-dictionary build --config ./style-dictionary.json",
+    "lint": "eslint --ext .ts,.tsx,.js,.jsx \"src/**/*.{ts,js,tsx,jsx}\""
   }
 }