@colisweb/rescript-toolkit 2.8.2 → 2.9.0-mobile

package/lib/es6_global/stories/Toolkit__UI_ModalStory.bs.js

@@ -0,0 +1,224 @@
+
+
+import * as Curry from "../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Caml_obj from "../../../node_modules/rescript/lib/es6/caml_obj.js";
+import * as Storybook from "./Storybook.bs.js";
+import * as Belt_Array from "../../../node_modules/rescript/lib/es6/belt_Array.js";
+import * as Toolkit__Ui_Modal from "../src/ui/Toolkit__Ui_Modal.bs.js";
+import * as Toolkit__Ui_Button from "../src/ui/Toolkit__Ui_Button.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_ModalResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Modal.resi";
+
+var $$default = Storybook.CSF.make("Components/Modal", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function defaultExample(param) {
+  var modalSize = [
+    [
+      "lg",
+      "lg"
+    ],
+    [
+      "md",
+      "md"
+    ],
+    [
+      "sm",
+      "sm"
+    ],
+    [
+      "xs",
+      "xs"
+    ]
+  ];
+  var match = React.useState(function () {
+        return false;
+      });
+  var setVisibility = match[1];
+  var match$1 = React.useState(function () {
+        return "md";
+      });
+  var setSize = match$1[1];
+  var size = match$1[0];
+  return React.createElement("div", undefined, React.createElement("div", {
+                  className: "mb-4"
+                }, React.createElement("label", {
+                      htmlFor: "size"
+                    }, "Size :"), React.createElement("select", {
+                      id: "size",
+                      onChange: (function ($$event) {
+                          var value = $$event.target.value;
+                          return Curry._1(setSize, (function (param) {
+                                        return value;
+                                      }));
+                        })
+                    }, Belt_Array.map(modalSize, (function (param) {
+                            var value = param[1];
+                            return React.createElement("option", {
+                                        selected: Caml_obj.caml_equal(value, size),
+                                        value: value
+                                      }, param[0]);
+                          })))), React.createElement(Toolkit__Ui_Button.make, {
+                  onClick: (function (param) {
+                      return Curry._1(setVisibility, (function (param) {
+                                    return true;
+                                  }));
+                    }),
+                  children: "Show modal"
+                }), React.createElement(Toolkit__Ui_Modal.make, {
+                  isVisible: match[0],
+                  title: "title",
+                  body: "Body",
+                  hide: (function (param) {
+                      return Curry._1(setVisibility, (function (param) {
+                                    return false;
+                                  }));
+                    }),
+                  size: size
+                }));
+}
+
+Storybook.CSF.addMeta(defaultExample, "default", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_ModalResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\nlet (isVisible, setVisibility) = React.useState(() => false);\n\n<>\n  <button onClick={_ => setVisibility(_ => true)}>\n    \"Show modal\"->React.string\n  </button>\n  <Modal\n    isVisible\n    title={\"title\"->React.string}\n    body={\"Body\"->React.string}\n    hide={() => setVisibility(_ => false)}\n  />\n</>;\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-modal--default"
+                          }));
+          })
+      }
+    }, undefined);
+
+function coloredExample(param) {
+  var modalSize = [
+    [
+      "lg",
+      "lg"
+    ],
+    [
+      "md",
+      "md"
+    ],
+    [
+      "sm",
+      "sm"
+    ],
+    [
+      "xs",
+      "xs"
+    ]
+  ];
+  var modalColor = [
+    [
+      "primary",
+      "primary"
+    ],
+    [
+      "success",
+      "success"
+    ],
+    [
+      "danger",
+      "danger"
+    ],
+    [
+      "neutral",
+      "neutral"
+    ]
+  ];
+  var match = React.useState(function () {
+        return false;
+      });
+  var setVisibility = match[1];
+  var match$1 = React.useState(function () {
+        return "md";
+      });
+  var setSize = match$1[1];
+  var size = match$1[0];
+  var match$2 = React.useState(function () {
+        return "primary";
+      });
+  var setColor = match$2[1];
+  var color = match$2[0];
+  return React.createElement("div", undefined, React.createElement("div", undefined, React.createElement("label", {
+                      htmlFor: "size"
+                    }, "Size :"), React.createElement("select", {
+                      id: "size",
+                      onChange: (function ($$event) {
+                          var value = $$event.target.value;
+                          return Curry._1(setSize, (function (param) {
+                                        return value;
+                                      }));
+                        })
+                    }, Belt_Array.map(modalSize, (function (param) {
+                            var value = param[1];
+                            return React.createElement("option", {
+                                        selected: Caml_obj.caml_equal(value, size),
+                                        value: value
+                                      }, param[0]);
+                          })))), React.createElement("div", undefined, React.createElement("label", {
+                      htmlFor: "color"
+                    }, "color :"), React.createElement("select", {
+                      onChange: (function ($$event) {
+                          var value = $$event.target.value;
+                          return Curry._1(setColor, (function (param) {
+                                        return value;
+                                      }));
+                        })
+                    }, Belt_Array.map(modalColor, (function (param) {
+                            var value = param[1];
+                            return React.createElement("option", {
+                                        selected: value === color,
+                                        value: value
+                                      }, param[0]);
+                          })))), React.createElement(Toolkit__Ui_Button.make, {
+                  onClick: (function (param) {
+                      return Curry._1(setVisibility, (function (param) {
+                                    return true;
+                                  }));
+                    }),
+                  children: "Show modal"
+                }), React.createElement(Toolkit__Ui_Modal.make, {
+                  isVisible: match[0],
+                  title: "title",
+                  body: "Body",
+                  hide: (function (param) {
+                      return Curry._1(setVisibility, (function (param) {
+                                    return false;
+                                  }));
+                    }),
+                  size: size,
+                  type_: {
+                    NAME: "colored",
+                    VAL: color
+                  }
+                }));
+}
+
+Storybook.CSF.addMeta(coloredExample, "colored", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_ModalResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\nlet modalSize = [|(\"lg\", #lg), (\"md\", #md), (\"sm\", #sm), (\"xs\", #xs)|];\n\nlet modalColor: array((string, Modal.color)) = [|\n  (\"primary\", #primary),\n  (\"success\", #success),\n  (\"danger\", #danger),\n  (\"neutral\", #neutral),\n|];\n\nlet (isVisible, setVisibility) = React.useState(() => false);\nlet (size, setSize) = React.useState(() => #md);\nlet (color, setColor) = React.useState(() => #primary);\n\n<div>\n  <div>\n    <label htmlFor=\"size\"> \"Size :\"->React.string </label>\n    <select\n      id=\"size\"\n      onChange={event => {\n        let value = event->ReactEvent.Form.target##value;\n\n        setSize(_ => value);\n      }}>\n      {modalSize\n        ->Array.map(((label, value)) => {\n            <option value={value->Obj.magic} selected={value == size}>\n              label->React.string\n            </option>\n          })\n        ->React.array}\n    </select>\n  </div>\n  <div>\n    <label htmlFor=\"color\"> \"color :\"->React.string </label>\n    <select\n      onChange={event => {\n        let value = event->ReactEvent.Form.target##value;\n\n        setColor(_ => value);\n      }}>\n      {modalColor\n        ->Array.map(((label, value)) => {\n            <option value={value->Obj.magic} selected={value == color}>\n              label->React.string\n            </option>\n          })\n        ->React.array}\n    </select>\n  </div>\n  <Button onClick={_ => setVisibility(_ => true)}>\n    \"Show modal\"->React.string\n  </Button>\n  <Modal\n    isVisible\n    title={\"title\"->React.string}\n    body={\"Body\"->React.string}\n    hide={() => setVisibility(_ => false)}\n    size\n    type_={#colored(color)}\n  />\n</div>;\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-modal--colored"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  defaultExample ,
+  coloredExample ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_MultiSelectStory.bs.js

@@ -0,0 +1,101 @@
+
+
+import * as Curry from "../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Hooks from "../src/hooks/Toolkit__Hooks.bs.js";
+import * as Fa from "react-icons/fa";
+import * as Toolkit__Ui_Button from "../src/ui/Toolkit__Ui_Button.bs.js";
+import * as Toolkit__Ui_MultiSelect from "../src/ui/Toolkit__Ui_MultiSelect.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_MultiSelectResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_MultiSelect.resi";
+
+var $$default = Storybook.CSF.make("Components/MultiSelect", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function example(param) {
+  var options1 = [
+    {
+      itemLabel: React.createElement("p", {
+            className: "flex flex-row text-danger-500"
+          }, React.createElement(Fa.FaAngleDown, {}), "test"),
+      label: "Test",
+      value: "test"
+    },
+    {
+      itemLabel: React.createElement("p", undefined, "test2"),
+      label: "Test2",
+      value: "test2"
+    },
+    {
+      itemLabel: React.createElement("p", undefined, "test3"),
+      label: "Test3",
+      value: "test3"
+    },
+    {
+      itemLabel: React.createElement("p", undefined, "test4"),
+      label: "Test4",
+      value: "test4"
+    }
+  ];
+  var options2 = [{
+      itemLabel: React.createElement("p", undefined, "test4"),
+      label: "Test4",
+      value: "test4"
+    }];
+  var tmp = Toolkit__Hooks.useDisclosure(undefined, undefined);
+  var options = tmp.isOpen ? options2 : options1;
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Button.make, {
+                  onClick: (function (param) {
+                      return Curry._1(tmp.toggle, undefined);
+                    }),
+                  children: "Change options"
+                }), React.createElement("div", {
+                  className: "h-10"
+                }), React.createElement(Toolkit__Ui_MultiSelect.make, {
+                  options: options,
+                  placeholder: React.createElement("span", undefined, "Select me"),
+                  buttonClassName: "w-48",
+                  dropdownClassName: "w-60",
+                  searchPlaceholder: "Filter",
+                  onChange: (function (prim) {
+                      console.log(prim);
+                      
+                    })
+                }), React.createElement("div", {
+                  className: "mt-8"
+                }), React.createElement(Toolkit__Ui_MultiSelect.make, {
+                  options: options,
+                  placeholder: React.createElement("span", undefined, "Select me"),
+                  buttonClassName: "w-48",
+                  dropdownClassName: "w-60",
+                  searchPlaceholder: "Filter",
+                  defaultValue: options,
+                  onChange: (function (prim) {
+                      console.log(prim);
+                      
+                    })
+                }));
+}
+
+Storybook.CSF.addMeta(example, "example", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_MultiSelectResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n  let options: array<Toolkit__Ui_MultiSelect.item> = [\n    {\n      itemLabel: <p className=\"flex flex-row text-danger-500\">\n        <BsReactIcons.FaAngleDown /> {\"test\"->React.string}\n      </p>,\n      label: \"Test\",\n      value: \"test\",\n    },\n    {\n      itemLabel: <p> {\"test2\"->React.string} </p>,\n      label: \"Test2\",\n      value: \"test2\",\n    },\n    {\n      itemLabel: <p> {\"test3\"->React.string} </p>,\n      label: \"Test3\",\n      value: \"test3\",\n    },\n    {\n      itemLabel: <p> {\"test4\"->React.string} </p>,\n      label: \"Test4\",\n      value: \"test4\",\n    },\n  ]\n\n  <div>\n    <Toolkit__Ui_MultiSelect\n      searchPlaceholder=\"Filter\"\n      buttonClassName={\"w-48\"}\n      dropdownClassName=\"w-60\"\n      placeholder={<span> {\"Select me\"->React.string} </span>}\n      onChange={Js.log}\n      options\n    />\n    <div className=\"mt-8\" />\n    <Toolkit__Ui_MultiSelect\n      searchPlaceholder=\"Filter\"\n      buttonClassName={\"w-48\"}\n      dropdownClassName=\"w-60\"\n      defaultValue={[options[0]->Option.getUnsafe]}\n      placeholder={<span> {\"Select me\"->React.string} </span>}\n      onChange={Js.log}\n      options\n    />\n  </div>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-multiselect--example"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  example ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_NativeDatePickerStory.bs.js

@@ -0,0 +1,54 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import * as Toolkit__Ui_NativeDatePicker from "../src/ui/Toolkit__Ui_NativeDatePicker.bs.js";
+import Toolkit__Ui_NativeDatePickerResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_NativeDatePicker.resi";
+
+var $$default = Storybook.CSF.make("Form/NativeDatePicker", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function exemple(param) {
+  return React.createElement("div", {
+              className: "grid grid-cols-2 grid-flow-row auto-rows-auto gap-x-3 gap-y-3"
+            }, React.createElement("p", undefined, "base"), React.createElement(Toolkit__Ui_NativeDatePicker.make, {
+                  onChange: (function (date) {
+                      
+                    })
+                }), React.createElement("p", undefined, "invalid"), React.createElement(Toolkit__Ui_NativeDatePicker.make, {
+                  onChange: (function (date) {
+                      
+                    }),
+                  isInvalid: true
+                }), React.createElement("p", undefined, "disabled"), React.createElement(Toolkit__Ui_NativeDatePicker.make, {
+                  onChange: (function (date) {
+                      
+                    }),
+                  disabled: true
+                }));
+}
+
+Storybook.CSF.addMeta(exemple, "exemple", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_NativeDatePickerResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\nlet (date,setDate) = React.useEffect(None);\n\n<Toolkit.Ui.NativeDatePicker\n  onChange={date => {\n    setDate(_ => date)\n  }}\n/>\n        "
+                          }), React.createElement(Toolkit__Ui_NativeDatePicker.make, {
+                            onChange: (function (date) {
+                                
+                              })
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  exemple ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_NoticeStory.bs.js

@@ -0,0 +1,84 @@
+
+
+import * as Curry from "../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Ui_Button from "../src/ui/Toolkit__Ui_Button.bs.js";
+import * as Toolkit__Ui_Notice from "../src/ui/Toolkit__Ui_Notice.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_NoticeResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Notice.resi";
+
+var $$default = Storybook.CSF.make("Components/Notice", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function example(param) {
+  var pRef = React.useRef(null);
+  var noticeRef2 = React.useRef(null);
+  var match = React.useState(function () {
+        return false;
+      });
+  var setNoticeVisible1 = match[1];
+  var match$1 = React.useState(function () {
+        return false;
+      });
+  var setNoticeVisible2 = match$1[1];
+  return React.createElement("div", undefined, React.createElement("div", {
+                  className: "flex flex-row items-center"
+                }, React.createElement(Toolkit__Ui_Button.make, {
+                      onClick: (function (param) {
+                          return Curry._1(setNoticeVisible1, (function (v) {
+                                        return !v;
+                                      }));
+                        }),
+                      children: "Toggle notice 1"
+                    }), React.createElement(Toolkit__Ui_Button.make, {
+                      onClick: (function (param) {
+                          return Curry._1(setNoticeVisible2, (function (v) {
+                                        return !v;
+                                      }));
+                        }),
+                      children: "Toggle notice 2"
+                    })), React.createElement("p", {
+                  ref: pRef,
+                  className: "text-center"
+                }, "example"), React.createElement("div", {
+                  ref: noticeRef2,
+                  className: "w-40 h-40 bg-danger-300 ml-20 mt-20"
+                }), React.createElement(Toolkit__Ui_Notice.make, {
+                  baseElementRef: pRef,
+                  className: "bg-info-700 p-2 rounded",
+                  visible: match[0],
+                  children: React.createElement("p", {
+                        className: "text-white"
+                      }, "Some text there")
+                }), React.createElement(Toolkit__Ui_Notice.make, {
+                  baseElementRef: noticeRef2,
+                  className: "bg-info-700 p-2 rounded",
+                  visible: match$1[0],
+                  children: React.createElement("p", {
+                        className: "text-white"
+                      }, "Some text there")
+                }));
+}
+
+Storybook.CSF.addMeta(example, "example", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_NoticeResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n  let pRef = React.useRef(Js.Nullable.null)\n  let noticeRef2 = React.useRef(Js.Nullable.null)\n  let (noticeVisible1, setNoticeVisible1) = React.useState(() => false)\n  let (noticeVisible2, setNoticeVisible2) = React.useState(() => false)\n\n  <div>\n    <div className=\"flex flex-row items-center\">\n      <Button onClick={_ => setNoticeVisible1(v => !v)}> {\"Toggle notice 1\"->React.string} </Button>\n      <Button onClick={_ => setNoticeVisible2(v => !v)}> {\"Toggle notice 2\"->React.string} </Button>\n    </div>\n    <p className=\"text-center\" ref={ReactDOM.Ref.domRef(pRef)}> {\"example\"->React.string} </p>\n    <div ref={ReactDOM.Ref.domRef(noticeRef2)} className=\"w-40 h-40 bg-danger-300 ml-20 mt-20\" />\n    <Notice visible=noticeVisible1 baseElementRef=pRef className=\"bg-info-700 p-2 rounded\">\n      <p className=\"text-white\"> {\"Some text there\"->React.string} </p>\n    </Notice>\n    <Notice visible=noticeVisible2 baseElementRef=noticeRef2 className=\"bg-info-700 p-2 rounded\">\n      <p className=\"text-white\"> {\"Some text there\"->React.string} </p>\n    </Notice>\n  </div>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-notice--example"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  example ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_RadioStory.bs.js

@@ -0,0 +1,121 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Ui_Radio from "../src/ui/Toolkit__Ui_Radio.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_RadioResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Radio.resi";
+
+var $$default = Storybook.CSF.make("Form/Radio", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function sample(param) {
+  return React.createElement("div", undefined, React.createElement("input", undefined), React.createElement(Toolkit__Ui_Radio.make, {
+                  value: "test1",
+                  children: "test1",
+                  name: "test"
+                }), React.createElement(Toolkit__Ui_Radio.make, {
+                  value: "test2",
+                  children: "test2",
+                  name: "test"
+                }), React.createElement(Toolkit__Ui_Radio.make, {
+                  value: "test3",
+                  children: "test3",
+                  name: "test"
+                }));
+}
+
+Storybook.CSF.addMeta(sample, "sample", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_RadioResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n  <Radio name=\"test\" value=\"test1\"> {\"test1\"->React.string} </Radio>\n  <Radio name=\"test\" value=\"test2\"> {\"test2\"->React.string} </Radio>\n  <Radio name=\"test\" value=\"test3\"> {\"test3\"->React.string} </Radio>\n</div>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-radio--sample"
+                          }));
+          })
+      }
+    }, undefined);
+
+function checked(param) {
+  return React.createElement(Toolkit__Ui_Radio.make, {
+              value: "test",
+              children: "children",
+              name: "test",
+              checked: true
+            });
+}
+
+Storybook.CSF.addMeta(checked, "checked", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_RadioResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<Radio name=\"test\" checked=true value=\"test\"> \"children\"->React.string </Radio>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-radio--checked"
+                          }));
+          })
+      }
+    }, undefined);
+
+function sizes(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Radio.make, {
+                  value: "test",
+                  children: "xs",
+                  name: "test",
+                  checked: true,
+                  className: "mb-4",
+                  size: "xs"
+                }), React.createElement(Toolkit__Ui_Radio.make, {
+                  value: "test",
+                  children: "sm",
+                  name: "test",
+                  checked: true,
+                  className: "mb-4",
+                  size: "sm"
+                }), React.createElement(Toolkit__Ui_Radio.make, {
+                  value: "test",
+                  children: "md",
+                  name: "test",
+                  checked: true,
+                  className: "mb-4",
+                  size: "md"
+                }), React.createElement(Toolkit__Ui_Radio.make, {
+                  value: "test",
+                  children: "lg",
+                  name: "test",
+                  checked: true,
+                  className: "mb-4",
+                  size: "lg"
+                }));
+}
+
+Storybook.CSF.addMeta(sizes, "sizes", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_RadioResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<>\n  <Radio\n    checked=true\n    name=\"test\"\n    value=\"test\"\n    size=#xs\n    className=\"mb-4\">\n    \"xs\"->React.string\n  </Radio>\n  <Radio\n    checked=true\n    name=\"test\"\n    value=\"test\"\n    size=#sm\n    className=\"mb-4\">\n    \"sm\"->React.string\n  </Radio>\n  <Radio\n    checked=true\n    name=\"test\"\n    value=\"test\"\n    size=#md\n    className=\"mb-4\">\n    \"md\"->React.string\n  </Radio>\n  <Radio\n    checked=true\n    name=\"test\"\n    value=\"test\"\n    size=#lg\n    className=\"mb-4\">\n    \"lg\"->React.string\n  </Radio>\n</>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-radio--sizes"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  sample ,
+  checked ,
+  sizes ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_ReferenceStory.bs.js

@@ -0,0 +1,42 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Ui_Reference from "../src/ui/Toolkit__Ui_Reference.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_ReferenceResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Reference.resi";
+
+var $$default = Storybook.CSF.make("Components/Reference", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function defaultExample(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Reference.make, {
+                  reference: "07868-9897687-0898"
+                }), React.createElement("div", {
+                  className: "w-48 mt-4"
+                }, React.createElement(Toolkit__Ui_Reference.make, {
+                      reference: "07868-9897687-0898"
+                    })));
+}
+
+Storybook.CSF.addMeta(defaultExample, "default", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_ReferenceResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n  <Reference reference=\"07868-9897687-0898\" />\n  <div className=\"w-48 mt-4\">\n    <Reference reference=\"07868-9897687-0898\" />\n  </div>\n</div>;\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-reference--default-example"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  defaultExample ,
+  
+}
+/* default Not a pure module */