Storybook: Allow choosing Angular project when running

Created on 3 Apr 2020  路  11Comments  路  Source: storybookjs/storybook

We have a mono-repo with multiple Angular 9 Projects, each of them being one app. They also have some common, shared source code. So our folder structure is something like:

\angular.json
\src\_common\**\*.*
\src\app1\**\*.*
\src\app2\**\*.*
\src\app3\**\*.*

We will write stories for both components in _common, and for components in all the various apps. Ideally for us, we could specify per Storybook module what app to use, but I feel that might be far off from how Storybook is set up?

Assuming that's the case, the next best thing would be for us to have an Angular "Project" set up in angular.json per existing project, e.g. app1-storybook (we do something similar already for e2e tests). I would like to run things like this:

npm run start-storybook --project=app2

or something similar. However, this doesn't seem supported (is it?), as the relevant code I found will always:

  1. Pick a project named "storybook" if it's there; else
  2. Pick a default project if it's there; else
  3. Pick the first project

Which doesn't suit our scenario, I think?


PS. I read through #9808 carefully, but think that's something related but different? I did need some of the info there to get a storybook project running at all for one app, but that leaves my other apps.

angular help wanted inactive nx

Most helpful comment

In spite of the bot, this item is definitely still needed

All 11 comments

Using a monorepo powered by Nx.

I ran into a similar issue. The styles that are automatically injected into the stories body are listed in that project's (what gets resolved by getLeadingAngularCliProject) styles array.

This causes a discrepancy between how the component looks in storybook vs when in an application.

This could be solved by allowing us to specify a project (or even leave it blank) in the build architect.

An example from the angular component schematic

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Even though the contributing guidelines are a bit daunting, I think I would be willing to take a crack at submitting a fix. But it would be nice if someone knowledgeable could point me to the area of the codebase to look at?

That would be awesome! Please jump on our discord and check out the #angular channel: https://discordapp.com/invite/UUt2PJb

I tried to get up and running but first ran into #10721 and while trying to fix _that_ I ran into #10722, so for the moment, I'm tapping out on fixing this original issue. I hope someone else would find a moment to contribute a fix, but otherwise I'll look for a workaround in my codebase (and report here if I find any reusable workaround).

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

In spite of the bot, this item is definitely still needed

Possibly related, I saw a blogpost on StoryBook Composition come by, something coming in v6 I think.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.22 containing PR #12565 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zvictor picture zvictor  路  3Comments

miljan-aleksic picture miljan-aleksic  路  3Comments

tirli picture tirli  路  3Comments

sakulstra picture sakulstra  路  3Comments

rpersaud picture rpersaud  路  3Comments