fix type errors

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import type { Preview } from '@storybook/react'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import type { UserEvent } from '@storybook/test'
+import { userEvent } from '@testing-library/user-event'
 import { mswLoader } from 'msw-storybook-addon'
 import { ThemeProvider } from 'styled-components'
 
@@ -72,7 +72,7 @@ const preview: Preview = {
 
 declare module 'storybook/internal/csf' {
   interface StoryContext {
-    userEvent: UserEvent;
+    userEvent: ReturnType<typeof userEvent.setup>
   }
 }
 export default preview

package.json

@@ -3,43 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
-  "dependencies": {
-    "@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.5.0",
-    "react-lottie-player": "^2.1.0",
-    "react-multi-carousel": "^2.8.5",
-    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.2.0",
-    "react-transition-group": "^4.4.5",
-    "styled-components": "^6.1.15",
-    "stylis": "^4.3.6",
-    "typescript": "^5.7.3",
-    "use-dark-mode": "^2.3.1"
-  },
   "scripts": {
-    "start": "vite",
     "build": "tsc && vite build",
-    "serve": "vite preview",
-    "test": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "test:ci": "vitest run",
-    "storybook": "storybook dev -p 6006",
+    "build-all": "yarn build && yarn build-storybook",
     "build-storybook": "storybook build --output-dir build/storybook",
     "build-storybook:test": "storybook build --output-dir build/storybook --test",
-    "build-all": "yarn build && yarn build-storybook",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --only-changed",
-    "prepare": "husky",
     "lint": "eslint --fix .",
-    "prettier": "prettier --write .",
     "pre-commit": "lint-staged",
+    "prepare": "husky",
+    "prettier": "prettier --write .",
+    "serve": "vite preview",
+    "start": "vite",
+    "check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest",
     "test-storybook": "test-storybook",
-    "test-storybook:json": "test-storybook --index-json",
     "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"yarn build-storybook:test && npx serve build/storybook --listen 6006 --no-request-logging\" \"wait-on tcp:6006 && yarn test-storybook\"",
-    "test-storybook:json:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"yarn build-storybook:test && npx serve build/storybook --listen 6006 --no-request-logging\" \"wait-on tcp:6006 && SKIP_SNAPSHOTS=true yarn test-storybook:json\""
+    "test-storybook:json": "test-storybook --index-json",
+    "test-storybook:json:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"yarn build-storybook:test && npx serve build/storybook --listen 6006 --no-request-logging\" \"wait-on tcp:6006 && SKIP_SNAPSHOTS=true yarn test-storybook:json\"",
+    "test:ci": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --fix",
+    "*.{html,md}": "prettier --write"
   },
   "browserslist": {
     "production": [
@@ -53,6 +41,26 @@
       "last 1 safari version"
     ]
   },
+  "resolutions": {
+    "@use-it/event-listener@npm:^0.1.2": "patch:@use-it/event-listener@npm%3A0.1.7#~/.yarn/patches/@use-it-event-listener-npm-0.1.7-56ef42a654.patch"
+  },
+  "dependencies": {
+    "@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.5.0",
+    "react-lottie-player": "^2.1.0",
+    "react-multi-carousel": "^2.8.5",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.2.0",
+    "react-transition-group": "^4.4.5",
+    "styled-components": "^6.1.15",
+    "stylis": "^4.3.6",
+    "typescript": "^5.7.3",
+    "use-dark-mode": "^2.3.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.26.9",
     "@chromatic-com/storybook": "^3.2.5",
@@ -119,15 +127,8 @@
     "vitest-canvas-mock": "^0.3.3",
     "wait-on": "^8.0.2"
   },
+  "packageManager": "yarn@4.2.1",
   "msw": {
     "workerDirectory": "public"
-  },
-  "lint-staged": {
-    "*.{ts,tsx}": "eslint --fix",
-    "*.{html,md}": "prettier --write"
-  },
-  "packageManager": "yarn@4.2.1",
-  "resolutions": {
-    "@use-it/event-listener@npm:^0.1.2": "patch:@use-it/event-listener@npm%3A0.1.7#~/.yarn/patches/@use-it-event-listener-npm-0.1.7-56ef42a654.patch"
   }
-}
+}

src/components/Portal.tsx

@@ -7,7 +7,7 @@ type Props = {
 }
 
 export const Portal: React.FC<React.PropsWithChildren<Props>> = ({ children, selector }) => {
-  const ref = useRef<Element>()
+  const ref = useRef<Element | null>(null)
 
   useEffect(() => {
     const element = document.querySelector<Element>(selector)

src/components/ShoppingCart/OrderSummary/OrderSummary.styles.tsx

@@ -2,15 +2,15 @@ import styled, { css } from 'styled-components'
 
 import { Heading } from '../../typography/Heading'
 
-export const StyledHeading = styled(Heading)(
+export const StyledHeading = styled(Heading)<{ $withMargin?: boolean }>(
   ({
-    withMargin = false,
+    $withMargin = false,
     theme: {
       typography: { fontSize },
     },
   }) => css`
     font-size: ${fontSize.heading4};
-    margin-bottom: ${withMargin ? '1.5rem' : 0};
+    margin-bottom: ${$withMargin ? '1.5rem' : 0};
   `
 )
 

src/components/ShoppingCart/OrderSummary/OrderSummary.tsx

@@ -24,7 +24,7 @@ export const OrderSummary = ({ cartItems }: OrderSummaryProps) => {
   return (
     <>
       <OrderSummaryContainer>
-        <StyledHeading level={2} withMargin>
+        <StyledHeading level={2} $withMargin>
           Your order
         </StyledHeading>
         <CartItemsContainer>

src/components/typography/Body.tsx

@@ -19,16 +19,26 @@ const BodyBase = styled.p<StyledBodyProps>(
   `
 )
 
+type AsElement = 'span' | 'p' | 'label' | 'figcaption'
+
+type ElementProps<T extends AsElement> = T extends 'label' 
+  ? React.LabelHTMLAttributes<HTMLLabelElement>
+  : T extends 'span'
+  ? React.HTMLAttributes<HTMLSpanElement>
+  : T extends 'p'
+  ? React.HTMLAttributes<HTMLParagraphElement>
+  : React.HTMLAttributes<HTMLElement>
+
 type DefaultProps = {
   className?: string
   size?: 'S' | 'XS' | 'XXS'
   fontWeight?: 'regular' | 'medium' | 'bold' | 'black'
-  type?: 'span' | 'p' | 'label' | 'figcaption'
+  type?: AsElement
   color?: string
   children: React.ReactNode | string
 }
 
-type BodyProps = DefaultProps & Omit<React.ComponentProps<'p'>, keyof DefaultProps>
+type BodyProps = DefaultProps & ElementProps<AsElement>
 
 export const Body: React.FC<React.PropsWithChildren<BodyProps>> = ({
   size = '',

src/pages/HomePage/components/RestaurantsSection/RestaurantsSection.tsx

@@ -22,7 +22,7 @@ type RestaurantsSectionProps = {
   title: string
 }
 
-const CustomArrow = (props: CarouselProps & ArrowProps & { isNext?: boolean }) => {
+const CustomArrow = (props: Partial<CarouselProps & ArrowProps> & { isNext?: boolean }) => {
   // filter out unnecessary props coming from react-multi-carousel
   const { carouselState, rtl, isNext, ...rest } = props
   return isNext ? (

src/pages/RestaurantDetailPage/RestaurantDetailPage.tsx

@@ -1,4 +1,4 @@
-import { VFC, useState } from 'react'
+import { useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import styled, { css } from 'styled-components'
 
@@ -43,7 +43,7 @@ const StyledBadge = styled(Badge)(
   `
 )
 
-export const RestaurantDetailPage: VFC = () => {
+export const RestaurantDetailPage = () => {
   const { id = '' } = useParams<'id'>()
 
   const navigate = useNavigate()