MM-52624/MM-57094 Update ESLint and our ESLint plugin (#26398)

* Update ESLint and plugins

* Move most channels-specific ESLint configuration into ESLint plugin

* Add ESLint to types and client packages

* Add ESLint to components package

webapp/platform/components/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "root": true,
+  "extends": [
+    "plugin:@mattermost/base"
+  ]
+}

webapp/platform/components/package.json

@@ -7,6 +7,7 @@
   "styles": "dist/index.esm.css",
   "scripts": {
     "build": "rollup -c",
+    "check": "eslint --ext .js,.jsx,.tsx,.ts ./src --quiet",
     "run": "rollup -c --watch",
     "test": "cross-env TZ=Etc/UTC jest",
     "test:updatesnapshot": "cross-env TZ=Etc/UTC jest --updateSnapshot",

webapp/platform/components/src/common/hooks/useClickOutsideRef.ts

@@ -1,7 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {MutableRefObject, useEffect} from 'react';
+import type {MutableRefObject} from 'react';
+import {useEffect} from 'react';
 
 export function useClickOutsideRef(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent) => void): void {
     useEffect(() => {

webapp/platform/components/src/common/hooks/useMeasurePunchouts.ts

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useLayoutEffect, useMemo, useState} from 'react';
 import throttle from 'lodash/throttle';
+import {useLayoutEffect, useMemo, useState} from 'react';
 
 import {useElementAvailable} from './useElementAvailable';
 

webapp/platform/components/src/footer_pagination/footer_pagination.test.tsx

@@ -1,11 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
 import {render, screen} from '@testing-library/react';
+import React from 'react';
 
 import {FooterPagination} from './footer_pagination';
-import {wrapIntl} from '../testUtils'
+
+import {wrapIntl} from '../testUtils';
 
 describe('LegacyGenericModal/FooterPagination', () => {
     const baseProps = {
@@ -28,7 +29,7 @@ describe('LegacyGenericModal/FooterPagination', () => {
             page: 0,
             total: 17,
             itemsPerPage: 10,
-        }
+        };
 
         render(wrapIntl(<FooterPagination {...props}/>));
 

webapp/platform/components/src/generic_modal/generic_modal.test.tsx

@@ -1,10 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
 import {render, screen} from '@testing-library/react';
+import React from 'react';
 
 import {GenericModal} from './generic_modal';
+
 import {wrapIntl} from '../testUtils';
 
 describe('GenericModal', () => {
@@ -32,7 +33,7 @@ describe('GenericModal', () => {
         render(
             wrapIntl(<GenericModal {...props}/>),
         );
-        
+
         expect(screen.getByText('Confirm')).toBeInTheDocument();
         expect(screen.getByText('Cancel')).toBeInTheDocument();
     });

webapp/platform/components/src/generic_modal/generic_modal.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
@@ -73,7 +73,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
 
     onHide = () => {
         this.setState({show: false});
-    }
+    };
 
     handleCancel = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         event.preventDefault();
@@ -83,7 +83,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
         if (this.props.handleCancel) {
             this.props.handleCancel();
         }
-    }
+    };
 
     handleConfirm = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         event.preventDefault();
@@ -93,7 +93,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
         if (this.props.handleConfirm) {
             this.props.handleConfirm();
         }
-    }
+    };
 
     private onEnterKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === 'Enter') {
@@ -108,7 +108,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
             }
         }
         this.props.handleKeydown?.(event);
-    }
+    };
 
     render() {
         let confirmButton;

webapp/platform/components/src/pulsating_dot/index.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import {Coords} from '../common/hooks/useMeasurePunchouts';
+import type {Coords} from '../common/hooks/useMeasurePunchouts';
 
 import './pulsating_dot.scss';
 

webapp/platform/components/src/skeleton_loader/index.tsx

@@ -4,14 +4,14 @@
 import styled, {keyframes} from 'styled-components';
 
 const skeletonFade = keyframes`
-    0% { 
-        background-color: rgba(var(--center-channel-color-rgb), 0.08); 
+    0% {
+        background-color: rgba(var(--center-channel-color-rgb), 0.08);
     }
-    50% { 
-        background-color: rgba(var(--center-channel-color-rgb), 0.16); 
+    50% {
+        background-color: rgba(var(--center-channel-color-rgb), 0.16);
     }
-    100% { 
-        background-color: rgba(var(--center-channel-color-rgb), 0.08); 
+    100% {
+        background-color: rgba(var(--center-channel-color-rgb), 0.08);
     }
 `;
 

webapp/platform/components/src/testUtils.tsx

@@ -1,13 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode} from 'react'
-import {IntlProvider, createIntl} from 'react-intl'
+import type {ReactNode} from 'react';
+import React from 'react';
+import {IntlProvider, createIntl} from 'react-intl';
 
 export const defaultIntl = createIntl({
     locale: 'en',
     defaultLocale: 'en',
     messages: {},
-})
+});
 
-export const wrapIntl = (children?: ReactNode) => <IntlProvider {...defaultIntl}>{children}</IntlProvider>
+export const wrapIntl = (children?: ReactNode) => <IntlProvider {...defaultIntl}>{children}</IntlProvider>;

webapp/platform/components/src/tour_tip/tour_tip.tsx

@@ -1,21 +1,22 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useRef, useState} from 'react';
-import {FormattedMessage} from 'react-intl';
 import Tippy from '@tippyjs/react';
-import {Placement} from 'tippy.js';
 import classNames from 'classnames';
+import React, {useRef} from 'react';
+import {FormattedMessage} from 'react-intl';
+import type {Placement} from 'tippy.js';
+
+import {TourTipBackdrop} from './tour_tip_backdrop';
 
 import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
+import {PulsatingDot} from '../pulsating_dot';
 
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light-border.css';
 import 'tippy.js/animations/scale-subtle.css';
 import 'tippy.js/animations/perspective-subtle.css';
-import {PulsatingDot} from '../pulsating_dot';
 
-import {TourTipBackdrop} from './tour_tip_backdrop';
 import './tour_tip.scss';
 
 export type TourTipEventSource = 'next' | 'prev' | 'dismiss' | 'jump' | 'skipped' | 'open' | 'punchOut'