@colisweb/rescript-toolkit 2.8.2 → 2.9.0-mobile

package/lib/es6_global/src/ui/Toolkit__Ui_Modal.bs.js

@@ -0,0 +1,145 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as Css from "../../../../node_modules/bs-css-emotion/lib/es6_global/src/Css.bs.js";
+import * as Curry from "../../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Belt_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js";
+import * as Dialog from "@reach/dialog";
+import * as ReachUi_Dialog from "../vendors/reach-ui/ReachUi_Dialog.bs.js";
+import * as Md from "react-icons/md";
+
+function sizeRule(size) {
+  var value = typeof size === "object" ? size.VAL : (
+      size === "md" ? 768 : (
+          size === "sm" ? 600 : (
+              size === "xs" ? 480 : 900
+            )
+        )
+    );
+  return Curry._1(Css.style, {
+              hd: Css.width(Css.pct(100)),
+              tl: {
+                hd: Css.important(Css.maxWidth(Css.px(value))),
+                tl: /* [] */0
+              }
+            });
+}
+
+function modalStyle(type_) {
+  if (typeof type_ !== "object") {
+    return "rounded";
+  }
+  var color = type_.VAL;
+  if (color === "primary") {
+    return "rounded-lg border-2 border-primary-500";
+  } else if (color === "danger") {
+    return "rounded-lg border-4 border-danger-700";
+  } else if (color === "success") {
+    return "rounded-lg border-2 border-success-500";
+  } else {
+    return "rounded-lg";
+  }
+}
+
+function headerStyle(type_) {
+  if (typeof type_ !== "object") {
+    return "";
+  }
+  var color = type_.VAL;
+  if (color === "primary") {
+    return "bg-primary-500 rounded-t";
+  } else if (color === "danger") {
+    return "bg-danger-700";
+  } else if (color === "success") {
+    return "bg-success-500 rounded-t";
+  } else {
+    return "bg-neutral-700 rounded-t-lg";
+  }
+}
+
+function titleStyle(type_) {
+  if (typeof type_ === "object") {
+    return "text-white";
+  } else {
+    return "w-full border-b border-info-500";
+  }
+}
+
+function closeIconStyle(type_) {
+  if (typeof type_ === "object") {
+    return "hover:bg-white hover:text-black text-white";
+  } else {
+    return "hover:bg-gray-200";
+  }
+}
+
+Curry._2(Css.$$global, "[data-reach-dialog-overlay]", {
+      hd: Css.important(Css.background(Css.rgba(74, 115, 120, {
+                    NAME: "num",
+                    VAL: 0.5
+                  }))),
+      tl: /* [] */0
+    });
+
+Curry._2(Css.$$global, "[data-reach-dialog-content]", {
+      hd: Css.important(Css.background(Css.transparent)),
+      tl: /* [] */0
+    });
+
+function Toolkit__Ui_Modal(Props) {
+  var isVisible = Props.isVisible;
+  var title = Props.title;
+  var body = Props.body;
+  var hide = Props.hide;
+  var sizeOpt = Props.size;
+  var type_Opt = Props.type_;
+  var footer = Props.footer;
+  var ariaLabelOpt = Props.ariaLabel;
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var type_ = type_Opt !== undefined ? type_Opt : "default";
+  var ariaLabel = ariaLabelOpt !== undefined ? ariaLabelOpt : "";
+  return React.createElement(Dialog.Dialog, ReachUi_Dialog.Dialog.makeProps(isVisible, hide, ariaLabel, undefined, undefined, sizeRule(size), React.createElement("div", {
+                      className: Cx.cx([
+                            "bg-white pb-5 z-40 shadow-lg w-full",
+                            modalStyle(type_)
+                          ])
+                    }, React.createElement("header", {
+                          className: Cx.cx([
+                                "flex items-center justify-between mb-4 pl-5 pr-3 pt-2 pb-1",
+                                headerStyle(type_)
+                              ])
+                        }, Belt_Option.mapWithDefault(title, null, (function (title) {
+                                return React.createElement("h2", {
+                                            className: Cx.cx([
+                                                  "text-2xl pb-1 font-display",
+                                                  titleStyle(type_)
+                                                ])
+                                          }, title);
+                              })), React.createElement("button", {
+                              className: Cx.cx([
+                                    Belt_Option.isSome(title) ? "ml-4" : "ml-auto",
+                                    "p-1 rounded-full modal-close-button",
+                                    closeIconStyle(type_)
+                                  ]),
+                              onClick: (function (param) {
+                                  return Curry._1(hide, undefined);
+                                })
+                            }, React.createElement(Md.MdClose, {
+                                  size: 28
+                                }))), React.createElement("div", {
+                          className: "px-1 sm:px-2 md:px-5"
+                        }, body), Belt_Option.mapWithDefault(footer, null, (function (footer) {
+                            return React.createElement("div", {
+                                        className: "flex flex-row justify-end mt-6 pr-4"
+                                      }, footer);
+                          }))), undefined));
+}
+
+var make = Toolkit__Ui_Modal;
+
+export {
+  make ,
+  
+}
+/*  Not a pure module */

package/lib/es6_global/src/ui/Toolkit__Ui_MultiSelect.bs.js

@@ -0,0 +1,157 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as Curry from "../../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Belt_Array from "../../../../node_modules/rescript/lib/es6/belt_Array.js";
+import * as Belt_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js";
+import * as Toolkit__Hooks from "../hooks/Toolkit__Hooks.bs.js";
+import * as Fa from "react-icons/fa";
+import * as Toolkit__Ui_Checkbox from "./Toolkit__Ui_Checkbox.bs.js";
+import * as Toolkit__Ui_Dropdown from "./Toolkit__Ui_Dropdown.bs.js";
+import * as Toolkit__Ui_TextInput from "./Toolkit__Ui_TextInput.bs.js";
+
+function Toolkit__Ui_MultiSelect(Props) {
+  var options = Props.options;
+  var placeholder = Props.placeholder;
+  var buttonClassNameOpt = Props.buttonClassName;
+  var dropdownClassNameOpt = Props.dropdownClassName;
+  var itemClassNameOpt = Props.itemClassName;
+  var searchPlaceholder = Props.searchPlaceholder;
+  var allowFilterOpt = Props.allowFilter;
+  var defaultValueOpt = Props.defaultValue;
+  var onChange = Props.onChange;
+  var buttonClassName = buttonClassNameOpt !== undefined ? buttonClassNameOpt : "";
+  var dropdownClassName = dropdownClassNameOpt !== undefined ? dropdownClassNameOpt : "";
+  var itemClassName = itemClassNameOpt !== undefined ? itemClassNameOpt : "";
+  var allowFilter = allowFilterOpt !== undefined ? allowFilterOpt : true;
+  var defaultValue = defaultValueOpt !== undefined ? defaultValueOpt : [];
+  var match = React.useState(function () {
+        return defaultValue;
+      });
+  var setSelectedOptions = match[1];
+  var selectedOptions = match[0];
+  var previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue);
+  var match$1 = React.useState(function () {
+        return "";
+      });
+  var setSearch = match$1[1];
+  var search = match$1[0];
+  React.useEffect((function () {
+          var prev = Belt_Array.map(Belt_Option.getWithDefault(previousDefaultValue, []), (function (param) {
+                    return param.value;
+                  })).join("");
+          var $$new = Belt_Array.map(defaultValue, (function (param) {
+                    return param.value;
+                  })).join("");
+          if (prev !== $$new) {
+            Curry._1(setSelectedOptions, (function (param) {
+                    return defaultValue;
+                  }));
+          }
+          
+        }), [
+        previousDefaultValue,
+        defaultValue
+      ]);
+  var tmp;
+  if (allowFilter) {
+    var tmp$1 = {
+      id: "search",
+      onChange: (function ($$event) {
+          var target = $$event.currentTarget;
+          return Curry._1(setSearch, (function (param) {
+                        return target.value.toLowerCase();
+                      }));
+        })
+    };
+    if (searchPlaceholder !== undefined) {
+      tmp$1.placeholder = searchPlaceholder;
+    }
+    tmp = React.createElement("div", {
+          className: "mb-3"
+        }, React.createElement(Toolkit__Ui_TextInput.make, tmp$1));
+  } else {
+    tmp = null;
+  }
+  return React.createElement(Toolkit__Ui_Dropdown.make, {
+              label: selectedOptions.length !== 0 ? React.createElement("div", {
+                      className: "table table-fixed w-full",
+                      title: Belt_Array.map(selectedOptions, (function (param) {
+                                return param.label;
+                              })).join(", ")
+                    }, React.createElement("span", {
+                          className: "table-cell truncate text-left"
+                        }, Belt_Array.map(selectedOptions, (function (param) {
+                                  return param.label;
+                                })).join(", "))) : React.createElement("p", {
+                      className: "flex flex-row gap-2 w-full items-center"
+                    }, React.createElement("span", {
+                          className: "ml-1"
+                        }, placeholder), React.createElement("span", {
+                          className: "absolute inset-y-0 right-0 flex items-center px-2"
+                        }, React.createElement(Fa.FaAngleDown, {}))),
+              children: React.createElement("div", {
+                    className: "py-2 pl-2 pr-1"
+                  }, tmp, Belt_Array.map(Belt_Array.keep(options, (function (param) {
+                              if (search === "") {
+                                return true;
+                              } else {
+                                return param.label.toLowerCase().includes(search);
+                              }
+                            })), (function (item) {
+                          var value = item.value;
+                          var label = item.label;
+                          return React.createElement("div", {
+                                      key: label,
+                                      className: Cx.cx([
+                                            "flex flex-row items-center gap-2 mt-3 pt-3 text-left",
+                                            itemClassName
+                                          ])
+                                    }, React.createElement(Toolkit__Ui_Checkbox.make, {
+                                          value: value,
+                                          children: item.itemLabel,
+                                          onChange: (function (checked, _value) {
+                                              if (checked) {
+                                                return Curry._1(setSelectedOptions, (function (selectedOptions) {
+                                                              var value = Belt_Array.concat(selectedOptions, [item]);
+                                                              Curry._1(onChange, value);
+                                                              return value;
+                                                            }));
+                                              } else {
+                                                return Curry._1(setSelectedOptions, (function (selectedOptions) {
+                                                              var value$1 = Belt_Array.keep(selectedOptions, (function (selectedItem) {
+                                                                      if (selectedItem.value !== value) {
+                                                                        return selectedItem.label !== label;
+                                                                      } else {
+                                                                        return false;
+                                                                      }
+                                                                    }));
+                                                              Curry._1(onChange, value$1);
+                                                              return value$1;
+                                                            }));
+                                              }
+                                            }),
+                                          checked: Belt_Array.some(selectedOptions, (function (item) {
+                                                  if (item.label === label) {
+                                                    return item.value === value;
+                                                  } else {
+                                                    return false;
+                                                  }
+                                                })),
+                                          className: "w-full flex-shrink-0"
+                                        }));
+                        }))),
+              dropdownClassName: dropdownClassName,
+              buttonClassName: buttonClassName,
+              position: "bottom"
+            });
+}
+
+var make = Toolkit__Ui_MultiSelect;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

package/lib/es6_global/src/ui/Toolkit__Ui_NativeDatePicker.bs.js

@@ -0,0 +1,56 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as Curry from "../../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as DateFns from "date-fns";
+import * as Belt_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js";
+import * as Caml_option from "../../../../node_modules/rescript/lib/es6/caml_option.js";
+
+function Toolkit__Ui_NativeDatePicker(Props) {
+  var onChange = Props.onChange;
+  var value = Props.value;
+  var id = Props.id;
+  var disabledOpt = Props.disabled;
+  var isInvalidOpt = Props.isInvalid;
+  var classNameOpt = Props.className;
+  var disabled = disabledOpt !== undefined ? disabledOpt : false;
+  var isInvalid = isInvalidOpt !== undefined ? isInvalidOpt : false;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var tmp = {
+    "aria-disabled": disabled,
+    className: Cx.cx([
+          "h-[38px] border rounded transition-all duration-150 ease-in-out py-2 pl-4 pr-8 appearance-none w-full bg-white text-gray-800 leading-tight focus:outline-none focus:shadow-none focus:border-info-500 disabled:bg-gray-200 disabled:text-gray-700 focus:z30 relative border-gray-300",
+          isInvalid ? "border-danger-500 shadow-danger-500" : "border-gray-300",
+          className
+        ]),
+    disabled: disabled,
+    type: "date",
+    onChange: (function ($$event) {
+        var value = $$event.target.value;
+        return Curry._1(onChange, Belt_Option.keep(Caml_option.some(new Date(value)), (function (prim) {
+                          return DateFns.isValid(prim);
+                        })));
+      })
+  };
+  if (id !== undefined) {
+    tmp.id = Caml_option.valFromOption(id);
+  }
+  var tmp$1 = Belt_Option.map(value, (function (d) {
+          return DateFns.format(d, "yyyy-MM-dd");
+        }));
+  if (tmp$1 !== undefined) {
+    tmp.value = Caml_option.valFromOption(tmp$1);
+  }
+  return React.createElement("div", {
+              className: "relative"
+            }, React.createElement("input", tmp));
+}
+
+var make = Toolkit__Ui_NativeDatePicker;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

package/lib/es6_global/src/ui/Toolkit__Ui_Notice.bs.js

@@ -0,0 +1,145 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as Curry from "../../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Browser from "../vendors/Browser.bs.js";
+import * as Belt_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js";
+import * as Caml_option from "../../../../node_modules/rescript/lib/es6/caml_option.js";
+
+function Toolkit__Ui_Notice(Props) {
+  var baseElementRef = Props.baseElementRef;
+  var classNameOpt = Props.className;
+  var visible = Props.visible;
+  var children = Props.children;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var match = React.useState(function () {
+        return false;
+      });
+  var setVisibility = match[1];
+  var visibility = match[0];
+  var match$1 = React.useState(function () {
+        return "";
+      });
+  var setCustomClassName = match$1[1];
+  var match$2 = React.useState(function () {
+        return false;
+      });
+  var setElementReady = match$2[1];
+  var elementReady = match$2[0];
+  var match$3 = React.useState(function () {
+        
+      });
+  var setStyle = match$3[1];
+  var noticeRef = React.useRef(null);
+  React.useEffect((function () {
+          var timeoutId = {
+            contents: undefined
+          };
+          Belt_Option.forEach(Caml_option.nullable_to_opt(baseElementRef.current), (function (dom) {
+                  var match = Browser.DomElement.getBoundingClientRect(dom);
+                  var height = match.height;
+                  var width = match.width;
+                  var y = match.y;
+                  var x = match.x;
+                  if (visible) {
+                    Curry._1(setVisibility, (function (param) {
+                            return true;
+                          }));
+                    return Curry._1(setStyle, (function (param) {
+                                  Curry._1(setElementReady, (function (param) {
+                                          return true;
+                                        }));
+                                  return {
+                                          left: (x + width / 2).toString() + "px",
+                                          top: (y + height).toString() + "px"
+                                        };
+                                }));
+                  } else {
+                    timeoutId.contents = Caml_option.some(setTimeout((function (param) {
+                                Curry._1(setElementReady, (function (param) {
+                                        return false;
+                                      }));
+                                return Curry._1(setVisibility, (function (param) {
+                                              return visible;
+                                            }));
+                              }), 500));
+                    return Curry._1(setCustomClassName, (function (param) {
+                                  return "opacity-0";
+                                }));
+                  }
+                }));
+          return (function (param) {
+                    return Belt_Option.forEach(timeoutId.contents, (function (prim) {
+                                  clearTimeout(prim);
+                                  
+                                }));
+                  });
+        }), [
+        baseElementRef,
+        visible
+      ]);
+  React.useEffect((function () {
+          var timeoutId = {
+            contents: undefined
+          };
+          if (elementReady) {
+            timeoutId.contents = Caml_option.some(setTimeout((function (param) {
+                        return Curry._1(setCustomClassName, (function (param) {
+                                      return "!opacity-100";
+                                    }));
+                      }), 150));
+          }
+          return (function (param) {
+                    return Belt_Option.forEach(timeoutId.contents, (function (prim) {
+                                  clearTimeout(prim);
+                                  
+                                }));
+                  });
+        }), [elementReady]);
+  React.useEffect((function () {
+          if (visibility) {
+            Belt_Option.forEach(Caml_option.nullable_to_opt(noticeRef.current), (function (dom) {
+                    var match = Browser.DomElement.getBoundingClientRect(dom);
+                    var right = match.right;
+                    var left = match.left;
+                    return Curry._1(setStyle, (function (style) {
+                                  return Belt_Option.map(style, (function (style) {
+                                                return Object.assign({}, style, {
+                                                            marginRight: right < 0 ? (-right).toString() + "px" : "",
+                                                            marginLeft: left < 0 ? (-left).toString() + "px" : ""
+                                                          });
+                                              }));
+                                }));
+                  }));
+          }
+          
+        }), [
+        visibility,
+        noticeRef
+      ]);
+  if (!visibility) {
+    return null;
+  }
+  var tmp = {
+    ref: noticeRef,
+    className: Cx.cx([
+          "absolute rounded mt-2 p-2 transform -translate-x-1/2 z-30 opacity-0 transition-all ease-in-out duration-300",
+          className,
+          match$1[0]
+        ])
+  };
+  var tmp$1 = match$3[0];
+  if (tmp$1 !== undefined) {
+    tmp.style = Caml_option.valFromOption(tmp$1);
+  }
+  return React.createElement("div", tmp, children);
+}
+
+var make = Toolkit__Ui_Notice;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

package/lib/es6_global/src/ui/Toolkit__Ui_ProgressBar.bs.js

@@ -0,0 +1,39 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as Css from "../../../../node_modules/bs-css-emotion/lib/es6_global/src/Css.bs.js";
+import * as Curry from "../../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+
+function Toolkit__Ui_ProgressBar(Props) {
+  var progression = Props.progression;
+  var colorOpt = Props.color;
+  var color = colorOpt !== undefined ? colorOpt : "success";
+  return React.createElement("div", {
+              className: "flex flex-row w-full h-2 bg-neutral-300 rounded-lg"
+            }, React.createElement("div", {
+                  className: Cx.cx([
+                        "h-full rounded-lg",
+                        color === "warning" ? "bg-warning-500" : (
+                            color === "danger" ? "bg-danger-500" : (
+                                color === "success" ? "bg-success-500" : "bg-info-500"
+                              )
+                          ),
+                        Curry._1(Css.style, {
+                              hd: Css.width({
+                                    NAME: "percent",
+                                    VAL: progression
+                                  }),
+                              tl: /* [] */0
+                            })
+                      ])
+                }));
+}
+
+var make = Toolkit__Ui_ProgressBar;
+
+export {
+  make ,
+  
+}
+/* Css Not a pure module */

package/lib/es6_global/src/ui/Toolkit__Ui_Radio.bs.js

@@ -0,0 +1,110 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as Css from "../../../../node_modules/bs-css-emotion/lib/es6_global/src/Css.bs.js";
+import * as Curry from "../../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Belt_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js";
+import * as Caml_option from "../../../../node_modules/rescript/lib/es6/caml_option.js";
+import * as Go from "react-icons/go";
+
+var label = Curry._1(Css.style, {
+      hd: Css.selector("& > input + .checkmark", {
+            hd: Css.backgroundColor(Css.hex("fff")),
+            tl: /* [] */0
+          }),
+      tl: {
+        hd: Css.selector("& > input:focus + .checkmark", {
+              hd: Css.unsafe("boxShadow", "0px 0px 4px #15CBE3"),
+              tl: /* [] */0
+            }),
+        tl: {
+          hd: Css.selector("& > input:checked + .checkmark", {
+                hd: Css.backgroundColor(Css.hex("15cbe3")),
+                tl: {
+                  hd: Css.borderColor(Css.hex("15cbe3")),
+                  tl: /* [] */0
+                }
+              }),
+          tl: {
+            hd: Css.selector("& > input + .checkmark > *", {
+                  hd: Css.opacity(0),
+                  tl: /* [] */0
+                }),
+            tl: {
+              hd: Css.selector("& > input:checked + .checkmark > *", {
+                    hd: Css.opacity(1),
+                    tl: /* [] */0
+                  }),
+              tl: /* [] */0
+            }
+          }
+        }
+      }
+    });
+
+function Toolkit__Ui_Radio(Props) {
+  var value = Props.value;
+  var children = Props.children;
+  var disabled = Props.disabled;
+  var onChange = Props.onChange;
+  var name = Props.name;
+  var checked = Props.checked;
+  var classNameOpt = Props.className;
+  var sizeOpt = Props.size;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var size = sizeOpt !== undefined ? sizeOpt : "sm";
+  var tmp = {
+    className: "opacity-0 w-0 h-0",
+    type: "radio",
+    value: value,
+    onChange: (function ($$event) {
+        var target = $$event.target;
+        var value = target.value;
+        return Belt_Option.forEach(onChange, (function (fn) {
+                      return Curry._1(fn, value);
+                    }));
+      })
+  };
+  if (checked !== undefined) {
+    tmp.checked = Caml_option.valFromOption(checked);
+  }
+  if (disabled !== undefined) {
+    tmp.disabled = Caml_option.valFromOption(disabled);
+  }
+  if (name !== undefined) {
+    tmp.name = Caml_option.valFromOption(name);
+  }
+  return React.createElement("label", {
+              className: Cx.cx([
+                    label,
+                    "flex items-center",
+                    Belt_Option.getWithDefault(disabled, false) ? "cursor-not-allowed opacity-75 text-gray-600" : "cursor-pointer",
+                    className
+                  ])
+            }, React.createElement("input", tmp), React.createElement("span", {
+                  className: Cx.cx([
+                        "checkmark rounded-full border text-white mr-3 border-neutral-300 transform transition-all ease-in-out flex items-center justify-center",
+                        size === "md" ? "w-8 h-8" : (
+                            size === "sm" ? "w-6 h-6" : (
+                                size === "xs" ? "w-4 h-4" : "w-10 h-10"
+                              )
+                          )
+                      ])
+                }, React.createElement(Go.GoPrimitiveDot, {
+                      size: size === "md" ? 24 : (
+                          size === "sm" ? 16 : (
+                              size === "xs" ? 12 : 32
+                            )
+                        ),
+                      className: "transform transition-all ease-in-out"
+                    })), Belt_Option.getWithDefault(children, null));
+}
+
+var make = Toolkit__Ui_Radio;
+
+export {
+  make ,
+  
+}
+/* label Not a pure module */