diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 0195e9b43..cb91a71d3 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 d092f8280..163be335c 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 c4bcced4a..9c0f857e9 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 49916794f..5e4943a07 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 e92923a87..963c6db1e 100644
--- a/front/src/components/chips/PersonChip.tsx
+++ b/front/src/components/chips/PersonChip.tsx
@@ -34,7 +34,7 @@ function PersonChip({ name, picture }: OwnProps) {
{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 fc4413161..819641590 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 22466a2b0..a0b6ae77f 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 8cea157f5..7b541b411 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 2c2a0b922..1bea125eb 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 4d2bdc376..90485d1a2 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 a8e84829e..44d13a566 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 4f1ec8002..a2e3e9b46 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 dc804ba31..fa7f336ac 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 e9aa33644..9f970b56a 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 742b12337..dff792966 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 2f67383b0..d09800a57 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 1e0f63dc1..c8e242611 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 1f0d4fe98..48d5a3649 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 67e78c246..2f3f16c27 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 4eb213777..447e1ac20 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 98a6d427a..24d4c6803 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 = () => (