From 871eec73eb6ac9faf7722cb9ebc57668fca3f5c7 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 10 Dec 2024 08:56:33 +0100 Subject: [PATCH 01/11] Addon Onboarding: Prebundle react-confetti --- code/addons/onboarding/package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 0fc9ef53a4ef..2265aa3ceff4 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -44,15 +44,13 @@ "check": "jiti ../../../scripts/prepare/check.ts", "prep": "jiti ../../../scripts/prepare/addon-bundle.ts" }, - "dependencies": { - "react-confetti": "^6.1.0" - }, "devDependencies": { "@radix-ui/react-dialog": "^1.0.5", "@storybook/icons": "^1.2.12", "@storybook/react": "workspace:*", "framer-motion": "^11.0.3", "react": "^18.2.0", + "react-confetti": "^6.1.0", "react-dom": "^18.2.0", "react-joyride": "^2.8.2", "react-use-measure": "^2.1.1", From 11628b25e879a28eab285b80eff6891cd87d23b0 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 10 Dec 2024 15:37:41 +0100 Subject: [PATCH 02/11] Run the a11y automigration on postInstall --- code/addons/a11y/package.json | 6 +++++- code/addons/a11y/src/postinstall.ts | 14 ++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 code/addons/a11y/src/postinstall.ts diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index e1985c0961d7..87fcf78de2b0 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -38,7 +38,8 @@ }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", - "./package.json": "./package.json" + "./package.json": "./package.json", + "./postinstall": "./dist/postinstall.js" }, "main": "dist/index.js", "module": "dist/index.mjs", @@ -87,6 +88,9 @@ ], "previewEntries": [ "./src/preview.tsx" + ], + "nodeEntries": [ + "./src/postinstall.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16", diff --git a/code/addons/a11y/src/postinstall.ts b/code/addons/a11y/src/postinstall.ts new file mode 100644 index 000000000000..068e75e67505 --- /dev/null +++ b/code/addons/a11y/src/postinstall.ts @@ -0,0 +1,14 @@ +import { JsPackageManagerFactory } from 'storybook/internal/common'; + +import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add'; + +export default async function postInstall(options: PostinstallOptions) { + const packageManager = JsPackageManagerFactory.getPackageManager({ + force: options.packageManager, + }); + + await packageManager.executeCommand({ + command: 'npx', + args: ['storybook', 'automigrate', 'addonA11yAddonTest'], + }); +} From dc094300e38f26e8788c4e3e6fd783b5b1c69044 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 10 Dec 2024 16:52:47 +0100 Subject: [PATCH 03/11] Use spawn instead --- code/addons/a11y/src/postinstall.ts | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/code/addons/a11y/src/postinstall.ts b/code/addons/a11y/src/postinstall.ts index 068e75e67505..b0fbbfac8678 100644 --- a/code/addons/a11y/src/postinstall.ts +++ b/code/addons/a11y/src/postinstall.ts @@ -1,14 +1,12 @@ -import { JsPackageManagerFactory } from 'storybook/internal/common'; +import { spawn } from 'child_process'; -import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add'; - -export default async function postInstall(options: PostinstallOptions) { - const packageManager = JsPackageManagerFactory.getPackageManager({ - force: options.packageManager, - }); - - await packageManager.executeCommand({ - command: 'npx', - args: ['storybook', 'automigrate', 'addonA11yAddonTest'], +export default async function postInstall() { + await new Promise((resolve) => { + const child = spawn('npx', ['storybook', 'automigrate', 'addonA11yAddonTest'], { + stdio: 'inherit', + }); + child.on('close', (code) => { + resolve(); + }); }); } From cb1ba8e60db1a6a5c784e22f02e270b1bc0ff6b1 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 11 Dec 2024 09:39:40 +0100 Subject: [PATCH 04/11] Use textMutedColor rather than barTextColor where this is contextually more appropriate --- code/addons/test/src/components/ContextMenuItem.tsx | 2 +- code/addons/test/src/components/Description.tsx | 2 +- code/core/src/components/components/Loader/Loader.tsx | 2 +- code/core/src/components/components/tooltip/ListItem.tsx | 2 +- code/core/src/manager/components/sidebar/LegacyRender.tsx | 2 +- code/core/src/manager/components/sidebar/SearchResults.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx index 52c3b98061f9..229a396b5388 100644 --- a/code/addons/test/src/components/ContextMenuItem.tsx +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -67,7 +67,7 @@ export const ContextMenuItem: FC<{ padding="small" disabled={state.crashed || isDisabled} > - + } /> diff --git a/code/addons/test/src/components/Description.tsx b/code/addons/test/src/components/Description.tsx index a94b775b5c95..dea5ec322b9f 100644 --- a/code/addons/test/src/components/Description.tsx +++ b/code/addons/test/src/components/Description.tsx @@ -12,7 +12,7 @@ export const Wrapper = styled.div(({ theme }) => ({ whiteSpace: 'nowrap', textOverflow: 'ellipsis', fontSize: theme.typography.size.s1, - color: theme.barTextColor, + color: theme.textMutedColor, })); const PositiveText = styled.span(({ theme }) => ({ diff --git a/code/core/src/components/components/Loader/Loader.tsx b/code/core/src/components/components/Loader/Loader.tsx index 26d01ad3f05d..dace42a9b351 100644 --- a/code/core/src/components/components/Loader/Loader.tsx +++ b/code/core/src/components/components/Loader/Loader.tsx @@ -63,7 +63,7 @@ const ProgressBar = styled.div(({ theme }) => ({ const ProgressMessage = styled.div(({ theme }) => ({ minHeight: '2em', fontSize: `${theme.typography.size.s1}px`, - color: theme.barTextColor, + color: theme.textMutedColor, })); const ErrorIcon = styled(LightningOffIcon)(({ theme }) => ({ diff --git a/code/core/src/components/components/tooltip/ListItem.tsx b/code/core/src/components/components/tooltip/ListItem.tsx index 2a93287af503..10e513cc1b6b 100644 --- a/code/core/src/components/components/tooltip/ListItem.tsx +++ b/code/core/src/components/components/tooltip/ListItem.tsx @@ -40,7 +40,7 @@ const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => disabled ? { - color: transparentize(0.7, theme.color.defaultText), + color: theme.textMutedColor, } : {} ); diff --git a/code/core/src/manager/components/sidebar/LegacyRender.tsx b/code/core/src/manager/components/sidebar/LegacyRender.tsx index 82bc83bd1b34..f8afa4317f7f 100644 --- a/code/core/src/manager/components/sidebar/LegacyRender.tsx +++ b/code/core/src/manager/components/sidebar/LegacyRender.tsx @@ -32,7 +32,7 @@ const TitleWrapper = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ( const DescriptionWrapper = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s1, - color: theme.barTextColor, + color: theme.textMutedColor, })); const Progress = styled(ProgressSpinner)({ diff --git a/code/core/src/manager/components/sidebar/SearchResults.tsx b/code/core/src/manager/components/sidebar/SearchResults.tsx index 7573befe34a1..b7689b7d64d0 100644 --- a/code/core/src/manager/components/sidebar/SearchResults.tsx +++ b/code/core/src/manager/components/sidebar/SearchResults.tsx @@ -70,7 +70,7 @@ const NoResults = styled.div(({ theme }) => ({ lineHeight: `18px`, color: theme.color.defaultText, small: { - color: theme.barTextColor, + color: theme.textMutedColor, fontSize: `${theme.typography.size.s1}px`, }, })); From 212f83ae0ad980500601819218abc314be2a06c8 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 11 Dec 2024 09:48:34 +0100 Subject: [PATCH 05/11] Indicate when an option is disabled using color and a suffix --- .../src/components/TestProviderRender.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx index 017ecc2cf27f..6878c37e3f06 100644 --- a/code/addons/test/src/components/TestProviderRender.tsx +++ b/code/addons/test/src/components/TestProviderRender.tsx @@ -76,6 +76,16 @@ const StopIcon = styled(StopAltIcon)({ width: 10, }); +const ItemTitle = styled.span<{ enabled?: boolean }>( + ({ enabled, theme }) => + !enabled && { + color: theme.textMutedColor, + '&:after': { + content: '" (disabled)"', + }, + } +); + const statusOrder: TestStatus[] = ['failed', 'warning', 'pending', 'passed', 'skipped']; const statusMap: Record['status']> = { failed: 'negative', @@ -233,7 +243,7 @@ export const TestProviderRender: FC< /> Coverage} icon={} right={ Accessibility} icon={} right={ {coverageSummary ? ( Coverage} href={'/coverage/index.html'} // @ts-expect-error ListItem doesn't include all anchor attributes in types, but it is an achor element target="_blank" @@ -300,13 +310,13 @@ export const TestProviderRender: FC< /> ) : ( Coverage} icon={} /> )} {isA11yAddon && ( Accessibility} onClick={ (a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length ? () => { From 21d7c3d2945f9bd58beaf6f9ebc644076fb990ed Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 11 Dec 2024 12:02:25 +0100 Subject: [PATCH 06/11] Use execa --- code/addons/a11y/package.json | 1 + code/addons/a11y/src/postinstall.ts | 19 +++-- code/yarn.lock | 124 +++++++++++++++++++++++++++- 3 files changed, 134 insertions(+), 10 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 87fcf78de2b0..a23849bc7ae1 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -65,6 +65,7 @@ "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.12", "@testing-library/react": "^14.0.0", + "execa": "^9.5.2", "picocolors": "^1.1.0", "pretty-format": "^29.7.0", "react": "^18.2.0", diff --git a/code/addons/a11y/src/postinstall.ts b/code/addons/a11y/src/postinstall.ts index b0fbbfac8678..73597186338c 100644 --- a/code/addons/a11y/src/postinstall.ts +++ b/code/addons/a11y/src/postinstall.ts @@ -1,12 +1,13 @@ -import { spawn } from 'child_process'; +// eslint-disable-next-line depend/ban-dependencies +import { execa } from 'execa'; + +const $ = execa({ + preferLocal: true, + stdio: 'inherit', + // we stream the stderr to the console + reject: false, +}); export default async function postInstall() { - await new Promise((resolve) => { - const child = spawn('npx', ['storybook', 'automigrate', 'addonA11yAddonTest'], { - stdio: 'inherit', - }); - child.on('close', (code) => { - resolve(); - }); - }); + await $`storybook automigrate addonA11yAddonTest`; } diff --git a/code/yarn.lock b/code/yarn.lock index f0862ce5333e..129156cf23f6 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5403,6 +5403,13 @@ __metadata: languageName: node linkType: hard +"@sec-ant/readable-stream@npm:^0.4.1": + version: 0.4.1 + resolution: "@sec-ant/readable-stream@npm:0.4.1" + checksum: 10c0/64e9e9cf161e848067a5bf60cdc04d18495dc28bb63a8d9f8993e4dd99b91ad34e4b563c85de17d91ffb177ec17a0664991d2e115f6543e73236a906068987af + languageName: node + linkType: hard + "@sideway/address@npm:^4.1.3": version: 4.1.4 resolution: "@sideway/address@npm:4.1.4" @@ -5496,6 +5503,13 @@ __metadata: languageName: node linkType: hard +"@sindresorhus/merge-streams@npm:^4.0.0": + version: 4.0.0 + resolution: "@sindresorhus/merge-streams@npm:4.0.0" + checksum: 10c0/482ee543629aa1933b332f811a1ae805a213681ecdd98c042b1c1b89387df63e7812248bb4df3910b02b3cc5589d3d73e4393f30e197c9dde18046ccd471fc6b + languageName: node + linkType: hard + "@storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y": version: 0.0.0-use.local resolution: "@storybook/addon-a11y@workspace:addons/a11y" @@ -5506,6 +5520,7 @@ __metadata: "@storybook/test": "workspace:*" "@testing-library/react": "npm:^14.0.0" axe-core: "npm:^4.2.0" + execa: "npm:^9.5.2" picocolors: "npm:^1.1.0" pretty-format: "npm:^29.7.0" react: "npm:^18.2.0" @@ -15392,6 +15407,26 @@ __metadata: languageName: node linkType: hard +"execa@npm:^9.5.2": + version: 9.5.2 + resolution: "execa@npm:9.5.2" + dependencies: + "@sindresorhus/merge-streams": "npm:^4.0.0" + cross-spawn: "npm:^7.0.3" + figures: "npm:^6.1.0" + get-stream: "npm:^9.0.0" + human-signals: "npm:^8.0.0" + is-plain-obj: "npm:^4.1.0" + is-stream: "npm:^4.0.1" + npm-run-path: "npm:^6.0.0" + pretty-ms: "npm:^9.0.0" + signal-exit: "npm:^4.1.0" + strip-final-newline: "npm:^4.0.0" + yoctocolors: "npm:^2.0.0" + checksum: 10c0/94782a6282e03253224406c29068d18f9095cc251a45d1f19ac3d8f2a9db2cbe32fb8ceb039db1451d8fce3531135a6c0c559f76d634f85416268fc4a6995365 + languageName: node + linkType: hard + "exectimer@npm:^2.2.2": version: 2.2.2 resolution: "exectimer@npm:2.2.2" @@ -15702,6 +15737,15 @@ __metadata: languageName: node linkType: hard +"figures@npm:^6.1.0": + version: 6.1.0 + resolution: "figures@npm:6.1.0" + dependencies: + is-unicode-supported: "npm:^2.0.0" + checksum: 10c0/9159df4264d62ef447a3931537de92f5012210cf5135c35c010df50a2169377581378149abfe1eb238bd6acbba1c0d547b1f18e0af6eee49e30363cedaffcfe4 + languageName: node + linkType: hard + "file-entry-cache@npm:^6.0.1": version: 6.0.1 resolution: "file-entry-cache@npm:6.0.1" @@ -16556,6 +16600,16 @@ __metadata: languageName: node linkType: hard +"get-stream@npm:^9.0.0": + version: 9.0.1 + resolution: "get-stream@npm:9.0.1" + dependencies: + "@sec-ant/readable-stream": "npm:^0.4.1" + is-stream: "npm:^4.0.1" + checksum: 10c0/d70e73857f2eea1826ac570c3a912757dcfbe8a718a033fa0c23e12ac8e7d633195b01710e0559af574cbb5af101009b42df7b6f6b29ceec8dbdf7291931b948 + languageName: node + linkType: hard + "get-symbol-description@npm:^1.0.2": version: 1.0.2 resolution: "get-symbol-description@npm:1.0.2" @@ -17592,6 +17646,13 @@ __metadata: languageName: node linkType: hard +"human-signals@npm:^8.0.0": + version: 8.0.0 + resolution: "human-signals@npm:8.0.0" + checksum: 10c0/e4dac4f7d3eb791ed04129fc6a85bd454a9102d3e3b76c911d0db7057ebd60b2956b435b5b5712aec18960488ede3c21ef7c56e42cdd70760c0d84d3c05cd92e + languageName: node + linkType: hard + "humanize-ms@npm:^1.2.1": version: 1.2.1 resolution: "humanize-ms@npm:1.2.1" @@ -18372,7 +18433,7 @@ __metadata: languageName: node linkType: hard -"is-plain-obj@npm:^4.0.0": +"is-plain-obj@npm:^4.0.0, is-plain-obj@npm:^4.1.0": version: 4.1.0 resolution: "is-plain-obj@npm:4.1.0" checksum: 10c0/32130d651d71d9564dc88ba7e6fda0e91a1010a3694648e9f4f47bb6080438140696d3e3e15c741411d712e47ac9edc1a8a9de1fe76f3487b0d90be06ac9975e @@ -18458,6 +18519,13 @@ __metadata: languageName: node linkType: hard +"is-stream@npm:^4.0.1": + version: 4.0.1 + resolution: "is-stream@npm:4.0.1" + checksum: 10c0/2706c7f19b851327ba374687bc4a3940805e14ca496dc672b9629e744d143b1ad9c6f1b162dece81c7bfbc0f83b32b61ccc19ad2e05aad2dd7af347408f60c7f + languageName: node + linkType: hard + "is-string@npm:^1.0.5, is-string@npm:^1.0.7": version: 1.0.7 resolution: "is-string@npm:1.0.7" @@ -18492,6 +18560,13 @@ __metadata: languageName: node linkType: hard +"is-unicode-supported@npm:^2.0.0": + version: 2.1.0 + resolution: "is-unicode-supported@npm:2.1.0" + checksum: 10c0/a0f53e9a7c1fdbcf2d2ef6e40d4736fdffff1c9f8944c75e15425118ff3610172c87bf7bc6c34d3903b04be59790bb2212ddbe21ee65b5a97030fc50370545a5 + languageName: node + linkType: hard + "is-weakmap@npm:^2.0.1": version: 2.0.1 resolution: "is-weakmap@npm:2.0.1" @@ -22103,6 +22178,16 @@ __metadata: languageName: node linkType: hard +"npm-run-path@npm:^6.0.0": + version: 6.0.0 + resolution: "npm-run-path@npm:6.0.0" + dependencies: + path-key: "npm:^4.0.0" + unicorn-magic: "npm:^0.3.0" + checksum: 10c0/b223c8a0dcd608abf95363ea5c3c0ccc3cd877daf0102eaf1b0f2390d6858d8337fbb7c443af2403b067a7d2c116d10691ecd22ab3c5273c44da1ff8d07753bd + languageName: node + linkType: hard + "npmlog@npm:^6.0.0": version: 6.0.2 resolution: "npmlog@npm:6.0.2" @@ -22847,6 +22932,13 @@ __metadata: languageName: node linkType: hard +"parse-ms@npm:^4.0.0": + version: 4.0.0 + resolution: "parse-ms@npm:4.0.0" + checksum: 10c0/a7900f4f1ebac24cbf5e9708c16fb2fd482517fad353aecd7aefb8c2ba2f85ce017913ccb8925d231770404780df46244ea6fec598b3bde6490882358b4d2d16 + languageName: node + linkType: hard + "parse-node-version@npm:^1.0.1": version: 1.0.1 resolution: "parse-node-version@npm:1.0.1" @@ -23689,6 +23781,15 @@ __metadata: languageName: node linkType: hard +"pretty-ms@npm:^9.0.0": + version: 9.2.0 + resolution: "pretty-ms@npm:9.2.0" + dependencies: + parse-ms: "npm:^4.0.0" + checksum: 10c0/ab6d066f90e9f77020426986e1b018369f41575674544c539aabec2e63a20fec01166d8cf6571d0e165ad11cfe5a8134a2a48a36d42ab291c59c6deca5264cbb + languageName: node + linkType: hard + "prettyjson@npm:^1.2.1": version: 1.2.5 resolution: "prettyjson@npm:1.2.5" @@ -27003,6 +27104,13 @@ __metadata: languageName: node linkType: hard +"strip-final-newline@npm:^4.0.0": + version: 4.0.0 + resolution: "strip-final-newline@npm:4.0.0" + checksum: 10c0/b0cf2b62d597a1b0e3ebc42b88767f0a0d45601f89fd379a928a1812c8779440c81abba708082c946445af1d6b62d5f16e2a7cf4f30d9d6587b89425fae801ff + languageName: node + linkType: hard + "strip-indent@npm:^3.0.0": version: 3.0.0 resolution: "strip-indent@npm:3.0.0" @@ -28216,6 +28324,13 @@ __metadata: languageName: node linkType: hard +"unicorn-magic@npm:^0.3.0": + version: 0.3.0 + resolution: "unicorn-magic@npm:0.3.0" + checksum: 10c0/0a32a997d6c15f1c2a077a15b1c4ca6f268d574cf5b8975e778bb98e6f8db4ef4e86dfcae4e158cd4c7e38fb4dd383b93b13eefddc7f178dea13d3ac8a603271 + languageName: node + linkType: hard + "unified-args@npm:^11.0.0": version: 11.0.1 resolution: "unified-args@npm:11.0.1" @@ -30220,6 +30335,13 @@ __metadata: languageName: node linkType: hard +"yoctocolors@npm:^2.0.0": + version: 2.1.1 + resolution: "yoctocolors@npm:2.1.1" + checksum: 10c0/85903f7fa96f1c70badee94789fade709f9d83dab2ec92753d612d84fcea6d34c772337a9f8914c6bed2f5fc03a428ac5d893e76fab636da5f1236ab725486d0 + languageName: node + linkType: hard + "zimmerframe@npm:^1.1.2": version: 1.1.2 resolution: "zimmerframe@npm:1.1.2" From 36fab90e707f40dab05a42cf300d55d4fe44aa74 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 11 Dec 2024 12:49:21 +0100 Subject: [PATCH 07/11] Forward the yes flag --- code/addons/a11y/src/postinstall.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/addons/a11y/src/postinstall.ts b/code/addons/a11y/src/postinstall.ts index 73597186338c..9faaf6990b36 100644 --- a/code/addons/a11y/src/postinstall.ts +++ b/code/addons/a11y/src/postinstall.ts @@ -1,4 +1,5 @@ -// eslint-disable-next-line depend/ban-dependencies +import type { PostinstallOptions } from '@storybook/cli/src/add'; + import { execa } from 'execa'; const $ = execa({ @@ -8,6 +9,6 @@ const $ = execa({ reject: false, }); -export default async function postInstall() { - await $`storybook automigrate addonA11yAddonTest`; +export default async function postinstall(options: PostinstallOptions) { + await $`storybook automigrate addonA11yAddonTest ${options.yes ? '--yes' : ''}`; } From 805e18ab5b3e1c01992d39f4a71a23c23186307b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 11 Dec 2024 13:24:12 +0100 Subject: [PATCH 08/11] fix #29785 --- code/addons/test/src/node/vitest-manager.ts | 5 ++++- code/addons/test/src/vitest-plugin/index.ts | 10 +++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index 7267f3dcea38..e7debf2c3fab 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/code/addons/test/src/node/vitest-manager.ts @@ -1,4 +1,5 @@ import { existsSync } from 'node:fs'; +import { dirname, join } from 'node:path'; import type { CoverageOptions, @@ -29,6 +30,8 @@ type TagsFilter = { skip: string[]; }; +const packageDir = dirname(require.resolve('@storybook/experimental-addon-test/package.json')); + export class VitestManager { vitest: Vitest | null = null; @@ -44,7 +47,7 @@ export class VitestManager { const { createVitest } = await import('vitest/node'); const storybookCoverageReporter: [string, StorybookCoverageReporterOptions] = [ - '@storybook/experimental-addon-test/internal/coverage-reporter', + join(packageDir, 'dist/node/coverage-reporter.js'), { testManager: this.testManager, coverageOptions: this.vitest?.config?.coverage as ResolvedCoverageOptions<'v8'>, diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts index eadadb4440e5..b442d3afe797 100644 --- a/code/addons/test/src/vitest-plugin/index.ts +++ b/code/addons/test/src/vitest-plugin/index.ts @@ -1,4 +1,6 @@ /* eslint-disable no-underscore-dangle */ +import { dirname } from 'node:path'; + import type { Plugin } from 'vitest/config'; import { mergeConfig } from 'vitest/config'; import type { ViteUserConfig } from 'vitest/config'; @@ -63,6 +65,8 @@ const getStoryGlobsAndFiles = async ( }; }; +const packageDir = dirname(require.resolve('@storybook/experimental-addon-test/package.json')); + export const storybookTest = async (options?: UserOptions): Promise => { const finalOptions = { ...defaultOptions, @@ -146,15 +150,15 @@ export const storybookTest = async (options?: UserOptions): Promise => { const baseConfig: Omit = { test: { setupFiles: [ - '@storybook/experimental-addon-test/internal/setup-file', + join(packageDir, 'dist/vitest-plugin/setup-file.mjs'), // if the existing setupFiles is a string, we have to include it otherwise we're overwriting it typeof inputConfig_DoNotMutate.test?.setupFiles === 'string' && inputConfig_DoNotMutate.test?.setupFiles, - ].filter(Boolean), + ].filter(Boolean) as string[], ...(finalOptions.storybookScript ? { - globalSetup: ['@storybook/experimental-addon-test/internal/global-setup'], + globalSetup: [join(packageDir, './dist/vitest-plugin/global-setup.mjs')], } : {}), From b83343b1732df76a32883586d8258da1514ddf5b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 11 Dec 2024 14:01:34 +0100 Subject: [PATCH 09/11] Fix eslint --- code/addons/a11y/src/postinstall.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/a11y/src/postinstall.ts b/code/addons/a11y/src/postinstall.ts index 9faaf6990b36..9a64796f5e1b 100644 --- a/code/addons/a11y/src/postinstall.ts +++ b/code/addons/a11y/src/postinstall.ts @@ -1,5 +1,6 @@ import type { PostinstallOptions } from '@storybook/cli/src/add'; +// eslint-disable-next-line depend/ban-dependencies import { execa } from 'execa'; const $ = execa({ From 63ddc885a15aedddc062235f586144cd7397a682 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 11 Dec 2024 15:09:35 +0100 Subject: [PATCH 10/11] Update code/addons/test/src/vitest-plugin/index.ts --- code/addons/test/src/vitest-plugin/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts index b442d3afe797..c95f4b26269e 100644 --- a/code/addons/test/src/vitest-plugin/index.ts +++ b/code/addons/test/src/vitest-plugin/index.ts @@ -158,7 +158,7 @@ export const storybookTest = async (options?: UserOptions): Promise => { ...(finalOptions.storybookScript ? { - globalSetup: [join(packageDir, './dist/vitest-plugin/global-setup.mjs')], + globalSetup: [join(packageDir, 'dist/vitest-plugin/global-setup.mjs')], } : {}), From 5cfb8329a0bced77a7473c012c0e1f6143506195 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 11 Dec 2024 15:21:58 +0100 Subject: [PATCH 11/11] change to use pathe Co-authored-by: Jeppe Reinhold Co-authored-by: Jeppe Reinhold --- code/addons/test/src/node/vitest-manager.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index e7debf2c3fab..10700b97f71b 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/code/addons/test/src/node/vitest-manager.ts @@ -1,5 +1,4 @@ import { existsSync } from 'node:fs'; -import { dirname, join } from 'node:path'; import type { CoverageOptions, @@ -15,7 +14,7 @@ import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-eve import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from '@storybook/types'; -import path, { normalize } from 'pathe'; +import path, { dirname, join, normalize } from 'pathe'; import slash from 'slash'; import { COVERAGE_DIRECTORY, type Config } from '../constants';