CSF Simple Book 
Simple (no dependency) story-book component to render CSF stories in any project, any framework.
Install
pnpm add @divriots/csf-simple-book @divriots/csf-helpers -DExample use
<body>
<story-book></story-book>
</body>import { getStoryStore } from '@divriots/csf-helpers';
import '@divriots/csf-simple-book';
// fetch all stories to include in the book (vite format: https://vitejs.dev/guide/features.html#glob-import )
const storyModules = import.meta.glob('./**/*.stories.js');
// get the global story store singleton
const storyStore = getStoryStore();
// project annotations to apply to all stories (e.g. render, renderToDOM, globals, parameters ...)
storyStore.setProjectAnnotations({
parameters: {
layout: 'centered',
}
});
// loads story files into the store
storyStore.loadModules(storyModules)
// That's allLive demo
Open in stackblitz
Example use (react 18+)
import * as reactConfig from '@divriots/csf-react-renderer';
...
storyStore.setProjectAnnotations({
// will inject render & renderToDOM implementations for react
...reactConfig,
parameters: {
layout: 'centered',
}
});
...