OPS-249: Configure Lint (#7)

.eslintrc.js

@@ -0,0 +1,56 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: [
+    "react-app",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+  ],
+  plugins: ["import", "unused-imports"],
+  rules: {
+    // import
+    "import/no-unresolved": "off",
+    "import/order": [
+      "error",
+      {
+        groups: [
+          ["builtin", "external"],
+          "internal",
+          ["parent", "sibling", "index"],
+          "object",
+        ],
+        pathGroups: [
+          {
+            pattern: "~/**",
+            group: "internal",
+          },
+          {
+            pattern: "react",
+            group: "external",
+            position: "before",
+          },
+        ],
+        pathGroupsExcludedImportTypes: ["builtin"],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+    // unused-imports
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "warn",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        vars: "all",
+        varsIgnorePattern: "^_",
+        args: "after-used",
+        argsIgnorePattern: "^_",
+      },
+    ],
+  },
+};

.github/workflows/pr.yml

@@ -49,11 +49,9 @@ jobs:
         run: npm ci
       - name: Prettier
         run: npm run prettier
+      - name: ESLint
+        run: npm run lint
       - name: Build with Gatsby
         env:
           PREFIX_PATHS: 'true'
         run: npm run build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          path: ./public

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <option name="fix-on-save" value="true" />
+  </component>
+</project>

gatsby-config.ts

@@ -16,7 +16,7 @@ const config: GatsbyConfig = {
     {
       resolve: "gatsby-plugin-manifest",
       options: {
-        icon: "src/images/icon.png",
+        icon: "src/assets/images/icon.png",
       },
     },
     "gatsby-plugin-mdx",
@@ -26,7 +26,7 @@ const config: GatsbyConfig = {
       resolve: "gatsby-source-filesystem",
       options: {
         name: "images",
-        path: "./src/images/",
+        path: "./src/assets/images/",
       },
       __key: "images",
     },
@@ -79,6 +79,14 @@ const config: GatsbyConfig = {
         ],
       },
     },
+    {
+      resolve: `gatsby-plugin-alias-imports`,
+      options: {
+        alias: {
+          "~": "src",
+        },
+      },
+    },
   ],
 };
 

package.json

@@ -10,6 +10,10 @@
     "clean": "gatsby clean",
     "typecheck": "tsc --noEmit",
     "prettier": "prettier . --list-different",
+    "prettier-fix": "npm run prettier -- --write",
+    "lint": "eslint \"src/**/*.{ts,js,tsx,jsx}\"",
+    "lint-fix": "npm run lint -- --fix",
+    "fix": "npm run lint-fix && npm run prettier-fix",
     "extract-locales": "npx babel --config-file ./babel-extract.config.js -o tmp/chunk.js 'src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp"
   },
   "dependencies": {
@@ -21,11 +25,13 @@
     "@mui/material": "^5.11.1",
     "@mui/system": "^5.11.0",
     "gatsby": "^5.3.2",
+    "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-emotion": "^8.3.0",
     "gatsby-plugin-image": "^3.3.2",
     "gatsby-plugin-manifest": "^5.3.1",
     "gatsby-plugin-mdx": "^5.3.1",
     "gatsby-plugin-react-i18next": "^3.0.1",
+    "gatsby-plugin-react-svg": "^3.3.0",
     "gatsby-plugin-sharp": "^5.3.2",
     "gatsby-plugin-sitemap": "^6.3.1",
     "gatsby-source-filesystem": "^5.3.1",
@@ -42,7 +48,9 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "babel-plugin-i18next-extract": "^0.9.0",
-    "gatsby-plugin-react-svg": "^3.3.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "prettier": "^2.8.1",
     "typescript": "^4.9.3"
   }

src/app-types.d.ts

@@ -1,5 +1,5 @@
 declare module "*.svg" {
-  const content: React.FC<any>;
+  const content: React.SVGProps<SVGSVGElement>;
   export default content;
 }
 

src/components/AppNav.tsx

@@ -1,8 +1,10 @@
-import { Stack } from "@mui/system";
-import { Link } from "./Link";
-import { Trans } from "gatsby-plugin-react-i18next";
 import * as React from "react";
 
+import { Stack } from "@mui/system";
+import { Trans } from "gatsby-plugin-react-i18next";
+
+import { Link } from "./Link";
+
 export const PAGE_IDS = {
   ourProducts: "our-products",
   processing: "processing",

src/components/BackgroundImageBox.tsx

@@ -1,4 +1,5 @@
 import React, { CSSProperties } from "react";
+
 import { css } from "@emotion/css";
 
 export const BackgroundImageBox: React.FC<

src/components/Block.tsx

@@ -1,6 +1,7 @@
+import React, { ReactNode } from "react";
+
 import styled from "@emotion/styled";
 import { Box, Container, Stack } from "@mui/system";
-import React, { ReactNode } from "react";
 
 interface Props {
   title?: ReactNode;

src/components/Button.tsx

@@ -1,7 +1,8 @@
-import { ButtonUnstyled, buttonUnstyledClasses } from "@mui/base";
-import { css } from "@emotion/react";
 import React, { ReactNode } from "react";
+
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { ButtonUnstyled, buttonUnstyledClasses } from "@mui/base";
 import { Stack, Box } from "@mui/system";
 
 interface Props {

src/components/Card.tsx

@@ -1,6 +1,7 @@
+import React, { ReactNode } from "react";
+
 import styled from "@emotion/styled";
 import { Box, Stack } from "@mui/system";
-import React, { ReactNode } from "react";
 
 interface Props {
   title?: ReactNode;

src/components/Chip.tsx

@@ -1,7 +1,8 @@
-import { Box, Stack } from "@mui/system";
 import React, { ComponentProps, ReactNode } from "react";
-import styled from "@emotion/styled";
+
 import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Box, Stack } from "@mui/system";
 
 interface Props {
   startIcon?: ReactNode;

src/components/IconButton.tsx

@@ -1,7 +1,8 @@
-import { ButtonUnstyled, buttonUnstyledClasses } from "@mui/base";
+import React from "react";
+
 import { css } from "@emotion/react";
-import React, { ReactNode } from "react";
 import styled from "@emotion/styled";
+import { ButtonUnstyled, buttonUnstyledClasses } from "@mui/base";
 
 interface Props {
   href?: string;

src/components/LanguageSelector.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+
 import { Stack } from "@mui/system";
-import { Link } from "./Link";
 import { useI18next } from "gatsby-plugin-react-i18next";
 
+import { Link } from "./Link";
+
 export const LanguageSelector: React.FC = () => {
   const { languages, language } = useI18next();
 

src/components/Layout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Box } from "@mui/system";
 
 export const Layout: React.FC<{ children: React.ReactNode }> = ({

src/components/Link.tsx

@@ -1,6 +1,7 @@
-import { Link as GatsbyLink } from "gatsby-plugin-react-i18next";
 import React from "react";
+
 import styled from "@emotion/styled";
+import { Link as GatsbyLink } from "gatsby-plugin-react-i18next";
 
 interface Props {
   inverted?: boolean;

src/components/index/AntifraudBlock.tsx

@@ -1,19 +1,22 @@
-import { Block } from "../../components/Block";
-import { Trans } from "gatsby-plugin-react-i18next";
-import { Box, Stack } from "@mui/system";
-import { Card } from "../Card";
-import FlexibilityImg from "../../assets/svg/flexibility.svg";
-import ScaleImg from "../../assets/svg/scale.svg";
-import SafetySvg from "../../assets/svg/safety.svg";
-import customizableNotificationsSrc from "../../images/customizable-notifications.png";
-import dashboardInRealTimeSrc from "../../images/dashboard-in-real-time.png";
-import flexibleSystemOfRulesSrc from "../../images/flexible-system-of-rules.png";
 import * as React from "react";
+
+import { Box, Stack } from "@mui/system";
 import Grid from "@mui/system/Unstable_Grid";
-import antifraudBgSrc from "../../images/antifraud-bg.svg";
-import flexibilityBgSrc from "../../images/flexibility-bg.svg";
-import customizableBgSrc from "../../images/customizable-bg.svg";
+import { Trans } from "gatsby-plugin-react-i18next";
+
+import antifraudBgSrc from "~/assets/images/antifraud-bg.svg";
+import customizableBgSrc from "~/assets/images/customizable-bg.svg";
+import customizableNotificationsSrc from "~/assets/images/customizable-notifications.png";
+import dashboardInRealTimeSrc from "~/assets/images/dashboard-in-real-time.png";
+import flexibilityBgSrc from "~/assets/images/flexibility-bg.svg";
+import flexibleSystemOfRulesSrc from "~/assets/images/flexible-system-of-rules.png";
+import FlexibilityImg from "~/assets/svg/flexibility.svg";
+import SafetySvg from "~/assets/svg/safety.svg";
+import ScaleImg from "~/assets/svg/scale.svg";
+
 import { BackgroundImageBox } from "../BackgroundImageBox";
+import { Block } from "../Block";
+import { Card } from "../Card";
 
 export const AntifraudBlock: React.FC<React.ComponentProps<typeof Block>> = (
   props

src/components/index/ContactsBlock.tsx

@@ -1,21 +1,24 @@
 import * as React from "react";
-import { Block } from "../Block";
+import { useState, useEffect } from "react";
+
 import { Stack, Box } from "@mui/system";
 import { Trans } from "gatsby-plugin-react-i18next";
-import ContactsImg from "../../assets/svg/contacts.svg";
-import { Button } from "../Button";
-import Email from "../../assets/svg/email.svg";
-import Telegram from "../../assets/svg/telegram.svg";
-import Linkedin from "../../assets/svg/linkedin.svg";
-import Github from "../../assets/svg/github.svg";
-import Logo from "../../assets/svg/logo.svg";
-import { LanguageSelector } from "../LanguageSelector";
-import { AppNav } from "../AppNav";
-import contactsBgSrc from "../../images/contacts-bg.svg";
-import { BackgroundImageBox } from "../BackgroundImageBox";
-import { IconButton } from "../IconButton";
+
+import contactsBgSrc from "~/assets/images/contacts-bg.svg";
+import ContactsImg from "~/assets/svg/contacts.svg";
+import Email from "~/assets/svg/email.svg";
+import Github from "~/assets/svg/github.svg";
+import Linkedin from "~/assets/svg/linkedin.svg";
+import Logo from "~/assets/svg/logo.svg";
+import Telegram from "~/assets/svg/telegram.svg";
+
 import config from "../../../config.json";
-import { useState, useEffect } from "react";
+import { AppNav } from "../AppNav";
+import { BackgroundImageBox } from "../BackgroundImageBox";
+import { Block } from "../Block";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { LanguageSelector } from "../LanguageSelector";
 
 export const ContactsBlock: React.FC<React.ComponentProps<typeof Block>> = (
   props

src/components/index/HeaderBlock.tsx

@@ -1,17 +1,20 @@
 import * as React from "react";
-import { Trans } from "gatsby-plugin-react-i18next";
-import { Box, Container, Stack } from "@mui/system";
-import headerBgGlowingBallSrc from "../../images/header-bg-glowing-ball.svg";
-import CONFIG from "../../../config.json";
-import GitHubIcon from "../../assets/svg/github.svg";
-import ghSrc from "../../images/gh.png";
+
 import styled from "@emotion/styled";
-import UnstyledLogo from "../../assets/svg/logo.svg";
-import UnstyledFintech from "../../assets/svg/fintech.svg";
-import { Button } from "../Button";
-import { Block } from "../Block";
-import { LanguageSelector } from "../LanguageSelector";
+import { Box, Container, Stack } from "@mui/system";
+import { Trans } from "gatsby-plugin-react-i18next";
+
+import ghSrc from "~/assets/images/gh.png";
+import headerBgGlowingBallSrc from "~/assets/images/header-bg-glowing-ball.svg";
+import UnstyledFintech from "~/assets/svg/fintech.svg";
+import GitHubIcon from "~/assets/svg/github.svg";
+import UnstyledLogo from "~/assets/svg/logo.svg";
+
+import CONFIG from "../../../config.json";
 import { AppNav } from "../AppNav";
+import { Block } from "../Block";
+import { Button } from "../Button";
+import { LanguageSelector } from "../LanguageSelector";
 
 const Logo = styled(UnstyledLogo)`
   width: auto;
@@ -88,7 +91,11 @@ export const HeaderBlock: React.FC<React.ComponentProps<typeof Block>> = (
                   <HeaderButton color="primary">
                     <Trans>Contact us</Trans>
                   </HeaderButton>
-                  <a href={CONFIG.contacts.github} target="_blank">
+                  <a
+                    href={CONFIG.contacts.github}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     <HeaderButton endIcon={<GitHubIcon />}>
                       <Trans>Our GitHub</Trans>
                     </HeaderButton>

src/components/index/OurProductsBlock.tsx

@@ -1,14 +1,17 @@
 import * as React from "react";
-import { Block } from "../Block";
-import { Trans } from "gatsby-plugin-react-i18next";
+
 import { Stack, Box } from "@mui/system";
+import { Trans } from "gatsby-plugin-react-i18next";
+
+import ApplicationsImg from "~/assets/svg/application.svg";
+import BankIcon from "~/assets/svg/bank-icon.svg";
+import FraudbustersImg from "~/assets/svg/fraudbusters.svg";
+import GatewayIcon from "~/assets/svg/gateway-icon.svg";
+import ProcessingImg from "~/assets/svg/processing.svg";
+import ShopIcon from "~/assets/svg/shop-icon.svg";
+
+import { Block } from "../Block";
 import { Card } from "../Card";
-import ProcessingImg from "../../assets/svg/processing.svg";
-import FraudbustersImg from "../../assets/svg/fraudbusters.svg";
-import ShopIcon from "../../assets/svg/shop-icon.svg";
-import BankIcon from "../../assets/svg/bank-icon.svg";
-import GatewayIcon from "../../assets/svg/gateway-icon.svg";
-import ApplicationsImg from "../../assets/svg/application.svg";
 
 export const OurProductsBlock: React.FC<React.ComponentProps<typeof Block>> = ({
   ...props

src/components/index/ProcessingBlock.tsx

@@ -1,28 +1,31 @@
 import * as React from "react";
-import { Block } from "../Block";
-import { Trans } from "gatsby-plugin-react-i18next";
-import { Stack, Box } from "@mui/system";
-import { Card } from "../Card";
-import ControlImg from "../../assets/svg/control.svg";
-import CapabilityImg from "../../assets/svg/capability.svg";
-import VisaIcon from "../../assets/svg/visa-icon.svg";
-import MirIcon from "../../assets/svg/mir-icon.svg";
-import GoogleIcon from "../../assets/svg/google-icon.svg";
-import SbpIcon from "../../assets/svg/sbp-icon.svg";
-import MastercardIcon from "../../assets/svg/mastercard-icon.svg";
-import AppleIcon from "../../assets/svg/apple-icon.svg";
-import MobileIcon from "../../assets/svg/mobile-icon.svg";
-import EwalletIcon from "../../assets/svg/ewallet-icon.svg";
-import CryptoIcon from "../../assets/svg/crypto-icon.svg";
-import SamsungPayIcon from "../../assets/svg/samsung-pay-icon.svg";
-import UnionPayIcon from "../../assets/svg/union-pay-icon.svg";
-import { Chip } from "../Chip";
-import caruselSrc from "../../images/carusel.png";
-import processingBgSrc from "../../images/processing-bg.svg";
-import paymentSystemsBgSrc from "../../images/payment-systems-bg.svg";
-import paymentBgSrc from "../../images/payment-bg.svg";
+
 import { css } from "@emotion/css";
+import { Stack, Box } from "@mui/system";
+import { Trans } from "gatsby-plugin-react-i18next";
+
+import caruselSrc from "~/assets/images/carusel.png";
+import paymentBgSrc from "~/assets/images/payment-bg.svg";
+import paymentSystemsBgSrc from "~/assets/images/payment-systems-bg.svg";
+import processingBgSrc from "~/assets/images/processing-bg.svg";
+import AppleIcon from "~/assets/svg/apple-icon.svg";
+import CapabilityImg from "~/assets/svg/capability.svg";
+import ControlImg from "~/assets/svg/control.svg";
+import CryptoIcon from "~/assets/svg/crypto-icon.svg";
+import EwalletIcon from "~/assets/svg/ewallet-icon.svg";
+import GoogleIcon from "~/assets/svg/google-icon.svg";
+import MastercardIcon from "~/assets/svg/mastercard-icon.svg";
+import MirIcon from "~/assets/svg/mir-icon.svg";
+import MobileIcon from "~/assets/svg/mobile-icon.svg";
+import SamsungPayIcon from "~/assets/svg/samsung-pay-icon.svg";
+import SbpIcon from "~/assets/svg/sbp-icon.svg";
+import UnionPayIcon from "~/assets/svg/union-pay-icon.svg";
+import VisaIcon from "~/assets/svg/visa-icon.svg";
+
 import { BackgroundImageBox } from "../BackgroundImageBox";
+import { Block } from "../Block";
+import { Card } from "../Card";
+import { Chip } from "../Chip";
 
 const PAYMENT_METHODS_GROUPS = [
   [

src/pages/404.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import { Link, HeadFC, PageProps } from "gatsby";
 
 const pageStyles = {

src/pages/index.tsx

@@ -1,13 +1,15 @@
 import * as React from "react";
+
+import { Box } from "@mui/system";
 import type { HeadFC, PageProps } from "gatsby";
 import { graphql } from "gatsby";
-import { AntifraudBlock } from "../components/index/AntifraudBlock";
-import { HeaderBlock } from "../components/index/HeaderBlock";
-import { OurProductsBlock } from "../components/index/OurProductsBlock";
-import { ProcessingBlock } from "../components/index/ProcessingBlock";
-import { ContactsBlock } from "../components/index/ContactsBlock";
-import { PAGE_IDS } from "../components/AppNav";
-import { Box } from "@mui/system";
+
+import { PAGE_IDS } from "~/components/AppNav";
+import { AntifraudBlock } from "~/components/index/AntifraudBlock";
+import { ContactsBlock } from "~/components/index/ContactsBlock";
+import { HeaderBlock } from "~/components/index/HeaderBlock";
+import { OurProductsBlock } from "~/components/index/OurProductsBlock";
+import { ProcessingBlock } from "~/components/index/ProcessingBlock";
 
 const IndexPage: React.FC<PageProps> = () => {
   return (

src/theme/theme.ts

@@ -1,6 +1,7 @@
-import { createTypography } from "./create-typography";
-import createTheme from "@mui/material/styles/createTheme";
 import type { Color } from "@mui/material";
+import createTheme from "@mui/material/styles/createTheme";
+
+import { createTypography } from "./create-typography";
 
 const OFFSET = 24 * 2;
 const HTML_FONT_SIZE = 16;

tsconfig.json

@@ -28,7 +28,9 @@
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    "paths": {
+      "~/*": ["src/*"],
+    },                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */