Build your own Storybook in Astro, using CSF

🌱 This post is in the growth phase. It may still be useful as it grows up.

You don’t need Storybook to write stories.

When I started at Chromatic, I was using Storybook everyday to build a component library. Today, I mostly just build my website.

No shade on Storybook but I will never install Storybook to do [component driven development] here. And even if I wanted to, there isn’t an Astro integration.

But I reach for stories all the time.

What I want is stories, without the book.

What we’re going to build

Storybook is a full development environment.

This is how I think of stories, as a baseline.

1. CSF (Meta, named exports, object syntax, play functions)
2. pages
3. page fragments for linking
4. A formatted name from the named export name
5. interface information
6. a nested container inside

Bonus:

• A default template
• A sidebare

Questions:

• How to parse an astro component file and render that using CSF?
• How to test test components using testing-library (vitest?)

flowchart LR id[“This ❤ Unicode”]