upgrade and migrate all dependencies

yannbf · Feb 27, 2025 · c1bc595 · c1bc595
1 parent 44596a7
commit c1bc595
Show file tree

Hide file tree

Showing 21 changed files with 2,471 additions and 2,667 deletions.
diff --git a/.storybook/interaction.tsx b/.storybook/interaction.tsx
@@ -102,8 +102,9 @@ async function mouseTo(
 }
 
 export const demoModeLoader: Loader = async (context) => {
+  const isTestRunner = window.navigator.userAgent.match(/StorybookTestRunner/);
   // @ts-expect-error add module augmentation for types
-  const shouldUseDemoMode = import.meta.env.STORYBOOK && !globalThis.test && !isChromatic() && !globalThis.__vitest_browser__;
+  const shouldUseDemoMode = import.meta.env.STORYBOOK && !globalThis.test && !isTestRunner && !isChromatic() && !globalThis.__vitest_browser__;
   if (shouldUseDemoMode && context.args.demoMode || context.parameters.test?.demoMode || context.globals.interactionsDemoMode) {
     const user = userEvent.setup();
 

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,14 +1,14 @@
 import type { Preview } from '@storybook/react'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import { userEvent } from '@storybook/test'
+import type { UserEvent } from '@storybook/test'
+import { mswLoader } from 'msw-storybook-addon'
+import { ThemeProvider } from 'styled-components'
 
 import { globalDecorators } from './decorators'
 import { viewports as breakpoints } from '../src/styles/breakpoints'
 import { DocsContainer, DocsContainerProps } from '@storybook/blocks'
-import { ThemeProvider } from 'styled-components'
 import { lightTheme } from '../src/styles/theme'
 import { demoModeLoader } from './interaction'
-import { mswLoader } from 'msw-storybook-addon'
 
 // Create custom viewports using widths defined in design tokens
 const breakpointViewports = Object.keys(breakpoints).reduce((acc, key) => {
@@ -70,9 +70,9 @@ const preview: Preview = {
   loaders: [mswLoader, demoModeLoader]
 }
 
-declare module '@storybook/csf' {
+declare module 'storybook/internal/csf' {
   interface StoryContext {
-      userEvent: ReturnType<typeof userEvent.setup>;
+    userEvent: UserEvent;
   }
 }
 export default preview
diff --git a/package.json b/package.json
@@ -4,19 +4,20 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@reduxjs/toolkit": "^2.2.3",
-    "axios": "^1.6.8",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@reduxjs/toolkit": "^2.6.0",
+    "axios": "^1.8.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hooks-helper": "^1.6.0",
-    "react-loading-skeleton": "^3.4.0",
-    "react-lottie-player": "^2.0.0",
+    "react-loading-skeleton": "^3.5.0",
+    "react-lottie-player": "^2.1.0",
     "react-multi-carousel": "^2.8.5",
-    "react-redux": "^9.1.1",
-    "react-router-dom": "^6.23.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.2.0",
     "react-transition-group": "^4.4.5",
-    "styled-components": "^5.3.3",
-    "typescript": "^5.4.5",
+    "styled-components": "^6.1.15",
+    "stylis": "^4.3.6",
+    "typescript": "^5.7.3",
     "use-dark-mode": "^2.3.1"
   },
   "scripts": {
@@ -53,72 +54,70 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@chromatic-com/storybook": "^3.2.1",
-    "@ladle/react": "^4.1.2",
-    "@storybook/addon-a11y": "^8.6.0",
-    "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.6.0",
-    "@storybook/addon-themes": "^8.6.0",
-    "@storybook/blocks": "^8.6.0",
-    "@storybook/experimental-addon-test": "^8.6.0",
-    "@storybook/manager-api": "^8.6.0",
-    "@storybook/react": "^8.6.0",
-    "@storybook/react-vite": "^8.6.0",
-    "@storybook/test": "^8.6.0",
-    "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.6.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "@babel/core": "^7.26.9",
+    "@chromatic-com/storybook": "^3.2.5",
+    "@ladle/react": "^5.0.1",
+    "@storybook/addon-a11y": "^8.6.1",
+    "@storybook/addon-coverage": "^1.0.5",
+    "@storybook/addon-designs": "^8.2.0",
+    "@storybook/addon-essentials": "^8.6.1",
+    "@storybook/addon-themes": "^8.6.1",
+    "@storybook/blocks": "^8.6.1",
+    "@storybook/experimental-addon-test": "^8.6.1",
+    "@storybook/manager-api": "^8.6.1",
+    "@storybook/react": "^8.6.1",
+    "@storybook/react-vite": "^8.6.1",
+    "@storybook/test": "^8.6.1",
+    "@storybook/test-runner": "^0.21.3",
+    "@storybook/theming": "^8.6.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^20.17.19",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@types/react-hooks-helper": "^1.6.6",
-    "@types/react-redux": "^7.1.33",
-    "@types/react-transition-group": "^4.4.10",
-    "@types/styled-components": "^5.1.34",
+    "@types/react-redux": "^7.1.34",
+    "@types/react-transition-group": "^4.4.12",
+    "@types/stylis": "^4.2.7",
     "@types/testing-library__jest-dom": "^6.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/browser": "2.1.2",
-    "@vitest/coverage-v8": "2.1.2",
-    "babel-loader": "8.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.7",
+    "@vitest/coverage-v8": "^3.0.7",
+    "babel-loader": "8.4.1",
     "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-open-source": "^1.3.3",
-    "c8": "^7.12.0",
-    "chromatic": "^11.12.5",
-    "concurrently": "^8.2.2",
-    "eslint": "^8.27.0",
+    "babel-plugin-open-source": "^1.3.4",
+    "c8": "^7.14.0",
+    "chromatic": "^11.26.1",
+    "concurrently": "^9.1.2",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.10.1",
-    "happy-dom": "^14.12.3",
-    "husky": ">=6",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-storybook": "^0.11.3",
+    "happy-dom": "^17.1.8",
+    "husky": "^9.1.7",
     "istanbul": "^0.4.5",
     "jest-junit": "^16.0.0",
-    "lint-staged": ">=10",
-    "msw": "^2.2.2",
-    "msw-storybook-addon": "^2.0.3",
-    "playwright": "^1.46.0",
-    "prettier": "^3.2.5",
-    "react-is": "^18.3.1",
-    "react-test-renderer": "^18.3.1",
-    "storybook": "^8.6.0",
-    "vite": "^4.0.0",
-    "vite-plugin-svgr": "^4.2.0",
-    "vitest": "2.1.2",
+    "lint-staged": "^15.4.3",
+    "msw": "^2.7.3",
+    "msw-storybook-addon": "^2.0.4",
+    "playwright": "^1.50.1",
+    "prettier": "^3.5.2",
+    "react-is": "^19.0.0",
+    "react-test-renderer": "^19.0.0",
+    "storybook": "^8.6.1",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.7",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.3.3",
-    "wait-on": "^7.2.0"
+    "wait-on": "^8.0.2"
   },
   "msw": {
     "workerDirectory": "public"

diff --git a/src/assets/icons/sprite-map.svg → public/sprite-map.svg b/src/assets/icons/sprite-map.svg → public/sprite-map.svg
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -8,43 +8,45 @@ const Spacer = styled.span`
   padding-left: 1rem;
 `
 
-const StyledButton = styled.button<{
-  clear: boolean
-  large: boolean
-  withIcon: boolean
-  round: boolean
-}>(
-  ({ clear, large, round, withIcon, theme: { color, boxShadow, borderRadius } }) => css`
+type StyledButtonProps = {
+  $clear: boolean
+  $large: boolean
+  $withIcon: boolean
+  $round: boolean
+}
+
+const StyledButton = styled.button<StyledButtonProps>(
+  ({ $clear, $large, $round, $withIcon, theme: { color, boxShadow, borderRadius } }) => css`
     outline: none;
     border: 0;
     font-family: 'Hind';
-    border-radius: ${round ? borderRadius.xl : borderRadius.xs};
+    border-radius: ${$round ? borderRadius.xl : borderRadius.xs};
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: ${withIcon ? '0.7rem' : large ? '1.125rem 1rem' : '0.875rem 1rem'};
-    color: ${clear ? color.primaryText : color.buttonText};
+    padding: ${$withIcon ? '0.7rem' : $large ? '1.125rem 1rem' : '0.875rem 1rem'};
+    color: ${$clear ? color.primaryText : color.buttonText};
 
     transition: box-shadow 150ms ease-in;
     z-index: 1;
-    background-color: ${clear ? color.buttonClear : color.buttonPrimary};
+    background-color: ${$clear ? color.buttonClear : color.buttonPrimary};
 
     &:hover {
       cursor: pointer;
-      background-color: ${clear ? color.buttonClearHover : color.buttonPrimaryHover};
+      background-color: ${$clear ? color.buttonClearHover : color.buttonPrimaryHover};
     }
 
     &:focus {
       box-shadow: ${boxShadow.outerBorder};
     }
 
     &:disabled {
-      background-color: ${clear ? color.buttonClear : color.buttonPrimary};
+      background-color: ${$clear ? color.buttonClear : color.buttonPrimary};
       opacity: 0.4;
     }
 
     @media ${breakpoints.M} {
-      padding: ${withIcon ? '1rem' : large ? '1.125rem 1.5rem' : '0.875rem 1.5rem'};
+      padding: ${$withIcon ? '1rem' : $large ? '1.125rem 1.5rem' : '0.875rem 1.5rem'};
     }
   `
 )
@@ -81,7 +83,8 @@ type DefaultProps = {
   onClick?: () => void
 }
 
-type ButtonProps = DefaultProps & React.ComponentProps<typeof StyledButton>
+// Remove StyledButton props from ButtonProps to avoid duplicate props
+type ButtonProps = DefaultProps & Omit<React.ComponentProps<'button'>, keyof DefaultProps>
 
 /**
  * Primary UI component for user interaction
@@ -100,11 +103,11 @@ export const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
   return (
     <StyledButton
       type="button"
-      large={large}
-      clear={clear}
-      round={round}
+      $large={large}
+      $clear={clear}
+      $round={round}
+      $withIcon={!!icon}
       {...props}
-      withIcon={!!icon}
     >
       {icon && (
         <Icon color={clear ? color.primaryText : color.buttonText} size={iconSize} name={icon} />

diff --git a/src/components/Category/Category.tsx b/src/components/Category/Category.tsx
@@ -10,29 +10,29 @@ export type CategoryProps = {
   round?: boolean
 }
 
-const Container = styled.figure<{ round: boolean }>(
-  ({ round, theme: { color, borderRadius } }) => css`
+const Container = styled.figure<{ $round: boolean }>(
+  ({ $round, theme: { color, borderRadius } }) => css`
     display: flex;
     cursor: pointer;
     position: relative;
-    flex-direction: ${round ? 'column' : 'row'};
-    align-items: ${round ? 'center' : 'start'};
+    flex-direction: ${$round ? 'column' : 'row'};
+    align-items: ${$round ? 'center' : 'start'};
     border-radius: ${borderRadius.s};
-    background: ${round ? color.cardBackground : 'transparent'};
+    background: ${$round ? color.cardBackground : 'transparent'};
     height: 100%;
     width: 100%;
     min-width: 50px;
-    max-width: ${round ? '200px' : 'auto'};
-    max-height: ${round ? '200px' : '309px'};
+    max-width: ${$round ? '200px' : 'auto'};
+    max-height: ${$round ? '200px' : '309px'};
     margin: 0;
-    padding: ${round ? '1.5rem 2rem' : '0'};
+    padding: ${$round ? '1.5rem 2rem' : '0'};
 
     &:hover {
       opacity: 0.9;
     }
 
     @media ${breakpoints.M} {
-      padding: ${round ? '1.5rem 0' : '0'};
+      padding: ${$round ? '1.5rem 0' : '0'};
     }
   `
 )
@@ -108,7 +108,7 @@ const Squared = ({ title, photoUrl: url }: CategoryProps) => (
 
 export const Category = ({ photoUrl, title, round = false }: CategoryProps) => {
   return (
-    <Container round={round} data-testid={title}>
+    <Container $round={round} data-testid={title}>
       {round ? (
         <Rounded photoUrl={photoUrl} title={title} />
       ) : (

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -18,8 +18,8 @@ import { toEuro } from '../../helpers'
 import { Body } from '../typography/Body'
 import { Logo } from '../Logo'
 
-export const HeaderContainer = styled.div<{ sticky: boolean }>(
-  ({ sticky, theme: { color } }) => css`
+export const HeaderContainer = styled.div<{ $sticky: boolean }>(
+  ({ $sticky, theme: { color } }) => css`
     display: flex;
     justify-content: space-between;
     height: 56px;
@@ -37,7 +37,7 @@ export const HeaderContainer = styled.div<{ sticky: boolean }>(
     }
 
     @media ${breakpoints.M} {
-      position: ${sticky ? 'sticky' : 'relative'};
+      position: ${$sticky ? 'sticky' : 'relative'};
       height: 72px;
     }
   `
@@ -133,7 +133,7 @@ export const HeaderComponent = ({
   goToCheckout = () => {},
   saveItem = () => {},
 }: HeaderComponentProps) => (
-  <HeaderContainer data-testid="header" sticky={sticky}>
+  <HeaderContainer data-testid="header" $sticky={sticky}>
     <LogoContainer to="/" aria-label="go to home page">
       <Logo />
     </LogoContainer>

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,7 +1,5 @@
 import styled, { useTheme } from 'styled-components'
 
-import Icons from '../../assets/icons/sprite-map.svg'
-
 const StyledSVG = styled.svg`
   display: block;
 `
@@ -21,7 +19,7 @@ export const Icon = ({ name, color, size = '1.5rem' }: IconProps) => {
       height={size}
       style={{ minWidth: size }}
     >
-      <use xlinkHref={`${Icons}#${name}`} />
+      <use xlinkHref={`/sprite-map.svg#${name}`} />
     </StyledSVG>
   )
 }