The index.js file within the stories folder can become unreadable very fast. Therefore, I highly recommend to separate some parts of your documentation in new external files. Please create and add a folder with the names “tokens” and “guides” within the “stories” folder. It is possible to (mis)use the story API for loading external documentation files as HTML. In such files, we can write down more specific Design Principles (the guide section) and some elementary CSS Styles tokens (Typography, text formatting, color sets and so on). My Git branch setup-atomic-design and its first commit shows how you can establish this.

The index.js file within the stories folder can become huge and unreadable very fast. Therefore, I highly recommend to distribute your documentation in separate files and folders. It makes the maintenance of your documentation much easier.

Please create and add two new folders with the names “tokens” and “guides” within your “stories” folder. Then create the files ta-token.stories.js file for the tokens folder and add this content to it. The same process we repeat for the guides folder with this content. Storybook will automatically import those new stories from the subfolder!

Why present two similar approaches to the index.js file?
Which one is preferable?