Phoenix Storybook: a storybook-like UI interface for Phoenix components

Hey there,

It’s been more than a year since we started using LiveView as our main UI library and building a whole library of UI components.

We also built our own storybook (visible here) to showcase and document our components.

Would you be interested if we made this project available on github? Would you use it?
There is a lot of work to do to extract it as an external library, so I prefer to ask if it’s really worth the effort :sweat_smile:

69 Likes

Yes, I have been wanting something like this for a while. I have even considered switching to Surface just for the catalog feature.

7 Likes

Looks great! I’m sure many people would appreciate you open-sourcing that (including me).

BTW, are you considering open-sourcing only the storybook clone, or also the UI library being showcased? Because the library looks great too :slight_smile:

2 Likes

It would be the best thing!

1 Like

Yesh! And I will totally contribute to it!

1 Like

Thanks for your warm feedback! Let’s do it then :grinning:

That’s quite another challenge.
The set of components we built are really tailored to our business needs, but why not releasing a few of them. We’ll see!
We already opensourced the underlying library we use to craft all of our components: phx_component_helpers

5 Likes

We are planning to release something like this itself in LiveView, inspired by the Surface catalog. If this is something you’d be interested in collaborating on, find me on slack to chat more!

41 Likes

Sure! Let’s chat tomorrow

2 Likes

I also want to contribute. : )
Thanks

2 Likes

I’ve built a tiny version of LiveView storybook for one project - feel free to take it if you find it useful copy_link.ex · GitHub

1 Like

Thanks, I’ll have a look!

Awesome work. Yes, I am interested in it.

1 Like

I just learnt that forthcoming liveview 0.18.0 will provide declarative assigns.
Here is the related documentation.

Our storybook will definitely rely on that to generate proper documentation and offer an interactive component playground.

PS : @chrismccord I pinged you last week on slack, no answer. Let me know if you wanna chat

1 Like

The project is still very (very) early stage, but here is the repository.

A sample web application is available here: https://github.com/phenixdigital/phx_live_storybook_sample

:warning: It’s not even a 0.1.0 so you shouldn’t use it for now

8 Likes

Just a bit of polishing & layout :sparkles:

8 Likes

Still working on it during this (children free) weekend! :stuck_out_tongue:

Recent progress includes :

  • overall look & feel
  • support for live_components (function components were already working)
  • the sidebar is now live & can be opened / collapsed
  • custom icon support for every folder and storybook pages

We are almost ready, feature-wise, for a 0.1 release :rocket:

Next steps:

  • copy/paste code snippets
  • tests, lots of them!
  • hexdocs
  • release :fire:

Feedbacks are very welcome! :pray:

11 Likes

Very excited by this. It’s the one thing holding me back from Liveview

4 Likes

Supporting the call for open sourcing the components.

The great thing of Elixir/Phoenix is the community effort to bring the platform forward.

I have done a few sites with LiveView and a few things are missing to make it an easier journey component-wise. Surface is great, but adds another level of knowledge (some features were already integrated in LiveView). If Chris is working on something similar and your work can be merged the better.

7 Likes

0.1.0 release is imminent :fire:

Today has been 100% dedicated to testing. Like every time I do intensive testing, it helps me to find code design flaws and helps with refactoring.
Quite an intense day, but the journey was worth it.

6 Likes

@kujua I agree that a set of OSS Liveview Components would be great, but it’s really another project and it involves a LOT of work to build generic, stylable components in a one-size-fits-all manner.

I suggest you give a shot at GitHub - petalframework/petal_components: Phoenix + Live View HEEX Components
Did not try it, but it looks great!

1 Like