feat(storybook): use native storybook/angular executor

[mandarini]

Current Behavior

Right now, when we're invoking the Storybook target, the @nrwl/storybook:storybook runs, which is basically a wrapper around buildDevStandalone of Storybook. This may lead to inconsistencies between the native Storybook result and the Nx result. Plus, it brings the need for maintenance.

Expected Behavior

If this works out, in the future, we're hoping to be using the native Storybook executors to serve and build Storybook, instead of the nx-wrapped ones, for Angular projects.

eg.

    "storybook": {
      "executor": "@storybook/angular:start-storybook",
      ....

To try this out

Transform your existing Angular project storybook and build-storybook targets

Use the generator @nrwl/storybook:change-storybook-targets to change your existing Angular project Storybook targets to use the native executor.

Then run the storybook executor as you would normally (nx storybook <PROJECT-NAME>)

Generate Storybook Configuration for a new Angular project

The new configuration will have the new targets

Sample Repo

Check out this repository - it shows all use cases.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4a1eda0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 12 targets

• nx affected --target=build --base=4863e5124d02c84545fb16b9c03335520cd2270a --head=4a1eda0e6d447c2b6c235fc37d6f8693fcbeb51d --parallel=3
• nx affected --target=e2e --base=4863e5124d02c84545fb16b9c03335520cd2270a --head=4a1eda0e6d447c2b6c235fc37d6f8693fcbeb51d --exclude=e2e-detox,e2e-js,e2e-next,e2e-workspace-create,e2e-workspace-integrations,e2e-workspace-core,e2e-react,e2e-web,e2e-angular-extensions,e2e-angular-core,e2e-cli,e2e-nx-plugin,e2e-cypress,e2e-node,e2e-linter,e2e-jest,e2e-a...
• nx affected --target=e2e --base=4863e5124d02c84545fb16b9c03335520cd2270a --head=4a1eda0e6d447c2b6c235fc37d6f8693fcbeb51d --exclude=e2e-storybook,e2e-react-native,e2e-detox --parallel=1
• nx affected --target=lint --base=4863e5124d02c84545fb16b9c03335520cd2270a --head=4a1eda0e6d447c2b6c235fc37d6f8693fcbeb51d --parallel=3
• nx affected --target=test --base=4863e5124d02c84545fb16b9c03335520cd2270a --head=4a1eda0e6d447c2b6c235fc37d6f8693fcbeb51d --parallel=1
• nx build typedoc-theme
• nx-cloud record -- yarn check-commit
• nx-cloud record -- yarn check-imports
• nx-cloud record -- yarn depcheck
• nx-cloud record -- yarn documentation
• nx-cloud record -- yarn nx format:check --base=4863e5124d02c84545fb16b9c03335520cd2270a --head=4a1eda0e6d447c2b6c235fc37d6f8693fcbeb51d
• nx-cloud record -- yarn nx workspace-lint

---

Sent with 💌 from NxCloud.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nrwl/nx-dev/HykM5xDKbUoYfn26i7ZZqLZwAR7y
✅ Preview: https://nx-dev-git-fork-mandarini-feat-change-storybook-executor-nrwl.vercel.app

[Deployment for daefc71 canceled]

[Coly010]

Code looks good, let me check it out locally and do a test or two :)

[Coly010]

When building locally I had a TS error come from update-12-3-0/update-storybook migration In the angular package.

Error: packages/angular/src/migrations/update-12-3-0/update-storybook.ts:39:11 - error TS2367: This condition will always return 'true' since the types '"@storybook/react" | "@storybook/react-native" | "@storybook/html" | "@storybook/web-components" | "@storybook/vue" | "@storybook/vue3" | "@storybook/svelte"' and '"@storybook/angular"' have no overlap.

39       if (options.uiFramework !== '@storybook/angular') {

Commenting that migration out, I can build. Which let me test it out.

And it works well on a newly generated angular app! 🔥

And it also works for MFE apps where we end up changing the default builder etc.

Awesome :)

[Coly010]

This looks good on my side!

There's a conflict the docs map, but otherwise this looks good!

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.