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

package/src/components/Calendar/Calendar.stories.tsx

@@ -1,168 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import { TODAY } from './Date.helper'
-import Calendar from './Calendar'
-
-import type { CalendarDate } from './Date.helper'
-import type { CalendarProps } from './Calendar.types'
-
-export default {
-  title: 'Components/Calendar',
-  component: Calendar,
-  argTypes: {
-    scale: {
-      control: {
-        type: 'select',
-        options: ['single', 'range'],
-      },
-    },
-    onDayClick: {
-      table: {
-        disable: true,
-      },
-    },
-    onMonthClick: {
-      table: {
-        disable: true,
-      },
-    },
-    onYearClick: {
-      table: {
-        disable: true,
-      },
-    },
-    onSelect: {
-      action: 'picked',
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-const Template: Story<CalendarProps> = (args): JSX.Element => {
-  return (
-    <div className="flex flex-col">
-      <Calendar {...args} />
-    </div>
-  )
-}
-
-export const Playground = Template.bind({})
-
-Playground.args = {
-  mode: 'single',
-}
-
-export function Selection(): JSX.Element {
-  return (
-    <div className="flex space-x-2">
-      <Calendar
-        year={2022}
-        month={0}
-        mode="single"
-        selected={[Date.UTC(2022, 0), Date.UTC(2022, 0)]}
-      />
-      <Calendar
-        year={2022}
-        month={0}
-        mode="range"
-        selected={[Date.UTC(2022, 0, 20), Date.UTC(2022, 1, 10)]}
-      />
-    </div>
-  )
-}
-
-function isWeekend(date: CalendarDate) {
-  return [0, 6].includes(date.getWeekday())
-}
-
-export function CalendarConstraints(args: CalendarProps): JSX.Element {
-  return (
-    <div className="flex flex-col">
-      <Calendar {...args} />
-    </div>
-  )
-}
-
-CalendarConstraints.args = {
-  constraints: [[null, TODAY.subtract('day', 1).toString()], isWeekend],
-}
-
-CalendarConstraints.parameters = {
-  docs: {
-    description: {
-      story: `
-Calendar 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.
-
-When defining specific date constraints, you can use timestamp, ISO date format, or \`Date\`.
-**Make sure to use \`CalendarDate.helper.ts\` to provide normalized values so the component treats them properly**.
-
-For ranges, using the same formats descrive above, you have a few options:
-
-* Equal or after a date (inclusive): \`[<start date>, null]\`
-* Equal or before a date (inclusive): \`[null, <end date>]\`
-* Equal or between dates (inclusive): \`[<start date>, <end date>]\`
-
-Alternatively, you can specify a function constraint that receives a \`CalendarDate\` and returns a boolean.
-
-You can provide as many constraints as you want.
-
-#### Block a specific date
-
-\`\`\`jsx
-<Calendar {...props} constraints={1643371200000} />
-
-<Calendar {...props} constraints="2022-01-01T12:00:00.000Z" />
-
-<Calendar {...props} constraints={new Date("2022-01-01T12:00:00.000Z")} />
-
-<Calendar {...props} constraints={[1643371200000]} />
-
-<Calendar {...props} constraints={[new Date("2022-01-01T12:00:00.000Z")]} />
-
-function isWeekend(date: CalendarDate) {
-  return [0, 6].includes(date.getWeekday())
-}
-
-<Calendar {...props} constraints={[isWeekend]} />
-\`\`\`
-
-#### Block a specific range of dates
-
-A range is specified with an array, or pair, with two values.
-
-Notice that, to specify a range you need to provide the prop \`constraints\` as an array.
-So \`constraints={[1641038400000, 1643371200000]}\` is restricing **exactly** the dates represented by the timestamps \`1641038400000\` and \`1643371200000\`, whereas
-\`constraints={[[1641038400000, 1643371200000]]}\` is restricing **all** the dates between the timestamps \`1641038400000\` and \`1643371200000\` (inclusive).
-
-\`\`\`jsx
-<Calendar {...props} constraints={[[1643371200000, 1643371200000]]} />
-
-<Calendar {...props} constraints={[["2022-01-01T12:00:00.000Z", null]]} />
-
-<Calendar {...props} constraints={[[null, new Date("2022-01-01T12:00:00.000Z")]]} />
-
-<Calendar {...props} constraints={[["2022-01-01T12:00:00.000Z", "2022-01-28T12:00:00.000Z"]]} />
-
-const TODAY = DateHelper();
-
-<Calendar {...props} constraints={[[null, TODAY.subtract('day', 1).toString()]]} />
-\`\`\`
-
-Always make sure your range of dates has start date before (or equal to) the end date, otherwise an \`InvalidDateConstraintError\` will be thrown.
-
-#### Block with multiple constraints
-
-You can combine the above in multiple constraints.
-
-\`\`\`jsx
-<Calendar {...props} constraints={["2021-12-31T12:00:00.000Z", ["2022-01-01T12:00:00.000Z", "2022-01-28T12:00:00.000Z"]]} />
-\`\`\`
-
-`,
-    },
-  },
-}

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

@@ -1,316 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import { getRenderableMonth } from './useCalendar'
-import { TODAY } from './Date.helper'
-import * as stories from './Calendar.stories'
-import DateFormatHelper from './DateFormat.helper'
-import DateHelper from './Date.helper'
-import generator from '../../tests/generator'
-import MonthHelper, { MONTH_BY_NAME } from './Month.helper'
-import renderer, { screen, fire } from '../../tests/renderer'
-
-import type { CalendarConstraint } from './Date.helper'
-import type { CalendarMonthAlias } from './Month.helper'
-import type { CalendarProps } from './Calendar.types'
-
-const { Playground } = composeStories(stories)
-
-const ALL_MONTHS = Object.keys(MONTH_BY_NAME).map((name) => MONTH_BY_NAME[name])
-
-export const formatter = DateFormatHelper('MM/DD/YYYY')
-
-const setup = (overrides: Partial<CalendarProps>) =>
-  renderer(<Playground {...overrides} />).render()
-
-describe('Calendar', () => {
-  it('render correctly with no month/year props', () => {
-    const props = {}
-
-    setup(props)
-
-    expect(screen.getByLabelText('Navigate to previous month')).toBeInTheDocument()
-    expect(screen.getByLabelText('Open month selection')).toBeInTheDocument()
-    expect(screen.getByLabelText('Open year selection')).toBeInTheDocument()
-    expect(screen.getByLabelText('Navigate to next month')).toBeInTheDocument()
-
-    expect(screen.getByTestId('calendar-day-picker')).toBeInTheDocument()
-
-    const currentMonthDetails = getRenderableMonth(TODAY.getYear(), TODAY.getMonth())
-
-    expect(screen.getByLabelText('Open month selection')).toHaveTextContent(
-      MonthHelper(currentMonthDetails.month as CalendarMonthAlias).format('long')
-    )
-
-    expect(screen.getByLabelText('Open year selection')).toHaveTextContent(
-      String(currentMonthDetails.year)
-    )
-  })
-
-  it('render correctly with month/year props', () => {
-    const props = {
-      month: 1, // february
-      year: 2020,
-    }
-
-    setup(props)
-
-    const currentMonthDetails = getRenderableMonth(props.year, props.month)
-
-    expect(screen.getByLabelText('Open month selection')).toHaveTextContent(
-      MonthHelper(currentMonthDetails.month as CalendarMonthAlias).format('long')
-    )
-
-    expect(screen.getByLabelText('Open year selection')).toHaveTextContent(
-      String(currentMonthDetails.year)
-    )
-  })
-
-  it('navigates to previous month', () => {
-    const props = {
-      month: 0, // january
-      year: 2020,
-    }
-
-    setup(props)
-
-    const currentMonthDetails = getRenderableMonth(props.year, props.month)
-
-    expect(screen.getByLabelText('Open month selection')).toHaveTextContent(
-      MonthHelper(currentMonthDetails.month as CalendarMonthAlias).format('long')
-    )
-
-    expect(screen.getByLabelText('Open year selection')).toHaveTextContent(
-      String(currentMonthDetails.year)
-    )
-
-    fire.click(screen.getByLabelText('Navigate to previous month'))
-
-    expect(screen.getByLabelText('Open month selection')).toHaveTextContent('December')
-
-    expect(screen.getByLabelText('Open year selection')).toHaveTextContent('2019')
-  })
-
-  it('navigates to next month', () => {
-    const props = {
-      month: 11, // december
-      year: 2019,
-    }
-
-    setup(props)
-
-    const currentMonthDetails = getRenderableMonth(props.year, props.month)
-
-    expect(screen.getByLabelText('Open month selection')).toHaveTextContent(
-      MonthHelper(currentMonthDetails.month as CalendarMonthAlias).format('long')
-    )
-
-    expect(screen.getByLabelText('Open year selection')).toHaveTextContent(
-      String(currentMonthDetails.year)
-    )
-
-    fire.click(screen.getByLabelText('Navigate to next month'))
-
-    expect(screen.getByLabelText('Open month selection')).toHaveTextContent('January')
-
-    expect(screen.getByLabelText('Open year selection')).toHaveTextContent('2020')
-  })
-
-  it('toggles month selection', () => {
-    const props = {}
-
-    setup(props)
-
-    expect(screen.getByTestId('calendar-day-picker')).toBeInTheDocument()
-    expect(screen.queryByTestId('calendar-month-picker')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('calendar-year-picker')).not.toBeInTheDocument()
-
-    fire.click(screen.getByLabelText('Open month selection'))
-
-    expect(screen.queryByTestId('calendar-day-picker')).not.toBeInTheDocument()
-    expect(screen.getByTestId('calendar-month-picker')).toBeInTheDocument()
-    expect(screen.queryByTestId('calendar-year-picker')).not.toBeInTheDocument()
-  })
-
-  it('selects month', () => {
-    const props = {}
-
-    setup(props)
-
-    fire.click(screen.getByLabelText('Open month selection'))
-
-    const selectedMonth = generator.pickone(ALL_MONTHS)
-    fire.click(screen.getByLabelText(`Select month ${selectedMonth.name}`))
-
-    expect(screen.getByLabelText('Open month selection')).toHaveTextContent(
-      MonthHelper(selectedMonth.name as CalendarMonthAlias).format('long')
-    )
-
-    expect(screen.getByTestId('calendar-day-picker')).toBeInTheDocument()
-  })
-
-  it('toggles year selection', () => {
-    const props = {}
-
-    setup(props)
-
-    expect(screen.getByTestId('calendar-day-picker')).toBeInTheDocument()
-    expect(screen.queryByTestId('calendar-month-picker')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('calendar-year-picker')).not.toBeInTheDocument()
-
-    fire.click(screen.getByLabelText('Open year selection'))
-
-    expect(screen.queryByTestId('calendar-day-picker')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('calendar-month-picker')).not.toBeInTheDocument()
-    expect(screen.getByTestId('calendar-year-picker')).toBeInTheDocument()
-  })
-
-  it('selects year', () => {
-    const props = {}
-
-    setup(props)
-
-    fire.click(screen.getByLabelText('Open year selection'))
-
-    const selectedYear = generator.natural({ min: 2012, max: 2031 })
-    fire.click(screen.getByLabelText(`Select year ${selectedYear}`))
-
-    expect(screen.getByLabelText('Open year selection')).toHaveTextContent(String(selectedYear))
-
-    expect(screen.getByTestId('calendar-month-picker')).toBeInTheDocument()
-  })
-
-  it('renders selected day', () => {
-    const month = generator.natural({ min: 0, max: 11 })
-    const year = generator.natural({ min: 2012, max: 2031 })
-
-    const date = DateHelper(Date.UTC(year, month, generator.natural({ min: 1, max: 28 })))
-
-    const props = {
-      month,
-      year,
-      selected: [date.getTime(), date.getTime()] as [number, number],
-    }
-
-    setup(props)
-
-    expect(screen.getByRole('checkbox', { name: formatter.format(date) })).toBeChecked()
-  })
-
-  it('renders selected range of days', () => {
-    const startMonth = generator.natural({ min: 0, max: 10 })
-    const endMonth = startMonth + 1
-    const year = generator.natural({ min: 2012, max: 2031 })
-
-    const startDay = generator.natural({ min: 5, max: 10 })
-    const endDay = startDay + generator.natural({ min: 5, max: 10 })
-
-    const startDate = DateHelper(Date.UTC(year, startMonth, startDay))
-    const endDate = DateHelper(Date.UTC(year, endMonth, endDay))
-
-    const props: Partial<CalendarProps> = {
-      mode: 'range',
-      month: startMonth,
-      year,
-      selected: [startDate.getTime(), endDate.getTime()] as [number, number],
-    }
-
-    setup(props)
-
-    let currDate = DateHelper(startDate.getTime())
-
-    while (currDate.getTime() < endDate.getTime()) {
-      expect(screen.getByRole('checkbox', { name: formatter.format(currDate) })).toBeChecked()
-
-      currDate = currDate.add('day', 1)
-    }
-  })
-
-  describe('Constraints', () => {
-    it('disables a day', () => {
-      const month = generator.natural({ min: 0, max: 11 })
-      const year = generator.natural({ min: 2012, max: 2031 })
-
-      const disabledDate = DateHelper(new Date(year, month, generator.natural({ min: 1, max: 28 })))
-
-      const props = {
-        year,
-        month,
-        constraints: disabledDate.toString(),
-      }
-
-      setup(props)
-
-      expect(screen.getByRole('checkbox', { name: formatter.format(disabledDate) })).toBeDisabled()
-    })
-
-    it('disables before a day (inclusive)', () => {
-      const month = generator.natural({ min: 0, max: 11 })
-      const year = generator.natural({ min: 2012, max: 2031 })
-
-      const rangeEndDate = DateHelper(new Date(year, month, generator.natural({ min: 2, max: 28 })))
-
-      const props = {
-        year,
-        month,
-        constraints: [[null, rangeEndDate.toString()] as CalendarConstraint],
-      }
-
-      setup(props)
-
-      for (let day = 1; day <= rangeEndDate.getDate(); day++) {
-        const date = DateHelper(new Date(year, month, day))
-        expect(screen.getByRole('checkbox', { name: formatter.format(date) })).toBeDisabled()
-      }
-    })
-
-    it('disables after a day (inclusive)', () => {
-      const month = generator.natural({ min: 0, max: 11 })
-      const year = generator.natural({ min: 2012, max: 2031 })
-
-      const rangeStartDate = DateHelper(
-        new Date(year, month, generator.natural({ min: 1, max: 27 }))
-      )
-
-      const props = {
-        year,
-        month,
-        constraints: [[rangeStartDate.toString(), null] as CalendarConstraint],
-      }
-
-      setup(props)
-
-      for (let day = rangeStartDate.getDate(); day <= 28; day++) {
-        const date = DateHelper(new Date(year, month, day))
-        expect(screen.getByRole('checkbox', { name: formatter.format(date) })).toBeDisabled()
-      }
-    })
-
-    it('disables between a range (inclusive)', () => {
-      const month = generator.natural({ min: 0, max: 11 })
-      const year = generator.natural({ min: 2012, max: 2031 })
-
-      const rangeStartDate = DateHelper(
-        new Date(year, month, generator.natural({ min: 1, max: 14 }))
-      )
-
-      const rangeEndDate = DateHelper(
-        new Date(year, month, generator.natural({ min: 15, max: 28 }))
-      )
-
-      const props = {
-        year,
-        month,
-        constraints: [[rangeStartDate.toString(), rangeEndDate.toString()] as CalendarConstraint],
-      }
-
-      setup(props)
-
-      for (let day = rangeStartDate.getDate(); day <= rangeEndDate.getDate(); day++) {
-        const date = DateHelper(new Date(year, month, day))
-        expect(screen.getByRole('checkbox', { name: formatter.format(date) })).toBeDisabled()
-      }
-    })
-  })
-})

package/src/components/Calendar/Calendar.tsx

@@ -1,130 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { BaseButton } from 'components/Button'
-import { getToken as token } from 'theming'
-import { Group, Stack } from 'components/Layout'
-import { Icon } from 'components/Icon'
-import conditional, { whenProps } from 'tools/conditional'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import MonthHelper from './Month.helper'
-import PickerModeToggle from './PickerModeToggle'
-import typography from 'styles/typography'
-import useCalendar from './useCalendar'
-import usePickerMode from './usePickerMode'
-
-import type { CalendarMonthAlias } from './Month.helper'
-import type { CalendarProps, GenericCalendarProps } from './Calendar.types'
-
-const Container = styled(Stack)`
-  ${typography('body')}
-  min-width: calc((7 * 2.5rem) + (6 * ${token('space-2xs')}));
-`
-
-const BorderlessButton = styled(BaseButton)`
-  ${typography('body-bold')}
-  border-color: transparent;
-  background-color: transparent;
-
-  color: ${token('color-neutral')};
-
-  inline-size: 40px;
-
-  visibility: ${conditional({
-    visible: whenProps({ 'aria-hidden': false }),
-    hidden: whenProps({ 'aria-hidden': true }),
-  })};
-
-  ${hoverable`
-    color: ${token('color-neutral-dark')};
-  `}
-
-  ${focusable`
-    box-shadow: ${token('button-primary-outline')};
-  `}
-`
-
-/**
- * Implementation based on
- * * https://medium.com/swlh/build-a-date-picker-in-15mins-using-javascript-react-from-scratch-f6932c77db09
- * * https://codepen.io/zellwk/pen/xNpKwp
- */
-export function GenericCalendar(props: GenericCalendarProps): JSX.Element {
-  const { calendar, onDayClick, onMonthClick, onYearClick, ...others } = props
-  const mode = usePickerMode()
-
-  const { Picker } = mode
-
-  return (
-    <Container space="xs" {...others}>
-      <Group>
-        <BorderlessButton
-          type="button"
-          aria-label="Navigate to previous month"
-          aria-hidden={!mode.is('day-picker')}
-          onClick={() => {
-            calendar.set({ month: calendar.months[0].month - 1 })
-          }}
-        >
-          <Icon name="caret-left" size={16} />
-        </BorderlessButton>
-
-        {calendar.months.map((month) => {
-          return (
-            <Group key={month.month} space="xs" align="center" justify="center" style={{ flex: 1 }}>
-              <PickerModeToggle
-                aria-label="Open month selection"
-                onClick={() => {
-                  mode.dispatch({ type: 'toggle-mode', payload: 'month-picker' })
-                }}
-                expanded={mode.is('month-picker')}
-                disabled={calendar.mode == 'range'}
-              >
-                {MonthHelper(month.month as CalendarMonthAlias).format('long')}
-              </PickerModeToggle>
-
-              <PickerModeToggle
-                aria-label="Open year selection"
-                onClick={() => {
-                  mode.dispatch({ type: 'toggle-mode', payload: 'year-picker' })
-                }}
-                expanded={mode.is('year-picker')}
-                disabled={calendar.mode == 'range'}
-              >
-                {month.year}
-              </PickerModeToggle>
-            </Group>
-          )
-        })}
-        <BorderlessButton
-          type="button"
-          aria-label="Navigate to next month"
-          aria-hidden={!mode.is('day-picker')}
-          onClick={() => {
-            calendar.set({ month: calendar.months[0].month + 1 })
-          }}
-        >
-          <Icon name="caret-right" size={16} />
-        </BorderlessButton>
-      </Group>
-
-      <Picker
-        calendar={calendar}
-        mode={mode}
-        onDayClick={onDayClick}
-        onMonthClick={onMonthClick}
-        onYearClick={onYearClick}
-      />
-    </Container>
-  )
-}
-
-function Calendar(props: CalendarProps): JSX.Element {
-  const { year, month, selected, constraints, onSelect, mode, ...rest } = props
-  const calendar = useCalendar({ year, month, selected, constraints, mode, onSelect })
-
-  return <GenericCalendar calendar={calendar} {...rest} />
-}
-
-export default Calendar

package/src/components/Calendar/Calendar.types.ts

@@ -1,68 +0,0 @@
-import type { HTMLAttributes } from 'react'
-
-import type { CalendarDate, CalendarConstraint } from './Date.helper'
-
-export type RenderableMonth = {
-  month: number
-  year: number
-  days: CalendarDate[]
-}
-
-export type CalendarMode = 'single' | 'range'
-export interface useCalendarProps {
-  year?: number
-  month?: number
-  mode?: CalendarMode
-  selected?: null | [string | number | null, string | number | null] // doc: timestamp or iso string,as specifified by CalendarDate
-  onSelect?: (selection: [string | null, string | null]) => void
-  constraints?: CalendarConstraint | CalendarConstraint[]
-}
-export interface useCalendarReturn {
-  mode: CalendarMode
-  months: RenderableMonth[]
-  selected: [number | null, number | null]
-  constraints: CalendarConstraint[]
-  clear: () => void
-  set: (args: { month?: number | undefined; year?: number | undefined }) => void
-  select: (range: useCalendarProps['selected']) => void
-}
-
-export type PickerMode = 'day-picker' | 'month-picker' | 'year-picker'
-
-export type PickerModeAction =
-  | { type: 'set-mode'; payload: PickerMode }
-  | { type: 'toggle-mode'; payload: PickerMode }
-
-export interface usePickerModeProps {
-  mode: PickerMode
-}
-
-export interface CalendarPickerProps {
-  calendar: useCalendarReturn
-  mode: usePickerModeReturn
-  onDayClick?: (timestamp: number) => void
-  onMonthClick?: (month: number) => void
-  onYearClick?: (year: number) => void
-}
-
-export interface usePickerModeReturn {
-  get(): PickerMode
-  is(other: PickerMode): boolean
-  dispatch: React.Dispatch<PickerModeAction>
-  Picker: (props: CalendarPickerProps) => JSX.Element
-}
-
-export interface CalendarProps
-  extends useCalendarProps,
-    Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  onDayClick?: CalendarPickerProps['onDayClick']
-  onMonthClick?: CalendarPickerProps['onMonthClick']
-  onYearClick?: CalendarPickerProps['onYearClick']
-}
-
-export interface GenericCalendarProps extends HTMLAttributes<HTMLDivElement> {
-  calendar: useCalendarReturn
-  onDayClick?: CalendarPickerProps['onDayClick']
-  onMonthClick?: CalendarPickerProps['onMonthClick']
-  onYearClick?: CalendarPickerProps['onYearClick']
-}