fix(platform): fix type errors and move dependency to package package.json

package.json

@@ -99,7 +99,6 @@
     "oa-components": "workspace:*",
     "oa-shared": "workspace:*",
     "oa-themes": "workspace:*",
-    "photoswipe": "^5.4.0",
     "pino": "^7.2.0",
     "pino-logflare": "^0.3.12",
     "react": "17.0.2",

packages/components/package.json

@@ -26,6 +26,7 @@
     "linkify-react": "^4.0.2",
     "linkifyjs": "^4.0.2",
     "oa-themes": "workspace:^",
+    "photoswipe": "^5.4.1",
     "react-flag-icon-css": "^1.0.25",
     "react-icons": "^4.3.1",
     "react-player": "^2.12.0",

packages/components/src/ImageGallery/ImageGallery.test.tsx

@@ -27,7 +27,7 @@ describe('ImageGallery', () => {
     // unmounts, so that each test initializes the component correctly. The cleanup
     // of the window.pswp is made asynchronously with no way of waiting except this one
     await waitFor(() => {
-      expect(global.window.pswp).toBeFalsy()
+      expect((global.window as any).pswp).toBeFalsy()
     })
   })
 

packages/components/src/ImageGallery/ImageGallery.tsx

@@ -67,7 +67,7 @@ export const ImageGallery = (props: ImageGalleryProps) => {
     // Before opening the lightbox, calculates the image sizes and
     // refreshes lightbox slide to adapt to these updated dimensions
     lightbox.current.on('beforeOpen', () => {
-      const photoswipe = lightbox.current.pswp
+      const photoswipe = lightbox.current?.pswp
       const dataSource = photoswipe?.options?.dataSource
 
       if (Array.isArray(dataSource)) {
@@ -86,8 +86,8 @@ export const ImageGallery = (props: ImageGalleryProps) => {
     lightbox.current.init()
 
     return () => {
-      lightbox.current.destroy()
-      lightbox.current = null
+      lightbox.current?.destroy()
+      lightbox.current = undefined
     }
   }, [props.images])
 
@@ -98,8 +98,12 @@ export const ImageGallery = (props: ImageGalleryProps) => {
     })
   }
 
-  const triggerLightbox = (): void =>
-    lightbox.current.loadAndOpen(state.activeImageIndex)
+  const triggerLightbox = (): void => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore: Looks like a bug on their side, already a bug for it is open,
+    // it should allow only one argument, as mentioned in their docs
+    lightbox.current?.loadAndOpen(state.activeImageIndex)
+  }
 
   const images = state.images
   const activeImageIndex = state.activeImageIndex

packages/components/types/photoswipe.d.ts

@@ -0,0 +1,9 @@
+declare module 'photoswipe/lightbox' {
+  import PhotoSwipeLightbox, {
+    PhotoSwipeOptions,
+  } from 'photoswipe/dist/types/lightbox/lightbox'
+
+  export { PhotoSwipeOptions }
+  // eslint-disable-next-line import/no-default-export
+  export default PhotoSwipeLightbox
+}

src/common/Form/ImageInput/ImageInput.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import type { BoxProps, ThemeUIStyleObject } from 'theme-ui'
 import { Box, Flex, Image } from 'theme-ui'
 import { Button } from 'oa-components'
-import 'react-image-lightbox/style.css'
 import { ImageConverter } from './ImageConverter'
 import Dropzone from 'react-dropzone'
 import type { IUploadedFileMeta } from '../../../stores/storage'

types/photoswipe.d.ts

@@ -1,4 +1,9 @@
 declare module 'photoswipe/lightbox' {
-  import PhotoSwipeLightBox from 'photoswipe/dist/types/lightbox/lightbox'
-  export default PhotoSwipeLightBox
+  import PhotoSwipeLightbox, {
+    PhotoSwipeOptions,
+  } from 'photoswipe/dist/types/lightbox/lightbox'
+
+  export { PhotoSwipeOptions }
+  // eslint-disable-next-line import/no-default-export
+  export default PhotoSwipeLightbox
 }

yarn.lock

@@ -26448,6 +26448,7 @@ __metadata:
     linkifyjs: ^4.0.2
     mustache: ^4.2.0
     oa-themes: "workspace:^"
+    photoswipe: ^5.4.1
     prettier: 2.5.1
     react: ^17.0.2
     react-dom: ^17.0.2
@@ -26828,7 +26829,6 @@ __metadata:
     oa-components: "workspace:*"
     oa-shared: "workspace:*"
     oa-themes: "workspace:*"
-    photoswipe: ^5.4.0
     pino: ^7.2.0
     pino-logflare: ^0.3.12
     prettier: 2.5.1
@@ -27473,10 +27473,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"photoswipe@npm:^5.4.0":
-  version: 5.4.0
-  resolution: "photoswipe@npm:5.4.0"
-  checksum: 87aeab23edc88482057e893c89f0a7317837143dfdb801ac6e6c4604d737f34d798de8a94111efa84db766ea8c48774372ef5ef1eaf1dcc63df8fdd5ed347832
+"photoswipe@npm:^5.4.1":
+  version: 5.4.1
+  resolution: "photoswipe@npm:5.4.1"
+  checksum: edc58bec3aae2db7570980fd7bc7fc544d38abc0866dc7e2c0a611cc32d5787ebfc8084d7c1e000a081de23d40faed6b3f3c140fbf9e5ad82dfdc50402196534
   languageName: node
   linkType: hard