Design System - Component Playground

[orteth01]

We are currently using ladle for our design system playground. I am curious why we chose this tech instead of Storybook. Based on the ladle docs, the main value props seem to be speed, size, and minimal configuration. I'd like to understand if there were other factors for our projects that were arguments for choosing ladle.

While storybook can be a bit on the heavier side, it is very robust, widely used, and is the standard for playgrounds like this. e.g. react-aria, which we've used to build our design system components, includes storybook in their starter kits. Community adoption and familiarity is important to consider.

Based on my limited experience interacting with ladle so far, it seems to be lacking when it comes to the user experience of viewing and interacting with stories. It could just be a familiarity thing, but compared to prior experience with storybook, the ladle experience is tedious, a little confusing, and just not as robust as storybook.

As we move forward with embedding component previews into our documentation, it should also be noted that the ladle embed is rather inflexible. When a ladle story is focused with the mode=preview query param, ALL controls are hidden, so users can't actually change component properties, viewport size, etc. without the query param, the embed includes the component list, which makes the embed a little less focused and takes up embed real estate. not the biggest issue in the world, but it's not as nice as the UX of a storybook embed.

Are we open to reconsidering storybook?

[switzerb]

I personally have not loved using ladle - the hot reload is a mess -- ...but I have also not observed that it has risen to the level of actual pain point to be addressed (yet). Meaning, it's sort of annoying but not an actual barrier. I do think it is worth a discussion in the new year about where the priorities are for the design system specifically - how to improve the system the most, for the most devs for usage in application space. Right now, from working with folks, I would list the biggest pain points as:

1. Needs to be broader (i.e. need to build more components)
2. Need higher level composed components (to make it simpler to drop in common compositions)
3. Gathering requirements/use case from multiple applications to ensure it can be scaled correctly
4. Better and more comprehensive examples, docs, etc

I am sort of curious if interoperability is a question, too. If Jeric2o uses ladle and the design system is in storybook, does it matter?

[orteth01]

to me, switching to storybook would serve points 1, 2, and 4. With a more developer-friendly tool, we'd be able to build out components (and component compositions) more efficiently. With the storybook plugin ecosystem, our examples and docs would surely improve.

the interop question is a really good one - as someone with zero experience working in Jeric2o, i'm not sure i'm equipped to answer that one. my gut feeling is the interop doesn't necessarily matter, but i'm curious what you and others more familiar w/ the system think @switzerb @brandonjpierce

[switzerb]

I can't really speak to any specific technical requirement for interop - there probably isn't one if I had to guess - but I will say that "sprawl" in terms of the technology we use always has a higher cost in an organization than it seems like it will. There are not just training issues but supportability in upgrades and in establishing design patterns, etc. Again, I am no fanboy of Ladle but I personally would not rank this pain point very high given the other priorities and deliverables. Specifically, Storybook only has business value if it increases velocity and throughput of developers - but it doesn't immediately benefit clients. That is - anyone who isn't a dev probably won't care. It also involves investing time in the patterns, standards, decorators, "ecosystem" and so on in order to get the value out of it.

Still, if there is not a gate to switching back to Storybook once, say, the design system is in use in multiple applications and by many devs across the accelint ecosystem, I'd be all in favor of putting this on the roadmap. I definitely think it is the superior software.

[taylormoyle]

I can provide some feedback from my experience with using Ladle so far:

1. The window provided to look at the code is far too small, I should be able to maximize/resize it
2. I'm unable to make modifications to the example code and see the changes take place on-screen
3. I would like a way to see a tree of all available properties of a component at a glance
4. When I want to override a property with custom styling, I find it's hard to know what the correlated property key to reference, and value composition is, without digging through the code.

[orteth01]

@brandonjpierce shared in team chat, but for transparency: Storybook dependencies caused many security warnings in DoD pipelines, which was effectively the sole reason the team went with ladle instead of storybook originally. Now that the design system lives in DevTK, that is a non-issue.

To me, storybook is a much better experience for people writing component stories as well as people who are reading and interacting with the stories. there is also wide community support, and it works quite well with figma: https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma, which could also tighten up collab w/ design. I am more than willing to push for getting time allocated to switch to storybook, or explore other options, if the team agrees that we'd like to do that.

[ArrayKnight]

Considering this codebase is no longer under the regime of the DoD, I think we're likely safe to reevaluate whether we want to stick with Ladle or switch back to Storybook. Also, since the predominant use for stories in the first place is this code that has migrated out, there's less of an interop argument. We will likely want to consult the Zarya team to help weigh the pros / cons and determine if there's any reasons they are a hard no to Storybook. I think the interop between DevTK and Zarya is more important than with the DoD projects

[orteth01]

thank you, eveyone, for the input. based on discussion here and some offline discussion, we have decided to proceed with a switch to storybook. i've created a ticket here: #160