Merge pull request #10 from kgoggin/component-story-format

CSF Bindings

Author: davesnx

README.md

@@ -4,9 +4,9 @@ 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)
-* [addons API](https://storybook.js.org/addons/writing-addons/)
+- [actions](https://github.com/storybooks/storybook/tree/master/addons/actions)
+- [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
+- [addons API](https://storybook.js.org/addons/writing-addons/)
 
 ## Getting Started
 
@@ -26,9 +26,9 @@ In your `/.storybook/config.js`, import your stories from wherever your compiled
 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$/);
+const req = require.context("../lib/js", true, /\__stories__\/.*.js$/);
 configure(() => {
-  req.keys().forEach(module => {
+  req.keys().forEach((module) => {
     req(module).default();
   });
 }, module);
@@ -39,8 +39,12 @@ 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'],
+  stories: ["../stories/**/*.js"],
+  addons: [
+    "@storybook/addon-actions",
+    "@storybook/addon-links",
+    "@storybook/addon-knobs/register",
+  ],
 };
 ```
 
@@ -61,9 +65,24 @@ storiesOf("My First Reason Story", _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.
 
+## Writing a CSF Story
+
+If you'd prefer to use the newer [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you can do that as well:
+
+```reason
+open BsStorybook;
+
+let default = CSF.make(~title="My CSF Story", ());
+
+let button = () => <MyButton />;
+
+button->CSF.addMeta(~name="Plain Button", ());
+```
+
 ## 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
@@ -75,6 +94,7 @@ let clickAction = Action.action("I Clicked The Button!");
 ## The Knobs Addon
 
 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
@@ -190,6 +210,7 @@ let obj = Knobs.object_(~label="User", ~defaultValue={"color": "grey"}, ());
 ```
 
 ### Js.Dict
+
 > https://bucklescript.github.io/bucklescript/api/Js.Dict.html
 
 ```reason

example/bindings/Storybook.bs.js

@@ -1,6 +1,7 @@
 
 
 import * as List from "bs-platform/lib/es6/list.js";
+import * as Belt_Option from "bs-platform/lib/es6/belt_Option.js";
 import * as React from "@storybook/react";
 import * as Js_null_undefined from "bs-platform/lib/es6/js_null_undefined.js";
 import * as React$1 from "@storybook/addon-knobs/react";
@@ -31,8 +32,8 @@ function text(label, defaultValue, param) {
   return React$1.text(label, Js_null_undefined.fromOption(defaultValue));
 }
 
-function $$boolean(label, $staropt$star, param) {
-  var defaultValue = $staropt$star !== undefined ? $staropt$star : false;
+function $$boolean(label, defaultValueOpt, param) {
+  var defaultValue = defaultValueOpt !== undefined ? defaultValueOpt : false;
   return React$1.boolean(label, defaultValue);
 }
 
@@ -55,13 +56,44 @@ var Addons = { };
 
 var Action = { };
 
+var bsExports = ["$$default"];
+
+function make(title, component, decorators, parameters, includeStories, excludeStories, param) {
+  return {
+          title: title,
+          component: Js_null_undefined.fromOption(component),
+          decorators: Js_null_undefined.fromOption(decorators),
+          parameters: Js_null_undefined.fromOption(parameters),
+          includeStories: Js_null_undefined.fromOption(includeStories),
+          excludeStories: Belt_Option.mapWithDefault(excludeStories, bsExports, (function (es) {
+                  return es.concat(bsExports);
+                }))
+        };
+}
+
+function addMeta(csfStory, name, decorators, parameters, param) {
+  csfStory.story = {
+    name: Js_null_undefined.fromOption(name),
+    decorators: Js_null_undefined.fromOption(decorators),
+    parameters: Js_null_undefined.fromOption(parameters)
+  };
+  return /* () */0;
+}
+
+var CSF = {
+  bsExports: bsExports,
+  make: make,
+  addMeta: addMeta
+};
+
 export {
   Story ,
   Main ,
   Notes ,
   Knobs ,
   Addons ,
   Action ,
+  CSF ,
 
 }
 /* @storybook/react Not a pure module */

example/bindings/Storybook.re

@@ -182,3 +182,61 @@ module Action = {
   [@bs.val] [@bs.module "@storybook/addon-actions"]
   external action: string => actionHandler('a);
 };
+
+module CSF = {
+  type csfStory = unit => React.element;
+  type decorator = csfStory => React.element;
+
+  type csfMetaData('params) = {
+    title: string,
+    component: Js.Nullable.t(unit => React.element),
+    decorators: Js.Nullable.t(array(decorator)),
+    parameters: Js.Nullable.t('params),
+    includeStories: Js.Nullable.t(array(string)),
+    excludeStories: Js.Nullable.t(array(string)),
+  };
+
+  type storyMetadata('params) = {
+    name: Js.Nullable.t(string),
+    decorators: Js.Nullable.t(array(decorator)),
+    parameters: Js.Nullable.t('params),
+  };
+
+  /**
+   * Bucklescript renames a variables called `default` to `$$default` and exports that as well.
+   */
+  let bsExports = [|"$$default"|];
+
+  [@bs.set]
+  external story: (csfStory, storyMetadata('params)) => unit = "story";
+
+  let make =
+      (
+        ~title,
+        ~component=?,
+        ~decorators=?,
+        ~parameters=?,
+        ~includeStories=?,
+        ~excludeStories=?,
+        (),
+      ) => {
+    title,
+    component: component->Js.Nullable.fromOption,
+    decorators: decorators->Js.Nullable.fromOption,
+    parameters: parameters->Js.Nullable.fromOption,
+    includeStories: includeStories->Js.Nullable.fromOption,
+    excludeStories:
+      excludeStories
+      ->Belt.Option.mapWithDefault(bsExports, es =>
+          es->Js.Array2.concat(bsExports)
+        )
+      ->Js.Nullable.return,
+  };
+
+  let addMeta = (csfStory, ~name=?, ~decorators=?, ~parameters=?, ()) =>
+    csfStory->story({
+      name: name->Js.Nullable.fromOption,
+      decorators: decorators->Js.Nullable.fromOption,
+      parameters: parameters->Js.Nullable.fromOption,
+    });
+};

example/stories/ExampleCSFStories.bs.js

@@ -0,0 +1,38 @@
+
+
+import * as React from "react";
+import * as MyButton from "../src/MyButton.bs.js";
+import * as Storybook from "../bindings/Storybook.bs.js";
+import * as AddonActions from "@storybook/addon-actions";
+import * as React$1 from "@storybook/addon-knobs/react";
+
+var $$default = Storybook.CSF.make("Reason CSF Story", undefined, [React$1.withKnobs], undefined, undefined, undefined, /* () */0);
+
+function renderButton(param) {
+  return React.createElement(MyButton.make, { });
+}
+
+Storybook.CSF.addMeta(renderButton, "render plain button", undefined, undefined, /* () */0);
+
+function knobTest(param) {
+  var name = Storybook.Knobs.text("Name", "Kyle", /* () */0);
+  var age = React$1.number("Age", 37, {
+        range: false,
+        min: 19,
+        max: 50,
+        step: 1
+      });
+  var content = "I am " + (name + (" and I am " + (String(age | 0) + " old")));
+  return React.createElement("span", {
+              onClick: AddonActions.action("Test")
+            }, content);
+}
+
+export {
+  $$default ,
+  $$default as default,
+  renderButton ,
+  knobTest ,
+  
+}
+/* default Not a pure module */

example/stories/ExampleCSFStories.re

@@ -0,0 +1,26 @@
+open Storybook;
+
+let default =
+  CSF.make(~title="Reason CSF Story", ~decorators=[|Knobs.withKnobs|], ());
+
+let renderButton = () => <MyButton />;
+renderButton->CSF.addMeta(~name="render plain button", ());
+
+let knobTest = () => {
+  let name = Knobs.text(~label="Name", ~defaultValue="Kyle", ());
+  let age =
+    Knobs.number(
+      ~label="Age",
+      ~defaultValue=37.,
+      ~range={range: false, min: 19., max: 50., step: 1.},
+      (),
+    );
+
+  let content =
+    "I am "
+    ++ name
+    ++ " and I am "
+    ++ age->Belt.Float.toInt->Belt.Int.toString
+    ++ " old";
+  <span onClick={Action.action("Test")}> content->React.string </span>;
+};

src/CSF.re

@@ -0,0 +1,55 @@
+type csfStory = unit => React.element;
+type decorator = csfStory => React.element;
+
+type csfMetadata('params) = {
+  title: string,
+  component: Js.Nullable.t(unit => React.element),
+  decorators: Js.Nullable.t(array(decorator)),
+  parameters: Js.Nullable.t('params),
+  includeStories: Js.Nullable.t(array(string)),
+  excludeStories: Js.Nullable.t(array(string)),
+};
+
+type storyMetadata('params) = {
+  name: Js.Nullable.t(string),
+  decorators: Js.Nullable.t(array(decorator)),
+  parameters: Js.Nullable.t('params),
+};
+
+/**
+  * Bucklescript renames a variables called `default` to `$$default` and exports that as well.
+  */
+let bsExports = [|"$$default"|];
+
+[@bs.set]
+external story: (csfStory, storyMetadata('params)) => unit = "story";
+
+let make =
+    (
+      ~title,
+      ~component=?,
+      ~decorators=?,
+      ~parameters=?,
+      ~includeStories=?,
+      ~excludeStories=?,
+      (),
+    ) => {
+  title,
+  component: component->Js.Nullable.fromOption,
+  decorators: decorators->Js.Nullable.fromOption,
+  parameters: parameters->Js.Nullable.fromOption,
+  includeStories: includeStories->Js.Nullable.fromOption,
+  excludeStories:
+    excludeStories
+    ->Belt.Option.mapWithDefault(bsExports, es =>
+        es->Js.Array2.concat(bsExports)
+      )
+    ->Js.Nullable.return,
+};
+
+let addMeta = (csfStory, ~name=?, ~decorators=?, ~parameters=?, ()) =>
+  csfStory->story({
+    name: name->Js.Nullable.fromOption,
+    decorators: decorators->Js.Nullable.fromOption,
+    parameters: parameters->Js.Nullable.fromOption,
+  });