@colisweb/rescript-toolkit 2.8.2 → 2.9.0-mobile

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

@@ -0,0 +1,105 @@
+
+
+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 Fa from "react-icons/fa";
+
+var label = Curry._1(Css.style, {
+      hd: Css.selector("& > input + .checkmark", {
+            hd: Css.backgroundColor(Css.hex("fff")),
+            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_Checkbox(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: "hidden",
+    type: "checkbox",
+    value: value,
+    onChange: (function ($$event) {
+        var target = $$event.target;
+        var checked = target.checked;
+        var value = target.value;
+        return Belt_Option.forEach(onChange, (function (fn) {
+                      return Curry._2(fn, checked, 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 border text-white mr-3 border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
+                        size === "md" ? "w-8 h-8" : (
+                            size === "sm" ? "w-6 h-6" : (
+                                size === "xs" ? "w-4 h-4" : "w-10 h-10"
+                              )
+                          )
+                      ])
+                }, React.createElement(Fa.FaCheck, {
+                      size: size === "md" ? 18 : (
+                          size === "sm" ? 16 : (
+                              size === "xs" ? 14 : 24
+                            )
+                        ),
+                      className: "transform transition-all ease-in-out"
+                    })), Belt_Option.getWithDefault(children, null));
+}
+
+var make = Toolkit__Ui_Checkbox;
+
+export {
+  make ,
+  
+}
+/* label Not a pure module */

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

@@ -0,0 +1,132 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.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 ReactDatepicker from "react-datepicker";
+import ReactDatepicker$1 from "react-datepicker";
+import Fr from "date-fns/locale/fr";
+
+ReactDatepicker.registerLocale("fr", Fr);
+
+var DatePicker = {};
+
+var make = React.forwardRef(function (Props, ref_) {
+      var id = Props.id;
+      var name = Props.name;
+      var value = Props.value;
+      var placeholder = Props.placeholder;
+      var autoFocus = Props.autoFocus;
+      var disabled = Props.disabled;
+      var required = Props.required;
+      var showTimeSelect = Props.showTimeSelect;
+      var showYearDropdown = Props.showYearDropdown;
+      var startDate = Props.startDate;
+      var inline = Props.inline;
+      var endDate = Props.endDate;
+      var selectsStart = Props.selectsStart;
+      var selectsEnd = Props.selectsEnd;
+      var minDate = Props.minDate;
+      var minTime = Props.minTime;
+      var maxTime = Props.maxTime;
+      var onBlur = Props.onBlur;
+      var onKeyDown = Props.onKeyDown;
+      var onChange = Props.onChange;
+      var isInvalid = Props.isInvalid;
+      var classNameOpt = Props.className;
+      var timeFormatOpt = Props.timeFormat;
+      var timeIntervalsOpt = Props.timeIntervals;
+      var timeCaptionOpt = Props.timeCaption;
+      var className = classNameOpt !== undefined ? classNameOpt : "";
+      var timeFormat = timeFormatOpt !== undefined ? timeFormatOpt : "p";
+      var timeIntervals = timeIntervalsOpt !== undefined ? timeIntervalsOpt : 15;
+      var timeCaption = timeCaptionOpt !== undefined ? timeCaptionOpt : "Heure";
+      var tmp = {
+        showPopperArrow: false,
+        autoComplete: "off",
+        isClearable: true,
+        timeIntervals: timeIntervals,
+        id: id,
+        className: Cx.cx([
+              className,
+              "appearance-none outline-none transition duration-150 ease-in-out block w-full bg-white text-gray-800 border rounded py-2 px-4 leading-tight focus:z30 relative disabled:bg-gray-200 disabled:text-gray-700",
+              Belt_Option.getWithDefault(isInvalid, false) ? "border-danger-500 shadow-danger-500" : ""
+            ]),
+        dateFormat: "Pp",
+        timeFormat: timeFormat,
+        locale: "fr",
+        timeCaption: timeCaption
+      };
+      if (value !== undefined) {
+        tmp.selected = Caml_option.valFromOption(value);
+      }
+      if (selectsStart !== undefined) {
+        tmp.selectsStart = selectsStart;
+      }
+      if (selectsEnd !== undefined) {
+        tmp.selectsEnd = selectsEnd;
+      }
+      if (showYearDropdown !== undefined) {
+        tmp.showYearDropdown = showYearDropdown;
+      }
+      if (autoFocus !== undefined) {
+        tmp.autoFocus = autoFocus;
+      }
+      if (showTimeSelect !== undefined) {
+        tmp.showTimeSelect = showTimeSelect;
+      }
+      if (disabled !== undefined) {
+        tmp.disabled = disabled;
+      }
+      if (inline !== undefined) {
+        tmp.inline = inline;
+      }
+      if (required !== undefined) {
+        tmp.required = required;
+      }
+      if (name !== undefined) {
+        tmp.name = name;
+      }
+      if (placeholder !== undefined) {
+        tmp.placeholderText = placeholder;
+      }
+      if (startDate !== undefined) {
+        tmp.startDate = Caml_option.valFromOption(startDate);
+      }
+      if (endDate !== undefined) {
+        tmp.endDate = Caml_option.valFromOption(endDate);
+      }
+      if (minDate !== undefined) {
+        tmp.minDate = Caml_option.valFromOption(minDate);
+      }
+      if (minTime !== undefined) {
+        tmp.minTime = Caml_option.valFromOption(minTime);
+      }
+      if (maxTime !== undefined) {
+        tmp.maxTime = Caml_option.valFromOption(maxTime);
+      }
+      if (onChange !== undefined) {
+        tmp.onChange = Caml_option.valFromOption(onChange);
+      }
+      if (onBlur !== undefined) {
+        tmp.onBlur = Caml_option.valFromOption(onBlur);
+      }
+      if (onKeyDown !== undefined) {
+        tmp.onKeyDown = Caml_option.valFromOption(onKeyDown);
+      }
+      var tmp$1 = Belt_Option.map((ref_ == null) ? undefined : Caml_option.some(ref_), (function (prim) {
+              return prim;
+            }));
+      if (tmp$1 !== undefined) {
+        tmp.ref = Caml_option.valFromOption(tmp$1);
+      }
+      return React.createElement(ReactDatepicker$1, tmp);
+    });
+
+export {
+  DatePicker ,
+  make ,
+  
+}
+/*  Not a pure module */

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

@@ -0,0 +1,132 @@
+
+
+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";
+import * as Toolkit__Hooks from "../hooks/Toolkit__Hooks.bs.js";
+import * as Toolkit__Ui_Button from "./Toolkit__Ui_Button.bs.js";
+
+function Toolkit__Ui_Dropdown(Props) {
+  var label = Props.label;
+  var children = Props.children;
+  var dropdownClassNameOpt = Props.dropdownClassName;
+  var buttonClassNameOpt = Props.buttonClassName;
+  var containerClassNameOpt = Props.containerClassName;
+  var defaultIsOpenOpt = Props.defaultIsOpen;
+  var buttonColorOpt = Props.buttonColor;
+  var buttonSizeOpt = Props.buttonSize;
+  var buttonVariantOpt = Props.buttonVariant;
+  var positionOpt = Props.position;
+  var dropdownClassName = dropdownClassNameOpt !== undefined ? dropdownClassNameOpt : "";
+  var buttonClassName = buttonClassNameOpt !== undefined ? buttonClassNameOpt : "";
+  var containerClassName = containerClassNameOpt !== undefined ? containerClassNameOpt : "";
+  var defaultIsOpen = defaultIsOpenOpt !== undefined ? defaultIsOpenOpt : false;
+  var buttonColor = buttonColorOpt !== undefined ? buttonColorOpt : "white";
+  var buttonSize = buttonSizeOpt !== undefined ? buttonSizeOpt : "md";
+  var buttonVariant = buttonVariantOpt !== undefined ? buttonVariantOpt : "default";
+  var position = positionOpt !== undefined ? positionOpt : "bottom";
+  var ref = React.useRef(null);
+  var match = React.useState(function () {
+        return position;
+      });
+  var setPosition = match[1];
+  var position$1 = match[0];
+  var match$1 = Toolkit__Hooks.useDisclosure(defaultIsOpen, undefined);
+  var toggle = match$1.toggle;
+  var hide = match$1.hide;
+  var isOpen = match$1.isOpen;
+  Toolkit__Hooks.useOnClickOutside(ref, (function (param) {
+          return Curry._1(hide, undefined);
+        }));
+  var match$2 = React.useState(function () {
+        
+      });
+  var setAdjustmentStyle = match$2[1];
+  React.useEffect((function () {
+          if (isOpen) {
+            Belt_Option.forEach(Caml_option.nullable_to_opt(ref.current), (function (dom) {
+                    var match = Browser.DomElement.getBoundingClientRect(dom);
+                    var right = match.right;
+                    var left = match.left;
+                    if (position$1 === "left") {
+                      if (left < 0) {
+                        return Curry._1(setPosition, (function (param) {
+                                      return "right";
+                                    }));
+                      }
+                      
+                    } else if (position$1 === "right" && right < 0) {
+                      return Curry._1(setPosition, (function (param) {
+                                    return "left";
+                                  }));
+                    }
+                    return Curry._1(setAdjustmentStyle, (function (param) {
+                                  return {
+                                          marginRight: right < 0 ? (-right).toString() + "px" : "",
+                                          marginLeft: left < 0 ? (-left).toString() + "px" : "",
+                                          opacity: "1"
+                                        };
+                                }));
+                  }));
+          } else {
+            Curry._1(setAdjustmentStyle, (function (param) {
+                    
+                  }));
+          }
+          
+        }), [
+        isOpen,
+        ref
+      ]);
+  return React.createElement("div", {
+              className: Cx.cx([
+                    "relative",
+                    containerClassName
+                  ])
+            }, React.createElement(Toolkit__Ui_Button.make, {
+                  size: buttonSize,
+                  color: buttonColor,
+                  variant: buttonVariant,
+                  onClick: (function ($$event) {
+                      var domRef = ref.current;
+                      if (domRef == null) {
+                        return Curry._1(toggle, undefined);
+                      }
+                      var isInDropdown = $$event.currentTarget.contains(domRef);
+                      if (!isInDropdown) {
+                        return Curry._1(toggle, undefined);
+                      }
+                      
+                    }),
+                  type_: "button",
+                  className: Cx.cx([
+                        buttonClassName,
+                        "dropdown-button"
+                      ]),
+                  children: null
+                }, label, isOpen ? React.createElement("div", {
+                        ref: ref,
+                        className: Cx.cx([
+                              "dropdown",
+                              "absolute  z-20 bg-white p-2 transform shadow rounded text-base font-normal text-neutral-700 opacity-0",
+                              position$1 === "bottom" ? "left-1/2 top-full  -translate-x-1/2 mt-2" : (
+                                  position$1 === "right" ? "left-full top-1/2 -translate-y-1/2 ml-2" : (
+                                      position$1 === "top" ? "left-1/2 bottom-full -translate-x-1/2 mb-2" : "right-full top-1/2 -translate-y-1/2 ml-2"
+                                    )
+                                ),
+                              dropdownClassName
+                            ]),
+                        style: Belt_Option.getWithDefault(match$2[0], {})
+                      }, children) : null));
+}
+
+var make = Toolkit__Ui_Dropdown;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,169 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.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";
+
+function baseStyle(param) {
+  return "font-sans font-semibold rounded inline-flex items-center justify-center transition duration-150 ease-in-out relative focus:z30";
+}
+
+function colorStyle(color, variant, disabled) {
+  if (variant === "default" || variant === "pill") {
+    if (color === "info") {
+      return "bg-info-50 hover:bg-info-600 text-info-500 disabled:hover:bg-info-50 disabled:hover:text-info-500 hover:text-white border border-transparent";
+    } else if (color === "white") {
+      return "bg-white hover:bg-gray-100 text-gray-800 border border-gray-300";
+    } else if (color === "neutral") {
+      return Cx.cx([
+                  "bg-neutral-700 text-white border border-transparent font-display",
+                  disabled ? "disabled:bg-neutral-800" : "hover:bg-neutral-800"
+                ]);
+    } else if (color === "neutralLight") {
+      return Cx.cx([
+                  "bg-neutral-200 border border-neutral-200 text-primary-700 font-display",
+                  disabled ? "disabled:bg-neutral-100" : "hover:bg-primary-800 hover:border-primary-200 hover:text-white"
+                ]);
+    } else if (color === "primary") {
+      return "bg-primary-700 hover:bg-primary-600 disabled:bg-primary-600 text-white border border-transparent";
+    } else if (color === "warning") {
+      return "bg-warning-600 hover:bg-warning-700 disabled:bg-warning-600 text-white border border-transparent";
+    } else if (color === "danger") {
+      return "bg-danger-500 hover:bg-danger-600 disabled:bg-danger-500 text-white border border-danger-500";
+    } else if (color === "black") {
+      return "bg-gray-900 hover:bg-gray-800 disabled:bg-gray-800 text-white border border-transparent";
+    } else if (color === "success") {
+      return "bg-success-600 hover:bg-success-700 disabled:bg-success-700 text-white border border-transparent";
+    } else {
+      return "bg-gray-200 hover:bg-gray-300 disabled:bg-gray-300 text-gray-800 border border-gray-300";
+    }
+  } else if (variant === "text") {
+    if (color === "info") {
+      return "uppercase text-info-600 hover:bg-info-50 disabled:bg-info-50";
+    } else if (color === "neutral") {
+      return "hover:bg-neutral-100 text-neutral-700 hover:border-neutral-400 disabled:text-neutral-500 uppercase";
+    } else if (color === "neutralLight") {
+      return "uppercase text-primary-700 hover:bg-neutral-100 disabled:text-neutral-400";
+    } else if (color === "primary") {
+      return "uppercase text-primary-500 hover:bg-primary-50";
+    } else if (color === "warning") {
+      return "uppercase text-warning-600 hover:bg-warning-50";
+    } else if (color === "danger") {
+      return "uppercase hover:bg-danger-50 text-danger-600";
+    } else if (color === "success") {
+      return "uppercase text-success-600 hover:bg-success-50 disabled:bg-success-50";
+    } else {
+      return "uppercase text-gray-800 hover:bg-gray-100 disabled:bg-gray-200";
+    }
+  } else if (variant === "outline") {
+    if (color === "info") {
+      return "border border-info-600 text-info-600 hover:bg-info-50 disabled:bg-info-50";
+    } else if (color === "neutral") {
+      return "border border-neutral-700 text-neutral-700 hover:bg-neutral-200 disabled:bg-neutral-100";
+    } else if (color === "neutralLight") {
+      return "border border-neutral-300 text-primary-700 hover:bg-neutral-200 disabled:bg-neutral-100";
+    } else if (color === "primary") {
+      return "border border-primary-500 text-primary-500 hover:bg-primary-50";
+    } else if (color === "warning") {
+      return "border border-warning-600 text-warning-600 hover:bg-warning-50 disabled:bg-warning-50";
+    } else if (color === "danger") {
+      return "border border-danger-400 text-danger-600 hover:bg-danger-50 disabled:bg-danger-300";
+    } else if (color === "success") {
+      return "border border-success-600 text-success-600 hover:bg-success-50 disabled:bg-success-50";
+    } else {
+      return "border border-gray-100 text-gray-800 hover:bg-gray-100 disabled:bg-gray-200";
+    }
+  } else {
+    return "text-info-500 hover:underline";
+  }
+}
+
+function buttonStyle(sizeOpt, variantOpt, colorOpt, disabled, param) {
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var variant = variantOpt !== undefined ? variantOpt : "default";
+  var color = colorOpt !== undefined ? colorOpt : "white";
+  var sizeStyle = size === "md" ? "text-base leading-5 p-4" : (
+      size === "sm" ? "text-sm leading-4 p-2" : (
+          size === "xs" ? "text-sm leading-4 p-1" : "text-lg leading-8 p-6"
+        )
+    );
+  var colorStyle$1 = colorStyle(color, variant, disabled);
+  var disabledStyle = disabled ? "opacity-50 cursor-not-allowed shadow-none" : "";
+  return Cx.cx([
+              "font-sans font-semibold rounded inline-flex items-center justify-center transition duration-150 ease-in-out relative focus:z30",
+              sizeStyle,
+              colorStyle$1,
+              disabledStyle
+            ]);
+}
+
+var make = React.forwardRef(function (Props, ref_) {
+      var sizeOpt = Props.size;
+      var colorOpt = Props.color;
+      var variantOpt = Props.variant;
+      var onClick = Props.onClick;
+      var onBlur = Props.onBlur;
+      var onFocus = Props.onFocus;
+      var disabledOpt = Props.disabled;
+      var tabIndex = Props.tabIndex;
+      var id = Props.id;
+      var type_Opt = Props.type_;
+      var ariaLabel = Props.ariaLabel;
+      var classNameOpt = Props.className;
+      var icon = Props.icon;
+      var size = sizeOpt !== undefined ? sizeOpt : "md";
+      var color = colorOpt !== undefined ? colorOpt : "white";
+      var variant = variantOpt !== undefined ? variantOpt : "default";
+      var disabled = disabledOpt !== undefined ? disabledOpt : false;
+      var type_ = type_Opt !== undefined ? type_Opt : "button";
+      var className = classNameOpt !== undefined ? classNameOpt : "";
+      var tmp = {
+        className: Cx.cx([
+              buttonStyle(size, variant, color, disabled, undefined),
+              className
+            ]),
+        disabled: disabled,
+        type: type_
+      };
+      var tmp$1 = Belt_Option.map((ref_ == null) ? undefined : Caml_option.some(ref_), (function (prim) {
+              return prim;
+            }));
+      if (tmp$1 !== undefined) {
+        tmp.ref = Caml_option.valFromOption(tmp$1);
+      }
+      if (ariaLabel !== undefined) {
+        tmp["aria-label"] = Caml_option.valFromOption(ariaLabel);
+      }
+      if (id !== undefined) {
+        tmp.id = Caml_option.valFromOption(id);
+      }
+      if (tabIndex !== undefined) {
+        tmp.tabIndex = Caml_option.valFromOption(tabIndex);
+      }
+      if (onFocus !== undefined) {
+        tmp.onFocus = Caml_option.valFromOption(onFocus);
+      }
+      if (onBlur !== undefined) {
+        tmp.onBlur = Caml_option.valFromOption(onBlur);
+      }
+      if (onClick !== undefined) {
+        tmp.onClick = Caml_option.valFromOption(onClick);
+      }
+      return React.createElement("button", tmp, icon);
+    });
+
+var Spinner;
+
+var Button;
+
+export {
+  Spinner ,
+  Button ,
+  baseStyle ,
+  colorStyle ,
+  buttonStyle ,
+  make ,
+  
+}
+/* make Not a pure module */

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

@@ -0,0 +1,32 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as React from "react";
+import * as Belt_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js";
+
+function Toolkit__Ui_Label(Props) {
+  var htmlFor = Props.htmlFor;
+  var classNameOpt = Props.className;
+  var optionalMessage = Props.optionalMessage;
+  var children = Props.children;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  return React.createElement("label", {
+              className: Cx.cx([
+                    "block text-gray-800 leading-5 mb-1",
+                    className
+                  ]),
+              htmlFor: htmlFor
+            }, children, Belt_Option.mapWithDefault(optionalMessage, null, (function (message) {
+                    return React.createElement("span", {
+                                className: "ml-2 text-neutral-500 italic text-sm"
+                              }, message);
+                  })));
+}
+
+var make = Toolkit__Ui_Label;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */