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

package/src/components/Calendar/DateFormat.helper.ts

@@ -1,195 +0,0 @@
-import { identity } from '@loadsmart/utils-function'
-import { padded } from './Date.helper'
-
-import type { CalendarDate } from './Date.helper'
-import { getOrdinalSuffix } from 'utils/toolset/getOrdinalSuffix'
-
-export interface DateFormat {
-  format(date: CalendarDate): string
-}
-
-const getTokenValue = (date: CalendarDate, token: string) => {
-  const value = DEFAULT_FORMATTERS[token].format(date.get())
-
-  return (ADDITIONAL_FORMATTERS[token] || identity)(value)
-}
-
-/**
- * This helpers provides a convenient layer on top of `Intl.DateTimeFormat`,
- * using common tokens (based on `momentjs`) to format dates.
- */
-export default function DateFormatHelper(format: string): DateFormat {
-  const tokens = tokenizer(format)
-
-  return {
-    format(date: CalendarDate) {
-      return tokens
-        .map((token, index) => {
-          const previousIndex = index - 1
-          const previousToken = tokens[previousIndex]
-
-          if (token in DEFAULT_FORMATTERS) {
-            return getTokenValue(date, token)
-          }
-
-          if (token in COMPOUND_FORMATTERS && COMPOUND_FORMATTERS[token].valid(previousToken)) {
-            return COMPOUND_FORMATTERS[token].format(getTokenValue(date, previousToken))
-          }
-
-          return token
-        })
-        .join('')
-    },
-  }
-}
-
-/**
- * Supported tokens:
- *
- *|                                | Token | Output                                    |
- *| :----------------------------- | :---- | :---------------------------------------- |
- *| Month                          | MM    | 01, 02, ..., 11, 12                       |
- *|                                | MMM   | Jan, Feb, ..., Nov, Dec                   |
- *|                                | MMMM  | January, February, ..., November,December |
- *| Day of Month                   | D     | 1, 2, ..., 30, 31                         |
- *| Day of Month with leading 0    | DD    | 01, 02, ..., 30, 31                       |
- *| Day of week                    | ddd   | Sun, Mon, ... Fri, Sat                    |
- *|                                | dddd  | Sunday, Monday, ..., Friday, Saturday     |
- *| Year                           | YYYY  | 1970, 1971, ..., 2029, 2030               |
- *| Hour                           | HH    | 00, 01, ..., 22, 23                       |
- *|                                | hh    | 00, 01, ..., 11, 12                       |
- *| Minute                         | mm    | 01, 02, ..., 58, 59                       |
- *| Seconds                        | ss    | 01, 02, ..., 58, 59                       |
- *| Post or ante meridiem          | a     | am, pm                                    |
- *|                                | A     | AM, PM                                    |
- *| Ordinal numbers                | o     | 1st, 2nd, 3rd, ..., 10th                  |
- *| Scaped sequence                | []    |                                           |
- *
- * @param format
- * @returns
- */
-export function tokenizer(format: string): string[] {
-  function getType(char?: string): string {
-    if (
-      char != undefined &&
-      ['M', 'd', 'D', 'Y', 'H', 'h', 'm', 's', 'A', 'a', 'o'].includes(char)
-    ) {
-      return 'token'
-    }
-
-    return 'string'
-  }
-
-  const tokens: string[] = []
-
-  let i = 0
-  let prev
-  let isEscaping = false
-
-  while (i < format.length) {
-    const at = Math.max(0, tokens.length - 1)
-
-    const char = format.charAt(i)
-    i++
-
-    if (['[', ']'].includes(char)) {
-      isEscaping = char === '['
-    } else if (isEscaping) {
-      tokens[at] = `${tokens[at] || ''}${char}`
-    } else if (prev !== char && [getType(prev), getType(char)].includes('token')) {
-      // we just need to start a new piece of string if we found a possible valid token
-      tokens.push(char)
-    } else {
-      tokens[at] = `${tokens[at] || ''}${char}`
-    }
-
-    prev = char
-  }
-
-  return tokens
-}
-
-/**
- * TODO: Evaluate the need to add the following pollyfills:
- * - https://formatjs.io/docs/polyfills/intl-datetimeformat/
- * - https://formatjs.io/docs/polyfills/intl-getcanonicallocales/
- * - https://formatjs.io/docs/polyfills/intl-locale/
- * - https://formatjs.io/docs/polyfills/intl-numberformat/
- * - https://formatjs.io/docs/polyfills/intl-pluralrules/
- */
-const DEFAULT_FORMATTERS: Record<string, Intl.DateTimeFormat> = {
-  MM: new Intl.DateTimeFormat('en-US', {
-    month: '2-digit',
-  }),
-  MMM: new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-  }),
-  MMMM: new Intl.DateTimeFormat('en-US', {
-    month: 'long',
-  }),
-  D: new Intl.DateTimeFormat('en-US', {
-    day: 'numeric',
-  }),
-  DD: new Intl.DateTimeFormat('en-US', {
-    day: '2-digit',
-  }),
-  ddd: new Intl.DateTimeFormat('en-US', {
-    weekday: 'short',
-  }),
-  dddd: new Intl.DateTimeFormat('en-US', {
-    weekday: 'long',
-  }),
-  YYYY: new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-  }),
-  HH: new Intl.DateTimeFormat('en-US', {
-    hour: '2-digit',
-    hourCycle: 'h23',
-  }),
-  hh: new Intl.DateTimeFormat('en-US', {
-    hour: '2-digit',
-    hour12: true,
-  }),
-  mm: new Intl.DateTimeFormat('en-US', {
-    minute: '2-digit',
-    hour12: false,
-  }),
-  ss: new Intl.DateTimeFormat('en-US', {
-    second: '2-digit',
-    hour12: false,
-  }),
-  a: new Intl.DateTimeFormat('en-US', {
-    hour: '2-digit',
-    hour12: true,
-  }),
-  A: new Intl.DateTimeFormat('en-US', {
-    hour: '2-digit',
-    hour12: true,
-  }),
-}
-
-/**
- * Apply additional formatting.
- *
- * Padding, for example, is applied in some cases due to [this](https://bugs.chromium.org/p/chromium/issues/detail?id=527926) bug.
- */
-const ADDITIONAL_FORMATTERS: Record<string, (value: string) => string> = {
-  hh: (value: string) => (value ? padded(value.split(/\s/)[0], 2) : value),
-  HH: (value: string) => (value ? padded(value, 2) : value),
-  mm: (value: string) => (value ? padded(value, 2) : value),
-  ss: (value: string) => (value ? padded(value, 2) : value),
-  a: (value: string) => (value ? (value.split(/\s/)[1] || '').toLowerCase() : value),
-  A: (value: string) => (value ? (value.split(/\s/)[1] || '').toUpperCase() : value),
-}
-
-type CompoundFormatter = {
-  valid: (token: string) => boolean
-  format: (value: string) => string
-}
-
-const COMPOUND_FORMATTERS: Record<string, CompoundFormatter> = {
-  o: {
-    valid: (token) => new Set(['D', 'DD']).has(token),
-    format: (value: string) => getOrdinalSuffix(parseInt(value, 10)),
-  },
-}

package/src/components/Calendar/Month.helper.test.ts

@@ -1,187 +0,0 @@
-import MonthHelper, { MONTH_BY_NAME, MONTH_BY_ALIAS } from './Month.helper'
-
-import type { CalendarMonth, CalendarMonthAlias } from './Month.helper'
-
-const ALL_MONTHS = Object.keys(MONTH_BY_NAME).map((name) => MONTH_BY_NAME[name])
-const ALL_MONTHS_ALIASES = Object.keys(MONTH_BY_ALIAS) as CalendarMonthAlias[]
-
-describe('MonthHelper', () => {
-  describe('getAll', () => {
-    it('returns all months', () => {
-      expect(MonthHelper.getAll()).toEqual(ALL_MONTHS)
-    })
-  })
-
-  // Checks if all aliases return the expected month
-  ;(
-    [
-      {
-        expectedAliases: ['0', 'jan', 'january'],
-        month: MONTH_BY_NAME.january,
-      },
-      {
-        expectedAliases: ['1', 'feb', 'february'],
-        month: MONTH_BY_NAME.february,
-      },
-      {
-        expectedAliases: ['2', 'mar', 'march'],
-        month: MONTH_BY_NAME.march,
-      },
-      {
-        expectedAliases: ['3', 'apr', 'april'],
-        month: MONTH_BY_NAME.april,
-      },
-      {
-        expectedAliases: ['4', 'may', 'may'],
-        month: MONTH_BY_NAME.may,
-      },
-      {
-        expectedAliases: ['5', 'jun', 'june'],
-        month: MONTH_BY_NAME.june,
-      },
-      {
-        expectedAliases: ['6', 'jul', 'july'],
-        month: MONTH_BY_NAME.july,
-      },
-      {
-        expectedAliases: ['7', 'aug', 'august'],
-        month: MONTH_BY_NAME.august,
-      },
-      {
-        expectedAliases: ['8', 'sep', 'september'],
-        month: MONTH_BY_NAME.september,
-      },
-      {
-        expectedAliases: ['9', 'oct', 'october'],
-        month: MONTH_BY_NAME.october,
-      },
-      {
-        expectedAliases: ['10', 'nov', 'november'],
-        month: MONTH_BY_NAME.november,
-      },
-      {
-        expectedAliases: ['11', 'dec', 'december'],
-        month: MONTH_BY_NAME.december,
-      },
-    ] as { expectedAliases: CalendarMonthAlias[]; month: CalendarMonth }[]
-  ).forEach(({ expectedAliases, month }) => {
-    describe(month.name, () => {
-      it(`returns ${month.name} month`, () => {
-        expectedAliases.forEach((alias) => {
-          expect(MonthHelper(alias)).not.toBeNull()
-          expect(MonthHelper(alias).get()).toEqual(month)
-        })
-      })
-
-      it(`compares ${month.name} months correctly`, () => {
-        ALL_MONTHS_ALIASES.forEach((someAlias) => {
-          expectedAliases.forEach((expectedAlias) => {
-            expect(MonthHelper(someAlias).is(expectedAlias)).toBe(
-              expectedAliases.includes(someAlias)
-            )
-          })
-        })
-      })
-    })
-  })
-
-  it('formats correctly', () => {
-    const EXPECTED = {
-      january: {
-        numeric: '1',
-        '2-digit': '01',
-        short: 'Jan',
-        narrow: 'J',
-        long: 'January',
-      },
-      february: {
-        numeric: '2',
-        '2-digit': '02',
-        short: 'Feb',
-        narrow: 'F',
-        long: 'February',
-      },
-      march: {
-        numeric: '3',
-        '2-digit': '03',
-        short: 'Mar',
-        narrow: 'M',
-        long: 'March',
-      },
-      april: {
-        numeric: '4',
-        '2-digit': '04',
-        short: 'Apr',
-        narrow: 'A',
-        long: 'April',
-      },
-      may: {
-        numeric: '5',
-        '2-digit': '05',
-        short: 'May',
-        narrow: 'M',
-        long: 'May',
-      },
-      june: {
-        numeric: '6',
-        '2-digit': '06',
-        short: 'Jun',
-        narrow: 'J',
-        long: 'June',
-      },
-      july: {
-        numeric: '7',
-        '2-digit': '07',
-        short: 'Jul',
-        narrow: 'J',
-        long: 'July',
-      },
-      august: {
-        numeric: '8',
-        '2-digit': '08',
-        short: 'Aug',
-        narrow: 'A',
-        long: 'August',
-      },
-      september: {
-        numeric: '9',
-        '2-digit': '09',
-        short: 'Sep',
-        narrow: 'S',
-        long: 'September',
-      },
-      october: {
-        numeric: '10',
-        '2-digit': '10',
-        short: 'Oct',
-        narrow: 'O',
-        long: 'October',
-      },
-      november: {
-        numeric: '11',
-        '2-digit': '11',
-        short: 'Nov',
-        narrow: 'N',
-        long: 'November',
-      },
-      december: {
-        numeric: '12',
-        '2-digit': '12',
-        short: 'Dec',
-        narrow: 'D',
-        long: 'December',
-      },
-    }
-
-    const entries = Object.entries(EXPECTED)
-    for (let i = 0; i < entries.length; i++) {
-      const [key, expected] = entries[i]
-
-      expect(MonthHelper(key as CalendarMonthAlias).format('numeric')).toBe(expected.numeric)
-      expect(MonthHelper(key as CalendarMonthAlias).format('2-digit')).toBe(expected['2-digit'])
-      expect(MonthHelper(key as CalendarMonthAlias).format('short')).toBe(expected.short)
-      expect(MonthHelper(key as CalendarMonthAlias).format('narrow')).toBe(expected.narrow)
-      expect(MonthHelper(key as CalendarMonthAlias).format('long')).toBe(expected.long)
-    }
-  })
-})

package/src/components/Calendar/Month.helper.ts

@@ -1,172 +0,0 @@
-export function aliased<T>(aliasMap: Record<number | string, T>, alias: number | string): T {
-  return aliasMap[String(alias).toLowerCase()]
-}
-
-export const MONTH_BY_ALIAS = {
-  0: 'january',
-  jan: 'january',
-  january: 'january',
-
-  1: 'february',
-  feb: 'february',
-  february: 'february',
-
-  2: 'march',
-  mar: 'march',
-  march: 'march',
-
-  3: 'april',
-  apr: 'april',
-  april: 'april',
-
-  4: 'may',
-  may: 'may',
-
-  5: 'june',
-  jun: 'june',
-  june: 'june',
-
-  6: 'july',
-  jul: 'july',
-  july: 'july',
-
-  7: 'august',
-  aug: 'august',
-  august: 'august',
-
-  8: 'september',
-  sep: 'september',
-  september: 'september',
-
-  9: 'october',
-  oct: 'october',
-  october: 'october',
-
-  10: 'november',
-  nov: 'november',
-  november: 'november',
-
-  11: 'december',
-  dec: 'december',
-  december: 'december',
-}
-
-export type CalendarMonthAlias = keyof typeof MONTH_BY_ALIAS
-
-export type CalendarMonth = {
-  name: string
-  /**
-   * Integer value representing the month, beginning with 0 for January to 11 for December.
-   * Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date
-   */
-  index: number
-}
-
-export const MONTH_BY_NAME: Record<string, CalendarMonth> = {
-  january: {
-    name: 'January',
-    index: 0,
-  },
-  february: {
-    name: 'February',
-    index: 1,
-  },
-  march: {
-    name: 'March',
-    index: 2,
-  },
-  april: {
-    name: 'April',
-    index: 3,
-  },
-  may: {
-    name: 'May',
-    index: 4,
-  },
-  june: {
-    name: 'June',
-    index: 5,
-  },
-  july: {
-    name: 'July',
-    index: 6,
-  },
-  august: {
-    name: 'August',
-    index: 7,
-  },
-  september: {
-    name: 'September',
-    index: 8,
-  },
-  october: {
-    name: 'October',
-    index: 9,
-  },
-  november: {
-    name: 'November',
-    index: 10,
-  },
-  december: {
-    name: 'December',
-    index: 11,
-  },
-}
-
-function getMonthByAlias(alias: CalendarMonthAlias): CalendarMonth {
-  alias = aliased(MONTH_BY_ALIAS, alias) as CalendarMonthAlias
-
-  return MONTH_BY_NAME[alias]
-}
-
-function getAllMonths() {
-  return (Object.keys(MONTH_BY_NAME) as CalendarMonthAlias[]).map((alias) => {
-    return getMonthByAlias(alias)
-  })
-}
-
-function MonthHelper(alias: CalendarMonthAlias): {
-  get(): CalendarMonth
-  format(representation?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'): string
-  is(other: CalendarMonthAlias): boolean
-} {
-  const month = getMonthByAlias(alias)
-
-  return {
-    get() {
-      return month
-    },
-    /**
-     * Follows same values available in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat.
-     *  * "numeric" (e.g., 3)
-     *  * "2-digit" (e.g., 03)
-     *  * "long" (e.g., March)
-     *  * "short" (e.g., Mar)
-     *  * "narrow" (e.g., M)
-     */
-    format(representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' = 'long') {
-      switch (representation) {
-        case 'numeric':
-          return String(month.index + 1)
-        case '2-digit':
-          return String(month.index + 1).padStart(2, '0')
-        case 'short':
-          return month.name.slice(0, 3)
-        case 'narrow':
-          return month.name.slice(0, 1)
-        default:
-          return month.name
-      }
-    },
-    is(other: CalendarMonthAlias) {
-      return (
-        getMonthByAlias(other) != null &&
-        aliased(MONTH_BY_ALIAS, alias) === aliased(MONTH_BY_ALIAS, other)
-      )
-    },
-  }
-}
-
-MonthHelper.getAll = getAllMonths
-
-export default MonthHelper

package/src/components/Calendar/PickerModeToggle.tsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { BaseButton } from 'components/Button'
-import { getToken as token } from 'theming'
-import { Icon } from 'components/Icon'
-import conditional, { whenProps } from 'tools/conditional'
-import focusable from 'styles/focusable'
-import disableable from 'styles/disableable'
-import typography from 'styles/typography'
-
-import type { ButtonProps } from 'components/Button'
-
-const Button = styled(BaseButton)`
-  user-select: none;
-
-  ${typography(
-    conditional({
-      'body-bold': whenProps({ 'aria-expanded': true }),
-      body: whenProps({ 'aria-expanded': false }),
-    })
-  )};
-  border-color: transparent;
-  background-color: transparent;
-
-  color: ${token('color-neutral-dark')};
-
-  ${focusable`
-    box-shadow: ${token('button-primary-outline')};
-  `}
-
-  ${disableable`
-    pointer-events: none;
-    opacity: 1;
-  `}
-`
-
-const Caret = styled(Icon)<{ $rotate: boolean }>`
-  ${conditional({
-    'transform: rotate(180deg);': whenProps({ $rotate: true }),
-  })}
-`
-
-function PickerModeToggle(
-  props: Omit<ButtonProps & { expanded: boolean }, 'trailing'>
-): JSX.Element {
-  const { expanded, disabled, ...others } = props
-
-  return (
-    <Button
-      type="button"
-      {...others}
-      aria-haspopup="true"
-      aria-expanded={expanded}
-      disabled={disabled}
-      trailing={!disabled && <Caret name="chevron-down" size={16} $rotate={expanded} />}
-    />
-  )
-}
-
-export default PickerModeToggle

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

@@ -1,85 +0,0 @@
-import React from 'react'
-
-import DateHelper from '../Date.helper'
-import DayPicker, { WEEKDAYS } from './DayPicker'
-import generator from '../../../tests/generator'
-import renderer, { screen, fire } from '../../../tests/renderer'
-
-import type { useCalendarReturn, CalendarPickerProps, usePickerModeReturn } from '../Calendar.types'
-
-const setup = (overrides: CalendarPickerProps) => renderer(<DayPicker {...overrides} />).render()
-
-describe('DayPicker', () => {
-  const month = {
-    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'),
-    ],
-  }
-
-  const mockedCalendar: useCalendarReturn = {
-    mode: 'single',
-    months: [month],
-    selected: [month.days[1].getTime(), month.days[3].getTime()],
-    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 weekdays correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    WEEKDAYS.forEach((weekday) => {
-      expect(screen.getByText(weekday)).toBeInTheDocument()
-    })
-  })
-
-  it('renders all days of the month correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    mockedCalendar.months[0].days.forEach((day) => {
-      expect(screen.getByText(day.getDate())).toBeInTheDocument()
-    })
-  })
-
-  it('renders selected days correctly', () => {
-    const props: CalendarPickerProps = { calendar: mockedCalendar, mode: mockedMode }
-    setup(props)
-
-    const selectedDays = screen.getAllByRole('checkbox', { checked: true })
-
-    expect(selectedDays[0]).toHaveTextContent('2')
-    expect(selectedDays[1]).toHaveTextContent('3')
-    expect(selectedDays[2]).toHaveTextContent('4')
-  })
-
-  it('trigger selection correctly', () => {
-    const props: CalendarPickerProps = {
-      calendar: mockedCalendar,
-      mode: mockedMode,
-      onDayClick: jest.fn(),
-    }
-    setup(props)
-
-    const selectedDay = generator.pickone(month.days)
-
-    fire.click(screen.getByText(String(selectedDay.getDate())))
-
-    expect(props.onDayClick).toHaveBeenCalledWith(selectedDay.getTime())
-  })
-})