search

brainly / style-guide

:art: Brainly Front-End Style Guide
https://styleguide.brainly.com/
Other
162 stars 30 forks source link

Migrate brainly style guide to storybook 7.0. #2743

Open coderitual opened 1 year ago

coderitual commented 1 year ago

The full release notes regarding version 7 → https://storybook.js.org/blog/storybook-7-0/

As you may know, we predominantly use MDX for documenting our style guide components. However, we've encountered several challenges with this approach:

  1. Error handling: The poor error handling capabilities of MDX render the debugging process quite cumbersome.
  2. Strict formatting rules: The creation of more advanced, code-based examples is particularly challenging due to these rigid rules, slowing our development process.
  3. Autocompletion: While the VSCode MDX plugin does offer experimental autocompletion, it falls short of providing a seamless experience.

The advent of Storybook 7 provides a promising solution to these issues. The new method of referencing CSF in MDX is depicted below:

image

Contrasting this with the conventional method of referencing by ID, the new approach seems to be a significant improvement and aligns with our existing workflow. We currently utilize a separate stories folder to maintain code and resources related to the stories in a more structured manner. While this method has proven effective for referencing MDX components, it hasn't been as successful for stories. Therefore, the enhanced CSF referencing could potentially streamline our workflow and address the current challenges we face with MDX.

clxandstuff commented 1 year ago

I'm 100% for stories out of MDX!