Merge pull request #185 from heritagemap/feature/linter-with-autofix

Линтеры

.env

@@ -0,0 +1 @@
+SASS_PATH=node_modules:src/styles

.eslintignore

@@ -0,0 +1,4 @@
+serviceWorker.ts
+build/*
+server.js
+src/setupProxy.js

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.eslintcache
 
 # testing
 /coverage

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": "stylelint-config-standard",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "scss/dollar-variable-pattern": "^foo"
+  }
+}

README.md

@@ -20,6 +20,21 @@ npm start
 
 Проект автоматически выкатывается при пуше в master на http://heritagemap.ru/
 
+## Линтеры
+
+.ts и .tsx файлы:
+```
+npm run lint
+```
+
+для стилей:
+
+```
+npm run stylelint
+```
+
+добавить к командам `-- --fix` для автоматического исправления ошибок
+
 ## API
 
 Список страниц: https://tools.wmflabs.org/ru_monuments/monmap/api.php?query=list-pages&prefix=%D0%9A%D1%83%D0%BB%D1%8C%D1%82%D1%83%D1%80%D0%BD%D0%BE%D0%B5_%D0%BD%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D0%B5_%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D0%B8

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@mapbox/mapbox-gl-geocoder": "4.7.0",
+    "@testing-library/jest-dom": "5.11.5",
     "@types/react-router-dom": "^5.1.6",
     "@urbica/react-map-gl": "1.14.2",
     "@urbica/react-map-gl-cluster": "0.2.0",
@@ -20,7 +21,8 @@
     "react-map-gl": "5.2.10",
     "react-map-gl-geocoder": "2.1.6",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.4",
+    "react-scripts": "^4.0.1",
+    "stylelint-scss": "^3.18.0",
     "supercluster": "6.0.2",
     "typescript": "3.9.7",
     "unfetch": "4.2.0",
@@ -30,10 +32,27 @@
     "start": "export REACT_APP_VERSION=$(git rev-parse HEAD) && react-scripts start",
     "build": "export REACT_APP_VERSION=$(git rev-parse HEAD) && react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint . --ext .ts,.tsx",
+    "stylelint": "stylelint src/*/*/*.scss"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "airbnb-typescript",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
+    "rules": {
+      "react/state-in-constructor": 0,
+      "react/jsx-props-no-spreading": 0,
+      "no-restricted-properties": 0,
+      "react/no-danger": 0,
+      "react/destructuring-assignment": 0,
+      "react/prop-types": 0
+    }
   },
   "browserslist": {
     "production": [
@@ -48,17 +67,24 @@
     ]
   },
   "devDependencies": {
-    "@types/classnames": "2.2.11",
-    "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "11.1.1",
     "@testing-library/user-event": "12.2.0",
+    "@types/classnames": "2.2.11",
     "@types/jest": "26.0.15",
     "@types/lodash": "4.14.165",
     "@types/mapbox-gl": "1.12.5",
     "@types/node": "12.19.3",
     "@types/react": "16.9.56",
     "@types/react-alert": "5.2.0",
     "@types/react-dom": "16.9.9",
-    "@types/react-map-gl": "5.2.9"
+    "@types/react-map-gl": "5.2.9",
+    "@typescript-eslint/eslint-plugin": "^4.9.0",
+    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "stylelint": "^13.8.0",
+    "stylelint-config-standard": "^20.0.0"
   }
 }

src/App.scss

@@ -1,3 +1,3 @@
 .App {
   text-align: center;
-}
+}

src/App.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider as AlertProvider } from 'react-alert';
-import AlertTemplate from 'react-alert-template-basic'
+import AlertTemplate from 'react-alert-template-basic';
 import App from './App';
 
 test('renders App', () => {
-  const { container } = render((
+  const { container } = render(
     <AlertProvider template={AlertTemplate}>
       <App />
-    </AlertProvider>
-  ));
+    </AlertProvider>,
+  );
 
   expect(container).toBeTruthy();
 });

src/App.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-} from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import Map from 'components/Map';
 import Sidebar from 'components/Sidebar';

src/components/FullInfo/FullInfo.module.scss

@@ -1,10 +1,12 @@
+@import 'variables';
+
 .container {
   margin: 24px 0;
   font-size: 14px;
 }
 
 .attributes {
-  color: #aaa;
+  color: $text;
   font-size: 12px;
 
   div {
@@ -13,7 +15,7 @@
   }
 
   a:link,
-  a:visited  {
-    color: #aaa;
+  a:visited {
+    color: $text;
   }
 }

src/components/FullInfo/index.tsx

@@ -8,7 +8,7 @@ import styles from './FullInfo.module.scss';
 const IMAGE_RESOURCE = '/_api/ru_monument_image?image=';
 const x2js = new X2JS();
 
-const FullInfo = ({ image, id }: { image?: string, id: number | string }) => {
+const FullInfo = ({ image }: { image: string; }) => {
   const [loading, setLoading] = useState(false);
   const [licenses, setLicenses] = useState<string | undefined>('');
   const [file, setFile] = useState<FileInterface | undefined>(undefined);
@@ -20,9 +20,7 @@ const FullInfo = ({ image, id }: { image?: string, id: number | string }) => {
       setFile(undefined);
 
       try {
-        const response = await fetch(
-          IMAGE_RESOURCE + image,
-        );
+        const response = await fetch(IMAGE_RESOURCE + image);
 
         const text: string = await response.text();
         const info = x2js.xml2js(text).response;
@@ -37,26 +35,36 @@ const FullInfo = ({ image, id }: { image?: string, id: number | string }) => {
       } finally {
         setLoading(false);
       }
-    }
+    };
 
     fetchImage();
   }, [image]);
 
   return (
     <div className={styles.container}>
-      {(loading) && ('Загрузка...')}
+      {loading && 'Загрузка...'}
 
       {file && file.urls && (
         <>
-          <img src={file.urls.file} alt={file.name || 'description'} width="320" />
+          <img
+            src={file.urls.file}
+            alt={file.name || 'description'}
+            width="320"
+          />
 
           <div className={styles.attributes}>
             {licenses && (
-              <div dangerouslySetInnerHTML={{ __html: licenses }} className={styles.licenses} />
+              <div
+                dangerouslySetInnerHTML={{ __html: licenses }}
+                className={styles.licenses}
+              />
             )}
 
             {file.author && (
-              <div dangerouslySetInnerHTML={{ __html: file.author + ',' }} className={styles.author} />
+              <div
+                dangerouslySetInnerHTML={{ __html: `${file.author},` }}
+                className={styles.author}
+              />
             )}
 
             {file.date && (
@@ -66,7 +74,7 @@ const FullInfo = ({ image, id }: { image?: string, id: number | string }) => {
         </>
       )}
     </div>
-  )
-}
+  );
+};
 
 export default FullInfo;

src/components/Map/ClusterMarker.tsx

@@ -4,26 +4,39 @@ import { Marker } from '@urbica/react-map-gl';
 
 import styles from './MyMap.module.scss';
 
-export interface cluster {
+export interface Cluster {
   longitude: number;
   latitude: number;
   pointCount: number;
   clusterId: number;
 }
 
-interface ClusterMarkerProps extends cluster {
-  onClick: (newCluster: cluster) => void;
+interface ClusterMarkerProps extends Cluster {
+  onClick: (newCluster: Cluster) => void;
 }
 
-const ClusterMarker = ({ clusterId, longitude, latitude, pointCount, onClick }: ClusterMarkerProps) => {
+const ClusterMarker = ({
+  clusterId,
+  longitude,
+  latitude,
+  pointCount,
+  onClick,
+}: ClusterMarkerProps) => {
   const handleClick = () => {
-    onClick({ longitude, latitude, pointCount, clusterId });
-  }
+    onClick({
+      longitude,
+      latitude,
+      pointCount,
+      clusterId,
+    });
+  };
   return (
     <Marker longitude={longitude} latitude={latitude}>
-      <div className={styles.cluster} onClick={handleClick}>{pointCount}</div>
+      <button type="button" className={styles.cluster} onClick={handleClick}>
+        {pointCount}
+      </button>
     </Marker>
-  )
-}
+  );
+};
 
 export default ClusterMarker;

src/components/Map/MyMap.module.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 .navigationControl {
   position: absolute;
   top: 118px;
@@ -28,14 +30,15 @@
   width: 30px;
   height: 30px;
   color: #fff;
-  background: #6c2c04;
+  background: $primary;
   border-radius: 20px;
+  border: none;
   text-align: center;
   font-size: 12px;
   cursor: pointer;
-
+  outline: none;
+
   &:hover {
-    background: #532203;
+    background: $primaryHover;
   }
-
 }