@colisweb/rescript-toolkit 5.47.1 → 5.48.0

package/locale/fr.json

@@ -164,6 +164,11 @@
     "defaultMessage": "Doit être un entier positif",
     "message": "Doit être un entier positif"
   },
+  {
+    "id": "_87223ce4",
+    "defaultMessage": "Réinitialiser l'échelle",
+    "message": "Réinitialiser l'échelle"
+  },
   {
     "id": "_8b33a5ae",
     "defaultMessage": "Votre identifiant",
@@ -199,6 +204,11 @@
     "defaultMessage": "Lundi",
     "message": "Lundi"
   },
+  {
+    "id": "_a37c0ff0",
+    "defaultMessage": "Augmenter l'échelle",
+    "message": "Augmenter l'échelle"
+  },
   {
     "id": "_a7e73ea4",
     "defaultMessage": "Déconnexion",

package/package.json

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

package/src/ui/Toolkit__Ui.res

@@ -47,3 +47,4 @@ module PasswordRulesNotice = Toolkit__Ui_PasswordRulesNotice
 module SectionCard = Toolkit__Ui_SectionCard
 module SuspenseImage = Toolkit__Ui_SuspenseImage
 module Sheet = Toolkit__Ui_Sheet
+module Timeline = Toolkit__Ui_Timeline

package/src/ui/Toolkit__Ui_Sheet.res

@@ -23,11 +23,13 @@ let make = (
         <Dialog.Content
           side={Right}
           className={cx([
-            "bg-white shadow-lg w-3/4 xl:w-2/3 2xl:w-1/2 h-full relative data-[state=open]:animate-slideInLeft data-[state=close]:animate-slideOutRight overflow-auto",
+            "bg-white shadow-lg w-3/4 xl:w-2/3 max-w-[1000px] 2xl:w-1/2 h-full relative data-[state=open]:animate-slideInLeft data-[state=close]:animate-slideOutRight overflow-auto",
             className,
           ])}>
           <header
-            className={cx(["flex items-center justify-between gap-4 sticky bg-white top-0 p-4"])}>
+            className={cx([
+              "flex items-center justify-between gap-4 sticky bg-white top-0 p-4 z-50",
+            ])}>
             {title->Option.mapWithDefault(React.null, title =>
               <Dialog.Title
                 className={cx([

package/src/ui/Toolkit__Ui_Timeline.res

@@ -0,0 +1,593 @@
+open ReactIntl
+
+let formatToPx = (number: float) => `${number->Float.toString}px`
+
+let markerWidth = 24.
+let padding = 24.
+type measuringScale = {
+  startHour: float,
+  endHour: float,
+  displayedHours: float,
+  hours: array<int>,
+  containerWidth: float,
+  // INFO:
+  // This is calculated with the container width and the number of displayed hours
+  hourSizePx: float,
+  minuteSizePx: float,
+}
+
+let calculateMeasuringScale = (~containerWidth, ~startHour: float, ~endHour): measuringScale => {
+  // INFO: We must add 1 to the displayedHours value in order to take into account the last hour visibility.
+  let displayedHours = endHour -. startHour +. 1.
+  let hourSizePx = (containerWidth -. padding *. 2.) /. displayedHours
+  // Based on the hour size, we can calculte the width of 1 minute duration
+  let minuteSizePx = hourSizePx /. 60.
+  let hours = []
+
+  for h in startHour->Float.toInt to endHour->Float.toInt {
+    hours->Js.Array2.push(h)->ignore
+  }
+
+  {
+    startHour,
+    endHour,
+    hours,
+    displayedHours,
+    containerWidth,
+    hourSizePx,
+    minuteSizePx,
+  }
+}
+type state = {
+  // Required to reset the value
+  initialContainerWidth: float,
+  measuringScale: measuringScale,
+}
+
+type timelinePointExtras = {
+  className?: string,
+  content?: React.element,
+  popoverContent?: React.element,
+  popoverContentOptions?: Radix.Popover.Content.options,
+}
+type timelinePoint = {
+  start: Js.Date.t,
+  end: Js.Date.t,
+  extras?: timelinePointExtras,
+}
+
+type marker =
+  | Cluster(array<timelinePoint>)
+  | Point(timelinePoint)
+
+type timlineInfos = {content: React.element, className?: string}
+
+type timeline<'data> = {
+  points: array<timelinePoint>,
+  id: string,
+  infos?: timlineInfos,
+}
+
+type markerOffset = {
+  offsetStart: float,
+  offsetEnd: float,
+  width: float,
+}
+
+let getMarkerOffset = (~marker: marker, ~measuringScale: measuringScale) => {
+  let {startHour} = measuringScale
+  // INFO:
+  // The task is at the beginning of the day, so the index will be 0
+  // This index will be multiplied by the hourSize to give it the right position
+  // Ex: taskHour is 10h00, startHour is 8h, and the hourSize is 100px
+  // (10-8) * 100 = 200 -> the marker will have 200px of offset
+
+  let calculateOffset = (date: Js.Date.t) => {
+    let (startTaskHour, startTaskMinutes) = (date->Js.Date.getHours, date->Js.Date.getMinutes)
+    let startHourIndex = startTaskHour -. startHour
+    let hourPx = (startHourIndex *. measuringScale.hourSizePx)->Js.Math.floor_float
+    let minutesPx = startTaskMinutes *. measuringScale.minuteSizePx
+
+    hourPx +. minutesPx +. padding
+  }
+
+  switch marker {
+  | Cluster(tasks) => {
+      let firstTask = tasks[0]->Option.getExn
+      let lastTask = tasks->Array.tailExn
+
+      let offsetStart = calculateOffset(firstTask.start)
+      let offsetEnd = calculateOffset(lastTask.end)
+
+      {
+        offsetStart,
+        offsetEnd,
+        width: offsetEnd -. offsetStart,
+      }
+    }
+  | Point(task) => {
+      let offsetStart = calculateOffset(task.start)
+      let offsetEnd = calculateOffset(task.end)
+
+      // Can be drawn like this:
+      // ----[offsetStart][offsetWidth][offsetEnd]----
+      {
+        offsetStart,
+        offsetEnd,
+        width: Js.Math.max_float(markerWidth, offsetEnd -. offsetStart),
+      }
+    }
+  }
+}
+
+module HoursRuler = {
+  @react.component
+  let make = (~setMeasuringScale, ~state: state) => {
+    let currentHour = Js.Date.make()->DateFns.getHours
+    let {initialContainerWidth, measuringScale: {containerWidth, startHour, endHour}} = state
+    let scroll = Toolkit__Hooks.useScrollPosition()
+
+    let handleClick = (i, event) => {
+      event->JsxEventC.Mouse.preventDefault
+
+      let newScaling = calculateMeasuringScale(
+        ~containerWidth=containerWidth +. 1500.,
+        ~startHour,
+        ~endHour,
+      )
+      setMeasuringScale(_ => {
+        Some({
+          initialContainerWidth,
+          measuringScale: newScaling,
+        })
+      })
+      Js.Global.setTimeout(() => {
+        ReactDOM.querySelector("#timeline-container")->Option.forEach(div => {
+          (div->Obj.magic)["scroll"](. {
+            "left": i->Int.toFloat *. newScaling.hourSizePx -. initialContainerWidth /. 2.,
+            "behavior": "smooth",
+          })
+        })
+      }, 16)->ignore
+    }
+
+    <section
+      className={cx([
+        "flex flex-row bg-neutral-100 pb-3 h-8 px-[--padding] absolute top-[--top] z-30",
+      ])}
+      style={Obj.magic({
+        "--padding": padding->formatToPx,
+        "--top": (scroll.y < 230. ? 0. : scroll.y -. 230.)->formatToPx,
+      })}>
+      {state.measuringScale.hours
+      ->Array.mapWithIndex((i, h) => {
+        <React.Fragment key={`timline-hour-${h->Int.toString}`}>
+          <div
+            className={"h-8 flex-shrink-0 text-sm text-neutral-700 font-mono w-[--size] transition-all duration-250 ease-linear relative"}
+            style={Obj.magic({
+              "--size": state.measuringScale.hourSizePx->formatToPx,
+            })}>
+            <span
+              onClick={handleClick(i)}
+              onContextMenu={handleClick(i)}
+              className={cx([
+                "absolute right-full transform translate-x-1/2 z-20 rounded py-0.5 cursor-pointer",
+                currentHour === h
+                  ? "bg-primary-600 font-semibold text-white px-1"
+                  : "bg-neutral-100 !rounded-none",
+              ])}>
+              {`${(h >= 24 ? h - 24 : h)->Int.toString}h`->React.string}
+            </span>
+          </div>
+          <span
+            className="absolute top-0  w-px h-full border-l  border-dashed border-neutral-400 ml-[--offsetX]"
+            style={Obj.magic({
+              "--offsetX": (state.measuringScale.hourSizePx *.
+              (h->Int.toFloat -. state.measuringScale.startHour))->formatToPx,
+            })}
+          />
+        </React.Fragment>
+      })
+      ->React.array}
+    </section>
+  }
+}
+
+module CurrentTimeIndicator = {
+  @react.component
+  let make = (~measuringScale: measuringScale) => {
+    let now = Js.Date.make()
+
+    let offset = {
+      let size =
+        (now->DateFns.getHours->Int.toFloat -. measuringScale.startHour) *.
+          measuringScale.hourSizePx +. padding
+      size +. 2. +. now->Js.Date.getMinutes *. measuringScale.minuteSizePx
+    }
+
+    <section
+      className={"w-1 h-full bg-primary-600 absolute left-[--offset-x] z-10 opacity-70"}
+      style={Obj.magic({
+        "--offset-x": offset->formatToPx,
+      })}
+    />
+  }
+}
+
+module Timeline = {
+  module Marker = {
+    @react.component
+    let make = (
+      ~marker: marker,
+      ~clusterClassName="",
+      ~markerClassName="",
+      ~measuringScale,
+      ~setMeasuringScale,
+    ) => {
+      let markerOffset = getMarkerOffset(~marker, ~measuringScale)
+
+      <div
+        onClick={_ => {
+          switch marker {
+          | Cluster(tasks) =>
+            setMeasuringScale(m => {
+              switch m {
+              | Some({
+                  initialContainerWidth,
+                  measuringScale: {containerWidth, startHour, endHour},
+                }) => {
+                  let newScaling =
+                    tasks->Array.length->Int.toFloat *.
+                    measuringScale.hourSizePx *.
+                    measuringScale.displayedHours
+
+                  let newMeasuringScale = calculateMeasuringScale(
+                    ~containerWidth=containerWidth +. newScaling,
+                    ~startHour,
+                    ~endHour,
+                  )
+
+                  let markerOffset = getMarkerOffset(~marker, ~measuringScale=newMeasuringScale)
+
+                  Js.Global.setTimeout(() => {
+                    ReactDOM.querySelector("#timeline-container")->Option.forEach(
+                      div => {
+                        (div->Obj.magic)["scroll"](. {
+                          "left": markerOffset.offsetStart -. initialContainerWidth /. 2.,
+                          "behavior": "smooth",
+                        })
+                      },
+                    )
+                  }, 150)->ignore
+
+                  Some({
+                    initialContainerWidth,
+                    measuringScale: newMeasuringScale,
+                  })
+                }
+
+              | _ => m
+              }
+            })
+          | Point(_) => ()
+          }
+        }}
+        style={{
+          "--x-offset": `${(markerOffset.offsetStart +. padding)->Float.toString}px`,
+          "--markerWidth": (markerOffset.width < 1. ? markerWidth : markerOffset.width)->formatToPx,
+          "--markerHeight": switch marker {
+          | Cluster(_) => markerWidth +. 10.
+          | Point(_) => markerWidth
+          }->formatToPx,
+        }->Obj.magic}
+        className={cx([
+          "flex-shrink-0 w-[--markerWidth] h-[--markerHeight] inline-flex justify-center items-center rounded-full absolute ml-[--x-offset] transition-all duration-150 ease-linear bg-white border-2 border-neutral-600",
+          switch marker {
+          | Cluster(_) => `${clusterClassName}`
+          | Point(p) =>
+            `${markerClassName} ${p.extras
+              ->Option.flatMap(v => v.className)
+              ->Option.getWithDefault("")}`
+          },
+        ])}>
+        {switch marker {
+        | Cluster(p) => p->Array.length->React.int
+        | Point({extras}) =>
+          switch extras.popoverContent {
+          | None =>
+            <div
+              className={"w-full h-[--markerHeight] cursor-pointer"}
+              style={{
+                "--markerHeight": switch marker {
+                | Cluster(_) => markerWidth +. 10.
+                | Point(_) => markerWidth
+                }->formatToPx,
+              }->Obj.magic}>
+              {extras.content->Option.getWithDefault(React.null)}
+            </div>
+          | Some(c) =>
+            <Toolkit__Ui_Popover
+              triggerAsChild={true}
+              trigger={<div
+                className={"w-full h-[--markerHeight] cursor-pointer"}
+                style={{
+                  "--markerHeight": switch marker {
+                  | Cluster(_) => markerWidth +. 10.
+                  | Point(_) => markerWidth
+                  }->formatToPx,
+                }->Obj.magic}>
+                {extras.content->Option.getWithDefault(React.null)}
+              </div>}
+              contentOptions=?{extras.popoverContentOptions}
+              content={c}
+            />
+          }
+        | Point(_) => React.null
+        }}
+      </div>
+    }
+  }
+  @react.component
+  let make = (~timeline: timeline<'a>, ~measuringScale, ~setMeasuringScale) => {
+    // INFO: handle the need of cluster if there are too many tasks in 20 min
+    let markers =
+      timeline.points
+      ->Array.reduce(Js.Dict.empty(), (acc, task) => {
+        let taskHour = task.start->DateFns.getHours
+        let taskMinutes = task.start->DateFns.getMinutes
+        let taskMinutes = switch taskMinutes {
+        | taskMinutes if taskMinutes >= 40 => 40
+        | taskMinutes if taskMinutes >= 20 => 20
+        | _ => 0
+        }
+        // INFO: We group tasks per 20 minutes
+        let key = `${taskHour->Int.toString}-${taskMinutes->Int.toString}`
+        acc->Js.Dict.set(
+          key,
+          acc
+          ->Js.Dict.get(key)
+          ->Option.getWithDefault([])
+          ->Array.concat([task]),
+        )
+        acc
+      })
+      ->Js.Dict.values
+      ->Array.map(tasksByPeriod => {
+        let maximumTasksAllowed = measuringScale.hourSizePx /. 3. /. markerWidth
+
+        if tasksByPeriod->Array.length->Int.toFloat > maximumTasksAllowed {
+          [Cluster(tasksByPeriod->Lodash.sortBy(v => v.start))]
+        } else {
+          tasksByPeriod->Array.map(t => Point(t))
+        }
+      })
+      ->Lodash.flatten
+      ->Lodash.sortBy(marker => {
+        switch marker {
+        | Point({start}) => start
+        | Cluster(tasks) => (tasks->Array.getUnsafe(0)).start
+        }
+      })
+
+    let lastMarkerOffset = getMarkerOffset(
+      ~marker=markers->Toolkit__Primitives.Array.tailExn,
+      ~measuringScale,
+    )
+
+    <div className="h-[44px]">
+      <div
+        className={"bg-white rounded z-20 w-[--width] @container"}
+        style={Obj.magic({
+          "--width": (lastMarkerOffset.offsetEnd +. padding *. 2.)->formatToPx,
+        })}>
+        <div
+          className={cx([
+            "flex flex-row items-center py-2 h-10 rounded border-2 border-neutral-400",
+          ])}>
+          <div
+            className={"h-0.5 bg-neutral-300 absolute w-[--width] ml-[--offsetX] "}
+            style={Obj.magic({
+              "--width": lastMarkerOffset.offsetEnd->formatToPx,
+              "--offsetX": (padding /. 2.)->formatToPx,
+            })}
+          />
+          {markers
+          ->Array.mapWithIndex((i, marker) => {
+            <Marker
+              key={`${timeline.id}-task-${i->Int.toString}`} marker measuringScale setMeasuringScale
+            />
+          })
+          ->React.array}
+        </div>
+      </div>
+    </div>
+  }
+}
+
+@react.component
+let make = (
+  ~timelines: array<timeline<'a>>,
+  ~infosContainerClassName="",
+  ~displayCurrentTime=false,
+  ~centerOnMount=false,
+) => {
+  let containerRef = React.useRef(Js.Nullable.null)
+  let (measuringScale, setMeasuringScale) = React.useState((): option<state> => None)
+
+  React.useEffect(() => {
+    let getContainerWidth = _ => {
+      containerRef.current
+      ->Js.Nullable.toOption
+      ->Option.forEach(element => {
+        let containerWidth = (element->Browser.DomElement.getBoundingClientRect).width
+        let startHour = ref(8.)
+        let endHour = ref(23.)
+
+        timelines->Array.forEachWithIndex(
+          (i, timeline) => {
+            let sortedTasks = timeline.points->Lodash.sortBy(p => p.start)
+
+            switch sortedTasks[0] {
+            | Some({start}) => {
+                let h = start->DateFns.getHours->Int.toFloat
+
+                // INFO: We have to set the first route to be truely content based
+                if i === 0 {
+                  startHour.contents = h
+                } else if h < startHour.contents {
+                  startHour.contents = h
+                }
+              }
+            | _ => ()
+            }
+            switch sortedTasks->Toolkit__Primitives.Array.tail {
+            | Some({end}) => {
+                let h = end->DateFns.getHours->Int.toFloat
+
+                // INFO: We have to set the first route to be truely content based
+                if i === 0 {
+                  endHour.contents = h
+                } else if h > endHour.contents {
+                  endHour.contents = h
+                }
+              }
+            | _ => ()
+            }
+          },
+        )
+
+        let measuringScale = calculateMeasuringScale(
+          ~containerWidth=containerWidth +. 600.,
+          ~startHour=startHour.contents,
+          ~endHour=endHour.contents,
+        )
+
+        setMeasuringScale(
+          _ => Some({
+            initialContainerWidth: containerWidth,
+            measuringScale,
+          }),
+        )
+
+        if centerOnMount {
+          Js.Global.setTimeout(
+            () => {
+              let hourIndex = (endHour.contents -. startHour.contents) /. 2. +. 1.
+              let middleHourSection = hourIndex *. measuringScale.hourSizePx -. containerWidth /. 2.
+
+              ReactDOM.querySelector("#timeline-container")->Option.forEach(
+                div => {
+                  (div->Obj.magic)["scroll"](. {
+                    "left": middleHourSection,
+                    "behavior": "smooth",
+                  })
+                },
+              )
+            },
+            100,
+          )->ignore
+        }
+      })
+    }
+
+    if !(containerRef.current->Js.Nullable.isNullable) {
+      getContainerWidth()
+    }
+
+    Browser.Window.addEventListener("resize", getContainerWidth)
+
+    Some(
+      () => {
+        Browser.Window.removeEventListener("resize", getContainerWidth)
+      },
+    )
+  }, (containerRef.current->Js.Nullable.isNullable, timelines->Array.length, centerOnMount))
+
+  <section className={"flex flex-row"}>
+    <div>
+      {measuringScale->Option.mapWithDefault(React.null, state => {
+        <section className={"flex items-center justify-end gap-2 mr-2"}>
+          <Toolkit__Ui_Tooltip
+            color={Black}
+            side={Top}
+            tooltipContent={<FormattedMessage defaultMessage={"Augmenter l'échelle"} />}
+            triggerContent={<Toolkit__Ui_Button
+              className={"!px-2"}
+              onClick={_ =>
+                setMeasuringScale(_ => {
+                  Some({
+                    initialContainerWidth: state.initialContainerWidth,
+                    measuringScale: calculateMeasuringScale(
+                      ~containerWidth=state.measuringScale.containerWidth +. 1500.,
+                      ~startHour=state.measuringScale.startHour,
+                      ~endHour=state.measuringScale.endHour,
+                    ),
+                  })
+                })}>
+              <ReactIcons.FaSearchPlus />
+            </Toolkit__Ui_Button>}
+          />
+          {state.measuringScale.containerWidth !== state.initialContainerWidth
+            ? <Toolkit__Ui_Tooltip
+                color={Black}
+                side={Top}
+                tooltipContent={<FormattedMessage defaultMessage={"Réinitialiser l'échelle"} />}
+                triggerContent={<Toolkit__Ui_Button
+                  className={"!px-2"}
+                  onClick={_ =>
+                    setMeasuringScale(_ => {
+                      Some({
+                        initialContainerWidth: state.initialContainerWidth,
+                        measuringScale: calculateMeasuringScale(
+                          ~containerWidth=state.initialContainerWidth,
+                          ~startHour=state.measuringScale.startHour,
+                          ~endHour=state.measuringScale.endHour,
+                        ),
+                      })
+                    })}>
+                  <ReactIcons.MdUndo />
+                </Toolkit__Ui_Button>}
+              />
+            : React.null}
+        </section>
+      })}
+      <div className={cx(["min-w-32 pt-1 flex flex-col gap-1", infosContainerClassName])}>
+        {timelines
+        ->Array.map(timeline =>
+          timeline.infos->Option.mapWithDefault(
+            <div key={`${timeline.id}info`} className="h-10" />,
+            infos => {
+              <div
+                key={`${timeline.id}info`}
+                className={cx([
+                  "bg-white border-2 h-10 flex flex-row items-center justify-between px-1",
+                  infos.className->Option.getWithDefault(""),
+                ])}>
+                {infos.content}
+              </div>
+            },
+          )
+        )
+        ->React.array}
+      </div>
+    </div>
+    <section
+      id={"timeline-container"}
+      className={"flex flex-col gap-4 relative bg-neutral-100 pb-4 overflow-y-scroll z-10 w-full"}
+      ref={ReactDOM.Ref.domRef(containerRef)}>
+      {measuringScale->Option.mapWithDefault(React.null, ({measuringScale} as state) => {
+        <React.Fragment>
+          <HoursRuler setMeasuringScale state />
+          {displayCurrentTime ? <CurrentTimeIndicator measuringScale /> : React.null}
+          <div className={"mt-10"}>
+            {timelines
+            ->Array.map(timeline =>
+              <Timeline key={timeline.id} timeline measuringScale setMeasuringScale />
+            )
+            ->React.array}
+          </div>
+        </React.Fragment>
+      })}
+    </section>
+  </section>
+}