Merged in feat/SW-3644-storybook-v10 (pull request #3240)

feat(SW-3644): Storybook v10

* Auto update to Storybook v10

* Add scandic theme and logo

* Update yarn.lock

* Update formatting of package.json

* Update vitest config and playwright plugin

* Remove vitest 4 update

* Re-added comment

* Update the Typography component to explicitly return React.ReactNode

* Add an explicit type assertion to the export

* Add an explicit type assertion to the export for Checkbox

* Explicit return type assertion

* Add an explicit type assertion to the export

* Update @types/react and fix ts warnings

* Updated typings


Approved-by: Linus Flood
Approved-by: Matilda Landström

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

@@ -16,8 +16,10 @@ import styles from './select.module.css'
 import Body from '../Body'
 import { Label } from '../Label'
 
-interface SelectProps
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onSelect'> {
+interface SelectProps extends Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  'onSelect'
+> {
   defaultSelectedKey?: Key
   items: { label: string; value: Key }[]
   label: string
@@ -67,8 +69,10 @@ export default function Select({
     }
   }
 
-  function handleOnSelect(key: Key) {
-    onSelect(key)
+  function handleOnSelect(key: Key | null) {
+    if (key !== null) {
+      onSelect(key)
+    }
   }
 
   let chevronProps = {}
@@ -141,7 +145,7 @@ export default function Select({
                   key={`${item.value}_${item.label}`}
                   data-testid={item.label}
                 >
-                  {optionsIcon ? optionsIcon : null}
+                  {optionsIcon}
                   {item.label}
                 </ListBoxItem>
               ))}

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

@@ -20,7 +20,7 @@ interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   errorCodeMessages?: Record<string, string>
 }
 
-const Checkbox = forwardRef<
+const CheckboxComponent = forwardRef<
   HTMLInputElement,
   React.PropsWithChildren<CheckboxProps>
 >(function Checkbox(
@@ -85,4 +85,8 @@ const Checkbox = forwardRef<
   )
 })
 
+const Checkbox = CheckboxComponent as React.ForwardRefExoticComponent<
+  React.PropsWithChildren<CheckboxProps> & React.RefAttributes<HTMLInputElement>
+>
+
 export default Checkbox

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

@@ -122,7 +122,7 @@ export type HotelCardProps = {
   onAddressClick: () => void
 }
 
-export const HotelCard = memo(
+export const HotelCardComponent = memo(
   ({
     prices,
     hotel,
@@ -385,6 +385,10 @@ export const HotelCard = memo(
   }
 )
 
+export const HotelCard = HotelCardComponent as React.MemoExoticComponent<
+  (props: HotelCardProps) => React.ReactElement
+>
+
 interface PricesWrapperProps {
   children: React.ReactNode
   isClickable?: boolean

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

@@ -97,4 +97,8 @@ function ImageGallery({
   )
 }
 
-export default memo(ImageGallery)
+const ImageGalleryComponent = memo(ImageGallery)
+
+export default ImageGalleryComponent as React.MemoExoticComponent<
+  (props: ImageGalleryProps) => React.ReactElement
+>

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

@@ -15,7 +15,7 @@ import styles from './input.module.css'
 import type { InputProps } from './types'
 import { Typography } from '../Typography'
 
-export const Input = forwardRef(function AriaInputWithLabelComponent(
+const InputComponent = forwardRef(function AriaInputWithLabelComponent(
   { label, ...props }: InputProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
@@ -44,3 +44,7 @@ export const Input = forwardRef(function AriaInputWithLabelComponent(
     </AriaLabel>
   )
 })
+
+export const Input = InputComponent as React.ForwardRefExoticComponent<
+  InputProps & React.RefAttributes<HTMLInputElement>
+>

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

@@ -82,7 +82,7 @@ export default function FullView({
       opacity: 0,
       x: animateLeft ? -300 : 300,
     }),
-  }
+  } as const
 
   return (
     <div className={styles.fullView}>

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

@@ -82,7 +82,7 @@ export default function Gallery({
       opacity: 0,
       x: animateLeft ? -300 : 300,
     }),
-  }
+  } as const
 
   return (
     <div className={styles.gallery}>

packages/design-system/lib/components/Modal/motionVariants.ts

@@ -1,23 +1,23 @@
 export const fade = {
   hidden: {
     opacity: 0,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: 'easeInOut' as const },
   },
   visible: {
     opacity: 1,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: 'easeInOut' as const },
   },
-}
+} as const
 
 export const slideInOut = {
   hidden: {
     opacity: 0,
     y: 32,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: 'easeInOut' as const },
   },
   visible: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: 'easeInOut' as const },
   },
-}
+} as const

packages/design-system/lib/components/RateCard/Modal/motionVariants.ts

@@ -7,7 +7,7 @@ export const fade = {
     opacity: 1,
     transition: { duration: 0.4, ease: 'easeInOut' },
   },
-}
+} as const
 
 export const slideInOut = {
   hidden: {
@@ -20,7 +20,7 @@ export const slideInOut = {
     y: 0,
     transition: { duration: 0.4, ease: 'easeInOut' },
   },
-}
+} as const
 
 export const slideFromTop = {
   hidden: {
@@ -33,4 +33,4 @@ export const slideFromTop = {
     y: 0,
     transition: { duration: 0.4, ease: 'easeInOut' },
   },
-}
+} as const

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

@@ -4,7 +4,11 @@ import { variants } from './variants'
 
 import type { TypographyProps } from './types'
 
-export function Typography({ variant, className, children }: TypographyProps) {
+export function Typography({
+  variant,
+  className,
+  children,
+}: TypographyProps): React.ReactNode {
   if (!isValidElement(children)) return null
 
   const classNames = variants({