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/VideoPlayer/Button/VideoPlayerButton.stories.tsx

@@ -1,69 +1,69 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
 
-import { fn } from 'storybook/test'
-import { VideoPlayerButton } from '.'
-import { videoPlayerButtonIconNames } from './types'
-import { config } from './variants'
+import { fn } from "storybook/test"
+import { VideoPlayerButton } from "."
+import { videoPlayerButtonIconNames } from "./types"
+import { config } from "./variants"
 
 const meta: Meta<typeof VideoPlayerButton> = {
-  title: 'Core Components/Video/VideoPlayerButton',
+  title: "Core Components/Video/VideoPlayerButton",
   component: VideoPlayerButton,
   parameters: {
     docs: {
       description: {
         component:
-          'A component to display a VideoPlayer and content inside a card connected to the video. The size and gaps are determined by the parent container.',
+          "A component to display a VideoPlayer and content inside a card connected to the video. The size and gaps are determined by the parent container.",
       },
     },
   },
   argTypes: {
     onPress: {
       table: {
-        type: { summary: 'function' },
+        type: { summary: "function" },
       },
-      defaultValue: { summary: 'undefined' },
+      defaultValue: { summary: "undefined" },
     },
     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 button.',
+      description: "The size of the button.",
     },
     iconName: {
-      control: 'select',
+      control: "select",
       options: videoPlayerButtonIconNames,
       table: {
         defaultValue: {
-          summary: 'undefined',
+          summary: "undefined",
         },
         type: {
-          summary: videoPlayerButtonIconNames.join(' | '),
+          summary: videoPlayerButtonIconNames.join(" | "),
         },
       },
       description:
-        'This decides the background color and text color of the card.',
+        "This decides the background color and text color of the card.",
     },
   },
 }
 
 export default meta
 
-function renderAllIcons(args: Story['args']) {
+function renderAllIcons(args: Story["args"]) {
   return (
     <div
       style={{
-        display: 'flex',
-        gap: '16px',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexWrap: 'wrap',
+        display: "flex",
+        gap: "16px",
+        alignItems: "center",
+        justifyContent: "center",
+        flexWrap: "wrap",
       }}
     >
       {videoPlayerButtonIconNames.map((iconName) => (
@@ -76,20 +76,20 @@ function renderAllIcons(args: Story['args']) {
 type Story = StoryObj<typeof VideoPlayerButton>
 
 export const Default: Story = {
-  args: { iconName: 'play_arrow', onPress: fn() },
+  args: { iconName: "play_arrow", onPress: fn() },
 }
 
 export const Small: Story = {
-  args: { ...Default.args, size: 'sm' },
+  args: { ...Default.args, size: "sm" },
   render: (args) => renderAllIcons(args),
 }
 
 export const Medium: Story = {
-  args: { ...Default.args, size: 'md' },
+  args: { ...Default.args, size: "md" },
   render: (args) => renderAllIcons(args),
 }
 
 export const Large: Story = {
-  args: { ...Default.args, size: 'lg' },
+  args: { ...Default.args, size: "lg" },
   render: (args) => renderAllIcons(args),
 }

packages/design-system/lib/components/VideoPlayer/Button/index.tsx

@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import { Button as ButtonRAC } from 'react-aria-components'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { VideoPlayerButtonProps } from './types'
-import { variants } from './variants'
-import styles from './videoPlayerButton.module.css'
+import { Button as ButtonRAC } from "react-aria-components"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { VideoPlayerButtonProps } from "./types"
+import { variants } from "./variants"
+import styles from "./videoPlayerButton.module.css"
 
 export function VideoPlayerButton({
   iconName,
@@ -32,13 +32,13 @@ export function VideoPlayerButton({
   )
 }
 
-function getIconSize(size: VideoPlayerButtonProps['size']) {
+function getIconSize(size: VideoPlayerButtonProps["size"]) {
   switch (size) {
-    case 'sm':
+    case "sm":
       return 28
-    case 'lg':
+    case "lg":
       return 40
-    case 'md':
+    case "md":
     default:
       return 32
   }

packages/design-system/lib/components/VideoPlayer/Button/types.ts

@@ -1,22 +1,22 @@
-import type { VariantProps } from 'class-variance-authority'
-import { Button as ButtonRAC } from 'react-aria-components'
+import type { VariantProps } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
 
-import { ComponentProps } from 'react'
-import type { SymbolCodepoints } from '../../Icons/MaterialIcon/MaterialSymbol/types'
-import type { variants } from './variants'
+import { ComponentProps } from "react"
+import type { SymbolCodepoints } from "../../Icons/MaterialIcon/MaterialSymbol/types"
+import type { variants } from "./variants"
 
 export const videoPlayerButtonIconNames = [
-  'play_arrow',
-  'pause',
-  'volume_up',
-  'volume_off',
+  "play_arrow",
+  "pause",
+  "volume_up",
+  "volume_off",
 ] satisfies SymbolCodepoints[]
 
 type VideoPlayerButtonIconName = (typeof videoPlayerButtonIconNames)[number]
 
 export interface VideoPlayerButtonProps
   extends
-    Omit<ComponentProps<typeof ButtonRAC>, 'children'>,
+    Omit<ComponentProps<typeof ButtonRAC>, "children">,
     VariantProps<typeof variants> {
   iconName: VideoPlayerButtonIconName
 }

packages/design-system/lib/components/VideoPlayer/Button/variants.ts

@@ -1,17 +1,17 @@
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority"
 
-import styles from './videoPlayerButton.module.css'
+import styles from "./videoPlayerButton.module.css"
 
 export const config = {
   variants: {
     size: {
-      sm: styles['size-sm'],
-      md: styles['size-md'],
-      lg: styles['size-lg'],
+      sm: styles["size-sm"],
+      md: styles["size-md"],
+      lg: styles["size-lg"],
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: "md",
   },
 } as const
 

packages/design-system/lib/components/VideoPlayer/Button/videoPlayerButton.module.css

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