feat: upd deps (#1154)

* feat: upd deps

* feat: refactor decorators

* feat: uninstall storybook/tests

* feat: uninstall @chromatic-com/storybook

* feat: add new playwright image

* feat: revert playwright version

* feat: refactor theme in docs stories

Author: NikitaCG

.storybook/decorators/docs/index.tsx

@@ -15,7 +15,7 @@ const b = cn('docs-decorator');
 
 export function DocsDecorator({children, context}: DocsDecoratorProps) {
     // @ts-expect-error
-    const theme = context.store?.globals?.globals.theme;
+    const theme = context.store.userGlobals.globals.theme;
 
     return (
         <div className={b()}>

.storybook/decorators/withContextProvider.tsx

@@ -0,0 +1,31 @@
+import {MobileProvider, Platform, ThemeProvider} from '@gravity-ui/uikit';
+
+import * as React from 'react';
+import type {Decorator} from '@storybook/react';
+
+import {Theme} from '../../src';
+import {GlobalThemeController} from '../theme/utils/global-theme-controller';
+
+export const withContextProvider: Decorator = (Story, context) => {
+    const theme = context.globals.theme;
+
+    // to set theme in docs
+    context.parameters.backgrounds.default = theme;
+    context.globals.backgrounds = {
+        value: theme === Theme.Light ? 'white' : 'black',
+    };
+    context.globals.background = theme;
+
+    // TODO: to switch docs theme dynamically in the future
+    // context.parameters.docs.theme = theme === 'light' ? CommonTheme.light : CommonTheme.dark;
+
+    return (
+        <GlobalThemeController>
+            <ThemeProvider theme={theme}>
+                <MobileProvider mobile={false} platform={Platform.BROWSER}>
+                    <Story {...context} />
+                </MobileProvider>
+            </ThemeProvider>
+        </GlobalThemeController>
+    );
+};

.storybook/decorators/withPageConstructorProvider.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type {Decorator} from '@storybook/react';
+import {PageConstructorProvider} from '../../src/containers/PageConstructor/Provider';
+
+export const withPageConstructorProvider: Decorator = (Story, context) => {
+    return (
+        <PageConstructorProvider
+            isMobile={context.globals.platform === 'mobile'}
+            locale={{lang: context.globals.lang}}
+            theme={context.globals.theme}
+        >
+            <Story {...context} />
+        </PageConstructorProvider>
+    );
+};

.storybook/main.ts

@@ -17,8 +17,10 @@ const config = {
     docs: {
         autodocs: true,
     },
+
     stories: ['./stories/**/*.mdx', '../src/**/__stories__/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
     staticDirs: ['./public'],
+
     addons: [
         '@storybook/preset-scss',
         {
@@ -33,6 +35,7 @@ const config = {
         '@storybook/addon-mdx-gfm',
         '@storybook/addon-webpack5-compiler-babel',
     ],
+
     webpackFinal: (storybookBaseConfig: any) => {
         storybookBaseConfig.plugins.push(
             new MonacoWebpackPlugin(),
@@ -65,6 +68,10 @@ const config = {
 
         return storybookBaseConfig;
     },
+
+    typescript: {
+        reactDocgen: 'react-docgen-typescript',
+    },
 };
 
 export default config;

.storybook/manager-head.html

@@ -1 +1,7 @@
 <link rel="icon" href="/story-assets/favicon.png" />
+<style type="text/css">
+  /* Hide create story button next to the search bar */
+  .search-field + div button {
+    display: none !important;
+  }
+</style>

.storybook/preview.tsx .storybook/preview.ts.storybook/preview.tsx renamed to .storybook/preview.ts

@@ -1,58 +1,19 @@
 import '../styles/storybook/index.scss';
 import '@gravity-ui/uikit/styles/styles.scss';
-import {MobileProvider, Platform, ThemeProvider} from '@gravity-ui/uikit';
 
 import * as React from 'react';
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
 import type {Decorator, Preview} from '@storybook/react';
 import {themeLight} from './theme/light';
-import {PageConstructorProvider} from '../src/containers/PageConstructor/Provider';
 import {withMobile} from './decorators/withMobile';
 import {withLang} from './decorators/withLang';
+import {withPageConstructorProvider} from './decorators/withPageConstructorProvider';
+import {withContextProvider} from './decorators/withContextProvider';
 import {DocsDecorator} from './decorators/docs';
 
-import {Theme} from '../src';
-import {GlobalThemeController} from './theme/utils/global-theme-controller';
-
 import '../styles/styles.scss';
 import '../styles/root.scss';
 
-const withContextProvider: Decorator = (Story, context) => {
-    const theme = context.globals.theme;
-
-    // to set theme in docs
-    context.parameters.backgrounds.default = theme;
-    context.globals.backgrounds = {
-        value: theme === Theme.Light ? 'white' : 'black',
-    };
-    context.globals.background = theme;
-
-    // TODO: to switch docs theme dynamically in the future
-    // context.parameters.docs.theme = theme === 'light' ? CommonTheme.light : CommonTheme.dark;
-
-    return (
-        <GlobalThemeController>
-            <ThemeProvider theme={theme}>
-                <MobileProvider mobile={false} platform={Platform.BROWSER}>
-                    <Story {...context} />
-                </MobileProvider>
-            </ThemeProvider>
-        </GlobalThemeController>
-    );
-};
-
-const withPageConstructorProvider: Decorator = (Story, context) => {
-    return (
-        <PageConstructorProvider
-            isMobile={context.globals.platform === 'mobile'}
-            locale={{lang: context.globals.lang}}
-            theme={context.globals.theme}
-        >
-            <Story {...context} />
-        </PageConstructorProvider>
-    );
-};
-
 const preview: Preview = {
     decorators: [withLang, withMobile, withContextProvider, withPageConstructorProvider],
 
@@ -126,7 +87,7 @@ const preview: Preview = {
         },
     },
 
-    tags: ['autodocs', 'autodocs'],
+    tags: ['autodocs', 'autodocs', 'autodocs'],
 };
 
 export default preview;