@colisweb/rescript-toolkit 2.54.3 → 2.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.54.3",
+  "version": "2.56.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",
@@ -79,7 +79,7 @@
     "rescript-react-update": "5.0.0",
     "sanitize-html": "1.27.4",
     "swr": "1.3.0",
-    "tailwindcss": "3.1.8"
+    "tailwindcss": "3.2.4"
   },
   "devDependencies": {
     "@babel/core": "7.18.6",

package/src/decoders/Toolkit__Decoders.res

@@ -438,3 +438,31 @@ module Coordinates = {
     longitude: gmaps.lng,
   }
 }
+
+module DatetimeTimeSlot = {
+  @decco
+  type t = {
+    start: Datetime.t,
+    @as("end") @decco.key("end")
+    end_: Datetime.t,
+  }
+
+  let isEqual = (a: t, b: t): bool => {
+    a.start->Js.Date.toString === b.start->Js.Date.toString &&
+      a.end_->Js.Date.toString === b.end_->Js.Date.toString
+  }
+}
+
+module DateTimeSlot = {
+  @decco
+  type t = {
+    start: Date.t,
+    @as("end") @decco.key("end")
+    end_: Date.t,
+  }
+
+  let isEqual = (a: t, b: t): bool => {
+    a.start->Js.Date.toString === b.start->Js.Date.toString &&
+      a.end_->Js.Date.toString === b.end_->Js.Date.toString
+  }
+}

package/src/hooks/Toolkit__Hooks.res

@@ -108,7 +108,7 @@ let useDisclosure = (~defaultIsOpen=?, ()) => {
   let (isOpen, setIsOpen) = React.useState(() => defaultIsOpen->Belt.Option.getWithDefault(false))
 
   {
-    isOpen: isOpen,
+    isOpen,
     show: React.useCallback(() => setIsOpen(_ => true)),
     hide: React.useCallback(() => setIsOpen(_ => false)),
     toggle: React.useCallback(() => setIsOpen(isOpen => !isOpen)),
@@ -146,7 +146,7 @@ let useClipboard = (~onCopyNotificationMessage: option<string>=?, value: string)
       : None
   , [hasCopied])
 
-  {value: value, copy: onCopy, hasCopied: hasCopied}
+  {value, copy: onCopy, hasCopied}
 }
 
 // ----------------------
@@ -211,7 +211,7 @@ let useMediaQuery = () => {
   let isXs = React.useMemo0(() => matchMedia("(max-width: 639px)").matches)
   let isSm = React.useMemo0(() => matchMedia("(min-width: 640px)").matches)
   let isLg = React.useMemo0(() => matchMedia("(min-width: 1024px)").matches)
-  {isXs: isXs, isSm: isSm, isLg: isLg}
+  {isXs, isSm, isLg}
 }
 
 let useOnClickOutside = (ref: React.ref<Js.Nullable.t<Dom.element>>, handler) => {
@@ -268,3 +268,21 @@ let useIsVisibleOnViewport = (~options: option<ReactUse.intersectionOptions<'a>>
 
   isVisible
 }
+
+let useQueryParams = (~decoder, ~defaultParams) => {
+  let queryString = {
+    open Browser.Location
+    location->search
+  }
+
+  React.useMemo1(
+    () =>
+      queryString
+      ->Js.String2.sliceToEnd(~from=1)
+      ->Qs.parse
+      ->Obj.magic
+      ->decoder
+      ->Result.getWithDefault(defaultParams),
+    [queryString],
+  )
+}

package/src/ui/Toolkit__Ui.res

@@ -33,3 +33,4 @@ module MultiSelect = Toolkit__Ui_MultiSelect
 module Notice = Toolkit__Ui_Notice
 module NativeDatePicker = Toolkit__Ui_NativeDatePicker
 module ErrorBoundary = Toolkit__Ui_ErrorBoundary
+module WeekDateFilter = Toolkit__Ui_WeekDateFilter

package/src/ui/Toolkit__Ui_WeekDateFilter.res

@@ -0,0 +1,215 @@
+open ReactIntl
+
+type state = {
+  timeslot: Toolkit__Decoders.DatetimeTimeSlot.t,
+  selectedDay: option<Js.Date.t>,
+}
+
+type action =
+  | PreviousTimeSlot
+  | NextTimeSlot
+  | UpdateSelectedDay(option<Js.Date.t>)
+
+@decco
+type queryParams = {
+  start: Toolkit__Decoders.Option.t<Toolkit__Decoders.Date.t>,
+  selectedDay: Toolkit__Decoders.Option.t<Toolkit__Decoders.Date.t>,
+}
+
+@react.component
+let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element) => {
+  let {isSm} = Toolkit__Hooks.useMediaQuery()
+  let intl = useIntl()
+  let timeSlotLength = isSm ? 7 : 3
+
+  let queryParams = Toolkit__Hooks.useQueryParams(
+    ~decoder=queryParams_decode,
+    ~defaultParams={
+      start: None,
+      selectedDay: None,
+    },
+  )
+
+  // Note: not sure about priority there...
+  let initialStart = switch (initialStart, queryParams.start) {
+  | (Some(_) as date, _) => date
+  | (_, Some(_) as date) => date
+  | _ => None
+  }
+  let selectedDay = switch (selectedDay, queryParams.selectedDay) {
+  | (Some(_) as date, _) => date
+  | (_, Some(_) as date) => date
+  | _ => None
+  }
+
+  let ({timeslot, selectedDay}, dispatch) = ReactUpdate.useReducerWithMapState(
+    (state, action) =>
+      switch action {
+      | PreviousTimeSlot =>
+        UpdateWithSideEffects(
+          {
+            timeslot: {
+              start: state.timeslot.start->BsDateFns.subDays(timeSlotLength)->BsDateFns.startOfDay,
+              end_: state.timeslot.start->BsDateFns.subDays(1),
+            },
+            selectedDay: state.selectedDay->Option.map(_ =>
+              state.timeslot.start->BsDateFns.subDays(timeSlotLength)->BsDateFns.startOfDay
+            ),
+          },
+          ({state}) => {
+            RescriptReactRouter.replace(
+              Qs.stringifyWithParams(
+                {
+                  start: Some(state.timeslot.start),
+                  selectedDay: state.selectedDay,
+                }->queryParams_encode,
+                {
+                  addQueryPrefix: true,
+                  serializeDate: d => d->BsDateFns.formatWithPattern("yyyy-MM-dd"),
+                },
+              ),
+            )
+            None
+          },
+        )
+      | NextTimeSlot =>
+        UpdateWithSideEffects(
+          {
+            timeslot: {
+              start: state.timeslot.end_->BsDateFns.addDays(1),
+              end_: state.timeslot.end_->BsDateFns.addDays(timeSlotLength),
+            },
+            selectedDay: state.selectedDay->Option.map(_ =>
+              state.timeslot.end_->BsDateFns.addDays(1)
+            ),
+          },
+          ({state}) => {
+            RescriptReactRouter.replace(
+              Qs.stringifyWithParams(
+                {
+                  start: Some(state.timeslot.start),
+                  selectedDay: state.selectedDay,
+                }->queryParams_encode,
+                {
+                  addQueryPrefix: true,
+                  serializeDate: d => d->BsDateFns.formatWithPattern("yyyy-MM-dd"),
+                },
+              ),
+            )
+            None
+          },
+        )
+      | UpdateSelectedDay(date) =>
+        UpdateWithSideEffects(
+          {...state, selectedDay: date},
+          ({state}) => {
+            RescriptReactRouter.replace(
+              Qs.stringifyWithParams(
+                {
+                  start: Some(state.timeslot.start),
+                  selectedDay: state.selectedDay,
+                }->queryParams_encode,
+                {
+                  addQueryPrefix: true,
+                  serializeDate: d => d->BsDateFns.formatWithPattern("yyyy-MM-dd"),
+                },
+              ),
+            )
+            None
+          },
+        )
+      },
+    () => {
+      let defaultTimeslot: Toolkit__Decoders.DatetimeTimeSlot.t = {
+        let today = Js.Date.make()
+        let timeSlotStart = isSm ? BsDateFns.startOfWeek(today, {weekStartsOn: 1}) : today
+
+        let timeSlotEnd = isSm
+          ? BsDateFns.endOfWeek(today, {weekStartsOn: 1})
+          : today->BsDateFns.addDays(2)
+        {
+          start: timeSlotStart,
+          end_: timeSlotEnd,
+        }
+      }
+
+      {
+        timeslot: initialStart->Option.mapWithDefault(defaultTimeslot, start => {
+          start,
+          end_: start->BsDateFns.addDays(timeSlotLength - 1),
+        }),
+        selectedDay: selectedDay->Option.isSome
+          ? selectedDay
+          : isSm
+          ? None
+          : Some(initialStart->Option.getWithDefault(defaultTimeslot.start)),
+      }
+    },
+  )
+
+  <React.Fragment>
+    <div className="bg-white rounded flex justify-center items-center p-6">
+      <Toolkit__Ui_IconButton
+        size=#xs
+        variant=#outline
+        color=#neutral
+        onClick={_ => dispatch(PreviousTimeSlot)}
+        ariaLabel="previous week"
+        icon={<BsReactIcons.MdKeyboardArrowLeft size=30 />}
+      />
+      <div className="flex items-center mx-2">
+        {BsDateFns.eachDayOfInterval({
+          start: timeslot.start,
+          end_: timeslot.end_,
+        })
+        ->Array.mapWithIndex((i, day) => {
+          let isSelected =
+            selectedDay->Option.mapWithDefault(false, sDay => BsDateFns.isSameDay(sDay, day))
+          <React.Fragment key={`${i->Int.toString}-day`}>
+            {i == 0 || day->BsDateFns.isFirstDayOfMonth
+              ? <p className="text-xs text-neutral-600 uppercase">
+                  <FormattedDate value=day month=#short />
+                </p>
+              : React.null}
+            <div
+              onClick={_ => dispatch(UpdateSelectedDay(isSm && isSelected ? None : Some(day)))}
+              className="flex flex-col items-stretch w-16 mx-1 font-display cursor-pointer">
+              <p
+                className={cx([
+                  "flex flex-col items-center justify-center uppercase text-xs w-full rounded-sm leading-tight py-1",
+                  isSelected ? "text-white bg-primary-700" : "text-primary-700 bg-primary-50",
+                ])}>
+                <span>
+                  {
+                    let day =
+                      intl->Intl.formatDateWithOptions(
+                        day,
+                        dateTimeFormatOptions(~weekday=#long, ()),
+                      )
+                    day
+                    ->Js.String2.slice(~from=0, ~to_=4)
+                    ->Js.String2.concat(day->Js.String2.length > 4 ? "." : "")
+                    ->React.string
+                  }
+                </span>
+                <span className="text-sm font-semibold">
+                  <FormattedDate value=day day=#"2-digit" />
+                </span>
+              </p>
+            </div>
+          </React.Fragment>
+        })
+        ->React.array}
+      </div>
+      <Toolkit__Ui_IconButton
+        size=#xs
+        variant=#outline
+        color=#neutral
+        onClick={_ => dispatch(NextTimeSlot)}
+        ariaLabel="next week"
+        icon={<BsReactIcons.MdKeyboardArrowRight size=30 />}
+      />
+    </div>
+    {children({timeslot, selectedDay})}
+  </React.Fragment>
+}

package/src/vendors/Qs.res

@@ -1,8 +1,8 @@
 @module("qs") external stringify: Js.t<'a> => string = "stringify"
 
 type params = {
-  addQueryPrefix: bool,
-  serializeDate: Js.Date.t => string,
+  addQueryPrefix?: bool,
+  serializeDate?: Js.Date.t => string,
 }
 @obj
 external makeParams: (