From b8d089395f9040067e802cd0354fbec4761f122e Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Thu, 20 Apr 2023 11:44:47 +0200 Subject: [PATCH] Add linter on CI --- .github/workflows/ci.yaml | 2 ++ front/.eslintrc.js | 17 +++++++++++------ front/package-lock.json | 1 + front/package.json | 2 ++ front/src/components/chips/PersonChip.tsx | 2 +- ...{CompanyChip.tsx => CompanyChip.stories.tsx} | 4 +++- .../{PersonChip.tsx => PersonChip.stories.tsx} | 4 +++- .../chips/__tests__/CompanyChip.test.tsx | 2 +- .../chips/__tests__/PersonChip.test.tsx | 2 +- .../form/__stories__/Checkbox.stories.tsx | 4 +++- .../__stories__/SortAndFilterBar.stories.tsx | 4 +++- .../__stories__/SortOrFilterChip.stories.tsx | 4 +++- .../__stories__/TableHeader.stories.tsx | 4 +++- .../hooks/__tests__/useOutsideAlerter.test.tsx | 2 +- front/src/hooks/useOutsideAlerter.ts | 2 +- .../layout/__stories__/AppLayout.stories.tsx | 4 +++- .../containers/HorizontalyAlignedContainer.tsx | 2 +- .../navbar/__stories__/NavItem.stories.tsx | 4 +++- .../navbar/__stories__/Navbar.stories.tsx | 4 +++- .../companies/__stories__/Companies.stories.tsx | 5 +++-- .../pages/people/__stories__/People.stories.tsx | 4 +++- 21 files changed, 55 insertions(+), 24 deletions(-) rename front/src/components/chips/__stories__/{CompanyChip.tsx => CompanyChip.stories.tsx} (92%) rename front/src/components/chips/__stories__/{PersonChip.tsx => PersonChip.stories.tsx} (92%) diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 0195e9b436..cb91a71d3a 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -25,5 +25,7 @@ jobs: env: FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} run: cd front && npm install + - name: Run linter + run: cd front && npm run lint - name: Run tests and code coverage run: cd front && npm run coverage-ci \ No newline at end of file diff --git a/front/.eslintrc.js b/front/.eslintrc.js index d092f82807..163be335c4 100644 --- a/front/.eslintrc.js +++ b/front/.eslintrc.js @@ -3,20 +3,25 @@ module.exports = { parserOptions: { project: 'tsconfig.json', tsconfigRootDir: __dirname, - sourceType: 'module' + sourceType: 'module', }, plugins: ['@typescript-eslint/eslint-plugin'], - extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'], + extends: [ + 'plugin:@typescript-eslint/recommended', + 'plugin:prettier/recommended', + 'plugin:storybook/recommended', + 'react-app', + ], root: true, env: { node: true, - jest: true + jest: true, }, ignorePatterns: ['.eslintrc.js'], rules: { '@typescript-eslint/interface-name-prefix': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/no-explicit-any': 'off' - } -}; \ No newline at end of file + '@typescript-eslint/no-explicit-any': 'off', + }, +}; diff --git a/front/package-lock.json b/front/package-lock.json index c4bcced4a6..9c0f857e98 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -45,6 +45,7 @@ "babel-plugin-named-exports-order": "^0.0.2", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", + "eslint-config-react-app": "^7.0.1", "eslint-config-standard-with-typescript": "^23.0.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-n": "^15.5.1", diff --git a/front/package.json b/front/package.json index 49916794fb..5e4943a070 100644 --- a/front/package.json +++ b/front/package.json @@ -27,6 +27,7 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", + "lint": "eslint src --max-warnings=0", "storybook": "storybook dev -p 6006 -s public", "build-storybook": "storybook build -s public", "coverage": "react-scripts test --coverage --watchAll", @@ -94,6 +95,7 @@ "babel-plugin-named-exports-order": "^0.0.2", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", + "eslint-config-react-app": "^7.0.1", "eslint-config-standard-with-typescript": "^23.0.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-n": "^15.5.1", diff --git a/front/src/components/chips/PersonChip.tsx b/front/src/components/chips/PersonChip.tsx index e92923a874..963c6db1ef 100644 --- a/front/src/components/chips/PersonChip.tsx +++ b/front/src/components/chips/PersonChip.tsx @@ -34,7 +34,7 @@ function PersonChip({ name, picture }: OwnProps) { person-picture {name} diff --git a/front/src/components/chips/__stories__/CompanyChip.tsx b/front/src/components/chips/__stories__/CompanyChip.stories.tsx similarity index 92% rename from front/src/components/chips/__stories__/CompanyChip.tsx rename to front/src/components/chips/__stories__/CompanyChip.stories.tsx index fc4413161d..819641590c 100644 --- a/front/src/components/chips/__stories__/CompanyChip.tsx +++ b/front/src/components/chips/__stories__/CompanyChip.stories.tsx @@ -2,11 +2,13 @@ import CompanyChip from '../CompanyChip'; import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../layout/styles/themes'; -export default { +const component = { title: 'CompanyChip', component: CompanyChip, }; +export default component; + export const RegularCompanyChip = () => { return ( diff --git a/front/src/components/chips/__stories__/PersonChip.tsx b/front/src/components/chips/__stories__/PersonChip.stories.tsx similarity index 92% rename from front/src/components/chips/__stories__/PersonChip.tsx rename to front/src/components/chips/__stories__/PersonChip.stories.tsx index 22466a2b02..a0b6ae77f4 100644 --- a/front/src/components/chips/__stories__/PersonChip.tsx +++ b/front/src/components/chips/__stories__/PersonChip.stories.tsx @@ -2,11 +2,13 @@ import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../layout/styles/themes'; import PersonChip from '../PersonChip'; -export default { +const component = { title: 'PersonChip', component: PersonChip, }; +export default component; + export const RegularPersonChip = () => { return ( diff --git a/front/src/components/chips/__tests__/CompanyChip.test.tsx b/front/src/components/chips/__tests__/CompanyChip.test.tsx index 8cea157f5d..7b541b411c 100644 --- a/front/src/components/chips/__tests__/CompanyChip.test.tsx +++ b/front/src/components/chips/__tests__/CompanyChip.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { RegularCompanyChip, RegularCompanyChipWithImage, -} from '../__stories__/CompanyChip'; +} from '../__stories__/CompanyChip.stories'; it('Checks the CompanyChip renders', () => { const { getByText } = render(); diff --git a/front/src/components/chips/__tests__/PersonChip.test.tsx b/front/src/components/chips/__tests__/PersonChip.test.tsx index 2c2a0b922a..1bea125eba 100644 --- a/front/src/components/chips/__tests__/PersonChip.test.tsx +++ b/front/src/components/chips/__tests__/PersonChip.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { RegularPersonChip, RegularPersonChipWithImage, -} from '../__stories__/PersonChip'; +} from '../__stories__/PersonChip.stories'; it('Checks the PersonChip renders', () => { const { getByText, getByTestId } = render(); diff --git a/front/src/components/form/__stories__/Checkbox.stories.tsx b/front/src/components/form/__stories__/Checkbox.stories.tsx index 4d2bdc3767..90485d1a2d 100644 --- a/front/src/components/form/__stories__/Checkbox.stories.tsx +++ b/front/src/components/form/__stories__/Checkbox.stories.tsx @@ -2,11 +2,13 @@ import Checkbox from '../Checkbox'; import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../layout/styles/themes'; -export default { +const component = { title: 'Checkbox', component: Checkbox, }; +export default component; + export const RegularCheckbox = () => { return ( diff --git a/front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx b/front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx index a8e84829e7..44d13a5665 100644 --- a/front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx +++ b/front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx @@ -3,11 +3,13 @@ import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../../layout/styles/themes'; import { faArrowDown } from '@fortawesome/pro-regular-svg-icons'; -export default { +const component = { title: 'SortAndFilterBar', component: SortAndFilterBar, }; +export default component; + type OwnProps = { removeFunction: () => void; }; diff --git a/front/src/components/table/table-header/__stories__/SortOrFilterChip.stories.tsx b/front/src/components/table/table-header/__stories__/SortOrFilterChip.stories.tsx index 4f1ec8002c..a2e3e9b46e 100644 --- a/front/src/components/table/table-header/__stories__/SortOrFilterChip.stories.tsx +++ b/front/src/components/table/table-header/__stories__/SortOrFilterChip.stories.tsx @@ -3,11 +3,13 @@ import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../../layout/styles/themes'; import { faArrowDown } from '@fortawesome/pro-regular-svg-icons'; -export default { +const component = { title: 'SortOrFilterChip', component: SortOrFilterChip, }; +export default component; + type OwnProps = { removeFunction: () => void; }; diff --git a/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx b/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx index dc804ba317..fa7f336ac0 100644 --- a/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx +++ b/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx @@ -3,11 +3,13 @@ import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../../layout/styles/themes'; import { faBuilding } from '@fortawesome/pro-regular-svg-icons'; -export default { +const component = { title: 'TableHeader', component: TableHeader, }; +export default component; + export const RegularTableHeader = () => { return ( diff --git a/front/src/hooks/__tests__/useOutsideAlerter.test.tsx b/front/src/hooks/__tests__/useOutsideAlerter.test.tsx index e9aa336440..9f970b56aa 100644 --- a/front/src/hooks/__tests__/useOutsideAlerter.test.tsx +++ b/front/src/hooks/__tests__/useOutsideAlerter.test.tsx @@ -1,9 +1,9 @@ -const onOutsideClick = jest.fn(); import { useRef } from 'react'; import TableHeader from '../../components/table/table-header/TableHeader'; import { render, fireEvent } from '@testing-library/react'; import { useOutsideAlerter } from '../useOutsideAlerter'; import { act } from 'react-dom/test-utils'; +const onOutsideClick = jest.fn(); function TestComponent() { const buttonRef = useRef(null); diff --git a/front/src/hooks/useOutsideAlerter.ts b/front/src/hooks/useOutsideAlerter.ts index 742b123378..dff7929667 100644 --- a/front/src/hooks/useOutsideAlerter.ts +++ b/front/src/hooks/useOutsideAlerter.ts @@ -17,5 +17,5 @@ export function useOutsideAlerter( return () => { document.removeEventListener('mousedown', handleClickOutside); }; - }, [ref]); + }, [ref, callback]); } diff --git a/front/src/layout/__stories__/AppLayout.stories.tsx b/front/src/layout/__stories__/AppLayout.stories.tsx index 2f67383b0b..d09800a57b 100644 --- a/front/src/layout/__stories__/AppLayout.stories.tsx +++ b/front/src/layout/__stories__/AppLayout.stories.tsx @@ -3,11 +3,13 @@ import AppLayout from '../AppLayout'; import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../styles/themes'; -export default { +const component = { title: 'AppLayout', component: AppLayout, }; +export default component; + export const AppLayoutDefault = () => ( diff --git a/front/src/layout/containers/HorizontalyAlignedContainer.tsx b/front/src/layout/containers/HorizontalyAlignedContainer.tsx index 1e0f63dc16..c8e242611b 100644 --- a/front/src/layout/containers/HorizontalyAlignedContainer.tsx +++ b/front/src/layout/containers/HorizontalyAlignedContainer.tsx @@ -9,7 +9,7 @@ const StyledContainer = styled.div` align-items: center; `; -function HorizontalyAlignedContainer({ children: children }: OwnProps) { +function HorizontalyAlignedContainer({ children }: OwnProps) { return {children}; } diff --git a/front/src/layout/navbar/__stories__/NavItem.stories.tsx b/front/src/layout/navbar/__stories__/NavItem.stories.tsx index 1f0d4fe98b..48d5a36493 100644 --- a/front/src/layout/navbar/__stories__/NavItem.stories.tsx +++ b/front/src/layout/navbar/__stories__/NavItem.stories.tsx @@ -5,11 +5,13 @@ import { ThemeProvider } from '@emotion/react'; import NavItem from '../../../layout/navbar/NavItem'; import { lightTheme } from '../../styles/themes'; -export default { +const component = { title: 'NavItem', component: NavItem, }; +export default component; + export const NavItemDefault = () => ( diff --git a/front/src/layout/navbar/__stories__/Navbar.stories.tsx b/front/src/layout/navbar/__stories__/Navbar.stories.tsx index 67e78c2469..2f3f16c277 100644 --- a/front/src/layout/navbar/__stories__/Navbar.stories.tsx +++ b/front/src/layout/navbar/__stories__/Navbar.stories.tsx @@ -4,11 +4,13 @@ import Navbar from '../Navbar'; import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../styles/themes'; -export default { +const component = { title: 'Navbar', component: Navbar, }; +export default component; + export const NavbarOnCompanies = () => { return ( diff --git a/front/src/pages/companies/__stories__/Companies.stories.tsx b/front/src/pages/companies/__stories__/Companies.stories.tsx index 4eb2137771..447e1ac208 100644 --- a/front/src/pages/companies/__stories__/Companies.stories.tsx +++ b/front/src/pages/companies/__stories__/Companies.stories.tsx @@ -2,13 +2,14 @@ import { MemoryRouter } from 'react-router-dom'; import Companies from '../Companies'; import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../layout/styles/themes'; -import AppLayout from '../../../layout/AppLayout'; -export default { +const component = { title: 'Companies', component: Companies, }; +export default component; + export const CompaniesDefault = () => ( diff --git a/front/src/pages/people/__stories__/People.stories.tsx b/front/src/pages/people/__stories__/People.stories.tsx index 98a6d427ad..24d4c6803d 100644 --- a/front/src/pages/people/__stories__/People.stories.tsx +++ b/front/src/pages/people/__stories__/People.stories.tsx @@ -3,11 +3,13 @@ import People from '../People'; import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../layout/styles/themes'; -export default { +const component = { title: 'People', component: People, }; +export default component; + export const PeopleDefault = () => (