Merged in feat/SW-1521-image-gallery-lightbox (pull request #1226)

Feat/SW-1521 image gallery lightbox

* feat(SW-1453): added city listing component

* feat(SW-1521): added more generic types to ImageGallery and Lightbox components

* feat(SW-1521): added lightbox functionality for top images

* feat(SW-1521): added support for setting activeIndex on open inside Lightbox


Approved-by: Fredrik Thorsson
Approved-by: Chuma Mcphoy (We Ahead)

types/components/hotelPage/previewImages.ts

@@ -1,6 +1,6 @@
-import type { GalleryImage } from "@/types/hotel"
+import type { ApiImage } from "@/types/hotel"
 
 export type PreviewImagesProps = {
-  images: GalleryImage[]
+  images: ApiImage[]
   hotelName: string
 }

types/components/hotelReservation/selectRate/imageGallery.ts

@@ -1,3 +1,3 @@
-import type { GalleryImage } from "@/types/hotel"
+import type { ApiImage } from "@/types/hotel"
 
-export type ImageGalleryProps = { images?: GalleryImage[]; title: string }
+export type ImageGalleryProps = { images?: ApiImage[]; title: string }

types/components/imageGallery.ts

@@ -1,4 +1,9 @@
-import type { GalleryImage } from "@/types/hotel"
+export interface GalleryImage {
+  src: string
+  alt: string
+  caption?: string | null
+  smallSrc?: string | null
+}
 
 export type ImageGalleryProps = {
   images?: GalleryImage[]

types/components/lightbox/lightbox.ts

@@ -1,10 +1,11 @@
-import type { GalleryImage } from "@/types/hotel"
+import type { GalleryImage } from "../imageGallery"
 
 export interface LightboxProps {
   images: GalleryImage[]
   dialogTitle: string /* Accessible title for dialog screen readers */
   onClose: () => void
   isOpen: boolean
+  activeIndex?: number
 }
 
 export interface GalleryProps {

types/hotel.ts

@@ -1,6 +1,11 @@
 import type { z } from "zod"
 
 import type { hotelSchema } from "@/server/routers/hotels/output"
+import type {
+  extraPageSchema,
+  facilitySchema,
+  transformAdditionalData,
+} from "@/server/routers/hotels/schemas/additionalData"
 import type { citySchema } from "@/server/routers/hotels/schemas/city"
 import type { attributesSchema } from "@/server/routers/hotels/schemas/hotel"
 import type { addressSchema } from "@/server/routers/hotels/schemas/hotel/address"
@@ -20,11 +25,6 @@ import type { parkingSchema } from "@/server/routers/hotels/schemas/hotel/parkin
 import type { pointOfInterestSchema } from "@/server/routers/hotels/schemas/hotel/poi"
 import type { ratingsSchema } from "@/server/routers/hotels/schemas/hotel/rating"
 import type { imageSchema } from "@/server/routers/hotels/schemas/image"
-import type {
-  extraPageSchema,
-  facilitySchema,
-  transformAdditionalData,
-} from "@/server/routers/hotels/schemas/additionalData"
 
 export type HotelData = z.output<typeof hotelSchema>
 
@@ -33,7 +33,7 @@ export type CheckInData = z.output<typeof checkinSchema>
 type CitySchema = z.output<typeof citySchema>
 export type City = Pick<CitySchema, "id" | "type"> & CitySchema["attributes"]
 export type Facility = z.output<typeof facilitySchema> & { id: string }
-export type GalleryImage = z.output<typeof imageSchema>
+export type ApiImage = z.output<typeof imageSchema>
 export type HealthFacility = z.output<typeof healthFacilitySchema>
 export type HealthFacilities = HealthFacility[]
 export type Hotel = z.output<typeof attributesSchema>
@@ -68,4 +68,3 @@ export type HotelTripAdvisor =
 export type AdditionalData = ReturnType<typeof transformAdditionalData>
 
 export type ExtraPageSchema = z.output<typeof extraPageSchema>
-