@toptal/picasso-lab 9.3.0 → 9.3.1

package/src/Calendar/Calendar.tsx

@@ -0,0 +1,215 @@
+import React, { forwardRef, ReactNode } from 'react'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import SimpleReactCalendar from 'simple-react-calendar'
+import cx from 'classnames'
+import format from 'date-fns/format'
+import { Theme, makeStyles } from '@material-ui/core/styles'
+import { BaseProps } from '@toptal/picasso-shared'
+import { Button, Typography } from '@toptal/picasso'
+import { ChevronMinor16, BackMinor16 } from '@toptal/picasso/Icon'
+
+import {
+  CalendarProps,
+  MonthHeaderProps,
+  WeekProps,
+  DayOfWeekProps,
+  DayProps,
+  DaysOfWeekProps
+} from './types'
+import styles from './styles'
+
+type SimpleReactCalendarRangeType = {
+  start: Date
+  end: Date
+}
+export type DateOrDateRangeType = Date | DateRangeType
+export type DateRangeType = [Date, Date]
+
+export { DayProps }
+
+const getNormalizedValue = (value: DateOrDateRangeType | undefined) => {
+  if (!value) {
+    return
+  }
+
+  if (value instanceof Date) {
+    return value
+  }
+
+  const [start, end] = value
+
+  return { start, end }
+}
+
+export interface Props
+  extends BaseProps,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
+  onChange: (value: DateOrDateRangeType) => void
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void
+  renderDay?: (args: DayProps) => ReactNode
+  minDate?: Date
+  maxDate?: Date
+  range?: boolean
+  value?: DateOrDateRangeType
+  activeMonth?: Date
+  disabledIntervals?: { start: Date; end: Date }[]
+  weekStartsOn?: number
+}
+
+const isDateRange = (
+  value: Date | SimpleReactCalendarRangeType
+): value is SimpleReactCalendarRangeType => {
+  return !(value instanceof Date) && Boolean(value.start && value.end)
+}
+
+const useStyles = makeStyles<Theme>(styles, { name: 'PicassoCalendar' })
+
+export const Calendar = forwardRef<HTMLDivElement, Props>(function Calendar(
+  props,
+  ref
+) {
+  const classes = useStyles()
+  const {
+    range,
+    activeMonth,
+    value,
+    onChange,
+    minDate,
+    maxDate,
+    disabledIntervals,
+    renderDay,
+    weekStartsOn,
+    ...rest
+  } = props
+
+  const handleChange = (selection: Date | SimpleReactCalendarRangeType) => {
+    if (isDateRange(selection)) {
+      const { start, end } = selection
+
+      onChange([start, end])
+    } else {
+      onChange(selection)
+    }
+  }
+
+  return (
+    <div ref={ref} {...rest} tabIndex={0}>
+      <SimpleReactCalendar
+        selected={getNormalizedValue(value)}
+        onSelect={handleChange}
+        customRender={({ children }: CalendarProps) => {
+          return <div className={classes.root}>{children}</div>
+        }}
+        renderDay={(dayProps: DayProps) => {
+          const {
+            key,
+            isDisabled,
+            isSelected,
+            isSelectable,
+            isToday,
+            isMonthNext,
+            isMonthPrev,
+            isSelectionStart,
+            isSelectionEnd,
+            handleOnClick,
+            handleOnEnter,
+            getDayFormatted,
+            date,
+            ISODate
+          } = dayProps
+
+          const defaultMarkup = (
+            <button
+              data-testid={`day-button-${
+                isSelected ? 'selected' : getDayFormatted(date)
+              }`}
+              data-simple-react-calendar-day={ISODate}
+              key={key}
+              tabIndex={isDisabled || !isSelectable ? -1 : undefined}
+              className={cx(classes.day, {
+                [classes.selected]: isSelected,
+                [classes.selectable]: isSelectable,
+                [classes.today]: isToday,
+                [classes.grayed]:
+                  (isMonthPrev || isMonthNext) && !isSelected && !isDisabled,
+                [classes.disabled]: isDisabled || !isSelectable,
+                [classes.startSelection]: isSelectionStart,
+                [classes.endSelection]: isSelectionEnd
+              })}
+              onClick={handleOnClick}
+              onMouseEnter={handleOnEnter}
+              value={date.toString()}
+              type='button'
+            >
+              {getDayFormatted(date)}
+            </button>
+          )
+
+          return renderDay
+            ? renderDay({
+                ...dayProps,
+                children: defaultMarkup
+              })
+            : defaultMarkup
+        }}
+        renderMonthHeader={({
+          switchMonth,
+          activeMonth: headerActiveMonth
+        }: MonthHeaderProps) => {
+          return (
+            <div className={classes.actions}>
+              <Button
+                title='Previous month'
+                variant='secondary'
+                size='small'
+                onClick={() => switchMonth(-1)}
+              >
+                <BackMinor16 />
+              </Button>
+              <Typography variant='heading' size='medium'>
+                {format(headerActiveMonth, 'MMMM y')}
+              </Typography>
+              <Button
+                title='Next month'
+                variant='secondary'
+                size='small'
+                onClick={() => switchMonth(1)}
+              >
+                <ChevronMinor16 />
+              </Button>
+            </div>
+          )
+        }}
+        renderDaysOfWeek={({ children }: DaysOfWeekProps) => {
+          return <div className={classes.weekDays}>{children}</div>
+        }}
+        renderDayOfWeek={({ day, key }: DayOfWeekProps) => {
+          return (
+            <div key={key} className={classes.weekDay}>
+              {day}
+            </div>
+          )
+        }}
+        renderWeek={({ children }: WeekProps) => {
+          return <div className={classes.week}>{children}</div>
+        }}
+        activeMonth={activeMonth || value}
+        mode={range ? 'range' : 'single'}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabledIntervals={disabledIntervals}
+        getNoticeContent={() => null}
+        weekStartsOn={weekStartsOn}
+      />
+    </div>
+  )
+})
+
+Calendar.defaultProps = {
+  range: false
+}
+
+Calendar.displayName = 'Calendar'
+
+export default Calendar

package/src/Calendar/__snapshots__/test.tsx.snap

@@ -0,0 +1,447 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Calendar renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      tabindex="0"
+    >
+      <div
+        class="PicassoCalendar-root"
+      >
+        <div
+          class="PicassoCalendar-actions"
+        >
+          <button
+            class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root"
+            data-component-type="button"
+            tabindex="0"
+            title="Previous month"
+            type="button"
+          >
+            <span
+              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+            >
+              <svg
+                class="PicassoSvgBackMinor16-root"
+                style="min-width: 16px; min-height: 16px;"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M9.997 3.29l.707.707-4 4 4 4-.707.707L5.29 7.997l.707-.707 4-4z"
+                />
+              </svg>
+            </span>
+          </button>
+          <h3
+            class="MuiTypography-root MuiTypography-h3"
+          >
+            February 2019
+          </h3>
+          <button
+            class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root"
+            data-component-type="button"
+            tabindex="0"
+            title="Next month"
+            type="button"
+          >
+            <span
+              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+            >
+              <svg
+                class="PicassoSvgChevronMinor16-root"
+                style="min-width: 16px; min-height: 16px;"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M5.997 3.29l4 4 .707.707-.707.707-4 4-.707-.707 4-4-4-4 .707-.707z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div
+          class="calendar-month"
+        >
+          <div
+            class="PicassoCalendar-weekDays"
+          >
+            <div
+              class="PicassoCalendar-weekDay"
+            >
+              Mon
+            </div>
+            <div
+              class="PicassoCalendar-weekDay"
+            >
+              Tue
+            </div>
+            <div
+              class="PicassoCalendar-weekDay"
+            >
+              Wed
+            </div>
+            <div
+              class="PicassoCalendar-weekDay"
+            >
+              Thu
+            </div>
+            <div
+              class="PicassoCalendar-weekDay"
+            >
+              Fri
+            </div>
+            <div
+              class="PicassoCalendar-weekDay"
+            >
+              Sat
+            </div>
+            <div
+              class="PicassoCalendar-weekDay"
+            >
+              Sun
+            </div>
+          </div>
+          <div
+            class="PicassoCalendar-week"
+          >
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
+              data-simple-react-calendar-day="2019-01-28"
+              data-testid="day-button-28"
+              type="button"
+              value="Mon Jan 28 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              28
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
+              data-simple-react-calendar-day="2019-01-29"
+              data-testid="day-button-29"
+              type="button"
+              value="Tue Jan 29 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              29
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
+              data-simple-react-calendar-day="2019-01-30"
+              data-testid="day-button-30"
+              type="button"
+              value="Wed Jan 30 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              30
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
+              data-simple-react-calendar-day="2019-01-31"
+              data-testid="day-button-31"
+              type="button"
+              value="Thu Jan 31 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              31
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-01"
+              data-testid="day-button-1"
+              type="button"
+              value="Fri Feb 01 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              1
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-02"
+              data-testid="day-button-2"
+              type="button"
+              value="Sat Feb 02 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              2
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-03"
+              data-testid="day-button-3"
+              type="button"
+              value="Sun Feb 03 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              3
+            </button>
+          </div>
+          <div
+            class="PicassoCalendar-week"
+          >
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-04"
+              data-testid="day-button-4"
+              type="button"
+              value="Mon Feb 04 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              4
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-05"
+              data-testid="day-button-5"
+              type="button"
+              value="Tue Feb 05 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              5
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-06"
+              data-testid="day-button-6"
+              type="button"
+              value="Wed Feb 06 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              6
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-07"
+              data-testid="day-button-7"
+              type="button"
+              value="Thu Feb 07 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              7
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-08"
+              data-testid="day-button-8"
+              type="button"
+              value="Fri Feb 08 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              8
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-09"
+              data-testid="day-button-9"
+              type="button"
+              value="Sat Feb 09 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              9
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-10"
+              data-testid="day-button-10"
+              type="button"
+              value="Sun Feb 10 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              10
+            </button>
+          </div>
+          <div
+            class="PicassoCalendar-week"
+          >
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-11"
+              data-testid="day-button-11"
+              type="button"
+              value="Mon Feb 11 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              11
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-12"
+              data-testid="day-button-12"
+              type="button"
+              value="Tue Feb 12 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              12
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-13"
+              data-testid="day-button-13"
+              type="button"
+              value="Wed Feb 13 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              13
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-14"
+              data-testid="day-button-14"
+              type="button"
+              value="Thu Feb 14 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              14
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-15"
+              data-testid="day-button-15"
+              type="button"
+              value="Fri Feb 15 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              15
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-16"
+              data-testid="day-button-16"
+              type="button"
+              value="Sat Feb 16 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              16
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-17"
+              data-testid="day-button-17"
+              type="button"
+              value="Sun Feb 17 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              17
+            </button>
+          </div>
+          <div
+            class="PicassoCalendar-week"
+          >
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-18"
+              data-testid="day-button-18"
+              type="button"
+              value="Mon Feb 18 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              18
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-19"
+              data-testid="day-button-19"
+              type="button"
+              value="Tue Feb 19 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              19
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-20"
+              data-testid="day-button-20"
+              type="button"
+              value="Wed Feb 20 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              20
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-21"
+              data-testid="day-button-21"
+              type="button"
+              value="Thu Feb 21 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              21
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-22"
+              data-testid="day-button-22"
+              type="button"
+              value="Fri Feb 22 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              22
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-23"
+              data-testid="day-button-23"
+              type="button"
+              value="Sat Feb 23 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              23
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-24"
+              data-testid="day-button-24"
+              type="button"
+              value="Sun Feb 24 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              24
+            </button>
+          </div>
+          <div
+            class="PicassoCalendar-week"
+          >
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-25"
+              data-testid="day-button-25"
+              type="button"
+              value="Mon Feb 25 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              25
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-26"
+              data-testid="day-button-26"
+              type="button"
+              value="Tue Feb 26 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              26
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-27"
+              data-testid="day-button-27"
+              type="button"
+              value="Wed Feb 27 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              27
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable"
+              data-simple-react-calendar-day="2019-02-28"
+              data-testid="day-button-28"
+              type="button"
+              value="Thu Feb 28 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              28
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
+              data-simple-react-calendar-day="2019-03-01"
+              data-testid="day-button-1"
+              type="button"
+              value="Fri Mar 01 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              1
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
+              data-simple-react-calendar-day="2019-03-02"
+              data-testid="day-button-2"
+              type="button"
+              value="Sat Mar 02 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              2
+            </button>
+            <button
+              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
+              data-simple-react-calendar-day="2019-03-03"
+              data-testid="day-button-3"
+              type="button"
+              value="Sun Mar 03 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+            >
+              3
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/Calendar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Calendar'
+export * from './Calendar'