Merged in fix/linting (pull request #2708)

Fix/linting

* fix import issues and add lint check no-extraneous-dependencies
* fix use type HotelType instead of string

Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/HotelPin/index.tsx

@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl'
 
 import { formatPrice } from '@scandic-hotels/common/utils/numberFormatting'
-import { MaterialIcon } from '@scandic-hotels/design-system/Icons/MaterialIcon'
-import { Typography } from '@scandic-hotels/design-system/Typography'
+import { MaterialIcon } from '../../../../Icons/MaterialIcon'
+import { Typography } from '../../../../Typography'
 
 import HotelMarker from '../../../Markers/HotelMarker'
 
@@ -15,7 +15,7 @@ interface HotelPinProps {
   hotelAdditionalPrice?: number
   hotelAdditionalCurrency?: string
 }
-
+const NOT_AVAILABLE = '-'
 export function HotelPin({
   isActive,
   hotelPrice,
@@ -45,7 +45,7 @@ export function HotelPin({
       <Typography variant="Body/Paragraph/mdRegular">
         <p>
           {isNotAvailable
-            ? '—'
+            ? NOT_AVAILABLE
             : formatPrice(
                 intl,
                 hotelPrice,

packages/design-system/lib/components/Map/InteractiveMap/PoiMapMarkers/index.tsx

@@ -4,15 +4,13 @@ import {
 } from '@vis.gl/react-google-maps'
 import { useIntl } from 'react-intl'
 
-import { Typography } from '@scandic-hotels/design-system/Typography'
+import { Typography } from '../../../Typography'
 
 import { HotelMarkerByType } from '../../Markers/HotelMarkerByType'
 import { PoiMarker } from '../../Markers/PoiMarker'
 
 import styles from './poiMapMarkers.module.css'
-
-import type { PointOfInterest } from '@scandic-hotels/trpc/types/hotel'
-import type { MarkerInfo } from '@scandic-hotels/trpc/types/marker'
+import { MarkerInfo, PointOfInterest } from '../../types'
 
 export type PoiMapMarkersProps = {
   activePoi?: string | null

packages/design-system/lib/components/Map/InteractiveMap/index.tsx

@@ -4,8 +4,8 @@ import { Map, type MapProps, useMap } from '@vis.gl/react-google-maps'
 import { useEffect, useState } from 'react'
 import { useIntl } from 'react-intl'
 
-import { IconButton } from '@scandic-hotels/design-system/IconButton'
-import { MaterialIcon } from '@scandic-hotels/design-system/Icons/MaterialIcon'
+import { IconButton } from '../../IconButton'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
 
 import {
   DEFAULT_ZOOM,
@@ -21,9 +21,7 @@ import PoiMapMarkers from './PoiMapMarkers'
 
 import styles from './interactiveMap.module.css'
 
-import type { PointOfInterest } from '@scandic-hotels/trpc/types/hotel'
-import type { MarkerInfo } from '@scandic-hotels/trpc/types/marker'
-import { HotelPin } from '../types'
+import { HotelPin, MarkerInfo, PointOfInterest } from '../types'
 import { Lang } from '@scandic-hotels/common/constants/language'
 
 export type InteractiveMapProps = {
@@ -32,7 +30,7 @@ export type InteractiveMapProps = {
     lat: number
     lng: number
   }
-  activePoi?: PointOfInterest['name'] | null
+  activePoi?: string | null
   hotelPins?: HotelPin[]
   pointsOfInterest?: PointOfInterest[]
   markerInfo?: MarkerInfo
@@ -44,7 +42,7 @@ export type InteractiveMapProps = {
 
   isUserLoggedIn: boolean
   onTilesLoaded?: () => void
-  onActivePoiChange?: (poi: PointOfInterest['name'] | null) => void
+  onActivePoiChange?: (poi: string | null) => void
 
   onClickHotel?: (hotelId: string) => void
 

packages/design-system/lib/components/Map/Markers/HotelMarkerByType.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { HotelMarkerByType } from './HotelMarkerByType'
 import { SignatureHotelEnum } from '@scandic-hotels/common/constants/signatureHotels'
-import { Typography } from 'lib/components/Typography'
+import { Typography } from '../../Typography'
 
 const meta: Meta<typeof HotelMarkerByType> = {
   title: 'Components/Map/Hotel Marker By Type',
@@ -48,7 +48,7 @@ type Story = StoryObj<typeof HotelMarkerByType>
 export const PrimaryDefault: Story = {
   args: {
     hotelId: 'Other',
-    hotelType: 'Regular',
+    hotelType: 'regular',
     size: 'large',
   },
 }
@@ -56,7 +56,7 @@ export const PrimaryDefault: Story = {
 export const ScandicGo: Story = {
   args: {
     hotelId: 'Other',
-    hotelType: 'Scandic Go',
+    hotelType: 'scandicgo',
     size: 'large',
   },
   argTypes: {
@@ -76,7 +76,7 @@ export const ScandicGo: Story = {
 export const Signature: Story = {
   args: {
     hotelId: 'DowntownCamper',
-    hotelType: 'Signature',
+    hotelType: 'signature',
     size: 'large',
   },
   argTypes: {
@@ -100,7 +100,7 @@ const exampleMarkers = [
   {
     name: 'Default',
     hotelId: 'Other',
-    hotelType: 'Regular',
+    hotelType: 'regular',
   },
   {
     name: 'Scandic Go',

packages/design-system/lib/components/Map/Markers/HotelMarkerByType.tsx

@@ -1,5 +1,3 @@
-import { HotelTypeEnum } from '@scandic-hotels/trpc/enums/hotelType'
-
 import { DowntownCamperMarker } from './HotelMarker/SignatureHotel/DowntownCamper'
 import { DowntownCamperSmallMarker } from './HotelMarker/SignatureHotel/DowntownCamperSmall'
 import { GrandHotelMarker } from './HotelMarker/SignatureHotel/GrandHotel'
@@ -17,9 +15,14 @@ import { ScandicSmallMarker } from './HotelMarker/SignatureHotel/ScandicSmall'
 import { TheDockMarker } from './HotelMarker/SignatureHotel/TheDock'
 import { TheDockSmallMarker } from './HotelMarker/SignatureHotel/TheDockSmall'
 
-import type { MarkerInfo } from '@scandic-hotels/trpc/types/marker'
 import { SignatureHotelEnum } from '@scandic-hotels/common/constants/signatureHotels'
 
+import {
+  HotelTypes,
+  type HotelType,
+} from '@scandic-hotels/common/constants/hotelType'
+import { MarkerInfo } from '../types'
+
 export interface HotelMarkerByTypeProps
   extends MarkerInfo,
     React.SVGAttributes<HTMLOrSVGElement> {
@@ -35,12 +38,6 @@ export function HotelMarkerByType({
   size = 'large',
   ...props
 }: HotelMarkerByTypeProps) {
-  const typeEntry = byHotelType[hotelType as keyof typeof byHotelType]
-  if (typeEntry) {
-    const Cmp = typeEntry[size]
-    return <Cmp {...props} />
-  }
-
   const sigatureHotelEntry =
     bySignatureHotel[hotelId as keyof typeof bySignatureHotel]
   if (sigatureHotelEntry) {
@@ -48,6 +45,12 @@ export function HotelMarkerByType({
     return <Cmp {...props} />
   }
 
+  const typeEntry = byHotelType[hotelType as keyof typeof byHotelType]
+  if (typeEntry) {
+    const Cmp = typeEntry[size]
+    return <Cmp {...props} />
+  }
+
   const Cmp = defaultMarkers[size]
   return <Cmp {...props} />
 }
@@ -58,10 +61,10 @@ const defaultMarkers: Record<'large' | 'small', MarkerComponent> = {
 }
 
 const byHotelType: Record<
-  Exclude<HotelTypeEnum, HotelTypeEnum.Regular | HotelTypeEnum.Signature>,
+  Exclude<HotelType, 'regular' | 'signature'>,
   Record<'large' | 'small', MarkerComponent>
 > = {
-  [HotelTypeEnum.ScandicGo]: {
+  [HotelTypes.ScandicGo]: {
     large: ScandicGoMarker,
     small: ScandicGoSmallMarker,
   },

packages/design-system/lib/components/Map/Markers/PoiMarker/index.tsx

@@ -1,4 +1,4 @@
-import { IconByIconName } from '@scandic-hotels/design-system/Icons/IconByIconName'
+import { IconByIconName } from '../../../Icons/IconByIconName'
 
 import { getIconByPoiGroupAndCategory } from '../utils'
 import { poiVariants } from './variants'

packages/design-system/lib/components/Map/Markers/utils.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@scandic-hotels/design-system/Icons/iconName'
+import { IconName } from '../../Icons/iconName'
 import { PointOfInterestGroup } from './PoiMarker'
 
 export function getIconByPoiGroupAndCategory(

packages/design-system/lib/components/Map/types.ts

@@ -1,5 +1,6 @@
 import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
 import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
+import { HotelType } from '@scandic-hotels/common/constants/hotelType'
 
 export type HotelPin = {
   bookingCode?: string | null
@@ -40,3 +41,29 @@ export type HotelPin = {
   facilityIds: number[]
   hasEnoughPoints: boolean
 }
+
+export const PointOfInterestGroups = {
+  PublicTransport: 'Public transport',
+  Attractions: 'Attractions',
+  Business: 'Business',
+  Location: 'Location',
+  Parking: 'Parking',
+  ShoppingAndDining: 'Shopping & Dining',
+} as const
+
+export type PointOfInterestGroup =
+  (typeof PointOfInterestGroups)[keyof typeof PointOfInterestGroups]
+
+export type PointOfInterest = {
+  id: string
+  categoryName: string
+  coordinates: { lat: number; lng: number }
+  distance: number
+  group: PointOfInterestGroup
+  name: string
+}
+
+export type MarkerInfo = {
+  hotelId: string
+  hotelType: HotelType
+}