Skip to content

Commit 5e7fd28

Browse files
nikomakelanikomakela
committed
chore: upgraded and auto migrated storybook and related dependencies
HCRC-178. The Storybook related files and dependencies were updated with ```shell npx storybook@latest upgrade ``` It ran a automated migration script that resulted to following: ``` ◇ Checking the health of your project(s).. │ │ Your Storybook project looks good! │ ◇ The upgrade is complete! │ │ Your project(s) have been upgraded successfully! 🎉 │ │ If you want to learn more about the automigrations that executed in your │ project(s), please check the following links: │ │ • upgrade-storybook-related-dependencies │ • addon-globals-api │ • consolidated-imports │ • remove-addon-interactions │ • renderer-to-framework │ • remove-essential-addons │ │ For a full list of changes, please check our migration guide: │ https://storybook.js.org/docs/releases/migration-guide?ref=upgrade ```
1 parent 2b0c267 commit 5e7fd28

30 files changed

Lines changed: 255 additions & 618 deletions

‎.storybook/main.js‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,21 @@ module.exports = {
88
return config;
99
},
1010

11-
addons: [
12-
'@storybook/addon-a11y',
13-
'@storybook/addon-links',
14-
'@storybook/addon-essentials',
15-
'@storybook/addon-interactions',
16-
'@storybook/addon-viewport',
17-
{
18-
name: '@storybook/preset-scss',
19-
options: {
20-
cssLoaderOptions: {
21-
modules: {
22-
localIdentName: '[name]__[local]--[hash:base64:5]',
23-
},
11+
addons: ['@storybook/addon-a11y', '@storybook/addon-links', {
12+
name: '@storybook/preset-scss',
13+
options: {
14+
cssLoaderOptions: {
15+
modules: {
16+
localIdentName: '[name]__[local]--[hash:base64:5]',
2417
},
25-
sassLoaderOptions: {
26-
sassOptions: {
27-
includePaths: [path.join(__dirname, '..', 'src/common/styles')],
28-
},
18+
},
19+
sassLoaderOptions: {
20+
sassOptions: {
21+
includePaths: [path.join(__dirname, '..', 'src/common/styles')],
2922
},
3023
},
3124
},
32-
'@storybook/addon-webpack5-compiler-babel',
33-
],
25+
}, '@storybook/addon-webpack5-compiler-babel', '@storybook/addon-docs'],
3426

3527
framework: {
3628
name: '@storybook/react-webpack5',

‎.storybook/preview.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Enable hds-design-tokens in storybook
22
import 'hds-design-tokens/lib/all.min.css';
3-
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
3+
import { INITIAL_VIEWPORTS } from 'storybook/viewport';
44
import { initialize as mswInitialize, mswDecorator } from 'msw-storybook-addon';
55

66
// Enable HelsinkiGrotesk font in storybook
@@ -16,8 +16,7 @@ export const parameters = {
1616
},
1717
},
1818
viewport: {
19-
defaultViewport: 'extraSmall',
20-
viewports: INITIAL_VIEWPORTS,
19+
options: INITIAL_VIEWPORTS
2120
},
2221
};
2322

@@ -27,3 +26,10 @@ mswInitialize();
2726
// Provide the MSW addon decorator globally
2827
export const decorators = [mswDecorator];
2928
export const tags = ['autodocs', 'autodocs'];
29+
30+
export const initialGlobals = {
31+
viewport: {
32+
value: 'extraSmall',
33+
isRotated: false
34+
}
35+
};

‎package.json‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"@babel/preset-env": "^7.26.0",
6565
"@babel/preset-react": "^7.25.9",
6666
"@babel/preset-typescript": "^7.26.0",
67-
"@chromatic-com/storybook": "^3",
67+
"@chromatic-com/storybook": "^4.1.2",
6868
"@graphql-codegen/cli": "^5.0.3",
6969
"@graphql-codegen/typescript": "^4.1.1",
7070
"@graphql-codegen/typescript-operations": "^4.3.1",
@@ -73,17 +73,11 @@
7373
"@rollup/plugin-commonjs": "^28.0.1",
7474
"@rollup/plugin-json": "^6.1.0",
7575
"@rollup/plugin-node-resolve": "^15.3.0",
76-
"@storybook/addon-a11y": "^8.4.2",
77-
"@storybook/addon-actions": "^8.4.2",
78-
"@storybook/addon-essentials": "^8.4.2",
79-
"@storybook/addon-interactions": "^8.4.2",
80-
"@storybook/addon-links": "^8.4.2",
81-
"@storybook/addon-viewport": "^8.4.2",
82-
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
76+
"@storybook/addon-a11y": "^10.0.4",
77+
"@storybook/addon-links": "^10.0.4",
78+
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
8379
"@storybook/preset-scss": "^1.0.3",
84-
"@storybook/react": "^8.4.2",
85-
"@storybook/react-webpack5": "^8.4.2",
86-
"@storybook/test": "^8.4.2",
80+
"@storybook/react-webpack5": "^10.0.4",
8781
"@storybook/test-runner": "^0.24.1",
8882
"@testing-library/jest-dom": "^6.6.3",
8983
"@testing-library/react": "^16.0.1",
@@ -117,7 +111,7 @@
117111
"jest-axe": "^9.0.0",
118112
"jest-fetch-mock": "^3.0.3",
119113
"msw": "^1.1.0",
120-
"msw-storybook-addon": "1.8.0",
114+
"msw-storybook-addon": "^2.0.6",
121115
"postcss": "^8.4.49",
122116
"postcss-scss": "^4.0.9",
123117
"prettier": "3.3.3",
@@ -134,11 +128,12 @@
134128
"rollup-plugin-typescript2": "^0.36.0",
135129
"sass": "^1.66.0",
136130
"sass-loader": "^13.3.2",
137-
"storybook": "^8.4.2",
131+
"storybook": "^10.0.4",
138132
"style-loader": "^4.0.0",
139133
"tslib": "^2.8.1",
140134
"typescript": "^5.6.3",
141-
"webpack": "^5.96.1"
135+
"webpack": "^5.96.1",
136+
"@storybook/addon-docs": "^10.0.4"
142137
},
143138
"dependencies": {
144139
"classnames": "^2.5.1",

‎src/apollo/apollo-custom-template.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/function-component-definition */
22

33
import React from 'react';
4-
import type { StoryFn, Meta } from '@storybook/react';
4+
import type { StoryFn, Meta } from '@storybook/react-webpack5';
55
import { HelmetProvider } from 'react-helmet-async';
66

77
import { ConfigProvider } from '../core/configProvider/ConfigProvider';

‎src/apollo/apollo.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/function-component-definition */
22

33
import React from 'react';
4-
import type { StoryFn, Meta } from '@storybook/react';
4+
import type { StoryFn, Meta } from '@storybook/react-webpack5';
55
import { HelmetProvider } from 'react-helmet-async';
66

77
import { ConfigProvider } from '../core/configProvider/ConfigProvider';

‎src/common/components/grid/Grid.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/* eslint-disable react/function-component-definition */
33

44
import React from 'react';
5-
import type { StoryFn, Meta } from '@storybook/react';
5+
import type { StoryFn, Meta } from '@storybook/react-webpack5';
66

77
import Grid from './Grid';
88
import { StoryContainer } from '../../../core/storyContainer/StoryContainer';

‎src/common/components/htmlToReact/HtmlToReact.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/function-component-definition */
22

33
import React from 'react';
4-
import type { StoryFn, Meta } from '@storybook/react';
4+
import type { StoryFn, Meta } from '@storybook/react-webpack5';
55

66
import kukkuuTestPage from '../../../mocks/responses/cms/page/kukkuu-page-demosivu.json';
77
import type { HtmlToReactProps, TableVariant } from './HtmlToReact';

‎src/common/components/list/List.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/function-component-definition */
22

33
import React from 'react';
4-
import type { StoryFn, Meta } from '@storybook/react';
4+
import type { StoryFn, Meta } from '@storybook/react-webpack5';
55

66
import List from './List';
77
import { StoryContainer } from '../../../core/storyContainer/StoryContainer';

‎src/common/components/tag/Tag.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/function-component-definition */
22

33
import React from 'react';
4-
import type { StoryFn, Meta } from '@storybook/react';
4+
import type { StoryFn, Meta } from '@storybook/react-webpack5';
55

66
import { Tag } from './Tag';
77
import { StoryContainer } from '../../../core/storyContainer/StoryContainer';

‎src/common/components/text/Text.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/function-component-definition */
22

33
import React from 'react';
4-
import type { StoryFn, Meta } from '@storybook/react';
4+
import type { StoryFn, Meta } from '@storybook/react-webpack5';
55

66
import Text from './Text';
77
import { StoryContainer } from '../../../core/storyContainer/StoryContainer';

0 commit comments

Comments
 (0)