Skip to content

Commit 317f62d

Browse files
tay1orjonestay1orjones
authored
chore: upgrade Storybook to 10.3.5 (#22116)
* chore: upgrade Storybook to 10.3.5 * chore: yarn dedupe * chore(deps): remove brace-expansion resolutions entry * fix(tests): remove storybook actions call * fix(tests): refactor storybook actions use in tests
1 parent 51dab56 commit 317f62d

9 files changed

Lines changed: 413 additions & 722 deletions

File tree

packages/react/.storybook/main.js renamed to packages/react/.storybook/main.ts

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,16 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
'use strict';
9-
import { createRequire } from 'node:module';
8+
import type { StorybookConfig } from '@storybook/react-vite';
9+
10+
import { fileURLToPath } from 'node:url';
1011

1112
import remarkGfm from 'remark-gfm';
1213
import glob from 'fast-glob';
13-
import { dirname, join } from 'path';
1414
import react from '@vitejs/plugin-react';
1515
import { mergeConfig } from 'vite';
1616

17-
function getAbsolutePath(value) {
18-
return dirname(require.resolve(join(value, 'package.json')));
19-
}
20-
21-
const require = createRequire(import.meta.url);
17+
const configDir = fileURLToPath(new URL('.', import.meta.url));
2218

2319
// We can't use .mdx files in conjuction with `storyStoreV7`, which we are using to preload stories for CI purposes only.
2420
// MDX files are fine to ignore in CI mode since they don't make a difference for VRT testing
@@ -36,14 +32,14 @@ const storyGlobs = [
3632

3733
const stories = glob.sync(storyGlobs, {
3834
ignore: ['../src/**/docs/*.mdx', '../src/**/next/docs/*.mdx'],
39-
cwd: __dirname,
35+
cwd: configDir,
4036
});
4137

42-
const config = {
38+
const config: StorybookConfig = {
4339
addons: [
4440
'storybook-addon-accessibility-checker',
4541
{
46-
name: getAbsolutePath('@storybook/addon-docs'),
42+
name: '@storybook/addon-docs',
4743
options: {
4844
mdxPluginOptions: {
4945
mdxCompileOptions: {
@@ -54,15 +50,15 @@ const config = {
5450
},
5551
],
5652
core: {
57-
builder: getAbsolutePath('@storybook/builder-vite'),
53+
builder: '@storybook/builder-vite',
5854
},
5955
features: {
6056
previewCsfV3: true,
6157
buildStoriesJson: true,
6258
interactions: process.env.NODE_ENV !== 'production', // disable interactions in production builds, but enabled in development
6359
},
6460
framework: {
65-
name: getAbsolutePath('@storybook/react-vite'),
61+
name: '@storybook/react-vite',
6662
options: {},
6763
},
6864
stories,

‎packages/react/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@
8282
"@carbon/themes": "^11.73.0-rc.0",
8383
"@figma/code-connect": "^1.4.2",
8484
"@stackblitz/sdk": "^1.11.0",
85-
"@storybook/addon-a11y": "^9.1.8",
86-
"@storybook/addon-docs": "^9.1.8",
87-
"@storybook/addon-links": "^9.1.8",
88-
"@storybook/builder-vite": "^9.1.8",
89-
"@storybook/react-vite": "^9.1.8",
85+
"@storybook/addon-a11y": "^10.3.5",
86+
"@storybook/addon-docs": "^10.3.5",
87+
"@storybook/addon-links": "^10.3.5",
88+
"@storybook/builder-vite": "^10.3.5",
89+
"@storybook/react-vite": "^10.3.5",
9090
"@types/react-is": "^19.0.0",
9191
"@types/use-sync-external-store": "^1",
9292
"@vitejs/plugin-react": "^5.0.0",
@@ -106,7 +106,7 @@
106106
"remark-gfm": "^4.0.0",
107107
"rimraf": "^6.0.1",
108108
"sass": "^1.93.2",
109-
"storybook": "^9.1.8",
109+
"storybook": "^10.3.5",
110110
"storybook-addon-accessibility-checker": ">=9.2.0-rc.3",
111111
"stream-browserify": "^3.0.0",
112112
"tsdown": "^0.21.0",

‎packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,19 +89,28 @@ export const Default = (args) => (
8989
<TableBatchAction
9090
tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
9191
renderIcon={TrashCan}
92-
onClick={batchActionClick(selectedRows)}>
92+
onClick={batchActionClick(
93+
selectedRows,
94+
action('Batch action click')
95+
)}>
9396
Delete
9497
</TableBatchAction>
9598
<TableBatchAction
9699
tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
97100
renderIcon={Save}
98-
onClick={batchActionClick(selectedRows)}>
101+
onClick={batchActionClick(
102+
selectedRows,
103+
action('Batch action click')
104+
)}>
99105
Save
100106
</TableBatchAction>
101107
<TableBatchAction
102108
tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
103109
renderIcon={Download}
104-
onClick={batchActionClick(selectedRows)}>
110+
onClick={batchActionClick(
111+
selectedRows,
112+
action('Batch action click')
113+
)}>
105114
Download
106115
</TableBatchAction>
107116
</TableBatchActions>

‎packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,10 @@ export const Default = (args) => {
190190
<TableBatchAction
191191
renderIcon={TrashCan}
192192
iconDescription="Delete the selected rows"
193-
onClick={batchActionClick(selectedRows)}
193+
onClick={batchActionClick(
194+
selectedRows,
195+
action('Batch action click')
196+
)}
194197
tabIndex={
195198
batchActionProps.shouldShowBatchActions ? 0 : -1
196199
}>
@@ -199,7 +202,10 @@ export const Default = (args) => {
199202
<TableBatchAction
200203
renderIcon={Save}
201204
iconDescription="Save the selected rows"
202-
onClick={batchActionClick(selectedRows)}
205+
onClick={batchActionClick(
206+
selectedRows,
207+
action('Batch action click')
208+
)}
203209
tabIndex={
204210
batchActionProps.shouldShowBatchActions ? 0 : -1
205211
}>
@@ -208,7 +214,10 @@ export const Default = (args) => {
208214
<TableBatchAction
209215
renderIcon={Download}
210216
iconDescription="Download the selected rows"
211-
onClick={batchActionClick(selectedRows)}
217+
onClick={batchActionClick(
218+
selectedRows,
219+
action('Batch action click')
220+
)}
212221
tabIndex={
213222
batchActionProps.shouldShowBatchActions ? 0 : -1
214223
}>

‎packages/react/src/components/DataTable/stories/shared.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77
import React from 'react';
8-
import { action } from 'storybook/actions';
98
import Link from '../../Link';
109

1110
export const rows = [
@@ -100,5 +99,7 @@ export const headers = [
10099
},
101100
];
102101

103-
export const batchActionClick = (selectedRows) => () =>
104-
action('Batch action click')(selectedRows);
102+
export const batchActionClick =
103+
(selectedRows, onClick = () => {}) =>
104+
() =>
105+
onClick(selectedRows);

‎packages/react/src/components/OverflowMenuV2/OverFlowMenuV2-test.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { FeatureFlags } from '../FeatureFlags';
1111
import { MenuItem } from '../Menu';
1212
import { OverflowMenuV2 } from './';
1313
import React from 'react';
14-
import { action } from 'storybook/actions';
1514
import userEvent from '@testing-library/user-event';
1615

1716
describe('<OverflowMenuV2 />', () => {
@@ -27,7 +26,7 @@ describe('<OverflowMenuV2 />', () => {
2726
});
2827

2928
it('should log the deprecation warning when rendering OverflowMenuV2', () => {
30-
const onClick = action('onClick (MenuItem)');
29+
const onClick = jest.fn();
3130

3231
render(
3332
<OverflowMenuV2>

‎packages/web-components/.storybook/main.ts‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@
77

88
import type { StorybookConfig } from '@storybook/web-components-vite';
99

10-
import { createRequire } from 'node:module';
11-
import { dirname, join } from 'node:path';
10+
import { fileURLToPath } from 'node:url';
1211
import { mergeConfig } from 'vite';
1312
import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
1413
import glob from 'fast-glob';
1514
import remarkGfm from 'remark-gfm';
1615

17-
const require = createRequire(import.meta.url);
16+
const configDir = fileURLToPath(new URL('.', import.meta.url));
1817

1918
const stories = glob.sync(
2019
[
@@ -24,7 +23,7 @@ const stories = glob.sync(
2423
],
2524
{
2625
ignore: ['../src/**/docs/*.mdx'],
27-
cwd: __dirname,
26+
cwd: configDir,
2827
}
2928
);
3029

@@ -33,7 +32,7 @@ const config: StorybookConfig = {
3332
addons: [
3433
'storybook-addon-accessibility-checker',
3534
{
36-
name: getAbsolutePath('@storybook/addon-docs'),
35+
name: '@storybook/addon-docs',
3736
options: {
3837
mdxPluginOptions: {
3938
mdxCompileOptions: {
@@ -42,13 +41,13 @@ const config: StorybookConfig = {
4241
},
4342
},
4443
},
45-
getAbsolutePath('@storybook/addon-links'),
44+
'@storybook/addon-links',
4645
],
4746
features: {
4847
interactions: false, // disable Interactions tab
4948
},
5049
framework: {
51-
name: getAbsolutePath('@storybook/web-components-vite'),
50+
name: '@storybook/web-components-vite',
5251
options: {},
5352
},
5453
async viteFinal(config) {
@@ -72,14 +71,13 @@ const config: StorybookConfig = {
7271
),
7372
},
7473
sourcemap: true,
74+
resolve: {
75+
preserveSymlinks: true,
76+
},
7577
});
7678
},
7779
docs: {
7880
defaultName: 'Overview',
7981
},
8082
};
8183
export default config;
82-
83-
function getAbsolutePath(value: string): any {
84-
return dirname(require.resolve(join(value, 'package.json')));
85-
}

‎packages/web-components/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@
8383
"@mordech/vite-lit-loader": "^0.40.0",
8484
"@open-wc/testing": "^4.0.0",
8585
"@playwright/test": "^1.36.2",
86-
"@storybook/addon-docs": "^9.1.8",
87-
"@storybook/addon-links": "^9.1.8",
88-
"@storybook/web-components-vite": "^9.1.8",
86+
"@storybook/addon-docs": "^10.3.5",
87+
"@storybook/addon-links": "^10.3.5",
88+
"@storybook/web-components-vite": "^10.3.5",
8989
"@types/lodash-es": "^4.17.5",
9090
"@types/node": "^24.0.0",
9191
"@web/test-runner": "^0.20.0",
@@ -100,7 +100,7 @@
100100
"remark-gfm": "^4.0.0",
101101
"rimraf": "^6.0.1",
102102
"sass": "^1.93.2",
103-
"storybook": "^9.1.8",
103+
"storybook": "^10.3.5",
104104
"storybook-addon-accessibility-checker": "^9.2.0-rc.3",
105105
"tsdown": "^0.21.0",
106106
"typescript-config-carbon": "workspace:^0.9.0",

0 commit comments

Comments
 (0)