React 18 migration

.storybook/main.tsx

@@ -10,15 +10,16 @@ module.exports = {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
     },
   },
-  stories: ['../src/**/*.stories.@(ts|js|tsx|mdx)'],
+  stories: ['../src/**/ui/FormField/*.stories.@(ts|js|tsx|mdx)'],
   addons: [
-    '@storybook/addon-knobs',
+    '@storybook/addon-controls',
     '@storybook/addon-storysource',
     '@storybook/addon-viewport',
-    'themeprovider-storybook',
+    '@storybook/addon-styling',
     '@storybook/addon-a11y',
     {
       name: '@storybook/addon-docs',
@@ -29,4 +30,5 @@ module.exports = {
       },
     },
   ],
+  framework: '@storybook/react',
 };

.storybook/preview.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import { createGlobalStyle } from 'styled-components';
-import { withKnobs } from '@storybook/addon-knobs';
-import { withThemesProvider } from 'themeprovider-storybook';
+import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 
 import { GlobalStyles } from '../src/theme/GlobalStyles';
 import lightTheme from '../src/theme/light';
 import darkTheme from '../src/theme/dark';
 
-const themes = [lightTheme, darkTheme];
-
 const StorybookStyle = createGlobalStyle`
   #root {
     height: 100vh;
@@ -19,16 +16,21 @@ const StorybookStyle = createGlobalStyle`
   }
 `;
 
-const withGlobalStyles = (Story: any) => (
-  <>
-    <GlobalStyles />
-    <StorybookStyle />
-    <Story />
-  </>
-);
-
 export const decorators = [
-  withGlobalStyles,
-  withThemesProvider(themes),
-  withKnobs
+  withThemeFromJSXProvider({
+    themes: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
+    defaultTheme: 'light',
+    Provider: ThemeProvider,
+    GlobalStyles: GlobalStyles,
+  }),
 ];
+
+export const argTypes = {
+  tag: { table: { disable: true } },
+  id: { table: { disable: true } },
+  className: { table: { disable: true } },
+  css: { table: { disable: true } },
+};