Add import type whenever possible

src/utils/BooleanControl.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, PropsWithChildren } from 'react';
+import type { ChangeEvent, FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import { identity } from 'ramda';
 import { useDomId } from './helpers/hooks';

src/utils/Checkbox.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react';
-import { BooleanControl, BooleanControlProps } from './BooleanControl';
+import type { FC } from 'react';
+import type { BooleanControlProps } from './BooleanControl';
+import { BooleanControl } from './BooleanControl';
 
 export const Checkbox: FC<BooleanControlProps> = (props) => <BooleanControl type="checkbox" {...props} />;

src/utils/CopyToClipboardIcon.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
 import CopyToClipboard from 'react-copy-to-clipboard';

src/utils/DropdownBtn.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { useToggle } from './helpers/hooks';
 import './DropdownBtn.scss';

src/utils/DropdownBtnMenu.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { ButtonDropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEllipsisV as menuIcon } from '@fortawesome/free-solid-svg-icons';

src/utils/ExportBtn.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { Button, ButtonProps } from 'reactstrap';
+import type { FC } from 'react';
+import type { ButtonProps } from 'reactstrap';
+import { Button } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileCsv } from '@fortawesome/free-solid-svg-icons';
 import { prettify } from './helpers/numbers';

src/utils/InfoTooltip.tsx

@@ -1,8 +1,8 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
-import { Placement } from '@popperjs/core';
+import type { Placement } from '@popperjs/core';
 import { useElementRef } from './helpers/hooks';
 
 export type InfoTooltipProps = PropsWithChildren<{

src/utils/Message.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { Card, Row } from 'reactstrap';
 import classNames from 'classnames';
 import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';

src/utils/NavPills.tsx

@@ -1,4 +1,5 @@
-import { FC, Children, isValidElement, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import { Children, isValidElement } from 'react';
 import { Card, Nav, NavLink } from 'reactstrap';
 import { NavLink as RouterNavLink } from 'react-router-dom';
 import './NavPills.scss';

src/utils/OrderingDropdown.tsx

@@ -3,7 +3,8 @@ import { toPairs } from 'ramda';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
-import { determineOrderDir, Order, OrderDir } from './helpers/ordering';
+import type { Order, OrderDir } from './helpers/ordering';
+import { determineOrderDir } from './helpers/ordering';
 import './OrderingDropdown.scss';
 
 export interface OrderingDropdownProps<T extends string = string> {

src/utils/Result.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { Row } from 'reactstrap';
 import classNames from 'classnames';
 import { SimpleCard } from './SimpleCard';

src/utils/SimpleCard.tsx

@@ -1,5 +1,6 @@
-import { Card, CardBody, CardHeader, CardProps } from 'reactstrap';
-import { ReactNode } from 'react';
+import type { CardProps } from 'reactstrap';
+import { Card, CardBody, CardHeader } from 'reactstrap';
+import type { ReactNode } from 'react';
 
 interface SimpleCardProps extends Omit<CardProps, 'title'> {
   title?: ReactNode;

src/utils/ToggleSwitch.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react';
-import { BooleanControl, BooleanControlProps } from './BooleanControl';
+import type { FC } from 'react';
+import type { BooleanControlProps } from './BooleanControl';
+import { BooleanControl } from './BooleanControl';
 
 export const ToggleSwitch: FC<BooleanControlProps> = (props) => <BooleanControl type="switch" {...props} />;

src/utils/dates/DateInput.tsx

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 import { isNil } from 'ramda';
-import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
+import type { ReactDatePickerProps } from 'react-datepicker';
+import DatePicker from 'react-datepicker';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
 import classNames from 'classnames';

src/utils/dates/DateIntervalDropdownItems.tsx

@@ -1,6 +1,7 @@
 import { DropdownItem } from 'reactstrap';
-import { FC } from 'react';
-import { DATE_INTERVALS, DateInterval, rangeOrIntervalToString } from '../helpers/dateIntervals';
+import type { FC } from 'react';
+import type { DateInterval } from '../helpers/dateIntervals';
+import { DATE_INTERVALS, rangeOrIntervalToString } from '../helpers/dateIntervals';
 
 export interface DateIntervalDropdownProps {
   active?: DateInterval;

src/utils/dates/DateIntervalSelector.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { DropdownBtn } from '../DropdownBtn';
 import { rangeOrIntervalToString } from '../helpers/dateIntervals';
-import { DateIntervalDropdownItems, DateIntervalDropdownProps } from './DateIntervalDropdownItems';
+import type { DateIntervalDropdownProps } from './DateIntervalDropdownItems';
+import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
 
 export const DateIntervalSelector: FC<DateIntervalDropdownProps> = ({ onChange, active, allText }) => (
   <DropdownBtn text={rangeOrIntervalToString(active) ?? allText}>

src/utils/dates/DateRangeRow.tsx

@@ -1,6 +1,6 @@
 import { endOfDay } from 'date-fns';
 import { DateInput } from './DateInput';
-import { DateRange } from '../helpers/dateIntervals';
+import type { DateRange } from '../helpers/dateIntervals';
 
 interface DateRangeRowProps extends DateRange {
   onStartDateChange: (date: Date | null) => void;

src/utils/dates/DateRangeSelector.tsx

@@ -2,9 +2,10 @@ import { useState } from 'react';
 import { DropdownItem } from 'reactstrap';
 import { DropdownBtn } from '../DropdownBtn';
 import { useEffectExceptFirstTime } from '../helpers/hooks';
-import {
+import type {
   DateInterval,
-  DateRange,
+  DateRange } from '../helpers/dateIntervals';
+import {
   rangeOrIntervalToString,
   intervalToDateRange,
   rangeIsInterval,

src/utils/dates/DateTimeInput.tsx

@@ -1,5 +1,5 @@
-import { ReactDatePickerProps } from 'react-datepicker';
-import { FC } from 'react';
+import type { ReactDatePickerProps } from 'react-datepicker';
+import type { FC } from 'react';
 import { DateInput } from './DateInput';
 import { STANDARD_DATE_AND_TIME_FORMAT } from '../helpers/date';
 

src/utils/forms/FormText.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
 export const FormText: FC<PropsWithChildren<unknown>> = ({ children }) => (
   <small className="form-text text-muted d-block">{children}</small>

src/utils/forms/InputFormGroup.tsx

@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren } from 'react';
-import { InputType } from 'reactstrap/types/lib/Input';
+import type { FC, PropsWithChildren } from 'react';
+import type { InputType } from 'reactstrap/types/lib/Input';
 import { LabeledFormGroup } from './LabeledFormGroup';
 import { useDomId } from '../helpers/hooks';
 

src/utils/forms/LabeledFormGroup.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 
 type LabeledFormGroupProps = PropsWithChildren<{
   label: ReactNode;

src/utils/helpers/charts.ts

@@ -1,4 +1,4 @@
-import { ActiveElement, ChartEvent, ChartType, TooltipItem } from 'chart.js';
+import type { ActiveElement, ChartEvent, ChartType, TooltipItem } from 'chart.js';
 import { prettify } from './numbers';
 
 export const pointerOnHover = ({ native }: ChartEvent, [firstElement]: ActiveElement[]) => {

src/utils/helpers/date.ts

@@ -1,5 +1,5 @@
 import { format, formatISO, isBefore, isEqual, isWithinInterval, parse, parseISO as stdParseISO } from 'date-fns';
-import { OptionalString } from '../utils';
+import type { OptionalString } from '../utils';
 
 export const STANDARD_DATE_FORMAT = 'yyyy-MM-dd';
 

src/utils/helpers/dateIntervals.ts

@@ -1,6 +1,7 @@
 import { subDays, startOfDay, endOfDay } from 'date-fns';
 import { cond, filter, isEmpty, T } from 'ramda';
-import { dateOrNull, DateOrString, formatInternational, isBeforeOrEqual, now, parseISO } from './date';
+import type { DateOrString } from './date';
+import { dateOrNull, formatInternational, isBeforeOrEqual, now, parseISO } from './date';
 import { equals } from '../utils';
 
 export interface DateRange {

src/utils/helpers/features.ts

@@ -1,5 +1,7 @@
-import { isReachableServer, SelectedServer } from '../../servers/data';
-import { SemVerPattern, versionMatch } from './version';
+import type { SelectedServer } from '../../servers/data';
+import { isReachableServer } from '../../servers/data';
+import type { SemVerPattern } from './version';
+import { versionMatch } from './version';
 
 const serverMatchesMinVersion = (minVersion: SemVerPattern) => (selectedServer: SelectedServer): boolean =>
   isReachableServer(selectedServer) && versionMatch(selectedServer.version, { minVersion });

src/utils/helpers/hooks.ts

@@ -1,4 +1,5 @@
-import { DependencyList, EffectCallback, useEffect, useRef, useState } from 'react';
+import type { DependencyList, EffectCallback } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useSwipeable as useReactSwipeable } from 'react-swipeable';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';

src/utils/helpers/redux.ts

@@ -1,6 +1,7 @@
-import { createAsyncThunk as baseCreateAsyncThunk, AsyncThunkPayloadCreator } from '@reduxjs/toolkit';
+import type { AsyncThunkPayloadCreator } from '@reduxjs/toolkit';
+import { createAsyncThunk as baseCreateAsyncThunk } from '@reduxjs/toolkit';
 import { identity } from 'ramda';
-import { ShlinkState } from '../../container/types';
+import type { ShlinkState } from '../../container/types';
 
 export const createAsyncThunk = <Returned, ThunkArg>(
   typePrefix: string,

src/utils/helpers/version.ts

@@ -1,6 +1,7 @@
 import { compare } from 'compare-versions';
 import { identity, memoizeWith } from 'ramda';
-import { Empty, hasValue } from '../utils';
+import type { Empty } from '../utils';
+import { hasValue } from '../utils';
 
 type SemVerPatternFragment = `${bigint | '*'}`;
 

src/utils/helpers/visits.ts

@@ -1,7 +1,8 @@
 import bowser from 'bowser';
 import { zipObj } from 'ramda';
-import { Empty, hasValue } from '../utils';
-import { Stats, UserAgent } from '../../visits/types';
+import type { Empty } from '../utils';
+import { hasValue } from '../utils';
+import type { Stats, UserAgent } from '../../visits/types';
 
 const DEFAULT = 'Others';
 const BROWSERS_WHITELIST = [

src/utils/services/ColorGenerator.ts

@@ -1,6 +1,6 @@
 import { isNil } from 'ramda';
 import { rangeOf } from '../utils';
-import { LocalStorage } from './LocalStorage';
+import type { LocalStorage } from './LocalStorage';
 
 const HEX_COLOR_LENGTH = 6;
 const HEX_DIGITS = '0123456789ABCDEF';

src/utils/services/provideServices.ts

@@ -1,4 +1,4 @@
-import Bottle from 'bottlejs';
+import type Bottle from 'bottlejs';
 import { useTimeoutToggle } from '../helpers/hooks';
 import { LocalStorage } from './LocalStorage';
 import { ColorGenerator } from './ColorGenerator';

src/utils/table/TableOrderIcon.tsx

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
-import { Order } from '../helpers/ordering';
+import type { Order } from '../helpers/ordering';
 
 interface TableOrderIconProps<T> {
   currentOrder: Order<T>;

src/utils/utils.ts

@@ -1,5 +1,5 @@
 import { isEmpty, isNil, pipe, range } from 'ramda';
-import { SyntheticEvent } from 'react';
+import type { SyntheticEvent } from 'react';
 
 export const rangeOf = <T>(size: number, mappingFn: (value: number) => T, startAt = 1): T[] =>
   range(startAt, size + 1).map(mappingFn);