diff --git a/.circleci/config.yml b/.circleci/config.yml index e8b77039e696..634d2d695dfa 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -880,15 +880,15 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 14 + parallelism: 13 requires: - build - chromatic-sandboxes: - parallelism: 11 + parallelism: 10 requires: - create-sandboxes - e2e-production: - parallelism: 9 + parallelism: 8 requires: - create-sandboxes - e2e-dev: @@ -896,7 +896,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 9 + parallelism: 8 requires: - create-sandboxes - vitest-integration: @@ -956,15 +956,15 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 18 + parallelism: 17 requires: - build - chromatic-sandboxes: - parallelism: 15 + parallelism: 14 requires: - create-sandboxes - e2e-production: - parallelism: 13 + parallelism: 12 requires: - create-sandboxes - e2e-dev: @@ -972,7 +972,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 13 + parallelism: 12 requires: - create-sandboxes - vitest-integration: @@ -1030,18 +1030,18 @@ workflows: requires: - build - create-sandboxes: - parallelism: 31 + parallelism: 30 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - chromatic-sandboxes: - parallelism: 28 + parallelism: 27 requires: - create-sandboxes - e2e-production: - parallelism: 26 + parallelism: 25 requires: - create-sandboxes - e2e-dev: @@ -1049,7 +1049,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 26 + parallelism: 25 requires: - create-sandboxes - vitest-integration: diff --git a/CHANGELOG.md b/CHANGELOG.md index fb9158af9444..e65068572f49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,16 @@ +## 9.0.16 + +- Automigration: Fail with non-zero exit code on migration failure - [#31923](https://github.com/storybookjs/storybook/pull/31923), thanks @mrginglymus! +- CLI: Fix `sb` CLI by explicitly exporting `bin/index.cjs` from `storybook` package - [#31922](https://github.com/storybookjs/storybook/pull/31922), thanks @ghengeveld! +- Core: Fix issue where collapsed test controls can be tabbed into - [#31921](https://github.com/storybookjs/storybook/pull/31921), thanks @zenocross! +- Core: Various fixes - [#31870](https://github.com/storybookjs/storybook/pull/31870), thanks @ghengeveld! +- Docs: Prevent JSON tree control from swallowing keyboard events when not in focus - [#31841](https://github.com/storybookjs/storybook/pull/31841), thanks @takashi-kasajima! +- Ember: Allow ember v5 as peer deps - [#25893](https://github.com/storybookjs/storybook/pull/25893), thanks @gossi! +- Next.js: upgrade sass-loader to 16.0.5 - [#31855](https://github.com/storybookjs/storybook/pull/31855), thanks @terrymun! +- NextJs-Vite: Enable next/font loading when using next-vite - [#31906](https://github.com/storybookjs/storybook/pull/31906), thanks @k35o! +- Portable stories: Fix playwright CT to allow functions to be passed as props - [#31335](https://github.com/storybookjs/storybook/pull/31335), thanks @adamscybot! +- UI: Set color scheme to sync scrollbar color with user-selected theme - [#28666](https://github.com/storybookjs/storybook/pull/28666), thanks @elisezhg! + ## 9.0.15 - CLI: Do not fail incompatible package check in doctor if only core packages used - [#31886](https://github.com/storybookjs/storybook/pull/31886), thanks @mrginglymus! diff --git a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.stories.tsx b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.stories.tsx new file mode 100644 index 000000000000..0a5319dfc114 --- /dev/null +++ b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.stories.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +const meta = { + title: 'Controls/JsonNodes', + tags: ['autodocs'], + argTypes: { + value: { control: { type: 'object' } }, + function: { control: { type: 'object' } }, + }, + args: { + value: { any: 'value' }, + function: { value: () => {} }, + }, + parameters: { + // This story exists only to verify proper behavior on its docs page, the snapshot is irrelevant + chromatic: { disableSnapshot: true }, + }, +}; + +export default meta; + +export const JsonNodes = { + render: () => ( + + Confirm the link works by pressing enter key + + ), +}; diff --git a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx index 58efa33928d5..6fb23ebf3bca 100644 --- a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx +++ b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx @@ -49,13 +49,21 @@ export class JsonAddValue extends Component elm === event.target + ); + if (!isFormFocused) { + return; + } if (event.code === 'Enter' || event.key === 'Enter') { event.preventDefault(); this.onSubmit(); } if (event.code === 'Escape' || event.key === 'Escape') { event.preventDefault(); - this.props.handleCancel(); + handleCancel(); } } @@ -551,7 +559,15 @@ export class JsonFunctionValue extends Component { } onKeydown(event: KeyboardEvent) { - if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) { + const { inputRef } = this.state; + if ( + event.altKey || + event.ctrlKey || + event.metaKey || + event.shiftKey || + event.repeat || + inputRef !== event.target + ) { return; } if (event.code === 'Enter' || event.key === 'Enter') { diff --git a/code/core/package.json b/code/core/package.json index bad19c282d29..3825f37f5f93 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -274,6 +274,7 @@ "./internal/manager/globals-runtime": { "import": "./dist/manager/globals-runtime.js" }, + "./bin/index.cjs": "./bin/index.cjs", "./package.json": "./package.json", "./internal/package.json": "./package.json" }, diff --git a/code/core/scripts/helpers/generatePackageJsonFile.ts b/code/core/scripts/helpers/generatePackageJsonFile.ts index 5267a3579d88..f6677adfb9a0 100644 --- a/code/core/scripts/helpers/generatePackageJsonFile.ts +++ b/code/core/scripts/helpers/generatePackageJsonFile.ts @@ -68,6 +68,9 @@ export async function generatePackageJsonFile(entries: ReturnType( export const CloseButton = (props: React.ComponentProps) => ( - + diff --git a/code/core/src/components/components/tooltip/Tooltip.tsx b/code/core/src/components/components/tooltip/Tooltip.tsx index 630a7b96945b..3a81d40aaabe 100644 --- a/code/core/src/components/components/tooltip/Tooltip.tsx +++ b/code/core/src/components/components/tooltip/Tooltip.tsx @@ -96,6 +96,7 @@ const Wrapper = styled.div( ({ hidden }) => ({ display: hidden ? 'none' : 'inline-block', zIndex: 2147483647, + colorScheme: 'light dark', }), ({ theme, color, hasChrome }) => hasChrome diff --git a/code/core/src/manager/components/layout/Layout.tsx b/code/core/src/manager/components/layout/Layout.tsx index 976bcfd68aa2..918f3c6d1a7f 100644 --- a/code/core/src/manager/components/layout/Layout.tsx +++ b/code/core/src/manager/components/layout/Layout.tsx @@ -210,6 +210,7 @@ const LayoutContainer = styled.div( overflow: 'hidden', display: 'flex', flexDirection: 'column', + colorScheme: 'light dark', [MEDIA_DESKTOP_BREAKPOINT]: { display: 'grid', diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index 38968173e0fd..605dd84dae78 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -176,6 +176,7 @@ export const Sidebar = React.memo(function Sidebar({ tooltip={} > { setIsFileSearchModalOpen(true); diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 45ceefeb65eb..a51a53fd7693 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -68,6 +68,8 @@ const Card = styled.div(({ theme }) => ({ zIndex: 1, borderRadius: theme.appBorderRadius, backgroundColor: theme.background.content, + display: 'flex', + flexDirection: 'column-reverse', '&:hover #testing-module-collapse-toggle': { opacity: 1, @@ -76,7 +78,6 @@ const Card = styled.div(({ theme }) => ({ const Collapsible = styled.div(({ theme }) => ({ overflow: 'hidden', - willChange: 'auto', boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`, })); @@ -270,34 +271,6 @@ export const TestingModule = ({ data-updated={isUpdated} > - {hasTestProviders && ( - - - {Object.values(registeredTestProviders).map((registeredTestProvider) => { - const { render: Render, id } = registeredTestProvider; - if (!Render) { - once.warn( - `No render function found for test provider with id '${id}', skipping...` - ); - return null; - } - return ( - - - - ); - })} - - - )} - toggleCollapsed(e) } : {})}> {hasTestProviders && ( @@ -432,6 +405,35 @@ export const TestingModule = ({ )} + + {hasTestProviders && ( + + + {Object.values(registeredTestProviders).map((registeredTestProvider) => { + const { render: Render, id } = registeredTestProvider; + if (!Render) { + once.warn( + `No render function found for test provider with id '${id}', skipping...` + ); + return null; + } + return ( + + + + ); + })} + + + )} ); diff --git a/code/core/src/manager/utils/tree.ts b/code/core/src/manager/utils/tree.ts index 15d104f214e9..49919271b43e 100644 --- a/code/core/src/manager/utils/tree.ts +++ b/code/core/src/manager/utils/tree.ts @@ -40,8 +40,10 @@ export const getDescendantIds = memoize(1000)(( skipLeafs: boolean ): string[] => { const entry = data[id]; - const children = entry.type === 'story' || entry.type === 'docs' ? [] : entry.children; - return children.reduce((acc, childId) => { + if (!entry || entry.type === 'story' || entry.type === 'docs' || !entry.children) { + return []; + } + return entry.children.reduce((acc, childId) => { const child = data[childId]; if (!child || (skipLeafs && (child.type === 'story' || child.type === 'docs'))) { diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts index ccfb6dda5831..0794c17c091f 100644 --- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts +++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts @@ -301,7 +301,9 @@ export function composeStories( return composedStories; } -type WrappedStoryRef = { __pw_type: 'jsx' | 'importRef' }; +type WrappedStoryRef = + | { __pw_type: 'jsx'; props: Record } + | { __pw_type: 'importRef' }; type UnwrappedJSXStoryRef = { __pw_type: 'jsx'; type: UnwrappedImportStoryRef; @@ -341,12 +343,16 @@ export function createPlaywrightTest( `); } + // Props are not necessarily serialisable and so can't be passed to browser via + // `page.evaluate`. Regardless they are not needed for storybook load/play steps. + const { props, ...storyRefWithoutProps } = storyRef; + await page.evaluate(async (wrappedStoryRef: WrappedStoryRef) => { const unwrappedStoryRef = await globalThis.__pwUnwrapObject?.(wrappedStoryRef); const story = '__pw_type' in unwrappedStoryRef ? unwrappedStoryRef.type : unwrappedStoryRef; return story?.load?.(); - }, storyRef); + }, storyRefWithoutProps); // mount the story const mountResult = await mount(storyRef, ...restArgs); @@ -358,7 +364,7 @@ export function createPlaywrightTest( '__pw_type' in unwrappedStoryRef ? unwrappedStoryRef.type : unwrappedStoryRef; const canvasElement = document.querySelector('#root'); return story?.play?.({ canvasElement }); - }, storyRef); + }, storyRefWithoutProps); return mountResult; }); diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 045571e4e01d..88f8175e70e1 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,7 +1,7 @@ { "name": "@storybook/ember", "version": "9.0.15", - "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", + "description": "Storybook for Ember: Develop, document, and test Ember components in isolation", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { "url": "https://github.com/storybookjs/storybook/issues" @@ -62,7 +62,7 @@ "@babel/core": "*", "babel-plugin-ember-modules-api-polyfill": "^3.5.0", "babel-plugin-htmlbars-inline-precompile": "^5.3.1", - "ember-source": "~3.28.1 || ^4.0.0", + "ember-source": "~3.28.1 || >=4.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "storybook": "workspace:^" diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json index 017b3e23606e..deab254c6f7d 100644 --- a/code/frameworks/nextjs-vite/package.json +++ b/code/frameworks/nextjs-vite/package.json @@ -108,7 +108,7 @@ "@storybook/react": "workspace:*", "@storybook/react-vite": "workspace:*", "styled-jsx": "5.1.6", - "vite-plugin-storybook-nextjs": "^2.0.3" + "vite-plugin-storybook-nextjs": "^2.0.5" }, "devDependencies": { "@types/node": "^22.0.0", diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index dc199f64a8b7..9776ab5313dd 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -156,7 +156,7 @@ "postcss-loader": "^8.1.1", "react-refresh": "^0.14.0", "resolve-url-loader": "^5.0.0", - "sass-loader": "^14.2.1", + "sass-loader": "^16.0.5", "semver": "^7.3.5", "style-loader": "^3.3.1", "styled-jsx": "^5.1.6", diff --git a/code/lib/cli-storybook/src/automigrate/index.test.ts b/code/lib/cli-storybook/src/automigrate/index.test.ts index 09e8ad3bea2f..0c8fa5b32da7 100644 --- a/code/lib/cli-storybook/src/automigrate/index.test.ts +++ b/code/lib/cli-storybook/src/automigrate/index.test.ts @@ -2,15 +2,18 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import type { JsPackageManager, PackageJson } from 'storybook/internal/common'; -import { runFixes } from './index'; +import * as mainConfigFile from './helpers/mainConfigFile'; +import { doAutomigrate, runFixes } from './index'; import type { Fix } from './types'; const check1 = vi.fn(); const run1 = vi.fn(); const getModulePackageJSON = vi.fn(); +const getStorybookData = vi.fn(); const prompt1Message = 'prompt1Message'; vi.spyOn(console, 'error').mockImplementation(console.log); +vi.spyOn(mainConfigFile, 'getStorybookData').mockImplementation(getStorybookData); const fixes: Fix[] = [ { @@ -70,6 +73,20 @@ const mainConfigPath = '/path/to/mainConfig'; const beforeVersion = '6.5.15'; const isUpgrade = true; +const common = { + fixes, + dryRun, + yes, + mainConfig: { stories: [] }, + rendererPackage, + skipInstall, + configDir, + packageManager: packageManager, + mainConfigPath, + isUpgrade, + storiesPaths: [], +}; + const runFixWrapper = async ({ beforeVersion, storybookVersion, @@ -78,22 +95,30 @@ const runFixWrapper = async ({ storybookVersion: string; }) => { return runFixes({ - fixes, - dryRun, - yes, - mainConfig: { stories: [] }, - rendererPackage, - skipInstall, - configDir, - packageManager: packageManager, - mainConfigPath, + ...common, storybookVersion, beforeVersion, - isUpgrade, - storiesPaths: [], }); }; +const runAutomigrateWrapper = async ({ + beforeVersion, + storybookVersion, +}: { + beforeVersion: string; + storybookVersion: string; +}) => { + getStorybookData.mockImplementation(() => { + return { + ...common, + beforeVersion, + storybookVersion, + isLatest: true, + }; + }); + return doAutomigrate({ configDir }); +}; + describe('runFixes', () => { beforeEach(() => { getModulePackageJSON.mockImplementation(() => { @@ -129,7 +154,7 @@ describe('runFixes', () => { ); }); - it('should fail if an error is thrown', async () => { + it('should fail if an error is thrown by migration', async () => { check1.mockRejectedValue(new Error('check1 error')); const { fixResults } = await runFixWrapper({ beforeVersion, storybookVersion: '7.0.0' }); @@ -139,4 +164,13 @@ describe('runFixes', () => { }); expect(run1).not.toHaveBeenCalled(); }); + + it('should throw error if an error is thrown my migration', async () => { + check1.mockRejectedValue(new Error('check1 error')); + + const result = runAutomigrateWrapper({ beforeVersion, storybookVersion: '7.0.0' }); + + await expect(result).rejects.toThrow('Some migrations failed'); + expect(run1).not.toHaveBeenCalled(); + }); }); diff --git a/code/lib/cli-storybook/src/automigrate/index.ts b/code/lib/cli-storybook/src/automigrate/index.ts index 9e8987a1d3f1..732d15c8fed5 100644 --- a/code/lib/cli-storybook/src/automigrate/index.ts +++ b/code/lib/cli-storybook/src/automigrate/index.ts @@ -33,6 +33,12 @@ const logAvailableMigrations = () => { `); }; +const hasFailures = (fixResults: Record | undefined): boolean => { + return Object.values(fixResults || {}).some( + (r) => r === FixStatus.FAILED || r === FixStatus.CHECK_FAILED + ); +}; + export const doAutomigrate = async (options: AutofixOptionsFromCLI) => { logger.debug('Extracting storybook data...'); const { @@ -82,6 +88,10 @@ export const doAutomigrate = async (options: AutofixOptionsFromCLI) => { if (outcome && !options.skipDoctor) { await doctor({ configDir, packageManager: options.packageManager }); } + + if (hasFailures(outcome?.fixResults)) { + throw new Error('Some migrations failed'); + } }; export const automigrate = async ({ @@ -173,12 +183,8 @@ export const automigrate = async ({ storiesPaths, }); - const hasFailures = Object.values(fixResults).some( - (r) => r === FixStatus.FAILED || r === FixStatus.CHECK_FAILED - ); - // if migration failed, display a log file in the users cwd - if (hasFailures) { + if (hasFailures(fixResults)) { logTracker.enableLogWriting(); } diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index d74b2077b580..a997e083f96e 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -417,16 +417,16 @@ export const baseTemplates = { }, skipTasks: ['e2e-tests-dev', 'bench'], }, - 'nuxt-vite/default-ts': { - name: 'Nuxt v3 (Vite | TypeScript)', - script: 'npx nuxi init --packageManager yarn --gitInit false -M @nuxt/ui {{beforeDir}}', - expected: { - framework: '@storybook-vue/nuxt', - renderer: '@storybook/vue3', - builder: '@storybook/builder-vite', - }, - skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], - }, + // 'nuxt-vite/default-ts': { + // name: 'Nuxt v3 (Vite | TypeScript)', + // script: 'npx nuxi init --packageManager yarn --gitInit false -M @nuxt/ui {{beforeDir}}', + // expected: { + // framework: '@storybook-vue/nuxt', + // renderer: '@storybook/vue3', + // builder: '@storybook/builder-vite', + // }, + // skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], + // }, 'html-vite/default-js': { name: 'HTML Latest (Vite | JavaScript)', script: @@ -786,7 +786,7 @@ export const normal: TemplateKey[] = [ 'react-vite/default-ts', 'angular-cli/default-ts', 'vue3-vite/default-ts', - 'nuxt-vite/default-ts', + // 'nuxt-vite/default-ts', 'lit-vite/default-ts', 'svelte-vite/default-ts', 'svelte-kit/skeleton-ts', diff --git a/code/package.json b/code/package.json index ea271157b70e..6ae914cba364 100644 --- a/code/package.json +++ b/code/package.json @@ -283,5 +283,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "9.0.16" } diff --git a/code/yarn.lock b/code/yarn.lock index 18d74ff73bd5..1a882b75ada1 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6458,7 +6458,7 @@ __metadata: "@babel/core": "*" babel-plugin-ember-modules-api-polyfill: ^3.5.0 babel-plugin-htmlbars-inline-precompile: ^5.3.1 - ember-source: ~3.28.1 || ^4.0.0 + ember-source: ~3.28.1 || >=4.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 storybook: "workspace:^" @@ -6519,7 +6519,7 @@ __metadata: postcss-load-config: "npm:^6.0.1" styled-jsx: "npm:5.1.6" typescript: "npm:^5.8.3" - vite-plugin-storybook-nextjs: "npm:^2.0.3" + vite-plugin-storybook-nextjs: "npm:^2.0.5" peerDependencies: next: ^14.1.0 || ^15.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta @@ -6571,7 +6571,7 @@ __metadata: postcss-loader: "npm:^8.1.1" react-refresh: "npm:^0.14.0" resolve-url-loader: "npm:^5.0.0" - sass-loader: "npm:^14.2.1" + sass-loader: "npm:^16.0.5" semver: "npm:^7.3.5" style-loader: "npm:^3.3.1" styled-jsx: "npm:^5.1.6" @@ -23781,7 +23781,7 @@ __metadata: languageName: node linkType: hard -"sass-loader@npm:16.0.5": +"sass-loader@npm:16.0.5, sass-loader@npm:^16.0.5": version: 16.0.5 resolution: "sass-loader@npm:16.0.5" dependencies: @@ -23807,32 +23807,6 @@ __metadata: languageName: node linkType: hard -"sass-loader@npm:^14.2.1": - version: 14.2.1 - resolution: "sass-loader@npm:14.2.1" - dependencies: - neo-async: "npm:^2.6.2" - peerDependencies: - "@rspack/core": 0.x || 1.x - node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 - sass: ^1.3.0 - sass-embedded: "*" - webpack: ^5.0.0 - peerDependenciesMeta: - "@rspack/core": - optional: true - node-sass: - optional: true - sass: - optional: true - sass-embedded: - optional: true - webpack: - optional: true - checksum: 10c0/9a48d454584d96d6c562eb323bb9e3c6808e930eeaaa916975b97d45831e0b87936a8655cdb3a4512a25abc9587dea65a9616e42396be0d7e7c507a4795a8146 - languageName: node - linkType: hard - "sass@npm:1.85.0": version: 1.85.0 resolution: "sass@npm:1.85.0" @@ -26773,9 +26747,9 @@ __metadata: languageName: node linkType: hard -"vite-plugin-storybook-nextjs@npm:^2.0.3": - version: 2.0.3 - resolution: "vite-plugin-storybook-nextjs@npm:2.0.3" +"vite-plugin-storybook-nextjs@npm:^2.0.5": + version: 2.0.5 + resolution: "vite-plugin-storybook-nextjs@npm:2.0.5" dependencies: "@next/env": "npm:^15.0.3" image-size: "npm:^2.0.0" @@ -26786,8 +26760,8 @@ __metadata: peerDependencies: next: ^14.1.0 || ^15.0.0 storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0 - vite: ^5.0.0 || ^6.0.0 - checksum: 10c0/ab4e87bf6e95fa76046120705a7d8b41c5cf4b266a3a75d0187112e2598e6b7fb624d4bdaa794ce749f4792d6d296e4fba1148bddf21085aa52f58c7c6b98aa3 + vite: ^5.0.0 || ^6.0.0 || ^7.0.0 + checksum: 10c0/ee308c836c4380f9c9e3f51a7eab532eb648248cb8b78866032ed0e33af2cde3457e536e20c74546c46141d0b5ea9809ec13b76db299b8bd59468285228c3b1b languageName: node linkType: hard diff --git a/docs/_snippets/addon-backgrounds-options-in-preview.md b/docs/_snippets/addon-backgrounds-options-in-preview.md index a95c01f95d1c..6cb57383aeed 100644 --- a/docs/_snippets/addon-backgrounds-options-in-preview.md +++ b/docs/_snippets/addon-backgrounds-options-in-preview.md @@ -20,7 +20,7 @@ export default { ```ts filename=".storybook/preview.ts" renderer="common" language="ts" // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. -import { Preview } from '@storybook/your-framework'; +import type { Preview } from '@storybook/your-framework'; const preview: Preview = { parameters: { diff --git a/docs/versions/latest.json b/docs/versions/latest.json index c3755594c934..730937db92ee 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"9.0.15","info":{"plain":"- CLI: Do not fail incompatible package check in doctor if only core packages used - [#31886](https://github.com/storybookjs/storybook/pull/31886), thanks @mrginglymus!\n- React: Bump @joshwooding/vite-plugin-react-docgen-typescript to 0.6.1 - [#31899](https://github.com/storybookjs/storybook/pull/31899), thanks @mrginglymus!"}} +{"version":"9.0.16","info":{"plain":"- Automigration: Fail with non-zero exit code on migration failure - [#31923](https://github.com/storybookjs/storybook/pull/31923), thanks @mrginglymus!\n- CLI: Fix `sb` CLI by explicitly exporting `bin/index.cjs` from `storybook` package - [#31922](https://github.com/storybookjs/storybook/pull/31922), thanks @ghengeveld!\n- Core: Fix issue where collapsed test controls can be tabbed into - [#31921](https://github.com/storybookjs/storybook/pull/31921), thanks @zenocross!\n- Core: Various fixes - [#31870](https://github.com/storybookjs/storybook/pull/31870), thanks @ghengeveld!\n- Docs: Prevent JSON tree control from swallowing keyboard events when not in focus - [#31841](https://github.com/storybookjs/storybook/pull/31841), thanks @takashi-kasajima!\n- Ember: Allow ember v5 as peer deps - [#25893](https://github.com/storybookjs/storybook/pull/25893), thanks @gossi!\n- Next.js: upgrade sass-loader to 16.0.5 - [#31855](https://github.com/storybookjs/storybook/pull/31855), thanks @terrymun!\n- NextJs-Vite: Enable next/font loading when using next-vite - [#31906](https://github.com/storybookjs/storybook/pull/31906), thanks @k35o!\n- Portable stories: Fix playwright CT to allow functions to be passed as props - [#31335](https://github.com/storybookjs/storybook/pull/31335), thanks @adamscybot!\n- UI: Set color scheme to sync scrollbar color with user-selected theme - [#28666](https://github.com/storybookjs/storybook/pull/28666), thanks @elisezhg!"}} diff --git a/docs/versions/next.json b/docs/versions/next.json index c502f430f336..c555efc2bbd7 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"9.1.0-alpha.6","info":{"plain":"- CLI: Fix package manager instantiation in empty directories - [#31743](https://github.com/storybookjs/storybook/pull/31743), thanks @yannbf!\n- CLI: Improve support for upgrading Storybook in monorepos - [#31557](https://github.com/storybookjs/storybook/pull/31557), thanks @yannbf!\n- CSF: Improve docs parameter types - [#31736](https://github.com/storybookjs/storybook/pull/31736), thanks @kasperpeulen!\n- Core: Delete shim addon packages - [#31728](https://github.com/storybookjs/storybook/pull/31728), thanks @ndelangen!"}} +{"version":"9.1.0-alpha.7","info":{"plain":"- A11y: Improved toolbar a11y by fixing semantics - [#28672](https://github.com/storybookjs/storybook/pull/28672), thanks @mehm8128!\n- Addon Vitest: Remove Optimize deps candidates due to Vitest warnings - [#31809](https://github.com/storybookjs/storybook/pull/31809), thanks @valentinpalkovic!\n- Addon Vitest: Support init in Vitest >= 3.2 - [#31715](https://github.com/storybookjs/storybook/pull/31715), thanks @valentinpalkovic!\n- Addons: Use chromatic-com/storybook without version specifier - [#31627](https://github.com/storybookjs/storybook/pull/31627), thanks @valentinpalkovic!\n- Angular: Bundle using TSup - [#31690](https://github.com/storybookjs/storybook/pull/31690), thanks @ndelangen!\n- Angular: Fix Storybook experimentalZoneless is not compatible with Angular 20 - [#31772](https://github.com/storybookjs/storybook/pull/31772), thanks @guysenpai!\n- Angular: Tailwind 4 compatibility - [#31759](https://github.com/storybookjs/storybook/pull/31759), thanks @valentinpalkovic!\n- Angular: Update MiniCssExtractPlugin configuration for cache busting - [#31752](https://github.com/storybookjs/storybook/pull/31752), thanks @valentinpalkovic!\n- CLI: Add RN/RNW \\\"both\\\" init option - [#31778](https://github.com/storybookjs/storybook/pull/31778), thanks @shilman!\n- CLI: Do not fail incompatible package check in doctor if only core packages used - [#31886](https://github.com/storybookjs/storybook/pull/31886), thanks @mrginglymus!\n- CLI: Fix `sb` CLI by explicitly exporting `bin/index.cjs` from `storybook` package - [#31922](https://github.com/storybookjs/storybook/pull/31922), thanks @ghengeveld!\n- CLI: Prebundle more in cli-storybook package - [#31746](https://github.com/storybookjs/storybook/pull/31746), thanks @ndelangen!\n- CLI: Show Storybook version in the upgrade command - [#31774](https://github.com/storybookjs/storybook/pull/31774), thanks @yannbf!\n- CSF: Improve controls parameters - [#31745](https://github.com/storybookjs/storybook/pull/31745), thanks @kasperpeulen!\n- CSF: Story ComponentAnnotations['subcomponents'] to correctly use its own type for subcomponents rather than attempt to inherit from the component - [#31723](https://github.com/storybookjs/storybook/pull/31723), thanks @mihkeleidast!\n- Controls: Improve the accessibility of the object control - [#31581](https://github.com/storybookjs/storybook/pull/31581), thanks @Sidnioulz!\n- Core: Cleanup of type following up v9 and small verbatimModuleSyntax type fix - [#31823](https://github.com/storybookjs/storybook/pull/31823), thanks @alcpereira!\n- Core: Disable interactions debugger on composed stories to avoid cross-origin error - [#31685](https://github.com/storybookjs/storybook/pull/31685), thanks @ghengeveld!\n- Core: Enhance package manager install methods to support optional force flag - [#31796](https://github.com/storybookjs/storybook/pull/31796), thanks @valentinpalkovic!\n- Core: Fix FIPS compliance - [#31806](https://github.com/storybookjs/storybook/pull/31806), thanks @JReinhold!\n- Core: Fix addon scrollbars and align scrollbar colors with toolbars - [#31844](https://github.com/storybookjs/storybook/pull/31844), thanks @Sidnioulz!\n- Core: Fix aria-controls attribute on sidebar nodes to include all children - [#31491](https://github.com/storybookjs/storybook/pull/31491), thanks @candrepa1!\n- Core: Fix cyclical dependency in core addons - [#31750](https://github.com/storybookjs/storybook/pull/31750), thanks @JReinhold!\n- Core: Fix horizontal scrollbar covering part of the toolbar - [#31704](https://github.com/storybookjs/storybook/pull/31704), thanks @Sidnioulz!\n- Core: Fix issue where collapsed test controls can be tabbed into - [#31921](https://github.com/storybookjs/storybook/pull/31921), thanks @zenocross!\n- Core: Gracefully handle disallowed cross-origin clipboard access - [#31834](https://github.com/storybookjs/storybook/pull/31834), thanks @ghengeveld!\n- Core: Restore original clipboard after invoking `userEvent.setup()` - [#31730](https://github.com/storybookjs/storybook/pull/31730), thanks @ghengeveld!\n- Core: Serve dynamic favicon based on testing module status - [#31763](https://github.com/storybookjs/storybook/pull/31763), thanks @ghengeveld!\n- Core: Support array-based catch-all Next.js route segments in AppRouterProvider - [#31524](https://github.com/storybookjs/storybook/pull/31524), thanks @yatishgoel!\n- Core: Support container queries in addon panels - [#23261](https://github.com/storybookjs/storybook/pull/23261), thanks @neil-morrison44!\n- Core: Various fixes - [#31870](https://github.com/storybookjs/storybook/pull/31870), thanks @ghengeveld!\n- Deps: Extend `vite` peerDependencies range to include `7.0.0` - [#31859](https://github.com/storybookjs/storybook/pull/31859), thanks @ghengeveld!\n- Deps: Update vite-plugin-babel to 1.3.2 to fix vite 7.0.0 peerDependency issue - [#31888](https://github.com/storybookjs/storybook/pull/31888), thanks @ghengeveld!\n- Docs: Prevent JSON tree control from swallowing keyboard events when not in focus - [#31841](https://github.com/storybookjs/storybook/pull/31841), thanks @takashi-kasajima!\n- Docs: Update `react-element-to-jsx-string` - [#31170](https://github.com/storybookjs/storybook/pull/31170), thanks @7rulnik!\n- Ember: Allow ember v5 as peer deps - [#25893](https://github.com/storybookjs/storybook/pull/25893), thanks @gossi!\n- Next.js-Vite: Support Next.js v15.4 - [#31828](https://github.com/storybookjs/storybook/pull/31828), thanks @valentinpalkovic!\n- Next.js: Add webpack alias to resolve Next.js package conflicts - [#31755](https://github.com/storybookjs/storybook/pull/31755), thanks @valentinpalkovic!\n- Next.js: Enhance Vite configuration with styled-jsx aliasing - [#31757](https://github.com/storybookjs/storybook/pull/31757), thanks @valentinpalkovic!\n- Next.js: upgrade sass-loader to 16.0.5 - [#31855](https://github.com/storybookjs/storybook/pull/31855), thanks @terrymun!\n- NextJs-Vite: Enable next/font loading when using next-vite - [#31906](https://github.com/storybookjs/storybook/pull/31906), thanks @k35o!\n- Nextjs-Vite: Use tsconfig paths plugin - [#31764](https://github.com/storybookjs/storybook/pull/31764), thanks @kasperpeulen!\n- Portable stories: Fix playwright CT to allow functions to be passed as props - [#31335](https://github.com/storybookjs/storybook/pull/31335), thanks @adamscybot!\n- React Native Web: Fix shift spread operator in react-native-web-vite presets - [#31804](https://github.com/storybookjs/storybook/pull/31804), thanks @xlecunff-pass!\n- React Native: Fix window event listeners that dont exist on rn - [#31780](https://github.com/storybookjs/storybook/pull/31780), thanks @dannyhw!\n- React: Bump @joshwooding/vite-plugin-react-docgen-typescript to 0.6.1 - [#31899](https://github.com/storybookjs/storybook/pull/31899), thanks @mrginglymus!\n- Telemetry: Fix prompting without checking isTTY - [#31781](https://github.com/storybookjs/storybook/pull/31781), thanks @Synar!\n- UI: Apply user updates for mobile navigation accessibility - [#31401](https://github.com/storybookjs/storybook/pull/31401), thanks @yatishgoel!\n- UI: Hide keyboard shortcuts entry from menu when shortcuts are disabled - [#23411](https://github.com/storybookjs/storybook/pull/23411), thanks @Spielboerg!\n- UI: Set color scheme to sync scrollbar color with user-selected theme - [#28666](https://github.com/storybookjs/storybook/pull/28666), thanks @elisezhg!\n- UI: Visual focus indicators (VFIs) aren't visible in high contrast mode (rebase) - [#31848](https://github.com/storybookjs/storybook/pull/31848), thanks @Sidnioulz!\n- Vite: Remove addon-themes and theming from optimized deps list - [#31833](https://github.com/storybookjs/storybook/pull/31833), thanks @ghengeveld!"}} diff --git a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts index 7ba21230ae73..74c0d4a319f3 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts +++ b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts @@ -205,24 +205,22 @@ test.describe("component testing", () => { "Run component tests" ); - const testingModuleDescription = await page.locator( - "#testing-module-description" - ); - const runTestsButton = await page.getByLabel("Start test run"); const watchModeButton = await page.getByLabel("Enable watch mode"); await expect(runTestsButton).toBeEnabled(); await expect(watchModeButton).toBeEnabled(); await runTestsButton.click(); - await expect(watchModeButton).toBeDisabled(); - - await expect(testingModuleDescription).toContainText("Testing"); + await Promise.all([ + expect(watchModeButton).toBeDisabled(), + expect(page.locator("#testing-module-description")).toHaveText(/Testing/), + ]); // Wait for test results to appear - await expect(testingModuleDescription).toHaveText(/Ran \d+ tests/, { - timeout: 30000, - }); + await expect(page.locator("#testing-module-description")).toHaveText( + /Ran \d+ tests/, + { timeout: 30000 } + ); await expect(runTestsButton).toBeEnabled(); await expect(watchModeButton).toBeEnabled(); diff --git a/test-storybooks/portable-stories-kitchen-sink/react/playwright-e2e.config.ts b/test-storybooks/portable-stories-kitchen-sink/react/playwright-e2e.config.ts index 03142a650659..4448147bcc95 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/playwright-e2e.config.ts +++ b/test-storybooks/portable-stories-kitchen-sink/react/playwright-e2e.config.ts @@ -56,7 +56,5 @@ export default defineConfig({ command: "yarn storybook", url: "http://127.0.0.1:6006", reuseExistingServer: true, - stdout: "pipe", - stderr: "pipe", }, }); diff --git a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx index ee201e587159..02dcc25df7b9 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx @@ -18,11 +18,14 @@ test('renders with composeStory (singular)', async ({ mount }) => { }); test('renders story with props', async ({ mount }) => { + let called = false const component = await mount( - child from test + { called = true }}>child from test ); await expect(component).toContainText('child from test'); await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/); + await component.getByRole('button').click() + await expect(called).toBe(true) }); test('renders story with custom render', async ({ mount }) => {