@colisweb/rescript-toolkit 2.16.0 → 2.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.16.0",
+  "version": "2.18.1",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",
@@ -86,6 +86,7 @@
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-intl": "5.24.7",
     "react-is": "17.0.2",
     "sass": "1.45.0"
   }

package/src/form/Toolkit__Form.res

@@ -100,9 +100,13 @@ module Make = (StateLenses: Config) => {
       ~inputRightAddon=?,
       ~errorClassName=?,
       ~optionalMessage: option<React.element>=?,
-    ) =>
+    ) => {
+      let (showPassword, setShowPassword) = React.useState(() => false)
+      let isPasswordType = type_->Option.mapWithDefault(false, type_ => type_ === "password")
+
       <Form.Field
         field
+        key={showPassword->string_of_bool}
         render={({handleChange, error, value, validate, state}) => {
           let isInvalid = error->Option.isSome
 
@@ -137,12 +141,14 @@ module Make = (StateLenses: Config) => {
                 <Toolkit__Ui.TextInput
                   className={cx([
                     inputClassName,
-                    inputRightAddon->Option.isSome ? "rounded-r-none" : "",
+                    inputRightAddon->Option.isSome || isPasswordType ? "rounded-r-none" : "",
                   ])}
                   id
                   value
                   ?name
-                  ?type_
+                  type_=?{type_->Option.map(type_ =>
+                    type_ === "password" && showPassword ? "text" : type_
+                  )}
                   ?disabled
                   ?placeholder
                   ?autoFocus
@@ -153,6 +159,29 @@ module Make = (StateLenses: Config) => {
                   onChange
                   onBlur
                 />
+                {type_->Option.mapWithDefault(React.null, type_ => {
+                  switch type_ {
+                  | "password" =>
+                    <Toolkit__Ui_Tooltip
+                      label={showPassword
+                        ? <ReactIntl.FormattedMessage
+                            id="toolkit.hidePassword" defaultMessage="Hide password"
+                          />
+                        : <ReactIntl.FormattedMessage
+                            id="toolkit.showPassword" defaultMessage="Show password"
+                          />}>
+                      <button
+                        type_="button"
+                        className="p-1 bg-neutral-300 rounded-r border border-gray-300 text-neutral-800"
+                        onClick={_ => setShowPassword(v => !v)}>
+                        {showPassword
+                          ? <BsReactIcons.AiFillEyeInvisible size={26} />
+                          : <BsReactIcons.AiFillEye size={26} />}
+                      </button>
+                    </Toolkit__Ui_Tooltip>
+                  | _ => React.null
+                  }
+                })}
                 {inputRightAddon->Option.getWithDefault(React.null)}
               </div>
             </div>
@@ -160,5 +189,6 @@ module Make = (StateLenses: Config) => {
           </>
         }}
       />
+    }
   }
 }

package/src/ui/Toolkit__Ui_Label.res

@@ -1,6 +1,6 @@
 @react.component
 let make = (~htmlFor, ~className="", ~optionalMessage=?, ~children) =>
-  <label htmlFor className={cx(["block text-gray-800 leading-5 mb-1", className])}>
+  <label htmlFor className={cx(["block text-neutral-700 font-semibold leading-5 mb-1", className])}>
     children
     {optionalMessage->Option.mapWithDefault(React.null, message =>
       <span className="ml-2 text-neutral-500 italic text-sm"> message </span>

package/src/ui/Toolkit__Ui_Modal.res

@@ -20,7 +20,7 @@ let modalStyle = (~type_) =>
   | #default => "rounded"
   | #colored(color) =>
     switch color {
-    | #primary => "rounded-lg border-2 border-primary-500"
+    | #primary => "rounded-lg"
     | #success => "rounded-lg border-2 border-success-500"
     | #danger => "rounded-lg border-4 border-danger-700"
     | #neutral => "rounded-lg"
@@ -32,7 +32,7 @@ let headerStyle = (~type_) =>
   | #default => ""
   | #colored(color) =>
     switch color {
-    | #primary => "bg-primary-500 rounded-t"
+    | #primary => "bg-primary-700 rounded-t"
     | #success => "bg-success-500 rounded-t"
     | #danger => "bg-danger-700"
     | #neutral => "bg-neutral-700 rounded-t-lg"

package/src/vendors/BsReactIcons.res

@@ -5899,3 +5899,12 @@ module IoIosCloseCircle = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "IoIosCloseCircle"
 }
+
+module AiFillEyeInvisible = {
+  @module("react-icons/ai") @react.component
+  external make: (~size: int=?) => React.element = "AiFillEyeInvisible"
+}
+module AiFillEye = {
+  @module("react-icons/ai") @react.component
+  external make: (~size: int=?) => React.element = "AiFillEye"
+}