[DEV-374] design system update to React 18

commit 71218b3 Author: Katrin Fritz <[email protected]> Date: Fri Nov 18 14:28:44 2022 +0100 Update src/helpers/theme_provider.tsx Co-authored-by: Simon Schrape <[email protected]> commit a092ecb Author: Katrin Fritz <[email protected]> Date: Fri Nov 18 14:28:39 2022 +0100 Update src/helpers/theme_provider.tsx Co-authored-by: Simon Schrape <[email protected]> commit fd0940c Author: Katrin Fritz <[email protected]> Date: Fri Nov 18 14:11:59 2022 +0100 Update to React 18
betterplace · Nov 18, 2022 · 6c366f1 · 6c366f1
1 parent 46aae71
commit 6c366f1
Show file tree

Hide file tree

Showing 4 changed files with 503 additions and 344 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,6 @@
-import { StorybookConfig, Options } from '@storybook/core-common'
+import { Options } from '@storybook/core-common'
+import { StorybookConfig } from '@storybook/react/types'
+
 import { UserConfig } from 'vite'
 
 interface ExtendedConfig extends StorybookConfig {
@@ -15,6 +17,7 @@ const config: ExtendedConfig = {
     'storybook-addon-designs',
   ],
   framework: '@storybook/react',
+  reactOptions: { strictMode: true },
   core: {
     builder: '@storybook/builder-vite',
   },

diff --git a/package.json b/package.json
@@ -43,22 +43,22 @@
     "classnames": "^2.3.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remotedev": "^0.2.9",
     "rxjs": "^7.5.5"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-jest": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/react": "^6.5.12",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-docs": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-jest": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-vite": "^0.2.5",
+    "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
     "@swc/core": "^1.2.189",
     "@swc/jest": "^0.2.21",
@@ -96,8 +96,8 @@
     "postcss-apply": "^0.12.0",
     "postcss-nested": "^5.0.6",
     "postcss-nesting": "^10.1.7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remotedev": "^0.2.9",
     "rxjs": "^7.5.5",
     "storybook-addon-designs": "^6.3.1",

diff --git a/src/helpers/theme_provider.tsx b/src/helpers/theme_provider.tsx
@@ -48,13 +48,9 @@ export const ThemeProvider = ({ theme, children }: ThemeProviderProps) => {
 
 export const withThemeProvider = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Story: React.ComponentType<StoryContext<ReactFramework, any>>,
+  story: React.FunctionComponent<StoryContext<ReactFramework, any>>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   context: StoryContext<ReactFramework, any>
 ) => {
-  return (
-    <ThemeProvider theme={context.globals.theme}>
-      <Story {...context} />
-    </ThemeProvider>
-  )
+  return <ThemeProvider theme={context.globals.theme}>{story(context)}</ThemeProvider>
 }