Shifting to Better Tooling

[mannycarrera4]

The Problem

As we develop our ecosystem of a design system with products including our Tokens, we need to find tools that allow us to build better, faster and well documented experiences. In an industry where development moves fast, it's worth looking at different tools to enhance this experience no only for ourselves but for our consumers. Our current infrastructure tools are a bit dated and might have been outgrown by our needs.

Storybook

• Has become hard to maintain
• We no longer need to run storybook to run cypress component tests
• It is not a good documentation tool
• Although performance is an issue, Storybook has added Vite support, however, configuration has changes drastically from v6
• There's a lot of storybookism like the way to format stories vs docs and their components that has made it hard to post process MDX for our doc site

What We Need

• Fast tooling: While we currently use Webpack which has a allowed for deep customization, it may not be as fast as using something like Vite.
• Testing Integration: We previously relied on Storybook and Cypress E2E testing were we would load our Storybook examples in Cypress. We recently switched over to Cypress Component Testing where we no longer need to run Storybook to test our components.
• Visual Regression Testing: Chromatic has played a huge role for us staying on Storybook since it integrates so well. However, other products exist if we were to move off of Ladle, but it must integrate with our development environment.
• Documentation: Storybook is a frontend development tool. It is not a documentation tool. While we write most of our docs in mdx their UI and bloated add-ons don't provide the best documentation experience for our consumers.

Potential Alternatives

• Ladle for component development
  • Provides a simple markdown approach to component development and docs
  • Seems to be similar to storybook without the bells and whistles
  • We'd need a different tool than Chromatic for visual regression
  • Cons: We break away from storybook convention and teams that use storybook.