@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/components/DatePicker/DatePicker.tsx

@@ -1,140 +0,0 @@
-import React, { useContext, forwardRef } from 'react'
-import styled from 'styled-components'
-
-import { DateFormatHelper, DateHelper, GenericCalendar } from 'components/Calendar'
-import { Dropdown, DropdownContext, GenericDropdown } from 'components/Dropdown'
-import { getToken as token } from 'theming'
-import { Group } from 'components/Layout'
-import { Icon } from 'components/Icon'
-import { TextField as DefaultTextField } from 'components/TextField'
-import CloseButton from 'common/CloseButton'
-import useDatePicker from './useDatePicker'
-import { Popover } from 'components/Popover'
-
-import type { CalendarDate } from 'components/Calendar'
-import type { ChangeEvent } from 'react'
-import type { DatePickerProps } from './DatePicker.types'
-import type { TextFieldProps } from 'components/TextField'
-
-/**
- * https://www.regular-expressions.info/dates.html
- * https://learning.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch04s04.html#validation-dates-problem
- */
-const DATE_REGEX = /^(1[0-2]|0?[1-9])\/(3[01]|[12][0-9]|0?[1-9])\/(19|20)\d{2}$/
-
-export const formatter = DateFormatHelper('MM/DD/YYYY')
-
-const TextField = styled(DefaultTextField)`
-  & > input {
-    width: 10ch;
-  }
-`
-
-const DropdownMenu = styled(Dropdown.Menu)`
-  width: max-content;
-  min-width: initial;
-  max-height: initial;
-  padding: ${token('space-m')};
-  overflow-y: initial;
-`
-
-export const ClearButton = styled(CloseButton)`
-  width: 1em;
-  height: 1em;
-
-  margin-left: calc(-1 * ${token('space-s')}); // compensate for input's padding-left
-`
-
-interface DateInputProps extends Omit<TextFieldProps, 'onChange'> {
-  onChange: (date: CalendarDate) => void
-}
-
-export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(function DateInput(
-  props: DateInputProps,
-  ref
-): JSX.Element {
-  const { onChange, ...rest } = props
-  const dropdown = useContext(DropdownContext)
-
-  function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
-    const {
-      target: { value },
-    } = event
-
-    if (!DATE_REGEX.test(value)) {
-      return
-    }
-
-    onChange(DateHelper(value))
-  }
-
-  // TODO: use type="date" when IE is no longer in the way
-  return (
-    <TextField
-      placeholder="00/00/0000"
-      {...rest}
-      ref={ref}
-      type="text"
-      disabled={dropdown.disabled}
-      leading={<Icon name="calendar" />}
-      onChange={handleInputChange}
-    />
-  )
-})
-
-function DatePicker(props: DatePickerProps): JSX.Element {
-  const {
-    id,
-    name,
-    value,
-    onChange,
-    disabled,
-    constraints,
-    getInputProps,
-    getCalendarProps,
-    placement,
-  } = props
-
-  const datePicker = useDatePicker({
-    constraints,
-    disabled,
-    id,
-    name,
-    value,
-    onChange,
-    getInputProps,
-    getCalendarProps,
-  })
-
-  function renderTrailing() {
-    const [currSelectedDate] = datePicker.value
-
-    if (!disabled && currSelectedDate) {
-      return (
-        <ClearButton
-          size={12}
-          type="button"
-          aria-label="Clear selection"
-          {...datePicker.getClearProps()}
-        />
-      )
-    }
-
-    return null
-  }
-
-  return (
-    <GenericDropdown {...placement} {...datePicker.getDropdownProps()}>
-      <Popover.Reference>
-        <Group space="s">
-          <DateInput trailing={renderTrailing()} {...datePicker.getInputProps()} />
-        </Group>
-      </Popover.Reference>
-      <DropdownMenu>
-        <GenericCalendar {...datePicker.getCalendarProps()} />
-      </DropdownMenu>
-    </GenericDropdown>
-  )
-}
-
-export default DatePicker

package/src/components/DatePicker/DatePicker.types.ts

@@ -1,30 +0,0 @@
-import type { CalendarProps, GenericCalendarProps, useCalendarProps } from 'components/Calendar'
-
-import type { TextFieldProps } from 'components/TextField'
-import type EventLike from 'utils/types/EventLike'
-import type { PopoverPlacement } from 'components/Popover'
-
-export interface DatePickerProps {
-  id?: string
-  name: string
-  value?: null | string | number
-  disabled?: boolean
-  constraints?: CalendarProps['constraints']
-  onChange?: (event: EventLike<string | null>) => void
-  getInputProps?: () => Partial<TextFieldProps>
-  getCalendarProps?: () => Partial<GenericCalendarProps>
-  placement?: PopoverPlacement
-}
-
-export interface DateRangePickerProps {
-  id?: string
-  name: string
-  value?: useCalendarProps['selected']
-  disabled?: boolean
-  constraints?: CalendarProps['constraints']
-  onChange?: (event: EventLike<null | [string | null, string | null]>) => void
-  getRangeStartInputProps?: () => Partial<TextFieldProps>
-  getRangeEndInputProps?: () => Partial<TextFieldProps>
-  getCalendarProps?: () => Partial<GenericCalendarProps>
-  placement?: PopoverPlacement
-}

package/src/components/DatePicker/DateRangePicker.stories.tsx

@@ -1,128 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { Label } from 'components/Label'
-import DateHelper, { TODAY } from '../Calendar/Date.helper'
-import DateRangePicker from './DateRangePicker'
-
-import type { Story, Meta } from '@storybook/react'
-import type { DateRangePickerProps } from './DatePicker.types'
-import type { useCalendarProps } from 'components/Calendar'
-
-export default {
-  title: 'Components/Date/DateRangePicker',
-  component: DateRangePicker,
-  argTypes: {
-    id: {
-      table: {
-        disable: true,
-      },
-    },
-    name: {
-      table: {
-        disable: true,
-      },
-    },
-    onChange: {
-      table: {
-        disable: true,
-      },
-    },
-    getRangeStartInputProps: {
-      table: {
-        disable: true,
-      },
-    },
-    getRangeEndInputProps: {
-      table: {
-        disable: true,
-      },
-    },
-    getCalendarProps: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export const Playground: Story<DateRangePickerProps> = (args: DateRangePickerProps) => {
-  return (
-    <div className="flex flex-col">
-      <Label htmlFor="playground-date-range-picker-start">Select the date range</Label>
-      <DateRangePicker {...args} />
-    </div>
-  )
-}
-
-Playground.bind({})
-
-Playground.args = {
-  id: 'playground-date-range-picker',
-  name: 'playground-date-range-picker',
-}
-
-export const WithValue: Story<DateRangePickerProps> = (args: DateRangePickerProps) => {
-  const [value, setValue] = useState<useCalendarProps['selected']>([
-    DateHelper('December 17, 1995').toString(),
-    DateHelper('December 22, 1995').toString(),
-  ])
-
-  useEffect(() => {
-    setTimeout(() => {
-      setValue([
-        DateHelper('January 01, 2000').toString(),
-        DateHelper('February 01, 2000').toString(),
-      ])
-    }, 3000)
-  }, [])
-
-  return (
-    <div className="flex flex-col">
-      <Label htmlFor="with-value-date-range-picker">Select the date range</Label>
-      <DateRangePicker {...args} value={value} />
-      <small className="mt-4">I&apos;ll change my value automatically. Wait and see.</small>
-    </div>
-  )
-}
-
-WithValue.bind({})
-
-WithValue.args = {
-  id: 'with-value-date-range-picker',
-  name: 'with-value-date-range-picker',
-}
-
-export function DateRangePickerConstraints(args: DateRangePickerProps): JSX.Element {
-  return (
-    <div className="flex flex-col">
-      <Label htmlFor="constraints-date-range-picker">Select the available date range</Label>
-      <DateRangePicker {...args} />
-    </div>
-  )
-}
-
-DateRangePickerConstraints.args = {
-  id: 'constraints-date-range-picker',
-  name: 'constraints-date-range-picker',
-  constraints: [[null, TODAY.subtract('day', 1).toString()]],
-}
-
-DateRangePickerConstraints.parameters = {
-  docs: {
-    description: {
-      story: `
-Constraints are used to block dates from being selected and can be represented in different ways, according to your needs. If a given day matches at least one of the constraints,
-it will be disabled.
-
-
-\`\`\`jsx
-const TODAY = DateHelper()
-
-<DateRangePicker {...props} constraints={[[null, TODAY.subtract('day', 1).toString()]]} />
-\`\`\`
-
-Check the constraints details in the [Calendar component](/story/components-calendar--calendar-constraints&viewMode=docs).
-`,
-    },
-  },
-}

package/src/components/DatePicker/DateRangePicker.test.tsx

@@ -1,267 +0,0 @@
-import React from 'react'
-
-import { composeStories } from '@storybook/react'
-
-import { MonthHelper } from '../Calendar'
-import { DateRangePickerEvent } from '../../testing/DatePickerEvent'
-import { formatter } from './DateRangePicker'
-import * as stories from './DateRangePicker.stories'
-import DateHelper, { TODAY } from '../Calendar/Date.helper'
-import generator from '../../tests/generator'
-import renderer, { screen, fire } from '../../tests/renderer'
-
-import type { DateRangePickerProps } from './DatePicker.types'
-import type { CalendarDate, CalendarMonthAlias } from '../Calendar'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<DateRangePickerProps>) =>
-  renderer(<Playground {...overrides} />).render()
-
-describe('DateRangePicker', () => {
-  it('starts collapsed', () => {
-    const name = generator.word()
-    const props = {
-      id: name,
-      name,
-    }
-
-    setup(props)
-
-    expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-  })
-
-  describe('when disabled', () => {
-    it('does not expand when input for range start is clicked', () => {
-      setup({ disabled: true })
-
-      const datePickerInput = screen.getByTestId('input-date-range-start')
-
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-      expect(datePickerInput).toBeDisabled()
-
-      fire.click(datePickerInput)
-
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-    })
-
-    it('does not expand when input for range end is clicked', () => {
-      setup({ disabled: true })
-
-      const datePickerInput = screen.getByTestId('input-date-range-end')
-
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-      expect(datePickerInput).toBeDisabled()
-
-      fire.click(datePickerInput)
-
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('when enabled', () => {
-    const NEXT_MONTH = DateHelper(Date.UTC(TODAY.getYear(), TODAY.getMonth() + 1))
-
-    it('expands with the current month/year calendar when range input is clicked', async () => {
-      setup({ disabled: false })
-
-      const datePickerInput = screen.getByLabelText('Select the date range')
-
-      await DateRangePickerEvent.expand(datePickerInput)
-
-      const months = screen.getAllByLabelText('Open month selection')
-      const years = screen.getAllByLabelText('Open year selection')
-
-      expect(months[0]).toHaveTextContent(
-        MonthHelper(TODAY.getMonth() as CalendarMonthAlias).format('long')
-      )
-
-      expect(months[1]).toHaveTextContent(
-        MonthHelper(NEXT_MONTH.getMonth() as CalendarMonthAlias).format('long')
-      )
-
-      expect(years[0]).toHaveTextContent(String(TODAY.getYear()))
-      expect(years[1]).toHaveTextContent(String(NEXT_MONTH.getYear()))
-    })
-
-    it('expands with the start month/year calendar for the selected range when range input is clicked', async () => {
-      const rangeStart = DateHelper('December 17, 1995')
-      const rangeEnd = DateHelper('January 17, 1996')
-
-      const value = [rangeStart.toString(), rangeEnd.toString()] as [string, string]
-
-      setup({ disabled: false, value })
-
-      const datePickerInput = screen.getByLabelText('Select the date range')
-
-      await DateRangePickerEvent.expand(datePickerInput)
-
-      const months = screen.getAllByLabelText('Open month selection')
-      const years = screen.getAllByLabelText('Open year selection')
-
-      expect(months[0]).toHaveTextContent(
-        MonthHelper(rangeStart.getMonth() as CalendarMonthAlias).format('long')
-      )
-
-      expect(months[1]).toHaveTextContent(
-        MonthHelper(rangeEnd.getMonth() as CalendarMonthAlias).format('long')
-      )
-
-      expect(years[0]).toHaveTextContent(String(rangeStart.getYear()))
-      expect(years[1]).toHaveTextContent(String(rangeEnd.getYear()))
-    })
-
-    it('selects the clicked range of dates', async () => {
-      setup({})
-
-      const startDay = generator.natural({ min: 1, max: 14 })
-
-      const startDate = DateHelper(Date.UTC(TODAY.getYear(), TODAY.getMonth(), startDay))
-      const endDate = startDate.add('day', generator.natural({ min: 1, max: 14 }))
-
-      const datePickerInput = screen.getByLabelText('Select the date range')
-
-      await DateRangePickerEvent.pick(
-        [formatter.format(startDate), formatter.format(endDate)],
-        datePickerInput
-      )
-
-      expect(screen.getByTestId('input-date-range-start')).toHaveDisplayValue(
-        formatter.format(startDate)
-      )
-
-      expect(screen.getByTestId('input-date-range-end')).toHaveDisplayValue(
-        formatter.format(endDate)
-      )
-    })
-
-    it('reverses the selected range of dates when start is before end', async () => {
-      setup({})
-
-      const startDay = generator.natural({ min: 1, max: 14 })
-
-      const startDate = DateHelper(Date.UTC(TODAY.getYear(), TODAY.getMonth(), startDay))
-      const endDate = startDate.add('day', generator.natural({ min: 1, max: 14 }))
-
-      const datePickerInput = screen.getByLabelText('Select the date range')
-
-      await DateRangePickerEvent.pick(
-        [formatter.format(endDate), formatter.format(startDate)],
-        datePickerInput
-      )
-
-      expect(screen.getByTestId('input-date-range-start')).toHaveDisplayValue(
-        formatter.format(startDate)
-      )
-
-      expect(screen.getByTestId('input-date-range-end')).toHaveDisplayValue(
-        formatter.format(endDate)
-      )
-    })
-
-    function evaluateRangeSelection(
-      from: CalendarDate,
-      to: CalendarDate,
-      range: [CalendarDate, CalendarDate]
-    ) {
-      let date = DateHelper(from.getTime())
-      const [rangeStart, rangeEnd] = range
-
-      // before the range starts, it's not selected
-      while (date.getTime() < rangeStart.getTime()) {
-        expect(screen.getByLabelText(formatter.format(date))).not.toBeChecked()
-        date = date.add('day', 1)
-      }
-
-      while (date.getTime() <= rangeEnd.getTime()) {
-        expect(screen.getByLabelText(formatter.format(date))).toBeChecked()
-        date = date.add('day', 1)
-      }
-
-      // // after the range ends, it's not selected
-      while (date.getTime() <= to.getTime()) {
-        expect(screen.getByLabelText(formatter.format(date))).not.toBeChecked()
-        date = date.add('day', 1)
-      }
-    }
-
-    it('initializes with a selected range', async () => {
-      const rangeStart = DateHelper('2022-02-15T12:00:00.000Z')
-      const rangeEnd = DateHelper('2022-03-15T12:00:00.000Z')
-
-      setup({ value: [rangeStart.toString(), rangeEnd.toString()] })
-
-      const datePickerInput = screen.getByLabelText('Select the date range')
-
-      expect(screen.getByTestId('input-date-range-start')).toHaveDisplayValue('02/15/2022')
-      expect(screen.getByTestId('input-date-range-end')).toHaveDisplayValue('03/15/2022')
-
-      const selectedDays = await DateRangePickerEvent.getSelectedDates(datePickerInput)
-      expect(selectedDays.length).toBe(29)
-
-      await DateRangePickerEvent.expand(datePickerInput)
-
-      evaluateRangeSelection(
-        DateHelper('2022-02-01T12:00:00.000Z'),
-        DateHelper('2022-03-31T12:00:00.000Z'),
-        [rangeStart, rangeEnd]
-      )
-    })
-
-    it('updates selected date after the initially selected one changes', async () => {
-      const rangeStart = DateHelper('2022-02-15T12:00:00.000Z')
-      const rangeEnd = DateHelper('2022-03-15T12:00:00.000Z')
-
-      const { rerender } = setup({ value: [rangeStart.toString(), rangeEnd.toString()] })
-
-      const datePickerInput = screen.getByLabelText('Select the date range')
-
-      expect(screen.getByTestId('input-date-range-start')).toHaveDisplayValue('02/15/2022')
-      expect(screen.getByTestId('input-date-range-end')).toHaveDisplayValue('03/15/2022')
-
-      await DateRangePickerEvent.expand(datePickerInput)
-
-      evaluateRangeSelection(
-        DateHelper('2022-02-01T12:00:00.000Z'),
-        DateHelper('2022-03-31T12:00:00.000Z'),
-        [rangeStart, rangeEnd]
-      )
-
-      const newRangeStart = DateHelper('2022-03-01T12:00:00.000Z')
-      const newRangeEnd = DateHelper('2022-03-05T12:00:00.000Z')
-
-      rerender(<Playground value={[newRangeStart.toString(), newRangeEnd.toString()]} />)
-
-      expect(screen.getByTestId('input-date-range-start')).toHaveDisplayValue('03/01/2022')
-      expect(screen.getByTestId('input-date-range-end')).toHaveDisplayValue('03/05/2022')
-
-      await DateRangePickerEvent.expand(datePickerInput)
-
-      evaluateRangeSelection(
-        DateHelper('2022-03-01T12:00:00.000Z'),
-        DateHelper('2022-04-30T12:00:00.000Z'),
-        [newRangeStart, newRangeEnd]
-      )
-    })
-
-    it('clears selection', async () => {
-      const rangeStart = DateHelper('2022-02-15T12:00:00.000Z')
-      const rangeEnd = DateHelper('2022-03-15T12:00:00.000Z')
-
-      setup({ value: [rangeStart.toString(), rangeEnd.toString()] })
-
-      const datePickerInput = screen.getByLabelText('Select the date range')
-
-      expect(screen.getByTestId('input-date-range-start')).toHaveDisplayValue('02/15/2022')
-      expect(screen.getByTestId('input-date-range-end')).toHaveDisplayValue('03/15/2022')
-
-      await DateRangePickerEvent.clear(datePickerInput)
-
-      expect(screen.getByTestId('input-date-range-start')).toHaveDisplayValue('')
-      expect(screen.getByTestId('input-date-range-end')).toHaveDisplayValue('')
-
-      const selectedDays = await DateRangePickerEvent.getSelectedDates(datePickerInput)
-      expect(selectedDays.length).toBe(0)
-    })
-  })
-})

package/src/components/DatePicker/DateRangePicker.tsx

@@ -1,110 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { Button } from 'components/Button'
-import { ClearButton, DateInput } from './DatePicker'
-import { DateFormatHelper, GenericCalendar } from 'components/Calendar'
-import { Dropdown, GenericDropdown } from 'components/Dropdown'
-import { getToken as token } from 'theming'
-import { Group } from 'components/Layout'
-import { Popover } from 'components/Popover'
-import useDateRangePicker from './useDateRangePicker'
-
-import type { DateRangePickerProps } from './DatePicker.types'
-
-export const formatter = DateFormatHelper('MM/DD/YYYY')
-
-const DropdownMenu = styled(Dropdown.Menu)`
-  width: max-content;
-  min-width: initial;
-  max-height: initial;
-  padding: ${token('space-m')};
-  overflow-y: initial;
-`
-
-const DropdownFooter = styled.div`
-  padding-right: ${token('space-m')};
-  padding-left: ${token('space-m')};
-`
-
-function DateRangePicker(props: DateRangePickerProps): JSX.Element {
-  const {
-    id,
-    name,
-    value,
-    onChange,
-    disabled,
-    constraints,
-    getRangeStartInputProps,
-    getRangeEndInputProps,
-    getCalendarProps,
-    placement,
-  } = props
-
-  const dateRangePicker = useDateRangePicker({
-    constraints,
-    disabled,
-    id,
-    name,
-    value,
-    onChange,
-    getRangeStartInputProps,
-    getRangeEndInputProps,
-    getCalendarProps,
-  })
-
-  function renderRangeEndTrailing() {
-    const [currRangeStart, currRangeEnd] = dateRangePicker.value
-
-    if (!disabled && (currRangeStart || currRangeEnd)) {
-      return (
-        <ClearButton
-          size={12}
-          type="button"
-          aria-label="Clear selection"
-          {...dateRangePicker.getClearProps()}
-        />
-      )
-    }
-
-    return null
-  }
-
-  function renderDropdownFooter() {
-    return (
-      <DropdownFooter>
-        <Group space="s" justify="flex-end">
-          <Button type="button" scale="small" {...dateRangePicker.getClearProps()}>
-            Clear
-          </Button>
-          <Button type="button" scale="small" variant="primary" {...dateRangePicker.getDoneProps()}>
-            Done
-          </Button>
-        </Group>
-      </DropdownFooter>
-    )
-  }
-
-  return (
-    <GenericDropdown {...placement} {...dateRangePicker.getDropdownProps()}>
-      <Popover.Reference>
-        <Group space="s">
-          <DateInput
-            {...dateRangePicker.getRangeStartInputProps()}
-            data-testid="input-date-range-start"
-          />
-          <DateInput
-            trailing={renderRangeEndTrailing()}
-            {...dateRangePicker.getRangeEndInputProps()}
-            data-testid="input-date-range-end"
-          />
-        </Group>
-      </Popover.Reference>
-      <DropdownMenu footer={renderDropdownFooter()}>
-        <GenericCalendar {...dateRangePicker.getCalendarProps()} />
-      </DropdownMenu>
-    </GenericDropdown>
-  )
-}
-
-export default DateRangePicker

package/src/components/DatePicker/index.ts

@@ -1,3 +0,0 @@
-export { default as DatePicker } from './DatePicker'
-export { default as DateRangePicker } from './DateRangePicker'
-export type { DatePickerProps, DateRangePickerProps } from './DatePicker.types'