Skip to content

Commit ebade8c

Browse files
inomdzhoninomdzhon
authored
tech: migrate storybook from 8 to 9 (#8635)
h2. Описание см. https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-8x-to-900 h2. Изменения На что обратить внимание: - Удалил `storybook` из правила `'no-restricted-imports'` в `packages/vkui/eslintrc.cjs`, т.к. конфликтует с тем, что многие импорты теперь идут из пакета самого `storybook`. - Для аддона `storybook-theme` тип теперь `TOOLEXTRA` вместо `experimental_SIDEBAR_TOP`. > **Note** > Теперь кнопка находится справа сверху. - Заменил `@storybook/react-webpack5` на `@storybook/react-vite` – SWC прикрутить опции нет, но тем не менее собирается за 15 секунд на M1, что прилично. - Перенёс все зависимости `storybook` в корневой `package.json`. В `tools/storybook-addon-cartesian` оставил только необходимое. Заодно сделал дедпуликацию пакетов. - `@storybook/addon-console` пока пришлось отключить, т.к. не поддерживает 9 версию (storybookjs/storybook-addon-console#86) h2. Release notes h2. Документация - **Storybook** обновлён с 8 до 9 версии
1 parent 8a92a7f commit ebade8c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+425
-1307
lines changed

‎package.json

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,13 @@
1919
"@size-limit/file": "^11.2.0",
2020
"@size-limit/webpack": "^11.2.0",
2121
"@size-limit/webpack-css": "^11.2.0",
22-
"@storybook/addon-console": "^3.0.0",
23-
"@storybook/addon-designs": "^8.2.1",
22+
"@storybook/addon-a11y": "9.0.4",
23+
"@storybook/addon-actions": "9.0.4",
24+
"@storybook/addon-console": "3.0.0",
25+
"@storybook/addon-designs": "10.0.1",
26+
"@storybook/addon-docs": "9.0.4",
27+
"@storybook/addon-links": "9.0.4",
28+
"@storybook/react-vite": "9.0.4",
2429
"@swc/cli": "^0.7.7",
2530
"@swc/core": "1.11.29",
2631
"@swc/jest": "^0.2.38",
@@ -33,7 +38,7 @@
3338
"@types/node": "^22.15.29",
3439
"@types/react": "^19.0.1",
3540
"@types/react-dom": "^19.0.1",
36-
"@types/webpack": "^5.28.5",
41+
"@types/semver": "^7.7.0",
3742
"@typescript-eslint/eslint-plugin": "^7.5.0",
3843
"@typescript-eslint/parser": "^7.5.0",
3944
"@vkontakte/eslint-plugin": "^2.0.0",
@@ -86,6 +91,7 @@
8691
"semver": "^7.7.2",
8792
"shx": "^0.4.0",
8893
"size-limit": "^11.2.0",
94+
"storybook": "9.0.4",
8995
"style-loader": "^4.0.0",
9096
"stylelint": "^16.20.0",
9197
"stylelint-config-recess-order": "^6.0.0",

‎packages/vkui/.eslintrc.cjs

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ module.exports = {
4646
'styles',
4747
'testing',
4848
'types',
49-
'storybook',
5049
],
5150
patterns: [
5251
'@vkontakte/icons/dist/*',
@@ -59,7 +58,6 @@ module.exports = {
5958
'styles/*',
6059
'testing/*',
6160
'types/*',
62-
'storybook/*',
6361
],
6462
},
6563
],

‎packages/vkui/.storybook/addons/colorScheme/ColorSchemeSwitch.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Icon16Moon, Icon16Sun } from '@vkontakte/icons';
3-
import { useGlobals } from '@storybook/manager-api';
4-
import { IconButton } from '@storybook/components';
3+
import { useGlobals } from 'storybook/manager-api';
4+
import { IconButton } from 'storybook/internal/components';
55
import { PARAM_KEY } from './constants';
66

77
export const ColorSchemeSwitch = () => {

‎packages/vkui/.storybook/addons/colorScheme/register.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons, types } from '@storybook/manager-api';
1+
import { addons, types } from 'storybook/manager-api';
22
import { ColorSchemeSwitch } from './ColorSchemeSwitch';
33
import { ADDON_ID } from './constants';
44

‎packages/vkui/.storybook/addons/customPanelHeaderAfter/HasCustomPanelHeaderAfter.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { useGlobals } from '@storybook/manager-api';
3-
import { IconButton } from '@storybook/components';
2+
import { useGlobals } from 'storybook/manager-api';
3+
import { IconButton } from 'storybook/internal/components';
44
import { BrowserIcon } from '@storybook/icons';
55
import { PARAM_KEY } from './constants';
66

‎packages/vkui/.storybook/addons/customPanelHeaderAfter/register.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons, types } from '@storybook/manager-api';
1+
import { addons, types } from 'storybook/manager-api';
22
import { HasCustomPanelHeaderAfter } from './HasCustomPanelHeaderAfter';
33
import { ADDON_ID } from './constants';
44

‎packages/vkui/.storybook/addons/documentation-button/DocumentationButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { IconButton } from '@storybook/components';
2-
import { useGlobals, useStorybookState } from '@storybook/manager-api';
1+
import { IconButton } from 'storybook/internal/components';
2+
import { useGlobals, useStorybookState } from 'storybook/manager-api';
33
import { DocumentIcon } from '@storybook/icons';
44
import * as React from 'react';
55

‎packages/vkui/.storybook/addons/documentation-button/register.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons, types } from '@storybook/manager-api';
1+
import { addons, types } from 'storybook/manager-api';
22
import { ADDON_ID } from './constants';
33
import { DocumentationButton } from './DocumentationButton';
44

‎packages/vkui/.storybook/addons/pointer/HasPointer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { useGlobals } from '@storybook/manager-api';
3-
import { IconButton } from '@storybook/components';
2+
import { useGlobals } from 'storybook/manager-api';
3+
import { IconButton } from 'storybook/internal/components';
44
import { ButtonIcon } from '@storybook/icons';
55
import { PARAM_KEY } from './constants';
66

‎packages/vkui/.storybook/addons/pointer/register.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons, types } from '@storybook/manager-api';
1+
import { addons, types } from 'storybook/manager-api';
22
import { HasPointer } from './HasPointer';
33
import { ADDON_ID } from './constants';
44

‎packages/vkui/.storybook/addons/source-button/SourceButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { IconButton } from '@storybook/components';
2-
import { useGlobals, useStorybookState } from '@storybook/manager-api';
1+
import { IconButton } from 'storybook/internal/components';
2+
import { useGlobals, useStorybookState } from 'storybook/manager-api';
33
import { GithubIcon } from '@storybook/icons';
44
import * as React from 'react';
55

‎packages/vkui/.storybook/addons/source-button/register.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons, types } from '@storybook/manager-api';
1+
import { addons, types } from 'storybook/manager-api';
22
import { ADDON_ID } from './constants';
33
import { SourceButton } from './SourceButton';
44

‎packages/vkui/.storybook/addons/source-tab/SourceTab.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
2-
import type { StoryId } from '@storybook/types';
3-
import { AddonPanel, SyntaxHighlighter } from '@storybook/components';
4-
import { SNIPPET_RENDERED } from '@storybook/docs-tools';
5-
import { useChannel } from '@storybook/manager-api';
2+
import type { StoryId } from 'storybook/internal/types';
3+
import { AddonPanel, SyntaxHighlighter } from 'storybook/internal/components';
4+
import { SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
5+
import { useChannel } from 'storybook/manager-api';
66

77
type SnippetRenderedArgs = {
88
id: StoryId;

‎packages/vkui/.storybook/addons/source-tab/register.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { addons, types } from '@storybook/manager-api';
2+
import { addons, types } from 'storybook/manager-api';
33
import { SourceTab } from './SourceTab';
44
import { ADDON_ID, PANEL_ID } from './constants';
55

‎packages/vkui/.storybook/addons/storybook-theme/StorybookTheme.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
2-
import { useGlobals, addons, useStorybookApi } from '@storybook/manager-api';
3-
import { styled } from '@storybook/theming';
4-
import { SET_GLOBALS } from '@storybook/core-events';
5-
import { IconButton } from '@storybook/components';
2+
import { useGlobals, addons, useStorybookApi } from 'storybook/manager-api';
3+
import { styled } from 'storybook/theming';
4+
import { SET_GLOBALS } from 'storybook/internal/core-events';
5+
import { IconButton } from 'storybook/internal/components';
66
import { SunIcon, MoonIcon } from '@storybook/icons';
77
import { PARAM_KEY, SET_STORYBOOK_THEME } from './constants';
88
import { vkuiDarkTheme, vkuiLightTheme } from './vkuiThemes';

‎packages/vkui/.storybook/addons/storybook-theme/register.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons, types } from '@storybook/manager-api';
1+
import { addons, types } from 'storybook/manager-api';
22
import { StorybookTheme, getLocalStorageValue } from './StorybookTheme';
33
import { vkuiDarkTheme, vkuiLightTheme } from './vkuiThemes';
44
import { ADDON_ID } from './constants';
@@ -12,7 +12,8 @@ addons.setConfig({
1212

1313
addons.register(ADDON_ID, () => {
1414
addons.add(ADDON_ID, {
15-
type: types.experimental_SIDEBAR_TOP,
15+
type: types.TOOLEXTRA,
16+
title: 'Тема всей страницы',
1617
render: StorybookTheme,
1718
});
1819
});

‎packages/vkui/.storybook/addons/storybook-theme/vkuiThemes.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { create } from '@storybook/theming';
1+
import { create } from 'storybook/theming';
22
import darkLogo from './vkui-logo-dark.svg';
33
import lightLogo from './vkui-logo-light.svg';
44

‎packages/vkui/.storybook/helpers/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ function extractComponentName(path: string): string {
55
return match ? match[1] : '';
66
}
77

8-
export function getStyleGuideComponents() {
9-
const componentsSection = styleguideConfig.sections.find(
8+
export function getStyleGuideComponents(): string[] {
9+
const componentsSection = styleguideConfig?.sections?.find(
1010
(section) => section.name === 'Компоненты',
1111
);
1212

13-
const handleSections = (sections, resultArray: string[]) => {
13+
const handleSections = (sections, resultArray) => {
1414
sections.forEach((section) => {
1515
const components =
1616
typeof section.components === 'function' ? section.components() : section.components;
@@ -22,7 +22,7 @@ export function getStyleGuideComponents() {
2222
};
2323

2424
const allComponents = [];
25-
handleSections(componentsSection.sections, allComponents);
25+
handleSections(componentsSection?.sections, allComponents);
2626

2727
return allComponents;
2828
}

‎packages/vkui/.storybook/main.ts

Lines changed: 63 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,94 @@
1-
import { Configuration, DefinePlugin } from 'webpack';
2-
import type { Options } from '@swc/core';
3-
import path from 'path';
4-
import { readFileSync } from 'fs';
5-
import type { StorybookConfig } from '@storybook/react-webpack5';
6-
import WebpackCommonConfig from '../../../webpack.common.config';
1+
import path from 'node:path';
2+
import { readFileSync } from 'node:fs';
3+
import { fileURLToPath } from 'node:url';
4+
import { createRequire } from 'node:module';
5+
import type { StorybookConfig } from '@storybook/react-vite';
6+
import postcssGlobalData from '@csstools/postcss-global-data';
7+
import restructureVariable from '@project-tools/postcss-restructure-variable';
8+
import autoprefixer from 'autoprefixer';
9+
import postcssCustomMedia from 'postcss-custom-media';
10+
import postcssGapProperties from 'postcss-gap-properties';
11+
import cssImport from 'postcss-import';
712
import { getStyleGuideComponents } from './helpers';
813

9-
const cssRegExpString = /\.css$/.toString();
10-
11-
function getCssRulesFromConfig(config: Configuration) {
12-
return config.module!.rules?.filter((rule) =>
13-
rule === '...' ? false : rule.test?.toString() === cssRegExpString,
14-
);
15-
}
16-
17-
function excludeCssRulesFromConfig(config: Configuration) {
18-
return config.module!.rules?.filter((rule) =>
19-
rule === '...' ? false : rule.test?.toString() !== cssRegExpString,
20-
);
21-
}
14+
const require = createRequire(import.meta.url);
15+
const getAbsolutePath = (value) => path.dirname(require.resolve(path.join(value, 'package.json')));
16+
const rootDirectory = path.join(fileURLToPath(import.meta.url), '../../../..');
2217

2318
const config: StorybookConfig = {
2419
stories: ['../docs/**/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
25-
2620
addons: [
2721
'./addons/source-tab',
2822
getAbsolutePath('@storybook/addon-links'),
29-
getAbsolutePath('@storybook/addon-essentials'),
30-
getAbsolutePath('@storybook/addon-interactions'),
3123
getAbsolutePath('@storybook/addon-a11y'),
3224
getAbsolutePath('@storybook/addon-designs'),
25+
getAbsolutePath('@storybook/addon-docs'),
3326
getAbsolutePath('@project-tools/storybook-addon-cartesian'),
3427
'./addons/colorScheme',
3528
'./addons/pointer',
3629
'./addons/customPanelHeaderAfter',
3730
'./addons/source-button',
3831
'./addons/documentation-button',
3932
'./addons/storybook-theme',
40-
getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
4133
],
42-
43-
framework: {
44-
name: getAbsolutePath('@storybook/react-webpack5'),
45-
options: {
46-
fastRefresh: true,
47-
builder: {
48-
useSWC: true,
49-
fsCache: true,
50-
},
51-
},
52-
},
53-
54-
swc: (config: Options): Options => ({
55-
...config,
56-
jsc: {
57-
...config.jsc,
58-
transform: {
59-
react: {
60-
runtime: 'automatic',
61-
},
62-
},
63-
},
64-
}),
65-
66-
webpackFinal: async (config) => {
67-
const commonCssRules = getCssRulesFromConfig(WebpackCommonConfig) ?? [];
68-
const rulesWithoutCss = excludeCssRulesFromConfig(config) ?? [];
69-
70-
config.module!.rules = [...rulesWithoutCss, ...commonCssRules];
34+
framework: getAbsolutePath('@storybook/react-vite'),
35+
viteFinal: async (config) => {
36+
const { mergeConfig } = await import('vite');
7137
const packageJSON = JSON.parse(readFileSync('./package.json', 'utf-8'));
72-
config.plugins.push(
73-
new DefinePlugin({
38+
39+
return mergeConfig(config, {
40+
define: {
7441
__STYLEGUIDE_COMPONENTS_CONFIG__: JSON.stringify(getStyleGuideComponents()),
7542
__STYLEGUIDE_URL__: JSON.stringify(packageJSON.homepage),
7643
__COMPONENTS_SOURCE_BASE_URL__: JSON.stringify(
7744
`${packageJSON.repository.url.replace('.git', '')}/tree/master/${packageJSON.repository.directory}`,
7845
),
79-
}),
80-
);
46+
},
47+
css: {
48+
postcss: {
49+
plugins: [
50+
cssImport(),
8151

82-
return config;
83-
},
52+
restructureVariable(
53+
[
54+
'./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css',
55+
'./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css',
56+
'./node_modules/@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css',
57+
'./node_modules/@vkontakte/vkui-tokens/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css',
58+
'./node_modules/@vkontakte/vkui-tokens/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css',
59+
'./node_modules/@vkontakte/vkui-tokens/themes/vkCom/cssVars/declarations/onlyVariablesLocal.css',
60+
'./node_modules/@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css',
61+
].map((pathSegment) => path.join(rootDirectory, pathSegment)),
62+
),
63+
64+
// Сбор данных для работы некоторых postcss плагинов
65+
postcssGlobalData({
66+
files: [
67+
'./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css',
68+
'packages/vkui/src/styles/dynamicTokens.css',
69+
'packages/vkui/src/styles/constants.css',
70+
'packages/vkui/src/styles/customMedias.generated.css',
71+
].map((pathSegment) => path.join(rootDirectory, pathSegment)),
72+
}),
8473

74+
// Автопрефиксер
75+
autoprefixer(),
76+
77+
// Обработка CustomMedia
78+
postcssCustomMedia(),
79+
80+
// TODO [>=8]: Проверить браузерную поддержку
81+
//
82+
// https://caniuse.com/mdn-css_properties_gap_grid_context
83+
postcssGapProperties(),
84+
],
85+
},
86+
},
87+
});
88+
},
8589
typescript: {
8690
reactDocgen: 'react-docgen-typescript',
8791
},
88-
89-
docs: {
90-
autodocs: false,
91-
},
9292
};
9393

94-
module.exports = config;
95-
96-
function getAbsolutePath(value: string): any {
97-
return path.dirname(require.resolve(path.join(value, 'package.json')));
98-
}
94+
export default config;

‎packages/vkui/.storybook/preview-head.html

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/vkui/.storybook/preview.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* Глобальные стили, которые не импортируются самими компонентами. */
2+
@import '../src/styles/themes.css';
3+
@import '../src/styles/constants.css';
4+
@import '../src/styles/dynamicTokens.css';
5+
@import '../src/styles/adaptivity.module.css';
6+
@import '../src/styles/common.css';
7+
8+
/* stylelint-disable-next-line selector-max-id */
9+
#root {
10+
block-size: 100%;
11+
}

0 commit comments

Comments
 (0)