Add linter on CI

front/src/components/chips/PersonChip.tsx

@@ -34,7 +34,7 @@ function PersonChip({ name, picture }: OwnProps) {
       <img
         data-testid="person-chip-image"
         src={picture ? picture.toString() : PersonPlaceholder.toString()}
-        alt="person-picture"
+        alt="person"
       />
       {name}
     </StyledContainer>

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 (
     <ThemeProvider theme={lightTheme}>

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 (
     <ThemeProvider theme={lightTheme}>

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(<RegularCompanyChip />);

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(<RegularPersonChip />);

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 (
     <ThemeProvider theme={lightTheme}>

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;
 };

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;
 };

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 (
     <ThemeProvider theme={lightTheme}>

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);

front/src/hooks/useOutsideAlerter.ts

@@ -17,5 +17,5 @@ export function useOutsideAlerter(
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [ref]);
+  }, [ref, callback]);
 }

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 = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter>

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 <StyledContainer>{children}</StyledContainer>;
 }
 

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 = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter>

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 (
     <ThemeProvider theme={lightTheme}>

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 = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter>

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 = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter>