fix import issues with Knobs

example/bindings/Storybook.bs.js

@@ -4,20 +4,20 @@ 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";
+import * as AddonKnobs from "@storybook/addon-knobs";
 
-var Story = { };
+var Story = {};
 
 function createStory(title, decorators, _module, param) {
   var story = React.storiesOf(title, _module);
   List.iter((function (dec) {
           story.addDecorator(dec);
-          return /* () */0;
+
         }), decorators);
   return {
           add: (function (name, c) {
               story.add(name, c);
-              return /* () */0;
+
             })
         };
 }
@@ -26,23 +26,23 @@ var Main = {
   createStory: createStory
 };
 
-var Notes = { };
+var Notes = {};
 
 function text(label, defaultValue, param) {
-  return React$1.text(label, Js_null_undefined.fromOption(defaultValue));
+  return AddonKnobs.text(label, Js_null_undefined.fromOption(defaultValue));
 }
 
 function $$boolean(label, defaultValueOpt, param) {
   var defaultValue = defaultValueOpt !== undefined ? defaultValueOpt : false;
-  return React$1.boolean(label, defaultValue);
+  return AddonKnobs.boolean(label, defaultValue);
 }
 
 function date(label, defaultValue, param) {
-  return React$1.date(label, Js_null_undefined.fromOption(defaultValue));
+  return AddonKnobs.date(label, Js_null_undefined.fromOption(defaultValue));
 }
 
 function button(label, handler, param) {
-  return React$1.button(label, handler);
+  return AddonKnobs.button(label, handler);
 }
 
 var Knobs = {
@@ -52,9 +52,9 @@ var Knobs = {
   button: button
 };
 
-var Addons = { };
+var Addons = {};
 
-var Action = { };
+var Action = {};
 
 var bsExports = ["$$default"];
 
@@ -77,7 +77,7 @@ function addMeta(csfStory, name, decorators, parameters, param) {
     decorators: Js_null_undefined.fromOption(decorators),
     parameters: Js_null_undefined.fromOption(parameters)
   };
-  return /* () */0;
+
 }
 
 var CSF = {

example/bindings/Storybook.re

@@ -57,16 +57,16 @@ module Notes = {
 };
 
 module Knobs = {
-  [@bs.val] [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.val] [@bs.module "@storybook/addon-knobs"]
   external withKnobs: Main.decorator;
 
-  [@bs.val] [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.val] [@bs.module "@storybook/addon-knobs"]
   external extText: (string, Js.null_undefined(string)) => string = "text";
 
   let text = (~label: string, ~defaultValue: option(string)=?, ()) =>
     extText(label, Js.Nullable.fromOption(defaultValue));
 
-  [@bs.val] [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.val] [@bs.module "@storybook/addon-knobs"]
   external extBoolean: (string, bool) => bool = "boolean";
 
   let boolean = (~label: string, ~defaultValue=false, ()) =>
@@ -79,24 +79,24 @@ module Knobs = {
     step: float,
   };
 
-  [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.module "@storybook/addon-knobs"]
   external number:
     (~label: string, ~defaultValue: float, ~range: rangeConfig=?, unit) =>
     float =
     "number";
 
-  [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.module "@storybook/addon-knobs"]
   external object_:
     (~label: string, ~defaultValue: Js.t('a), unit) => Js.t('a) =
     "object";
 
-  [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.module "@storybook/addon-knobs"]
   external color: (~label: string, ~defaultValue: string=?, unit) => string =
     "color";
 
   type selectConfig('a) = 'a;
 
-  [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.module "@storybook/addon-knobs"]
   external select:
     (
       ~label: string,
@@ -107,31 +107,31 @@ module Knobs = {
     string =
     "select";
 
-  [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.module "@storybook/addon-knobs"]
   external selectFromArray:
     (~label: string, ~options: array('a), ~defaultValue: string, unit) => 'a =
     "select";
 
-  [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.module "@storybook/addon-knobs"]
   external selectFromDict:
     (~label: string, ~options: Js.Dict.t('a), ~defaultValue: string, unit) =>
     'a =
     "select";
 
-  [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.module "@storybook/addon-knobs"]
   external selectFromAny:
     (~label: string, ~options: 'a, ~defaultValue: string, unit) => 'a =
     "select";
 
-  [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.module "@storybook/addon-knobs"]
   external extDate: (string, Js.null_undefined(Js_date.t)) => string = "date";
 
   let date = (~label: string, ~defaultValue: option(Js_date.t)=?, ()) =>
     extDate(label, Js.Nullable.fromOption(defaultValue));
 
   type button;
 
-  [@bs.val] [@bs.module "@storybook/addon-knobs/react"]
+  [@bs.val] [@bs.module "@storybook/addon-knobs"]
   external extButton: (string, ReactEvent.Mouse.t => unit) => button =
     "button";
 

example/package.json

@@ -8,17 +8,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-links": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/react": "^5.3.18",
+    "@storybook/addon-actions": "^6.1.20",
+    "@storybook/addon-knobs": "^6.1.20",
+    "@storybook/addon-links": "^6.1.20",
+    "@storybook/addons": "^6.1.20",
+    "@storybook/react": "^6.1.20",
     "babel-loader": "^8.1.0",
     "bs-platform": "8.4.2"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "bs:start": "bsb -make-world -w"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }

example/stories/ExampleCSFStories.bs.js

@@ -3,20 +3,20 @@
 import * as React from "react";
 import * as MyButton from "../src/MyButton.bs.js";
 import * as Storybook from "../bindings/Storybook.bs.js";
+import * as AddonKnobs from "@storybook/addon-knobs";
 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);
+var $$default = Storybook.CSF.make("Reason CSF Story", undefined, [AddonKnobs.withKnobs], undefined, undefined, undefined, undefined);
 
 function renderButton(param) {
-  return React.createElement(MyButton.make, { });
+  return React.createElement(MyButton.make, {});
 }
 
-Storybook.CSF.addMeta(renderButton, "render plain button", undefined, undefined, /* () */0);
+Storybook.CSF.addMeta(renderButton, "render plain button", undefined, undefined, undefined);
 
 function knobTest(param) {
-  var name = Storybook.Knobs.text("Name", "Kyle", /* () */0);
-  var age = React$1.number("Age", 37, {
+  var name = Storybook.Knobs.text("Name", "Kyle", undefined);
+  var age = AddonKnobs.number("Age", 37, {
         range: false,
         min: 19,
         max: 50,

example/stories/ExampleStories.bs.js

@@ -5,16 +5,16 @@ import * as Js_dict from "bs-platform/lib/es6/js_dict.js";
 import * as MyButton from "../src/MyButton.bs.js";
 import * as Storybook from "../bindings/Storybook.bs.js";
 import * as React$1 from "@storybook/react";
+import * as AddonKnobs from "@storybook/addon-knobs";
 import * as AddonActions from "@storybook/addon-actions";
-import * as React$2 from "@storybook/addon-knobs/react";
 
 var _module = module;
 
-React$1.storiesOf("My First Reason Story", _module).addDecorator(React$2.withKnobs).add("render MyButton test", (function (param) {
-                  return React.createElement(MyButton.make, { });
+React$1.storiesOf("My First Reason Story", _module).addDecorator(AddonKnobs.withKnobs).add("render MyButton test", (function (param) {
+                  return React.createElement(MyButton.make, {});
                 })).add("text knob test", (function (param) {
-                var name = Storybook.Knobs.text("Name", "Patrick", /* () */0);
-                var age = React$2.number("Age", 30, {
+                var name = Storybook.Knobs.text("Name", "Patrick", undefined);
+                var age = AddonKnobs.number("Age", 30, {
                       range: false,
                       min: 19,
                       max: 50,
@@ -25,7 +25,7 @@ React$1.storiesOf("My First Reason Story", _module).addDecorator(React$2.withKno
                             onClick: AddonActions.action("Test")
                           }, content);
               })).add("object knob test with Js.t", (function (param) {
-              var obj = React$2.object("User", {
+              var obj = AddonKnobs.object("User", {
                     color: "grey"
                   });
               var style = {
@@ -35,15 +35,15 @@ React$1.storiesOf("My First Reason Story", _module).addDecorator(React$2.withKno
                           style: style
                         }, "tes");
             })).add("color knob test", (function (param) {
-            var color = React$2.color("myColor", "red");
+            var color = AddonKnobs.color("myColor", "red");
             var style = {
               backgroundColor: color
             };
             return React.createElement("div", {
                         style: style
                       }, "tes");
           })).add("select knob test with an array as options", (function (param) {
-          var color = React$2.select("MySelection", [
+          var color = AddonKnobs.select("MySelection", [
                 "red",
                 "blue",
                 "yellow"
@@ -56,24 +56,24 @@ React$1.storiesOf("My First Reason Story", _module).addDecorator(React$2.withKno
                     }, "Selected color: " + color);
         })).add("select knob test with a Dict as options", (function (param) {
         var options = Js_dict.fromArray([
-              /* tuple */[
+              [
                 "Red",
                 "red"
               ],
-              /* tuple */[
+              [
                 "Blue",
                 "blue"
               ],
-              /* tuple */[
+              [
                 "Yellow",
                 "yellow"
               ],
-              /* tuple */[
+              [
                 "None",
                 ""
               ]
             ]);
-        var color = React$2.select("MySelection", options, "red");
+        var color = AddonKnobs.select("MySelection", options, "red");
         var style = {
           color: color
         };
@@ -88,7 +88,7 @@ React$1.storiesOf("My Second Reason Story", _module).add("first chapter", (funct
                   }, "HI");
       }));
 
-var Action = /* alias */0;
+var Action;
 
 export {
   Action ,

example/stories/ExampleStories.re

@@ -85,9 +85,11 @@ storiesOf("My First Reason Story", _module)
        }
        ->React.string}
     </div>;
-  });
+  })
+->ignore;
 
 storiesOf("My Second Reason Story", _module)
 ->add("first chapter", () => {
     <span onClick={Action.action("Test")}> "HI"->React.string </span>
-  });
+  })
+->ignore;