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

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

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

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

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

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

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

package/src/DatePicker/test.tsx

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

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

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