Storybook: Add Flutter Support

[mtsmachado8]

I love storybook and would like a Flutter support for it...
I known that today it only works for js frameworks, but can we change it?
Have you considered changing storybookjs to just storybook? i love js stack, but storybook is already big enough to support other languages. Dart for example...

I can't help a lot bringing it to life, but i know a great project (Dashbook) and developer (Erick Zanardo) trying it in storybook standards.
Can we give it a try?

[mtsmachado8]

Hello guys, any thoughts about it?

[shilman]

We'd be happy to support anybody who wanted to take this on (@erickzanardo?) and would be happy promote the work to the Storybook community. Our theme for 2020 is building up the ecosystem, and this would fit into that nicely.

[erickzanardo]

Thanks for tagging me guys, sounds good, I started Dashbook because since Storybookjs is heavily focused on JavaScript, I could not see a Flutter runtime fitting here.

So I created it with a similar API which the original storybook is built on, so it is easy for anyone coming from storybookjs, to use Dashbook.

I would be honored to work alongside/get support of the StorybookJS team @shilman. I would love to hear what you guys have in mind.

Thanks!

[adhiravishankar]

Couldn't Flutter work if it was first converted to Javascript. I know that portion is still in alpha, but that could be a possibility??

[erickzanardo]

That is a good question @adhiravishankar, my first thought is that it won't work, as the way Flutter web is converted has a very peculiar structure, but I could be wrong, I haven't ventured myself a lot on the web.

But either way, even if it works, it wouldn't run on mobile/desktop devices. And a flutter/dart runtime is still worth IMO.

[adhiravishankar]

It should be possible because Flutter/Dart seems to be a more advanced version of something like Svelte (could be wrong, haven't dealt into either much). But since Dart itself compiles down to JS if need be, it shouldn't be as big of an issue as it would be if there needed to be a bridge of some sort between Storybook and the Dart runtime.

[shilman]

I think there's a lot we can do here, depending on how much horsepower is available.

Let me give a little context with the React Native project, which has recently split into its own repo: https://github.com/storybookjs/react-native

Storybook initially supported both React and RN. RN ran as an app on the device and interfaced with Storybook's web server. Storybook's addons ran in the browser and controlled the RN state over a websocket.

That was complicated to set up and maintain. We split it up so that RN could run standalone on the device, and created ondevice addons. We also created @storybook/react-native-server to try to preserve old behavior, since lots of people still wanted it.

That's basically where we're at now. Where we hope to go, and where Flutter could go too:

1) Storybook for RN shares core libraries with Storybook, e.g. for handling Component Story Format, parameters, decorators, etc.

2) Storybook for RN replaces ondevice addons with a webview, whereby it gets access to Storybook's entire addon ecosystem (which we plan to grow a lot this year)

In this scenario, Storybook for RN is a separate library that piggybacks on Storybook's extensive user/contributor base and rapid improvement cycle, without having to rely on an external server.

[sun]

Looks like @ilikerobots is shooting for something similar with https://pub.dev/packages/storyboard, perhaps you can collaborate on ideas and approaches.

[shilman]

I don't think anybody's signed up for this yet, but I'm going to mark it as todo so that the stale bot doesn't close it. Meanwhile @Gongreg is making good progress on reviving the React Native repo, so we can see how that turns out: https://github.com/storybookjs/react-native

[wytrych]

Is there a guide how to integrate with Storybook? As I have a website written in pure Dart that compiles to js and was looking into how complex would it be to get Storybook working with my stack.

[shilman]

@wytrych work in progress ... 🙈 https://docs.google.com/document/d/1fe6uCfpr3mzSnj4jN_uoZqVnyNtjBjfOMxt_ZI7ktL8/edit?usp=sharing

[wytrych]

Thanks @shamin I'll take a look. I wonder if it's at all possible to somehow get webpack and dart2js work together somehow...

[shilman]

@wytrych haven't tried, but looks promising https://github.com/mrdziuban/dart-loader

[wytrych]

Really old, Dart has had major upgrades since then, but who knows? Maybe with a bit of luck.

[Sunbreak]

This project seems promising of dart with webpack

https://github.com/learn-flutter-dev/flutter-widget-livebook

[faridsabitov]

Please add Flutter support ❤️

[shilman]

If Flutter runs in Appetize, we are exploring an integration there and have a working proof of concept:

https://medium.com/@vasikarla.raj/storybook-for-native-d772654c7133

[marsen]

I love storybook and going to learn flutter,
If I can have both, it'll be awesome.