@toptal/picasso-lab 9.3.1 → 10.0.0

package/src/DatePicker/DatePicker.tsx

@@ -1,366 +0,0 @@
-/* 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

@@ -1,51 +0,0 @@
-// 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

@@ -1,2 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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