@colisweb/rescript-toolkit 5.25.0 → 5.26.1

package/package.json

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

package/src/form/Toolkit__Form.res

@@ -714,4 +714,46 @@ 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
+              className={cx([
+                "bg-white border rounded",
+                error->Option.isSome ? "border-danger-500" : "",
+              ])}
+              id
+              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 {
@@ -32,6 +33,8 @@
 
 :root {
   --reach-dialog: 1;
+  --PhoneInputCountrySelectArrow-width: 0.5em;
+  --PhoneInputCountryFlag-height: 0.85em;
 }
 
 body {
@@ -259,4 +262,15 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
+.PhoneInputCountry {
+  @apply pr-2 m-2 border-r;
+}
+
+.PhoneInputInput {
+  @apply rounded-r py-2;
+}
+.PhoneInputCountrySelectArrow {
+  @apply relative -top-px ml-2 text-neutral-600;
+}
+
 /* purgecss end ignore */

package/src/vendors/ReactPhoneNumberInput.res

@@ -7,6 +7,8 @@ external make: (
   ~defaultCountry: string=?,
   ~onChange: string => unit=?,
   ~onBlur: 'a => unit=?,
+  ~className: string=?,
+  ~id: string=?,
 ) => React.element = "default"
 
 @module("react-phone-number-input")