chore: add eslint import order rule (#781)

eslint.config.js

@@ -59,6 +59,7 @@ module.exports = [
       '@typescript-eslint/no-base-to-string': 'off',
       '@typescript-eslint/no-unsafe-assignment': 'off',
       'import/no-unused-modules': 'error',
+      'import/order': 'error',
       'prettier/prettier': [
         'error',
         {

package.json

@@ -118,6 +118,7 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",

src/App.tsx

@@ -1,11 +1,11 @@
 import './App.scss'
 import 'leaflet/dist/leaflet.css'
 import 'moment/locale/he'
-import router from './routes'
 import { RouterProvider } from 'react-router-dom'
 import { Suspense } from 'react'
-import Preloader from './shared/Preloader'
 import moment from 'moment-timezone'
+import Preloader from './shared/Preloader'
+import router from './routes'
 import 'moment/dist/locale/he'
 
 moment.tz.setDefault('Asia/Jerusalem')

src/api/gapsService.ts

@@ -1,6 +1,6 @@
 import moment, { Moment } from 'moment-timezone'
-import { GapsList } from '../model/gaps'
 import axios, { CancelTokenSource } from 'axios'
+import { GapsList } from '../model/gaps'
 import { BASE_PATH } from './apiConfig'
 
 type RawGapsList = {

src/api/groupByService.ts

@@ -1,7 +1,7 @@
-import { BASE_PATH } from './apiConfig'
 import agencyList from 'open-bus-stride-client/agencies/agencyList'
 import { Moment } from 'moment'
 import { useQuery } from '@tanstack/react-query'
+import { BASE_PATH } from './apiConfig'
 
 type groupByField =
   | 'gtfs_route_date'

src/api/siriService.ts

@@ -1,11 +1,11 @@
 import { SiriApi, SiriVehicleLocationWithRelatedPydanticModel } from 'open-bus-stride-client'
+import moment, { Moment } from 'moment'
+import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel'
 import { API_CONFIG, MAX_HITS_COUNT } from 'src/api/apiConfig'
 import { BusStop } from 'src/model/busStop'
-import moment, { Moment } from 'moment'
 import { geoLocationBoundary, nearestLocation } from 'src/api/geoService'
 import { Coordinates } from 'src/model/location'
 import { BusRoute } from 'src/model/busRoute'
-import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel'
 
 const SIRI_API = new SiriApi(API_CONFIG)
 const LOCATION_DELTA_METERS = 500

src/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import App from './App'
 import ReactGA from 'react-ga4'
 import './locale/allTranslations'
 import { QueryClient } from '@tanstack/react-query'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import App from './App'
 
 const persister = createSyncStoragePersister({
   storage: window.localStorage,

src/layout/header/Header.tsx

@@ -1,10 +1,10 @@
 import { Layout } from 'antd'
 import { useContext } from 'react'
+import { MenuOutlined } from '@ant-design/icons'
+import cn from 'classnames'
 import { LayoutContextInterface, LayoutCtx } from '../LayoutContext'
 import { useTheme } from '../ThemeContext'
-import { MenuOutlined } from '@ant-design/icons'
 import './Header.css'
-import cn from 'classnames'
 import ToggleThemeButton from './ToggleThemeButton'
 import { DonationButton } from './DonationButton'
 import HeaderLinks from './HeaderLinks/HeaderLinks'

src/layout/index.tsx

@@ -1,10 +1,10 @@
 import { Layout } from 'antd'
-import MainHeader from './header/Header'
-import SideBar from './sidebar/SideBar'
 import styled from 'styled-components'
-import LayoutContext from './LayoutContext'
 import { Link, Outlet } from 'react-router-dom'
 import { Suspense } from 'react'
+import MainHeader from './header/Header'
+import SideBar from './sidebar/SideBar'
+import LayoutContext from './LayoutContext'
 import Preloader from 'src/shared/Preloader'
 import { EasterEgg } from 'src/pages/EasterEgg/EasterEgg'
 import { Envelope } from 'src/pages/EasterEgg/Envelope'

src/layout/sidebar/SideBar.tsx

@@ -1,11 +1,11 @@
-import Menu from './menu/Menu'
 import './sidebar.scss'
 import { Drawer, Layout } from 'antd'
 import { useContext, useState } from 'react'
-import { LayoutContextInterface, LayoutCtx } from '../LayoutContext'
 import { Link } from 'react-router-dom'
-import { PAGES } from 'src/routes'
+import { LayoutContextInterface, LayoutCtx } from '../LayoutContext'
+import Menu from './menu/Menu'
 import { Logo } from './logo'
+import { PAGES } from 'src/routes'
 const { Sider } = Layout
 
 const CollapsedLogo = () => <h1 className={'sidebar-logo-collapsed'}>🚌</h1>

src/layout/sidebar/logo.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import { useTheme } from '../ThemeContext'
 import cn from 'classnames'
+import { useTheme } from '../ThemeContext'
 
 export function Logo() {
   const { isDarkTheme } = useTheme()

src/layout/sidebar/menu/Menu.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import './menu.scss'
 import { useTranslation } from 'react-i18next'
-import { PAGES } from 'src/routes'
 
 import type { MenuProps } from 'antd'
 import { Menu } from 'antd'
+import { PAGES } from 'src/routes'
 import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
 type MenuItem = Required<MenuProps>['items'][number]
 function getItem(

src/model/pageState.ts

@@ -1,11 +1,11 @@
-import { BusRoute } from './busRoute'
-import { BusStop } from './busStop'
 import { createContext, Dispatch } from 'react'
 import moment from 'moment'
 import {
   GtfsRideStopPydanticModel,
   SiriVehicleLocationWithRelatedPydanticModel,
 } from 'open-bus-stride-client'
+import { BusStop } from './busStop'
+import { BusRoute } from './busRoute'
 import { Coordinates } from './location'
 
 export type PageSearchState = {

src/pages/DataResearch/DataResearch.tsx

@@ -1,10 +1,6 @@
 import React, { useMemo, useState } from 'react'
-import { useGroupBy } from 'src/api/groupByService'
-import Widget from 'src/shared/Widget'
-import { useDate } from '../components/DateTimePicker'
 import moment from 'moment'
 import { Grid } from '@mui/material'
-import { DateSelector } from '../components/DateSelector'
 import { useTranslation } from 'react-i18next'
 import { Skeleton } from 'antd'
 import {
@@ -16,10 +12,14 @@ import {
   XAxis,
   YAxis,
 } from 'recharts'
+import { DateSelector } from '../components/DateSelector'
+import { useDate } from '../components/DateTimePicker'
 import { PageContainer } from '../components/PageContainer'
 import { getColorName } from '../dashboard/AllLineschart/OperatorHbarChart/OperatorHbarChart'
 import './DataResearch.scss'
 import OperatorSelector from '../components/OperatorSelector'
+import { useGroupBy } from 'src/api/groupByService'
+import Widget from 'src/shared/Widget'
 
 const now = moment()
 const unique: (value: string, index: number, self: string[]) => boolean = (value, index, self) =>

src/pages/about/index.tsx

@@ -1,11 +1,11 @@
 import styled from 'styled-components'
-import SlackIcon from '../../resources/slack-icon.svg'
 import { Trans, useTranslation } from 'react-i18next'
-import Widget from 'src/shared/Widget'
 import Typography from '@mui/material/Typography'
 import Stack from '@mui/material/Stack'
 import './About.scss'
 import { useQuery } from '@tanstack/react-query'
+import SlackIcon from '../../resources/slack-icon.svg'
+import Widget from 'src/shared/Widget'
 
 const pageName = 'aboutPage'
 const About = () => {

src/pages/components/DateSelector.tsx

@@ -1,8 +1,8 @@
 import { useState, useMemo } from 'react'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
 import { useTranslation } from 'react-i18next'
-import { DataAndTimeSelectorProps } from './utils/dateAndTime'
 import { DateValidationError } from '@mui/x-date-pickers'
+import { DataAndTimeSelectorProps } from './utils/dateAndTime'
 
 export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTimeSelectorProps) {
   const [error, setError] = useState<DateValidationError | null>(null)

src/pages/components/LineSelector.tsx

@@ -2,9 +2,9 @@ import { useCallback, useLayoutEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import debounce from 'lodash.debounce'
 import { TextField } from '@mui/material'
+import classNames from 'classnames'
 import ClearButton from './ClearButton'
 import './Selector.scss'
-import classNames from 'classnames'
 
 type LineSelectorProps = {
   lineNumber: string | undefined

src/pages/components/MinuteSelector.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { TextField } from '@mui/material'
+import classNames from 'classnames'
 import ClearButton from './ClearButton'
 import './Selector.scss'
-import classNames from 'classnames'
 
 type MinuteSelectorProps = {
   num: number

src/pages/components/OperatorSelector.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import '../../shared/shared.css'
-import OperatorSelector from './OperatorSelector'
 import { useState } from 'react'
+import OperatorSelector from './OperatorSelector'
 import { MAJOR_OPERATORS } from 'src/model/operator'
 
 const OperatorSelectorStory = () => {

src/pages/components/OperatorSelector.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Operator, getOperators } from 'src/model/operator'
 import { Autocomplete, TextField } from '@mui/material'
+import { Operator, getOperators } from 'src/model/operator'
 
 type OperatorSelectorProps = {
   operatorId?: string

src/pages/components/RouteSelector.tsx

@@ -1,9 +1,9 @@
-import { formatted } from 'src/locale/utils'
-import { BusRoute } from 'src/model/busRoute'
 import { Autocomplete, TextField } from '@mui/material'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
+import { BusRoute } from 'src/model/busRoute'
+import { formatted } from 'src/locale/utils'
 
 type RouteSelectorProps = {
   routes: BusRoute[]

src/pages/components/StopSelector.tsx

@@ -1,7 +1,7 @@
-import { formatted } from 'src/locale/utils'
-import { BusStop } from 'src/model/busStop'
 import { Autocomplete, TextField } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import { formatted } from 'src/locale/utils'
+import { BusStop } from 'src/model/busStop'
 
 type StopSelectorProps = {
   stops: BusStop[]

src/pages/components/map-related/MapContent.tsx

@@ -1,15 +1,15 @@
+import { t } from 'i18next'
 import { useRef } from 'react'
 import { Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet'
 import { Icon, IconOptions, Marker as LeafletMarker } from 'leaflet'
-import { useAgencyList } from 'src/api/agencyList'
 import { busIcon, busIconPath } from '../utils/BusIcon'
 import { BusToolTip } from './MapLayers/BusToolTip'
-import { t } from 'i18next'
 import '../../Map.scss'
 import { MapProps } from './map-types'
 import { useRecenterOnDataChange } from './useRecenterOnDataChange'
 import { MapIndex } from './MapIndex'
 import MapFooterButtons from './MapFooterButtons/MapFooterButtons'
+import { useAgencyList } from 'src/api/agencyList'
 
 export function MapContent({ positions, plannedRouteStops, showNavigationButtons }: MapProps) {
   useRecenterOnDataChange({ positions, plannedRouteStops })

src/pages/components/map-related/MapLayers/BusToolTip.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BusToolTip, BusToolTipProps } from './BusToolTip'
 import { BrowserRouter } from 'react-router-dom'
+import { BusToolTip, BusToolTipProps } from './BusToolTip'
 
 const meta = {
   title: 'Components/MapLayers/BusToolTip',

src/pages/components/map-related/MapLayers/BusToolTip.tsx

@@ -1,15 +1,15 @@
 import { ReactNode, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Point } from 'src/pages/timeBasedMap'
 import { Button } from '@mui/material'
 import moment from 'moment-timezone'
 import './BusToolTip.scss'
-import { getSiriRideWithRelated } from 'src/api/siriService'
 import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel'
 import { useTranslation } from 'react-i18next'
 import CircularProgress from '@mui/material/CircularProgress'
 import cn from 'classnames'
 import CustomTreeView from '../../CustomTreeView'
+import { getSiriRideWithRelated } from 'src/api/siriService'
+import { Point } from 'src/pages/timeBasedMap'
 
 export type BusToolTipProps = { position: Point; icon: string; children?: ReactNode }
 

src/pages/components/map-related/MapWithLocationsAndPath.tsx

@@ -1,11 +1,11 @@
 import { MapContainer } from 'react-leaflet'
-import { Point } from 'src/pages/timeBasedMap'
+import { useCallback, useState } from 'react'
 import IconButton from '@mui/material/IconButton'
 import OpenInFullRoundedIcon from '@mui/icons-material/OpenInFullRounded'
 import { MapProps } from './map-types'
-import { useCallback, useState } from 'react'
 import '../../Map.scss'
 import { MapContent } from './MapContent'
+import { Point } from 'src/pages/timeBasedMap'
 
 const position: Point = {
   loc: [32.3057988, 34.85478613], // arbitrary default value... Netanya - best city to live & die in