feat(fields): add DatePicker (#7)

* feat(fields): add DatePicker

* ci(github): add preview workflow for Chromatic

* ci(github): add PR preview url update job in preview workflow

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+## Related Issues
+
+- Resolve MTES-MCT/monitorenv#123
+- Resolve MTES-MCT/monitorfish#123
+
+## Preview URL
+
+_Waiting for deployment..._<!-- AUTOFILLED_PREVIEW_URL -->

.github/workflows/preview.yml

@@ -0,0 +1,40 @@
+name: Preview
+
+on: pull_request
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    outputs:
+      # https://www.chromatic.com/docs/github-actions#outputs
+      storybookUrl: ${{ steps.publish.outputs.storybookUrl }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: 18
+      - name: Install
+        run: yarn
+      - name: Publish
+        id: publish
+        uses: chromaui/action@v1
+        with:
+          buildScriptName: preview
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GH_PAT }}
+
+  update_pull_request:
+    runs-on: ubuntu-latest
+    needs: publish
+    steps:
+      - name: Update Pull Request Preview URL
+        uses: ivangabriele/find-and-replace-pull-request-body@v1.0.3
+        with:
+          githubToken: ${{ secrets.GH_PAT }}
+          find: "_Waiting for deployment..._<!-- AUTOFILLED_PREVIEW_URL -->"
+          replace: ${{ needs.publish.outputs.storybookUrl }}

package.json

@@ -17,6 +17,7 @@
     "build:dev": "rm -Rf ./dist && rollup -c",
     "build:package": "node ./scripts/build/generatePackageJson.js",
     "dev": "start-storybook -p 6006",
+    "preview": "yarn build-storybook",
     "setup": "husky install",
     "test": "yarn test:lint && yarn test:type",
     "test:lint": "yarn eslint --ext js,jsx,ts,tsx .",
@@ -73,6 +74,7 @@
     "@typescript-eslint/parser": "5.40.1",
     "babel-loader": "8.2.5",
     "browser-assert": "1.2.1",
+    "chromatic": "6.11.4",
     "codecov": "3.8.3",
     "eslint": "8.25.0",
     "eslint-config-airbnb": "19.0.4",

src/fields/DatePicker/CalendarPicker.tsx

@@ -0,0 +1,177 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { DatePicker as RsuiteDatePicker } from 'rsuite'
+import styled, { createGlobalStyle } from 'styled-components'
+
+import { getUtcDayjs } from '../../utils/getUtcDayjs'
+import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'
+import { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation'
+import { RSUITE_CALENDAR_LOCALE } from '../DateRangePicker/constants'
+import { getDateTupleFromDate } from '../DateRangePicker/utils'
+
+import type { DateTuple } from '../DateRangePicker/types'
+import type { MutableRefObject } from 'react'
+import type { Promisable } from 'type-fest'
+
+type CalendarPickerProps = {
+  defaultValue?: Date
+  isHistorical?: boolean
+  onChange: (nextDateTuple: DateTuple) => Promisable<void>
+}
+export function CalendarPicker({ defaultValue, isHistorical, onChange }: CalendarPickerProps) {
+  const boxRef = useRef() as MutableRefObject<HTMLDivElement>
+  const calendarRef = useRef<any>()
+
+  const [isFirstLoad, setIsFirstLoad] = useState(true)
+
+  const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), [])
+  const disabledDate = useMemo(
+    () => (date?: Date) => date && isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false,
+    [isHistorical, utcTodayAsDayjs]
+  )
+
+  const handleSelect = useCallback(
+    (nextDate: Date) => {
+      const nextDateTuple = getDateTupleFromDate(nextDate)
+
+      onChange(nextDateTuple)
+    },
+    [onChange]
+  )
+
+  useEffect(() => {
+    // We wait for the <Box /> to render so that `boxRef` is defined
+    // and can be used as a container for <RsuiteDateRangePicker />
+    setIsFirstLoad(false)
+  }, [])
+
+  return (
+    <>
+      <GlobalStyleToHideBodyDialog />
+
+      <Box ref={boxRef} onClick={stopMouseEventPropagation}>
+        {!isFirstLoad && (
+          <RsuiteDatePicker
+            ref={calendarRef}
+            container={boxRef.current}
+            disabledDate={disabledDate}
+            format="yyyy-MM-dd"
+            locale={RSUITE_CALENDAR_LOCALE}
+            oneTap
+            onSelect={handleSelect}
+            open
+            ranges={[]}
+            // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
+            value={defaultValue}
+          />
+        )}
+      </Box>
+    </>
+  )
+}
+
+const GlobalStyleToHideBodyDialog: any = createGlobalStyle`
+  body > div[role="dialog"].rs-picker-date-menu {
+    display: none;
+  }
+`
+
+const Box = styled.div`
+  height: 0;
+  position: relative;
+  user-select: none;
+
+  .rs-picker-toggle {
+    display: none;
+  }
+
+  .rs-picker-date-panel {
+    height: 290px;
+  }
+
+  .rs-picker-date-menu {
+    border: solid 1px ${p => p.theme.color.lightGray};
+    border-radius: 0;
+    margin-top: 0.25rem;
+
+    .rs-picker-date-header,
+    .rs-calendar-header-time-toolbar,
+    .rs-picker-toolbar {
+      display: none;
+    }
+
+    .rs-calendar {
+      height: auto !important;
+      padding: 0;
+
+      :first-child {
+        border-right: solid 1px ${p => p.theme.color.lightGray};
+      }
+
+      .rs-calendar-header {
+        border-bottom: solid 1px ${p => p.theme.color.lightGray};
+        padding: 0.5rem;
+
+        .rs-calendar-header-month-toolbar {
+          align-items: center;
+          color: ${p => p.theme.color.slateGray};
+          display: flex;
+          justify-content: space-between;
+
+          .rs-calendar-header-title {
+            font-size: inherit;
+            text-transform: uppercase;
+
+            &.rs-calendar-header-error {
+              color: ${p => p.theme.color.slateGray};
+
+              :hover {
+                color: ${p => p.theme.color.slateGray};
+              }
+            }
+          }
+        }
+      }
+
+      .rs-calendar-view {
+        padding: 0.75rem 0.5rem 0;
+
+        .rs-calendar-table-cell {
+          padding: 0 0 0.25rem 0;
+          width: 33px;
+
+          &.rs-calendar-table-cell-in-range:before {
+            background-color: ${p => p.theme.color.blueGray[25]};
+            height: 33px;
+            margin-top: 0;
+          }
+
+          > .rs-calendar-table-cell-content {
+            align-items: center;
+            border-radius: 0 !important;
+            display: inline-flex;
+            height: 33px;
+            justify-content: center;
+            padding-bottom: 3px;
+            width: 33px;
+          }
+          :hover .rs-calendar-table-cell-content {
+            background-color: ${p => p.theme.color.blueYonder[25]};
+            color: ${p => p.theme.color.blueYonder[100]};
+          }
+          &[role='columnheader'] .rs-calendar-table-cell-content,
+          &[role='columnheader']:hover .rs-calendar-table-cell-content {
+            background-color: transparent;
+            color: ${p => p.theme.color.slateGray};
+          }
+          &.rs-calendar-table-cell-disabled .rs-calendar-table-cell-content {
+            background-color: transparent;
+            color: ${p => p.theme.color.lightGray};
+          }
+          &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {
+            background-color: ${p => p.theme.color.blueGray[100]};
+          }
+        }
+      }
+    }
+  }
+`