@colisweb/rescript-toolkit 2.8.2 → 2.9.0-mobile

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

@@ -0,0 +1,103 @@
+
+
+
+var Button;
+
+var ButtonGroup;
+
+var Spinner;
+
+var Card;
+
+var Modal;
+
+var Spread;
+
+var DatetimeInput;
+
+var TextInput;
+
+var Tooltip;
+
+var TooltipV2;
+
+var Switch;
+
+var Radio;
+
+var Checkbox;
+
+var TextareaInput;
+
+var Label;
+
+var Snackbar;
+
+var Alert;
+
+var IconButton;
+
+var Tag;
+
+var Select;
+
+var Listbox;
+
+var ListboxInput;
+
+var Table;
+
+var Reference;
+
+var RichText;
+
+var ProgressBar;
+
+var Dropdown;
+
+var Layout;
+
+var SpinnerFullScreen;
+
+var MultiSelect;
+
+var Notice;
+
+var NativeDatePicker;
+
+export {
+  Button ,
+  ButtonGroup ,
+  Spinner ,
+  Card ,
+  Modal ,
+  Spread ,
+  DatetimeInput ,
+  TextInput ,
+  Tooltip ,
+  TooltipV2 ,
+  Switch ,
+  Radio ,
+  Checkbox ,
+  TextareaInput ,
+  Label ,
+  Snackbar ,
+  Alert ,
+  IconButton ,
+  Tag ,
+  Select ,
+  Listbox ,
+  ListboxInput ,
+  Table ,
+  Reference ,
+  RichText ,
+  ProgressBar ,
+  Dropdown ,
+  Layout ,
+  SpinnerFullScreen ,
+  MultiSelect ,
+  Notice ,
+  NativeDatePicker ,
+  
+}
+/* No side effect */

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

@@ -0,0 +1,52 @@
+
+
+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 Md from "react-icons/md";
+
+function Toolkit__Ui_Alert(Props) {
+  var title = Props.title;
+  var description = Props.description;
+  var status = Props.status;
+  var className = Props.className;
+  return React.createElement("div", {
+              className: Cx.cx([
+                    "py-2 px-4 flex items-center",
+                    status === "error" ? "bg-danger-50" : (
+                        status === "warning" ? "bg-warning-50" : (
+                            status === "success" ? "bg-success-50" : "bg-info-50"
+                          )
+                      ),
+                    Belt_Option.getWithDefault(className, "")
+                  ])
+            }, status === "error" ? React.createElement(Md.MdWarning, {
+                    size: 28,
+                    className: "text-danger-600 flex-shrink-0"
+                  }) : (
+                status === "warning" ? React.createElement(Md.MdWarning, {
+                        size: 28,
+                        className: "text-warning-500 flex-shrink-0"
+                      }) : (
+                    status === "success" ? React.createElement(Md.MdCheckCircle, {
+                            size: 28,
+                            className: "text-success-500 flex-shrink-0"
+                          }) : React.createElement(Md.MdInfoOutline, {
+                            size: 28,
+                            className: "text-info-500 flex-shrink-0"
+                          })
+                  )
+              ), React.createElement("div", {
+                  className: "mx-3"
+                }, React.createElement("div", {
+                      className: Belt_Option.isSome(description) ? "font-bold" : ""
+                    }, title), Belt_Option.getWithDefault(description, null)));
+}
+
+var make = Toolkit__Ui_Alert;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,188 @@
+
+
+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 Toolkit__Ui_Spinner from "./Toolkit__Ui_Spinner.bs.js";
+
+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-700 text-primary-700 hover:bg-neutral-300";
+    } 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 py-2 px-4" : (
+      size === "sm" ? "text-sm leading-4 h-8 px-2" : (
+          size === "xs" ? "text-sm normal-case px-2" : "text-lg leading-8 py-2 px-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
+            ]);
+}
+
+function Toolkit__Ui_Button(Props) {
+  var sizeOpt = Props.size;
+  var colorOpt = Props.color;
+  var variantOpt = Props.variant;
+  var isLoadingOpt = Props.isLoading;
+  var onClick = Props.onClick;
+  var onBlur = Props.onBlur;
+  var onFocus = Props.onFocus;
+  var disabledOpt = Props.disabled;
+  var tabIndex = Props.tabIndex;
+  var ariaLabel = Props.ariaLabel;
+  var ariaLabelledby = Props.ariaLabelledby;
+  var ariaExpanded = Props.ariaExpanded;
+  var autoFocus = Props.autoFocus;
+  var id = Props.id;
+  var type_ = Props.type_;
+  var classNameOpt = Props.className;
+  var childrenOpt = Props.children;
+  var leftIcon = Props.leftIcon;
+  var rightIcon = Props.rightIcon;
+  var buttonRef = Props.buttonRef;
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var color = colorOpt !== undefined ? colorOpt : "white";
+  var variant = variantOpt !== undefined ? variantOpt : "default";
+  var isLoading = isLoadingOpt !== undefined ? isLoadingOpt : false;
+  var disabled = disabledOpt !== undefined ? disabledOpt : false;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var children = childrenOpt !== undefined ? Caml_option.valFromOption(childrenOpt) : null;
+  var tmp = {
+    className: Cx.cx([
+          className,
+          buttonStyle(size, variant, color, disabled, undefined),
+          variant === "pill" ? "rounded-full" : ""
+        ]),
+    disabled: isLoading || disabled
+  };
+  if (buttonRef !== undefined) {
+    tmp.ref = Caml_option.valFromOption(buttonRef);
+  }
+  if (ariaLabel !== undefined) {
+    tmp["aria-label"] = Caml_option.valFromOption(ariaLabel);
+  }
+  if (ariaExpanded !== undefined) {
+    tmp["aria-expanded"] = Caml_option.valFromOption(ariaExpanded);
+  }
+  if (ariaLabelledby !== undefined) {
+    tmp["aria-labelledby"] = Caml_option.valFromOption(ariaLabelledby);
+  }
+  if (id !== undefined) {
+    tmp.id = Caml_option.valFromOption(id);
+  }
+  if (tabIndex !== undefined) {
+    tmp.tabIndex = Caml_option.valFromOption(tabIndex);
+  }
+  if (autoFocus !== undefined) {
+    tmp.autoFocus = Caml_option.valFromOption(autoFocus);
+  }
+  if (type_ !== undefined) {
+    tmp.type = Caml_option.valFromOption(type_);
+  }
+  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, Belt_Option.mapWithDefault(leftIcon, null, (function (icon) {
+                    return React.createElement("span", {
+                                className: "mr-2"
+                              }, icon);
+                  })), children, Belt_Option.mapWithDefault(rightIcon, null, (function (icon) {
+                    return React.createElement("span", {
+                                className: "ml-2"
+                              }, icon);
+                  })), isLoading ? React.createElement(Toolkit__Ui_Spinner.make, {
+                    size: "sm",
+                    color: "current",
+                    className: "ml-2"
+                  }) : null);
+}
+
+var make = Toolkit__Ui_Button;
+
+export {
+  make ,
+  
+}
+/* react Not a pure module */

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

@@ -0,0 +1,83 @@
+
+
+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_ButtonGroup(Props) {
+  var children = Props.children;
+  var classNameOpt = Props.className;
+  var sizeOpt = Props.size;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var isMd = size === "md";
+  return React.createElement("div", {
+              className: Cx.cx([
+                    className,
+                    "flex justify-center items-center rounded-full font-display bg-gray-200",
+                    isMd ? "h-6" : "h-10",
+                    isMd ? "text-sm" : "text-xl",
+                    Curry._1(Css.style, {
+                          hd: Css.selector("& > button", {
+                                hd: Css.whiteSpace("nowrap"),
+                                tl: {
+                                  hd: Css.height(Css.pct(100)),
+                                  tl: {
+                                    hd: Css.padding2(Css.rem(0.75), isMd ? Css.rem(0.75) : Css.rem(1)),
+                                    tl: {
+                                      hd: Css.display("flex"),
+                                      tl: {
+                                        hd: Css.alignItems("center"),
+                                        tl: {
+                                          hd: Css.justifyContent("center"),
+                                          tl: {
+                                            hd: Css.borderRadius(Css.rem(2)),
+                                            tl: {
+                                              hd: Css.selector("&:hover", {
+                                                    hd: Css.backgroundColor(Css.hex("3DDEF3")),
+                                                    tl: /* [] */0
+                                                  }),
+                                              tl: /* [] */0
+                                            }
+                                          }
+                                        }
+                                      }
+                                    }
+                                  }
+                                }
+                              }),
+                          tl: {
+                            hd: Css.selector("& > button.selected", {
+                                  hd: Css.background(Css.linearGradient(Css.deg(270), {
+                                            hd: [
+                                              Css.pct(0),
+                                              Css.hex("11a3b6")
+                                            ],
+                                            tl: {
+                                              hd: [
+                                                Css.pct(100),
+                                                Css.hex("27d0dc")
+                                              ],
+                                              tl: /* [] */0
+                                            }
+                                          })),
+                                  tl: {
+                                    hd: Css.color(Css.white),
+                                    tl: /* [] */0
+                                  }
+                                }),
+                            tl: /* [] */0
+                          }
+                        })
+                  ])
+            }, children);
+}
+
+var make = Toolkit__Ui_ButtonGroup;
+
+export {
+  make ,
+  
+}
+/* Css Not a pure module */

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

@@ -0,0 +1,166 @@
+
+
+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 Md from "react-icons/md";
+import * as Toolkit__Ui_Button from "./Toolkit__Ui_Button.bs.js";
+
+function Toolkit__Ui_Card$Header(Props) {
+  var classNameOpt = Props.className;
+  var childrenOpt = Props.children;
+  var action = Props.action;
+  var actionDisabled = Props.actionDisabled;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var children = childrenOpt !== undefined ? Caml_option.valFromOption(childrenOpt) : null;
+  return React.createElement("div", {
+              className: "flex flex-row items-center mb-4"
+            }, React.createElement("div", {
+                  className: Cx.cx([
+                        className,
+                        "font-light font-display text-gray-800 flex justify-between items-center w-full border-b border-primary-500"
+                      ])
+                }, children), Belt_Option.mapWithDefault(action, null, (function (param) {
+                    var $$event = param.event;
+                    return React.createElement(Toolkit__Ui_Button.make, {
+                                size: "xs",
+                                color: "info",
+                                variant: "pill",
+                                onClick: (function (param) {
+                                    return Curry._1($$event, undefined);
+                                  }),
+                                disabled: Belt_Option.getWithDefault(actionDisabled, false),
+                                className: "flex-shrink-0 ml-4",
+                                children: param.label
+                              });
+                  })));
+}
+
+var Header = {
+  make: Toolkit__Ui_Card$Header
+};
+
+function Toolkit__Ui_Card$Body(Props) {
+  var classNameOpt = Props.className;
+  var childrenOpt = Props.children;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var children = childrenOpt !== undefined ? Caml_option.valFromOption(childrenOpt) : null;
+  return React.createElement("div", {
+              className: Cx.cx([
+                    className,
+                    "h-full"
+                  ])
+            }, children);
+}
+
+var Body = {
+  make: Toolkit__Ui_Card$Body
+};
+
+function Toolkit__Ui_Card$FixedBody(Props) {
+  var classNameOpt = Props.className;
+  var childrenOpt = Props.children;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var children = childrenOpt !== undefined ? Caml_option.valFromOption(childrenOpt) : null;
+  return React.createElement(Toolkit__Ui_Card$Body, {
+              children: React.createElement("div", {
+                    className: Cx.cx([
+                          className,
+                          "overflow-y-auto h-full"
+                        ])
+                  }, children)
+            });
+}
+
+var FixedBody = {
+  make: Toolkit__Ui_Card$FixedBody
+};
+
+function Toolkit__Ui_Card$Message(Props) {
+  var variant = Props.variant;
+  var classNameOpt = Props.className;
+  var childrenOpt = Props.children;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var children = childrenOpt !== undefined ? Caml_option.valFromOption(childrenOpt) : null;
+  var icon = variant === "error" ? React.createElement(Md.MdError, {
+          className: "w-6 h-6 mr-2 text-danger-600"
+        }) : (
+      variant === "warning" ? React.createElement(Md.MdWarning, {
+              className: "w-6 h-6 mr-2 text-warning-600"
+            }) : (
+          variant === "success" ? React.createElement(Md.MdCheckCircle, {
+                  className: "w-6 h-6 mr-2 text-success-600"
+                }) : React.createElement(Md.MdInfo, {
+                  className: "w-6 h-6 mr-2 text-info-600"
+                })
+        )
+    );
+  var color = variant === "error" ? "text-danger-600 bg-danger-50" : (
+      variant === "warning" ? "text-warning-600 bg-warning-50" : (
+          variant === "success" ? "text-success-600 bg-success-50" : "text-info-600 bg-info-50"
+        )
+    );
+  return React.createElement("div", {
+              className: Cx.cx([
+                    className,
+                    "px-6 py-4 flex",
+                    color
+                  ])
+            }, icon, React.createElement("div", undefined, children));
+}
+
+var Message = {
+  make: Toolkit__Ui_Card$Message
+};
+
+function Toolkit__Ui_Card$Footer(Props) {
+  var classNameOpt = Props.className;
+  var childrenOpt = Props.children;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var children = childrenOpt !== undefined ? Caml_option.valFromOption(childrenOpt) : null;
+  return React.createElement("div", {
+              className: Cx.cx([
+                    className,
+                    "flex items-center"
+                  ])
+            }, children);
+}
+
+var Footer = {
+  make: Toolkit__Ui_Card$Footer
+};
+
+function Toolkit__Ui_Card(Props) {
+  var classNameOpt = Props.className;
+  var childrenOpt = Props.children;
+  var customMinHeightOpt = Props.customMinHeight;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var children = childrenOpt !== undefined ? Caml_option.valFromOption(childrenOpt) : null;
+  var customMinHeight = customMinHeightOpt !== undefined ? customMinHeightOpt : 200;
+  return React.createElement("div", {
+              className: Cx.cx([
+                    className,
+                    "rounded-lg shadow-sm bg-white p-6",
+                    Curry._1(Css.style, {
+                          hd: Css.minHeight(Css.px(customMinHeight)),
+                          tl: /* [] */0
+                        })
+                  ])
+            }, children);
+}
+
+var make = Toolkit__Ui_Card;
+
+export {
+  Header ,
+  Body ,
+  Message ,
+  Footer ,
+  FixedBody ,
+  make ,
+  
+}
+/* Css Not a pure module */