Failed when first time trying out storybook-angular. Could you please provide more comprehensive example for Angular? #2616
Comments
dereklin
changed the title
|
Digging through the examples I found this to help me set up the dependencies: Now I need to figure out how to supply styles on the story level. How to use scss How to use mapped modules |
|
Hey, @dereklin , thanks for the feedback. We will improve our docs to make it easier. |
|
@igor-dv Thanks for all good work. I followed the link you gave me to try to set up scss: https://storybook.js.org/configurations/custom-webpack-config/ It's still not working Here is my repo: https://github.com/dereklin/nx-demo-jest/tree/trying-out-storybook I have these loaders installed: "style-loader", "css-loader", "sass-loader" |
|
You need to use Something like this: Not sure if you need css-loader. |
|
But to expand the webpack configuration you need to run an' ng eject' and this removes other CLI capabilities and can't be undone. Is there a solution that doesn't involve edit the CLI webpack configuration? |
|
I am not sure, but maybe for Storybook you don't need to eject the CLI. Try to put |
|
Thanks @igor-dv, it works, now have problems with providers dependencies, can't find any Angular documentation and don't want to make more rubbish in your github issues, are there any forum or channel for support? |
|
Yeah, we have to provide a better documentation. For now, you can check this: https://github.com/storybooks/storybook/blob/master/examples/angular-cli/src/stories/custom-metadata.stories.ts And we have a slack |
|
Here is the right slack link - https://now-examples-slackin-rrirkqohko.now.sh/ |
|
@igor-dv Thanks for the tip on getting scss to work. Does storybook config provide any module name mapper feature like jest?: So that I can do this: instead of I can create .storybook/preview-head.html and include style frameworks like bootstrap. That's on the global level. Can I use different styles on the individual story level? Should I be asking these questions in slack? Will it be under the #support channel? |
|
Storybook itself doesn't provide any module aliasing api. Maybe you can use the webpack alias to achieve this, but I think it doesn't scale. You can think about "story" like about some part of your component - you have
Can you elaborate?
You can ask these questions in slack as well. Yeah, #support or #angular channels. |
|
Closing it for now. @dereklin feel free to reopen if you are still having issues. |
|
@igor-dv Hi Igor, I tried on a very simple example last time and put storybook on hold. Now I am picking it up creating more complicated stories. My repo is at https://github.com/dereklin/nx-demo-jest/tree/storybook I am run my app fine with npm run start:app1 Can storybook ignore the implicit any issue? Since neither vscode, typescript, nor linting complains about the implicit any. My component imports from a mapped path. It works with ng serve and ng build. Does it mean storybook has to understand what @nx-demo-jest means before storybook can work in this case? |
|
@dereklin , let's try to solve meanwhile the first issue =) In the latest beta release we have an ability to override tsconfig.json file.
so the config may look like this: {
"extends": "path to defautlt config",
"exclude": [
"you can exclude things here, for example test/spec files"
],
"include": [
"I think you need to include here your src dir again"
],
"compilerOptions": {
"noImplicitAny": false // <-- override the noImplicitAny
}
} |
|
@igor-dv Thanks for responding so quickly. Here is my new branch: I am getting these errors: |
Yeah, exactly. =) I've played with your repo, and here are my findings:
I wasn't able to run the app, though, because some of your dependencies were incompatible with my node version, but probably it won't be a problem for you. |
|
@igor-dv I made those three changes, when I run npm run storybook, nothing crashes, but I don't see any stories at all. Here is the repo: https://github.com/dereklin/nx-demo-jest/tree/storybook-implicit-any-2 I looked at .storybook/config.js. It's loading the .js files: I changed it to ts: I am getting the same mapping problem: |
|
Ah, I forgot about the config.js 🤦♂️ . Let's try another workaround. Maybe you can add a NormalModuleReplacementPlugin to the |
|
@igor-dv This works, but like you have mentioned before, it's not scalable: I will have different files importing Dummy1Service, and they are in different nested levels. So while this set up works for one nested level, it will not work for another. It would be best if storybook can support this mapping dynamically |
|
BTW, partial match like this doesn't work: And absolute path doesn't work |
|
I am curious, don't people use lerna for react projects as well? Do you know how they solve the mapping problem? |
|
We use lerna and yarn workspaces in Storybook monorepo, afaik it works with symlinks. Maybe @ndelangen can shed more light on this. Anyway, this change in webpack config worked for me: const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const libPath = path.resolve('libs');
module.exports = {
module: {
rules: [
]
},
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/bootstrap/dist/css/bootstrap.min.css',
to: 'assets/bootstrap/bootstrap.min.css'
}
]),
new webpack.NormalModuleReplacementPlugin(/@nx-demo-jest/, function(resource) {
resource.request = resource.request.replace(/@nx-demo-jest/, libPath);
})
]
}; |
|
@igor-dv Thanks for the awesome solution! Now I can even import from mapped path in the stories. Here is the working repo: https://github.com/dereklin/nx-demo-jest/tree/storybook-mapped-import Last time you mention there was going to be more documentation on storybook-angular, do you know if they are available. If you look at this, https://github.com/dereklin/nx-demo-jest/blob/storybook-mapped-import/apps/playground/src/app/tab-nav.component.sandbox.ts, I can specify custom styles for the component: What is the equivalent of that with storybook-angular? |
Not really. We still need more work (and help) on it. We do improve our examples in the monorepo, which is kinda documentation. Every new usecase we find we try to put there, so maybe it worth adding yours as well. Or even adding the module replacement by default based on angular-cli (CC @Quramy , @alterx ) Regarding the custom styles, IMO we have no a direct equivalent to this. Can you elaborate how does it work? |
|
It seems like in angular-playground, each sandbox is also like a component, a host component. The styles property is for styling the host's child, in my case, my TabNavComponent |
|
Interesting. I think we can do something like this too. I'll check today. |
|
@igor-dv In a mono repo, you could have multiple AboutComponent's from different apps. How do you name space them in storybook? |
|
You have an option to add hierarchy. Since v3.4 you also may use multiple hierarchies feature Hierarchy separator is "/" by default. And for multiple hierarchies you need to add it explicitly. Both can be configured with addon-options like this: // config.js
import { setOptions } from '@storybook/addon-options';
setOptions({
hierarchySeparator: /\/|\./,
hierarchyRootSeparator: /\|/,
});And then used like this: storiesOf('App|Some/Context/AboutComponent', module)
.add('blah blha', () => {...}) |
|
@igor-dv The / works beautifully, but how is | supposed to work? Here is my repo: https://github.com/dereklin/nx-demo-jest/tree/storybook-hierarchy The | is just added to the name of my first level hierarchy: Test|libs:
Is this the expected behavior? |
|
@dereklin looks like you didn't register addon-options in the addons.js |
|
Thanks @igor-dv ! |
|
@igor-dv I was listening AngularAir storybook episode: https://www.youtube.com/watch?v=hMK4UedZUKY For this, I am changing my config.js to this: Here is my repo: https://github.com/dereklin/nx-demo-jest/tree/storybook-colocate Does this make sense or is there a better way? |
|
It is indeed a preferred way by most of us (as I mentioned here 👆 #2616 (comment) ), You can think of a story like a part of your "component's ecosystem". The same way you place styles and tests alongside the component =) |
|
@dereklin 👋 Awesome to hear you watched the show and got something out of it! |
|
@igor-dv @ndelangen Thanks very much for contributing to this great product! I definitely have to watch the show again for the more advanced stuff. I think I am only scratching the surface at this point, and there are a lot of advanced features to be discovered. In the show, Austin was saying storybook angular can hook onto the angular cli config, is that only for single app environment? I am using nrwl/nx mono repo. But it will be nice if storybook angular can just leverage the .angular-cli.json some how for setup, so that I don't have to repeat the setup in a separate webpack config file or having to create a preview-head.html to include third party css or javascript. But I would imagine it's not a small undertaking. This sounds it would be an effort between you guys and the angular-cli team. |
|
I think @alterx might know about that |
|
@dereklin, maybe you can elaborate more on how the angular app mono repo is built and what you have to do in order to use storybook on it? And we can probably think of a better support or about the concrete features? |
|
@igor-dv I am currently setting up another github repo with I have learned from using the nrwl/nx mono repo and storybook. Once that's set up I can point out the issues I have faced more clearly. But the biggest setup pain point is that I have to use webpack to "repeat" what .angular-cli.json does. But to be fair, .angular-cli.json is doing things at the app level. And I want to have one storybook for all the apps and the shared libs. If .angular-cli can integrate with storybook that would be awesome. Think about unit testing. There is tsconfig.spec.json and there is test.js, and that's it to set up. And if you are using jest, the test.js is replaced with the jest config. So imagine for storybook, there is some storybook config, either storybook.js or storybook block in the package.json (similar to jest) and another tsconfig.storybook.json. And then you can just put the stories.ts files alongside the .spec.ts files. That will be great. But again, that might be asking too much :) |
|
Yeah @dereklin, our current implementation doesn't integrate with Let us know once you've setup this repo and let's open a new issue with your feedback so we can continue the conversation there. Also, it sounds like you have a pretty solid understanding of what you'd like to see, are familiar with the |
|
@alterx Do you know if there is some guide on how to create PR's in general and then for storybook specifically? I think I need to fork the project first. |
|
@eweap, would be great if you can document it in some way to help others 😉 |
I am new to storybook. I have just given storybook-angular a try.
Here is my repo: https://github.com/dereklin/nx-demo-jest/tree/trying-out-storybook
The set up was quick easy.
Then I tried to test (write a story) my tab-nav component.
The first problem:
When I tried to do this
'@nx-demo-jest/tab-nav' can't be resolved. Is there an option to map @nx-demo-jest to my libs folder?
So I had to do this instead:
I go to localhost:6006 and click on my story. In the console log, I see
It seems like scss is not supported out of the box. How can I enable scss?
So I switch to css for now, just want to see some component UI.
Then I see this error:
So I need to some how load all the dependencies, one being the RouterModule. How do I do that?
It would be great if there was a more comprehensive example.
Just to rule out simeple mistakes on my part, I forked the storybook project, cd into examples/angular-cli. I ran npm i, then npm run storybook. I got a lot of errors:
The text was updated successfully, but these errors were encountered: