Migrate brainly style guide to storybook 7.0.

[coderitual]

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:

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]

I'm 100% for stories out of MDX!