🚨 [#724] Fix ESLint warnings and errors

Non-bundled code was not linted before when using the 'standard' CRA
setup, and adding the explicit linting now to CI and npm scripts
reveals quite a number of issues.

.gitignore

@@ -14,6 +14,7 @@
 # testing
 /coverage
 /.nyc_output
+.eslintcache
 
 # production
 /storybook-static

eslint.config.mjs

@@ -13,7 +13,10 @@ const config = [
       },
     },
     languageOptions: {
-      globals: globals.browser,
+      globals: {
+        ...globals.builtin,
+        ...globals.browser,
+      },
     },
   },
   // Standard JS rules
@@ -23,7 +26,7 @@ const config = [
     settings: {
       'import/resolver': {
         node: {
-          extensions: ['.js', '.jsx', '.mjs'],
+          extensions: ['.js', '.jsx', '.mjs', '.json'],
           moduleDirectory: ['src', 'node_modules'],
         },
       },

src/api-mocks/forms.js

@@ -1,4 +1,4 @@
-import produce from 'immer';
+import {produce} from 'immer';
 import {HttpResponse, http} from 'msw';
 
 import {PRIVACY_POLICY_ACCEPTED} from 'components/SummaryConfirmation/mocks';

src/components/AbortButton/AbortButton.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
+import {useContext} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import {AnalyticsToolsConfigContext} from 'Context';

src/components/Anchor/Anchor.jsx

@@ -1,7 +1,6 @@
 import {Link as UtrechtLink} from '@utrecht/component-library-react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 export const ANCHOR_MODIFIERS = [
   // maps to NLDS

src/components/App.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Navigate, Outlet, useMatch} from 'react-router-dom';
 
 import {Cosign} from 'components/CoSign';

src/components/App.stories.jsx

@@ -2,8 +2,7 @@ import {expect, userEvent, waitForElementToBeRemoved, within} from '@storybook/t
 import {RouterProvider, createMemoryRouter} from 'react-router-dom';
 
 import {FormContext} from 'Context';
-import {BASE_URL, mockAnalyticsToolConfigGet} from 'api-mocks';
-import {buildForm} from 'api-mocks';
+import {BASE_URL, buildForm, mockAnalyticsToolConfigGet} from 'api-mocks';
 import {
   mockSubmissionCheckLogicPost,
   mockSubmissionGet,

src/components/AppDebug.jsx

@@ -1,5 +1,4 @@
-import {useIntl} from 'react-intl';
-import {FormattedDate, FormattedRelativeTime} from 'react-intl';
+import {FormattedDate, FormattedRelativeTime, useIntl} from 'react-intl';
 import {useGlobalState} from 'state-pool';
 
 import {sessionExpiresAt} from 'api';

src/components/AppDisplay.jsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 /**
  * Main application display component - this is the layout wrapper around content.

src/components/Body.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import {getBEMClassName} from 'utils';
 

src/components/Button/OFButton.jsx

@@ -1,6 +1,5 @@
 import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 // Temporary until the aria-disabled is set on the Utrecht button
 const OFButton = ({disabled, children, ...extraProps}) => {

src/components/Button/OFButton.stories.jsx

@@ -2,7 +2,6 @@ import {
   ButtonLink as UtrechtButtonLink,
   LinkButton as UtrechtLinkButton,
 } from '@utrecht/component-library-react';
-import React from 'react';
 
 import FAIcon from '../FAIcon';
 import OFButton from './OFButton';

src/components/ButtonsToolbar/index.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import AbortButton from 'components/AbortButton';
 import {OFButton} from 'components/Button';

src/components/ButtonsToolbar/test.spec.jsx

@@ -1,6 +1,5 @@
 import {render, screen} from '@testing-library/react';
 import messagesNL from 'i18n/compiled/nl.json';
-import React from 'react';
 import {IntlProvider} from 'react-intl';
 import {MemoryRouter} from 'react-router-dom';
 

src/components/Caption.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import {getBEMClassName} from 'utils';
 

src/components/Card.jsx

@@ -1,6 +1,5 @@
 import {Heading} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import Caption from 'components/Caption';
 import {getBEMClassName} from 'utils';

src/components/CoSign/Cosign.jsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import {useContext} from 'react';
 import {Route, Routes, useNavigate} from 'react-router-dom';
 import {useImmerReducer} from 'use-immer';
 

src/components/CoSign/CosignDone.jsx

@@ -1,6 +1,5 @@
 import {Paragraph} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import Anchor from 'components/Anchor';

src/components/CoSign/CosignStart.jsx

@@ -56,7 +56,7 @@ const CosignStart = () => {
       <Card title={form.name}>
         {userIsFormDesigner && form.maintenanceMode && <MaintenanceMode asToast />}
 
-        {!!authErrors ? <AuthenticationErrors parameters={authErrors} /> : null}
+        {authErrors ? <AuthenticationErrors parameters={authErrors} /> : null}
 
         <Body>
           <FormattedMessage

src/components/CoSign/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
+import {useContext} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useAsync} from 'react-use';
 
@@ -23,7 +23,7 @@ const getCosignStatus = async (baseUrl, submissionUuid) => {
   return await get(endpoint);
 };
 
-const CoSignAuthentication = ({form, submissionUuid, saveStepData, authPlugin}) => {
+const CoSignAuthentication = ({form, submissionUuid, authPlugin}) => {
   const loginOption = form.loginOptions.find(opt => opt.identifier === authPlugin);
   if (!loginOption) {
     return (
@@ -62,7 +62,6 @@ CoSignAuthentication.propTypes = {
   form: Types.Form.isRequired,
   submissionUuid: PropTypes.string.isRequired,
   authPlugin: PropTypes.string.isRequired,
-  saveStepData: PropTypes.func.isRequired,
 };
 
 const CoSignOld = ({
@@ -97,9 +96,6 @@ const CoSignOld = ({
   }
   const {coSigned, representation} = coSignState;
 
-  if (interactive && !coSigned) {
-  }
-
   if (!coSigned) {
     if (!interactive) {
       return (

src/components/CoSign/test.spec.jsx

@@ -1,6 +1,5 @@
 import {render, screen} from '@testing-library/react';
 import messagesNL from 'i18n/compiled/nl.json';
-import React from 'react';
 import {IntlProvider} from 'react-intl';
 
 import {testLoginForm} from 'components/FormStart/fixtures';

src/components/EditGrid/EditGrid.jsx

@@ -1,6 +1,5 @@
 import {ButtonGroup} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {OFButton} from 'components/Button';

src/components/EditGrid/EditGridButtonGroup.jsx

@@ -1,6 +1,5 @@
 import {ButtonGroup} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const EditGridButtonGroup = ({children}) => (
   <ButtonGroup className="utrecht-button-group--openforms-editgrid">{children}</ButtonGroup>

src/components/EditGrid/EditGridItem.jsx

@@ -1,6 +1,5 @@
 import {Fieldset, FieldsetLegend} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const EditGridItem = ({heading, children: body, buttons}) => {
   return (

src/components/EmailVerification/EmailVerificationForm.jsx

@@ -1,7 +1,7 @@
 import {Link as UtrechtLink} from '@utrecht/component-library-react';
 import {Formik} from 'formik';
 import PropTypes from 'prop-types';
-import React, {useContext, useState} from 'react';
+import {useContext, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {z} from 'zod';
 import {toFormikValidationSchema} from 'zod-formik-adapter';

src/components/EmailVerification/EmailVerificationModal.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import Body from 'components/Body';

src/components/Errors/ErrorMessage.jsx

@@ -1,6 +1,5 @@
 import {Alert} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import useScrollIntoView from 'hooks/useScrollIntoView';
 

src/components/Errors/Errors.stories.jsx

@@ -1,5 +1,4 @@
-import ErrorMessage from './ErrorMessage';
-import {ALERT_MODIFIERS} from './ErrorMessage';
+import ErrorMessage, {ALERT_MODIFIERS} from './ErrorMessage';
 
 export default {
   title: 'Private API / Error Message',

src/components/ExistingSubmissionOptions.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useNavigate} from 'react-router-dom';
 

src/components/FAIcon.jsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 // not all icons need to be seen by assistive technologies.
 const FAIcon = ({

src/components/Form.jsx

@@ -1,8 +1,7 @@
-import React, {useContext, useEffect} from 'react';
+import {useContext, useEffect} from 'react';
 import {useIntl} from 'react-intl';
 import {Navigate, Route, Routes, useLocation, useMatch, useNavigate} from 'react-router-dom';
-import {usePrevious} from 'react-use';
-import {useAsync} from 'react-use';
+import {useAsync, usePrevious} from 'react-use';
 import {useImmerReducer} from 'use-immer';
 
 import {AnalyticsToolsConfigContext, ConfigContext} from 'Context';
@@ -17,7 +16,12 @@ import ProgressIndicator from 'components/ProgressIndicator';
 import RequireSubmission from 'components/RequireSubmission';
 import {SessionTrackerModal} from 'components/Sessions';
 import SubmissionSummary from 'components/Summary';
-import {START_FORM_QUERY_PARAM} from 'components/constants';
+import {
+  PI_TITLE,
+  START_FORM_QUERY_PARAM,
+  STEP_LABELS,
+  SUBMISSION_ALLOWED,
+} from 'components/constants';
 import {findNextApplicableStep} from 'components/utils';
 import {createSubmission, flagActiveSubmission, flagNoActiveSubmission} from 'data/submissions';
 import useAutomaticRedirect from 'hooks/useAutomaticRedirect';
@@ -29,7 +33,6 @@ import useSessionTimeout from 'hooks/useSessionTimeout';
 
 import FormDisplay from './FormDisplay';
 import {addFixedSteps, getStepsInfo} from './ProgressIndicator/utils';
-import {PI_TITLE, STEP_LABELS, SUBMISSION_ALLOWED} from './constants';
 
 const initialState = {
   submission: null,

src/components/FormDisplay.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
+import {useContext} from 'react';
 
 import {ConfigContext} from 'Context';
 import AppDebug from 'components/AppDebug';

src/components/FormMaximumSubmissions.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import ErrorMessage from 'components/Errors/ErrorMessage';

src/components/FormStart/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useRef} from 'react';
+import {useRef} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useAsync} from 'react-use';
 
@@ -116,7 +116,7 @@ const FormStart = ({form, submission, onFormStart, onDestroySession, initialData
         {form.submissionLimitReached ? <FormMaximumSubmissions /> : null}
         {userIsFormDesigner && form.maintenanceMode && <MaintenanceMode asToast />}
 
-        {!!authErrors ? <AuthenticationErrors parameters={authErrors} /> : null}
+        {authErrors ? <AuthenticationErrors parameters={authErrors} /> : null}
 
         <FormStartMessage form={form} />
 

src/components/FormStart/tests.spec.jsx

@@ -1,6 +1,5 @@
 import {render, screen, waitFor} from '@testing-library/react';
 import messagesEN from 'i18n/compiled/en.json';
-import React from 'react';
 import {IntlProvider} from 'react-intl';
 import {MemoryRouter} from 'react-router-dom';
 

src/components/FormStep/FormStep.stories.jsx

@@ -1,5 +1,5 @@
 import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
-import produce from 'immer';
+import {produce} from 'immer';
 import {getWorker} from 'msw-storybook-addon';
 import {withRouter} from 'storybook-addon-remix-react-router';
 import {v4 as uuid4} from 'uuid';

src/components/FormStep/index.jsx

@@ -26,7 +26,7 @@ import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
-import React, {useContext, useRef} from 'react';
+import {useContext, useRef} from 'react';
 import {Form} from 'react-formio';
 import {useIntl} from 'react-intl';
 import {useNavigate, useParams} from 'react-router-dom';

src/components/FormStepDebug.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 /**
  * Debug component to visualize Form Step developer information.