Merge pull request #8 from draftbit/davesnx/Update-readme

Author: davesnx

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_size = 2

README.md

@@ -1,6 +1,8 @@
 # bs-storybook
 
-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:
+BuckleScript bindings for **[Storybook](https://storybook.js.org/)**.
+
+The goal of this project is to provide bindings for the main Storybook API, as well as the official add-ons. Currently it supports:
 
 * [actions](https://github.com/storybooks/storybook/tree/master/addons/actions)
 * [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
@@ -16,9 +18,12 @@ npm install bs-storybook
 
 Next, you'll need to add `bs-storybook` to your `bsconfig.json` as a dependency.
 
-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.)
+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.
 
-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:
+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:
 
 ```javascript
 const req = require.context('../lib/js', true, /\__stories__\/.*.js$/);
@@ -29,7 +34,17 @@ configure(() => {
 }, module);
 ```
 
-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.
+or if you are using Storybook v6.
+
+```javascript
+/* .storybook/main.js */
+module.exports = {
+  stories: ['../stories/**/*.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-knobs/register'],
+};
+```
+
+Note that in the above example, we're assuming the convention of each module containing a function as the `default` export. bs-storybook is accountable for that while writting your stories:
 
 ## Writing a story
 
@@ -41,32 +56,66 @@ open BsStorybook.Story;
 let _module = [%bs.raw "module"];
 
 storiesOf("My First Reason Story", _module)
-|. addDecorator()
-|. add("first chapter", () =>
-     <span> (ReasonReact.stringToElement("Hello bs-storybook!")) </span>
-   );
+->add("Chapter I", () => <span> {React.string("Hello bs-storybook!")} </span>);
 ```
 
 Storybook uses a reference to the `module` global provided by webpack to facilitate hot-reloading. We'll access that via the `[%bs.raw]` decorator.
 
 ## The Actions Addon
 
 The action addon's API is essentially unchanged from its JS implementation:
+> Make sure that you have `@storybook/addon-actions` in the config
 
 ```reason
 let clickAction = Action.action("I Clicked The Button!");
+
+<div onClick={clickAction} />
 ```
 
 ## The Knobs Addon
 
-To use knobs, be sure to add the decorator to your story definition:
+To use [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) you have twoo ways:
+> Make sure that you have @storybook/addon-knobs/register in the config
+
+#### As a decorator
+
+```reason
+open Storybook;
+open Story;
+
+let _module = [%bs.raw "module"];
+
+storiesOf("My First Reason Story", _module)
+->addDecorator(Knobs.withKnobs)
+->add("Chaper with Knobs", () => {
+    let name = Knobs.text(~label="Name", ~defaultValue="Patrick", ());
+    <span> {React.string(name)} </span>;
+  })
+```
+
+#### Creating the story
 
 ```reason
+open Storybook;
+open Story;
+
+let _module = [%bs.raw "module"];
+
 let knobsStory =
-	createStory(~title="Hey look, knobs!", ~decorators=[Knobs.withKnobs], ~_module, ());
+  Main.createStory(
+    ~title="Hey look, knobs!",
+    ~decorators=[Knobs.withKnobs],
+    ~_module,
+    (),
+  );
+
+knobsStory.add("Chaper with Knobs", () => {
+  let name = Knobs.text(~label="Name", ~defaultValue="Patrick", ());
+  <span> {React.string(name)} </span>;
+})
 ```
 
-Each knob type is invoked using a function with labeled arguments, and each requires passing `unit` as the final argument. They all share a `~label` argument, and a `~defaultValue` argument (where appropriate);
+Each knob type is invoked using a function with labeled arguments, and each requires passing `unit` as the final argument. They all share a `~label` argument, and a `~defaultValue` argument (where appropriate):
 
 ### Text
 
@@ -95,11 +144,11 @@ The number type works with floats. If no `defaultValue` is provided, it will pas
 ```reason
 let num1 = Knobs.number(~label="Number 1", ());
 let num2 =
-	Knobs.number(
-		~label="Number 2",
-		~rangeConfiguration={min: 0., max: 10., step: 1.},
-		()
-	);
+  Knobs.number(
+    ~label="Number 2",
+    ~rangeConfiguration={range: true, min: 0., max: 10., step: 1.},
+    ()
+  );
 ```
 
 ### Select
@@ -108,13 +157,13 @@ To use the select knob, first define a record type that contains the shape of th
 
 ```reason
 type selectOptions = {
-	one: string,
-	two: string
+  one: string,
+  two: string
 };
 
 let options : Knobs.selectConfig(selectOptions) = {
-	one: "Hello",
-	two: "Hi"
+  one: "Hello",
+  two: "Hi"
 };
 ```
 
@@ -128,16 +177,47 @@ let greeting = Knobs.select(~label="Greeting", ~options, ~defaultValue=options.o
 
 ```reason
 Knobs.button(
-	~label="Knob Button",
-	~handler=Action.action("Clicked the knob button"),
-	()
+  ~label="Knob Button",
+  ~handler=Action.action("Clicked the knob button"),
+  ()
 )
 ```
 
 ### Object
 
-Not yet implemented.
+```reason
+let obj = Knobs.object_(~label="User", ~defaultValue={"color": "grey"}, ());
+```
+
+### Js.Dict
+> https://bucklescript.github.io/bucklescript/api/Js.Dict.html
+
+```reason
+let options =
+  Js.Dict.fromArray([|
+    ("Red", "red"),
+    ("Blue", "blue"),
+    ("Yellow", "yellow"),
+    ("None", ""),
+  |]);
+
+let color =
+  Knobs.selectFromDict(
+    ~label="MySelection",
+    ~options,
+    ~defaultValue="red",
+    (),
+  );
+```
 
 ### Array
 
-Not yet implemented.
+```reason
+let color =
+  Knobs.selectFromArray(
+    ~label="MySelection",
+    ~options=[|"red", "blue", "yellow"|],
+    ~defaultValue="red",
+    (),
+  );
+```

bsconfig.json

@@ -1,10 +1,18 @@
 {
   "name": "bs-storybook",
   "namespace": true,
-  "bsc-flags": ["-bs-super-errors"],
+  "bsc-flags": [
+    "-bs-super-errors"
+  ],
   "version": "0.1.0",
-  "sources": ["src"],
-  "bs-dependencies": ["reason-react"],
-  "reason": { "react-jsx": 2 },
+  "sources": [
+    "src"
+  ],
+  "bs-dependencies": [
+    "reason-react"
+  ],
+  "reason": {
+    "react-jsx": 2
+  },
   "refmt": 3
 }

example/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+src/*.js
+lib
+yarn.lock

example/bsconfig.json

@@ -1,19 +1,36 @@
 {
   "name": "storybook-test",
   "namespace": false,
-  "reason": { "react-jsx": 3 },
+  "reason": {
+    "react-jsx": 3
+  },
   "refmt": 3,
-  "bs-dependencies": ["reason-react"],
+  "bs-dependencies": [
+    "reason-react"
+  ],
   "ppx-flags": [],
   "sources": [
-    { "dir": "src", "subdirs": true },
-    { "dir": "bindings", "subdirs": true },
-    { "dir": "stories", "subdirs": true }
+    {
+      "dir": "src",
+      "subdirs": true
+    },
+    {
+      "dir": "bindings",
+      "subdirs": true
+    },
+    {
+      "dir": "stories",
+      "subdirs": true
+    }
   ],
   "package-specs": {
     "module": "es6",
     "in-source": true
   },
   "suffix": ".bs.js",
-  "bsc-flags": ["-bs-no-version-header", "-bs-super-errors", "-bs-g"]
+  "bsc-flags": [
+    "-bs-no-version-header",
+    "-bs-super-errors",
+    "-bs-g"
+  ]
 }

package.json

@@ -20,7 +20,8 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "bs-platform": "^7.0.1"
+    "bs-platform": "^7.0.1",
+    "reason-react": "^0.7.1"
   },
   "peerDependencies": {
     "reason-react": "^0.7.1",

src/action.re

@@ -1,4 +1,4 @@
 type actionHandler('a) = 'a => unit;
 
 [@bs.val] [@bs.module "@storybook/addon-actions"]
-external action : string => actionHandler('a) = "";
+external action: string => actionHandler('a);

src/addons.re

@@ -11,24 +11,24 @@ type channelListener = string => unit;
 type panelConfig = {
   .
   "title": string,
-  "render": unit => ReasonReact.reactElement
+  "render": unit => ReasonReact.reactElement,
 };
 
-[@bs.module "@storybook/addons"] external addons : t = "default";
+[@bs.module "@storybook/addons"] external addons: t = "default";
 
-[@bs.send] external register : (t, string, callback) => unit = "register";
+[@bs.send] external register: (t, string, callback) => unit = "register";
 
-[@bs.send] external addPanel : (t, string, panelConfig) => unit = "addPanel";
+[@bs.send] external addPanel: (t, string, panelConfig) => unit = "addPanel";
 
-[@bs.send] external getChannel : (t, unit) => channel = "getChannel";
+[@bs.send] external getChannel: (t, unit) => channel = "getChannel";
 
-[@bs.send] external emitChannel : (channel, string, string) => unit = "emit";
+[@bs.send] external emitChannel: (channel, string, string) => unit = "emit";
 
 [@bs.send]
-external onChannel : (channel, string, channelListener) => unit = "on";
+external onChannel: (channel, string, channelListener) => unit = "on";
 
 [@bs.send]
-external removeChannelListener : (channel, string, channelListener) => unit =
+external removeChannelListener: (channel, string, channelListener) => unit =
   "removeListener";
 
-[@bs.send] external onStory : (api, unit => unit) => unit = "onStory";
+[@bs.send] external onStory: (api, unit => unit) => unit = "onStory";

src/knobs.re

@@ -1,5 +1,5 @@
 [@bs.val] [@bs.module "@storybook/addon-knobs/react"]
-external withKnobs: Main.decorator = "";
+external withKnobs: Main.decorator;
 
 [@bs.val] [@bs.module "@storybook/addon-knobs/react"]
 external extText: (string, Js.null_undefined(string)) => string = "text";

src/main.re

@@ -3,14 +3,13 @@ type chapter = unit => ReasonReact.reactElement;
 type section;
 
 [@bs.val] [@bs.module "@storybook/react"]
-external storiesOf : (string, 'a) => section =
-  "";
+external storiesOf: (string, 'a) => section;
 
-[@bs.send] external extAdd : (section, string, chapter) => unit = "add";
+[@bs.send] external extAdd: (section, string, chapter) => unit = "add";
 
 type decorator = chapter => ReasonReact.reactElement;
 
-[@bs.send] external addDecorator : (section, decorator) => unit = "";
+[@bs.send] external addDecorator: (section, decorator) => unit;
 
 type webpackModule;
 
@@ -19,9 +18,14 @@ type chapterAdd = (string, chapter) => unit;
 type story = {add: chapterAdd};
 
 let createStory =
-    (~title: string, ~decorators: list(decorator), ~_module: webpackModule, ())
+    (
+      ~title: string,
+      ~decorators: list(decorator),
+      ~_module: webpackModule,
+      (),
+    )
     : story => {
   let story = storiesOf(title, _module);
-  List.iter((dec) => addDecorator(story, dec), decorators);
-  {add: (name: string, c: chapter) => extAdd(story, name, c)}
+  List.iter(dec => addDecorator(story, dec), decorators);
+  {add: (name: string, c: chapter) => extAdd(story, name, c)};
 };