@colisweb/rescript-toolkit 2.8.2 → 2.9.0-mobile

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

@@ -0,0 +1,50 @@
+
+
+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 Toolkit__Hooks from "../hooks/Toolkit__Hooks.bs.js";
+import * as Md from "react-icons/md";
+import * as Toolkit__Ui_IconButton from "./Toolkit__Ui_IconButton.bs.js";
+
+function Toolkit__Ui_Reference(Props) {
+  var reference = Props.reference;
+  var onCopyNotificationMessage = Props.onCopyNotificationMessage;
+  var classNameOpt = Props.className;
+  var textClassNameOpt = Props.textClassName;
+  var copyButtonSizeOpt = Props.copyButtonSize;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var textClassName = textClassNameOpt !== undefined ? textClassNameOpt : "";
+  var copyButtonSize = copyButtonSizeOpt !== undefined ? copyButtonSizeOpt : 9;
+  var refClipboard = Toolkit__Hooks.useClipboard(onCopyNotificationMessage, reference);
+  return React.createElement("div", {
+              className: Cx.cx([
+                    "flex flex-row items-center bg-info-50 text-info-700 min-w-0 w-full",
+                    className
+                  ])
+            }, React.createElement("p", {
+                  className: Cx.cx([
+                        "font-mono w-full text-sm pl-2 truncate",
+                        textClassName
+                      ])
+                }, reference), React.createElement(Toolkit__Ui_IconButton.make, {
+                  size: "xs",
+                  color: "info",
+                  onClick: (function (param) {
+                      return Curry._1(refClipboard.copy, undefined);
+                    }),
+                  ariaLabel: "copy",
+                  className: "flex-shrink-0",
+                  icon: React.createElement(Md.MdContentCopy, {
+                        size: copyButtonSize
+                      })
+                }));
+}
+
+var make = Toolkit__Ui_Reference;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,32 @@
+
+
+import * as React from "react";
+import SanitizeHtml from "sanitize-html";
+
+function transformUrl(text) {
+  return text.replace(/(https?:\/\/[^\s]+)/g, (function (url, param, param$1) {
+                return "<a target='_blank' class='text-info-500 underline' href=\"" + url + "\">" + url + "</a>";
+              }));
+}
+
+function Toolkit__Ui_RichText(Props) {
+  var text = Props.text;
+  return React.createElement("span", {
+              dangerouslySetInnerHTML: {
+                __html: transformUrl(SanitizeHtml(text, {
+                          allowedTags: ["a"],
+                          allowedAttributes: {
+                            a: ["href"]
+                          }
+                        }))
+              }
+            });
+}
+
+var make = Toolkit__Ui_RichText;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,71 @@
+
+
+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 Caml_option from "../../../../node_modules/rescript/lib/es6/caml_option.js";
+import * as Fa from "react-icons/fa";
+
+function Toolkit__Ui_Select(Props) {
+  var options = Props.options;
+  var onChange = Props.onChange;
+  var placeholder = Props.placeholder;
+  var defaultValue = Props.defaultValue;
+  var isDisabled = Props.isDisabled;
+  var isInvalid = Props.isInvalid;
+  var classNameOpt = Props.className;
+  var containerClassNameOpt = Props.containerClassName;
+  var id = Props.id;
+  var value = Props.value;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var containerClassName = containerClassNameOpt !== undefined ? containerClassNameOpt : "";
+  var tmp = {
+    "aria-disabled": Belt_Option.getWithDefault(isDisabled, false),
+    className: Cx.cx([
+          "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",
+          isInvalid !== undefined && isInvalid ? "border-danger-500 shadow-danger-500" : "border-gray-300",
+          className
+        ]),
+    disabled: Belt_Option.getWithDefault(isDisabled, false),
+    onChange: (function ($$event) {
+        return Curry._1(onChange, $$event.target.value);
+      })
+  };
+  if (defaultValue !== undefined) {
+    tmp.defaultValue = Caml_option.valFromOption(defaultValue);
+  }
+  if (id !== undefined) {
+    tmp.id = Caml_option.valFromOption(id);
+  }
+  if (value !== undefined) {
+    tmp.value = Caml_option.valFromOption(value);
+  }
+  return React.createElement("div", {
+              className: Cx.cx([
+                    "relative",
+                    containerClassName
+                  ])
+            }, React.createElement("select", tmp, Belt_Option.mapWithDefault(placeholder, null, (function (placeholder) {
+                        return React.createElement("option", {
+                                    value: ""
+                                  }, placeholder);
+                      })), Belt_Array.mapWithIndex(options, (function (i, param) {
+                        return React.createElement("option", {
+                                    key: "select_option_" + String(i),
+                                    disabled: !param[2],
+                                    value: param[1]
+                                  }, param[0]);
+                      }))), React.createElement("div", {
+                  className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-800"
+                }, React.createElement(Fa.FaAngleDown, {})));
+}
+
+var make = Toolkit__Ui_Select;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,171 @@
+
+
+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 Restorative from "../../../../node_modules/restorative/lib/es6_global/src/Restorative.bs.js";
+import Portal from "@reach/portal";
+import * as Md from "react-icons/md";
+
+var store = Restorative.createStore({
+      list: []
+    }, (function (state, action) {
+        switch (action.TAG | 0) {
+          case /* Show */0 :
+              return {
+                      list: Belt_Array.concat(state.list, [action._0])
+                    };
+          case /* Hide */1 :
+              var id = action._0;
+              return {
+                      list: Belt_Array.map(state.list, (function (e) {
+                              if (e.id === id) {
+                                return {
+                                        id: e.id,
+                                        isVisible: false,
+                                        title: e.title,
+                                        content: e.content,
+                                        closable: e.closable,
+                                        variant: e.variant,
+                                        timeout: e.timeout
+                                      };
+                              } else {
+                                return e;
+                              }
+                            }))
+                    };
+          case /* Remove */2 :
+              var id$1 = action._0;
+              return {
+                      list: Belt_Array.keep(state.list, (function (e) {
+                              return e.id !== id$1;
+                            }))
+                    };
+          
+        }
+      }));
+
+function show(title, content, closableOpt, variant, timeoutOpt, param) {
+  var closable = closableOpt !== undefined ? closableOpt : true;
+  var timeout = timeoutOpt !== undefined ? timeoutOpt : 5000;
+  var id = Math.random().toString();
+  return Curry._1(store.dispatch, {
+              TAG: /* Show */0,
+              _0: {
+                id: id,
+                isVisible: true,
+                title: title,
+                content: content,
+                closable: closable,
+                variant: variant,
+                timeout: timeout
+              }
+            });
+}
+
+function hide(id) {
+  Curry._1(store.dispatch, {
+        TAG: /* Hide */1,
+        _0: id
+      });
+  setTimeout((function (param) {
+          return Curry._1(store.dispatch, {
+                      TAG: /* Remove */2,
+                      _0: id
+                    });
+        }), 160);
+  
+}
+
+function Toolkit__Ui_Snackbar$Item(Props) {
+  var options = Props.options;
+  var timeout = options.timeout;
+  var variant = options.variant;
+  var id = options.id;
+  var match = React.useState(function () {
+        return false;
+      });
+  var setMounted = match[1];
+  React.useEffect((function () {
+          Curry._1(setMounted, (function (param) {
+                  return true;
+                }));
+          var timeoutId = setTimeout((function (param) {
+                  return hide(id);
+                }), timeout);
+          return (function (param) {
+                    clearTimeout(timeoutId);
+                    
+                  });
+        }), []);
+  return React.createElement("div", {
+              className: Cx.cx([
+                    "rounded shadow transition duration-500 ease-in-out mt-3 p-3 pl-3 pr-10 transform",
+                    match[0] ? "-translate-y-14" : "!opacity-0",
+                    options.isVisible ? "opacity-100" : "opacity-0  translate-x-[200px]",
+                    variant === "danger" ? "bg-danger-100 " : (
+                        variant === "success" ? "bg-success-100" : "bg-warning-100"
+                      )
+                  ]),
+              style: {
+                pointerEvents: "all"
+              }
+            }, options.closable ? React.createElement("button", {
+                    className: "absolute right-1",
+                    onClick: (function (param) {
+                        return hide(id);
+                      })
+                  }, React.createElement(Md.MdClose, {
+                        size: 24,
+                        className: Cx.cx([variant === "danger" ? "text-danger-700" : (
+                                  variant === "success" ? "text-neutral-700" : "text-warning-700"
+                                )])
+                      })) : null, React.createElement("div", {
+                  className: "flex flex-row gap-3 relative"
+                }, React.createElement("div", undefined, variant === "danger" ? React.createElement(Md.MdError, {
+                            size: 28,
+                            className: "text-danger-600"
+                          }) : (
+                        variant === "success" ? React.createElement(Md.MdCheckCircle, {
+                                size: 28,
+                                className: "text-success-600"
+                              }) : React.createElement(Md.MdWarning, {
+                                size: 28,
+                                className: "text-warning-600"
+                              })
+                      )), React.createElement("div", undefined, React.createElement("p", {
+                          className: Cx.cx([
+                                "text-lg",
+                                variant === "danger" ? "text-danger-700" : (
+                                    variant === "success" ? "text-neutral-700" : "text-warning-700"
+                                  )
+                              ])
+                        }, options.title))), Belt_Option.getWithDefault(options.content, null));
+}
+
+function Toolkit__Ui_Snackbar$Provider(Props) {
+  var match = Curry._2(store.useStore, undefined, undefined);
+  return React.createElement(Portal, {
+              children: React.createElement("div", {
+                    className: "z-[2147483647] pointer-events-none fixed right-0 top-0 transform translate-y-14 h-full p-4 flex flex-col items-end justify-end"
+                  }, Belt_Array.map(match.list, (function (e) {
+                          return React.createElement(Toolkit__Ui_Snackbar$Item, {
+                                      options: e,
+                                      key: e.id
+                                    });
+                        })))
+            });
+}
+
+var Provider = {
+  make: Toolkit__Ui_Snackbar$Provider
+};
+
+export {
+  show ,
+  Provider ,
+  
+}
+/* store Not a pure module */

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

@@ -0,0 +1,63 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as React from "react";
+import * as Caml_option from "../../../../node_modules/rescript/lib/es6/caml_option.js";
+import VisuallyHidden from "@reach/visually-hidden";
+
+function Toolkit__Ui_Spinner(Props) {
+  var sizeOpt = Props.size;
+  var colorOpt = Props.color;
+  var labelOpt = Props.label;
+  var classNameOpt = Props.className;
+  var style = Props.style;
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var color = colorOpt !== undefined ? colorOpt : "black";
+  var label = labelOpt !== undefined ? labelOpt : "Loading...";
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var size$1 = size === "md" ? "w-6 h-6" : (
+      size === "sm" ? "w-4 h-4" : (
+          size === "xl" ? "w-12 h-12" : (
+              size === "xs" ? "w-3 h-3" : "w-8 h-8"
+            )
+        )
+    );
+  var color$1 = color === "info" ? "border-info-500" : (
+      color === "white" ? "border-white" : (
+          color === "current" ? "border-current-color" : (
+              color === "primary" ? "border-primary-500" : (
+                  color === "warning" ? "border-warning-500" : (
+                      color === "danger" ? "border-danger-500" : (
+                          color === "black" ? "border-black" : (
+                              color === "success" ? "border-success-500" : "border-gray-800"
+                            )
+                        )
+                    )
+                )
+            )
+        )
+    );
+  var tmp = {
+    className: Cx.cx([
+          className,
+          "spin",
+          "inline-block border-t-2 border-r-2 rounded-full",
+          color$1,
+          size$1
+        ])
+  };
+  if (style !== undefined) {
+    tmp.style = Caml_option.valFromOption(style);
+  }
+  return React.createElement("div", tmp, React.createElement(VisuallyHidden, {
+                  children: label
+                }));
+}
+
+var make = Toolkit__Ui_Spinner;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,18 @@
+
+
+import * as React from "react";
+import * as Toolkit__Ui_Spinner from "./Toolkit__Ui_Spinner.bs.js";
+
+function Toolkit__Ui_SpinnerFullScreen(Props) {
+  return React.createElement("div", {
+              className: "fixed left-0 top-0 w-full h-full flex flex-row justify-center items-center"
+            }, React.createElement(Toolkit__Ui_Spinner.make, {}));
+}
+
+var make = Toolkit__Ui_SpinnerFullScreen;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,15 @@
+
+
+import * as React from "react";
+
+function Toolkit__Ui_Spread(Props) {
+  return React.cloneElement(Props.children, Props.props);
+}
+
+var make = Toolkit__Ui_Spread;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,121 @@
+
+
+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_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js";
+import * as Caml_option from "../../../../node_modules/rescript/lib/es6/caml_option.js";
+import VisuallyHidden from "@reach/visually-hidden";
+
+function getBulletSize(size) {
+  if (size === "md") {
+    return "w-5 h-5";
+  } else {
+    return "w-6 h-6";
+  }
+}
+
+function getLabelSize(size) {
+  if (size === "md") {
+    return "w-12";
+  } else {
+    return "w-16";
+  }
+}
+
+function getTranslateBySize(size) {
+  if (size === "md") {
+    return "translate-x-5";
+  } else {
+    return "translate-x-8";
+  }
+}
+
+function Toolkit__Ui_Switch(Props) {
+  var onChange = Props.onChange;
+  var name = Props.name;
+  var checked = Props.checked;
+  var disabled = Props.disabled;
+  var sizeOpt = Props.size;
+  var checkedClassNameOpt = Props.checkedClassName;
+  var label = Props.label;
+  var classNameOpt = Props.className;
+  var switchClassNameOpt = Props.switchClassName;
+  var disabledClassNameOpt = Props.disabledClassName;
+  var checkedSwitchClassNameOpt = Props.checkedSwitchClassName;
+  var disabledSwitchClassNameOpt = Props.disabledSwitchClassName;
+  var switchRef = Props.switchRef;
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var checkedClassName = checkedClassNameOpt !== undefined ? checkedClassNameOpt : "";
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var switchClassName = switchClassNameOpt !== undefined ? switchClassNameOpt : "";
+  var disabledClassName = disabledClassNameOpt !== undefined ? disabledClassNameOpt : "";
+  var checkedSwitchClassName = checkedSwitchClassNameOpt !== undefined ? checkedSwitchClassNameOpt : "";
+  var disabledSwitchClassName = disabledSwitchClassNameOpt !== undefined ? disabledSwitchClassNameOpt : "";
+  var match = React.useState(function () {
+        return Belt_Option.getWithDefault(checked, false);
+      });
+  var setIsChecked = match[1];
+  var isChecked = match[0];
+  var tmp = {
+    className: Cx.cx([
+          "flex flex-row items-center gap-2 cursor-pointer flex-shrink-0",
+          className,
+          isChecked ? checkedClassName : "",
+          Belt_Option.getWithDefault(disabled, false) ? disabledClassName : ""
+        ])
+  };
+  if (switchRef !== undefined) {
+    tmp.ref = Caml_option.valFromOption(switchRef);
+  }
+  var tmp$1 = {
+    className: "mr-3 h-6",
+    type: "checkbox",
+    onChange: (function (param) {
+        Curry._1(setIsChecked, (function (v) {
+                return !v;
+              }));
+        Belt_Option.map(onChange, (function (fn) {
+                return Curry._1(fn, !isChecked);
+              }));
+        
+      })
+  };
+  if (checked !== undefined) {
+    tmp$1.checked = Caml_option.valFromOption(checked);
+  }
+  if (disabled !== undefined) {
+    tmp$1.disabled = Caml_option.valFromOption(disabled);
+  }
+  if (name !== undefined) {
+    tmp$1.name = Caml_option.valFromOption(name);
+  }
+  return React.createElement("label", tmp, React.createElement("span", {
+                  className: Cx.cx([
+                        "flex items-center relative rounded-full py-1 cursor-pointer border transition-all",
+                        getLabelSize(size),
+                        isChecked ? "bg-info-500" : "bg-gray-300",
+                        switchClassName,
+                        isChecked ? checkedSwitchClassName : "",
+                        Belt_Option.getWithDefault(disabled, false) ? disabledSwitchClassName : ""
+                      ])
+                }, React.createElement(VisuallyHidden, {
+                      children: React.createElement("input", tmp$1)
+                    }), React.createElement("span", {
+                      className: Cx.cx([
+                            "rounded-full shadow transition duration-200 ease-linear transform bg-white",
+                            isChecked ? getTranslateBySize(size) : "translate-x-1",
+                            getBulletSize(size)
+                          ])
+                    })), Belt_Option.mapWithDefault(label, null, (function (label) {
+                    return label;
+                  })));
+}
+
+var make = Toolkit__Ui_Switch;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */