"Storybook" integration for CanJS

#1

Hi @justinbmeyer ,

I had one idea of the tool that might improve development experience.

This is about how to create components library and in general way to have components that you can share between projects in case you need to have design system / UI kit.

I’ll explain based on what I think might be useful.
We have multiple projects that works on CanJS and quite frequently we need to create components like: drop-down / select, popup, button, date-picker etc. So some UI components that are building blocks of application. After this feature-teams can use them in their functionality. I think this is something called “UI Kit” in general.

I needed a way to build this kind of components independently from applications (to avoid any side effects) and ideally with something that might represent these components as library.

I know that DoneJS has plugin generator, that might help with this, so you can use demo pages to see components independently. But this is heavily dependent on DoneJS tools.

So I was thinking to adopt Storybook for CanJS. I think originally it was supporting React only, but it supports more frameworks right now.

At the very beginning I was thinking that this is not very hard task and I’ll be able to make this possible by my own, but after some conversation in Storybook community they said that its better to work with them to accomplish this.

Since this requires someone-else effort and this is affects more than I expected in the very beginning, I would like to know you opinion on how useful such tool will be for CanJS or you have different vision regarding this.

P.S.
Packing such components without DoneJS is also an issue, but its a bit different one.

Best regards

#2

Thanks for sharing this idea. A few questions:

What does storybook provide that donejs’s generator doesn’t.

What do you mean that it’s dependent on DoneJS? The plugin generator is mostly just dependent on steal. Is there an issue with this?

#3

Hi,

DoneJS generator produce demo page where you can see your component.

Storybook provides a way to implement components and build UI library based on “framework”.
So as result you can have static site with all components documented, structured, with some visualization of what features are supported:
https://storybook.js.org/basics/exporting-storybook/
Or your Storybook will be “connected” to particular application.

You can see good examples here:
Wix Storybook
AirBnB date-picker

It depends on how much effort you put there, of course.

Additionally it has testing features and some Addons I didn’t dig too much to this topic. I was more interested to find a way to develop and present components independently from applications.

So I think it has a bit different purpose and result from what generator provides.

By this I mean that if you use StealJS you have to use same technologies that supported by StealJS, so lets say if you use PostCSS or Jest or something else, that doesn’t supported by Steal you’ll be able to generate plugin structure, but for development itself you’ll have to add something to make this work.

Hope I clarified

#4

@Lighttree Other people have expressed interest in storybook support. I think this would be great for a proposal on a future survey.

#5

@phillipskevin Hi, is there any update regarding this ? Does it makes sense to create proposal on Github about this ?

#6

@Lighttree I was planning to write up a proposal, but I haven’t had a chance to do enough research to put this proposal together since I’ve never used Storybook myself.

If you want to write up a proposal, that would be awesome!