fix(deps): update ui dependencies (#493)

* fix(deps): update ui dependencies * fix problems --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Marine-Berthier <[email protected]>
smg-automotive · Feb 20, 2023 · 5cd9d0b · 5cd9d0b
1 parent 30a4b47
commit 5cd9d0b
Show file tree

Hide file tree

Showing 20 changed files with 457 additions and 176 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -114,15 +114,15 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "2.1.2",
-    "@chakra-ui/react": "2.5.0",
+    "@chakra-ui/react": "2.5.1",
     "@chakra-ui/theme-tools": "2.0.17",
-    "@emotion/react": "11.10.5",
-    "@emotion/styled": "11.10.5",
+    "@emotion/react": "11.10.6",
+    "@emotion/styled": "11.10.6",
     "@smg-automotive/i18n-pkg": "1.3.1",
     "@smg-automotive/phrase-pkg": "1.0.2",
     "@types/fs-extra": "11.0.1",
     "embla-carousel-react": "7.0.9",
-    "framer-motion": "9.0.2",
+    "framer-motion": "9.0.4",
     "fs-extra": "11.1.0",
     "merge-json-file": "1.0.1",
     "use-debounce": "9.0.3",

diff --git a/src/components/grid/GridItem.tsx b/src/components/grid/GridItem.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
 import {
   GridItem as ChakraGridItem,
+  ComponentWithAs,
   forwardRef,
   GridItemProps,
 } from '@chakra-ui/react';
 
-const GridItem = forwardRef<GridItemProps, 'div'>((props, ref) => {
-  return <ChakraGridItem {...props} ref={ref} />;
+const GridItem: ComponentWithAs<'div', GridItemProps> = forwardRef<
+  GridItemProps,
+  'div'
+>((props, ref) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return <ChakraGridItem {...(props as GridItemProps)} ref={ref} />;
 });
 
 GridItem.displayName = 'GridItem';

diff --git a/src/components/grid/index.tsx b/src/components/grid/index.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
-import { Grid as ChakraGrid, forwardRef, GridProps } from '@chakra-ui/react';
+import {
+  Grid as ChakraGrid,
+  ComponentWithAs,
+  forwardRef,
+  GridProps,
+} from '@chakra-ui/react';
 
-const Grid = forwardRef<GridProps, 'div'>((props, ref) => {
-  return <ChakraGrid {...props} ref={ref} />;
-});
+const Grid: ComponentWithAs<'div', GridProps> = forwardRef<GridProps, 'div'>(
+  (props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return <ChakraGrid {...(props as GridProps)} ref={ref} />;
+  }
+);
 
 Grid.displayName = 'Grid';
 

diff --git a/src/components/layout/app/AppLayout.tsx b/src/components/layout/app/AppLayout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { forwardRef } from '@chakra-ui/react';
+import { ComponentWithAs, forwardRef } from '@chakra-ui/react';
 
 import Grid, { GridProps } from 'src/components/grid';
 
@@ -9,15 +9,18 @@ const pageGirdArea = `
   "footer"
 `;
 
-const AppLayout = forwardRef<GridProps, 'div'>((props, ref) => {
+const AppLayout: ComponentWithAs<'div', GridProps> = forwardRef<
+  GridProps,
+  'div'
+>((props, ref) => {
   return (
     <Grid
       templateRows="min-content auto min-content"
       templateAreas={pageGirdArea}
       minHeight="100vh"
       ref={ref}
       textStyle="body"
-      {...props}
+      {...(props as GridProps)}
     />
   );
 });

diff --git a/src/components/layout/app/Content.tsx b/src/components/layout/app/Content.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { forwardRef } from '@chakra-ui/react';
+import { ComponentWithAs, forwardRef } from '@chakra-ui/react';
 
 import GridItem, { GridItemProps } from 'src/components/grid/GridItem';
 
-const AppLayoutContent = forwardRef<GridItemProps, 'div'>((props, ref) => {
-  return <GridItem area="content" ref={ref} {...props} />;
+const AppLayoutContent: ComponentWithAs<'div', GridItemProps> = forwardRef<
+  GridItemProps,
+  'div'
+>((props, ref) => {
+  return <GridItem area="content" ref={ref} {...(props as GridItemProps)} />;
 });
 
 AppLayoutContent.displayName = 'AppLayoutContent';

diff --git a/src/components/layout/app/Footer.tsx b/src/components/layout/app/Footer.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { forwardRef } from '@chakra-ui/react';
+import { ComponentWithAs, forwardRef } from '@chakra-ui/react';
 
 import GridItem, { GridItemProps } from 'src/components/grid/GridItem';
 
-const AppLayoutFooter = forwardRef<GridItemProps, 'div'>((props, ref) => {
-  return <GridItem area="footer" ref={ref} {...props} />;
+const AppLayoutFooter: ComponentWithAs<'div', GridItemProps> = forwardRef<
+  GridItemProps,
+  'div'
+>((props, ref) => {
+  return <GridItem area="footer" ref={ref} {...(props as GridItemProps)} />;
 });
 
 AppLayoutFooter.displayName = 'AppLayoutFooter';

diff --git a/src/components/layout/app/Header.tsx b/src/components/layout/app/Header.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { forwardRef } from '@chakra-ui/react';
+import { ComponentWithAs, forwardRef } from '@chakra-ui/react';
 
 import GridItem, { GridItemProps } from 'src/components/grid/GridItem';
 
-const AppLayoutHeader = forwardRef<GridItemProps, 'div'>((props, ref) => {
-  return <GridItem area="header" ref={ref} {...props} />;
+const AppLayoutHeader: ComponentWithAs<'div', GridItemProps> = forwardRef<
+  GridItemProps,
+  'div'
+>((props, ref) => {
+  return <GridItem area="header" ref={ref} {...(props as GridItemProps)} />;
 });
 
 AppLayoutHeader.displayName = 'AppLayoutFooter';

diff --git a/src/themes/components/accordion.ts b/src/themes/components/accordion.ts
@@ -1,4 +1,8 @@
-import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
+import {
+  ComponentStyleConfig,
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/react';
 import { accordionAnatomy as parts } from '@chakra-ui/anatomy';
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys);
@@ -110,4 +114,4 @@ export default defineMultiStyleConfig({
   defaultProps: {
     variant: 'light',
   },
-});
+}) as ComponentStyleConfig;
diff --git a/src/themes/components/alert.ts b/src/themes/components/alert.ts
@@ -1,5 +1,9 @@
 import { cssVar, mode } from '@chakra-ui/theme-tools';
-import { PartsStyleFunction, PartsStyleObject } from '@chakra-ui/react';
+import {
+  ComponentStyleConfig,
+  PartsStyleFunction,
+  PartsStyleObject,
+} from '@chakra-ui/react';
 import { alertAnatomy as parts } from '@chakra-ui/anatomy';
 
 const $fg = cssVar('alert-fg');
@@ -59,4 +63,4 @@ export default {
   baseStyle,
   variants,
   defaultProps,
-};
+} as ComponentStyleConfig;
diff --git a/src/themes/components/avatar.ts b/src/themes/components/avatar.ts
@@ -1,4 +1,4 @@
-import type { SystemStyleObject } from '@chakra-ui/react';
+import type { ComponentStyleConfig, SystemStyleObject } from '@chakra-ui/react';
 
 const baseStyle: SystemStyleObject = {
   cursor: 'pointer',
@@ -10,4 +10,4 @@ const baseStyle: SystemStyleObject = {
 
 export default {
   baseStyle,
-};
+} as ComponentStyleConfig;
diff --git a/src/themes/components/badge.ts b/src/themes/components/badge.ts
@@ -1,4 +1,4 @@
-import { defineStyle } from '@chakra-ui/react';
+import { ComponentStyleConfig, defineStyle } from '@chakra-ui/react';
 
 const baseStyle = defineStyle(({ theme }) => {
   const color = theme.name === 'AutoScout 24' ? 'black' : 'white';
@@ -16,4 +16,4 @@ const baseStyle = defineStyle(({ theme }) => {
 
 export default {
   baseStyle,
-};
+} as ComponentStyleConfig;
diff --git a/src/themes/components/divider.ts b/src/themes/components/divider.ts
@@ -1,4 +1,4 @@
-import type { SystemStyleObject } from '@chakra-ui/react';
+import type { ComponentStyleConfig, SystemStyleObject } from '@chakra-ui/react';
 
 const baseStyle: SystemStyleObject = {
   borderColor: 'gray.100',
@@ -8,4 +8,4 @@ const baseStyle: SystemStyleObject = {
 
 export default {
   baseStyle,
-};
+} as ComponentStyleConfig;
diff --git a/src/themes/components/index.ts b/src/themes/components/index.ts
@@ -1,3 +1,5 @@
+import { ComponentStyleConfig } from '@chakra-ui/react';
+
 import VehicleReference from './vehicleReference';
 import Tooltip from './tooltip';
 import Textarea from './textarea';
@@ -30,7 +32,7 @@ import ArticleTeaser from './articleTeaser';
 import Alert from './alert';
 import Accordion from './accordion';
 
-export const components = {
+export const components: Record<string, ComponentStyleConfig> = {
   Accordion,
   Alert,
   ArticleTeaser,

diff --git a/src/themes/components/list.ts b/src/themes/components/list.ts
@@ -1,4 +1,8 @@
-import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
+import {
+  ComponentStyleConfig,
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/react';
 import { listAnatomy as parts } from '@chakra-ui/anatomy';
 
 const { defineMultiStyleConfig, definePartsStyle } =
@@ -37,4 +41,4 @@ export default defineMultiStyleConfig({
   defaultProps: {
     variant: 'md',
   },
-});
+}) as ComponentStyleConfig;
diff --git a/src/themes/components/menu.ts b/src/themes/components/menu.ts
@@ -1,4 +1,8 @@
-import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
+import {
+  ComponentStyleConfig,
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/react';
 import { menuAnatomy as parts } from '@chakra-ui/anatomy';
 
 import { opacity } from '../shared/opacity';
@@ -46,4 +50,4 @@ const baseStyle = definePartsStyle({
 
 export default defineMultiStyleConfig({
   baseStyle,
-});
+}) as ComponentStyleConfig;
diff --git a/src/themes/components/modal.ts b/src/themes/components/modal.ts
@@ -1,5 +1,9 @@
 import { mode } from '@chakra-ui/theme-tools';
-import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
+import {
+  ComponentStyleConfig,
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/react';
 import { modalAnatomy as parts } from '@chakra-ui/anatomy';
 
 import { opacity } from '../shared/opacity';
@@ -93,4 +97,4 @@ export default defineMultiStyleConfig({
   baseStyle,
   sizes,
   defaultProps: { size: 'md' },
-});
+}) as ComponentStyleConfig;
diff --git a/src/themes/components/spinner.ts b/src/themes/components/spinner.ts
@@ -1,5 +1,9 @@
 import { cssVar } from '@chakra-ui/theme-tools';
-import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+import {
+  ComponentStyleConfig,
+  defineStyle,
+  defineStyleConfig,
+} from '@chakra-ui/react';
 
 const $size = cssVar('spinner-size');
 
@@ -29,6 +33,6 @@ const spinnerTheme = defineStyleConfig({
   defaultProps: {
     size: 'sm',
   },
-});
+}) as ComponentStyleConfig;
 
 export default spinnerTheme;
diff --git a/src/themes/components/textarea.ts b/src/themes/components/textarea.ts
@@ -1,4 +1,5 @@
 import type {
+  ComponentStyleConfig,
   SystemStyleInterpolation,
   SystemStyleObject,
 } from '@chakra-ui/react';
@@ -28,4 +29,4 @@ export default {
   baseStyle,
   variants,
   defaultProps,
-};
+} as ComponentStyleConfig;
diff --git a/src/themes/components/tooltip.ts b/src/themes/components/tooltip.ts
@@ -1,5 +1,9 @@
 import { cssVar } from '@chakra-ui/theme-tools';
-import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+import {
+  ComponentStyleConfig,
+  defineStyle,
+  defineStyleConfig,
+} from '@chakra-ui/react';
 
 const $bg = cssVar('tooltip-bg');
 const $arrowBg = cssVar('popper-arrow-bg');
@@ -17,4 +21,4 @@ const baseStyle = defineStyle(() => {
 
 export default defineStyleConfig({
   baseStyle,
-});
+}) as ComponentStyleConfig;