Angular 2 support

[KiaraGrouwstra]

I realize Angular 2 support was on the roadmap, and I'm pretty happy about that.
I wanted to share my related attempt at adapting the repo to that end, and didn't find a relevant thread here yet, so figured I might as well make one.
I hadn't managed to put a PoC together yet, but perhaps the Angular bits from my first commit here may help provide some inspiration. I realize it's forking an outdated version of this repo too, but I guess the concepts should still apply.

[arunoda]

We've made our core UI into a separate app. We are planning to use it for NG2 directly. See: https://github.com/kadirahq/storybook-ui

[KiaraGrouwstra]

Cool. Looking forward to it! :)

[alterx]

Hey, @arunoda, so what's gonna be the approach for this one?
Do we want to create an ng2 specific storybook UI? Just curious to get a high level description of what you guys want to achieve and see if I can help

[ritz078]

Angular 2 APIs have become stable with the release of RC5. There won't be any breaking changes now. So its a good time to start developing it. cc: @arunoda @mnmtanish

[KiaraGrouwstra]

@arunoda: I'm inclined to think this is low on the roadmap, but so in the Angular case, in this split the idea would be for a theoretical ng2-storybook to let storybook-ui's React interface embed Angular components then? Has that been done?

[arunoda]

@tycho01 You are right. It's kind a low on our priority.
I hope we could start with storybook-ui as the base. So, most of the addons could use that.
I am looking for help for someone to start working on it. If so, ping me on our Slack. Let's talk more.

[alterx]

@tycho01 , @arunoda you guys let me know if you start working on this.

[KiaraGrouwstra]

@alterx: Pointers I got: storybook-react is separate from storybook-ui (runs inside an iframe); next step is to experiment to see if it could be replaced with an Angular version. Haven't started since my last attempt.

[amcdnl]

Checkout this - https://twitter.com/amcdnl/status/804776546246520832

[alterx]

@tycho01, I checked the source and they have a completely separate react component that's basically a glorified iframe (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js). We should be able to load the ng2 stories in that preview iframe.

react-storybook basically extends the Provider provided by storybook-ui, renders the aforementioned Preview and handles the story api. Then, a new instance of this provider is passed to the renderStorybookUI

import renderStorybookUI from '@kadira/storybook-ui';
import Provider from './provider';

const rootEl = document.getElementById('root');
renderStorybookUI(rootEl, new Provider());

After this, storybook-ui is in control, it builds the context (which includes the provider) and creates the app (using mantra-core's createApp). The provider (along with the other context props) are then injected to the ui module (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js) that builds the preview using the renderPreview method defined when we created it in react-storybook

@arunoda , please let me know if I'm missing something

[alterx]

@amcdnl, that looks promising. Would you mind giving me a quick overview of how it works? (nothing fancy, just the big picture)

[KiaraGrouwstra]

@amcdnl: thanks for linking, will check it out.
Edit: would you perhaps have any demo with it? I'm having trouble finding anything ready to run.

[amcdnl]

@MikeRyan52 ^^

[arunoda]

@alterx Yep. You are 100% correct.
We also need to expose an API similar to React Storybook to create stories.

Possible imported from angular-storybook or similar.

[bcowgill]

@arunoda Do you have a url for the angular-storybook you mentioned, google is coming up dry.

[KiaraGrouwstra]

@bcowgill afaik this doesn't exist yet, aside from @amcdnl's mentioned above

[amcdnl]

There is also this now - http://www.angularplayground.it/

[ndelangen]

It's on the roadmap now:
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

[ndelangen]

So Storybook for Vue is going to be released soon 🎉

This adds a pretty good example of how a version for NG2 could be done.
Are there any brave souls watching this thread that would be willing to work together and make it happen?

[alterx]

I could take a look, do you have a repo url handy, @ndelangen ?

[ndelangen]

You're looking at it 😄

Storybook is a monorepo, we do have packages in here, published to npm separately.

Currently the vue app isn't in master yet, so here are 3 links to get to going:
https://github.com/storybooks/storybook/tree/release/3.2/app/vue
https://github.com/storybooks/storybook/blob/release/3.2/app/vue/src/client/preview/render.js
https://github.com/storybooks/storybook/blob/release/3.2/app/vue/src/server/config/webpack.config.js#L40

The render.js is where most of the Vue specific code is and on the server part there's a webpack config that's different.

It's OK to duplicate a lot of code at first! We will address that later. After we find what is really common and what isn't.

[ndelangen]

Just to get started, I'd say

1. duplicate the entirety of app/vue to app/angular (we're talking about angular2 and up right?)
2. tweak the webpack config, so it loads code some angular stuff and compiles.
3. tweak render.js until something shows up, preferably the component you expected
4. Try some addons
5. Fix bugs
6. Try what is now possible
7. Write documentation, list what addons work
8. Draft blogpost (I can do it, or add your account to our medium publication)
9. Plan release
10. Do alpha release
11. Fix bugs
12. Actual release, publish blogpost, tweet announcement
13. Fix more bugs
14. Try and add support for more addons

@shilman Is our release master chef 👨‍🍳

[ndelangen]

You can join us on slack to get a slightly faster chat experience then github 💬

https://storybooks-slackin.herokuapp.com

[alterx]

Perfect, @ndelangen!
I'll take a look at the code and join the Slack channel :D

[igor-dv]

@karlos1337 , take a look at this issue - #2616.

[shilman]

Released in 3.3! 🎉

Closing this issue, and if you're having problems with storybook for angular, please file a separate issue. Thanks!