Merged in fix/3697-prettier-configs (pull request #3396)

fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -1,18 +1,18 @@
-'use client'
-import { AnimatePresence, motion } from 'motion/react'
-import { useEffect, useState } from 'react'
-import { Button as ButtonRAC } from 'react-aria-components'
-import { useIntl } from 'react-intl'
+"use client"
+import { AnimatePresence, motion } from "motion/react"
+import { useEffect, useState } from "react"
+import { Button as ButtonRAC } from "react-aria-components"
+import { useIntl } from "react-intl"
 
-import { IconButton } from '../../IconButton'
-import { Typography } from '../../Typography'
+import { IconButton } from "../../IconButton"
+import { Typography } from "../../Typography"
 
-import Image from '../../Image'
+import Image from "../../Image"
 
-import { cx } from 'class-variance-authority'
-import { useMediaQuery } from 'usehooks-ts'
-import { LightboxImage } from '..'
-import styles from './gallery.module.css'
+import { cx } from "class-variance-authority"
+import { useMediaQuery } from "usehooks-ts"
+import { LightboxImage } from ".."
+import styles from "./gallery.module.css"
 
 type GalleryProps = {
   images: LightboxImage[]
@@ -35,7 +35,7 @@ export default function Gallery({
   const [animateLeft, setAnimateLeft] = useState(true)
   const mainImage = selectedImage || images[0]
   const mainImageIndex = images.findIndex((img) => img === mainImage)
-  const isMobile = useMediaQuery('(max-width: 767px)')
+  const isMobile = useMediaQuery("(max-width: 767px)")
 
   function getThumbImages() {
     const thumbs = []
@@ -59,18 +59,18 @@ export default function Gallery({
   }
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'ArrowLeft') {
+    if (e.key === "ArrowLeft") {
       handlePrev()
-    } else if (e.key === 'ArrowRight') {
+    } else if (e.key === "ArrowRight") {
       handleNext()
     }
   }
 
   useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener("keydown", handleKeyDown)
 
     return () => {
-      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener("keydown", handleKeyDown)
     }
   })
 
@@ -94,10 +94,10 @@ export default function Gallery({
         className={styles.closeButton}
         onPress={onClose}
         aria-label={intl.formatMessage({
-          id: 'common.close',
-          defaultMessage: 'Close',
+          id: "common.close",
+          defaultMessage: "Close",
         })}
-        iconName={isMobile ? 'chevron_left' : 'close'}
+        iconName={isMobile ? "chevron_left" : "close"}
       />
 
       {/* Desktop Gallery */}
@@ -130,8 +130,8 @@ export default function Gallery({
                 onClick={onImageClick}
                 tabIndex={0}
                 aria-label={intl.formatMessage({
-                  id: 'lightbox.openImage',
-                  defaultMessage: 'Open image',
+                  id: "lightbox.openImage",
+                  defaultMessage: "Open image",
                 })}
                 role="button"
               />
@@ -142,8 +142,8 @@ export default function Gallery({
             className={cx(styles.navigationButton, styles.previous)}
             onPress={handlePrev}
             aria-label={intl.formatMessage({
-              id: 'lightbox.previousImage',
-              defaultMessage: 'Previous image',
+              id: "lightbox.previousImage",
+              defaultMessage: "Previous image",
             })}
             iconName="arrow_back"
           />
@@ -152,8 +152,8 @@ export default function Gallery({
             className={cx(styles.navigationButton, styles.next)}
             onPress={handleNext}
             aria-label={intl.formatMessage({
-              id: 'lightbox.nextImage',
-              defaultMessage: 'Next image',
+              id: "lightbox.nextImage",
+              defaultMessage: "Next image",
             })}
             iconName="arrow_forward"
           />
@@ -173,8 +173,8 @@ export default function Gallery({
                   className={styles.imageButton}
                   onPress={() => onSelectImage(image)}
                   aria-label={intl.formatMessage({
-                    id: 'lightbox.openImage',
-                    defaultMessage: 'Open image',
+                    id: "lightbox.openImage",
+                    defaultMessage: "Open image",
                   })}
                 >
                   <Image
@@ -196,7 +196,7 @@ export default function Gallery({
         {images.map((image, index) => (
           <motion.div
             key={image.src}
-            className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ''}`}
+            className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.3, delay: index * 0.05 }}
@@ -204,8 +204,8 @@ export default function Gallery({
             <ButtonRAC
               className={styles.imageButton}
               aria-label={intl.formatMessage({
-                id: 'lightbox.openImage',
-                defaultMessage: 'Open image',
+                id: "lightbox.openImage",
+                defaultMessage: "Open image",
               })}
               onPress={() => {
                 onSelectImage(image)