@colisweb/rescript-toolkit 4.12.0 → 4.13.0

package/locale/fr.json

@@ -1,4 +1,9 @@
 [
+  {
+    "id": "_0475def8",
+    "defaultMessage": "Fin",
+    "message": "Fin"
+  },
   {
     "id": "_04eadf92",
     "defaultMessage": "L'email est invalide.",
@@ -39,11 +44,6 @@
     "defaultMessage": "Volume total",
     "message": "Volume total"
   },
-  {
-    "id": "_2f765479",
-    "defaultMessage": "Choisir",
-    "message": "Choisir"
-  },
   {
     "id": "_337be526",
     "defaultMessage": "Jeudi",
@@ -64,6 +64,16 @@
     "defaultMessage": "Samedi",
     "message": "Samedi"
   },
+  {
+    "id": "_4df46058",
+    "defaultMessage": "Semaine {number}",
+    "message": "Semaine {number}"
+  },
+  {
+    "id": "_4f2a1035",
+    "defaultMessage": "Début",
+    "message": "Début"
+  },
   {
     "id": "_5689ac4d",
     "defaultMessage": "Masquer le mot de passe",
@@ -74,6 +84,11 @@
     "defaultMessage": "Non",
     "message": "Non"
   },
+  {
+    "id": "_6a661ab6",
+    "defaultMessage": "Aujourd'hui",
+    "message": "Aujourd'hui"
+  },
   {
     "id": "_6ef34790",
     "defaultMessage": "Une erreur est survenue lors de la recherche",
@@ -94,11 +109,21 @@
     "defaultMessage": "<lat></lat>, <lng></lng>",
     "message": "<lat></lat>, <lng></lng>"
   },
+  {
+    "id": "_7cd2a589",
+    "defaultMessage": "Cette semaine",
+    "message": "Cette semaine"
+  },
   {
     "id": "_7e01b0f2",
     "defaultMessage": "Réinitialiser",
     "message": "Réinitialiser"
   },
+  {
+    "id": "_7e345c99",
+    "defaultMessage": "Ce mois",
+    "message": "Ce mois"
+  },
   {
     "id": "_8f8eb0df",
     "defaultMessage": "Vendredi",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -28,7 +28,6 @@
   "license": "MIT",
   "dependencies": {
     "@colisweb/bs-react-intl-extractor-bin": "0.12.2",
-    "@colisweb/react-day-picker": "7.4.16",
     "@colisweb/restorative": "1.0.0",
     "@datadog/browser-rum": "4.46.0",
     "@headlessui/react": "1.7.16",
@@ -53,6 +52,7 @@
     "react": "18.2.0",
     "react-big-calendar": "1.5.2",
     "react-datepicker": "3.8.0",
+    "react-day-picker": "8.8.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
     "react-helmet": "6.1.0",

package/src/form/Toolkit__Form.res

@@ -638,107 +638,7 @@ module Make = (StateLenses: Config) => {
   }
 
   module DatePicker = {
-    module Picker = {
-      @react.component
-      let make = (
-        ~value,
-        ~handleChange,
-        ~containerClassName,
-        ~placeholder,
-        ~disabledBefore: option<Js.Date.t>=?,
-        ~revalidate,
-      ) => {
-        let (date, setDate) = React.useState((): option<Js.Date.t> => value)
-        let intl = useIntl()
-
-        <div>
-          <Toolkit__Ui_PortalDropdown
-            buttonClassName="!border-0 w-full !p-0"
-            label={switch value {
-            | None =>
-              <div className={cx(["text-left w-full", containerClassName])}>
-                <div className="border p-2 rounded text-neutral-400 font-normal">
-                  {placeholder->Option.getWithDefault(
-                    <FormattedMessage defaultMessage={"Choisissez une date"} />,
-                  )}
-                </div>
-              </div>
-            | Some(date) =>
-              <div
-                className={cx([
-                  "border rounded-lg p-2 flex flex-row items-center justify-between gap-6 font-normal text-neutral-700 w-full",
-                  containerClassName,
-                ])}>
-                <span>
-                  <FormattedDate
-                    value={date} weekday=#long day=#numeric month=#long year=#numeric
-                  />
-                </span>
-                <div
-                  className="border inline-flex items-center justify-center w-8 h-8 rounded border-primary-700 text-primary-700">
-                  <ReactIcons.FaPencilAlt size={18} />
-                </div>
-              </div>
-            }}>
-            {disclosure => {
-              <div className="flex flex-col">
-                <ReactDayPicker.ReactDayPicker.DayPicker
-                  className="cw-Datepicker"
-                  showOutsideDays=true
-                  modifiers={disabledBefore->Option.mapWithDefault(
-                    Js.Obj.empty()->Obj.magic,
-                    disabledBefore => {
-                      {
-                        "disabled": {
-                          "before": disabledBefore,
-                        },
-                      }->Obj.magic
-                    },
-                  )}
-                  locale={intl->Intl.locale}
-                  months=Toolkit__LocalesHelpers.DatePicker.Fr.months
-                  weekdaysShort=Toolkit__LocalesHelpers.DatePicker.Fr.weekdaysShort
-                  firstDayOfWeek=1
-                  selectedDays=(date->Obj.magic, {from: Js.Nullable.null, to_: Js.Nullable.null})
-                  onDayClick={(
-                    (day, modifiers) => {
-                      let disabled: option<bool> = (modifiers->Obj.magic)["disabled"]
-
-                      switch disabled {
-                      | Some(true) => ()
-                      | _ => setDate(_ => Some(day))
-                      }
-                    }
-                  )->Obj.magic}
-                />
-                <div className="flex flex-row justify-between">
-                  <Toolkit__Ui_Button
-                    type_="button"
-                    disabled={date->Option.isNone}
-                    onClick={_ => {
-                      revalidate()
-                      setDate(_ => None)
-                    }}>
-                    <FormattedMessage defaultMessage={"Réinitialiser"} />
-                  </Toolkit__Ui_Button>
-                  <Toolkit__Ui_Button
-                    color=#primary
-                    type_="button"
-                    disabled={date->Option.isNone}
-                    onClick={_ => {
-                      disclosure.hide()
-                      revalidate()
-                      handleChange(date)
-                    }}>
-                    <FormattedMessage defaultMessage={"Choisir"} />
-                  </Toolkit__Ui_Button>
-                </div>
-              </div>
-            }}
-          </Toolkit__Ui_PortalDropdown>
-        </div>
-      }
-    }
+    open ReactDayPicker
     @react.component
     let make = (
       ~field,
@@ -751,14 +651,7 @@ module Make = (StateLenses: Config) => {
     ) => {
       <Field
         field
-        render={({handleChange, value, error, state, validate}) => {
-          let revalidate = () => {
-            switch state {
-            | Pristine => ()
-            | _ => validate()
-            }
-          }
-
+        render={({handleChange, value, error}) => {
           <>
             {switch label {
             | None => React.null
@@ -771,7 +664,39 @@ module Make = (StateLenses: Config) => {
                 label
               </Toolkit__Ui_Label>
             }}
-            <Picker value handleChange containerClassName placeholder ?disabledBefore revalidate />
+            <ReactDayPicker.SingleDayPickerInput
+              ?value
+              onChange={v => handleChange(v)}
+              allowEmpty=?isOptional
+              buttonClassName="w-full"
+              labelClassName={cx([
+                "flex flex-row items-center gap-4 font-normal text-neutral-700 w-full",
+                containerClassName,
+              ])}
+              modifiers=?{disabledBefore->Option.map((disabledBefore): ReactDayPicker.modifiers => {
+                disabled: [
+                  ReactDayPicker.Matcher.interval({
+                    before: disabledBefore,
+                  }),
+                ],
+              })}
+              placeholder={placeholder->Option.getWithDefault(
+                <FormattedMessage defaultMessage="Choisissez une date" />,
+              )}
+              labelFormatter={date => {
+                <>
+                  <span>
+                    <FormattedDate
+                      value={date} weekday=#long day=#numeric month=#long year=#numeric
+                    />
+                  </span>
+                  <div
+                    className="border inline-flex items-center justify-center w-8 h-8 rounded border-primary-700 text-primary-700">
+                    <ReactIcons.FaPencilAlt size={18} />
+                  </div>
+                </>
+              }}
+            />
             <ErrorMessage ?error />
           </>
         }}

package/src/router/Toolkit__Router.res

@@ -282,7 +282,7 @@ module Make = (Config: RouterConfig) => {
             "sidenav-link",
             isActive && !disabledActiveLink ? "bg-primary-100/75 text-neutral-700" : "",
           ])}
-          activeClassName="bg-primary-100/75 text-neutral-700"
+          activeClassName={disabledActiveLink ? "" : "bg-primary-100/75 text-neutral-700"}
           onClick={_ => onLinkClick()}>
           <span className="overflow-hidden flex">
             {config.icon->Option.mapWithDefault(React.null, icon =>

package/src/ui/styles.css

@@ -1,11 +1,10 @@
 /* purgecss start ignore */
+@import url("./tailwind-init.css");
 @import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700");
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700");
 @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("@colisweb/react-day-picker/lib/style.css");
-@tailwind base;
-@tailwind components;
+@import url("react-day-picker/dist/style.css");
 
 @layer components {
   .cw-tab-list {
@@ -23,7 +22,6 @@
   }
 }
 
-@tailwind utilities;
 :root {
   --reach-dialog: 1;
 }
@@ -43,8 +41,6 @@ body,
   @apply h-full flex flex-col justify-between;
 }
 
-/* Reach UI */
-
 /* Animations */
 @keyframes spin {
   from {
@@ -65,6 +61,7 @@ select:not([disabled]):not([tabindex="-1"]):focus,
 textarea:not([disabled]):not([tabindex="-1"]):focus,
 button:not([disabled]):not([tabindex="-1"]):focus,
 iframe:not([tabindex="-1"]):focus,
+[tabindex]:not([tabindex="-1"]):focus,
 [contentEditable="true"]:not([tabindex="-1"]):focus,
 .focus {
   outline: none !important;
@@ -88,41 +85,6 @@ iframe:not([tabindex="-1"]):focus,
   @apply bg-info-500;
 }
 
-.input-range
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
-    .DayPicker-Day--end
-  ):not(.DayPicker-Day--outside) {
-  background-color: #f0f8ff !important;
-  color: #4a90e2;
-}
-
-.input-range .DayPicker-Day {
-  border-radius: 0 !important;
-}
-
-.input-range .DayPicker-Day--start {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
-}
-
-.input-range .DayPicker-Day--end {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
-}
-
-.input-range .DayPickerInput-Overlay {
-  width: 580px;
-  z-index: 31;
-}
-
-.input-range-to .DayPickerInput-Overlay {
-  margin-left: -198px;
-}
-
-.input-range .DayPickerInput input {
-  @apply p-2 border rounded-sm cursor-pointer;
-}
-
 .react-select__control {
   @apply border-gray-300 !important;
 }
@@ -147,26 +109,46 @@ iframe:not([tabindex="-1"]):focus,
   @apply shadow-none !important;
 }
 
-.Selectable
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
-    .DayPicker-Day--end
-  ):not(.DayPicker-Day--outside) {
-  background-color: #f0f8ff !important;
-  color: #4a90e2;
+.cw-Tabs {
+  @apply flex flex-row bg-gray-200 rounded-full h-6 text-sm mb-2;
+}
+
+.cw-Tabs [data-selected] {
+  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
+  color: white;
+}
+
+.cw-Tabs [data-selected]:hover {
+  color: white;
+  @apply bg-primary-500;
+}
+
+.cw-Tabs [data-reach-tab] {
+  @apply flex items-center justify-center w-full py-3 rounded-full font-display;
 }
 
-.Selectable .DayPicker-Day {
-  border-radius: 0 !important;
+.cw-Tabs [data-reach-tab]:hover {
+  @apply bg-primary-300;
+}
+
+.cw-Tabs.cw-Tabs--big {
+  @apply h-10 text-xl;
+}
+
+.cw-ButtonGroup > button {
+  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3;
+}
+.cw-ButtonGroup > button:hover {
+  @apply bg-primary-300;
 }
 
-.Selectable .DayPicker-Day--start {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
+.cw-ButtonGroup > button.selected {
+  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
+  color: white;
 }
 
-.Selectable .DayPicker-Day--end {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
+.cw-Checkbox > input:checked + .checkmark > * {
+  @apply opacity-100;
 }
 
 code {
@@ -203,7 +185,6 @@ code {
     visibility: visible;
     opacity: 100%;
   }
-
   .sidenav.sidenav--closed .sidenav-link .sidenav-link-tooltip:before {
     content: "";
     position: absolute;
@@ -220,85 +201,55 @@ input::-webkit-inner-spin-button {
   margin: 0;
 }
 
-/* Firefox */
-input[type="number"] {
-  -moz-appearance: textfield;
-}
+/* React day picker */
 
-/* Day picker */
-.DayPicker .DayPicker-Day {
-  width: 40px !important;
-  height: 40px !important;
-}
-.DayPicker .DayPicker-Day--selected {
-  border-radius: 0 !important;
-}
-.DayPicker
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
-  background-color: #e7edf3 !important;
-  color: #15373a;
-}
-.DayPicker .DayPicker-Day--selected.DayPicker-Day--start {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
-  background-color: #15cbe3 !important;
-  color: #fff;
-}
-.DayPicker .DayPicker-Day--selected.DayPicker-Day--end {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
-  background-color: #15cbe3 !important;
-  color: #fff;
-}
-.DayPicker .DayPicker-Day--closed {
-  border-radius: 0 !important;
-}
-.DayPicker
-  .DayPicker-Day--closed:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
-  background-color: #ff634b !important;
-  color: #15373a;
-}
-.DayPicker
-  .DayPicker-Day--closed.DayPicker-Day--start:not(.DayPicker-Day--end) {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  background-color: #ff904b !important;
-  color: #15373a;
-}
-.DayPicker
-  .DayPicker-Day--closed.DayPicker-Day--end:not(.DayPicker-Day--start) {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  background-color: #ff904b !important;
-  color: #15373a;
-}
-.DayPicker .DayPicker-Day--closed.DayPicker-Day--start.DayPicker-Day--end {
-  background-color: #ff904b !important;
-  color: #15373a;
+.rdp-caption_label {
+  @apply text-neutral-700 capitalize;
 }
 
-.cw-ButtonGroup > button {
-  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3;
+.rdp-caption_label {
+  @apply text-neutral-700;
 }
-.cw-ButtonGroup > button:hover {
-  @apply bg-primary-300;
+.rdp-day {
+  @apply text-neutral-700;
 }
-
-.cw-ButtonGroup > button.selected {
-  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
-  color: white;
+.rdp-day_today {
+  @apply text-danger-700;
+}
+.rdp-head_cell {
+  @apply text-neutral-600;
+}
+.rdp-day_selected,
+.rdp-day_selected:hover {
+  @apply bg-primary-500 text-white;
+}
+.rdp-day_range_middle,
+.rdp-day_range_middle:hover {
+  @apply bg-gray-300 text-black;
+}
+.rdp-day_selected.rdp-day_range_start:not(.rdp-day_range_end),
+.rdp-day_range_middle:hover {
+  @apply !rounded-tr-none !rounded-br-none;
 }
 
-.cw-Checkbox > input:checked + .checkmark > * {
-  @apply opacity-100;
+.rdp-day_closed,
+.rdp-day_closed:hover {
+  @apply !bg-[#ff904b] !text-black;
+}
+.rdp-day_closed:not(.rdp-day_range_start):not(.rdp-day_range_end),
+.rdp-day_closed:not(.rdp-day_range_start):not(.rdp-day_range_end):hover {
+  @apply !bg-[#ff634b] !text-black !rounded-none;
+}
+.rdp-button[disabled].rdp-day_closed {
+  @apply !opacity-100;
+}
+.rdp-button[disabled] {
+  @apply cursor-not-allowed;
 }
 
-.cw-Datepicker.DayPicker .DayPicker-Day.DayPicker-Day--selected {
-  @apply !bg-primary-500 !rounded-full text-white;
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
 }
 
 /* purgecss end ignore */

package/src/ui/tailwind-init.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;