@colisweb/rescript-toolkit 5.24.4 → 5.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.24.4",
+  "version": "5.26.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -67,6 +67,7 @@
     "react-helmet": "6.1.0",
     "react-icons": "5.3.0",
     "react-intl": "6.8.1",
+    "react-phone-number-input": "^3.4.10",
     "react-portal": "4.2.2",
     "react-select": "5.8.1",
     "react-table": "7.8.0",

package/src/form/Toolkit__Form.res

@@ -714,4 +714,41 @@ module Make = (StateLenses: Config) => {
       />
     }
   }
+
+  module Phone = {
+    @react.component
+    let make = (
+      ~field,
+      ~international=true,
+      ~defaultCountry="FR",
+      ~label,
+      ~isOptional=false,
+      ~id,
+    ) =>
+      <Field
+        field
+        render={({value, handleChange, validate, error}) => {
+          <>
+            <Toolkit__Ui_Label
+              htmlFor=id
+              optionalMessage={isOptional
+                ? <FormattedMessage defaultMessage="(Optionnel)" />
+                : React.null}>
+              {label}
+            </Toolkit__Ui_Label>
+            <ReactPhoneNumberInput
+              international
+              value
+              countryCallingCodeEditable={false}
+              defaultCountry
+              onChange={handleChange}
+              onBlur={_ => validate()}
+            />
+            {error->Option.mapWithDefault(React.null, error => {
+              <ErrorMessage error />
+            })}
+          </>
+        }}
+      />
+  }
 }

package/src/ui/styles.css

@@ -6,6 +6,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
 @import url("react-day-picker/dist/style.css");
+@import url("react-phone-number-input/style.css");
 
 @layer components {
   .cw-tab-list {
@@ -259,4 +260,16 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
+.PhoneInput {
+  @apply bg-white border rounded;
+}
+
+.PhoneInputCountry {
+  @apply px-2 m-2 border-r;
+}
+
+.PhoneInputInput {
+  @apply rounded-r py-2;
+}
+
 /* purgecss end ignore */

package/src/vendors/ReactPhoneNumberInput.res

@@ -0,0 +1,22 @@
+@module("react-phone-number-input") @react.component
+external make: (
+  ~placeholder: string=?,
+  ~value: string=?,
+  ~countryCallingCodeEditable: bool=?,
+  ~international: bool=?,
+  ~defaultCountry: string=?,
+  ~onChange: string => unit=?,
+  ~onBlur: 'a => unit=?,
+) => React.element = "default"
+
+@module("react-phone-number-input")
+external isPossiblePhoneNumber: string => bool = "isPossiblePhoneNumber"
+
+type phoneNumber = {
+  country: string,
+  countryCallingCode: string,
+  number: string,
+  nationalNumber: string,
+}
+@module("react-phone-number-input")
+external parsePhoneNumber: string => option<phoneNumber> = "parsePhoneNumber"