You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-21Lines changed: 15 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,10 @@
1
1
# bs-storybook
2
2
3
3
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:
Next, you'll need to add `bs-storybook` to your `bsconfig.json` as a dependency.
17
18
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.)
19
20
20
21
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:
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
35
36
Here's a basic story in its entirety:
36
37
37
38
```reason
38
-
open BsStorybook.Main;
39
+
open BsStorybook.Story;
39
40
40
41
let _module = [%bs.raw "module"];
41
42
42
-
let default = () => {
43
-
let myStory =
44
-
createStory(~title="My First Reason Story", ~decorators=[], ~_module, ());
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.
0 commit comments