@toptal/picasso-lab 9.3.1 → 10.0.0

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

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

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

@@ -1,32 +0,0 @@
-import React, { useState } from 'react'
-import { DatePicker } from '@toptal/picasso-lab'
-import { Search16 } from '@toptal/picasso'
-
-const WithSelectionLimitsExample = () => {
-  const [value, setValue] = useState(new Date('2015-12-12'))
-  const minDate = new Date('2015-12-01')
-  const maxDate = new Date('2015-12-30')
-  const disabledIntervals = [
-    { start: new Date('2015-12-03'), end: new Date('2015-12-08') },
-    { start: new Date('2015-12-20'), end: new Date('2015-12-30') }
-  ]
-
-  return (
-    <div style={{ height: '50vh', width: '100%' }}>
-      <DatePicker
-        value={value}
-        minDate={minDate}
-        maxDate={maxDate}
-        icon={<Search16 />}
-        iconPosition='end'
-        placeholder='Please select date...'
-        disabledIntervals={disabledIntervals}
-        onChange={date => {
-          setValue(date as Date)
-        }}
-      />
-    </div>
-  )
-}
-
-export default WithSelectionLimitsExample

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

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

package/src/DatePicker/story/index.jsx

@@ -1,50 +0,0 @@
-import { DatePicker } from '../DatePicker'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const page = PicassoBook.section('Picasso Lab').createPage(
-  'DatePicker',
-  `
-    Date Picker component
-    
-    ${PicassoBook.createBaseDocsLink(
-      'https://share.goabstract.com/cc5f669e-ee2c-4375-946d-93b20db16ecc?collectionLayerId=10d3230f-5c9c-4fed-85b2-5cfda0bcd25f&mode=design&present=true'
-    )}
-  `
-)
-
-page
-  .createTabChapter('Props')
-  .addComponentDocs({ component: DatePicker, name: 'DatePicker' })
-
-page
-  .createChapter()
-  .addExample('DatePicker/story/Default.example.tsx', 'Default') // picasso-skip-visuals
-  .addExample('DatePicker/story/Range.example.tsx', 'Range Mode') // picasso-skip-visuals
-  .addExample('DatePicker/story/WithOnBlurHandler.example.tsx', {
-    title: 'With onBlur handler',
-    description: 'Fire onBlur handler on click outside or navigate with tab'
-  }) // picasso-skip-visuals
-  .addExample('DatePicker/story/WithNoHideOnSelect.example.tsx', {
-    title: 'With no hideOnSelect',
-    description: 'Do not hide calendar on date select'
-  }) // picasso-skip-visuals
-  .addExample(
-    'DatePicker/story/WithInitialValue.example.tsx',
-    'With initial value specified'
-  ) // picasso-skip-visuals
-  .addExample('DatePicker/story/WithInputProps.example.tsx', 'With Input Props') // picasso-skip-visuals
-  .addExample('DatePicker/story/Autocomplete.example.tsx', 'Autocomplete') // picasso-skip-visuals
-  .addExample('DatePicker/story/Error.example.tsx', 'Error') // picasso-skip-visuals
-  .addExample(
-    'DatePicker/story/WithSelectionLimits.example.tsx',
-    'With Selection Limits'
-  ) // picasso-skip-visuals
-  .addExample(
-    'DatePicker/story/WithCustomDayRendering.example.tsx',
-    'With Custom Day rendering'
-  ) // picasso-skip-visuals
-  .addExample('DatePicker/story/WithTimezone.example.tsx', 'With Timezone') // picasso-skip-visuals
-  .addExample(
-    'DatePicker/story/AllowCustomValue.example.tsx',
-    'With custom value'
-  ) // picasso-skip-visuals

package/src/DatePicker/styles.ts

@@ -1,8 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    calendar: {
-      outline: 'none'
-    }
-  })

package/src/DatePicker/test.tsx

@@ -1,370 +0,0 @@
-/* eslint-disable max-lines-per-function */
-import { Tooltip } from '@toptal/picasso'
-import { act, fireEvent, render } from '@toptal/picasso/test-utils'
-import React, { useState } from 'react'
-
-import { DateOrDateRangeType } from '../Calendar'
-import DatePicker, { Props } from './DatePicker'
-import {
-  datePickerParseDateString,
-  DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT
-} from './'
-
-// eslint-disable-next-line max-lines-per-function
-describe('DatePicker', () => {
-  beforeAll(() => {
-    jest.useFakeTimers()
-  })
-
-  afterAll(() => {
-    jest.useRealTimers()
-  })
-
-  it('renders', () => {
-    const date = new Date('12-12-2019')
-
-    const { container } = render(
-      <DatePicker value={date} onChange={() => {}} />
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('custom day rendering', () => {
-    const date = new Date('12-12-2019')
-
-    const { getByPlaceholderText, getByText } = render(
-      <DatePicker
-        placeholder='dateInput'
-        value={date}
-        onChange={() => {}}
-        renderDay={({ key, children }) => (
-          <Tooltip key={key} content='tooltip content'>
-            {children}
-          </Tooltip>
-        )}
-      />
-    )
-
-    const input = getByPlaceholderText('dateInput')
-
-    fireEvent.click(input)
-
-    const day15 = getByText(/15/)
-
-    fireEvent.mouseOver(day15)
-
-    act(() => {
-      // wait for tooltip's "enterDelay"
-      jest.advanceTimersByTime(600)
-    })
-
-    const tooltip = getByText('tooltip content')
-
-    expect(tooltip).toBeInTheDocument()
-  })
-
-  describe('Input', () => {
-    it('should display date in default displayDateFormat', () => {
-      const { getByPlaceholderText } = renderDatePicker()
-
-      expect(getByPlaceholderText(defaultProps.placeholder)).toHaveAttribute(
-        'value',
-        'Dec 24, 2020'
-      )
-    })
-
-    it('should display date in given displayDateFormat', () => {
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        displayDateFormat: 'MMM|d|yyyy'
-      })
-
-      expect(getByPlaceholderText(defaultProps.placeholder)).toHaveAttribute(
-        'value',
-        'Dec|24|2020'
-      )
-    })
-
-    it('should display date range in default displayDateFormat', () => {
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        range: true,
-        value: [new Date(2020, 11, 24), new Date(2020, 11, 27)]
-      })
-
-      expect(getByPlaceholderText(defaultProps.placeholder)).toHaveAttribute(
-        'value',
-        'Dec 24, 2020 - Dec 27, 2020'
-      )
-    })
-
-    it('should display date range in given displayDateFormat', () => {
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        range: true,
-        value: [new Date(2020, 11, 24), new Date(2020, 11, 27)],
-        displayDateFormat: 'MMM|d|yyyy'
-      })
-
-      expect(getByPlaceholderText(defaultProps.placeholder)).toHaveAttribute(
-        'value',
-        'Dec|24|2020 - Dec|27|2020'
-      )
-    })
-
-    it('should display date in default editDateFormat', () => {
-      const { getByPlaceholderText } = renderDatePicker()
-      const input = getByPlaceholderText(defaultProps.placeholder)
-
-      fireEvent.focus(input)
-
-      expect(input).toHaveAttribute('value', '12-24-2020')
-    })
-
-    it('should display date in given editDateFormat', () => {
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        editDateFormat: 'MM|dd|yyyy'
-      })
-      const input = getByPlaceholderText(defaultProps.placeholder)
-
-      fireEvent.focus(input)
-
-      expect(input).toHaveAttribute('value', '12|24|2020')
-    })
-
-    it('should turn autoComplete off by default', () => {
-      const { getByPlaceholderText } = renderDatePicker()
-
-      expect(getByPlaceholderText(defaultProps.placeholder)).toHaveAttribute(
-        'autocomplete',
-        'off'
-      )
-    })
-
-    it('should turn autoComplete on', () => {
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        autoComplete: 'on'
-      })
-
-      expect(getByPlaceholderText(defaultProps.placeholder)).toHaveAttribute(
-        'autocomplete',
-        'on'
-      )
-    })
-
-    it('should display date in given timezone', () => {
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        timezone: FAR_EAST_TIMEZONE,
-        value: new Date(2020, 6, 24, 18)
-      })
-
-      expect(getByPlaceholderText(defaultProps.placeholder)).toHaveAttribute(
-        'value',
-        `Jul 25, 2020`
-      )
-    })
-
-    it('should work within interval', () => {
-      const MIN_DATE = new Date(2020, 6, 10)
-      const MAX_DATE = new Date(2020, 6, 25)
-
-      const handleChange = jest.fn()
-
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        minDate: MIN_DATE,
-        maxDate: MAX_DATE,
-        onChange: handleChange
-      })
-
-      const input = getByPlaceholderText(defaultProps.placeholder)
-
-      fireEvent.change(input, { target: { value: '07-09-2020' } })
-      expect(handleChange).not.toHaveBeenCalled()
-
-      fireEvent.change(input, { target: { value: '07-26-2020' } })
-      expect(handleChange).not.toHaveBeenCalled()
-
-      fireEvent.change(input, { target: { value: '07-22-2020' } })
-      expect(handleChange).toHaveBeenCalledWith(new Date(2020, 6, 22))
-
-      // check min edge
-      fireEvent.change(input, { target: { value: '07-10-2020' } })
-      expect(handleChange).toHaveBeenCalledWith(new Date(2020, 6, 10))
-
-      // check max edge
-      fireEvent.change(input, { target: { value: '07-25-2020' } })
-      expect(handleChange).toHaveBeenCalledWith(new Date(2020, 6, 25))
-    })
-
-    it('should work with minDate only', () => {
-      const MIN_DATE = new Date(2020, 6, 10)
-
-      const handleChange = jest.fn()
-
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        minDate: MIN_DATE,
-        onChange: handleChange
-      })
-
-      const input = getByPlaceholderText(defaultProps.placeholder)
-
-      fireEvent.change(input, { target: { value: '07-09-2020' } })
-      expect(handleChange).not.toHaveBeenCalled()
-
-      fireEvent.change(input, { target: { value: '07-22-2020' } })
-      expect(handleChange).toHaveBeenCalledWith(new Date(2020, 6, 22))
-
-      // check min edge
-      fireEvent.change(input, { target: { value: '07-10-2020' } })
-      expect(handleChange).toHaveBeenCalledWith(new Date(2020, 6, 10))
-    })
-
-    it('should work with maxDate', () => {
-      const MAX_DATE = new Date(2020, 6, 25)
-
-      const handleChange = jest.fn()
-
-      const { getByPlaceholderText } = renderDatePicker({
-        ...defaultProps,
-        maxDate: MAX_DATE,
-        onChange: handleChange
-      })
-
-      const input = getByPlaceholderText(defaultProps.placeholder)
-
-      fireEvent.change(input, { target: { value: '07-26-2020' } })
-      expect(handleChange).not.toHaveBeenCalled()
-
-      fireEvent.change(input, { target: { value: '07-22-2020' } })
-      expect(handleChange).toHaveBeenCalledWith(new Date(2020, 6, 22))
-
-      // check max edge
-      fireEvent.change(input, { target: { value: '07-25-2020' } })
-      expect(handleChange).toHaveBeenCalledWith(new Date(2020, 6, 25))
-    })
-
-    describe('should work with overwritten `parseInputValue`', () => {
-      const parseInputValue = (value: string) => {
-        const result = datePickerParseDateString(value, {
-          dateFormat: DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT
-        })
-
-        return result ?? value
-      }
-
-      it('emits `string` if value is not a valid date', () => {
-        const handleChange = jest.fn()
-
-        const { getByPlaceholderText } = renderDatePicker({
-          ...defaultProps,
-          parseInputValue,
-          onChange: handleChange
-        })
-
-        const input = getByPlaceholderText(defaultProps.placeholder)
-
-        fireEvent.change(input, { target: { value: 'some random text' } })
-        expect(handleChange).toHaveBeenCalledWith('some random text')
-      })
-
-      it('emits `Date` if value is a valid date', () => {
-        const handleChange = jest.fn()
-
-        const { getByPlaceholderText } = renderDatePicker({
-          ...defaultProps,
-          parseInputValue,
-          onChange: handleChange
-        })
-
-        const input = getByPlaceholderText(defaultProps.placeholder)
-
-        fireEvent.change(input, { target: { value: '07-25-2020' } })
-        expect(handleChange).toHaveBeenCalledWith(new Date(2020, 6, 25))
-      })
-
-      it('opens `Calendar` on `Input` focus with invalid date', () => {
-        const handleChange = jest.fn()
-
-        const { getByPlaceholderText, getByTestId } = renderDatePicker({
-          ...defaultProps,
-          parseInputValue,
-          value: 'some random text',
-          onChange: handleChange
-        })
-
-        const input = getByPlaceholderText(defaultProps.placeholder)
-
-        fireEvent.focus(input)
-
-        expect(getByTestId('calendar')).toBeInTheDocument()
-      })
-
-      it("doesn't clear `Input` after `blur` with invalid date", () => {
-        const placeholder = 'Pick a date'
-        const TestComponent = () => {
-          const [value, setValue] = useState<
-            string | DateOrDateRangeType | null
-          >(new Date(2020, 6, 25))
-
-          return (
-            <DatePicker
-              placeholder={placeholder}
-              parseInputValue={parseInputValue}
-              value={value}
-              onChange={setValue}
-            />
-          )
-        }
-
-        const renderTestComponentPicker = () => render(<TestComponent />)
-
-        const { getByPlaceholderText } = renderTestComponentPicker()
-
-        const input = getByPlaceholderText(placeholder)
-
-        fireEvent.focus(input)
-
-        fireEvent.change(input, { target: { value: 'some random text' } })
-
-        fireEvent.blur(input)
-
-        expect(getByPlaceholderText(placeholder)).toHaveAttribute(
-          'value',
-          `some random text`
-        )
-      })
-    })
-  })
-
-  describe('Calendar', () => {
-    it('should display date in given timezone', () => {
-      const { getByPlaceholderText, getByTestId } = renderDatePicker({
-        ...defaultProps,
-        timezone: FAR_EAST_TIMEZONE,
-        value: new Date(2020, 6, 24, 18)
-      })
-
-      fireEvent.focus(getByPlaceholderText(defaultProps.placeholder))
-
-      expect(getByTestId('day-button-selected')).toHaveTextContent('25')
-    })
-  })
-
-  const FAR_EAST_TIMEZONE = 'Asia/Tokyo'
-
-  const defaultProps = {
-    onChange: () => {},
-    value: new Date(2020, 11, 24),
-    placeholder: 'Pick a date'
-  }
-
-  const renderDatePicker = (props: Props = defaultProps) => {
-    return render(<DatePicker {...props} />)
-  }
-})

package/src/DatePicker/types.ts

@@ -1,13 +0,0 @@
-import { DateOrDateRangeType } from '../Calendar'
-
-export type DatePickerValue = DateOrDateRangeType | string | null
-
-export type DatePickerStringParser = (
-  value: string,
-  params: {
-    dateFormat: string
-    timezone?: string
-    minDate?: Date
-    maxDate?: Date
-  }
-) => DateOrDateRangeType | string | undefined

package/src/DatePicker/utils.ts

@@ -1,123 +0,0 @@
-import parse from 'date-fns/parse'
-import isValid from 'date-fns/isValid'
-import formatDate from 'date-fns/format'
-import isWithinInterval from 'date-fns/isWithinInterval'
-import isEqual from 'date-fns/isEqual'
-import isBefore from 'date-fns/isBefore'
-import isAfter from 'date-fns/isAfter'
-import { utcToZonedTime, format as tzFormat } from 'date-fns-tz'
-
-import { DatePickerStringParser } from './types'
-import { DateOrDateRangeType, DateRangeType } from '../Calendar'
-
-// Convert date to given timezone. If timezone is undefined, return given date as is.
-export const timezoneConvert = (
-  date: DateOrDateRangeType,
-  timeZone?: string
-): DateOrDateRangeType => {
-  const convert = (dateToConvert: Date) => {
-    if (timeZone) {
-      /**
-       * Prevent invalid IANA timezone error. This is likely to happen
-       * when someone is editing properties in a Storybook examples.
-       */
-      try {
-        return utcToZonedTime(dateToConvert, timeZone)
-      } catch {
-        return dateToConvert
-      }
-    }
-
-    return dateToConvert
-  }
-
-  return Array.isArray(date)
-    ? (date.map(convert) as DateRangeType)
-    : (convert(date) as Date)
-}
-
-// Format date in given timezone. If timezone is undefined, return given date as is.
-export const timezoneFormat = (date: Date, timeZone?: string) => {
-  if (timeZone) {
-    /**
-     * Prevent invalid IANA timezone error. This is likely to happen
-     * when someone is editing properties in a Storybook examples.
-     */
-    try {
-      /**
-       * Maintain the same date and time, but formatted in the given timezone
-       * so next time the user edits the date it's not recalculated.
-       */
-      return new Date(tzFormat(date, 'MMM dd yyyy HH:mm:ss OOOO', { timeZone }))
-    } catch {
-      return date
-    }
-  }
-
-  return date
-}
-
-export const formatDateRange = (dates: DateRangeType, format: string) =>
-  dates.map(date => formatDate(date, format)).join(' - ')
-
-export const isDateValid = (date: string, pattern: string) => {
-  return (
-    date.length === pattern.length && isValid(parse(date, pattern, new Date()))
-  )
-}
-
-export const isDateAfter = (date: Date, dateToCompare: Date) =>
-  isEqual(date, dateToCompare) || isAfter(date, dateToCompare)
-
-export const isDateBefore = (date: Date, dateToCompare: Date) =>
-  isEqual(date, dateToCompare) || isBefore(date, dateToCompare)
-
-// eslint-disable-next-line complexity
-export const isDateWithinInterval = (
-  date: Date,
-  minDate: Date | undefined,
-  maxDate: Date | undefined
-) => {
-  if (!minDate && !maxDate) {
-    return true
-  }
-
-  if (minDate && maxDate) {
-    return isWithinInterval(date, {
-      start: minDate,
-      end: maxDate
-    })
-  }
-
-  if (minDate) {
-    return isDateAfter(date, minDate)
-  }
-
-  if (maxDate) {
-    return isDateBefore(date, maxDate)
-  }
-
-  return false
-}
-
-export const datePickerParseDateString: DatePickerStringParser = (
-  value,
-  { dateFormat, timezone, minDate, maxDate }
-) => {
-  if (!isDateValid(value, dateFormat)) {
-    return
-  }
-
-  const parsedNextValue = parse(value, dateFormat, new Date())
-  const nextTimezoneValue = timezoneFormat(parsedNextValue, timezone)
-
-  if (!isDateWithinInterval(nextTimezoneValue, minDate, maxDate)) {
-    return
-  }
-
-  return nextTimezoneValue
-}
-
-export const isValidDateValue = (
-  dateValue: DateOrDateRangeType | string
-): dateValue is DateOrDateRangeType => typeof dateValue !== 'string'