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: {},
+};

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

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

.prettierrc

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

CONTRIBUTING.md

@@ -4,10 +4,11 @@ Thanks for contributing! Please read this document to follow our conventions for
 
 ## Setting Up
 
--   Fork the repository and then clone down your fork
--   Commit your code per the conventions below, and PR into the repository's `main` branch
--   Your PR title will be checked automatically against the below convention (view the commit history to see examples of a proper commit/PR title). If it fails, you must update your title.
--   Our engineers will work with you to get your code change implemented once a PR is up
+- Fork the repository and then clone down your fork
+- Run `npm run prepare` to setup Husky pre-commit hooks
+- Commit your code per the conventions below, and PR into the repository's `main` branch
+- Your PR title will be checked automatically against the below convention (view the commit history to see examples of a proper commit/PR title). If it fails, you must update your title.
+- Our engineers will work with you to get your code change implemented once a PR is up
 
 ## PR Title and Commit Convention
 
@@ -25,16 +26,22 @@ The standard format for commit messages is as follows:
 
 The following lists the different `types` allowed in the commit message:
 
--   feat: A new feature (automatic minor release)
--   fix: A bug fix (automatic patch release)
--   docs: Documentation only changes
--   style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
--   refactor: A code change that neither fixes a bug nor adds a feature
--   perf: A code change that improves performance
--   test: Adding missing or correcting existing tests
--   chore: Changes that don't modify src or test files, such as automatic documentation generation, or building latest assets
--   ci: Changes to CI configuration files/scripts
--   revert: Revert commit
--   build: Changes that affect the build system or other dependencies
+- feat: A new feature (automatic minor release)
+- fix: A bug fix (automatic patch release)
+- docs: Documentation only changes
+- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- refactor: A code change that neither fixes a bug nor adds a feature
+- perf: A code change that improves performance
+- test: Adding missing or correcting existing tests
+- chore: Changes that don't modify src or test files, such as automatic documentation generation, or building latest assets
+- ci: Changes to CI configuration files/scripts
+- revert: Revert commit
+- build: Changes that affect the build system or other dependencies
 
 In the footer, if there is a breaking change, start your footer with `BREAKING CHANGE:` followed by a description.
+
+## 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)

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

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,17 @@
     "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",
+    "prepare": "husky install",
+    "lint": "eslint --ext .ts,.tsx,.js,.jsx \"src/**/*.{ts,js,tsx,jsx}\""
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "npm lint --fix",
+      "prettier --write"
+    ],
+    "*.{json,yml,md}": [
+      "prettier --write"
+    ]
   }
 }