@toptal/picasso-lab 9.3.0 → 9.3.1

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

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