lint fixes

.eslintrc.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-commonjs
 module.exports = {
   env: {
     browser: true,
@@ -29,10 +30,12 @@ module.exports = {
     'react-hooks',
   ],
   settings: {
-    // 'import/resolver': {
+    'import/resolver': {
-    //  typescript: true,
+      typescript: true,
-    //  node: true,
+      node: {
-    // },
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
     react: {
       version: 'detect',
     },
@@ -83,13 +86,16 @@ module.exports = {
     'import/no-relative-parent-imports': [
       'error',
       {
-        ignore: [
+        ignore: ['#[src,root,components,utils]/*'],
-          '#[src,root,components,pages,assets,layouts,queries,stores,plugins,context,types]/*',
-        ],
       },
     ],
     'import/no-self-import': 'error',
-    'import/no-unresolved': 'error',
+    'import/no-unresolved': [
+      'error',
+      {
+        ignore: ['react'],
+      },
+    ],
     'import/no-useless-path-segments': 'error',
     'import/no-webpack-loader-syntax': 'error',
     'import/consistent-type-specifier-style': 'error',

package-lock.json

@@ -31,10 +31,10 @@
       },
       "devDependencies": {
         "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
+        "@types/geojson": "^7946.0.14",
         "@types/leaflet": "^1.7.11",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.0.5",
-        "@types/react-leaflet": "^2.8.2",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "autoprefixer": "^10.4.14",
@@ -402,10 +402,11 @@
       }
     },
     "node_modules/@types/geojson": {
-      "version": "7946.0.8",
+      "version": "7946.0.14",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/hast": {
       "version": "3.0.3",
@@ -430,10 +431,11 @@
       "license": "MIT"
     },
     "node_modules/@types/leaflet": {
-      "version": "1.7.11",
+      "version": "1.9.14",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.14.tgz",
-      "integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
+      "integrity": "sha512-sx2q6MDJaajwhKeVgPSvqXd8rhNJSTA3tMidQGduZn9S6WBYxDkCpSpV5xXEmSg7Cgdk/5vJGhVF1kMYLzauBg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
       }
@@ -479,16 +481,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-leaflet": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
-      "integrity": "sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==",
-      "dev": true,
-      "dependencies": {
-        "@types/leaflet": "*",
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",

package.json

@@ -19,10 +19,10 @@
   "license": "GPL-3.0-only",
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
+    "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.7.11",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.0.5",
-    "@types/react-leaflet": "^2.8.2",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "autoprefixer": "^10.4.14",
@@ -71,5 +71,11 @@
     "remark-breaks": "^4.0.0",
     "tributejs": "^5.1.3",
     "tw-elements": "^1.0.0"
+  },
+  "imports": {
+    "#components/*": "./src/Components/*",
+    "#utils/*": "./src/Utils/*",
+    "#src/*": "./src/*",
+    "#root/*": "./*"
   }
 }

postcss.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-commonjs
 module.exports = {
   plugins: {
     tailwindcss: {},

src/Components/AppShell/AppShell.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
+import { AssetsApi } from '#src/types'
+
+import { ContextWrapper } from './ContextWrapper'
 import NavBar from './NavBar'
 import { SetAppState } from './SetAppState'
-import { AssetsApi } from '../../types'
-import { ContextWrapper } from './ContextWrapper'
 
 export function AppShell({
   appName,

src/Components/AppShell/Content.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
-import * as React from 'react'
-
 type ContentProps = {
   children?: React.ReactNode
 }

src/Components/AppShell/ContextWrapper.tsx

@@ -1,18 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ToastContainer } from 'react-toastify'
-import { QuestsProvider } from '../Gaming/hooks/useQuests'
-import { ClusterRefProvider } from '../Map/hooks/useClusterRef'
-import { FilterProvider } from '../Map/hooks/useFilter'
-import { ItemsProvider } from '../Map/hooks/useItems'
-import { LayersProvider } from '../Map/hooks/useLayers'
-import { LeafletRefsProvider } from '../Map/hooks/useLeafletRefs'
-import { PermissionsProvider } from '../Map/hooks/usePermissions'
-import { SelectPositionProvider } from '../Map/hooks/useSelectPosition'
-import { TagsProvider } from '../Map/hooks/useTags'
-import { AppStateProvider } from './hooks/useAppState'
 import { useContext, createContext } from 'react'
 import { BrowserRouter as Router, useLocation } from 'react-router-dom'
+import { ToastContainer } from 'react-toastify'
+
+import { QuestsProvider } from '#components/Gaming/hooks/useQuests'
+import { ClusterRefProvider } from '#components/Map/hooks/useClusterRef'
+import { FilterProvider } from '#components/Map/hooks/useFilter'
+import { ItemsProvider } from '#components/Map/hooks/useItems'
+import { LayersProvider } from '#components/Map/hooks/useLayers'
+import { LeafletRefsProvider } from '#components/Map/hooks/useLeafletRefs'
+import { PermissionsProvider } from '#components/Map/hooks/usePermissions'
+import { SelectPositionProvider } from '#components/Map/hooks/useSelectPosition'
+import { TagsProvider } from '#components/Map/hooks/useTags'
+
+import { AppStateProvider } from './hooks/useAppState'
 
 // Helper context to determine if the ContextWrapper is already present.
 const ContextCheckContext = createContext(false)

src/Components/AppShell/NavBar.tsx

@@ -9,13 +9,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { useAuth } from '../Auth'
-import { Link, useLocation } from 'react-router-dom'
-import { toast } from 'react-toastify'
 import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
 import { useEffect, useRef, useState } from 'react'
-import { useItems } from '../Map/hooks/useItems'
+import { Link, useLocation } from 'react-router-dom'
-import { Item } from '../../types'
+import { toast } from 'react-toastify'
+
+import { useAuth } from '#components/Auth'
+import { useItems } from '#components/Map/hooks/useItems'
+import { Item } from '#src/types'
 
 export default function NavBar({ appName, userType }: { appName: string; userType: string }) {
   const { isAuthenticated, user, logout } = useAuth()

src/Components/AppShell/SetAppState.tsx

@@ -1,7 +1,9 @@
-import { useSetAppState } from './hooks/useAppState'
-import { AssetsApi } from '../../types'
 import { useEffect } from 'react'
 
+import { AssetsApi } from '#src/types'
+
+import { useSetAppState } from './hooks/useAppState'
+
 export const SetAppState = ({
   assetsApi,
   userType,

src/Components/AppShell/SideBar.tsx

@@ -5,12 +5,12 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon'
 import { useRef, useState, useEffect } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import { Sidenav, initTE } from 'tw-elements'
+
 import SidebarSubmenu from './SidebarSubmenu'
-import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon'
-import * as React from 'react'
 
 type route = {
   path: string

src/Components/AppShell/Sitemap.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { useEffect, useState } from 'react'
-import { useItems } from '../Map/hooks/useItems'
+
+import { useItems } from '#components/Map/hooks/useItems'
 
 export const Sitemap = ({ url }: { url: string }) => {
   const [sitemap, setSitemap] = useState('')

src/Components/AppShell/hooks/useAppState.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useState, createContext, useContext } from 'react'
-import * as React from 'react'
+
-import { AssetsApi } from '../../../types'
+import { AssetsApi } from '#src/types'
 
 interface AppState {
   assetsApi: AssetsApi

src/Components/AppShell/hooks/useAssets.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable react/prop-types */
+
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useState, createContext, useContext } from 'react'
 
-import * as React from 'react'
+import { AssetsApi } from '#src/types'
-import { AssetsApi } from '../../../types'
 
 type UseAssetManagerResult = ReturnType<typeof useAssetsManager>
 

src/Components/Auth/LoginPage.tsx

@@ -6,8 +6,10 @@
 import { useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
+
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
 import { useAuth } from './useAuth'
-import { MapOverlayPage } from '../Templates'
 
 export function LoginPage() {
   const [email, setEmail] = useState<string>('')

src/Components/Auth/RequestPasswordPage.tsx

@@ -4,8 +4,10 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
+
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
 import { useAuth } from './useAuth'
-import { MapOverlayPage } from '../Templates'
 
 // eslint-disable-next-line react/prop-types
 export function RequestPasswordPage({ resetUrl }) {

src/Components/Auth/SetNewPasswordPage.tsx

@@ -2,10 +2,11 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-
 import { toast } from 'react-toastify'
+
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
 import { useAuth } from './useAuth'
-import { MapOverlayPage } from '../Templates'
 
 export function SetNewPasswordPage() {
   const [password, setPassword] = useState<string>('')

src/Components/Auth/SignupPage.tsx

@@ -5,10 +5,11 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-
 import { toast } from 'react-toastify'
+
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
 import { useAuth } from './useAuth'
-import { MapOverlayPage } from '../Templates'
 
 export function SignupPage() {
   const [email, setEmail] = useState<string>('')

src/Components/Auth/useAuth.tsx

@@ -6,8 +6,8 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { createContext, useState, useContext, useEffect } from 'react'
-import * as React from 'react'
+
-import { UserApi, UserItem } from '../../types'
+import { UserApi, UserItem } from '#src/types'
 
 interface AuthProviderProps {
   userApi: UserApi

src/Components/Gaming/Modal.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
 import { useEffect } from 'react'
 
 export function Modal({

src/Components/Gaming/Quests.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests'
-import { useAuth } from '../Auth'
 import { useEffect, useState } from 'react'
-import { useItems } from '../Map/hooks/useItems'
+
-import { Item } from '../../types'
+import { useAuth } from '#components/Auth'
+import { useItems } from '#components/Map/hooks/useItems'
+import { Item } from '#src/types'
+
+import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests'
 
 export function Quests() {
   const questsOpen = useQuestsOpen()

src/Components/Gaming/hooks/useQuests.tsx

@@ -1,6 +1,6 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useState, createContext, useContext } from 'react'
-import * as React from 'react'
 
 type UseQuestManagerResult = ReturnType<typeof useQuestsManager>
 

src/Components/Input/Autocomplete.tsx

@@ -5,9 +5,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
-import { useEffect } from 'react'
+
-import { TagView } from '../Templates/TagView'
+import { TagView } from '#components/Templates/TagView'
 
 export const Autocomplete = ({
   inputProps,
@@ -22,8 +22,8 @@ export const Autocomplete = ({
   pushFilteredSuggestions?: any[]
   setFocus?: boolean
 }) => {
-  const [filteredSuggestions, setFilteredSuggestions] = React.useState<any[]>([])
+  const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([])
-  const [heighlightedSuggestion, setHeighlightedSuggestion] = React.useState<number>(0)
+  const [heighlightedSuggestion, setHeighlightedSuggestion] = useState<number>(0)
 
   useEffect(() => {
     pushFilteredSuggestions && setFilteredSuggestions(pushFilteredSuggestions)
@@ -33,7 +33,7 @@ export const Autocomplete = ({
     setFocus && inputRef.current?.focus()
   }, [setFocus])
 
-  const inputRef = React.useRef<HTMLInputElement>()
+  const inputRef = useRef<HTMLInputElement>()
 
   const getSuggestionValue = (suggestion) => suggestion.name
 

src/Components/Input/ComboBoxInput.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 interface ComboBoxProps {
   id?: string
   options: string[]

src/Components/Input/SelectBox.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { useState } from 'react'
 import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon'
-import * as React from 'react'
+import { useState } from 'react'
 
 type SelectBoxProps = {
   labelTitle?: string

src/Components/Input/TextAreaInput.tsx

@@ -2,10 +2,10 @@
 /* eslint-disable @typescript-eslint/consistent-indexed-object-style */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
-import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import Tribute from 'tributejs'
-import { useTags } from '../Map/hooks/useTags'
+
+import { useTags } from '#components/Map/hooks/useTags'
 
 type TextAreaProps = {
   labelTitle?: string

src/Components/Input/TextInput.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { useEffect, useState } from 'react'
-import * as React from 'react'
 
 type InputTextProps = {
   labelTitle?: string

src/Components/Map/ItemForm.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
+import { node, string } from 'prop-types'
-import { Item } from '../../types'
+import { Children, cloneElement, isValidElement, useEffect } from 'react'
-import * as PropTypes from 'prop-types'
+
-import { useEffect } from 'react'
+import { Item } from '#src/types'
 
 export const ItemForm = ({
   children,
@@ -23,9 +23,9 @@ export const ItemForm = ({
   return (
     <div>
       {children
-        ? React.Children.toArray(children).map((child) =>
+        ? Children.toArray(children).map((child) =>
-            React.isValidElement<{ item: Item; test: string }>(child)
+            isValidElement<{ item: Item; test: string }>(child)
-              ? React.cloneElement(child, { item, test: 'test' })
+              ? cloneElement(child, { item, test: 'test' })
               : '',
           )
         : ''}
@@ -34,8 +34,8 @@ export const ItemForm = ({
 }
 
 ItemForm.propTypes = {
-  children: PropTypes.node,
+  children: node,
-  __TYPE: PropTypes.string,
+  __TYPE: string,
 }
 
 ItemForm.defaultProps = {

src/Components/Map/ItemView.tsx

@@ -1,13 +1,14 @@
-import * as React from 'react'
+import { node, string } from 'prop-types'
-import { Item } from '../../types'
+import { Children, cloneElement, isValidElement } from 'react'
-import * as PropTypes from 'prop-types'
+
+import { Item } from '#src/types'
 
 export const ItemView = ({ children, item }: { children?: React.ReactNode; item?: Item }) => {
   return (
     <div>
       {children
-        ? React.Children.toArray(children).map((child) =>
+        ? Children.toArray(children).map((child) =>
-            React.isValidElement<{ item: Item }>(child) ? React.cloneElement(child, { item }) : '',
+            isValidElement<{ item: Item }>(child) ? cloneElement(child, { item }) : '',
           )
         : ''}
     </div>
@@ -15,8 +16,8 @@ export const ItemView = ({ children, item }: { children?: React.ReactNode; item?
 }
 
 ItemView.propTypes = {
-  children: PropTypes.node,
+  children: node,
-  __TYPE: PropTypes.string,
+  __TYPE: string,
 }
 
 ItemView.defaultProps = {

src/Components/Map/Layer.tsx

@@ -7,29 +7,30 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
+import { Popup } from 'leaflet'
+import { Children, isValidElement, useEffect, useState } from 'react'
 import { Marker, Tooltip, useMap, useMapEvents } from 'react-leaflet'
-import { Item, LayerProps, Tag } from '../../types'
+import { useLocation } from 'react-router-dom'
-import MarkerIconFactory from '../../Utils/MarkerIconFactory'
+
-import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
+import { Item, LayerProps, Tag } from '#src/types'
-import { useAllItemsLoaded, useItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
+import { encodeTag } from '#utils/FormatTags'
-import { useEffect, useState } from 'react'
+import { getValue } from '#utils/GetValue'
-import { ItemFormPopup } from './Subcomponents/ItemFormPopup'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import MarkerIconFactory from '#utils/MarkerIconFactory'
+import { randomColor } from '#utils/RandomColor'
+
 import {
   useFilterTags,
   useIsGroupTypeVisible,
   useIsLayerVisible,
   useVisibleGroupType,
 } from './hooks/useFilter'
-import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags'
+import { useAllItemsLoaded, useItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
 import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
-import { Popup } from 'leaflet'
-import { useLocation } from 'react-router-dom'
-import { getValue } from '../../Utils/GetValue'
-import { hashTagRegex } from '../../Utils/HashTagRegex'
-import { randomColor } from '../../Utils/RandomColor'
-import { encodeTag } from '../../Utils/FormatTags'
 import { useSelectPosition, useSetMarkerClicked } from './hooks/useSelectPosition'
+import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags'
+import { ItemFormPopup } from './Subcomponents/ItemFormPopup'
+import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
 
 export const Layer = ({
   data,
@@ -335,11 +336,11 @@ export const Layer = ({
                   position={[latitude, longitude]}
                 >
                   {children &&
-                  React.Children.toArray(children).some(
+                  Children.toArray(children).some(
-                    (child) => React.isValidElement(child) && child.props.__TYPE === 'ItemView',
+                    (child) => isValidElement(child) && child.props.__TYPE === 'ItemView',
                   ) ? (
-                    React.Children.toArray(children).map((child) =>
+                    Children.toArray(children).map((child) =>
-                      React.isValidElement(child) && child.props.__TYPE === 'ItemView' ? (
+                      isValidElement(child) && child.props.__TYPE === 'ItemView' ? (
                         <ItemViewPopup
                           ref={(r) => {
                             if (!(item.id in leafletRefs && leafletRefs[item.id].popup === r)) {
@@ -383,11 +384,11 @@ export const Layer = ({
       {itemFormPopup &&
         itemFormPopup.layer.name === name &&
         (children &&
-        React.Children.toArray(children).some(
+        Children.toArray(children).some(
-          (child) => React.isValidElement(child) && child.props.__TYPE === 'ItemForm',
+          (child) => isValidElement(child) && child.props.__TYPE === 'ItemForm',
         ) ? (
-          React.Children.toArray(children).map((child) =>
+          Children.toArray(children).map((child) =>
-            React.isValidElement(child) && child.props.__TYPE === 'ItemForm' ? (
+            isValidElement(child) && child.props.__TYPE === 'ItemForm' ? (
               <ItemFormPopup
                 key={setItemFormPopup?.name}
                 position={itemFormPopup.position}

src/Components/Map/Permissions.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react'
 import { useEffect } from 'react'
-import { ItemsApi, Permission } from '../../types'
+
+import { useAuth } from '#components/Auth'
+import { ItemsApi, Permission } from '#src/types'
+
 import { useSetPermissionData, useSetPermissionApi, useSetAdminRole } from './hooks/usePermissions'
-import { useAuth } from '../Auth'
 
 export function Permissions({
   data,

src/Components/Map/Subcomponents/AddButton.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react'
+import { useLayers } from '#components/Map/hooks/useLayers'
-import { useLayers } from '../hooks/useLayers'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
-import { useHasUserPermission } from '../hooks/usePermissions'
 
 export default function AddButton({
   triggerAction,

src/Components/Map/Subcomponents/Controls/Control.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import * as L from 'leaflet'
+import { DomEvent } from 'leaflet'
-import * as React from 'react'
+import { createRef, useEffect } from 'react'
 
 export const Control = ({
   position,
@@ -13,12 +13,12 @@ export const Control = ({
   zIndex: string
   absolute: boolean
 }) => {
-  const controlContainerRef = React.createRef<HTMLDivElement>()
+  const controlContainerRef = createRef<HTMLDivElement>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (controlContainerRef.current !== null) {
-      L.DomEvent.disableClickPropagation(controlContainerRef.current)
+      DomEvent.disableClickPropagation(controlContainerRef.current)
-      L.DomEvent.disableScrollPropagation(controlContainerRef.current)
+      DomEvent.disableScrollPropagation(controlContainerRef.current)
     }
   }, [controlContainerRef])
 

src/Components/Map/Subcomponents/Controls/FilterControl.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react'
+import { useEffect } from 'react'
+
 import {
   useAddVisibleGroupType,
   useIsGroupTypeVisible,
   useToggleVisibleGroupType,
   useVisibleGroupType,
-} from '../../hooks/useFilter'
+} from '#components/Map/hooks/useFilter'
-import { useEffect } from 'react'
 
 export function FilterControl() {
   const [open, setOpen] = React.useState(false)

src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom'
-import { useAuth } from '../../../Auth'
+
+import { useAuth } from '#components/Auth'
 
 export const GratitudeControl = () => {
   const navigate = useNavigate()

src/Components/Map/Subcomponents/Controls/LayerControl.tsx

@@ -1,9 +1,10 @@
-import * as React from 'react'
+import { useState } from 'react'
-import { useLayers } from '../../hooks/useLayers'
+
-import { useIsLayerVisible, useToggleVisibleLayer } from '../../hooks/useFilter'
+import { useIsLayerVisible, useToggleVisibleLayer } from '#components/Map/hooks/useFilter'
+import { useLayers } from '#components/Map/hooks/useLayers'
 
 export function LayerControl() {
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = useState(false)
 
   const layers = useLayers()
 

src/Components/Map/Subcomponents/Controls/LocateControl.tsx

@@ -4,12 +4,13 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as L from 'leaflet'
+import { control } from 'leaflet'
-import { useMap, useMapEvents } from 'react-leaflet'
-import 'leaflet.locatecontrol'
-
-import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
 import { useEffect, useRef, useState } from 'react'
+import { useMap, useMapEvents } from 'react-leaflet'
+// eslint-disable-next-line import/no-unassigned-import
+import 'leaflet.locatecontrol'
+// eslint-disable-next-line import/no-unassigned-import
+import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
 
 // Converts leaflet.locatecontrol to a React Component
 export const LocateControl = () => {
@@ -25,7 +26,7 @@ export const LocateControl = () => {
   useEffect(() => {
     if (!init.current) {
       // @ts-ignore
-      setLc(L.control.locate().addTo(map))
+      setLc(control.locate().addTo(map))
       init.current = true
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/Components/Map/Subcomponents/Controls/QuestControl.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
+import { useQuestsOpen, useSetQuestOpen } from '#components/Gaming/hooks/useQuests'
-import { useQuestsOpen, useSetQuestOpen } from '../../../Gaming/hooks/useQuests'
 
 export function QuestControl() {
   const questsOpen = useQuestsOpen()

src/Components/Map/Subcomponents/Controls/SearchControl.tsx

@@ -10,24 +10,24 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
-import { useAddFilterTag } from '../../hooks/useFilter'
-import useWindowDimensions from '../../hooks/useWindowDimension'
 import axios from 'axios'
+import { LatLng, LatLngBounds, marker } from 'leaflet'
 import { useEffect, useRef, useState } from 'react'
 import { useMap, useMapEvents } from 'react-leaflet'
-import { LatLng, LatLngBounds } from 'leaflet'
-import { useDebounce } from '../../hooks/useDebounce'
-import { useTags } from '../../hooks/useTags'
-import { useItems } from '../../hooks/useItems'
-import { useLeafletRefs } from '../../hooks/useLeafletRefs'
-import { getValue } from '../../../../Utils/GetValue'
-import { LocateControl } from './LocateControl'
-import * as L from 'leaflet'
-import MarkerIconFactory from '../../../../Utils/MarkerIconFactory'
-import { decodeTag } from '../../../../Utils/FormatTags'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Item } from '../../../../types'
+
+import { useDebounce } from '#components/Map/hooks/useDebounce'
+import { useAddFilterTag } from '#components/Map/hooks/useFilter'
+import { useItems } from '#components/Map/hooks/useItems'
+import { useLeafletRefs } from '#components/Map/hooks/useLeafletRefs'
+import { useTags } from '#components/Map/hooks/useTags'
+import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
+import { Item } from '#src/types'
+import { decodeTag } from '#utils/FormatTags'
+import { getValue } from '#utils/GetValue'
+import MarkerIconFactory from '#utils/MarkerIconFactory'
+
+import { LocateControl } from './LocateControl'
 import { SidebarControl } from './SidebarControl'
 
 export const SearchControl = () => {
@@ -206,7 +206,7 @@ export const SearchControl = () => {
                   key={Math.random()}
                   onClick={() => {
                     searchInput.current?.blur()
-                    L.marker(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), {
+                    marker(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), {
                       icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', 'point'),
                     })
                       .addTo(map)
@@ -272,7 +272,7 @@ export const SearchControl = () => {
                 <div
                   className='tw-flex tw-flex-row hover:tw-font-bold tw-cursor-pointer'
                   onClick={() => {
-                    L.marker(
+                    marker(
                       new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]),
                       {
                         icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', 'point'),

src/Components/Map/Subcomponents/Controls/TagsControl.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
+import { useFilterTags, useRemoveFilterTag } from '#components/Map/hooks/useFilter'
-import { useFilterTags, useRemoveFilterTag } from '../../hooks/useFilter'
+import { decodeTag } from '#utils/FormatTags'
-import { decodeTag } from '../../../../Utils/FormatTags'
 
 export const TagsControl = () => {
   const filterTags = useFilterTags()

src/Components/Map/Subcomponents/ItemFormPopup.tsx

@@ -7,28 +7,19 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
+import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react'
-import { LatLng } from 'leaflet'
 import { Popup as LeafletPopup, useMap } from 'react-leaflet'
-import { useEffect, useRef, useState } from 'react'
-import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '../hooks/useItems'
-import { Geometry, LayerProps, Item } from '../../../types'
-import { TextAreaInput } from '../../Input/TextAreaInput'
-import { TextInput } from '../../Input/TextInput'
 import { toast } from 'react-toastify'
-import { useResetFilterTags } from '../hooks/useFilter'
-import { hashTagRegex } from '../../../Utils/HashTagRegex'
-import { randomColor } from '../../../Utils/RandomColor'
-import { useAddTag, useTags } from '../hooks/useTags'
-import { useAuth } from '../../Auth'
 
-export interface ItemFormPopupProps {
+import { useAuth } from '#components/Auth/useAuth'
-  position: LatLng
+import { TextAreaInput } from '#components/Input/TextAreaInput'
-  layer: LayerProps
+import { TextInput } from '#components/Input/TextInput'
-  item?: Item
+import { useResetFilterTags } from '#components/Map/hooks/useFilter'
-  children?: React.ReactNode
+import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
-  setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
+import { useAddTag, useTags } from '#components/Map/hooks/useTags'
-}
+import { Geometry, Item, ItemFormPopupProps } from '#src/types'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import { randomColor } from '#utils/RandomColor'
 
 export function ItemFormPopup(props: ItemFormPopupProps) {
   const [spinner, setSpinner] = useState(false)
@@ -168,13 +159,13 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
         )}
 
         {props.children ? (
-          React.Children.toArray(props.children).map((child) =>
+          Children.toArray(props.children).map((child) =>
-            React.isValidElement<{
+            isValidElement<{
               item: Item
               test: string
               setPopupTitle: React.Dispatch<React.SetStateAction<string>>
             }>(child)
-              ? React.cloneElement(child, {
+              ? cloneElement(child, {
                   item: props.item,
                   key: props.position.toString(),
                   setPopupTitle,

src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -9,14 +9,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react'
+import { useState } from 'react'
-import { Item, ItemsApi } from '../../../../types'
-import { useHasUserPermission } from '../../hooks/usePermissions'
-import { getValue } from '../../../../Utils/GetValue'
-import { useAppState } from '../../../AppShell/hooks/useAppState'
-import DialogModal from '../../../Templates/DialogModal'
 import { useNavigate } from 'react-router-dom'
 
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import DialogModal from '#components/Templates/DialogModal'
+import { Item, ItemsApi } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
 export function HeaderView({
   item,
   api,
@@ -48,7 +49,7 @@ export function HeaderView({
   truncateSubname?: boolean
   showAddress?: boolean
 }) {
-  const [modalOpen, setModalOpen] = React.useState<boolean>(false)
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
 
   const hasUserPermission = useHasUserPermission()
   const navigate = useNavigate()
@@ -72,7 +73,7 @@ export function HeaderView({
     ? getValue(item, itemSubnameField)
     : item.layer?.itemSubnameField && item && getValue(item, item.layer.itemSubnameField)
 
-  const [address] = React.useState<string>('')
+  const [address] = useState<string>('')
 
   const params = new URLSearchParams(window.location.search)
 

src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { Link } from 'react-router-dom'
-import { getValue } from '../../../../Utils/GetValue'
+
-import { Item } from '../../../../types'
+import { useGetItemTags } from '#components/Map/hooks/useTags'
-import { useGetItemTags } from '../../hooks/useTags'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
 
 export const PopupButton = ({
   url,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx

@@ -1,4 +1,4 @@
-import { Item } from '../../../../types'
+import { Item } from '#src/types'
 
 export const PopupCheckboxInput = ({
   dataField,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import * as React from 'react'
+import { TextInput } from '#components/Input'
-import { TextInput } from '../../../Input'
+import { Item } from '#src/types'
-import { Item } from '../../../../types'
 
 interface StartEndInputProps {
   item?: Item

src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
+import { TextAreaInput } from '#components/Input'
-import { TextAreaInput } from '../../../Input'
+import { Item } from '#src/types'
-import { Item } from '../../../../types'
 
 export const PopupTextAreaInput = ({
   dataField,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
+import { TextInput } from '#components/Input'
-import { TextInput } from '../../../Input'
+import { Item } from '#src/types'
-import { Item } from '../../../../types'
 
 export const PopupTextInput = ({
   dataField,

src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import * as React from 'react'
+import { Item } from '#src/types'
-import { Item } from '../../../../types'
 
 export const StartEndView = ({ item }: { item?: Item }) => {
   return (

src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx

@@ -7,16 +7,17 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { Item } from '../../../../types'
-import { useTags } from '../../hooks/useTags'
-import { useAddFilterTag } from '../../hooks/useFilter'
-import { hashTagRegex } from '../../../../Utils/HashTagRegex'
-import { fixUrls, mailRegex } from '../../../../Utils/ReplaceURLs'
-import Markdown from 'react-markdown'
-import { getValue } from '../../../../Utils/GetValue'
-import remarkBreaks from 'remark-breaks'
-import { decodeTag } from '../../../../Utils/FormatTags'
 import { memo } from 'react'
+import Markdown from 'react-markdown'
+import remarkBreaks from 'remark-breaks'
+
+import { useAddFilterTag } from '#components/Map/hooks/useFilter'
+import { useTags } from '#components/Map/hooks/useTags'
+import { Item } from '#src/types'
+import { decodeTag } from '#utils/FormatTags'
+import { getValue } from '#utils/GetValue'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import { fixUrls, mailRegex } from '#utils/ReplaceURLs'
 
 export const TextView = ({
   item,

src/Components/Map/Subcomponents/ItemViewPopup.tsx

@@ -7,19 +7,19 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
+import { LatLng } from 'leaflet'
+import { Children, cloneElement, forwardRef, isValidElement, useState } from 'react'
 import { Popup as LeafletPopup, useMap } from 'react-leaflet'
-import { Item } from '../../../types'
+import { useNavigate } from 'react-router-dom'
-import { ItemFormPopupProps } from './ItemFormPopup'
+import { toast } from 'react-toastify'
+
+import { useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
+import { useSetSelectPosition } from '#components/Map/hooks/useSelectPosition'
+import { Item, ItemFormPopupProps } from '#src/types'
+import { timeAgo } from '#utils/TimeAgo'
+
 import { HeaderView } from './ItemPopupComponents/HeaderView'
 import { TextView } from './ItemPopupComponents/TextView'
-import { timeAgo } from '../../../Utils/TimeAgo'
-import { useState } from 'react'
-import { LatLng } from 'leaflet'
-import { useNavigate } from 'react-router-dom'
-import { useRemoveItem, useUpdateItem } from '../hooks/useItems'
-import { toast } from 'react-toastify'
-import { useSetSelectPosition } from '../hooks/useSelectPosition'
 
 export interface ItemViewPopupProps {
   item: Item
@@ -28,9 +28,9 @@ export interface ItemViewPopupProps {
 }
 
 // eslint-disable-next-line react/display-name
-export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: any) => {
+export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) => {
   const map = useMap()
-  const [loading, setLoading] = React.useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false)
   const removeItem = useRemoveItem()
   const updadateItem = useUpdateItem()
   const navigate = useNavigate()
@@ -95,9 +95,9 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a
         />
         <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
           {props.children ? (
-            React.Children.toArray(props.children).map((child) =>
+            Children.toArray(props.children).map((child) =>
-              React.isValidElement<{ item: Item; test: string }>(child)
+              isValidElement<{ item: Item; test: string }>(child)
-                ? React.cloneElement(child, { item: props.item })
+                ? cloneElement(child, { item: props.item })
                 : '',
             )
           ) : (

src/Components/Map/Tags.tsx

@@ -1,9 +1,10 @@
-import * as React from 'react'
 import { useEffect } from 'react'
-import { ItemsApi, Tag } from '../../types'
-import { useSetTagData, useSetTagApi, useTags } from './hooks/useTags'
 import { useLocation } from 'react-router-dom'
+
+import { ItemsApi, Tag } from '#src/types'
+
 import { useAddFilterTag, useFilterTags, useResetFilterTags } from './hooks/useFilter'
+import { useSetTagData, useSetTagApi, useTags } from './hooks/useTags'
 
 export function Tags({ data, api }: { data?: Tag[]; api?: ItemsApi<Tag> }) {
   const setTagData = useSetTagData()

src/Components/Map/UtopiaMap.tsx

@@ -1,6 +1,8 @@
-import { UtopiaMapProps } from '../../types'
+import { ContextWrapper } from '#components/AppShell/ContextWrapper'
-import { ContextWrapper } from '../AppShell/ContextWrapper'
+import { UtopiaMapProps } from '#src/types'
+
 import { UtopiaMapInner } from './UtopiaMapInner'
+// eslint-disable-next-line import/no-unassigned-import
 import 'react-toastify/dist/ReactToastify.css'
 
 function UtopiaMap(props: UtopiaMapProps) {

src/Components/Map/UtopiaMapInner.tsx

@@ -6,37 +6,49 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { TileLayer, MapContainer, useMapEvents, GeoJSON } from 'react-leaflet'
-import 'leaflet/dist/leaflet.css'
-import * as React from 'react'
-import { UtopiaMapProps } from '../../types'
-import './UtopiaMap.css'
 import { LatLng } from 'leaflet'
+import {
+  Children,
+  cloneElement,
+  createRef,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { TileLayer, MapContainer, useMapEvents, GeoJSON } from 'react-leaflet'
+// eslint-disable-next-line import/no-unassigned-import
+import 'leaflet/dist/leaflet.css'
 import MarkerClusterGroup from 'react-leaflet-cluster'
-import AddButton from './Subcomponents/AddButton'
-import { useEffect, useRef, useState } from 'react'
-import { ItemFormPopupProps } from './Subcomponents/ItemFormPopup'
-import { SearchControl } from './Subcomponents/Controls/SearchControl'
-import { Control } from './Subcomponents/Controls/Control'
 import { Outlet } from 'react-router-dom'
-import { TagsControl } from './Subcomponents/Controls/TagsControl'
+import { toast } from 'react-toastify'
+
+import { ItemFormPopupProps, UtopiaMapProps } from '#src/types'
+
+// eslint-disable-next-line import/no-unassigned-import
+import './UtopiaMap.css'
+
+import { useClusterRef, useSetClusterRef } from './hooks/useClusterRef'
+import { useAddVisibleLayer } from './hooks/useFilter'
+import { useLayers } from './hooks/useLayers'
 import {
   useSelectPosition,
   useSetMapClicked,
   useSetSelectPosition,
 } from './hooks/useSelectPosition'
-import { useClusterRef, useSetClusterRef } from './hooks/useClusterRef'
+import AddButton from './Subcomponents/AddButton'
-import { Feature, Geometry as GeoJSONGeometry } from 'geojson'
+import { Control } from './Subcomponents/Controls/Control'
 import { FilterControl } from './Subcomponents/Controls/FilterControl'
-import { LayerControl } from './Subcomponents/Controls/LayerControl'
-import { useLayers } from './hooks/useLayers'
-import { useAddVisibleLayer } from './hooks/useFilter'
 import { GratitudeControl } from './Subcomponents/Controls/GratitudeControl'
-import { SelectPosition } from './Subcomponents/SelectPosition'
+import { LayerControl } from './Subcomponents/Controls/LayerControl'
-import { toast } from 'react-toastify'
+import { SearchControl } from './Subcomponents/Controls/SearchControl'
+import { TagsControl } from './Subcomponents/Controls/TagsControl'
 import { TextView } from './Subcomponents/ItemPopupComponents/TextView'
+import { SelectPosition } from './Subcomponents/SelectPosition'
 
-const mapDivRef = React.createRef()
+import type { Feature, Geometry as GeoJSONGeometry } from 'geojson'
+
+const mapDivRef = createRef()
 
 export function UtopiaMapInner({
   height = '500px',
@@ -147,13 +159,13 @@ export function UtopiaMapInner({
           maxClusterRadius={50}
           removeOutsideVisibleBounds={false}
         >
-          {React.Children.toArray(children).map((child) =>
+          {Children.toArray(children).map((child) =>
-            React.isValidElement<{
+            isValidElement<{
               setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>
               itemFormPopup: ItemFormPopupProps | null
               clusterRef: React.MutableRefObject<undefined>
             }>(child)
-              ? React.cloneElement(child, { setItemFormPopup, itemFormPopup, clusterRef })
+              ? cloneElement(child, { setItemFormPopup, itemFormPopup, clusterRef })
               : child,
           )}
         </MarkerClusterGroup>

src/Components/Map/hooks/useClusterRef.tsx

@@ -1,7 +1,7 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
 import { createContext, useContext, useState } from 'react'
 
 type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>

src/Components/Map/hooks/useDebounce.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useEffect } from 'react'
+
 import { useTimeout } from './useTimeout'
 
 export const useDebounce = (callback, delay, deps) => {

src/Components/Map/hooks/useFilter.tsx

@@ -1,13 +1,15 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable no-case-declarations */
-import { useCallback, useReducer, createContext, useContext } from 'react'
+import { useCallback, useReducer, createContext, useContext, useState } from 'react'
-import * as React from 'react'
-import { LayerProps, Tag } from '../../../types'
-import { useLayers } from './useLayers'
 import { useNavigate } from 'react-router-dom'
+
+import { LayerProps, Tag } from '#src/types'
+
+import { useLayers } from './useLayers'
 import useWindowDimensions from './useWindowDimension'
 
 type ActionType =
@@ -118,7 +120,7 @@ function useFilterManager(initialTags: Tag[]): {
     [],
   )
 
-  const [searchPhrase, searchPhraseSet] = React.useState<string>('')
+  const [searchPhrase, searchPhraseSet] = useState<string>('')
 
   const addFilterTag = useCallback((tag: Tag) => {
     const params = new URLSearchParams(location.search)

src/Components/Map/hooks/useItems.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/require-await */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
@@ -7,9 +8,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { useCallback, useReducer, createContext, useContext, useState } from 'react'
-import * as React from 'react'
-import { Item, LayerProps } from '../../../types'
 import { toast } from 'react-toastify'
+
+import { Item, LayerProps } from '#src/types'
+
 import { useAddLayer } from './useLayers'
 
 type ActionType =

src/Components/Map/hooks/useLayers.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useReducer, createContext, useContext } from 'react'
-import * as React from 'react'
+
-import { LayerProps } from '../../../types'
+import { LayerProps } from '#src/types'
 
 interface ActionType {
   type: 'ADD LAYER'

src/Components/Map/hooks/useLeafletRefs.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { useCallback, useReducer, createContext, useContext } from 'react'
-import * as React from 'react'
-import { Item } from '../../../types'
 import { Marker, Popup } from 'leaflet'
+import { useCallback, useReducer, createContext, useContext } from 'react'
+
+import { Item } from '#src/types'
 
 interface LeafletRef {
   item: Item

src/Components/Map/hooks/usePermissions.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -6,10 +7,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useReducer, createContext, useContext } from 'react'
+import { useCallback, useReducer, createContext, useContext, useState } from 'react'
-import * as React from 'react'
+
-import { Item, ItemsApi, LayerProps, Permission, PermissionAction } from '../../../types'
+import { useAuth } from '#components/Auth/useAuth'
-import { useAuth } from '../../Auth'
+import { Item, ItemsApi, LayerProps, Permission, PermissionAction } from '#src/types'
 
 type ActionType = { type: 'ADD'; permission: Permission } | { type: 'REMOVE'; id: string }
 
@@ -51,7 +52,7 @@ function usePermissionsManager(initialPermissions: Permission[]): {
     }
   }, initialPermissions)
 
-  const [adminRole, setAdminRole] = React.useState<string | null>(null)
+  const [adminRole, setAdminRole] = useState<string | null>(null)
   const { user } = useAuth()
 
   const setPermissionApi = useCallback(async (api: ItemsApi<Permission>) => {

src/Components/Map/hooks/useSelectPosition.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -7,14 +8,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import * as React from 'react'
-import { createContext, useContext, useEffect, useState } from 'react'
-import { Geometry, Item, LayerProps } from '../../../types'
-import { useUpdateItem } from './useItems'
-import { toast } from 'react-toastify'
-import { useHasUserPermission } from './usePermissions'
 import { LatLng } from 'leaflet'
-import { ItemFormPopupProps } from '../Subcomponents/ItemFormPopup'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+
+import { Geometry, Item, LayerProps, ItemFormPopupProps } from '#src/types'
+
+import { useUpdateItem } from './useItems'
+import { useHasUserPermission } from './usePermissions'
 
 interface PolygonClickedProps {
   position: LatLng

src/Components/Map/hooks/useTags.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -9,10 +10,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useCallback, useReducer, createContext, useContext, useState } from 'react'
-import * as React from 'react'
+
-import { Item, ItemsApi, Tag } from '../../../types'
+import { Item, ItemsApi, Tag } from '#src/types'
-import { hashTagRegex } from '../../../Utils/HashTagRegex'
+import { getValue } from '#utils/GetValue'
-import { getValue } from '../../../Utils/GetValue'
+import { hashTagRegex } from '#utils/HashTagRegex'
 
 type ActionType = { type: 'ADD'; tag: Tag } | { type: 'REMOVE'; id: string }
 
@@ -55,7 +56,7 @@ function useTagsManager(initialTags: Tag[]): {
     }
   }, initialTags)
 
-  const [api, setApi] = React.useState<ItemsApi<Tag>>({} as ItemsApi<Tag>)
+  const [api, setApi] = useState<ItemsApi<Tag>>({} as ItemsApi<Tag>)
 
   const setTagApi = useCallback(async (api: ItemsApi<Tag>) => {
     setApi(api)

src/Components/Map/setItemLocation.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+
 import { useMap } from 'react-leaflet'
 
 export const setItemLocation = () => {

src/Components/Profile/ProfileForm.tsx

@@ -5,23 +5,25 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { useItems, useUpdateItem, useAddItem } from '../Map/hooks/useItems'
 import { useEffect, useState } from 'react'
-import { getValue } from '../../Utils/GetValue'
-import { useAuth } from '../Auth'
-import { useAddTag, useGetItemTags, useTags } from '../Map/hooks/useTags'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Item, Tag } from '../../types'
+
-import { MapOverlayPage } from '../Templates'
+import { useAppState } from '#components/AppShell/hooks/useAppState'
-import { useLayers } from '../Map/hooks/useLayers'
+import { useAuth } from '#components/Auth'
-import { useHasUserPermission } from '../Map/hooks/usePermissions'
+import { useItems, useUpdateItem, useAddItem } from '#components/Map/hooks/useItems'
-import { OnepagerForm } from './Templates/OnepagerForm'
+import { useLayers } from '#components/Map/hooks/useLayers'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import { useAddTag, useGetItemTags, useTags } from '#components/Map/hooks/useTags'
+import { MapOverlayPage } from '#components/Templates'
+import { Item, Tag } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
 import { linkItem, onUpdateItem, unlinkItem } from './itemFunctions'
+import { FormHeader } from './Subcomponents/FormHeader'
+import { FlexForm } from './Templates/FlexForm'
+import { OnepagerForm } from './Templates/OnepagerForm'
 import { SimpleForm } from './Templates/SimpleForm'
 import { TabsForm } from './Templates/TabsForm'
-import { FormHeader } from './Subcomponents/FormHeader'
-import { useAppState } from '../AppShell/hooks/useAppState'
-import { FlexForm } from './Templates/FlexForm'
 
 export function ProfileForm() {
   const [state, setState] = useState({

src/Components/Profile/ProfileView.tsx

@@ -7,26 +7,28 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { MapOverlayPage } from '../Templates'
-import { useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useEffect, useState } from 'react'
-import { Item, ItemsApi, Tag } from '../../types'
-import { useMap } from 'react-leaflet'
 import { LatLng } from 'leaflet'
-import { useHasUserPermission } from '../Map/hooks/usePermissions'
+import { useEffect, useState } from 'react'
-import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'
+import { useMap } from 'react-leaflet'
-import { useSelectPosition, useSetSelectPosition } from '../Map/hooks/useSelectPosition'
+import { useLocation, useNavigate } from 'react-router-dom'
-import { useClusterRef } from '../Map/hooks/useClusterRef'
+
-import { useLeafletRefs } from '../Map/hooks/useLeafletRefs'
+import { useAppState } from '#components/AppShell/hooks/useAppState'
-import { getValue } from '../../Utils/GetValue'
+import { useClusterRef } from '#components/Map/hooks/useClusterRef'
-import { TabsView } from './Templates/TabsView'
+import { useItems, useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
+import { useLeafletRefs } from '#components/Map/hooks/useLeafletRefs'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import { useSelectPosition, useSetSelectPosition } from '#components/Map/hooks/useSelectPosition'
+import { useTags } from '#components/Map/hooks/useTags'
+import { HeaderView } from '#components/Map/Subcomponents/ItemPopupComponents/HeaderView'
+import { MapOverlayPage } from '#components/Templates'
+import { Item, ItemsApi, Tag } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
+import { handleDelete, linkItem, unlinkItem } from './itemFunctions'
+import { FlexView } from './Templates/FlexView'
 import { OnepagerView } from './Templates/OnepagerView'
 import { SimpleView } from './Templates/SimpleView'
-import { handleDelete, linkItem, unlinkItem } from './itemFunctions'
+import { TabsView } from './Templates/TabsView'
-import { useTags } from '../Map/hooks/useTags'
-import { FlexView } from './Templates/FlexView'
-import { useAppState } from '../AppShell/hooks/useAppState'
 
 export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any> }) {
   const [item, setItem] = useState<Item>()

src/Components/Profile/Subcomponents/ActionsButton.tsx

@@ -3,14 +3,15 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from 'react'
-import { useHasUserPermission } from '../../Map/hooks/usePermissions'
+
-import DialogModal from '../../Templates/DialogModal'
+import { TextInput } from '#components/Input'
-import { useItems } from '../../Map/hooks/useItems'
+import { useItems } from '#components/Map/hooks/useItems'
-import { HeaderView } from '../../Map/Subcomponents/ItemPopupComponents/HeaderView'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
-import { Item } from '../../../types'
+import { useGetItemTags } from '#components/Map/hooks/useTags'
-import { TextInput } from '../../Input'
+import { HeaderView } from '#components/Map/Subcomponents/ItemPopupComponents/HeaderView'
-import { getValue } from '../../../Utils/GetValue'
+import DialogModal from '#components/Templates/DialogModal'
-import { useGetItemTags } from '../../Map/hooks/useTags'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
 
 export function ActionButton({
   item,

src/Components/Profile/Subcomponents/AvatarWidget.tsx

@@ -1,14 +1,18 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import * as React from 'react'
 import { useState, useCallback, useRef } from 'react'
-import ReactCrop, { Crop, centerCrop, makeAspectCrop } from 'react-image-crop'
+import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
-import { useAppState } from '../../AppShell/hooks/useAppState'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+// eslint-disable-next-line import/no-unassigned-import
 import 'react-image-crop/dist/ReactCrop.css'
-import DialogModal from '../../Templates/DialogModal'
+import DialogModal from '#components/Templates/DialogModal'
+
+import type { Crop } from 'react-image-crop'
 
 interface AvatarWidgetProps {
   avatar: string

src/Components/Profile/Subcomponents/ColorPicker.tsx

@@ -3,10 +3,11 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useCallback, useEffect, useRef, useState } from 'react'
-import * as React from 'react'
 import { HexColorPicker } from 'react-colorful'
+
+// eslint-disable-next-line import/no-unassigned-import
 import './ColorPicker.css'
-import useClickOutside from '../hooks/useClickOutside'
+import useClickOutside from '#components/Profile/hooks/useClickOutside'
 
 // eslint-disable-next-line react/prop-types
 export const ColorPicker = ({ color, onChange, className }) => {
@@ -16,7 +17,7 @@ export const ColorPicker = ({ color, onChange, className }) => {
   const close = useCallback(() => toggle(false), [])
   useClickOutside(popover, close)
 
-  const colorPickerRef = React.useRef<HTMLDivElement>(null)
+  const colorPickerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     // Füge dem Color-Picker explizit Event-Listener hinzu

src/Components/Profile/Subcomponents/ContactInfoForm.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as React from 'react'
+import { TextInput } from '#components/Input'
-import { TextInput } from '../../Input'
+import { FormState } from '#src/types'
-import { FormState } from '../Templates/OnepagerForm'
 
 export const ContactInfoForm = ({
   state,

src/Components/Profile/Subcomponents/ContactInfoView.tsx

@@ -3,11 +3,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
-import { Link } from 'react-router-dom'
-import { useAppState } from '../../AppShell/hooks/useAppState'
-import { Item } from '../../../types'
 import { useEffect, useState } from 'react'
-import { useItems } from '../../Map/hooks/useItems'
+import { Link } from 'react-router-dom'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useItems } from '#components/Map/hooks/useItems'
+import { Item } from '#src/types'
 
 export const ContactInfoView = ({ item, heading }: { item: Item; heading: string }) => {
   const appState = useAppState()

src/Components/Profile/Subcomponents/FormHeader.tsx

@@ -3,7 +3,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable react/prop-types */
-import { TextInput } from '../../Input'
+import { TextInput } from '#components/Input'
+
 import { AvatarWidget } from './AvatarWidget'
 import { ColorPicker } from './ColorPicker'
 

src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx

@@ -1,4 +1,5 @@
-import { Item } from '../../../types'
+import { Item } from '#src/types'
+
 import SocialShareBar from './SocialShareBar'
 
 export const GroupSubHeaderView = ({

src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as React from 'react'
-import ComboBoxInput from '../../Input/ComboBoxInput'
-import { Item } from '../../../types'
 import { useEffect } from 'react'
-import { FormState } from '../Templates/OnepagerForm'
+
+import ComboBoxInput from '#components/Input/ComboBoxInput'
+import { Item, FormState } from '#src/types'
 
 interface groupType {
   groupTypes_id: {

src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx

@@ -6,9 +6,10 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useEffect } from 'react'
-import { getValue } from '../../../Utils/GetValue'
+
-import { Item } from '../../../types'
+import { useAppState } from '#components/AppShell/hooks/useAppState'
-import { useAppState } from '../../AppShell/hooks/useAppState'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
 
 export function LinkedItemsHeaderView({
   item,

src/Components/Profile/Subcomponents/PlusButton.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { LayerProps } from '../../../types'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
-import { useHasUserPermission } from '../../Map/hooks/usePermissions'
+import { LayerProps } from '#src/types'
 
 export function PlusButton({
   layer,

src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as React from 'react'
+import { PopupStartEndInput } from '#components/Map'
-import { PopupStartEndInput } from '../../Map'
+import { Item } from '#src/types'
-import { Item } from '../../../types'
 
 export const ProfileStartEndForm = ({
   item,

src/Components/Profile/Subcomponents/ProfileStartEndView.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
+import { StartEndView } from '#components/Map'
-import { StartEndView } from '../../Map'
+import { Item } from '#src/types'
-import { Item } from '../../../types'
 
 export const ProfileStartEndView = ({ item }: { item: Item }) => {
   return (

src/Components/Profile/Subcomponents/ProfileTextForm.tsx

@@ -2,12 +2,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
-import { TextAreaInput } from '../../Input'
-import { FormState } from '../Templates/OnepagerForm'
-import { getValue } from '../../../Utils/GetValue'
 import { useEffect, useState } from 'react'
 
+import { TextAreaInput } from '#components/Input'
+import { FormState } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
 export const ProfileTextForm = ({
   state,
   setState,

src/Components/Profile/Subcomponents/ProfileTextView.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { Item } from '../../../types'
+import { TextView } from '#components/Map'
-import { getValue } from '../../../Utils/GetValue'
+import { Item } from '#src/types'
-import { TextView } from '../../Map'
+import { getValue } from '#utils/GetValue'
 
 export const ProfileTextView = ({
   item,

src/Components/Profile/Subcomponents/SocialShareBar.tsx

@@ -1,4 +1,5 @@
 import { toast } from 'react-toastify'
+
 import SocialShareButton from './SocialShareButton'
 
 const SocialShareBar = ({

src/Components/Profile/Subcomponents/SocialShareButton.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
+
-import * as React from 'react'
+import { cloneElement } from 'react'
 
 const platformConfigs = {
   facebook: {
@@ -106,7 +106,7 @@ const SocialShareButton = ({
       }}
       title={`share link on ${platform}`}
     >
-      {React.cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })}
+      {cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })}
     </a>
   )
 }

src/Components/Profile/Subcomponents/TagsWidget.tsx

@@ -4,13 +4,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
 import { useEffect, useState } from 'react'
-import { useTags } from '../../Map/hooks/useTags'
+
-import { Tag } from '../../../types'
+import { Autocomplete } from '#components/Input/Autocomplete'
-import { Autocomplete } from '../../Input/Autocomplete'
+import { useTags } from '#components/Map/hooks/useTags'
-import { randomColor } from '../../../Utils/RandomColor'
+import { Tag } from '#src/types'
-import { decodeTag, encodeTag } from '../../../Utils/FormatTags'
+import { decodeTag, encodeTag } from '#utils/FormatTags'
+import { randomColor } from '#utils/RandomColor'
 
 // eslint-disable-next-line react/prop-types
 export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate }) => {

src/Components/Profile/Templates/FlexForm.tsx

@@ -2,13 +2,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
+
-import { Item } from '../../../types'
+import { ContactInfoForm } from '#components/Profile/Subcomponents/ContactInfoForm'
-import { FormState } from './OnepagerForm'
+import { GroupSubheaderForm } from '#components/Profile/Subcomponents/GroupSubheaderForm'
-import { GroupSubheaderForm } from '../Subcomponents/GroupSubheaderForm'
+import { ProfileStartEndForm } from '#components/Profile/Subcomponents/ProfileStartEndForm'
-import { ContactInfoForm } from '../Subcomponents/ContactInfoForm'
+import { ProfileTextForm } from '#components/Profile/Subcomponents/ProfileTextForm'
-import { ProfileTextForm } from '../Subcomponents/ProfileTextForm'
+import { Item, FormState } from '#src/types'
-import { ProfileStartEndForm } from '../Subcomponents/ProfileStartEndForm'
 
 const componentMap = {
   groupSubheaders: GroupSubheaderForm,

src/Components/Profile/Templates/FlexView.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { GroupSubHeaderView } from '../Subcomponents/GroupSubHeaderView'
+
-import { ProfileTextView } from '../Subcomponents/ProfileTextView'
+import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView'
-import { ContactInfoView } from '../Subcomponents/ContactInfoView'
+import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
-import { Item } from '../../../types'
+import { ProfileStartEndView } from '#components/Profile/Subcomponents/ProfileStartEndView'
-import { ProfileStartEndView } from '../Subcomponents/ProfileStartEndView'
+import { ProfileTextView } from '#components/Profile/Subcomponents/ProfileTextView'
+import { Item } from '#src/types'
 
 const componentMap = {
   groupSubheaders: GroupSubHeaderView,

src/Components/Profile/Templates/OnepagerForm.tsx

@@ -1,28 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as React from 'react'
+import { TextAreaInput } from '#components/Input'
-import { Item, Tag } from '../../../types'
+import { ContactInfoForm } from '#components/Profile/Subcomponents/ContactInfoForm'
-import { TextAreaInput } from '../../Input'
+import { GroupSubheaderForm } from '#components/Profile/Subcomponents/GroupSubheaderForm'
-import { GroupSubheaderForm } from '../Subcomponents/GroupSubheaderForm'
+import { FormState, Item } from '#src/types'
-import { ContactInfoForm } from '../Subcomponents/ContactInfoForm'
-
-export interface FormState {
-  color: string
-  id: string
-  group_type: string
-  status: string
-  name: string
-  subname: string
-  text: string
-  contact: string
-  telephone: string
-  next_appointment: string
-  image: string
-  marker_icon: string
-  offers: Tag[]
-  needs: Tag[]
-  relations: Item[]
-}
 
 export const OnepagerForm = ({
   item,

src/Components/Profile/Templates/OnepagerView.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { Item } from '../../../types'
+import { TextView } from '#components/Map'
-import { TextView } from '../../Map'
+import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView'
-import { ContactInfoView } from '../Subcomponents/ContactInfoView'
+import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
-import { GroupSubHeaderView } from '../Subcomponents/GroupSubHeaderView'
+import { Item } from '#src/types'
 
 export const OnepagerView = ({ item }: { item: Item }) => {
   return (

src/Components/Profile/Templates/SimpleForm.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { TextAreaInput } from '../../Input'
+import { TextAreaInput } from '#components/Input'
 
 // eslint-disable-next-line react/prop-types
 export const SimpleForm = ({ state, setState }) => {

src/Components/Profile/Templates/SimpleView.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
+import { TextView } from '#components/Map'
-import { TextView } from '../../Map'
+import { Item } from '#src/types'
-import { Item } from '../../../types'
 
 export const SimpleView = ({ item }: { item: Item }) => {
   return (

src/Components/Profile/Templates/TabsForm.tsx

@@ -7,13 +7,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable react/prop-types */
 import { useCallback, useEffect, useState } from 'react'
-import { TextAreaInput } from '../../Input'
-import { PopupStartEndInput, TextView } from '../../Map'
-import { ActionButton } from '../Subcomponents/ActionsButton'
-import { LinkedItemsHeaderView } from '../Subcomponents/LinkedItemsHeaderView'
-import { TagsWidget } from '../Subcomponents/TagsWidget'
 import { useNavigate } from 'react-router-dom'
-import { useUpdateItem } from '../../Map/hooks/useItems'
+
+import { TextAreaInput } from '#components/Input'
+import { PopupStartEndInput, TextView } from '#components/Map'
+import { useUpdateItem } from '#components/Map/hooks/useItems'
+import { ActionButton } from '#components/Profile/Subcomponents/ActionsButton'
+import { LinkedItemsHeaderView } from '#components/Profile/Subcomponents/LinkedItemsHeaderView'
+import { TagsWidget } from '#components/Profile/Subcomponents/TagsWidget'
 
 export const TabsForm = ({
   item,

src/Components/Profile/Templates/TabsView.tsx

@@ -6,17 +6,18 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { StartEndView, TextView } from '../../Map'
-import { TagView } from '../../Templates/TagView'
-import { LinkedItemsHeaderView } from '../Subcomponents/LinkedItemsHeaderView'
-import { ActionButton } from '../Subcomponents/ActionsButton'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { useAddFilterTag } from '../../Map/hooks/useFilter'
-import { Item, Tag } from '../../../types'
 import { Link, useNavigate } from 'react-router-dom'
-import { useItems } from '../../Map/hooks/useItems'
+
-import { useAppState } from '../../AppShell/hooks/useAppState'
+import { useAppState } from '#components/AppShell/hooks/useAppState'
-import { timeAgo } from '../../../Utils/TimeAgo'
+import { StartEndView, TextView } from '#components/Map'
+import { useAddFilterTag } from '#components/Map/hooks/useFilter'
+import { useItems } from '#components/Map/hooks/useItems'
+import { ActionButton } from '#components/Profile/Subcomponents/ActionsButton'
+import { LinkedItemsHeaderView } from '#components/Profile/Subcomponents/LinkedItemsHeaderView'
+import { TagView } from '#components/Templates/TagView'
+import { Item, Tag } from '#src/types'
+import { timeAgo } from '#utils/TimeAgo'
 
 export const TabsView = ({
   attestations,

src/Components/Profile/UserSettings.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import * as React from 'react'
+import { useEffect, useState } from 'react'
-import { MapOverlayPage } from '../Templates'
 import { useNavigate } from 'react-router-dom'
-import { useState } from 'react'
-import { UserItem } from '../../types'
 import { toast } from 'react-toastify'
-import { useAuth } from '../Auth'
+
-import { TextInput } from '../Input'
+import { useAuth } from '#components/Auth'
+import { TextInput } from '#components/Input'
+import { MapOverlayPage } from '#components/Templates'
+import { UserItem } from '#src/types'
 
 export function UserSettings() {
   const { user, updateUser, loading /* token */ } = useAuth()
@@ -21,7 +21,7 @@ export function UserSettings() {
 
   const navigate = useNavigate()
 
-  React.useEffect(() => {
+  useEffect(() => {
     setId(user?.id ? user.id : '')
     setEmail(user?.email ? user.email : '')
     setPassword(user?.password ? user.password : '')

src/Components/Profile/itemFunctions.ts

@@ -9,13 +9,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
-import { Item } from '../../types'
-import { encodeTag } from '../../Utils/FormatTags'
-import { hashTagRegex } from '../../Utils/HashTagRegex'
-import { randomColor } from '../../Utils/RandomColor'
 import { toast } from 'react-toastify'
 
+import { Item } from '#src/types'
+import { encodeTag } from '#utils/FormatTags'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import { randomColor } from '#utils/RandomColor'
+
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
 export const submitNewItem = async (

src/Components/Templates/AttestationForm.tsx

@@ -7,16 +7,17 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
-import { MapOverlayPage } from './MapOverlayPage'
-import { useItems } from '../Map/hooks/useItems'
-import { useAppState } from '../AppShell/hooks/useAppState'
-import { EmojiPicker } from './EmojiPicker'
-import { useNavigate } from 'react-router-dom'
 import { useRef, useState, useEffect } from 'react'
-import { Item, ItemsApi } from '../../types'
+import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useItems } from '#components/Map/hooks/useItems'
+import { Item, ItemsApi } from '#src/types'
+
+import { EmojiPicker } from './EmojiPicker'
+import { MapOverlayPage } from './MapOverlayPage'
+
 export const AttestationForm = ({ api }: { api?: ItemsApi<any> }) => {
   const items = useItems()
   const appState = useAppState()

src/Components/Templates/CardPage.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import * as React from 'react'
+
 import { TitleCard } from './TitleCard'
 
 export function CardPage({

src/Components/Templates/DateUserInfo.tsx

@@ -4,8 +4,9 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 import { useState } from 'react'
-import { timeAgo } from '../../Utils/TimeAgo'
+
-import { Item } from '../../types'
+import { Item } from '#src/types'
+import { timeAgo } from '#utils/TimeAgo'
 
 export const DateUserInfo = ({ item }: { item: Item }) => {
   const [infoExpanded, setInfoExpanded] = useState<boolean>(false)

src/Components/Templates/DialogModal.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { MouseEvent, useEffect, useRef } from 'react'
 
 const isClickInsideRectangle = (e: MouseEvent, element: HTMLElement) => {

src/Components/Templates/ItemCard.tsx

@@ -4,13 +4,15 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { DateUserInfo } from './DateUserInfo'
-import { StartEndView, TextView } from '../Map'
-import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'
-import { Item } from '../../types'
 import { useNavigate } from 'react-router-dom'
-import { getValue } from '../../Utils/GetValue'
+
-import useWindowDimensions from '../Map/hooks/useWindowDimension'
+import { StartEndView, TextView } from '#components/Map'
+import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
+import { HeaderView } from '#components/Map/Subcomponents/ItemPopupComponents/HeaderView'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
+import { DateUserInfo } from './DateUserInfo'
 
 export const ItemCard = ({
   i,

src/Components/Templates/MapOverlayPage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import * as L from 'leaflet'
+import { DomEvent } from 'leaflet'
-import * as React from 'react'
+import { createRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 export function MapOverlayPage({
@@ -20,17 +20,17 @@ export function MapOverlayPage({
 
   const navigate = useNavigate()
 
-  const overlayRef = React.createRef<HTMLDivElement>()
+  const overlayRef = createRef<HTMLDivElement>()
-  const backdropRef = React.createRef<HTMLDivElement>()
+  const backdropRef = createRef<HTMLDivElement>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (overlayRef.current !== null) {
-      L.DomEvent.disableClickPropagation(overlayRef.current)
+      DomEvent.disableClickPropagation(overlayRef.current)
-      L.DomEvent.disableScrollPropagation(overlayRef.current)
+      DomEvent.disableScrollPropagation(overlayRef.current)
     }
     if (backdropRef.current !== null && backdrop) {
-      L.DomEvent.disableClickPropagation(backdropRef.current)
+      DomEvent.disableClickPropagation(backdropRef.current)
-      L.DomEvent.disableScrollPropagation(backdropRef.current)
+      DomEvent.disableScrollPropagation(backdropRef.current)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overlayRef, backdropRef])

src/Components/Templates/MarketView.tsx

@@ -4,13 +4,15 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { useEffect, useState } from 'react'
-import { useItems } from '../Map/hooks/useItems'
+import { useNavigate } from 'react-router-dom'
-import { Tag } from '../../types'
+
-import { useTags } from '../Map/hooks/useTags'
+import { useItems } from '#components/Map/hooks/useItems'
-import { getValue } from '../../Utils/GetValue'
+import { useTags } from '#components/Map/hooks/useTags'
+import { Tag } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
 import { MapOverlayPage } from './MapOverlayPage'
 import { TagView } from './TagView'
-import { useNavigate } from 'react-router-dom'
 
 function groupAndCount(arr) {
   const grouped = arr.reduce((acc, obj) => {

src/Components/Templates/MoonCalendar.tsx

@@ -1,10 +1,11 @@
-import * as React from 'react'
-import { useState } from 'react'
-import { add, format, parse, startOfToday, sub } from 'date-fns'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
-import { MapOverlayPage } from './MapOverlayPage'
+import { add, format, parse, startOfToday, sub } from 'date-fns'
+import { useState } from 'react'
+
+import { LUNAR_MONTH, getLastNewMoon, getNextNewMoon } from '#utils/Moon'
+
 import { CircleLayout } from './CircleLayout'
-import { LUNAR_MONTH, getLastNewMoon, getNextNewMoon } from '../../Utils/Moon'
+import { MapOverlayPage } from './MapOverlayPage'
 
 export const MoonCalendar = () => {
   const today = startOfToday()

src/Components/Templates/OverlayItemsIndexPage.tsx

@@ -6,23 +6,25 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { useEffect, useRef, useState } from 'react'
-import { Item } from '../../types'
-import { PopupStartEndInput } from '../Map'
-import { PlusButton } from '../Profile/Subcomponents/PlusButton'
-import { TextInput, TextAreaInput } from '../Input'
-import { useAddTag, useGetItemTags, useTags } from '../Map/hooks/useTags'
 import { toast } from 'react-toastify'
-import { hashTagRegex } from '../../Utils/HashTagRegex'
+
-import { randomColor } from '../../Utils/RandomColor'
+import { useAuth } from '#components/Auth/useAuth'
-import { useAuth } from '../Auth'
+import { TextInput, TextAreaInput } from '#components/Input'
-import { useLayers } from '../Map/hooks/useLayers'
+import { PopupStartEndInput } from '#components/Map'
-import { MapOverlayPage } from './MapOverlayPage'
+import { useFilterTags } from '#components/Map/hooks/useFilter'
-import { useAddItem, useItems, useRemoveItem } from '../Map/hooks/useItems'
+import { useAddItem, useItems, useRemoveItem } from '#components/Map/hooks/useItems'
+import { useLayers } from '#components/Map/hooks/useLayers'
+import { useAddTag, useGetItemTags, useTags } from '#components/Map/hooks/useTags'
+import { Control } from '#components/Map/Subcomponents/Controls/Control'
+import { SearchControl } from '#components/Map/Subcomponents/Controls/SearchControl'
+import { TagsControl } from '#components/Map/Subcomponents/Controls/TagsControl'
+import { PlusButton } from '#components/Profile/Subcomponents/PlusButton'
+import { Item } from '#src/types'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import { randomColor } from '#utils/RandomColor'
+
 import { ItemCard } from './ItemCard'
-import { Control } from '../Map/Subcomponents/Controls/Control'
+import { MapOverlayPage } from './MapOverlayPage'
-import { SearchControl } from '../Map/Subcomponents/Controls/SearchControl'
-import { TagsControl } from '../Map/Subcomponents/Controls/TagsControl'
-import { useFilterTags } from '../Map/hooks/useFilter'
 
 export const OverlayItemsIndexPage = ({
   url,