https://github.com/deecewan/react-stories
Declarative story creation for React
https://github.com/deecewan/react-stories
Last synced: 8 months ago
JSON representation
Declarative story creation for React
- Host: GitHub
- URL: https://github.com/deecewan/react-stories
- Owner: deecewan
- Created: 2017-07-05T23:12:36.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-17T22:56:58.000Z (almost 9 years ago)
- Last Synced: 2025-09-17T07:46:26.939Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 121 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-stories
> Declarative story creation for React
## Motivation
Following the great work from
[@storybooks/storybook](https://github.com/storybooks/storybook), I decided that
for building stories in a React environment, we should be using a declarative
API. Additionally, I wanted to be able to nest stories inside of other stories.
So I've started building a similar concept, but very different execution.
Nesting is super useful to keep all components of different implementation but
similar type together. For instance, you may have multiple buttons that extend
from a single root button. To keep your `ActionButton` with your `SubmitButton`
(or whatever), you can nest them under a common `Button` story.
## Usage
```js
// Button.jsx
export default function Button(props) {
return ({props.label})
}
// BlueButton.jsx
export default function BlueButton(props) {
return ({props.label});
}
// Storybook.jsx
import { StoryBook, Chapter, Story } from 'react-stories';
import Button from './Button';
import BlueButton from './BlueButton';
export default function Stories() {
}
```
## Development
- clone the repo
- run `yarn`
- run `yarn serve` to run the dev server with the demo loaded
## TODO
Everything. This is very much a work in progress.