Adding docs howto create a project storybook with customized VLT theme

[acsr]

The Storybook in the VLT docs is created from the ".stories.tsx" files in the VLT package:
https://volto-light-theme.readthedocs.io/storybook/?path=/docs/primitives-summary--docs

It does no inbetween explanation how it is created and what the scope of the Storybook is or any hints how to e.g. tweak the mock texts live in the browser (without dev tools) for trying variants out.

Goal of the Howto

Simplify development cycles and improve customer documentation for digital brandbooks etc. by lowering the bar to use existing tooling.

Helpers

You can list the Storybook source files in the volto-light-theme repository like this:

tree -a -P "*.storybook|*.stories.tsx" --matchdirs --prune ./frontend

output:

./frontend
├── .storybook
│   ├── main.js
│   └── preview.jsx
└── packages
    └── volto-light-theme
        └── src
            ├── components
            │   ├── Summary
            │   │   └── Summary.stories.tsx
            │   └── Widgets
            │       └── ColorSwatch.stories.tsx
            ├── primitives
            │   └── Card
            │       └── Card.stories.tsx
            └── stories
                ├── grid.teaser.stories.tsx
                ├── listing.stories.tsx
                └── teaser.stories.tsx

11 directories, 8 files

Purpose

• Documenting customized VLT based designs as Storybooks
  • related: Adding multiline example demo content in places only one line is usally in effect in the demos. #721
• Spotting styling flawsby adding more examples in the mock data (multiline headlines, multiline list items etc.)
  • related: Ugly first line spacing in multiline list items on webkit Safari, due to fixed line-height for pseudo selector li::marker #515

[acsr]

working in my fork in the branch https://github.com/acsr/volto-light-theme/tree/%23864-add-storybook-howto-docs.
Fixed my failing docs build of the storyboard while missing to build the frontend using make and still struggling to build the storyboard without setting some environment variables for the build by hand when not deploying to readthedocs.