Storybook

https://github.com/storybookjs/storybook

Abstract image depicting an icosagon on the left
with poorly organised links between corners, and
another icosagon on the right with many well
structured links between corners. — Front end UI development can become hugely complex if code isn't managed well.

Screen shot of content from component driven website
saying how to be component driven, build one component
at a time. — Key concept behind Storybook. It's a general approach to both software development, and complex systems.

Screen shot that is stylised describing a UI package
for webOS systems, with links to the Storybook and
Github. — Many companies use Storybook to give developers insight into the UI system available for their platform.

Collage of terminal screen shots of commands running
to set up Storybook for development. — There's a lot of dependencies but it's all managed well by the scripts provided by Storybook. It doesn't take long to set up.

The tool provides features that simulated accessibility. It also has statistics about how many people would have the accessibility requirement, e.g. 23% have blurred vision.

https://storybook.js.org/blog/accessibility-testing-with-storybook/

Component Story Format (CSF) is the recommended way to write stories.
The "Story" is the source of truth for a component.
A story is a code snippet that renders an example of a component in a specific state.

						# Storybook CSF Tools
	
						An experimental library to read, analyze, transform, and write CSF programmatically.
	
						- Read - Parse a CSF file with Babel
						- Analyze - Extract its metadata & stories based on the Babel AST
						- Write - Write the AST back to a file

Storybook CSF Tools

A mandala representing UI component cost as complex data
being sent into a meditating man who represents the code
internals of storybook who is projecting a beam from his
third eye, which transforms into a loaf of white bread
representing the storybook output. — Storybook is an example of how to build a project designed to work with many different frameworks. I struggled to follow the structure of the project, but I realised the complexity comes from taking the code written by the creator of a generic "story" and making it work no matter the system used to generate the associated component.

It reminds me somewhat of a game engine, a relatively simple application, but built to to handle very complex data.

I wonder if anyone has created a Storybook using components from React Three Fiber...

A storybook for a react three fiber project
showing a low-poly model of a dog. — One of the engineers at Chromatic (main Storybook team) took a project from the makers of Three React Fiber, and built out a storybook from it.