@toptal/picasso-lab 9.1.1-alpha-sat-750--poc-picasso-with-ssr.2531 → 9.3.1

package/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,366 @@
+/* eslint-disable max-lines-per-function, max-lines */
+/* eslint-disable complexity, max-statements */ // Squiggly lines makes code difficult to work with
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import {
+  BaseProps,
+  Container,
+  Input,
+  InputAdornment,
+  InputProps
+} from '@toptal/picasso'
+import { Calendar16 } from '@toptal/picasso/Icon'
+import Popper from '@toptal/picasso/Popper'
+import { noop } from '@toptal/picasso/utils'
+import formatDate from 'date-fns/format'
+import PopperJs from 'popper.js'
+import React, {
+  KeyboardEvent,
+  ReactNode,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react'
+
+import Calendar, {
+  DateOrDateRangeType,
+  DateRangeType,
+  DayProps
+} from '../Calendar'
+import {
+  DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT,
+  DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT
+} from './constants'
+import styles from './styles'
+import { DatePickerValue, DatePickerStringParser } from './types'
+import {
+  formatDateRange,
+  datePickerParseDateString,
+  timezoneConvert,
+  timezoneFormat,
+  isValidDateValue
+} from './utils'
+
+const EMPTY_INPUT_VALUE = ''
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoDatePicker'
+})
+
+export interface Props
+  extends BaseProps,
+    Omit<
+      InputProps,
+      | 'value'
+      | 'onSelect'
+      | 'type'
+      | 'multiline'
+      | 'rows'
+      | 'defaultValue'
+      | 'onChange'
+    > {
+  /** Date that will be selected in `DatePicker` */
+  value?: DatePickerValue
+  /** Method that will be invoked with selected values */
+  onChange: (value: DatePickerValue) => void
+  /** Invoked when user goes away from `DatePicker` input */
+  onBlur?: () => void
+  /** Whether calendar supports single date selection or range */
+  range?: boolean
+  /** Earliest date available for selection */
+  minDate?: Date
+  /** Latest date available for selection */
+  maxDate?: Date
+  /** Whether calendar should be closed after date selection. True by default */
+  hideOnSelect?: boolean
+  /** Date format that user will see in the input */
+  displayDateFormat?: string
+  /** Date range where selection is not allowed */
+  disabledIntervals?: { start: Date; end: Date }[]
+  /** Date format that user will see during manual input */
+  editDateFormat?: string
+  /** Specify icon which should be rendered inside `DatePicker` */
+  icon?: ReactNode
+  /** Specify a value if want to enable browser autofill */
+  autoComplete?: string
+  /** Indicate whether `DatePicker`'s input is in error state */
+  error?: boolean
+  /** Function to override default markup to show Date */
+  renderDay?: (args: DayProps) => ReactNode
+  popperContainer?: HTMLElement
+  /** Index of the first day of the week (0 - Sunday). Default is 1 - Monday */
+  weekStartsOn?: number
+  /** IANA timezone to display and edit date(s) */
+  timezone?: string
+  /* Invoked when input value has been changed. If method failed to parse a value, it must return undefined. Used to process input value before passing it to the `onChange` */
+  parseInputValue?: DatePickerStringParser
+}
+export const DatePicker = (props: Props) => {
+  const {
+    range,
+    hideOnSelect,
+    displayDateFormat = DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT,
+    editDateFormat = DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT,
+    onBlur = noop,
+    onChange,
+    value,
+    width,
+    icon,
+    minDate,
+    maxDate,
+    disabledIntervals,
+    popperContainer,
+    renderDay,
+    weekStartsOn,
+    timezone,
+    size,
+    parseInputValue = datePickerParseDateString,
+    ...rest
+  } = props
+  const classes = useStyles()
+
+  const inputProps = rest
+
+  const [calendarIsShown, setCalendarIsShown] = useState(false)
+  const [isInputFocused, setIsInputFocused] = useState(false)
+  const [inputValue, setInputValue] = useState(EMPTY_INPUT_VALUE)
+  const [
+    calendarValue,
+    setCalendarValue
+  ] = useState<DateOrDateRangeType | null>(null)
+
+  const hideCalendar = () => setCalendarIsShown(false)
+  const showCalendar = () => setCalendarIsShown(true)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const popperRef = useRef<PopperJs>(null)
+  const calendarRef = useRef<HTMLDivElement>(null)
+  const inputWrapperRef = useRef<HTMLDivElement>(null)
+
+  // Format the input based on its 'focus' state
+  const formatInputValue = useCallback(
+    (valueToFormat: DateOrDateRangeType | string) => {
+      if (!isValidDateValue(valueToFormat)) {
+        return valueToFormat
+      }
+
+      return Array.isArray(valueToFormat)
+        ? formatDateRange(valueToFormat as DateRangeType, displayDateFormat)
+        : formatDate(
+            valueToFormat as Date,
+            isInputFocused ? editDateFormat : displayDateFormat
+          )
+    },
+    [isInputFocused, editDateFormat, displayDateFormat]
+  )
+
+  // Keep the input format in sync with its 'focus' state
+  useLayoutEffect(() => {
+    setInputValue(() => {
+      if (!value) {
+        return EMPTY_INPUT_VALUE
+      }
+
+      if (!isValidDateValue(value)) {
+        return value
+      }
+
+      return formatInputValue(timezoneConvert(value, timezone))
+    })
+  }, [value, timezone, formatInputValue])
+
+  // Keep the calendar in sync with the input value
+  useLayoutEffect(() => {
+    setCalendarValue(() => {
+      if (!value || !isValidDateValue(value)) {
+        return null
+      }
+
+      return timezoneConvert(value, timezone)
+    })
+  }, [value, timezone])
+
+  const isInsideDatePicker = (node: Node) => {
+    return (
+      popperRef.current?.popper.contains(node) ||
+      inputWrapperRef.current?.contains(node)
+    )
+  }
+
+  const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+    const isFocusedInsideDatePicker = isInsideDatePicker(
+      (event.relatedTarget || document.activeElement) as Node
+    )
+
+    if (isFocusedInsideDatePicker) {
+      return
+    }
+
+    hideCalendar()
+    onBlur()
+
+    setIsInputFocused(false)
+  }
+
+  const handleInputChange = (
+    e: React.ChangeEvent<
+      HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement
+    >
+  ) => {
+    // TODO: change this if manual entering of range is needed
+    if (range) {
+      return
+    }
+
+    const nextValue = e.target.value
+
+    // TODO: add char filtering (only number , `-` or ` ` allowed)
+    setInputValue(nextValue)
+    if (!nextValue) {
+      onChange(null)
+    } else {
+      const parsedInputValue = parseInputValue(nextValue, {
+        dateFormat: editDateFormat,
+        timezone,
+        minDate,
+        maxDate
+      })
+
+      if (parsedInputValue) {
+        onChange(parsedInputValue)
+      }
+    }
+  }
+
+  const focus = () => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }
+
+  const handleCalendarChange = (nextValue: DateOrDateRangeType) => {
+    const nextTimezoneValue = Array.isArray(nextValue)
+      ? (nextValue.map((date: Date) =>
+          timezoneFormat(date, timezone)
+        ) as DateRangeType)
+      : timezoneFormat(nextValue, timezone)
+
+    onChange(nextTimezoneValue)
+    setCalendarValue(nextTimezoneValue)
+
+    if (hideOnSelect) {
+      focus()
+      hideCalendar()
+    }
+  }
+
+  const handleInputKeydown = (event: KeyboardEvent<HTMLInputElement>) => {
+    const key = event.key
+
+    if (key === 'Escape') {
+      hideCalendar()
+      event.currentTarget.blur()
+
+      return
+    }
+
+    if (key === 'Enter') {
+      if (!calendarIsShown) {
+        showCalendar()
+      } else {
+        hideCalendar()
+      }
+
+      return
+    }
+
+    if (key === 'Tab' && calendarIsShown) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (!calendarIsShown) {
+        event.currentTarget.blur()
+      } else {
+        // TODO: Manage this whole logic inside simple-react-calendar
+        const firstButton = calendarRef.current?.querySelector<HTMLButtonElement>(
+          'button:not([tabindex="-1"])'
+        )
+
+        if (firstButton) {
+          firstButton.focus()
+        }
+      }
+    }
+  }
+
+  const handleFocusOrClick = () => {
+    showCalendar()
+    setIsInputFocused(true)
+  }
+
+  const startAdornment =
+    size !== 'small' ? (
+      <InputAdornment position='start' disablePointerEvents>
+        {icon || <Calendar16 />}
+      </InputAdornment>
+    ) : undefined
+
+  return (
+    <>
+      <Container inline={width !== 'full'} ref={inputWrapperRef}>
+        <Input
+          {...inputProps}
+          ref={inputRef}
+          onKeyDown={handleInputKeydown}
+          onClick={handleFocusOrClick}
+          onFocus={handleFocusOrClick}
+          onBlur={handleBlur}
+          value={inputValue}
+          onChange={handleInputChange}
+          size={size}
+          startAdornment={startAdornment}
+          width={width}
+        />
+      </Container>
+      {inputWrapperRef.current && (
+        <Popper
+          placement='bottom-start'
+          open={calendarIsShown}
+          anchorEl={inputWrapperRef.current}
+          autoWidth={false}
+          enableCompactMode
+          container={popperContainer}
+          ref={popperRef}
+        >
+          <Calendar
+            data-testid='calendar'
+            ref={calendarRef}
+            range={range}
+            value={calendarValue ?? undefined}
+            minDate={minDate}
+            maxDate={maxDate}
+            disabledIntervals={disabledIntervals}
+            renderDay={renderDay}
+            onChange={handleCalendarChange}
+            onBlur={handleBlur}
+            className={classes.calendar}
+            weekStartsOn={weekStartsOn}
+          />
+        </Popper>
+      )}
+    </>
+  )
+}
+
+DatePicker.defaultProps = {
+  range: false,
+  hideOnSelect: true,
+  onBlur: noop,
+  editDateFormat: 'MM-dd-yyyy',
+  displayDateFormat: 'MMM d, yyyy',
+  autoComplete: 'off'
+}
+
+DatePicker.displayName = 'DatePicker'
+
+export default DatePicker

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatePicker renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="PicassoContainer-inline"
+    >
+      <div
+        class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+      >
+        <div
+          class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionStart"
+        >
+          <svg
+            class="PicassoSvgCalendar16-root"
+            style="min-width: 16px; min-height: 16px;"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M3 2V1h1v1h8V1h1v1h3v13H0V2h3zm0 1H1v2h14V3h-2v1h-1V3H4v1H3V3zm12 3H1v8h14V6z"
+            />
+          </svg>
+        </div>
+        <input
+          autocomplete="off"
+          class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+          type="text"
+          value="Dec 12, 2019"
+        />
+        <fieldset
+          aria-hidden="true"
+          class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
+          style="padding-left: 8px;"
+        >
+          <legend
+            class="PrivateNotchedOutline-legend"
+            style="width: 0.01px;"
+          >
+            <span>
+              ​
+            </span>
+          </legend>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/DatePicker/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT = 'MM-dd-yyyy'
+export const DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT = 'MMM d, yyyy'

package/src/DatePicker/index.ts

@@ -0,0 +1,5 @@
+export { default } from './DatePicker'
+export type { Props as DatePickerProps } from './DatePicker'
+export type { DatePickerValue, DatePickerStringParser } from './types'
+export { datePickerParseDateString } from './utils'
+export { DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT, DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT } from './constants'

package/src/DatePicker/story/AllowCustomValue.example.tsx

@@ -0,0 +1,33 @@
+import {
+  DatePicker,
+  DatePickerValue,
+  DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT,
+  datePickerParseDateString
+} from '@toptal/picasso-lab'
+import React, { useState } from 'react'
+
+const AllowCustomValue = () => {
+  const [datepickerValue, setDatepickerValue] = useState<DatePickerValue>(
+    'some custom value'
+  )
+
+  const parseInputValue = (value: string) => {
+    const result = datePickerParseDateString(value, {
+      dateFormat: DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT
+    })
+
+    return result ?? value
+  }
+
+  return (
+    <div style={{ height: '50vh' }}>
+      <DatePicker
+        value={datepickerValue}
+        parseInputValue={parseInputValue}
+        onChange={setDatepickerValue}
+      />
+    </div>
+  )
+}
+
+export default AllowCustomValue

package/src/DatePicker/story/Autocomplete.example.tsx

@@ -0,0 +1,47 @@
+import React, { useState, FormEvent } from 'react'
+import { DatePicker } from '@toptal/picasso-lab'
+import { Form, Button, Container } from '@toptal/picasso'
+
+const AutocompleteExample = () => {
+  const [datepickerValue, setDatepickerValue] = useState<Date>()
+
+  return (
+    <div style={{ height: '50vh' }}>
+      <Form
+        onSubmit={(e: FormEvent<HTMLFormElement>) => {
+          e.preventDefault()
+        }}
+      >
+        <Form.Field>
+          <Form.Label>Disabled by default</Form.Label>
+          <DatePicker
+            name='date'
+            value={datepickerValue}
+            onChange={date => {
+              setDatepickerValue(date as Date)
+            }}
+          />
+        </Form.Field>
+        <Form.Field>
+          <Form.Label>Enabled</Form.Label>
+          <DatePicker
+            name='cc-exp'
+            value={datepickerValue}
+            autoComplete='cc-exp'
+            onChange={date => {
+              setDatepickerValue(date as Date)
+            }}
+          />
+        </Form.Field>
+
+        <Container top='small'>
+          <Button type='submit'>
+            Submit to include value to the browser autocomplete
+          </Button>
+        </Container>
+      </Form>
+    </div>
+  )
+}
+
+export default AutocompleteExample

package/src/DatePicker/story/Default.example.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import { DatePicker } from '@toptal/picasso-lab'
+
+const DefaultExample = () => {
+  const [datepickerValue, setDatepickerValue] = useState<Date>()
+
+  return (
+    <div style={{ height: '50vh' }}>
+      <DatePicker
+        value={datepickerValue}
+        onChange={date => {
+          setDatepickerValue(date as Date)
+        }}
+      />
+    </div>
+  )
+}
+
+export default DefaultExample

package/src/DatePicker/story/Error.example.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Form } from '@toptal/picasso'
+import { DatePicker } from '@toptal/picasso-lab'
+
+const DefaultExample = () => {
+  const [datepickerValue, setDatepickerValue] = useState<Date>()
+
+  return (
+    <div style={{ height: '50vh' }}>
+      <Form>
+        <Form.Field>
+          <Form.Label>Failed validation</Form.Label>
+          <DatePicker
+            value={datepickerValue}
+            error
+            onChange={date => {
+              setDatepickerValue(date as Date)
+            }}
+          />
+        </Form.Field>
+      </Form>
+    </div>
+  )
+}
+
+export default DefaultExample

package/src/DatePicker/story/Range.example.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { DatePicker } from '@toptal/picasso-lab'
+
+const RangeExample = () => {
+  const [value, setValue] = useState<[Date, Date]>()
+
+  return (
+    <div style={{ height: '50vh' }}>
+      <DatePicker
+        range
+        value={value}
+        onChange={dates => {
+          const [start, end] = dates as [Date, Date]
+
+          setValue([start, end])
+        }}
+      />
+    </div>
+  )
+}
+
+export default RangeExample

package/src/DatePicker/story/WithCustomDayRendering.example.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { Tooltip } from '@toptal/picasso'
+import { DatePicker } from '@toptal/picasso-lab'
+import { isBefore, isWithinInterval } from 'date-fns'
+
+const WithCustomDayRendering = () => {
+  const [datepickerValue, setDatepickerValue] = useState(new Date('2015-12-12'))
+
+  const minDate = new Date('2015-12-07')
+
+  const disabledIntervals = [
+    { start: new Date('2015-12-20'), end: new Date('2015-12-30') }
+  ]
+
+  return (
+    <div style={{ height: '50vh' }}>
+      <DatePicker
+        value={datepickerValue}
+        minDate={minDate}
+        disabledIntervals={disabledIntervals}
+        renderDay={({ date, children, isSelectable }) => {
+          const day = new Date(date)
+
+          if (!isSelectable) {
+            if (isBefore(day, minDate)) {
+              return <Tooltip content='It is vacation time'>{children}</Tooltip>
+            }
+            const isWithinDisabledInterval = disabledIntervals.some(interval =>
+              isWithinInterval(day, interval)
+            )
+
+            if (isWithinDisabledInterval) {
+              return <Tooltip content='In a meeting'>{children}</Tooltip>
+            }
+          }
+
+          return children
+        }}
+        onChange={date => {
+          setDatepickerValue(date as Date)
+        }}
+      />
+    </div>
+  )
+}
+
+export default WithCustomDayRendering

package/src/DatePicker/story/WithInitialValue.example.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import { DatePicker } from '@toptal/picasso-lab'
+
+const WithInitialValueExample = () => {
+  const [datepickerValue, setDatepickerValue] = useState(new Date(2019, 10, 10))
+
+  return (
+    <div style={{ height: '50vh' }}>
+      <DatePicker
+        value={datepickerValue}
+        onChange={date => {
+          setDatepickerValue(date as Date)
+        }}
+      />
+    </div>
+  )
+}
+
+export default WithInitialValueExample

package/src/DatePicker/story/WithInputProps.example.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import { DatePicker } from '@toptal/picasso-lab'
+import { Search16 } from '@toptal/picasso'
+
+const WithInputPropsExample = () => {
+  const [value, setValue] = useState<Date>()
+
+  return (
+    <div style={{ height: '50vh', width: '100%' }}>
+      <DatePicker
+        value={value}
+        icon={<Search16 />}
+        iconPosition='end'
+        width='full'
+        placeholder='Please select date...'
+        onChange={date => {
+          setValue(date as Date)
+        }}
+      />
+    </div>
+  )
+}
+
+export default WithInputPropsExample

package/src/DatePicker/story/WithNoHideOnSelect.example.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { DatePicker, DatePickerValue } from '@toptal/picasso-lab'
+
+const WithNoHideOnSelect = () => {
+  const [datepickerValue, setDatepickerValue] = useState<DatePickerValue>()
+
+  return (
+    <div style={{ height: '50vh' }}>
+      <DatePicker
+        value={datepickerValue}
+        hideOnSelect={false}
+        onChange={(date: DatePickerValue) => {
+          setDatepickerValue(date)
+        }}
+      />
+    </div>
+  )
+}
+
+export default WithNoHideOnSelect