style: import type

assets/components/Sider.tsx

@@ -1,4 +1,4 @@
-import {ItemType} from 'antd/lib/menu/interface'
+import type {ItemType} from 'antd/lib/menu/interface'
 import {t} from 'ttag'
 import {
     AimOutlined,
@@ -22,6 +22,7 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
     const navigate = useNavigate()
     const location = useLocation()
 
+
     const menuItems: ItemType[] = [
         {
             key: '/home',
@@ -129,13 +130,11 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
         })
     }
 
-    return (
+    return <Menu
-        <Menu
         defaultOpenKeys={['search', 'info', 'tracking', 'doc']}
         selectedKeys={[location.pathname.includes('/search/domain') ? '/search/domain' : location.pathname]}
         mode='inline'
         theme='dark'
         items={menuItems}
     />
-    )
 }

assets/components/search/DomainDiagram.tsx

@@ -1,7 +1,8 @@
 import React, {useEffect} from 'react'
-import {Background, Controls, Edge, MiniMap, Node, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
+import type { Edge, Node} from '@xyflow/react'
+import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
 import {Flex} from 'antd'
-import {Domain} from '../../utils/api'
+import type {Domain} from '../../utils/api'
 import {getLayoutedElements} from '../tracking/watchlist/diagram/getLayoutedElements'
 import {domainEntitiesToNode, domainToNode, nsToNode, tldToNode} from '../tracking/watchlist/diagram/watchlistToNodes'
 import {domainEntitiesToEdges, domainNSToEdges, tldToEdge} from '../tracking/watchlist/diagram/watchlistToEdges'

assets/components/search/DomainLifecycleSteps.tsx

@@ -1,4 +1,5 @@
-import {StepProps, Steps, Tooltip} from 'antd'
+import type {StepProps} from 'antd'
+import { Steps, Tooltip} from 'antd'
 import React from 'react'
 import {t} from 'ttag'
 import {

assets/components/search/DomainResult.tsx

@@ -4,7 +4,7 @@ import {EventTimeline} from './EventTimeline'
 import {EntitiesList} from './EntitiesList'
 import {DomainDiagram} from './DomainDiagram'
 import React from 'react'
-import {Domain} from '../../utils/api'
+import type {Domain} from '../../utils/api'
 import {regionNames} from '../../i18n'
 
 import {getCountryCode} from '../../utils/functions/getCountryCode'

assets/components/search/EntitiesList.tsx

@@ -1,6 +1,6 @@
 import {List, Tag, Tooltip, Typography} from 'antd'
 import React from 'react'
-import {Domain} from '../../utils/api'
+import type {Domain} from '../../utils/api'
 import {rdapRoleDetailTranslation, rdapRoleTranslation} from '../../utils/functions/rdapTranslation'
 import {roleToAvatar} from '../../utils/functions/roleToAvatar'
 import {rolesToColor} from '../../utils/functions/rolesToColor'

assets/components/search/EventTimeline.tsx

@@ -1,6 +1,6 @@
 import {Timeline, Tooltip, Typography} from 'antd'
 import React from 'react'
-import {Event} from '../../utils/api'
+import type {Event} from '../../utils/api'
 import useBreakpoint from '../../hooks/useBreakpoint'
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../utils/functions/rdapTranslation'
 import {actionToColor} from '../../utils/functions/actionToColor'

assets/components/tracking/connector/ConnectorForm.tsx

@@ -1,6 +1,8 @@
-import {Alert, Button, Checkbox, Form, FormInstance, Input, Popconfirm, Select, Space, Typography} from 'antd'
+import type { FormInstance} from 'antd'
+import {Alert, Button, Checkbox, Form, Input, Popconfirm, Select, Space, Typography} from 'antd'
 import React, {useState} from 'react'
-import {Connector, ConnectorProvider} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
+import { ConnectorProvider} from '../../../utils/api/connectors'
 import {t} from 'ttag'
 import {BankOutlined} from '@ant-design/icons'
 import {

assets/components/tracking/connector/ConnectorsList.tsx

@@ -2,7 +2,8 @@ import {Card, Divider, message, Popconfirm, theme, Typography} from 'antd'
 import {t} from 'ttag'
 import {DeleteFilled} from '@ant-design/icons'
 import React from 'react'
-import {Connector, deleteConnector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
+import { deleteConnector} from '../../../utils/api/connectors'
 
 const {useToken} = theme
 

assets/components/tracking/watchlist/CalendarWatchlistButton.tsx

@@ -2,7 +2,7 @@ import {CalendarFilled} from '@ant-design/icons'
 import {t} from 'ttag'
 import {Popover, QRCode, Typography} from 'antd'
 import React from 'react'
-import {Watchlist} from '../../../utils/api'
+import type {Watchlist} from '../../../utils/api'
 
 export function CalendarWatchlistButton({watchlist}: { watchlist: Watchlist }) {
     const icsResourceLink = `${window.location.origin}/api/watchlists/${watchlist.token}/calendar`

assets/components/tracking/watchlist/DeleteWatchlistButton.tsx

@@ -1,6 +1,7 @@
 import {Popconfirm, theme, Typography} from 'antd'
 import {t} from 'ttag'
-import {deleteWatchlist, Watchlist} from '../../../utils/api'
+import type { Watchlist} from '../../../utils/api'
+import {deleteWatchlist} from '../../../utils/api'
 import {DeleteFilled} from '@ant-design/icons'
 import React from 'react'
 

assets/components/tracking/watchlist/TrackedDomainTable.tsx

@@ -1,8 +1,10 @@
-import React, {ReactElement, useEffect, useState} from 'react'
+import type {ReactElement} from 'react'
-import {Domain, getTrackedDomainList} from '../../../utils/api'
+import React, { useEffect, useState} from 'react'
+import type {Domain} from '../../../utils/api'
+import { getTrackedDomainList} from '../../../utils/api'
 import {Button, Empty, Result, Skeleton, Table, Tag, Tooltip} from 'antd'
 import {t} from 'ttag'
-import {ColumnType} from 'antd/es/table'
+import type {ColumnType} from 'antd/es/table'
 import {rdapStatusCodeDetailTranslation} from '../../../utils/functions/rdapTranslation'
 import {eppStatusCodeToColor} from '../../../utils/functions/eppStatusCodeToColor'
 import {Link} from 'react-router-dom'

assets/components/tracking/watchlist/UpdateWatchlistButton.tsx

@@ -3,8 +3,8 @@ import {t} from 'ttag'
 import {WatchlistForm} from './WatchlistForm'
 import React, {useState} from 'react'
 import {EditOutlined} from '@ant-design/icons'
-import {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
-import {Watchlist} from '../../../utils/api'
+import type {Watchlist} from '../../../utils/api'
 
 export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: {
     watchlist: Watchlist

assets/components/tracking/watchlist/WatchlistCard.tsx

@@ -5,13 +5,13 @@ import {ViewDiagramWatchlistButton} from './diagram/ViewDiagramWatchlistButton'
 import {UpdateWatchlistButton} from './UpdateWatchlistButton'
 import {DeleteWatchlistButton} from './DeleteWatchlistButton'
 import React from 'react'
-import {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
 import {CalendarWatchlistButton} from './CalendarWatchlistButton'
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
 
 import {actionToColor} from '../../../utils/functions/actionToColor'
 import {DomainToTag} from '../DomainToTag'
-import {Watchlist} from '../../../utils/api'
+import type {Watchlist} from '../../../utils/api'
 
 export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: {
     watchlist: Watchlist

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -1,12 +1,13 @@
-import {Button, Form, FormInstance, Input, Select, SelectProps, Space, Tag, Tooltip, Typography} from 'antd'
+import type { FormInstance, SelectProps} from 'antd'
+import {Button, Form, Input, Select, Space, Tag, Tooltip, Typography} from 'antd'
 import {t} from 'ttag'
 import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from '@ant-design/icons'
 import React from 'react'
-import {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
 import {actionToColor} from '../../../utils/functions/actionToColor'
 import {actionToIcon} from '../../../utils/functions/actionToIcon'
-import {EventAction} from '../../../utils/api'
+import type {EventAction} from '../../../utils/api'
 
 type TagRender = SelectProps['tagRender']
 

assets/components/tracking/watchlist/WatchlistsList.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
 import {WatchlistCard} from './WatchlistCard'
-import {Watchlist} from '../../../utils/api'
+import type {Watchlist} from '../../../utils/api'
 
 export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
     watchlists: Watchlist[]

assets/components/tracking/watchlist/diagram/ViewDiagramWatchlistButton.tsx

@@ -4,7 +4,8 @@ import React, {useEffect, useState} from 'react'
 import {ApartmentOutlined} from '@ant-design/icons'
 
 import '@xyflow/react/dist/style.css'
-import {Background, Controls, Edge, MiniMap, Node, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
+import type { Edge, Node} from '@xyflow/react'
+import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
 import {getWatchlist} from '../../../../utils/api'
 import {getLayoutedElements} from './getLayoutedElements'
 import {watchlistToNodes} from './watchlistToNodes'

assets/components/tracking/watchlist/diagram/getLayoutedElements.tsx

@@ -1,5 +1,6 @@
 import dagre from 'dagre'
-import {Edge, Node, Position} from '@xyflow/react'
+import type {Edge, Node} from '@xyflow/react'
+import { Position} from '@xyflow/react'
 
 export const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'TB') => {
     const dagreGraph = new dagre.graphlib.Graph()

assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx

@@ -1,9 +1,9 @@
-import {Domain, Watchlist} from '../../../../utils/api'
+import type {Domain, Watchlist} from '../../../../utils/api'
 import {rdapRoleTranslation} from '../../../../utils/functions/rdapTranslation'
 import {t} from 'ttag'
 
 import {rolesToColor} from '../../../../utils/functions/rolesToColor'
-import {Edge} from '@xyflow/react'
+import type {Edge} from '@xyflow/react'
 
 export function domainEntitiesToEdges(d: Domain, withRegistrar = false): Edge[] {
     const rdapRoleTranslated = rdapRoleTranslation()

assets/components/tracking/watchlist/diagram/watchlistToNodes.tsx

@@ -1,9 +1,9 @@
-import {Domain, Nameserver, Tld, Watchlist} from '../../../../utils/api'
+import type {Domain, Nameserver, Tld, Watchlist} from '../../../../utils/api'
 import React from 'react'
 import {t} from 'ttag'
 
 import {entityToName} from '../../../../utils/functions/entityToName'
-import {Node} from '@xyflow/react'
+import type {Node} from '@xyflow/react'
 
 export const domainToNode = (d: Domain): Node => ({
     id: d.ldhName,

assets/hooks/useBreakpoint.tsx

@@ -1,4 +1,5 @@
-import {Breakpoint, theme} from 'antd'
+import type {Breakpoint} from 'antd'
+import { theme} from 'antd'
 import {useMediaQuery} from 'react-responsive'
 
 const {useToken} = theme

assets/pages/LoginPage.tsx

@@ -3,7 +3,8 @@ import {Button, Card} from 'antd'
 import {t} from 'ttag'
 import TextPage from './TextPage'
 import {LoginForm} from '../components/LoginForm'
-import {getConfiguration, InstanceConfig} from '../utils/api'
+import type { InstanceConfig} from '../utils/api'
+import {getConfiguration} from '../utils/api'
 import {RegisterForm} from '../components/RegisterForm'
 
 export const AuthenticatedContext = createContext<

assets/pages/StatisticsPage.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react'
-import {getStatistics, Statistics} from '../utils/api'
+import type { Statistics} from '../utils/api'
+import {getStatistics} from '../utils/api'
 import {Card, Col, Divider, Row, Statistic, Tooltip} from 'antd'
 import {t} from 'ttag'
 import {

assets/pages/UserPage.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react'
 import {Card, Flex, Skeleton, Typography} from 'antd'
-import {getUser, User} from '../utils/api'
+import type { User} from '../utils/api'
+import {getUser} from '../utils/api'
 import {t} from 'ttag'
 
 export default function UserPage() {

assets/pages/search/DomainSearchPage.tsx

@@ -1,9 +1,12 @@
 import React, {useEffect, useState} from 'react'
-import {Empty, Flex, FormProps, message, Skeleton} from 'antd'
+import type { FormProps} from 'antd'
-import {Domain, getDomain} from '../../utils/api'
+import {Empty, Flex, message, Skeleton} from 'antd'
-import {AxiosError} from 'axios'
+import type {Domain} from '../../utils/api'
+import { getDomain} from '../../utils/api'
+import type {AxiosError} from 'axios'
 import {t} from 'ttag'
-import {DomainSearchBar, FieldType} from '../../components/search/DomainSearchBar'
+import type { FieldType} from '../../components/search/DomainSearchBar'
+import {DomainSearchBar} from '../../components/search/DomainSearchBar'
 import {DomainResult} from '../../components/search/DomainResult'
 import {showErrorAPI} from '../../utils/functions/showErrorAPI'
 import {useNavigate, useParams} from 'react-router-dom'

assets/pages/search/TldPage.tsx

@@ -1,10 +1,12 @@
-import React, {ReactElement, useEffect, useState} from 'react'
+import type {ReactElement} from 'react'
+import React, { useEffect, useState} from 'react'
 import {Collapse, Divider, Table, Typography} from 'antd'
-import {getTldList, Tld} from '../../utils/api'
+import type { Tld} from '../../utils/api'
+import {getTldList} from '../../utils/api'
 import {t} from 'ttag'
 import {regionNames} from '../../i18n'
 import useBreakpoint from '../../hooks/useBreakpoint'
-import {ColumnType} from 'antd/es/table'
+import type {ColumnType} from 'antd/es/table'
 import punycode from 'punycode/punycode'
 import {getCountryCode} from '../../utils/functions/getCountryCode'
 import {tldToEmoji} from '../../utils/functions/tldToEmoji'

assets/pages/tracking/ConnectorPage.tsx

@@ -1,10 +1,12 @@
 import React, {useEffect, useState} from 'react'
 import {Card, Flex, Form, message, Skeleton} from 'antd'
 import {t} from 'ttag'
-import {Connector, getConnectors, postConnector} from '../../utils/api/connectors'
+import type {Connector} from '../../utils/api/connectors'
+import { getConnectors, postConnector} from '../../utils/api/connectors'
 import {ConnectorForm} from '../../components/tracking/connector/ConnectorForm'
-import {AxiosError} from 'axios'
+import type {AxiosError} from 'axios'
-import {ConnectorElement, ConnectorsList} from '../../components/tracking/connector/ConnectorsList'
+import type {ConnectorElement} from '../../components/tracking/connector/ConnectorsList'
+import { ConnectorsList} from '../../components/tracking/connector/ConnectorsList'
 
 import {showErrorAPI} from '../../utils/functions/showErrorAPI'
 

assets/pages/tracking/WatchlistPage.tsx

@@ -1,11 +1,13 @@
 import React, {useEffect, useState} from 'react'
 import {Card, Divider, Flex, Form, message} from 'antd'
-import {getWatchlists, postWatchlist, putWatchlist, Watchlist} from '../../utils/api'
+import type { Watchlist} from '../../utils/api'
-import {AxiosError} from 'axios'
+import {getWatchlists, postWatchlist, putWatchlist} from '../../utils/api'
+import type {AxiosError} from 'axios'
 import {t} from 'ttag'
 import {WatchlistForm} from '../../components/tracking/watchlist/WatchlistForm'
 import {WatchlistsList} from '../../components/tracking/watchlist/WatchlistsList'
-import {Connector, getConnectors} from '../../utils/api/connectors'
+import type {Connector} from '../../utils/api/connectors'
+import { getConnectors} from '../../utils/api/connectors'
 
 import {showErrorAPI} from '../../utils/functions/showErrorAPI'
 

assets/utils/api/connectors.ts

@@ -1,5 +1,5 @@
 import {request} from './index'
-import {ConnectorElement} from '../../components/tracking/connector/ConnectorsList'
+import type {ConnectorElement} from '../../components/tracking/connector/ConnectorsList'
 
 export enum ConnectorProvider {
     OVH = 'ovh',

assets/utils/api/domain.ts

@@ -1,4 +1,5 @@
-import {Domain, request} from '.'
+import type {Domain} from '.'
+import { request} from '.'
 
 export async function getDomain(ldhName: string): Promise<Domain> {
     const response = await request<Domain>({

assets/utils/api/index.ts

@@ -1,4 +1,5 @@
-import axios, {AxiosRequestConfig, AxiosResponse} from 'axios'
+import type {AxiosRequestConfig, AxiosResponse} from 'axios'
+import axios from 'axios'
 
 export type EventAction =
     'registration'

assets/utils/api/tld.ts

@@ -1,4 +1,5 @@
-import {request, Tld} from './index'
+import type { Tld} from './index'
+import {request} from './index'
 
 interface TldList {
     'hydra:totalItems': number

assets/utils/api/user.ts

@@ -1,4 +1,5 @@
-import {InstanceConfig, request, Statistics, User} from './index'
+import type {InstanceConfig, Statistics, User} from './index'
+import { request} from './index'
 
 export async function login(email: string, password: string): Promise<boolean> {
     const response = await request({

assets/utils/api/watchlist.ts

@@ -1,4 +1,5 @@
-import {request, TrackedDomains, Watchlist, WatchlistRequest} from './index'
+import type { TrackedDomains, Watchlist, WatchlistRequest} from './index'
+import {request} from './index'
 
 interface WatchlistList {
     'hydra:totalItems': number

assets/utils/functions/actionToColor.tsx

@@ -1,4 +1,4 @@
-import {EventAction} from '../api'
+import type {EventAction} from '../api'
 
 export const actionToColor = (a: EventAction) => a === 'registration'
     ? 'green'

assets/utils/functions/actionToIcon.tsx

@@ -1,4 +1,4 @@
-import {EventAction} from '../api'
+import type {EventAction} from '../api'
 import {
     ClockCircleOutlined,
     DeleteOutlined,

assets/utils/functions/entityToName.tsx

@@ -1,4 +1,4 @@
-import {Entity} from '../api'
+import type {Entity} from '../api'
 import vCard from 'vcf'
 
 export const entityToName = (e: { entity: Entity }): string => {

assets/utils/functions/extractDetailsFromJCard.tsx

@@ -1,5 +1,5 @@
 import vCard from 'vcf'
-import {Entity} from '../api'
+import type {Entity} from '../api'
 
 export const extractDetailsFromJCard = (e: { entity: Entity }): {
     fn?: string

assets/utils/functions/showErrorAPI.tsx

@@ -1,5 +1,5 @@
-import {AxiosError, AxiosResponse} from 'axios'
+import type {AxiosError, AxiosResponse} from 'axios'
-import {MessageInstance, MessageType} from 'antd/lib/message/interface'
+import type {MessageInstance, MessageType} from 'antd/lib/message/interface'
 import {t} from 'ttag'
 
 export function showErrorAPI(e: AxiosError, messageApi: MessageInstance): MessageType | undefined {

assets/utils/functions/sortDomainEntities.tsx

@@ -1,4 +1,4 @@
-import {Domain} from '../api'
+import type {Domain} from '../api'
 
 export const sortDomainEntities = (domain: Domain) => domain.entities
     .filter(e => !e.deleted)

eslint.config.mjs

@@ -1,7 +1,7 @@
-import globals from "globals";
+import globals from "globals"
-import pluginJs from "@eslint/js";
+import pluginJs from "@eslint/js"
-import tseslint from "typescript-eslint";
+import tseslint from "typescript-eslint"
-import pluginReact from "eslint-plugin-react";
+import pluginReact from "eslint-plugin-react"
 
 
 /** @type {import('eslint').Linter.Config[]} */
@@ -10,7 +10,8 @@ export default [
         files: ["**/*.{ts,tsx}"],
         languageOptions: {globals: globals.browser},
         rules: {
-            semi: ["error", "never"]
+            semi: ["error", "never"],
+            '@typescript-eslint/consistent-type-imports': 'error'
         },
     },
     {
@@ -26,4 +27,4 @@ export default [
     pluginJs.configs.recommended,
     ...tseslint.configs.recommended,
     pluginReact.configs.flat.recommended,
-];
+]