https://github.com/divriots/csf-simple-book
Simple 0-dependency story book for CSF stories
https://github.com/divriots/csf-simple-book
Last synced: 10 months ago
JSON representation
Simple 0-dependency story book for CSF stories
- Host: GitHub
- URL: https://github.com/divriots/csf-simple-book
- Owner: divriots
- Created: 2022-07-27T09:00:56.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-22T15:22:47.000Z (almost 4 years ago)
- Last Synced: 2025-03-01T14:16:51.385Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://studio.webcomponents.dev/view/g25cXg2tW2wEDogWL9dH
- Size: 46.9 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSF Simple Book [](https://npmjs.com/package/divriots/csf-simple-book)
Simple (no dependency) story-book component to render CSF stories in any project, any framework.
## Install
```sh
pnpm add @divriots/csf-simple-book @divriots/csf-helpers -D
```
## Example use
```html
```
```js
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](https://stackblitz.com/github/divriots/csf-simple-book)
## Example use (react 18+)
```js
import * as reactConfig from '@divriots/csf-react-renderer';
...
storyStore.setProjectAnnotations({
// will inject render & renderToDOM implementations for react
...reactConfig,
parameters: {
layout: 'centered',
}
});
...
```