Skip to content

Commit 880766a

Browse files
committed
version bump; update README
1 parent df17924 commit 880766a

File tree

2 files changed

+16
-22
lines changed

2 files changed

+16
-22
lines changed

README.md

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
# bs-storybook
22

33
BuckleScript bindings for Storybook.js! The goal of this project is to provide bindings for the main Storybook API, as well as the official add-ons. Currently it supports:
4-
* [actions](https://github.com/storybooks/storybook/tree/master/addons/actions)
5-
* [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
6-
* [addons API](https://storybook.js.org/addons/writing-addons/)
4+
5+
* [actions](https://github.com/storybooks/storybook/tree/master/addons/actions)
6+
* [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
7+
* [addons API](https://storybook.js.org/addons/writing-addons/)
78

89
## Getting Started
910

@@ -15,17 +16,17 @@ npm install bs-storybook
1516

1617
Next, you'll need to add `bs-storybook` to your `bsconfig.json` as a dependency.
1718

18-
Then, get Storybook up and running according to [their docs](https://storybook.js.org/basics/quick-start-guide/). (*Note:* This library does not attempt to provide a way to configure storybook in Reason - just use the standard JS configs.)
19+
Then, get Storybook up and running according to [their docs](https://storybook.js.org/basics/quick-start-guide/). (_Note:_ This library does not attempt to provide a way to configure storybook in Reason - just use the standard JS configs.)
1920

2021
In your `/.storybook/config.js`, import your stories from wherever your compiled Reason modules end up. For example, if you're writing your stories inside a `__stories__` directory, and `bsb` is configured for a standard build, you might do something like:
2122

2223
```javascript
23-
const req = require.context('../lib/js', true, /\__stories__\/.*.js$/)
24+
const req = require.context('../lib/js', true, /\__stories__\/.*.js$/);
2425
configure(() => {
2526
req.keys().forEach(module => {
2627
req(module).default();
27-
})
28-
}, module)
28+
});
29+
}, module);
2930
```
3031

3132
Note that in the above example, we're assuming the convention of each module containing a function as the `default` export. We'll account for that when writing our stories in the next section.
@@ -35,25 +36,18 @@ Note that in the above example, we're assuming the convention of each module con
3536
Here's a basic story in its entirety:
3637

3738
```reason
38-
open BsStorybook.Main;
39+
open BsStorybook.Story;
3940
4041
let _module = [%bs.raw "module"];
4142
42-
let default = () => {
43-
let myStory =
44-
createStory(~title="My First Reason Story", ~decorators=[], ~_module, ());
45-
myStory.add(
46-
"first chapter",
47-
() => <span> (ReasonReact.stringToElement("Hello bs-storybook!")) </span>
48-
)
49-
};
43+
storiesOf("My First Reason Story", _module)
44+
|. addDecorator()
45+
|. add("first chapter", () =>
46+
<span> (ReasonReact.stringToElement("Hello bs-storybook!")) </span>
47+
);
5048
```
5149

52-
Storybook uses a reference to the `module` global provided by webpack to facilitate hot-reloading. We'll access that via the `[%bs.raw]` decorator. We're also wrapping the story definition in a `default` function to make it work with the way we've configured storybook. There's nothing enforcing this convention - you can choose to use another export name if you'd like.
53-
54-
We create a story using `createStory`, and pass it the story's title, any decorators we'd like to use (in the above example, we're not using any), and the module reference we created.
55-
56-
From there, we can add to the story using essentially the same API as the JS version of storybook: call `add()` and pass a string + a function that returns a React element.
50+
Storybook uses a reference to the `module` global provided by webpack to facilitate hot-reloading. We'll access that via the `[%bs.raw]` decorator.
5751

5852
## The Actions Addon
5953

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bs-storybook",
3-
"version": "0.1.2",
3+
"version": "0.2.0",
44
"description": "BuckleScript bindings for Storybook.js",
55
"scripts": {
66
"build": "bsb -make-world",

0 commit comments

Comments
 (0)