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/IconButton/IconButton.stories.tsx

@@ -1,99 +1,99 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
 
-import { expect, fn } from 'storybook/test'
+import { expect, fn } from "storybook/test"
 
-import { IconButton } from './IconButton'
-import { iconButtonIconNames, IconButtonProps } from './types'
-import { config } from './variants'
+import { IconButton } from "./IconButton"
+import { iconButtonIconNames, IconButtonProps } from "./types"
+import { config } from "./variants"
 
 const meta: Meta<typeof IconButton> = {
-  title: 'Core Components/IconButton',
+  title: "Core Components/IconButton",
   component: IconButton,
   argTypes: {
     onPress: {
       table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' },
+        type: { summary: "function" },
+        defaultValue: { summary: "undefined" },
       },
-      description: 'Callback function to handle button press events.',
+      description: "Callback function to handle button press events.",
     },
     variant: {
-      control: 'select',
+      control: "select",
       options: Object.keys(config.variants.variant),
       table: {
         defaultValue: {
           summary: config.defaultVariants.variant,
         },
         type: {
-          summary: Object.keys(config.variants.variant).join(' | '),
+          summary: Object.keys(config.variants.variant).join(" | "),
         },
       },
     },
     size: {
-      control: 'select',
+      control: "select",
       options: Object.keys(config.variants.size),
       table: {
         defaultValue: {
           summary: config.defaultVariants.size,
         },
         type: {
-          summary: Object.keys(config.variants.size).join(' | '),
+          summary: Object.keys(config.variants.size).join(" | "),
         },
       },
       description:
-        'The size of the `IconButton`. Please note that you control the size of the icon inside the button separately. Please check the examples below for recommended icon sizes for each button size.',
+        "The size of the `IconButton`. Please note that you control the size of the icon inside the button separately. Please check the examples below for recommended icon sizes for each button size.",
     },
     emphasis: {
-      control: 'boolean',
+      control: "boolean",
       options: Object.keys(config.variants.emphasis),
       table: {
         defaultValue: {
           summary: config.defaultVariants.emphasis.toString(),
         },
         type: {
-          summary: 'boolean',
+          summary: "boolean",
         },
       },
     },
     iconName: {
-      control: 'select',
+      control: "select",
       options: iconButtonIconNames,
       table: {
-        type: { summary: iconButtonIconNames.join(' | ') },
-        defaultValue: { summary: 'undefined' },
+        type: { summary: iconButtonIconNames.join(" | ") },
+        defaultValue: { summary: "undefined" },
       },
-      description: 'Name of the Material Icon to use as icon.',
+      description: "Name of the Material Icon to use as icon.",
     },
     isDisabled: {
-      control: 'boolean',
+      control: "boolean",
       table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
       },
     },
   },
 }
 
 const globalStoryPropsInverted = {
-  backgrounds: { value: 'scandicPrimaryDark' },
+  backgrounds: { value: "scandicPrimaryDark" },
 }
 export default meta
 
 type Story = StoryObj<typeof IconButton>
 
 function renderAllSizesFn(
-  args: Story['args'],
-  iconName: IconButtonProps['iconName'] = 'search'
+  args: Story["args"],
+  iconName: IconButtonProps["iconName"] = "search"
 ) {
   return (
-    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
       {Object.keys(config.variants.size).map((size) => (
         <div
           style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '8px',
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "8px",
           }}
           key={size}
         >
@@ -113,10 +113,10 @@ function renderAllSizesFn(
 export const Default: Story = {
   args: {
     onPress: fn(),
-    iconName: 'search',
+    iconName: "search",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -124,136 +124,136 @@ export const Default: Story = {
 export const Examples: Story = {
   render: () => {
     return (
-      <div style={{ display: 'grid', gap: '16px', justifyContent: 'center' }}>
+      <div style={{ display: "grid", gap: "16px", justifyContent: "center" }}>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Filled</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
-            {renderAllSizesFn({ ...Default.args, variant: 'Filled' })}
+          <h3 style={{ marginBottom: "8px" }}>Filled</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
+            {renderAllSizesFn({ ...Default.args, variant: "Filled" })}
           </div>
         </div>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Filled with emphasis</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Filled with emphasis</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Filled',
+                variant: "Filled",
                 emphasis: true,
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Outlined</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Outlined</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Outlined',
+                variant: "Outlined",
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Elevated</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Elevated</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Elevated',
+                variant: "Elevated",
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            backgroundColor: '#4D001B',
-            color: 'white',
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            backgroundColor: "#4D001B",
+            color: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Faded</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Faded</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Faded',
+                variant: "Faded",
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            backgroundColor: '#4D001B',
-            color: 'white',
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            backgroundColor: "#4D001B",
+            color: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Muted</h3>
+          <h3 style={{ marginBottom: "8px" }}>Muted</h3>
           <div
             style={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: '8px',
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "8px",
             }}
           >
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Muted',
+                variant: "Muted",
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Muted with emphasis</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Muted with emphasis</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Muted',
+                variant: "Muted",
                 emphasis: true,
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
@@ -265,10 +265,10 @@ export const Examples: Story = {
 export const Filled: Story = {
   args: {
     ...Default.args,
-    variant: 'Filled',
+    variant: "Filled",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -279,7 +279,7 @@ export const FilledDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -290,7 +290,7 @@ export const FilledOnDarkBackground: Story = {
     ...Filled.args,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -298,11 +298,11 @@ export const FilledOnDarkBackground: Story = {
 export const FilledWithEmphasis: Story = {
   args: {
     ...Filled.args,
-    iconName: 'arrow_forward',
+    iconName: "arrow_forward",
     emphasis: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -313,7 +313,7 @@ export const FilledWithEmphasisDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -321,11 +321,11 @@ export const FilledWithEmphasisDisabled: Story = {
 export const Outlined: Story = {
   args: {
     ...Default.args,
-    iconName: 'arrow_forward',
-    variant: 'Outlined',
+    iconName: "arrow_forward",
+    variant: "Outlined",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -336,7 +336,7 @@ export const OutlinedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -344,11 +344,11 @@ export const OutlinedDisabled: Story = {
 export const Elevated: Story = {
   args: {
     ...Default.args,
-    iconName: 'arrow_forward',
-    variant: 'Elevated',
+    iconName: "arrow_forward",
+    variant: "Elevated",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -359,7 +359,7 @@ export const ElevatedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -368,11 +368,11 @@ export const Faded: Story = {
   globals: globalStoryPropsInverted,
   args: {
     ...Default.args,
-    iconName: 'arrow_forward',
-    variant: 'Faded',
+    iconName: "arrow_forward",
+    variant: "Faded",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -384,7 +384,7 @@ export const FadedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -393,11 +393,11 @@ export const Muted: Story = {
   globals: globalStoryPropsInverted,
   args: {
     ...Default.args,
-    iconName: 'arrow_forward',
-    variant: 'Muted',
+    iconName: "arrow_forward",
+    variant: "Muted",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -409,7 +409,7 @@ export const MutedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -420,7 +420,7 @@ export const MutedWithEmphasis: Story = {
     emphasis: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -431,7 +431,7 @@ export const MutedWithEmphasisDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }

packages/design-system/lib/components/IconButton/IconButton.tsx

@@ -1,8 +1,8 @@
-import { Button as ButtonRAC } from 'react-aria-components'
+import { Button as ButtonRAC } from "react-aria-components"
 
-import { MaterialIcon } from '../Icons/MaterialIcon'
-import { IconButtonProps } from './types'
-import { variants } from './variants'
+import { MaterialIcon } from "../Icons/MaterialIcon"
+import { IconButtonProps } from "./types"
+import { variants } from "./variants"
 
 export function IconButton({
   variant,
@@ -30,15 +30,15 @@ export function IconButton({
   )
 }
 
-function getIconSize(size: IconButtonProps['size']) {
+function getIconSize(size: IconButtonProps["size"]) {
   switch (size) {
-    case 'sm':
+    case "sm":
       return 16
-    case 'md':
+    case "md":
       return 20
-    case 'xl':
+    case "xl":
       return 28
-    case 'lg':
+    case "lg":
     default:
       return 24
   }

packages/design-system/lib/components/IconButton/iconButton.module.css

@@ -19,7 +19,7 @@
     outline-offset: 2px;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       inset: -2px;
       border: 2px solid var(--Border-Inverted);

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

@@ -1 +1 @@
-export { IconButton } from './IconButton'
+export { IconButton } from "./IconButton"

packages/design-system/lib/components/IconButton/types.ts

@@ -1,29 +1,29 @@
-import { Button as ButtonRAC } from 'react-aria-components'
+import { Button as ButtonRAC } from "react-aria-components"
 
-import type { VariantProps } from 'class-variance-authority'
-import type { ComponentProps } from 'react'
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
 
-import type { SymbolCodepoints } from '../Icons/MaterialIcon/MaterialSymbol/types'
-import type { variants } from './variants'
+import type { SymbolCodepoints } from "../Icons/MaterialIcon/MaterialSymbol/types"
+import type { variants } from "./variants"
 
 export const iconButtonIconNames = [
-  'arrow_forward',
-  'arrow_back',
-  'remove',
-  'close',
-  'add',
-  'search',
-  'info_circle',
-  'help_circle',
-  'info',
-  'delete',
-  'visibility',
-  'visibility_off',
-  'keyboard_arrow_down',
-  'keyboard_arrow_up',
-  'cancel',
-  'chevron_left',
-  'chevron_right',
+  "arrow_forward",
+  "arrow_back",
+  "remove",
+  "close",
+  "add",
+  "search",
+  "info_circle",
+  "help_circle",
+  "info",
+  "delete",
+  "visibility",
+  "visibility_off",
+  "keyboard_arrow_down",
+  "keyboard_arrow_up",
+  "cancel",
+  "chevron_left",
+  "chevron_right",
 ] as const
 
 export type IconButtonIconName = Extract<
@@ -33,7 +33,7 @@ export type IconButtonIconName = Extract<
 
 export interface IconButtonProps
   extends
-    Omit<ComponentProps<typeof ButtonRAC>, 'children'>,
+    Omit<ComponentProps<typeof ButtonRAC>, "children">,
     VariantProps<typeof variants> {
   iconName: IconButtonIconName
 }

packages/design-system/lib/components/IconButton/variants.ts

@@ -1,30 +1,30 @@
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority"
 
-import styles from './iconButton.module.css'
+import styles from "./iconButton.module.css"
 
 export const config = {
   variants: {
     variant: {
-      Filled: styles['variant-filled'],
-      Outlined: styles['variant-outlined'],
-      Elevated: styles['variant-elevated'],
-      Faded: styles['variant-faded'],
-      Muted: styles['variant-muted'],
+      Filled: styles["variant-filled"],
+      Outlined: styles["variant-outlined"],
+      Elevated: styles["variant-elevated"],
+      Faded: styles["variant-faded"],
+      Muted: styles["variant-muted"],
     },
     emphasis: {
-      true: styles['emphasis'],
+      true: styles["emphasis"],
       false: undefined,
     },
     size: {
-      xl: styles['size-xl'],
-      lg: styles['size-lg'],
-      md: styles['size-md'],
-      sm: styles['size-sm'],
+      xl: styles["size-xl"],
+      lg: styles["size-lg"],
+      md: styles["size-md"],
+      sm: styles["size-sm"],
     },
   },
   defaultVariants: {
-    variant: 'Filled',
-    size: 'lg',
+    variant: "Filled",
+    size: "lg",
     emphasis: false,
   },
 } as const