@colisweb/rescript-toolkit 5.25.0 → 5.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.25.0",
+  "version": "5.26.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

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 */