diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..d0e47f3 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +node_modules/* +README.md +dist/ +public/ \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..3253ca7 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,28 @@ +module.exports = { + env: { + "browser": true, + "es6": true, + "node": true + }, + extends: [ + "plugin:react/recommended", + "eslint:recommended", + "plugin:prettier/recommended" + ], + parserOptions: { + ecmaFeatures: { + jsx: true + }, + ecmaVersion: 2018, + sourceType: 'module' + }, + plugins: [ + "react" + ], + rules: { + "react/prop-types": 1, + "no-unused-vars": 1, + "react/display-name": 1, + "no-console": 1 + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 110ee20..4f0807d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "interactive-iran-map", - "version": "0.1.2", + "version": "0.1.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5062,6 +5062,15 @@ } } }, + "eslint-config-prettier": { + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz", + "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==", + "dev": true, + "requires": { + "get-stdin": "^6.0.0" + } + }, "eslint-config-react-app": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz", @@ -5272,6 +5281,15 @@ } } }, + "eslint-plugin-prettier": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz", + "integrity": "sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==", + "dev": true, + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, "eslint-plugin-react": { "version": "7.19.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz", @@ -5683,6 +5701,12 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz", "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==" }, + "fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "fast-glob": { "version": "2.2.7", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz", @@ -6119,6 +6143,12 @@ "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz", "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==" }, + "get-stdin": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", + "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", + "dev": true + }, "get-stream": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", @@ -10235,6 +10265,21 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz", + "integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==", + "dev": true + }, + "prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "requires": { + "fast-diff": "^1.1.2" + } + }, "pretty-bytes": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz", diff --git a/package.json b/package.json index 3b7f9af..83ad528 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", @@ -28,7 +29,8 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "publish:npm": "export NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/InteractiveIranMap --out-dir dist --copy-files" + "publish:npm": "export NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/InteractiveIranMap --out-dir dist --copy-files", + "lint": "eslint . --ext .js" }, "eslintConfig": { "extends": "react-app" @@ -46,6 +48,12 @@ ] }, "devDependencies": { - "@babel/cli": "^7.10.1" + "@babel/cli": "^7.10.1", + "eslint-config-prettier": "^6.10.1", + "eslint-plugin-prettier": "^3.1.2", + "eslint-plugin-react": "^7.19.0", + "prettier": "2.0.1", + "eslint": "^6.7.2", + "eslint-plugin-import": "^2.19.1" } } diff --git a/src/InteractiveIranMap/IranMap.js b/src/InteractiveIranMap/IranMap.js index 915589f..5800ffc 100755 --- a/src/InteractiveIranMap/IranMap.js +++ b/src/InteractiveIranMap/IranMap.js @@ -1,6 +1,7 @@ // core libraries import React from "react"; import ReactTooltip from "react-tooltip"; +import PropTypes from "prop-types"; // constants import { iransStatesProperties } from "./constants/iransStates"; @@ -155,4 +156,21 @@ const InteractiveIranMap = (props) => { ); }; +InteractiveIranMap.propTypes = { + height: PropTypes.number.isRequired, + backgroundColor: PropTypes.string, + onClick: PropTypes.func.isRequired, + selectedArea: PropTypes.string.isRequired, + useTestData: PropTypes.bool, + defaultAreasColor: PropTypes.string, + selectedAreaColor: PropTypes.string, +}; + +InteractiveIranMap.defaultProps = { + defaultAreasColor: "#fff", + selectedAreaColor: "red", + backgroundColor: "white", + useTestData: false, +}; + export default InteractiveIranMap; diff --git a/src/InteractiveIranMap/index.js b/src/InteractiveIranMap/index.js index 77e52e9..dd6a721 100644 --- a/src/InteractiveIranMap/index.js +++ b/src/InteractiveIranMap/index.js @@ -1,7 +1,7 @@ // InteractiveIranMap.js import React from "react"; import IranMap from "./IranMap"; -const InteractiveIranMap = (props) => { +const InteractiveIranMap = () => { const [state, setState] = React.useState({ selectedArea: "tehran" }); const selectAreaHandler = (area) => { setState((prevState) => ({ ...prevState, selectedArea: area.name })); @@ -10,12 +10,9 @@ const InteractiveIranMap = (props) => {
);