lint: enforce import type

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
     'no-unused-vars': 'off', // disable no-unused-vars since @typescript-eslint/no-unused-vars does the same
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], // enable @typescript-eslint/no-unused-vars
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
     'comma-dangle': [
       'error',
       {

package.json

@@ -24,7 +24,6 @@
     "bento-auth-js": "^5.1.1",
     "bento-charts": "^2.6.8",
     "dotenv": "^16.3.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
     "i18next": "^23.7.7",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.4.2",
@@ -55,6 +54,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.1",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "file-loader": "^6.2.0",
     "html-loader": "^5.0.0",
     "html-webpack-plugin": "^5.5.3",

src/js/components/Beacon/AssemblyIdSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Select } from 'antd';
-import { FormField, BeaconAssemblyIds } from '@/types/beacon';
+import type { FormField, BeaconAssemblyIds } from '@/types/beacon';
 import { DEFAULT_TRANSLATION } from '@/constants/configConstants';
 
 const AssemblyIdSelect = ({ field, beaconAssemblyIds, disabled }: AssemblyIdSelectProps) => {

src/js/components/Beacon/BeaconQueryUi.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState, ReactNode, useCallback, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useAppSelector, useAppDispatch, useTranslationDefault, useQueryWithAuthIfAllowed } from '@/hooks';
 import { Button, Card, Col, Form, Row, Space, Tooltip, Typography } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
@@ -8,7 +9,7 @@ import BeaconSearchResults from './BeaconSearchResults';
 import BeaconErrorMessage from './BeaconErrorMessage';
 import VariantsForm from './VariantsForm';
 import { makeBeaconQuery } from '@/features/beacon/beaconQuery.store';
-import { BeaconQueryPayload, FormFilter, FormValues, PayloadFilter, PayloadVariantsQuery } from '@/types/beacon';
+import type { BeaconQueryPayload, FormFilter, FormValues, PayloadFilter, PayloadVariantsQuery } from '@/types/beacon';
 import {
   WRAPPER_STYLE,
   FORM_ROW_GUTTERS,

src/js/components/Beacon/Filter.tsx

@@ -2,9 +2,15 @@ import React, { useEffect, useState } from 'react';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
 import { Button, Form, Select, Space } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
-import { FormInstance } from 'antd/es/form';
-import { FormFilter, FilterOption, FilterPullDownKey, FilterPullDownValue, GenericOptionType } from '@/types/beacon';
-import { Section, Field } from '@/types/search';
+import type { FormInstance } from 'antd/es/form';
+import type {
+  FormFilter,
+  FilterOption,
+  FilterPullDownKey,
+  FilterPullDownValue,
+  GenericOptionType,
+} from '@/types/beacon';
+import type { Section, Field } from '@/types/search';
 
 // TODOs:
 // any search key (eg "sex") selected in one filter should not available in other

src/js/components/Beacon/Filters.tsx

@@ -1,10 +1,11 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 import { useAppSelector } from '@/hooks';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Space, Tooltip } from 'antd';
-import { FormInstance } from 'antd/es/form';
-import { FormFilter } from '@/types/beacon';
-import { SearchFieldResponse } from '@/types/search';
+import type { FormInstance } from 'antd/es/form';
+import type { FormFilter } from '@/types/beacon';
+import type { SearchFieldResponse } from '@/types/search';
 import { DEFAULT_TRANSLATION } from '@/constants/configConstants';
 import Filter from './Filter';
 

src/js/components/Beacon/VariantInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input } from 'antd';
-import { FormField } from '@/types/beacon';
+import type { FormField } from '@/types/beacon';
 import { DEFAULT_TRANSLATION } from '@/constants/configConstants';
 
 const VariantInput = ({ field, disabled }: VariantInputProps) => {

src/js/components/Beacon/VariantsForm.tsx

@@ -1,9 +1,10 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
+import type { CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Col, Row } from 'antd';
 import VariantInput from './VariantInput';
 import AssemblyIdSelect from './AssemblyIdSelect';
-import { BeaconAssemblyIds } from '@/types/beacon';
+import type { BeaconAssemblyIds } from '@/types/beacon';
 import { DEFAULT_TRANSLATION } from '@/constants/configConstants';
 
 // form state has to be one of these:

src/js/components/Overview/Chart.tsx

@@ -5,14 +5,9 @@ import { BarChart, Histogram, PieChart } from 'bento-charts';
 import { ChoroplethMap } from 'bento-charts/dist/maps';
 
 import { CHART_HEIGHT, PIE_CHART_HEIGHT } from '@/constants/overviewConstants';
-import { ChartData } from '@/types/data';
-import {
-  CHART_TYPE_BAR,
-  CHART_TYPE_HISTOGRAM,
-  CHART_TYPE_CHOROPLETH,
-  CHART_TYPE_PIE,
-  ChartConfig,
-} from '@/types/chartConfig';
+import type { ChartData } from '@/types/data';
+import type { ChartConfig } from '@/types/chartConfig';
+import { CHART_TYPE_BAR, CHART_TYPE_HISTOGRAM, CHART_TYPE_CHOROPLETH, CHART_TYPE_PIE } from '@/types/chartConfig';
 import { useAppSelector } from '@/hooks';
 import { scopeToUrl } from '@/utils/router';
 

src/js/components/Overview/ChartCard.tsx

@@ -5,7 +5,7 @@ import Chart from './Chart';
 import CustomEmpty from '../Util/CustomEmpty';
 import { CHART_HEIGHT, BOX_SHADOW } from '@/constants/overviewConstants';
 import { useElementWidth, useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { ChartDataField } from '@/types/data';
+import type { ChartDataField } from '@/types/data';
 
 const CARD_STYLE: React.CSSProperties = { height: '415px', borderRadius: '11px', ...BOX_SHADOW };
 const ROW_EMPTY_STYLE: React.CSSProperties = { height: `${CHART_HEIGHT}px` };

src/js/components/Overview/Drawer/ChartTree.tsx

@@ -1,10 +1,12 @@
-import React, { ReactNode, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import React, { useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { InputNumber, Tree, TreeProps } from 'antd';
+import type { TreeProps } from 'antd';
+import { InputNumber, Tree } from 'antd';
 
 import { rearrange, setDisplayedCharts, setChartWidth } from '@/features/data/data.store';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { ChartDataField } from '@/types/data';
+import type { ChartDataField } from '@/types/data';
 
 interface MappedChartItem {
   title: ReactNode;

src/js/components/Overview/Drawer/ManageChartsDrawer.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { Button, Drawer, DrawerProps, Flex, Space, Typography } from 'antd';
+import type { DrawerProps } from 'antd';
+import { Button, Drawer, Flex, Space, Typography } from 'antd';
 const { Title } = Typography;
 
 import ChartTree from './ChartTree';
 
-import { ChartDataField } from '@/types/data';
+import type { ChartDataField } from '@/types/data';
 import { useAppSelector, useAppDispatch, useTranslationCustom, useTranslationDefault } from '@/hooks';
 import { hideAllSectionCharts, setAllDisplayedCharts, resetLayout } from '@/features/data/data.store';
 

src/js/components/Overview/LastIngestion.tsx

@@ -7,7 +7,7 @@ import { DEFAULT_TRANSLATION } from '@/constants/configConstants';
 import { useAppSelector } from '@/hooks';
 import { getDataTypeLabel } from '@/types/dataTypes';
 
-import { LastIngestionDataTypeResponse } from '@/types/lastIngestionDataTypeResponse';
+import type { LastIngestionDataTypeResponse } from '@/types/lastIngestionDataTypeResponse';
 import { BOX_SHADOW } from '@/constants/overviewConstants';
 
 const LastIngestionInfo: React.FC = () => {

src/js/components/Overview/OverviewDisplayData.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { disableChart } from '@/features/data/data.store';
-import { ChartDataField } from '@/types/data';
+import type { ChartDataField } from '@/types/data';
 import ChartCard from './ChartCard';
 import { CHART_WIDTH, GRID_GAP } from '@/constants/overviewConstants';
 

src/js/components/Overview/OverviewSection.tsx

@@ -3,7 +3,7 @@ import { Typography, Space } from 'antd';
 
 import OverviewDisplayData from './OverviewDisplayData';
 import { useTranslationCustom } from '@/hooks';
-import { ChartDataField } from '@/types/data';
+import type { ChartDataField } from '@/types/data';
 
 const OverviewSection = ({ title, chartData }: { title: string; chartData: ChartDataField[] }) => {
   const t = useTranslationCustom();

src/js/components/Provenance/DatasetProvenance.tsx

@@ -10,7 +10,7 @@ import PublicationsTable from './Tables/PublicationsTable';
 import CreatedByTable from './Tables/CreatedByTable';
 import DownloadDats from './DownloadDats';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { ProvenanceStoreDataset } from '@/types/provenance';
+import type { ProvenanceStoreDataset } from '@/types/provenance';
 import { BOX_SHADOW } from '@/constants/overviewConstants';
 
 const { Item } = Descriptions;

src/js/components/Provenance/DownloadDats.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Space } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';
 import { useTranslationDefault } from '@/hooks';
-import { ProvenanceStoreDataset } from '@/types/provenance';
+import type { ProvenanceStoreDataset } from '@/types/provenance';
 
 const DownloadDats = ({ metadata }: { metadata: ProvenanceStoreDataset }) => {
   const t = useTranslationDefault();

src/js/components/Provenance/Tables/AcknowledgesTable.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import BaseProvenanceTable from './BaseProvenanceTable';
 import LinkIfUrl from '../../Util/LinkIfUrl';
-import { Acknowledge } from '@/types/provenance';
+import type { Acknowledge } from '@/types/provenance';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
 
 const AcknowledgesTable = ({ acknowledges }: AcknowledgesTableProps) => {

src/js/components/Provenance/Tables/BaseProvenanceTable.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Table, TableProps } from 'antd';
-import { AnyObject } from 'antd/es/_util/type';
+import type { TableProps } from 'antd';
+import { Table } from 'antd';
+import type { AnyObject } from 'antd/es/_util/type';
 
 const BaseProvenanceTable = <T extends AnyObject>(props: TableProps<T>) => (
   <Table bordered={true} pagination={false} size="small" {...props} />

src/js/components/Provenance/Tables/CreatedByTable.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Tag } from 'antd';
 
 import BaseProvenanceTable from './BaseProvenanceTable';
-import { ProvenanceStoreDataset } from '@/types/provenance';
+import type { ProvenanceStoreDataset } from '@/types/provenance';
 import { useTranslationDefault, useTranslationCustom } from '@/hooks';
 
 const CreatedByTable = ({ creators }: CreatedByTableProps) => {

src/js/components/Provenance/Tables/DistributionsTable.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
 
 import { Tag, Typography } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import type { ColumnsType } from 'antd/es/table';
 const { Link } = Typography;
 
 import BaseProvenanceTable from './BaseProvenanceTable';
 import { useTranslationDefault, useTranslationCustom } from '@/hooks';
-import { Distribution, ProvenanceStoreDataset } from '@/types/provenance';
+import type { Distribution, ProvenanceStoreDataset } from '@/types/provenance';
 
 const DistributionsTable = ({ distributions }: DistributionsTableProps) => {
   const t = useTranslationCustom();

src/js/components/Provenance/Tables/ExtraPropertiesTable.tsx

@@ -1,11 +1,11 @@
 import React, { Fragment, useMemo } from 'react';
 
-import { ColumnsType } from 'antd/es/table';
+import type { ColumnsType } from 'antd/es/table';
 
 import BaseProvenanceTable from '@/components/Provenance/Tables/BaseProvenanceTable';
 import LinkIfUrl from '../../Util/LinkIfUrl';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { ExtraProperty, ProvenanceStoreDataset } from '@/types/provenance';
+import type { ExtraProperty, ProvenanceStoreDataset } from '@/types/provenance';
 
 const ExtraPropertiesTable = ({ extraProperties }: ExtraPropertiesTableProps) => {
   const t = useTranslationCustom();

src/js/components/Provenance/Tables/IsAboutTable.tsx

@@ -4,7 +4,7 @@ import { Tag } from 'antd';
 import BaseProvenanceTable from './BaseProvenanceTable';
 import LinkIfUrl from '../../Util/LinkIfUrl';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { ProvenanceStoreDataset } from '@/types/provenance';
+import type { ProvenanceStoreDataset } from '@/types/provenance';
 
 const IsAboutTable = ({ isAbout }: IsAboutTableProps) => {
   const t = useTranslationCustom();

src/js/components/Provenance/Tables/PublicationsTable.tsx

@@ -1,12 +1,13 @@
-import React, { ReactNode, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import React, { useMemo } from 'react';
 
 import { Typography } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import type { ColumnsType } from 'antd/es/table';
 
 import BaseProvenanceTable from './BaseProvenanceTable';
 import LinkIfUrl from '../../Util/LinkIfUrl';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { Person, PrimaryPublication, ProvenanceStoreDataset } from '@/types/provenance';
+import type { Person, PrimaryPublication, ProvenanceStoreDataset } from '@/types/provenance';
 
 import { stringIsDOI, stringIsURL } from '@/utils/strings';
 

src/js/components/Provenance/Tables/SpatialCoverageTable.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import BaseProvenanceTable from './BaseProvenanceTable';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { ProvenanceStoreDataset } from '@/types/provenance';
+import type { ProvenanceStoreDataset } from '@/types/provenance';
 
 const SpatialCoverageTable = ({ spatialCoverage }: SpatialCoverageTableProps) => {
   const t = useTranslationCustom();

src/js/components/Search/MakeQueryOption.tsx

@@ -6,7 +6,7 @@ import { addQueryParam, makeGetKatsuPublic, removeQueryParam } from '@/features/
 import SelectOption from './SelectOption';
 
 import { useAppDispatch, useAppSelector, useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { Field } from '@/types/search';
+import type { Field } from '@/types/search';
 
 const MakeQueryOption = ({ queryField }: MakeQueryOptionProps) => {
   const t = useTranslationCustom();

src/js/components/Search/SearchFieldsStack.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import MakeQueryOption from './MakeQueryOption';
 import { Space } from 'antd';
-import { Field } from '@/types/search';
+import type { Field } from '@/types/search';
 
 const SearchFieldsStack = ({ queryFields }: SearchFieldStackProps) => {
   return (

src/js/components/Search/SearchResultsPane.tsx

@@ -7,7 +7,7 @@ import CustomEmpty from '../Util/CustomEmpty';
 import ExpSvg from '../Util/ExpSvg';
 import { BOX_SHADOW, COUNTS_FILL, PIE_CHART_HEIGHT } from '@/constants/overviewConstants';
 import { useTranslationDefault, useTranslationCustom } from '@/hooks';
-import { ChartData } from '@/types/data';
+import type { ChartData } from '@/types/data';
 
 const SearchResultsPane = ({
   isFetchingData,

src/js/components/Util/ConditionalWrapper.tsx

@@ -1,5 +1,6 @@
 import { Space } from 'antd';
-import React, { ComponentType, memo, PropsWithChildren } from 'react';
+import type { ComponentType, PropsWithChildren } from 'react';
+import React, { memo } from 'react';
 
 export const VerticalSpaceWrapper = memo(function VerticalSpaceWrapper({ children }: PropsWithChildren) {
   return (

src/js/constants/beaconConstants.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { BOX_SHADOW } from '@/constants/overviewConstants';
 
 export const WRAPPER_STYLE: CSSProperties = {

src/js/constants/overviewConstants.ts

@@ -1,4 +1,4 @@
-import { HexColor } from 'bento-charts';
+import type { HexColor } from 'bento-charts';
 
 export const COUNTS_FILL = '#75787a';
 

src/js/features/beacon/beaconConfig.store.ts

@@ -1,7 +1,7 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
-import { BeaconConfigResponse, BeaconAssemblyIds } from '@/types/beacon';
-import { RootState } from '@/store';
+import type { BeaconConfigResponse, BeaconAssemblyIds } from '@/types/beacon';
+import type { RootState } from '@/store';
 import { printAPIError } from '@/utils/error.util';
 import { BEACON_URL } from '@/config';
 

src/js/features/beacon/beaconQuery.store.ts

@@ -1,11 +1,11 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
 import { makeAuthorizationHeader } from 'bento-auth-js';
-import { RootState } from '@/store';
+import type { RootState } from '@/store';
 import { serializeChartData } from '@/utils/chart';
 import { beaconApiError } from '@/utils/beaconApiError';
-import { BeaconQueryPayload, BeaconQueryResponse } from '@/types/beacon';
-import { ChartData } from '@/types/data';
+import type { BeaconQueryPayload, BeaconQueryResponse } from '@/types/beacon';
+import type { ChartData } from '@/types/data';
 import { BEACON_URL } from '@/config';
 
 const beaconIndividualsEndpoint = BEACON_URL + '/individuals';

src/js/features/config/config.store.ts

@@ -1,11 +1,12 @@
-import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
 import { katsuPublicRulesUrl } from '@/constants/configConstants';
 import { printAPIError } from '@/utils/error.util';
-import { ServiceInfoStore, ServicesResponse } from '@/types/services';
-import { RootState } from '@/store';
+import type { ServiceInfoStore, ServicesResponse } from '@/types/services';
+import type { RootState } from '@/store';
 import { PUBLIC_URL } from '@/config';
-import { DiscoveryRules } from '@/types/configResponse';
+import type { DiscoveryRules } from '@/types/configResponse';
 
 export const makeGetConfigRequest = createAsyncThunk<DiscoveryRules, void, { rejectValue: string; state: RootState }>(
   'config/getConfigData',

src/js/features/content/content.store.ts

@@ -1,4 +1,5 @@
-import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import axios from 'axios';
 import { partialAboutUrl } from '@/constants/contentConstants';
 import { printAPIError } from '@/utils/error.util';