@divriots/csf-simple-book
v0.1.1
Published
Simple (no dependency) story-book component to render CSF stories in any project, any framework.
Downloads
22
Keywords
Readme
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 -D
Example 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 all
Live 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',
}
});
...