chore: suit eslint rules

packages/web/src/components/AddAppConnection/index.tsx

@@ -23,7 +23,7 @@ type Response = {
   [key: string]: any;
 }
 
-export default function AddAppConnection(props: AddAppConnectionProps){
+export default function AddAppConnection(props: AddAppConnectionProps): React.ReactElement {
   const { application, connectionId, onClose } = props;
   const { key, fields, authenticationSteps, reconnectionSteps } = application;
   const formatMessage = useFormatMessage();

packages/web/src/components/AddNewAppConnection/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 import { useQuery } from '@apollo/client';
 import { Link } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
@@ -27,12 +27,12 @@ type AddNewAppConnectionProps = {
   onClose: () => void;
 };
 
-export default function AddNewAppConnection(props: AddNewAppConnectionProps){
+export default function AddNewAppConnection(props: AddNewAppConnectionProps): React.ReactElement {
   const { onClose } = props;
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm'));
   const formatMessage = useFormatMessage();
-  const [appName, setAppName] = useState<string | null>(null);
+  const [appName, setAppName] = React.useState<string | null>(null);
   const { data } = useQuery(GET_APPS, { variables: {name: appName } });
 
   return (

packages/web/src/components/ApolloProvider/index.tsx

@@ -7,7 +7,7 @@ type ApolloProviderProps = {
   children: React.ReactNode;
 };
 
-const ApolloProvider = (props: ApolloProviderProps) => {
+const ApolloProvider = (props: ApolloProviderProps): React.ReactElement => {
   const { enqueueSnackbar } = useSnackbar();
 
   const onError = React.useCallback((message) => {

packages/web/src/components/AppBar/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import MuiAppBar from '@mui/material/AppBar';
@@ -18,7 +19,7 @@ type AppBarProps = {
   onDrawerClose: () => void;
 };
 
-export default function AppBar({ drawerOpen, onDrawerOpen, onDrawerClose }: AppBarProps) {
+export default function AppBar({ drawerOpen, onDrawerOpen, onDrawerClose }: AppBarProps): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
 

packages/web/src/components/AppConnectionContextMenu/index.tsx

@@ -19,7 +19,7 @@ type ContextMenuProps = {
   anchorEl: PopoverProps['anchorEl'];
 };
 
-export default function ContextMenu(props: ContextMenuProps) {
+export default function ContextMenu(props: ContextMenuProps): React.ReactElement {
   const { appKey, connectionId, onClose, onMenuItemClick, anchorEl } = props;
   const formatMessage = useFormatMessage();
 

packages/web/src/components/AppConnectionRow/index.tsx

@@ -31,7 +31,7 @@ const countTranslation = (value: React.ReactNode) => (
   </>
 );
 
-function AppConnectionRow(props: AppConnectionRowProps) {
+function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
   const { enqueueSnackbar } = useSnackbar();
   const [verificationVisible, setVerificationVisible] = React.useState(false);
   const [testConnection, { called: testCalled, loading: testLoading }] = useLazyQuery(TEST_CONNECTION, {
@@ -51,12 +51,12 @@ function AppConnectionRow(props: AppConnectionRowProps) {
     setAnchorEl(null);
   };
 
-  const onContextMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(contextButtonRef.current);
+  const onContextMenuClick = () => setAnchorEl(contextButtonRef.current);
   const onContextMenuAction = React.useCallback(async (event, action: { [key: string]: string }) => {
     if (action.type === 'delete') {
       await deleteConnection({
         variables: { id },
-        update: (cache, mutationResult) => {
+        update: (cache) => {
           const connectionCacheId = cache.identify({
             __typename: 'Connection',
             id,

packages/web/src/components/AppConnectionRow/style.ts

@@ -11,7 +11,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 }));
 
 
-export const Typography = styled(MuiTypography)(({ theme }) => ({
+export const Typography = styled(MuiTypography)(() => ({
   textAlign: 'center',
   display: 'inline-block',
 }));

packages/web/src/components/AppConnections/index.tsx

@@ -12,7 +12,7 @@ type AppConnectionsProps = {
   appKey: string;
 }
 
-export default function AppConnections(props: AppConnectionsProps) {
+export default function AppConnections(props: AppConnectionsProps): React.ReactElement {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
   const { data } = useQuery(GET_APP_CONNECTIONS, { variables: { key: appKey } });

packages/web/src/components/AppFlowRow/index.tsx

@@ -12,7 +12,7 @@ type AppFlowRowProps = {
   flow: any;
 }
 
-function AppFlowRow(props: AppFlowRowProps) {
+function AppFlowRow(props: AppFlowRowProps): React.ReactElement {
   const { flow } = props;
 
   return (

packages/web/src/components/AppFlowRow/style.ts

@@ -11,7 +11,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 }));
 
 
-export const Typography = styled(MuiTypography)(({ theme }) => ({
+export const Typography = styled(MuiTypography)(() => ({
   display: 'inline-block',
   width: 300,
   maxWidth: '50%',

packages/web/src/components/AppFlows/index.tsx

@@ -4,11 +4,7 @@ import { GET_FLOWS } from 'graphql/queries/get-flows';
 import AppFlowRow from 'components/AppFlowRow';
 import type { Flow } from 'types/flow';
 
-type AppFlowsProps = {
-  appKey: String;
-}
-
-export default function AppFlows(props: AppFlowsProps) {
+export default function AppFlows(): React.ReactElement {
   const { data } = useQuery(GET_FLOWS);
   const appFlows: Flow[] = data?.getFlows || [];
 

packages/web/src/components/AppIcon/index.tsx

@@ -12,7 +12,7 @@ const inlineImgStyle: React.CSSProperties = {
   objectFit: 'contain',
 };
 
-export default function AppIcon(props: AppIconProps & AvatarProps) {
+export default function AppIcon(props: AppIconProps & AvatarProps): React.ReactElement {
   const { name, url, color, sx = {}, ...restProps } = props;
 
   return (

packages/web/src/components/AppRow/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
@@ -23,7 +24,7 @@ const countTranslation = (value: React.ReactNode) => (
   </>
 );
 
-function AppRow(props: AppRowProps) {
+function AppRow(props: AppRowProps): React.ReactElement {
   const formatMessage = useFormatMessage();
   const { name, primaryColor, iconUrl, connectionCount } = props.application;
 

packages/web/src/components/AppRow/style.ts

@@ -11,7 +11,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 }));
 
 
-export const Typography = styled(MuiTypography)(({ theme }) => ({
+export const Typography = styled(MuiTypography)(() => ({
   '&.MuiTypography-h6': {
     textTransform: 'capitalize',
   },

packages/web/src/components/ConditionalIconButton/index.tsx

@@ -2,10 +2,12 @@ import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Button from '@mui/material/Button';
+import type { ButtonProps } from '@mui/material/Button';
 
 import { IconButton } from './style';
 
-export default function ConditionalIconButton(props: any) {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export default function ConditionalIconButton(props: any): React.ReactElement {
   const { icon, ...buttonProps } = props;
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
@@ -24,6 +26,6 @@ export default function ConditionalIconButton(props: any) {
   }
 
   return (
-    <Button {...buttonProps} />
+    <Button {...(buttonProps as ButtonProps)} />
   );
 }

packages/web/src/components/Container/index.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import MuiContainer, { ContainerProps } from '@mui/material/Container';
 
-export default function Container(props: ContainerProps) {
+export default function Container(props: ContainerProps): React.ReactElement {
   return (
     <MuiContainer {...props} />
   );

packages/web/src/components/Drawer/index.tsx

@@ -17,7 +17,7 @@ import { Drawer as BaseDrawer } from './style';
 
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
 
-export default function Drawer(props: SwipeableDrawerProps) {
+export default function Drawer(props: SwipeableDrawerProps): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
   const formatMessage = useFormatMessage();

packages/web/src/components/Editor/index.tsx

@@ -8,7 +8,7 @@ type EditorProps = {
   flow: Flow;
 }
 
-export default function Editor(props: EditorProps) {
+export default function Editor(props: EditorProps): React.ReactElement {
   const [currentStep, setCurrentStep] = React.useState<number | null>(null);
   const { flow } = props;
 

packages/web/src/components/EditorLayout/index.tsx

@@ -15,11 +15,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import type { Flow } from 'types/flow';
 
-type EditorLayoutProps = {
-  children?: React.ReactNode;
-}
-
-export default function EditorLayout(props: EditorLayoutProps) {
+export default function EditorLayout(): React.ReactElement {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
   const { data } = useQuery(GET_FLOW, { variables: { id: Number(flowId) }});

packages/web/src/components/FlowRow/index.tsx

@@ -13,7 +13,7 @@ type FlowRowProps = {
   flow: Flow;
 }
 
-export default function FlowRow(props: FlowRowProps) {
+export default function FlowRow(props: FlowRowProps): React.ReactElement {
   const { flow } = props;
 
   return (

packages/web/src/components/FlowRow/style.ts

@@ -11,7 +11,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 }));
 
 
-export const Typography = styled(MuiTypography)(({ theme }) => ({
+export const Typography = styled(MuiTypography)(() => ({
   '&.MuiTypography-h6': {
     textTransform: 'capitalize',
   },

packages/web/src/components/FlowStep/index.tsx

@@ -19,7 +19,7 @@ type FlowStepProps = {
   onClose?: () => void;
 }
 
-export default function FlowStep(props: FlowStepProps) {
+export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
   const { collapsed, index, step } = props;
   const formatMessage = useFormatMessage();
   const { data } = useQuery(GET_APP, { variables: { key: step?.appKey }})

packages/web/src/components/Form/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { FormProvider, useForm, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 
 type FormProps = {
@@ -6,7 +6,7 @@ type FormProps = {
   onSubmit: SubmitHandler<FieldValues>;
 }
 
-export default function Form(props: FormProps) {
+export default function Form(props: FormProps): React.ReactElement {
   const { children, onSubmit, ...formProps } = props;
   const methods: UseFormReturn = useForm();
 

packages/web/src/components/HideOnScroll/index.tsx

@@ -1,7 +1,8 @@
+import * as React from 'react';
 import Slide, { SlideProps } from '@mui/material/Slide';
 import useScrollTrigger from '@mui/material/useScrollTrigger';
 
-export default function HideOnScroll(props: SlideProps) {
+export default function HideOnScroll(props: SlideProps): React.ReactElement {
   const trigger = useScrollTrigger();
 
   return (

packages/web/src/components/InputCreator/index.tsx

@@ -1,5 +1,6 @@
-import type { AppFields } from 'types/app';
+import * as React from 'react';
 import { useFormContext } from 'react-hook-form';
+import type { AppFields } from 'types/app';
 
 import TextField from 'components/TextField';
 
@@ -8,7 +9,7 @@ type InputCreatorProps = {
   schema: AppFields;
 };
 
-export default function InputCreator(props: InputCreatorProps) {
+export default function InputCreator(props: InputCreatorProps): React.ReactElement {
   const {
     onChange,
     schema,

packages/web/src/components/IntlProvider/index.tsx

@@ -5,7 +5,7 @@ type IntlProviderProps = {
   children: React.ReactNode;
 };
 
-const IntlProvider = ({ children }: IntlProviderProps) => {
+const IntlProvider = ({ children }: IntlProviderProps): React.ReactElement => {
   return (
     <BaseIntlProvider locale={navigator.language} defaultLocale="en" messages={englishMessages}>
       {children}

packages/web/src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
@@ -11,10 +11,10 @@ type LayoutProps = {
   children: React.ReactNode;
 }
 
-export default function Layout({ children }: LayoutProps) {
+export default function Layout({ children }: LayoutProps): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true });
-  const [isDrawerOpen, setDrawerOpen] = useState(!matchSmallScreens);
+  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
 
   const openDrawer = () => setDrawerOpen(true);
   const closeDrawer = () => setDrawerOpen(false);

packages/web/src/components/ListItemLink/index.tsx

@@ -12,7 +12,7 @@ type ListItemLinkProps = {
   onClick?: (event: React.SyntheticEvent) => void;
 }
 
-export default function ListItemLink(props: ListItemLinkProps) {
+export default function ListItemLink(props: ListItemLinkProps): React.ReactElement {
   const { icon, primary, to, onClick } = props;
   const selected = useMatch({ path: to, end: false });
 

packages/web/src/components/NoResultFound/index.tsx

@@ -12,7 +12,7 @@ type NoResultFoundProps = {
   to: string;
 }
 
-export default function NoResultFound(props: NoResultFoundProps) {
+export default function NoResultFound(props: NoResultFoundProps): React.ReactElement {
   const { text, to } = props;
 
   const ActionAreaLink = React.useMemo(

packages/web/src/components/PageTitle/index.tsx

@@ -1,10 +1,11 @@
+import * as React from 'react';
 import Typography from '@mui/material/Typography';
 
 type PageTitleProps = {
   children: React.ReactNode;
 };
 
-export default function PageTitle(props: PageTitleProps) {
+export default function PageTitle(props: PageTitleProps): React.ReactElement {
   const { children } = props;
 
   return (

packages/web/src/components/SearchInput/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import InputAdornment from '@mui/material/InputAdornment';
@@ -10,7 +11,7 @@ type SearchInputProps = {
   onChange?: (event: React.ChangeEvent) => void;
 };
 
-export default function SearchInput({ onChange }: SearchInputProps) {
+export default function SearchInput({ onChange }: SearchInputProps): React.ReactElement {
   const formatMessage = useFormatMessage();
 
   return (

packages/web/src/components/SnackbarProvider/index.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { SnackbarProvider as BaseSnackbarProvider, SnackbarProviderProps } from 'notistack';
 
-const SnackbarProvider = (props: SnackbarProviderProps) => {
+const SnackbarProvider = (props: SnackbarProviderProps): React.ReactElement => {
   return (
     <BaseSnackbarProvider
       {...props}

packages/web/src/components/TabPanel/index.tsx

@@ -1,10 +1,12 @@
+import * as React from 'react';
+
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
   value: number;
 }
 
-export default function TabPanel(props: TabPanelProps) {
+export default function TabPanel(props: TabPanelProps): React.ReactElement {
   const { children, value, index, ...other } = props;
 
   return (

packages/web/src/components/TextField/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import * as React from 'react';
 import { Controller, Control, FieldValues } from 'react-hook-form';
 import MuiTextField, { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 import IconButton from '@mui/material/IconButton';
@@ -15,7 +15,7 @@ type TextFieldProps = {
   readOnly?: boolean;
 } & MuiTextFieldProps;
 
-const createCopyAdornment = (ref: React.RefObject<HTMLInputElement | null>) => {
+const createCopyAdornment = (ref: React.RefObject<HTMLInputElement | null>): React.ReactElement => {
   return (
   <InputAdornment position="end">
     <IconButton
@@ -28,8 +28,8 @@ const createCopyAdornment = (ref: React.RefObject<HTMLInputElement | null>) => {
 );
 }
 
-export default function TextField(props: TextFieldProps) {
-  const inputRef = useRef<HTMLInputElement | null>(null);
+export default function TextField(props: TextFieldProps): React.ReactElement {
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
   const {
     control,
     required,

packages/web/src/components/ThemeProvider/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ThemeProvider as BaseThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from 'styles/theme';
@@ -6,7 +7,7 @@ type ThemeProviderProps = {
   children: React.ReactNode;
 };
 
-const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
+const ThemeProvider = ({ children, ...props }: ThemeProviderProps): React.ReactElement => {
   return (
     <BaseThemeProvider theme={theme} {...props}>
       <CssBaseline />