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/Image/imageLoader.test.ts

@@ -1,69 +1,69 @@
-import { describe, it, expect } from 'vitest'
-import { imageLoader } from './imageLoader'
-describe('imageLoader', () => {
-  it('should generate the correct image URL for absolute URLs', () => {
+import { describe, it, expect } from "vitest"
+import { imageLoader } from "./imageLoader"
+describe("imageLoader", () => {
+  it("should generate the correct image URL for absolute URLs", () => {
     const loader = imageLoader({ dimensions: { width: 800, height: 600 } })
     const url = loader({
       quality: 80,
-      src: 'https://example.com/image.jpg',
+      src: "https://example.com/image.jpg",
       width: 800,
     })
 
     expect(url).toBe(
-      'https://img.scandichotels.com/.netlify/images?url=https://example.com/image.jpg&w=800&q=80'
+      "https://img.scandichotels.com/.netlify/images?url=https://example.com/image.jpg&w=800&q=80"
     )
   })
 
-  it('should generate the correct image URL for relative URLs', () => {
+  it("should generate the correct image URL for relative URLs", () => {
     const loader = imageLoader({ dimensions: { width: 800, height: 600 } })
     const url = loader({
       quality: 80,
-      src: '/image.jpg',
+      src: "/image.jpg",
       width: 800,
     })
 
-    expect(url).toBe('/image.jpg?w=800&q=80')
+    expect(url).toBe("/image.jpg?w=800&q=80")
   })
 
-  it('should compensate for landscape 3:2 images', () => {
+  it("should compensate for landscape 3:2 images", () => {
     const loader = imageLoader({ dimensions: { width: 6000, height: 4000 } })
     const url = loader({
-      src: '/image.jpg',
+      src: "/image.jpg",
       width: 400,
     })
 
-    expect(url).toBe('/image.jpg?w=600')
+    expect(url).toBe("/image.jpg?w=600")
   })
 
-  it('should compensate for landscape ~3:2 images', () => {
+  it("should compensate for landscape ~3:2 images", () => {
     const loader = imageLoader({ dimensions: { width: 7952, height: 5304 } })
     const url = loader({
-      src: '/image.jpg',
+      src: "/image.jpg",
       width: 400,
     })
 
-    expect(url).toBe('/image.jpg?w=600')
+    expect(url).toBe("/image.jpg?w=600")
   })
 
-  it('should compensate for standing 2:3 images', () => {
+  it("should compensate for standing 2:3 images", () => {
     const loader = imageLoader({ dimensions: { width: 4000, height: 6000 } })
     const url = loader({
-      src: '/image.jpg',
+      src: "/image.jpg",
       width: 800,
     })
 
-    expect(url).toBe('/image.jpg?w=800')
+    expect(url).toBe("/image.jpg?w=800")
   })
 
-  it('should compensate for landscape 2:1 images', () => {
+  it("should compensate for landscape 2:1 images", () => {
     const loader = imageLoader({ dimensions: { width: 2000, height: 1000 } })
     const url = loader({
-      src: '/image.jpg',
+      src: "/image.jpg",
       width: 800,
     })
 
     // used to fetch an image 800x400 image but we, probably, render it with a height of 533
 
-    expect(url).toBe('/image.jpg?w=1200')
+    expect(url).toBe("/image.jpg?w=1200")
   })
 })

packages/design-system/lib/components/Image/imageLoader.ts

@@ -1,4 +1,4 @@
-import { ImageLoaderProps } from 'next/image'
+import { ImageLoaderProps } from "next/image"
 
 export const imageLoader =
   ({
@@ -9,18 +9,18 @@ export const imageLoader =
   }) =>
   ({ quality, src, width }: ImageLoaderProps) => {
     const isAbsoluteUrl =
-      src.startsWith('https://') || src.startsWith('http://')
-    const hasQS = src.indexOf('?') !== -1
+      src.startsWith("https://") || src.startsWith("http://")
+    const hasQS = src.indexOf("?") !== -1
 
     if (
       dimensions &&
-      isLargerThanAspectRatio(dimensions, '3:2') &&
+      isLargerThanAspectRatio(dimensions, "3:2") &&
       width < dimensions.width
     ) {
       // If image is wider than 3:2, compensate for low height when rendering in a 3:2 container
       const scale = width / dimensions.width
       const minWidthFor32Aspect =
-        dimensions.height * scale * aspectRatios['3:2'] * 2
+        dimensions.height * scale * aspectRatios["3:2"] * 2
 
       width = Math.max(minWidthFor32Aspect, width)
     }
@@ -33,14 +33,14 @@ export const imageLoader =
     width = roundToNearest(width, 10)
 
     if (isAbsoluteUrl) {
-      return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? '&q=' + quality : ''}`
+      return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? "&q=" + quality : ""}`
     }
 
-    return `${src}${hasQS ? '&' : '?'}w=${width}${quality ? '&q=' + quality : ''}`
+    return `${src}${hasQS ? "&" : "?"}w=${width}${quality ? "&q=" + quality : ""}`
   }
 
 const aspectRatios = {
-  '3:2': 3 / 2,
+  "3:2": 3 / 2,
 }
 function isLargerThanAspectRatio(
   dimensions: {

packages/design-system/lib/components/Image/index.tsx

@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import NextImage, { ImageProps as NextImageProps } from 'next/image'
+import NextImage, { ImageProps as NextImageProps } from "next/image"
 
-import ImageFallback from '../ImageFallback'
+import ImageFallback from "../ImageFallback"
 
-import { useState, type CSSProperties, type SyntheticEvent } from 'react'
-import { imageLoader } from './imageLoader'
+import { useState, type CSSProperties, type SyntheticEvent } from "react"
+import { imageLoader } from "./imageLoader"
 
 type FocalPoint = {
   x: number
   y: number
 }
 
-export type ImageProps = Omit<NextImageProps, 'src'> & {
+export type ImageProps = Omit<NextImageProps, "src"> & {
   focalPoint?: FocalPoint
   dimensions?: { width: number; height: number }
-  src: NextImageProps['src'] | undefined
+  src: NextImageProps["src"] | undefined
 }
 
 // Next/Image adds & instead of ? before the params
@@ -30,7 +30,7 @@ export default function Image({
   const [imageError, setImageError] = useState(false)
   const styles: CSSProperties = focalPoint
     ? {
-        objectFit: 'cover',
+        objectFit: "cover",
         objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
         ...style,
       }