diff --git a/.flowconfig b/.flowconfig index 63d3391..e224302 100644 --- a/.flowconfig +++ b/.flowconfig @@ -10,5 +10,6 @@ [lints] [options] - module.name_mapper='src\/\(.*\)$' -> '/src/\1' +exact_by_default=true +react.runtime=automatic \ No newline at end of file diff --git a/.gitignore b/.gitignore index e4fddf2..a4d9320 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ out/ coverage/ public/robots.txt public/sitemap.xml +.eslintcache # next-pwa public/workbox-*.js diff --git a/package.json b/package.json index 45ed653..01d240b 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "build": "next build", "dev": "next dev", "flow": "flow", - "lint": "prettier --check src/**/*.{js,json,css}", + "lint": "eslint src && prettier --check src/**/*.{js,json,css}", "postbuild": "next-sitemap", "start": "next start", "test": "jest --coverage", @@ -23,8 +23,18 @@ "prepare": "husky install" }, "devDependencies": { + "@babel/core": "^7.19.6", + "@babel/eslint-parser": "^7.19.1", "@babel/preset-flow": "^7.0.0", + "@babel/preset-react": "^7.18.6", "clipboard": "^2.0.4", + "eslint": "^8.26.0", + "eslint-config-next": "^13.0.0", + "eslint-config-prettier": "^8.5.0", + "eslint-import-resolver-alias": "^1.1.2", + "eslint-plugin-flowtype": "^8.0.3", + "eslint-plugin-jest": "^27.1.3", + "eslint-plugin-react": "^7.31.10", "flow-bin": "^0.190.0", "focus-trap-react": "^10.0.0", "husky": "^8.0.0", @@ -71,6 +81,7 @@ }, "lint-staged": { "*.{js,jsx}": [ + "eslint --cache --fix", "prettier --write src/**/*.{js,json,css}", "git add" ] @@ -91,5 +102,79 @@ "volta": { "node": "16.15.0" }, + "eslintConfig": { + "parser": "@babel/eslint-parser", + "env": { + "jest": true, + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:flowtype/recommended", + "plugin:react/recommended", + "prettier", + "plugin:@next/next/recommended" + ], + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module", + "requireConfigFile": false, + "babelOptions": { + "presets": [ + "next/babel", + "@babel/preset-react", + "@babel/preset-flow" + ] + } + }, + "plugins": [ + "react", + "flowtype" + ], + "rules": { + "flowtype/require-valid-file-annotation": [ + 2, + "always", + { + "annotationStyle": "line" + } + ], + "react/react-in-jsx-scope": "off", + "@next/next/no-img-element": "off", + "react/no-unknown-property": ["error", { "ignore": ["jsx", "global"] }] + }, + "overrides": [ + { + "files": [ + "*.spec.js", + "stubs.js", + "**/__mocks__/*.js" + ], + "rules": { + "flowtype/require-valid-file-annotation": 0 + } + } + ], + "settings": { + "react": { + "version": "detect", + "flowVersion": "detect" + }, + "import/resolver": { + "alias": { + "map": [ + [ + "src", + "./src" + ] + ] + } + } + } + }, "dependencies": {} } diff --git a/src/__tests__/__snapshots__/pages.spec.js.snap b/src/__tests__/__snapshots__/pages.spec.js.snap index e3d9c20..083380a 100644 --- a/src/__tests__/__snapshots__/pages.spec.js.snap +++ b/src/__tests__/__snapshots__/pages.spec.js.snap @@ -550,6 +550,7 @@ exports[`Pages Contributors should render the page 1`] = ` > ({ Object.defineProperty(window, 'matchMedia', { writable: true, - value: jest.fn().mockImplementation((query) => ({ + value: jest.fn().mockImplementation(() => ({ addListener: jest.fn(), })), }) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 704203e..21ece9d 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' import Icon from 'src/components/Icon' import styles from './styles.module.css' diff --git a/src/components/ContributorsList/Contributor/index.js b/src/components/ContributorsList/Contributor/index.js index 2bab782..9d3f6d8 100644 --- a/src/components/ContributorsList/Contributor/index.js +++ b/src/components/ContributorsList/Contributor/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' import styles from './styles.module.css' @@ -7,7 +7,7 @@ type Props = { avatar: string, url: string } const Contributor = (props: Props): Element<'article'> => (
- +
diff --git a/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.js.snap b/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.js.snap index 00f9699..3c42138 100644 --- a/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.js.snap +++ b/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.js.snap @@ -5,6 +5,7 @@ exports[`ContributorsList Contributor should render the component 1`] = ` className="col-xs-3 col-sm-2" > { +const ThemeSelector = (): Element<'div' | 'button'> => { const [isMounted, setIsMounted] = useState(false) const { resolvedTheme, setTheme } = useTheme() const nextTheme = resolvedTheme === 'light' ? 'dark' : 'light' diff --git a/src/components/GitmojiList/Toolbar/index.js b/src/components/GitmojiList/Toolbar/index.js index a7e5204..51382e9 100644 --- a/src/components/GitmojiList/Toolbar/index.js +++ b/src/components/GitmojiList/Toolbar/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element, useEffect, useRef } from 'react' +import { type Element, useEffect, useRef } from 'react' import ListModeSelector from './ListModeSelector' import ThemeSelector from './ThemeSelector' diff --git a/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.js b/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.js index 0d8ef49..a1fa52f 100644 --- a/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.js +++ b/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.js @@ -1,9 +1,9 @@ -import React from 'react' import renderer from 'react-test-renderer' import useLocalStorage from '../useLocalStorage' import * as stubs from './stubs' +// eslint-disable-next-line react/prop-types const TestComponent = ({ storageKey, storageValue }) => { useLocalStorage(storageKey, storageValue) diff --git a/src/components/Icon/definitions.js b/src/components/Icon/definitions.js index cacbc3e..ea2a41a 100644 --- a/src/components/Icon/definitions.js +++ b/src/components/Icon/definitions.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' export const IconDefinitions = (): Element<'svg'> => ( => ( => ( => ( diff --git a/src/components/Layout/Header/Logo/Status/Loved/index.js b/src/components/Layout/Header/Logo/Status/Loved/index.js index d2da2ca..f67e9ed 100644 --- a/src/components/Layout/Header/Logo/Status/Loved/index.js +++ b/src/components/Layout/Header/Logo/Status/Loved/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' export const Loved = (): Element<'g'> => ( diff --git a/src/components/Layout/Header/Logo/Status/Sexy/index.js b/src/components/Layout/Header/Logo/Status/Sexy/index.js index 668d15d..cc12a51 100644 --- a/src/components/Layout/Header/Logo/Status/Sexy/index.js +++ b/src/components/Layout/Header/Logo/Status/Sexy/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' export const Sexy = (): Element<'g'> => ( diff --git a/src/components/Layout/Header/Logo/Status/Smiling/index.js b/src/components/Layout/Header/Logo/Status/Smiling/index.js index 7a4eb09..3dbb9cb 100644 --- a/src/components/Layout/Header/Logo/Status/Smiling/index.js +++ b/src/components/Layout/Header/Logo/Status/Smiling/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' export const Smiling = (): Element<'g'> => ( diff --git a/src/components/Layout/Header/Logo/Status/Sunglasses/index.js b/src/components/Layout/Header/Logo/Status/Sunglasses/index.js index 8f136ba..09c5eea 100644 --- a/src/components/Layout/Header/Logo/Status/Sunglasses/index.js +++ b/src/components/Layout/Header/Logo/Status/Sunglasses/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' export const Sunglasses = (): Element<'g'> => ( diff --git a/src/components/Layout/Header/Logo/Status/Tongue/index.js b/src/components/Layout/Header/Logo/Status/Tongue/index.js index 2efd727..6ffc6b2 100644 --- a/src/components/Layout/Header/Logo/Status/Tongue/index.js +++ b/src/components/Layout/Header/Logo/Status/Tongue/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' export const Tongue = (): Element<'g'> => ( diff --git a/src/components/Layout/Header/Logo/Status/index.js b/src/components/Layout/Header/Logo/Status/index.js index 22829c3..5fd4ae7 100644 --- a/src/components/Layout/Header/Logo/Status/index.js +++ b/src/components/Layout/Header/Logo/Status/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Node } from 'react' +import { type Node } from 'react' import Joy from './Joy' import Loved from './Loved' diff --git a/src/components/Layout/Header/Logo/index.js b/src/components/Layout/Header/Logo/index.js index f28ec8e..fef6df9 100644 --- a/src/components/Layout/Header/Logo/index.js +++ b/src/components/Layout/Header/Logo/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Node, type Element } from 'react' +import React, { type Element } from 'react' import Status, { LOGO_STATUSES } from './Status' import styles from './styles.module.css' diff --git a/src/components/Layout/Header/index.js b/src/components/Layout/Header/index.js index 729687b..915f5de 100644 --- a/src/components/Layout/Header/index.js +++ b/src/components/Layout/Header/index.js @@ -1,5 +1,5 @@ // @flow -import React, { type Element } from 'react' +import { type Element } from 'react' import Button from 'src/components/Button' import Logo from './Logo' diff --git a/src/components/SEO/index.js b/src/components/SEO/index.js index 640e24b..93fc7b4 100644 --- a/src/components/SEO/index.js +++ b/src/components/SEO/index.js @@ -1,8 +1,8 @@ // @flow -import React, { type Node } from 'react' +import { type Node } from 'react' import Head from 'next/head' -type Props = { pageTitle?: string, pageUrl: string } +type Props = { pageTitle?: string, pageUrl?: string } const SEO = (props: Props): Node => ( diff --git a/src/pages/_app.js b/src/pages/_app.js index 8d844ef..8460d2b 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -3,7 +3,7 @@ import React, { type Node } from 'react' import { ThemeProvider } from 'next-themes' import Layout from 'src/components/Layout' -import theme from 'src/utils/theme/theme.css' +import 'src/utils/theme/theme.css' type Props = { Component: typeof React.Component, pageProps: Object } diff --git a/src/pages/_document.js b/src/pages/_document.js index bc38489..b2ecb41 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -1,5 +1,5 @@ // @flow -import React, { type Node } from 'react' +import { type Node } from 'react' import Document, { Html, Head, Main, NextScript } from 'next/document' class CustomDocument extends Document { diff --git a/src/pages/about.js b/src/pages/about.js index 06d4cef..c376f68 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -1,11 +1,12 @@ -import React from 'react' +// @flow +import { type Node } from 'react' import Link from 'next/link' import CarbonAd from 'src/components/CarbonAd' import Button from 'src/components/Button' import SEO from 'src/components/SEO' -const About = () => ( +const About = (): Node => ( <>
@@ -16,7 +17,7 @@ const About = () => (

Gitmoji is an emoji guide for GitHub commit messages. Aims to be a standarization cheatsheet - guide for using{' '} - emojis on GitHub's commit + emojis on GitHub's commit messages.

@@ -77,7 +78,7 @@ const About = () => (

In case you need some ideas to integrate gitmoji in your project, - here's a practical way to use it: + here's a practical way to use it: