UI: Improve empty state of addon panel

[yannbf]

Closes #26445

What I did

This PR revamps the empty state of the addon panel (when users have zero addons) by doing a couple of things:

1 - Adds the toolbar items so that users can toggle position and close the panel
2 - Adds some copy with a link to the integrations catalog, so that users can explore Storybook addons

3 - Creates a new EmptyTabContent component and reuses that across different addon panels

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in your browser
3. Open interactions panel in the Button stories, it should show the empty state

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[nx-cloud]

☁️ Nx Cloud Report

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

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many --target=prep --all --parallel=8 --max-parallel=3 -- --reset --optimized

---

Sent with 💌 from NxCloud.

[mkosir]

Hi @yannbf, having a quick look into the PR, just wondering will it be possible to not show/hide add on panel completely (as it is in v7)?

[cdedreuille]

@mkosir The addon panel is part of the manager UI. After a couple of discussion we think it is best to make sure we always show the addon panel with options to hide it if you want as expected. If you have no addon, we will show a message that redirect you to the addons catalog.

The idea to remove the addon panel if you have no addon didn't felt right to us. Addons are a big part of what makes Storybook great.

[mkosir]

we always show the addon panel with options to hide it if you want as expected.

@cdedreuille thanks, if I understand correctly it will be possible to hide it, with some config option e.g. showPanel: false.

[cdedreuille]

@mkosir I was referring to the option to hide or show the panel but not removing it completely. I'm not sure I see the value to have an option to remove it completely. What is your use case? Is it to present your design system to your team? Can docs be a good alternative to what you are trying to achieve?

[cdedreuille]

@yannbf If you could just change the life boat ring icon to the docs one that would be great. Other than that, the code looks great. Thank you 🙏

[mkosir]

@mkosir I was referring to the option to hide or show the panel but not removing it completely. I'm not sure I see the value to have an option to remove it completely. What is your use case?

@cdedreuille I see, I have some use cases, mostly libraries, that just want to quickly visualize different capabilities without adjusting addons params (for example).

Is it to present your design system to your team? Can docs be a good alternative to what you are trying to achieve?

Yes I think for some of the projects I will just navigate away from Storybook since it's not the right fit and go with something simpler 👍
But keep doing great job and offering a lot of features out of the box (testing, addons etc.) that many projects will find it useful.

[cdedreuille]

@mkosir Thanks a lot for sharing your use case. That's really interesting. Have your tried using Storybook Docs? It seems that this could be the right fit for you since this was built for this use case, to actually present your component + code without tooling.

If this doesn't work, we are working on a new concept called Portable Stories that will allow you to embed your stories in your own website so you can have full control over the presentation.

[mkosir]

@mkosir Thanks a lot for sharing your use case. That's really interesting. Have your tried using Storybook Docs? It seems that this could be the right fit for you since this was built for this use case, to actually present your component + code without tooling.

If this doesn't work, we are working on a new concept called Portable Stories that will allow you to embed your stories in your own website so you can have full control over the presentation.

Thanks will try it out, can't wait what you guys will come up with! 🚀

[cdedreuille]

@mkosir Also, looking at your Storybook, I think your components could benefit from the controls addon to show what props are available and play with them with easy to use controls.

[JReinhold]

A few minor nits, but other than that it looks good!