@colisweb/rescript-toolkit 2.8.2 → 2.9.0-mobile

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

@@ -0,0 +1,113 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Ui_Checkbox from "../src/ui/Toolkit__Ui_Checkbox.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_CheckboxResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Checkbox.resi";
+
+var $$default = Storybook.CSF.make("Form/Checkbox", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function sample(param) {
+  return React.createElement(Toolkit__Ui_Checkbox.make, {
+              value: "test",
+              children: "children",
+              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_CheckboxResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<Checkbox name=\"test\" value=\"test\"> \"children\"->React.string </Checkbox>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-checkbox--sample"
+                          }));
+          })
+      }
+    }, undefined);
+
+function checked(param) {
+  return React.createElement(Toolkit__Ui_Checkbox.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_CheckboxResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<Checkbox name=\"test\" checked=true value=\"test\"> \"children\"->React.string </Checkbox>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-checkbox--checked"
+                          }));
+          })
+      }
+    }, undefined);
+
+function sizes(param) {
+  return React.createElement(React.Fragment, undefined, React.createElement(Toolkit__Ui_Checkbox.make, {
+                  value: "test",
+                  children: "xs",
+                  name: "test",
+                  checked: true,
+                  className: "mb-4",
+                  size: "xs"
+                }), React.createElement(Toolkit__Ui_Checkbox.make, {
+                  value: "test",
+                  children: "sm",
+                  name: "test",
+                  checked: true,
+                  className: "mb-4",
+                  size: "sm"
+                }), React.createElement(Toolkit__Ui_Checkbox.make, {
+                  value: "test",
+                  children: "md",
+                  name: "test",
+                  checked: true,
+                  className: "mb-4",
+                  size: "md"
+                }), React.createElement(Toolkit__Ui_Checkbox.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_CheckboxResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<>\n  <Checkbox\n    checked=true\n    name=\"test\"\n    value=\"test\"\n    size=#xs\n    className=\"mb-4\">\n    \"xs\"->React.string\n  </Checkbox>\n  <Checkbox\n    checked=true\n    name=\"test\"\n    value=\"test\"\n    size=#sm\n    className=\"mb-4\">\n    \"sm\"->React.string\n  </Checkbox>\n  <Checkbox\n    checked=true\n    name=\"test\"\n    value=\"test\"\n    size=#md\n    className=\"mb-4\">\n    \"md\"->React.string\n  </Checkbox>\n  <Checkbox\n    checked=true\n    name=\"test\"\n    value=\"test\"\n    size=#lg\n    className=\"mb-4\">\n    \"lg\"->React.string\n  </Checkbox>\n</>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-checkbox--sizes"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  sample ,
+  checked ,
+  sizes ,
+  
+}
+/* default Not a pure module */

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

@@ -0,0 +1,73 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Combobox from "@reach/combobox";
+import * as Blocks from "@storybook/addon-docs/blocks";
+
+var $$default = Storybook.CSF.make("Components/Combobox", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function example(param) {
+  return React.createElement("div", {
+              className: "w-60"
+            }, React.createElement(Combobox.Combobox, {
+                  onSelect: (function (value) {
+                      console.log(value);
+                      
+                    }),
+                  children: null
+                }, React.createElement(Combobox.ComboboxInput, {
+                      selectOnClick: true,
+                      onChange: (function ($$event) {
+                          console.log($$event.target.value);
+                          
+                        })
+                    }), React.createElement(Combobox.ComboboxPopover, {
+                      children: React.createElement(Combobox.ComboboxList, {
+                            children: null
+                          }, React.createElement(Combobox.ComboboxOption, {
+                                value: "test",
+                                children: React.createElement(Combobox.ComboboxOptionText, {})
+                              }), React.createElement(Combobox.ComboboxOption, {
+                                value: "test2",
+                                children: React.createElement(Combobox.ComboboxOptionText, {})
+                              }), React.createElement(Combobox.ComboboxOption, {
+                                value: "test4",
+                                children: React.createElement(Combobox.ComboboxOptionText, {})
+                              }), React.createElement(Combobox.ComboboxOption, {
+                                value: "really big return value example an address from google maps",
+                                children: React.createElement(Combobox.ComboboxOptionText, {})
+                              }), React.createElement(Combobox.ComboboxOption, {
+                                value: "toto",
+                                children: React.createElement(Combobox.ComboboxOptionText, {})
+                              }), React.createElement(Combobox.ComboboxOption, {
+                                value: "aaa",
+                                children: React.createElement(Combobox.ComboboxOptionText, {})
+                              }))
+                    })));
+}
+
+Storybook.CSF.addMeta(example, "example", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement("p", {
+                            className: "mb-4"
+                          }, "We use ", React.createElement(Storybook.Docs.Link.make, {
+                                href: "https://reach.tech/combobox",
+                                children: "@reach/combobox"
+                              }), " plugin"), React.createElement(Storybook.CodeBlock.make, {
+                            children: "\n<Combobox onSelect={value => Js.log(value)}>\n  <ComboboxInput\n    onChange={event => ReactEvent.Form.target(event)[\"value\"]->Js.log} selectOnClick=true\n  />\n  <ComboboxPopover>\n    <ComboboxList>\n      <ComboboxOption value=\"test\"> <ComboboxOptionText /> </ComboboxOption>\n      <ComboboxOption value=\"test2\"> <ComboboxOptionText /> </ComboboxOption>\n      <ComboboxOption value=\"test4\"> <ComboboxOptionText /> </ComboboxOption>\n      <ComboboxOption value=\"really big return value example an address from google maps\">\n        <ComboboxOptionText />\n      </ComboboxOption>\n      <ComboboxOption value=\"toto\"> <ComboboxOptionText /> </ComboboxOption>\n      <ComboboxOption value=\"aaa\"> <ComboboxOptionText /> </ComboboxOption>\n    </ComboboxList>\n  </ComboboxPopover>\n</Combobox>"
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-combobox--example"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  example ,
+  
+}
+/* default Not a pure module */

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

@@ -0,0 +1,78 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Ui_Dropdown from "../src/ui/Toolkit__Ui_Dropdown.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_DropdownResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Dropdown.resi";
+
+var $$default = Storybook.CSF.make("Components/Dropdown", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function example(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Dropdown.make, {
+                  label: "overflow",
+                  children: React.createElement("div", undefined, "Dropdown content !"),
+                  dropdownClassName: "w-60"
+                }), React.createElement("div", {
+                  className: "mt-10"
+                }, React.createElement(Toolkit__Ui_Dropdown.make, {
+                      label: "on the right",
+                      children: React.createElement("div", undefined, "Dropdown content !"),
+                      dropdownClassName: "w-60",
+                      position: "right"
+                    })), React.createElement("div", {
+                  className: "mt-10"
+                }, React.createElement(Toolkit__Ui_Dropdown.make, {
+                      label: "on the top",
+                      children: React.createElement("div", undefined, "Dropdown content !"),
+                      dropdownClassName: "w-60",
+                      position: "top"
+                    })), React.createElement("div", {
+                  className: "mt-10"
+                }, React.createElement(Toolkit__Ui_Dropdown.make, {
+                      label: "should be on the left but out of screen",
+                      children: React.createElement("div", undefined, "Dropdown content !"),
+                      dropdownClassName: "w-60",
+                      position: "left"
+                    })), React.createElement("div", {
+                  className: "mt-8 w-60 mx-auto"
+                }, React.createElement(Toolkit__Ui_Dropdown.make, {
+                      label: "Toggle me",
+                      children: React.createElement("div", undefined, "Dropdown content with long content !"),
+                      dropdownClassName: "w-[300px]",
+                      buttonColor: "primary",
+                      buttonVariant: "outline"
+                    }), React.createElement("div", {
+                      className: "mt-10"
+                    }, React.createElement(Toolkit__Ui_Dropdown.make, {
+                          label: "Toggle me",
+                          children: React.createElement("div", undefined, "Dropdown content with long content !"),
+                          dropdownClassName: "w-[300px]",
+                          buttonColor: "primary",
+                          buttonVariant: "outline",
+                          position: "right"
+                        }))));
+}
+
+Storybook.CSF.addMeta(example, "example", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_DropdownResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n    <Toolkit__Ui_Dropdown\n    className=\"p-4 shadow rounded\"\n    renderButton={disclosure => {\n      <Button onClick={_ => disclosure.toggle()}> {\"Toggle me\"->React.string} </Button>\n    }}>\n    <div> {\"Dropdown content !\"->React.string} </div>\n  </Toolkit__Ui_Dropdown>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-dropdown--example"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  example ,
+  
+}
+/* default Not a pure module */

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

@@ -0,0 +1,105 @@
+
+
+import * as Curry from "../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Caml_option from "../../../node_modules/rescript/lib/es6/caml_option.js";
+import * as React$1 from "@storybook/react";
+import * as Js_null_undefined from "../../../node_modules/rescript/lib/es6/js_null_undefined.js";
+import * as Toolkit__Ui_Label from "../src/ui/Toolkit__Ui_Label.bs.js";
+import * as AddonKnobs from "@storybook/addon-knobs";
+import * as Toolkit__Ui_TextareaInput from "../src/ui/Toolkit__Ui_TextareaInput.bs.js";
+import * as ReactDayPicker from "@colisweb/react-day-picker";
+
+var _module = module;
+
+React$1.storiesOf("Form/TextareaInput", _module).addDecorator(AddonKnobs.withKnobs).add("default", (function (param) {
+          return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Label.make, {
+                          htmlFor: "test",
+                          optionalMessage: "Optional",
+                          children: "Label"
+                        }), React.createElement(Toolkit__Ui_TextareaInput.make, {
+                          id: "test",
+                          placeholder: "Test"
+                        }));
+        })).add("with error", (function (param) {
+        return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Label.make, {
+                        htmlFor: "test",
+                        optionalMessage: "Optional",
+                        children: "Label"
+                      }), React.createElement(Toolkit__Ui_TextareaInput.make, {
+                        id: "test",
+                        placeholder: "Test",
+                        isInvalid: true
+                      }));
+      }));
+
+function Toolkit__UI_FormStory$DayPickerExample(Props) {
+  var match = React.useState(function () {
+        
+      });
+  var setActivityPeriodStart = match[1];
+  var activityPeriodStart = match[0];
+  var match$1 = React.useState(function () {
+        
+      });
+  var setActivityPeriodEnd = match$1[1];
+  var activityPeriodEnd = match$1[0];
+  var range_from = Js_null_undefined.fromOption(activityPeriodStart);
+  var range_to = Js_null_undefined.fromOption(activityPeriodEnd);
+  var range = {
+    from: range_from,
+    to: range_to
+  };
+  var modifiers = React.useMemo((function () {
+          return {
+                  start: range_from,
+                  end: range_to
+                };
+        }), [
+        range_from,
+        range_to
+      ]);
+  return React.createElement(ReactDayPicker.DayPicker, {
+              onDayClick: (function (from) {
+                  var range = ReactDayPicker.DateUtils.addDayToRange(from, {
+                        from: Js_null_undefined.fromOption(activityPeriodStart),
+                        to: Js_null_undefined.fromOption(activityPeriodEnd)
+                      });
+                  Curry._1(setActivityPeriodStart, (function (param) {
+                          return Caml_option.nullable_to_opt(range.from);
+                        }));
+                  return Curry._1(setActivityPeriodEnd, (function (param) {
+                                return Caml_option.nullable_to_opt(range.to);
+                              }));
+                }),
+              selectedDays: [
+                activityPeriodStart,
+                range
+              ],
+              modifiers: modifiers,
+              className: "input-date-range",
+              firstDayOfWeek: 1,
+              numberOfMonths: 2,
+              showOutsideDays: true
+            });
+}
+
+var DayPickerExample = {
+  make: Toolkit__UI_FormStory$DayPickerExample
+};
+
+React$1.storiesOf("Form/react-day-picker", _module).addDecorator(AddonKnobs.withKnobs).add("DayPicker", (function (param) {
+          return React.createElement(Toolkit__UI_FormStory$DayPickerExample, {});
+        })).add("DayPickerInput", (function (param) {
+        return React.createElement("div", undefined, React.createElement(ReactDayPicker.DayPickerInput, {
+                        firstDayOfWeek: 1,
+                        showOutsideDays: true
+                      }));
+      }));
+
+export {
+  _module ,
+  DayPickerExample ,
+  
+}
+/* _module Not a pure module */

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

@@ -0,0 +1,231 @@
+
+
+import * as React from "react";
+import * as Js_dict from "../../../node_modules/rescript/lib/es6/js_dict.js";
+import * as Storybook from "./Storybook.bs.js";
+import * as Belt_Array from "../../../node_modules/rescript/lib/es6/belt_Array.js";
+import * as Md from "react-icons/md";
+import * as Toolkit__Ui_IconButton from "../src/ui/Toolkit__Ui_IconButton.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+
+var $$default = Storybook.CSF.make("Components/IconButton", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function defaultPalette(param) {
+  var colors = Js_dict.fromArray([
+        [
+          "primary",
+          "primary"
+        ],
+        [
+          "black",
+          "black"
+        ],
+        [
+          "white",
+          "white"
+        ],
+        [
+          "gray",
+          "gray"
+        ],
+        [
+          "success",
+          "success"
+        ],
+        [
+          "info",
+          "info"
+        ],
+        [
+          "danger",
+          "danger"
+        ],
+        [
+          "warning",
+          "warning"
+        ],
+        [
+          "neutral",
+          "neutral"
+        ],
+        [
+          "neutralLight",
+          "neutralLight"
+        ]
+      ]);
+  var sizes = Js_dict.fromArray([
+        [
+          "xs",
+          "xs"
+        ],
+        [
+          "sm",
+          "sm"
+        ],
+        [
+          "md",
+          "md"
+        ],
+        [
+          "lg",
+          "lg"
+        ]
+      ]);
+  return React.createElement("div", undefined, Belt_Array.mapWithIndex(Js_dict.entries(colors), (function (i, param) {
+                    var color = param[1];
+                    var colorText = param[0];
+                    return React.createElement("div", {
+                                key: String(i) + colorText,
+                                className: "flex flex-row flex-col-gap-4 mb-4 items-center"
+                              }, React.createElement("strong", {
+                                    className: "w-40"
+                                  }, colorText), React.createElement("div", {
+                                    className: "flex flex-col"
+                                  }, Belt_Array.mapWithIndex([
+                                        false,
+                                        true
+                                      ], (function (j, disabled) {
+                                          return React.createElement("div", {
+                                                      className: "flex items-center flex-col-gap-1 mb-2"
+                                                    }, Belt_Array.mapWithIndex(Js_dict.entries(sizes), (function (k, param) {
+                                                            return React.createElement("div", {
+                                                                        key: String((i + j | 0) + k | 0) + (colorText + param[0])
+                                                                      }, React.createElement(Toolkit__Ui_IconButton.make, {
+                                                                            size: param[1],
+                                                                            color: color,
+                                                                            disabled: disabled,
+                                                                            icon: React.createElement(Md.MdHome, {})
+                                                                          }));
+                                                          })));
+                                        }))));
+                  })));
+}
+
+Storybook.CSF.addMeta(defaultPalette, "default palette", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Blocks.Title, {}), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n             <IconButton\n  color=#primary\n  icon={<BsReactIcons.MdHome />}\n/>\n          "
+                          }), React.createElement(Toolkit__Ui_IconButton.make, {
+                            color: "primary",
+                            icon: React.createElement(Md.MdHome, {})
+                          }));
+          })
+      }
+    }, undefined);
+
+function outlinePalette(param) {
+  var colors = Js_dict.fromArray([
+        [
+          "primary",
+          "primary"
+        ],
+        [
+          "black",
+          "black"
+        ],
+        [
+          "white",
+          "white"
+        ],
+        [
+          "gray",
+          "gray"
+        ],
+        [
+          "success",
+          "success"
+        ],
+        [
+          "info",
+          "info"
+        ],
+        [
+          "danger",
+          "danger"
+        ],
+        [
+          "warning",
+          "warning"
+        ],
+        [
+          "neutral",
+          "neutral"
+        ],
+        [
+          "neutralLight",
+          "neutralLight"
+        ]
+      ]);
+  var sizes = Js_dict.fromArray([
+        [
+          "xs",
+          "xs"
+        ],
+        [
+          "sm",
+          "sm"
+        ],
+        [
+          "md",
+          "md"
+        ],
+        [
+          "lg",
+          "lg"
+        ]
+      ]);
+  return React.createElement("div", undefined, Belt_Array.mapWithIndex(Js_dict.entries(colors), (function (i, param) {
+                    var color = param[1];
+                    var colorText = param[0];
+                    return React.createElement("div", {
+                                key: String(i) + colorText,
+                                className: "flex flex-row flex-col-gap-4 mb-4 items-center"
+                              }, React.createElement("strong", {
+                                    className: "w-40"
+                                  }, colorText), React.createElement("div", {
+                                    className: "flex flex-col"
+                                  }, Belt_Array.mapWithIndex([
+                                        false,
+                                        true
+                                      ], (function (j, disabled) {
+                                          return React.createElement("div", {
+                                                      className: "flex items-center flex-col-gap-1 mb-2"
+                                                    }, Belt_Array.mapWithIndex(Js_dict.entries(sizes), (function (k, param) {
+                                                            return React.createElement("div", {
+                                                                        key: String((i + j | 0) + k | 0) + (colorText + param[0])
+                                                                      }, React.createElement(Toolkit__Ui_IconButton.make, {
+                                                                            size: param[1],
+                                                                            color: color,
+                                                                            disabled: disabled,
+                                                                            icon: React.createElement(Md.MdHome, {})
+                                                                          }));
+                                                          })));
+                                        }))));
+                  })));
+}
+
+Storybook.CSF.addMeta(outlinePalette, "outline palette", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Blocks.Title, {}), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n            <IconButton\n  color=#primary\n  variant=#outline\n  icon={<BsReactIcons.MdHome />}\n/>\n          "
+                          }), React.createElement(Toolkit__Ui_IconButton.make, {
+                            color: "primary",
+                            variant: "outline",
+                            icon: React.createElement(Md.MdHome, {})
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  defaultPalette ,
+  outlinePalette ,
+  
+}
+/* default Not a pure module */

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

@@ -0,0 +1,43 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Ui_Label from "../src/ui/Toolkit__Ui_Label.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_LabelResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Label.resi";
+
+var $$default = Storybook.CSF.make("Form/Label", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function sample(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Label.make, {
+                  htmlFor: "test",
+                  children: "Label"
+                }), React.createElement(Toolkit__Ui_Label.make, {
+                  htmlFor: "test",
+                  optionalMessage: "Optional",
+                  children: "Label"
+                }));
+}
+
+Storybook.CSF.addMeta(sample, "sample", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_LabelResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n  <Label htmlFor=\"test\"> \"Label\"->React.string </Label>\n  <Label htmlFor=\"test\" optionalMessage={\"Optional\"->React.string}>\n    \"Label\"->React.string\n  </Label>\n</div>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-label--sample"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  sample ,
+  
+}
+/* default Not a pure module */