@colisweb/rescript-toolkit 4.9.3 → 4.10.1

package/package.json

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

package/src/ui/Toolkit__Ui.res

@@ -36,3 +36,4 @@ module ErrorBoundary = Toolkit__Ui_ErrorBoundary
 module WeekDateFilter = Toolkit__Ui_WeekDateFilter
 module Coordinates = Toolkit__Ui_Coordinates
 module Autocomplete = Toolkit__Ui_Autocomplete
+module WeekdayNavigation = Toolkit__Ui_WeekdayNavigation

package/src/ui/Toolkit__Ui_WeekdayNavigation.res

@@ -0,0 +1,191 @@
+open ReactIntl
+
+type rec state = {
+  period: period,
+  selectedDay: Js.Date.t,
+}
+and period = {
+  start: Js.Date.t,
+  end_: Js.Date.t,
+}
+
+type action =
+  | PreviousPeriod
+  | NextPeriod
+  | UpdateSelectedDay(Js.Date.t)
+
+let updateQueryParams = (state: state) => {
+  RescriptReactRouter.replace(
+    Qs.stringifyWithParams(
+      {
+        "start": Some(state.period.start),
+        "selectedDay": state.selectedDay,
+      }->Obj.magic,
+      Qs.makeParams(
+        ~addQueryPrefix=true,
+        ~serializeDate=d => d->DateFns.formatWithPattern("yyyy-MM-dd"),
+        (),
+      ),
+    ),
+  )
+}
+
+/*
+ * The key is a formatted date
+ * ex:
+ * {
+ *   "2023-03-03": 2
+ * }
+ */
+type dayCounter = Js.Dict.t<int>
+
+@react.component
+let make = (
+  ~startOfWeek: option<Js.Date.t>=?,
+  ~selectedDay: option<Js.Date.t>=?,
+  ~className="",
+  ~counters: option<dayCounter>=?,
+  ~periodLength=7,
+  ~children,
+) => {
+  let {isSm} = Toolkit__Hooks.useMediaQuery()
+
+  let ({period, selectedDay}, dispatch) = ReactUpdate.useReducerWithMapState(
+    (state, action) =>
+      switch action {
+      | PreviousPeriod =>
+        UpdateWithSideEffects(
+          {
+            period: {
+              start: state.period.start->DateFns.subDays(periodLength)->DateFns.startOfDay,
+              end_: state.period.start->DateFns.subDays(1),
+            },
+            selectedDay: state.period.start->DateFns.subDays(periodLength)->DateFns.startOfDay,
+          },
+          ({state}) => {
+            updateQueryParams(state)
+
+            None
+          },
+        )
+      | NextPeriod =>
+        UpdateWithSideEffects(
+          {
+            period: {
+              start: state.period.end_->DateFns.addDays(1),
+              end_: state.period.end_->DateFns.addDays(periodLength),
+            },
+            selectedDay: state.period.end_->DateFns.addDays(1),
+          },
+          ({state}) => {
+            updateQueryParams(state)
+
+            None
+          },
+        )
+      | UpdateSelectedDay(date) =>
+        UpdateWithSideEffects(
+          {...state, selectedDay: date},
+          ({state}) => {
+            updateQueryParams(state)
+            None
+          },
+        )
+      },
+    () => {
+      let defaultPeriod: period = {
+        let today = Js.Date.make()
+        let timeSlotStart = isSm ? DateFns.startOfWeek(today, {weekStartsOn: 1}) : today
+
+        let timeSlotEnd = isSm
+          ? DateFns.endOfWeek(today, {weekStartsOn: 1})
+          : today->DateFns.addDays(2)
+        {
+          start: timeSlotStart,
+          end_: timeSlotEnd,
+        }
+      }
+
+      {
+        period: startOfWeek->Option.mapWithDefault(defaultPeriod, start => {
+          start,
+          end_: start->DateFns.addDays(periodLength - 1),
+        }),
+        selectedDay: selectedDay->Option.getWithDefault(
+          startOfWeek->Option.getWithDefault(defaultPeriod.start),
+        ),
+      }
+    },
+  )
+  let intl = useIntl()
+
+  <div className>
+    <div className="border-neutral-300 flex justify-center items-center py-3">
+      <Toolkit__Ui_IconButton
+        size=#xs
+        variant=#outline
+        color=#neutral
+        onClick={_ => dispatch(PreviousPeriod)}
+        ariaLabel="previous week"
+        icon={<ReactIcons.MdKeyboardArrowLeft size=30 />}
+      />
+      <div className="flex items-center mx-2">
+        {DateFns.eachDayOfInterval({
+          start: period.start,
+          end_: period.end_,
+        })
+        ->Array.mapWithIndex((i, day) => {
+          let formattedDay =
+            intl->Intl.formatDateWithOptions(day, dateTimeFormatOptions(~weekday=#long, ()))
+
+          let isSelected = DateFns.isSameDay(selectedDay, day)
+
+          <React.Fragment key={i->Int.toString ++ "-day"}>
+            {i == 0 || day->DateFns.isFirstDayOfMonth
+              ? <p className="text-xs text-neutral-700 uppercase">
+                  <FormattedDate value=day month=#short />
+                </p>
+              : React.null}
+            <div
+              onClick={_ => dispatch(UpdateSelectedDay(day))}
+              className="flex flex-col items-stretch w-16 mx-1 font-display">
+              <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>
+                  {formattedDay
+                  ->Js.String2.slice(~from=0, ~to_=4)
+                  ->Js.String2.concat(formattedDay->Js.String2.length > 4 ? "." : "")
+                  ->React.string}
+                </span>
+                <span className="text-sm font-semibold">
+                  <FormattedDate value=day day=#"2-digit" />
+                </span>
+              </p>
+              <p
+                className="text-xs text-info-500 bg-info-50 text-center mt-1 font-semibold rounded-sm">
+                {counters
+                ->Option.flatMap(counters =>
+                  counters->Js.Dict.get(day->DateFns.formatWithPattern("yyyy-MM-dd"))
+                )
+                ->Option.mapWithDefault(React.null, React.int)}
+              </p>
+            </div>
+          </React.Fragment>
+        })
+        ->React.array}
+      </div>
+      <Toolkit__Ui_IconButton
+        size=#xs
+        variant=#outline
+        color=#neutral
+        onClick={_ => dispatch(NextPeriod)}
+        ariaLabel="next week"
+        icon={<ReactIcons.MdKeyboardArrowRight size=30 />}
+      />
+    </div>
+    {children({period, selectedDay})}
+  </div>
+}