#Has anyone tried integrating a Gleam project with storybook

1 messages · Page 1 of 1 (latest)

calm niche
#

I've not used storybook (https://storybook.js.org/) in any project Gleam or otherwise, so I'm not yet sure I want to go through the hassle of wiring it up to a Gleam project.
So curious if anyone has experience with it already.

Storybook
Storybook: Frontend workshop for UI development

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

gaunt wagon
#

Storybook uses Vite under the hood so it helps if the project uses Vite too because it re-uses the project configuration.
When writing stories you basically tell storybook what component and how to render it (args, decorators, etc.).
I've used it in a couple of projects at work.
Pro:

  • it's pretty cool to see all of the different components on one page
  • it can help during development to have isolated components in different states
  • you can do advanced stuff like visual regression tests

Con:

  • it is extra overhead to write the stories
  • stories need to be updated alongside the component
  • it's easy to forget the stories for a component
calm niche
#

thanks for that. Interesting that it's easy to forget.

#

I think for my case I'm going to be better off making a page with some components simply rendered. No need for extra tooling or stories

tawny girder
#

We use Storybook extensively at my work, but I haven't explored using it with Gleam/Lustre

ocean hound
#

i should publish fable

calm niche
tawny girder
# calm niche any pros and cons outstanding?

The pros are that you can develop components in a standalone area, you can focus on usability and reusability, and with Chromatic (https://www.chromatic.com/) you can have visual regression tests on your stories. This is super useful for large teams imo. We also use stories as mocks in tests, which I'm on the fence about. It also helps align design and engineering, and can bring resources across engineering onto the same page

Visual testing & review for web user interfaces

Chromatic scans every possible UI state across browsers to catch visual and functional bugs before they reach users. Assign reviewers and resolve discussions to streamline team sign-off.

#

The cons are that it's yet another thing to learn and worry about and upgrade over time, and that aligning design and engineering is often really hard anyway

ocean hound
#

big fan of storybook-driven development personally

tawny girder
#

Me too. Overall, I think it's worth it if your team is larger than a couple people