Merge pull request #53 from twentyhq/cbo-add-lint-in-ci

Add linter on CI

.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

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'
+    '@typescript-eslint/no-explicit-any': 'off',
-  }
+  },
-};
+};

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",

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",

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>