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

package/src/components/Calendar/Pickers/DayPicker.tsx

@@ -1,127 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import { Group } from 'components/Layout'
-import { Text as DefaultText } from 'components/Text'
-import { TODAY } from '../Date.helper'
-import DateFormatHelper from '../DateFormat.helper'
-import PickerButton from './PickerButton'
-
-import type { CalendarDate } from '../Date.helper'
-import type { CalendarPickerProps, RenderableMonth, useCalendarReturn } from '../Calendar.types'
-
-export const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
-export const formatter = DateFormatHelper('MM/DD/YYYY')
-
-function getStatus(calendar: useCalendarReturn, date: CalendarDate) {
-  const isPastYearDay =
-    date.getYear() < calendar.months[0].year && date.getMonth() > calendar.months[0].month
-
-  if (calendar.selected[0] == date.getTime()) {
-    return 'selection-start'
-  } else if (calendar.selected[1] == date.getTime()) {
-    return 'selection-end'
-  } else if (
-    calendar.selected[0] != null &&
-    date.getTime() > calendar.selected[0] &&
-    calendar.selected[1] != null &&
-    date.getTime() < calendar.selected[1]
-  ) {
-    return 'selection'
-  } else if (
-    calendar.mode === 'single' &&
-    (isPastYearDay || date.getMonth() < calendar.months[0].month)
-  ) {
-    return 'faded'
-  } else if (calendar.mode === 'single' && date.getMonth() > calendar.months[0].month) {
-    return 'next-month-day'
-  } else if (date.getTime() == TODAY.getTime()) {
-    return 'current-day'
-  }
-
-  return 'default'
-}
-
-const Text = styled(DefaultText)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  user-select: none;
-`
-
-const Grid = styled.div`
-  display: grid;
-  grid-gap: ${token('space-2xs')};
-  grid-template-rows: 1.25rem repeat(auto-fill, 2.5rem);
-  grid-template-columns: repeat(7, 2.5rem);
-`
-
-/**
- * filling days of previous month
- * TODO: supress this for range selection
- */
-function CalendarDayPicker({ calendar, onDayClick }: CalendarPickerProps): JSX.Element {
-  function renderDaysOfWeek() {
-    return WEEKDAYS.map((weekday) => (
-      <Text
-        key={weekday}
-        as="abbr"
-        variant="chips-sm"
-        color="color-neutral"
-        style={{ textDecoration: 'none' }}
-      >
-        {weekday}
-      </Text>
-    ))
-  }
-
-  function renderDaysOfMonth(month: RenderableMonth) {
-    const constraints = calendar.constraints || []
-
-    return month.days.map((day) => {
-      const status = getStatus(calendar, day)
-      const formatted = formatter.format(day)
-      const isDisabled = day.matches(...constraints)
-
-      if (calendar.mode === 'range' && day.getMonth() !== month.month) {
-        return <span key={formatted} aria-hidden></span>
-      }
-
-      return (
-        <PickerButton
-          key={formatted}
-          type="button"
-          role="checkbox"
-          aria-checked={['selection-start', 'selection', 'selection-end'].includes(status)}
-          aria-label={formatted}
-          disabled={isDisabled}
-          onClick={() => {
-            if (!isDisabled && onDayClick) {
-              onDayClick(day.getTime())
-            }
-          }}
-          $status={status}
-        >
-          <time dateTime={day.toString()}>{day.getDate()}</time>
-        </PickerButton>
-      )
-    })
-  }
-
-  return (
-    <Group>
-      {calendar.months.map((month) => {
-        return (
-          <Grid key={`${month.year}${month.month}`} role="group" data-testid="calendar-day-picker">
-            {renderDaysOfWeek()}
-            {renderDaysOfMonth(month)}
-          </Grid>
-        )
-      })}
-    </Group>
-  )
-}
-
-export default CalendarDayPicker

package/src/components/Calendar/Pickers/MonthPicker.test.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-
-import DateHelper from '../Date.helper'
-import generator from '../../../tests/generator'
-import MonthHelper from '../Month.helper'
-import MonthPicker from './MonthPicker'
-import range from 'utils/toolset/range'
-import renderer, { screen, fire } from '../../../tests/renderer'
-
-import type { useCalendarReturn, CalendarPickerProps, usePickerModeReturn } from '../Calendar.types'
-import type { CalendarMonthAlias } from '../Month.helper'
-
-const setup = (overrides: CalendarPickerProps) => renderer(<MonthPicker {...overrides} />).render()
-
-describe('MonthPicker', () => {
-  const mockedCalendar: useCalendarReturn = {
-    mode: 'single',
-    months: [
-      {
-        month: 10,
-        year: 2021,
-        days: [
-          DateHelper('2021-11-01T12:00:00.000Z'),
-          DateHelper('2021-11-02T12:00:00.000Z'),
-          DateHelper('2021-11-03T12:00:00.000Z'),
-          DateHelper('2021-11-04T12:00:00.000Z'),
-          DateHelper('2021-11-05T12:00:00.000Z'),
-        ],
-      },
-    ],
-    selected: [1635822000000, 1635994800000],
-    constraints: [],
-    clear: jest.fn(),
-    set: jest.fn(),
-    select: jest.fn(),
-  }
-
-  const mockedMode: usePickerModeReturn = {
-    get: jest.fn(),
-    is: jest.fn(),
-    dispatch: jest.fn(),
-    Picker: jest.fn(),
-  }
-
-  it('renders all months correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    MonthHelper.getAll().forEach((month) => {
-      expect(screen.getByLabelText(`Select month ${month.name}`)).toHaveTextContent(
-        MonthHelper(month.name as CalendarMonthAlias).format('narrow')
-      )
-    })
-  })
-
-  it('renders current month correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    const currentMonth = screen.getByRole('radio', { checked: true })
-    expect(currentMonth).toHaveTextContent(
-      MonthHelper(mockedCalendar.months[0].month as CalendarMonthAlias).format('short')
-    )
-  })
-
-  it('trigger selection correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    const selectedMonth = generator.pick(range(0, 12))
-
-    fire.click(screen.getByText(MonthHelper(selectedMonth as CalendarMonthAlias).format('short')))
-
-    expect(mockedCalendar.set).toHaveBeenCalledWith({ month: selectedMonth })
-    expect(mockedMode.dispatch).toHaveBeenCalledWith({ type: 'set-mode', payload: 'day-picker' })
-  })
-})

package/src/components/Calendar/Pickers/MonthPicker.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import MonthHelper from '../Month.helper'
-import PickerButton from './PickerButton'
-
-import type { useCalendarReturn, CalendarPickerProps } from '../Calendar.types'
-import type { CalendarMonth, CalendarMonthAlias } from '../Month.helper'
-
-const Container = styled.div`
-  display: grid;
-  grid-auto-rows: 3.75rem;
-  grid-gap: ${token('space-2xs')};
-  grid-template-columns: repeat(3, 1fr);
-`
-
-function getStatus(calendar: useCalendarReturn, month: CalendarMonth) {
-  if (calendar.months[0].month == month.index) {
-    return 'selection-start'
-  }
-
-  return 'default'
-}
-
-function CalendarMonthPicker({ calendar, mode }: CalendarPickerProps): JSX.Element {
-  return (
-    <Container role="radiogroup" data-testid="calendar-month-picker">
-      {MonthHelper.getAll().map((month) => (
-        <PickerButton
-          key={month.index}
-          type="button"
-          role="radio"
-          aria-checked={month.index == calendar.months[0].month}
-          aria-label={`Select month ${month.name}`}
-          onClick={() => {
-            calendar.set({ month: month.index })
-            mode.dispatch({ type: 'set-mode', payload: 'day-picker' })
-          }}
-          $status={getStatus(calendar, month)}
-        >
-          <time dateTime={`${calendar.months[0].year}-${month.index + 1}`}>
-            {MonthHelper(month.name as CalendarMonthAlias).format('short')}
-          </time>
-        </PickerButton>
-      ))}
-    </Container>
-  )
-}
-
-export default CalendarMonthPicker

package/src/components/Calendar/Pickers/PickerButton.tsx

@@ -1,119 +0,0 @@
-import styled from 'styled-components'
-
-import { BaseButton } from 'components/Button'
-import { getToken as token } from 'theming'
-import activatable from 'styles/activatable'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import typography from 'styles/typography'
-
-const PickerButton = styled(BaseButton)<{
-  $status:
-    | 'default'
-    | 'current-day'
-    | 'faded'
-    | 'selection-start'
-    | 'selection-end'
-    | 'selection'
-    | 'next-month-day'
-}>`
-  ${typography(
-    conditional({
-      body: whenProps({ $status: ['default', 'faded'] }),
-      'body-bold': whenProps({
-        $status: ['current-day', 'selection-start', 'selection', 'selection-end'],
-      }),
-    })
-  )}
-
-  user-select: none;
-
-  height: 100%;
-
-  border-radius: 0;
-
-  color: ${conditional({
-    'color-neutral-lighter': whenProps({
-      $status: ['selection-start', 'selection', 'selection-end'],
-    }),
-    'color-neutral-darker': whenProps({ $status: ['default', 'faded'] }),
-    'color-neutral-dark': whenProps({ $status: 'next-month-day' }),
-    'color-accent': whenProps({ $status: 'current-day' }),
-  })};
-
-  background: ${conditional({
-    'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
-    'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
-    'color-neutral': whenProps({ $status: 'selection' }),
-    'color-neutral-lightest': whenProps({ $status: 'current-day' }),
-  })};
-
-  border-color: ${conditional({
-    'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
-    'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
-    'color-neutral': whenProps({ $status: 'selection' }),
-    'color-neutral-light': whenProps({ $status: 'current-day' }),
-  })};
-
-  ${conditional({
-    'opacity: 0.4;': whenProps({ $status: 'faded' }),
-    'opacity: 1;': whenProps({ $status: (status) => status !== 'faded' }),
-  })}
-
-  padding: ${token('space-xs')} ${token('space-s')};
-
-  ${hoverable`
-    border-color: ${token('color-neutral')};
-    background-color: ${conditional({
-      'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
-      'color-neutral-dark': whenProps({
-        $status: ['selection-start', 'selection', 'selection-end'],
-      }),
-      'color-neutral-lightest': whenProps({ $status: 'current-day' }),
-    })};
-    color: ${conditional({
-      'color-neutral-dark': whenProps({ $status: ['default', 'faded'] }),
-      'color-neutral-lightest': whenProps({
-        $status: ['selection-start', 'selection', 'selection-end'],
-      }),
-    })};
-
-    font-weight: ${token('font-weight-bold')};
-  `}
-
-  ${focusable`
-    box-shadow: ${token('button-primary-outline')};
-    font-weight: ${token('font-weight-bold')};
-  `}
-
-  ${activatable`
-    border-color: ${token('color-neutral')};
-    background-color: ${conditional({
-      'color-transparent': whenProps({ 'aria-checked': false }),
-      'color-neutral': whenProps({ 'aria-checked': true }),
-    })};
-    color: ${conditional({
-      'color-neutral': whenProps({ 'aria-checked': false }),
-      'color-neutral-white': whenProps({ 'aria-checked': true }),
-    })};
-  `}
-
-  ${disableable`
-    background-color: ${token('color-transparent')};
-    border-color: ${conditional({
-      'color-neutral-darkest': whenProps({ 'aria-checked': true }),
-      'color-transparent': whenProps({ 'aria-checked': false }),
-    })};
-
-    color: ${token('color-neutral-darker')};
-  `}
-
-  visibility: ${conditional({
-    visible: whenProps({ 'aria-hidden': false }),
-    hidden: whenProps({ 'aria-hidden': true }),
-  })};
-`
-
-export default styled(PickerButton)({})

package/src/components/Calendar/Pickers/YearPicker.test.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-
-import generator from '../../../tests/generator'
-import range from 'utils/toolset/range'
-import renderer, { screen, fire } from '../../../tests/renderer'
-import YearPicker from './YearPicker'
-import DateHelper from '../Date.helper'
-
-import type { useCalendarReturn, CalendarPickerProps, usePickerModeReturn } from '../Calendar.types'
-
-const setup = (overrides: CalendarPickerProps) => renderer(<YearPicker {...overrides} />).render()
-
-function getYearRange() {
-  return range(2012, 2032)
-}
-
-describe('YearPicker', () => {
-  const mockedCalendar: useCalendarReturn = {
-    mode: 'single',
-    months: [
-      {
-        month: 10,
-        year: 2021,
-        days: [
-          DateHelper('2021-11-01T12:00:00.000Z'),
-          DateHelper('2021-11-02T12:00:00.000Z'),
-          DateHelper('2021-11-03T12:00:00.000Z'),
-          DateHelper('2021-11-04T12:00:00.000Z'),
-          DateHelper('2021-11-05T12:00:00.000Z'),
-        ],
-      },
-    ],
-    selected: [1635822000000, 1635994800000],
-    constraints: [],
-    clear: jest.fn(),
-    set: jest.fn(),
-    select: jest.fn(),
-  }
-
-  const mockedMode: usePickerModeReturn = {
-    get: jest.fn(),
-    is: jest.fn(),
-    dispatch: jest.fn(),
-    Picker: jest.fn(),
-  }
-
-  it('renders all supported years correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    getYearRange().forEach((year) => {
-      expect(screen.getByLabelText(`Select year ${year}`)).toHaveTextContent(String(year))
-    })
-  })
-
-  it('renders current year correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    const currentYear = screen.getByRole('radio', { checked: true })
-    expect(currentYear).toHaveTextContent(String(mockedCalendar.months[0].year))
-  })
-
-  it('trigger selection correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    const selectedYear = generator.pick(getYearRange())
-
-    fire.click(screen.getByText(String(selectedYear)))
-
-    expect(mockedCalendar.set).toHaveBeenCalledWith({ year: selectedYear })
-    expect(mockedMode.dispatch).toHaveBeenCalledWith({ type: 'set-mode', payload: 'month-picker' })
-  })
-})

package/src/components/Calendar/Pickers/YearPicker.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import DefaultPickerButton from './PickerButton'
-import range from 'utils/toolset/range'
-
-import type { useCalendarReturn, CalendarPickerProps } from '../Calendar.types'
-
-const Container = styled.div`
-  display: grid;
-  grid-auto-rows: 2.875rem;
-  grid-gap: ${token('space-2xs')};
-  grid-template-columns: repeat(4, 1fr);
-`
-
-const PickerButton = styled(DefaultPickerButton)`
-  block-size: 46px;
-`
-
-function getStatus(calendar: useCalendarReturn, year: number) {
-  if (calendar.months[0].year == year) {
-    return 'selection-start'
-  }
-
-  return 'default'
-}
-
-function CalendarYearPicker({ calendar, mode }: CalendarPickerProps): JSX.Element {
-  return (
-    <Container role="radiogroup" data-testid="calendar-year-picker">
-      {range(2012, 2032).map((year) => (
-        <PickerButton
-          key={year}
-          type="button"
-          role="radio"
-          aria-checked={year == calendar.months[0].year}
-          aria-label={`Select year ${year}`}
-          onClick={() => {
-            calendar.set({ year })
-            mode.dispatch({ type: 'set-mode', payload: 'month-picker' })
-          }}
-          $status={getStatus(calendar, year)}
-        >
-          {year}
-        </PickerButton>
-      ))}
-    </Container>
-  )
-}
-
-export default CalendarYearPicker

package/src/components/Calendar/index.ts

@@ -1,10 +0,0 @@
-export { default as Calendar, GenericCalendar } from './Calendar'
-export { default as DateFormatHelper } from './DateFormat.helper'
-export { default as DateHelper, TODAY } from './Date.helper'
-export { default as MonthHelper } from './Month.helper'
-export { default as useCalendar } from './useCalendar'
-
-export type { CalendarDate, CalendarDateRange, CalendarConstraint } from './Date.helper'
-export type { DateFormat } from './DateFormat.helper'
-export type { CalendarMonth, CalendarMonthAlias } from './Month.helper'
-export type { CalendarProps, useCalendarProps, GenericCalendarProps } from './Calendar.types'