docs: Clarify Knobs and Stories API

Author: davesnx

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(
+  Knobs.number(
 		~label="Number 2",
-		~rangeConfiguration={min: 0., max: 10., step: 1.},
+		~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",
+		(),
+  );
+```