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/Form/Country/CountryCombobox.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { type SyntheticEvent, useMemo, useState } from 'react'
+import { type SyntheticEvent, useMemo, useState } from "react"
 import {
   Button,
   ComboBox,
@@ -10,33 +10,33 @@ import {
   ListBoxItem,
   Popover,
   useFilter,
-} from 'react-aria-components'
-import { useController } from 'react-hook-form'
+} from "react-aria-components"
+import { useController } from "react-hook-form"
 
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Typography } from '../../Typography'
-import { ErrorMessage } from '../ErrorMessage'
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Typography } from "../../Typography"
+import { ErrorMessage } from "../ErrorMessage"
 
-import styles from './country.module.css'
+import styles from "./country.module.css"
 
-import type { CountryProps } from './country'
+import type { CountryProps } from "./country"
 
-const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']
+const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
 
 export default function CountryCombobox({
   // hack used since chrome does not respect autocomplete="off"
-  autoComplete = 'nope',
-  className = '',
+  autoComplete = "nope",
+  className = "",
   errorMessage,
   label,
-  lang = 'en',
+  lang = "en",
   countries,
-  name = 'country',
+  name = "country",
   disabled = false,
   registerOptions = {},
 }: CountryProps) {
-  const { startsWith } = useFilter({ sensitivity: 'base' })
-  const [filterValue, setFilterValue] = useState('')
+  const { startsWith } = useFilter({ sensitivity: "base" })
+  const [filterValue, setFilterValue] = useState("")
   const { field, formState, fieldState } = useController({
     name,
     rules: registerOptions,
@@ -68,7 +68,7 @@ export default function CountryCombobox({
 
   function handleOnInput(evt: SyntheticEvent<HTMLInputElement>) {
     setFilterValue(evt.currentTarget.value)
-    const isAutoCompleteEvent = !('inputType' in evt.nativeEvent)
+    const isAutoCompleteEvent = !("inputType" in evt.nativeEvent)
     if (isAutoCompleteEvent) {
       const { value } = evt.currentTarget
       const cc = countries.find((c) => c.name === value || c.code === value)
@@ -89,7 +89,7 @@ export default function CountryCombobox({
         isInvalid={fieldState.invalid}
         name={name}
         onBlur={field.onBlur}
-        onSelectionChange={(c) => field.onChange(c ?? '')}
+        onSelectionChange={(c) => field.onChange(c ?? "")}
         selectedKey={field.value}
         menuTrigger="focus"
       >
@@ -142,8 +142,8 @@ export default function CountryCombobox({
                   <Typography
                     variant={
                       isSelected
-                        ? 'Body/Paragraph/mdBold'
-                        : 'Body/Paragraph/mdRegular'
+                        ? "Body/Paragraph/mdBold"
+                        : "Body/Paragraph/mdRegular"
                     }
                   >
                     <span>{item.label}</span>

packages/design-system/lib/components/Form/Country/CountrySelect.tsx

@@ -1,23 +1,23 @@
-'use client'
+"use client"
 
-import { useMemo } from 'react'
-import { useController } from 'react-hook-form'
+import { useMemo } from "react"
+import { useController } from "react-hook-form"
 
-import { Select } from '../../Select'
+import { Select } from "../../Select"
 
-import { ErrorMessage } from '../ErrorMessage'
+import { ErrorMessage } from "../ErrorMessage"
 
-import type { CountryProps } from './country'
+import type { CountryProps } from "./country"
 
-const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']
+const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
 
 export default function CountrySelect({
-  className = '',
+  className = "",
   errorMessage,
   label,
   countries,
-  lang = 'en',
-  name = 'country',
+  lang = "en",
+  name = "country",
   disabled = false,
   registerOptions = {},
 }: CountryProps) {
@@ -58,7 +58,7 @@ export default function CountrySelect({
         isInvalid={fieldState.invalid}
         name={name}
         onBlur={field.onBlur}
-        onSelectionChange={(c) => field.onChange(c ?? '')}
+        onSelectionChange={(c) => field.onChange(c ?? "")}
         selectedKey={field.value}
         data-testid={name}
       />

packages/design-system/lib/components/Form/Country/country.module.css

@@ -6,7 +6,7 @@
   height: 56px;
 
   &[data-required] .label::after {
-    content: ' *';
+    content: " *";
   }
 
   &[data-open] {
@@ -92,12 +92,12 @@
   }
 }
 
-.inner:has(input:placeholder-shown, input[data-focused='true'], input:valid)
+.inner:has(input:placeholder-shown, input[data-focused="true"], input:valid)
   .labelValue {
   display: initial;
 }
 
-.inner:has(input[value='']:not([data-focused='true'])) .labelEmpty {
+.inner:has(input[value=""]:not([data-focused="true"])) .labelEmpty {
   display: initial;
 }
 
@@ -110,7 +110,7 @@
   transition: min-height 150ms ease;
   width: 100%;
 
-  &[value]:not([value='']) {
+  &[value]:not([value=""]) {
     min-height: 18px;
   }
 }

packages/design-system/lib/components/Form/Country/country.ts

@@ -1,4 +1,4 @@
-import type { RegisterOptions } from 'react-hook-form'
+import type { RegisterOptions } from "react-hook-form"
 
 export type CountryProps = {
   autoComplete?: string

packages/design-system/lib/components/Form/Country/index.tsx

@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import { useMediaQuery } from 'usehooks-ts'
+import { useMediaQuery } from "usehooks-ts"
 
-import CountryCombobox from './CountryCombobox'
-import CountrySelect from './CountrySelect'
+import CountryCombobox from "./CountryCombobox"
+import CountrySelect from "./CountrySelect"
 
-import type { CountryProps } from './country'
+import type { CountryProps } from "./country"
 
 export default function Country(props: CountryProps) {
-  const isDesktop = useMediaQuery('(min-width: 768px)', {
+  const isDesktop = useMediaQuery("(min-width: 768px)", {
     initializeWithValue: false,
   })