feat: up packages (#353)

* chore: update playwright docker image

* feat: up packages [1]

* feat: up storybook to @8

* feat: up packages [2]

* fix: lint

* chore: playwright update

Author: Lunory

.github/workflows/playwright.yml

@@ -8,12 +8,13 @@ jobs:
     name: Test component
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.45.3-jammy
+      image: mcr.microsoft.com/playwright:v1.49.0-jammy
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          cache: npm
       - name: Install dependencies
         run: npm ci
       - name: Run Playwright tests

.github/workflows/pr-storybook-tests.yml

@@ -8,10 +8,10 @@ jobs:
     name: Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         run: npm ci
       - name: Install Playwright Browsers

.storybook/focus-addon/register.tsx

@@ -1,11 +1,13 @@
-import {addons, } from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 addons.register('initialFocus', () => {
     addons.getChannel().on('currentStoryWasSet', () => focusIframe());
-})
+});
 
 const focusIframe = () => {
-    const previewIframe: HTMLInputElement | null = document.querySelector('#storybook-preview-iframe');
+    const previewIframe: HTMLInputElement | null = document.querySelector(
+        '#storybook-preview-iframe',
+    );
 
     previewIframe?.focus?.();
-}
+};

.storybook/main.ts

@@ -3,6 +3,7 @@ import type {StorybookConfig} from '@storybook/react-webpack5';
 const config: StorybookConfig = {
     staticDirs: ['./assets'],
     stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+
     addons: [
         '@storybook/addon-links',
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
@@ -12,17 +13,24 @@ const config: StorybookConfig = {
         './theme-addon/register.tsx',
         './focus-addon/register.tsx',
         '@storybook/addon-a11y',
+        '@storybook/addon-webpack5-compiler-babel',
+        '@chromatic-com/storybook'
     ],
+
     framework: {
         name: '@storybook/react-webpack5',
         options: {}
     },
-    docs: {
-        autodocs: false,
-    },
+
+    docs: {},
+
     core: {
         disableTelemetry: true,
     },
+
+    typescript: {
+        reactDocgen: 'react-docgen-typescript'
+    }
 };
 
 export default config;

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 import {themes} from './theme';
 
 addons.setConfig({

.storybook/theme-addon/register.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {addons, types} from '@storybook/addons';
-import {useGlobals, type API} from '@storybook/api';
+import {addons, types} from '@storybook/manager-api';
+import {useGlobals, type API} from '@storybook/manager-api';
 import {getThemeType} from '@gravity-ui/uikit';
 import {themes} from '../theme';