feat(storybook)!: support storybook 9

[Coly010]

Current Behavior

We currently do not have support for Storybook 9, nor any migrations to help users switch to it.

Expected Behavior

Support Storybook 9 and add a migration for users to switch to v9

BREAKING CHANGE: Remove deprecated generators: @nx/storybook:cypress-project, @nx/react-native:storybook-configuration, @nx/react-native:stories, @nx/react-native:component-story

[nx-cloud]

View your CI Pipeline Execution ↗ for commit da609d4.

Command	Status	Duration	Result
nx nx-release @nx/nx-source --parallel 8 --loca...	✅ Succeeded	8m 15s	View ↗
nx run-many -t build-native-wasm	✅ Succeeded	1m 30s	View ↗
nx run-many --target=build-native -- --target=a...	✅ Succeeded	8m 19s	View ↗
nx run-many --target=build-native -- --target=x...	✅ Succeeded	6m 28s	View ↗
nx run-many --target=build-native -- --target=x...	✅ Succeeded	6m 26s	View ↗
nx run-many --target=build-native -- --target=a...	✅ Succeeded	6m 54s	View ↗
nx run-many --verbose --outputStyle stream --ta...	✅ Succeeded	6m 18s	View ↗
nx run-many --target=build-native -- --target=a...	✅ Succeeded	4m 2s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-13 16:19:43 UTC

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nx-dev	✅ Ready (Inspect)	Visit Preview	May 13, 2025 3:47pm

[yannbf]

Related to the generation of story files, e.g.:
https://github.com/search?q=repo%3Anrwl%2Fnx%20%40storybook%2Ftesting-library&type=code

here's a before/after code in case it helps!

- import type { Meta, StoryObj } from '@storybook/react';
+ import type { Meta, StoryObj } from '@storybook/react-webpack5'; // the "renderer" is gone, we use the "framework" now
import { MyButton } from './my-button';
- import { within } from '@storybook/testing-library';
- import { expect } from '@storybook/jest';
+ import { expect } from 'storybook/test'; // all test utilities are part of storybook now

const meta: Meta<typeof MyButton> = {
  component: MyButton,
  title: 'MyButton',
};
export default meta;
type Story = StoryObj<typeof MyButton>;

export const Heading: Story = {
  args: {
    text: '',
    padding: 0,
    disabled: false,
  },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvas }) => { // the within + canvasElement thing happens internally now
-    const canvas = within(canvasElement);
-    expect(canvas.getByText(/Welcome to MyButton!/gi)).toBeTruthy();
+    await expect(canvas.getByText(/Welcome to MyButton!/gi)).toBeTruthy(); // this should be awaited
  },
};

[github-actions]

🐳 We have a release for that!

This PR has a release associated with it. You can try it out using this command:

npx [email protected] my-workspace

Or just copy this version and use it in your own command:

0.0.0-pr-31172-da609d4

Release details	📑
Published version	0.0.0-pr-31172-da609d4
Triggered by	@Coly010
Branch	storybook/migrate-9
Commit	da609d4
Workflow run	15001097854

To request a new release for this pull request, mention someone from the Nx team or the @nrwl/nx-pipelines-reviewers.

[yannbf]

vue-vite is also umaintained since Storybook 8, as it relates to Vue2 and lower

[yannbf]

should this still be called storybook7?

[yannbf]

Suggested change

	title: 'Storybook 8 Migration Guide',
	title: 'Storybook 9 Migration Guide',

[yannbf]

Suggested change

	`You can run the following commands manually to upgrade your Storybook projects to Storybook 8:`,
	`You can run the following commands manually to upgrade your Storybook projects to Storybook 9:`,