@loadsmart/loadsmart-ui 5.10.0 → 5.11.0

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

@@ -11,6 +11,9 @@ export const DEFAULT_OPTIONS: DateHelperOptions = {
 
 export type InputDate = string | number | Date
 
+type Unit = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond'
+type Operator = '>=' | '>' | '=' | '<' | '<='
+
 export type DateConstraint =
   | InputDate
   | [InputDate, InputDate]
@@ -87,42 +90,58 @@ export interface CalendarDate {
    * @returns {number}
    */
   getSeconds(): number
+  /**
+   * Get the milliseconds value.
+   *
+   * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+   * `options.normalize: false`.
+   *
+   * @returns {number}
+   */
+  getMilliseconds(): number
   /**
    * Check if the current date matches **at least one** of the provided constraints.
+   *
+   * [!] Be aware that all dates in this comparison will be normalized to 12:00:00 (UTC).
+   *
    * @param {...CalendarConstraint[]} constraintsArg
    * @returns {boolean}
    */
   matches(...constraints: CalendarConstraint[]): boolean
   /**
-   * Set the given `value` to the `key` property of this instance.
+   * Set the given `value` to the `unit` property of this instance.
    * This function mutates the internal date instance.
-   * @param {('year' | 'month' | 'day')} key
+   * @param {Unit} unit
    * @param {number} value
    * @returns {CalendarDate}
    */
-  set(key: 'year' | 'month' | 'day', value: number): CalendarDate
+  set(unit: Unit, value: number): CalendarDate
   /**
-   * Return a copy of this instance, adding the given `value` to the `key` property.
-   * @param {('year' | 'month' | 'day')} key
+   * Return a copy of this instance, adding the given `value` to the `unit` property.
+   * @param {Unit} unit
    * @param {number} value
    * @returns {CalendarDate}
    */
-  add(key: 'year' | 'month' | 'day', value: number): CalendarDate
+  add(unit: Unit, value: number): CalendarDate
   /**
-   * Return a copy of this instance, subtracting the given `value` from the `key` property.
-   * @param {('year' | 'month' | 'day')} key
+   * Return a copy of this instance, subtracting the given `value` from the `unit` property.
+   * @param {Unit} unit
    * @param {number} value
    * @returns {CalendarDate}
    */
-  subtract(key: 'year' | 'month' | 'day', value: number): CalendarDate
+  subtract(unit: Unit, value: number): CalendarDate
   /**
    * Compare this date with the given `other`.
-   * @param {('>=' | '>' | '=' | '<' | '<=')} operator - type of comparison to be performed.
+   *
+   * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+   * `options.normalize: false`.
+   *
+   * @param {Operator} operator - type of comparison to be performed.
    * @param {CalendarDate} other - Other `CalendarDate` to compare with.
-   * @param {('year' | 'month' | 'day')} [precision] - notice that the precision increases with the evaluated period, so year < month < day < hour < minute < second < millisecond. Default is 'day'.
+   * @param {Unit} [precision] - notice that the precision increases with the evaluated period, so year < month < day < hour < minute < second < millisecond. Default is 'day'.
    * @return {boolean} comparison result
    */
-  is(operator: '>=' | '>' | '=' | '<' | '<=', other: CalendarDate, precision?: string): boolean
+  is(operator: Operator, other: CalendarDate, precision?: string): boolean
   /**
    * Return this date as a string value in ISO format.
    * @returns {string}
@@ -200,6 +219,9 @@ function DateHelper(dateArg?: InputDate, optionsArg = DEFAULT_OPTIONS): Calendar
     getSeconds() {
       return utcDate.getUTCSeconds()
     },
+    getMilliseconds() {
+      return utcDate.getUTCMilliseconds()
+    },
     matches(...constraints: CalendarConstraint[]): boolean {
       if (isEmpty(constraints)) {
         return false
@@ -212,31 +234,35 @@ function DateHelper(dateArg?: InputDate, optionsArg = DEFAULT_OPTIONS): Calendar
         return evaluator(date)
       })
     },
-    add(key: 'year' | 'month' | 'day', value: number) {
-      return add(utcDate, key, value)
+    add(unit: Unit, value: number) {
+      return add(utcDate, unit, value)
     },
-    subtract(key: 'year' | 'month' | 'day', value: number) {
-      return add(utcDate, key, -1 * value)
+    subtract(unit: Unit, value: number) {
+      return add(utcDate, unit, -1 * value)
     },
-    set(key: 'year' | 'month' | 'day', value: number) {
+    set(unit: Unit, value: number) {
       const newValue = {
         year: utcDate.getUTCFullYear(),
         month: utcDate.getUTCMonth(),
         day: utcDate.getUTCDate(),
-        [key]: value,
+        hour: utcDate.getUTCHours(),
+        minute: utcDate.getUTCMinutes(),
+        second: utcDate.getUTCSeconds(),
+        millisecond: utcDate.getUTCMilliseconds(),
+        [unit]: value,
       }
 
       utcDate.setUTCFullYear(newValue.year)
       utcDate.setUTCMonth(newValue.month)
       utcDate.setUTCDate(newValue.day)
+      utcDate.setUTCHours(newValue.hour)
+      utcDate.setUTCMinutes(newValue.minute)
+      utcDate.setUTCSeconds(newValue.second)
+      utcDate.setUTCMilliseconds(newValue.millisecond)
 
       return this
     },
-    is(
-      operator: '>=' | '>' | '=' | '<' | '<=',
-      other: CalendarDate,
-      precision?: 'year' | 'month' | 'day'
-    ): boolean {
+    is(operator: Operator, other: CalendarDate, precision?: Unit): boolean {
       function compare(a: number, b: number) {
         let result
 
@@ -262,8 +288,8 @@ function DateHelper(dateArg?: InputDate, optionsArg = DEFAULT_OPTIONS): Calendar
       }
 
       return compare(
-        Number(getComparableDate(utcDate, precision)),
-        Number(getComparableDate(other.get(), precision))
+        getComparableDate(utcDate, precision),
+        getComparableDate(other.get(), precision)
       )
     },
     toString(): string {
@@ -272,16 +298,44 @@ function DateHelper(dateArg?: InputDate, optionsArg = DEFAULT_OPTIONS): Calendar
   }
 }
 
-function getComparableDate(date: Date, precision: 'year' | 'month' | 'day' = 'day') {
+/**
+ * This method takes a date and a unit of precision and then normalizes the given date based on that precision.
+ * The return will be the timestamp of the normalized date
+ *
+ * @example
+ * ```js
+ * getComparableDate(new Date('2022-10-13T17:42:19.948Z'), 'hour')) // returns 1665680400000
+ *
+ * // '2022-10-13T17:42:19.948Z' will be normalized to '2022-10-13T17:00:00.000Z'
+ * // 1665680400000 is equal to: new Date('2022-10-13T17:00:00.000Z').getTime()
+ * ```
+ *
+ * @param {Date} date
+ * @param {Unit} precision
+ * @returns {number}
+ */
+export function getComparableDate(date: Date, precision: Unit = 'day'): number {
+  const DATE_ZERO = MIN_SUPPORTED_DATE.toString()
   const COMPARE_TO = {
-    year: 1,
-    month: 2,
-    day: 3,
+    year: 4,
+    month: 7,
+    day: 10,
+    hour: 13,
+    minute: 16,
+    second: 19,
+    millisecond: 24,
+  }
+  const sliceIndex = COMPARE_TO[precision]
+
+  if (sliceIndex == null) {
+    throw new Error(`precision ${precision} is not supported`)
   }
 
-  return [date.getUTCFullYear(), padded(date.getUTCMonth()), padded(date.getUTCDate())]
-    .slice(0, COMPARE_TO[precision])
-    .join('')
+  const normalizedPart = DATE_ZERO.slice(sliceIndex)
+  const datePart = date.toISOString().slice(0, sliceIndex)
+  const normalizedDate = `${datePart}${normalizedPart}`
+
+  return new Date(normalizedDate).getTime()
 }
 
 /**
@@ -328,31 +382,38 @@ export function getConstraintRange(rangeArg: DateConstraint): [number, number] {
 }
 
 /**
- * Add the given `value` to the provided `key` of the provided `date`.
+ * Add the given `value` to the provided `unit` of the provided `date`.
  * @param {Date} date - Date where the operation should be performed.
- * @param {('year' | 'month' | 'day')} key - period
+ * @param {Unit} unit - period
  * @param {number} value - value to be added
  * @returns {Date} new date after the operation.
  */
-function add(date: Date, key: 'year' | 'month' | 'day', value: number): CalendarDate {
+function add(date: Date, unit: Unit, value: number): CalendarDate {
   const increment = {
     year: 0,
     month: 0,
     day: 0,
-    [key]: value,
+    hour: 0,
+    minute: 0,
+    second: 0,
+    millisecond: 0,
+    [unit]: value,
   }
 
   const newDate = new Date(
-    date.getUTCFullYear() + increment.year,
-    date.getUTCMonth() + increment.month,
-    date.getUTCDate() + increment.day,
-    date.getUTCHours(),
-    date.getUTCMinutes(),
-    date.getUTCSeconds(),
-    date.getUTCMilliseconds()
+    Date.UTC(
+      date.getUTCFullYear() + increment.year,
+      date.getUTCMonth() + increment.month,
+      date.getUTCDate() + increment.day,
+      date.getUTCHours() + increment.hour,
+      date.getUTCMinutes() + increment.minute,
+      date.getUTCSeconds() + increment.second,
+      date.getUTCMilliseconds() + increment.millisecond
+    )
   )
 
-  return DateHelper(newDate)
+  // Do not normalize the clone since all units must be preserved.
+  return DateHelper(newDate, { normalize: false })
 }
 
 /**
@@ -394,7 +455,7 @@ export const TODAY = DateHelper()
  * Maximum and minimum supported `Date`.
  * Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_ecmascript_epoch_and_timestamps
  */
-export const MIN_SUPPORTED_DATE = DateHelper(0)
+export const MIN_SUPPORTED_DATE = DateHelper(0, { normalize: false })
 export const MAX_SUPPORTED_DATE = DateHelper(8.64e15 - 1)
 
 export default DateHelper

package/src/components/Calendar/PickerModeToggle.tsx

@@ -12,7 +12,10 @@ import typography from 'styles/typography'
 import type { ButtonProps } from 'components/Button'
 
 const Button = styled(BaseButton)`
+  color: ${token('color-neutral-dark')};
   user-select: none;
+  background-color: transparent;
+  border-color: transparent;
 
   ${typography(
     conditional({
@@ -20,15 +23,9 @@ const Button = styled(BaseButton)`
       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;

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

@@ -2,8 +2,8 @@ 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 generator from '../../../tests/generator'
+import renderer, { screen, fire } from '../../../tests/renderer'
 
 import type { useCalendarReturn, CalendarPickerProps, usePickerModeReturn } from '../Calendar.types'
 

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

@@ -53,9 +53,9 @@ const Text = styled(DefaultText)`
 
 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);
+  grid-gap: ${token('space-2xs')};
 `
 
 /**

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

@@ -1,11 +1,11 @@
 import React from 'react'
 
 import DateHelper from '../Date.helper'
-import generator from '../../../../tests/generator'
+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 renderer, { screen, fire } from '../../../tests/renderer'
 
 import type { useCalendarReturn, CalendarPickerProps, usePickerModeReturn } from '../Calendar.types'
 import type { CalendarMonthAlias } from '../Month.helper'

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

@@ -10,9 +10,9 @@ import type { CalendarMonth, CalendarMonthAlias } from '../Month.helper'
 
 const Container = styled.div`
   display: grid;
+  grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 3.75rem;
   grid-gap: ${token('space-2xs')};
-  grid-template-columns: repeat(3, 1fr);
 `
 
 function getStatus(calendar: useCalendarReturn, month: CalendarMonth) {

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

@@ -19,20 +19,8 @@ const PickerButton = styled(BaseButton)<{
     | '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;
+  padding: ${token('space-xs')} ${token('space-s')};
 
   color: ${conditional({
     'color-neutral-lighter': whenProps({
@@ -42,30 +30,45 @@ const PickerButton = styled(BaseButton)<{
     'color-neutral-dark': whenProps({ $status: 'next-month-day' }),
     'color-accent': whenProps({ $status: 'current-day' }),
   })};
-
+  visibility: ${conditional({
+    visible: whenProps({ 'aria-hidden': false }),
+    hidden: whenProps({ 'aria-hidden': true }),
+  })};
+  user-select: none;
   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' }),
   })};
+  border-radius: 0;
 
   ${conditional({
     'opacity: 0.4;': whenProps({ $status: 'faded' }),
     'opacity: 1;': whenProps({ $status: (status) => status !== 'faded' }),
   })}
-
-  padding: ${token('space-xs')} ${token('space-s')};
-
+  ${typography(
+    conditional({
+      body: whenProps({ $status: ['default', 'faded'] }),
+      'body-bold': whenProps({
+        $status: ['current-day', 'selection-start', 'selection', 'selection-end'],
+      }),
+    })
+  )}
   ${hoverable`
-    border-color: ${token('color-neutral')};
+    font-weight: ${token('font-weight-bold')};
+    color: ${conditional({
+      'color-neutral-dark': whenProps({ $status: ['default', 'faded'] }),
+      'color-neutral-lightest': whenProps({
+        $status: ['selection-start', 'selection', 'selection-end'],
+      }),
+    })};
     background-color: ${conditional({
       'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
       'color-neutral-dark': whenProps({
@@ -73,14 +76,7 @@ const PickerButton = styled(BaseButton)<{
       }),
       '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')};
+    border-color: ${token('color-neutral')};
   `}
 
   ${focusable`
@@ -89,31 +85,25 @@ const PickerButton = styled(BaseButton)<{
   `}
 
   ${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 }),
     })};
+    background-color: ${conditional({
+      'color-transparent': whenProps({ 'aria-checked': false }),
+      'color-neutral': whenProps({ 'aria-checked': true }),
+    })};
+    border-color: ${token('color-neutral')};
   `}
 
   ${disableable`
+    color: ${token('color-neutral-darker')};
     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,9 +1,10 @@
 import React from 'react'
 
-import generator from '../../../../tests/generator'
+import generator from '../../../tests/generator'
 import range from 'utils/toolset/range'
-import renderer, { screen, fire } from '../../../../tests/renderer'
+import renderer, { screen, fire } from '../../../tests/renderer'
 import YearPicker from './YearPicker'
+import DateHelper from '../Date.helper'
 
 import type { useCalendarReturn, CalendarPickerProps, usePickerModeReturn } from '../Calendar.types'
 
@@ -15,16 +16,17 @@ function getYearRange() {
 
 describe('YearPicker', () => {
   const mockedCalendar: useCalendarReturn = {
+    mode: 'single',
     months: [
       {
         month: 10,
         year: 2021,
         days: [
-          { date: 1, month: 10, year: 2021, timestamp: 1635735600000, format: jest.fn() },
-          { date: 2, month: 10, year: 2021, timestamp: 1635822000000, format: jest.fn() },
-          { date: 3, month: 10, year: 2021, timestamp: 1635908400000, format: jest.fn() },
-          { date: 4, month: 10, year: 2021, timestamp: 1635994800000, format: jest.fn() },
-          { date: 5, month: 10, year: 2021, timestamp: 1636081200000, format: jest.fn() },
+          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'),
         ],
       },
     ],

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

@@ -9,9 +9,9 @@ import type { useCalendarReturn, CalendarPickerProps } from '../Calendar.types'
 
 const Container = styled.div`
   display: grid;
+  grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 2.875rem;
   grid-gap: ${token('space-2xs')};
-  grid-template-columns: repeat(4, 1fr);
 `
 
 const PickerButton = styled(DefaultPickerButton)`

package/src/components/Card/Card.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import Card from './Card'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 import Status from 'utils/types/Status'
 
 import type { CardProps } from './Card'

package/src/components/Card/Card.test.tsx

@@ -3,8 +3,8 @@ import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './Card.stories'
 import Card from './Card'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 import Status from 'utils/types/Status'
 
 import type { CardProps } from './Card'

package/src/components/Card/Card.tsx

@@ -15,10 +15,10 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
 
 const CardSubtitle = styled.div`
   padding: 0 ${token('card-padding-x')} ${token('card-padding-y')};
+  font-size: ${token('card-subtitle-font-size')};
+  font-weight: ${token('card-subtitle-font-weight')};
 
   color: ${token('card-color')};
-  font-weight: ${token('card-subtitle-font-weight')};
-  font-size: ${token('card-subtitle-font-size')};
 `
 
 const CardSeparator = styled.hr`
@@ -35,12 +35,13 @@ const CardBody = styled.div`
 `
 
 const Wrapper = styled.div`
-  ${font({})}
-
   display: flex;
   flex-direction: row;
-
   color: ${token('card-color')};
+  background: ${token('card-background')};
+  border: 1px solid ${token('card-border-color')};
+  border-radius: ${token('card-border-radius')};
+  ${font({})}
 
   ${CardTitleWrapper} + ${CardSubtitle} {
     margin-top: ${token('space-xs')};
@@ -49,10 +50,6 @@ const Wrapper = styled.div`
   ${CardTitleWrapper} + ${CardSeparator} {
     margin-top: ${token('card-padding-y')};
   }
-
-  border: 1px solid ${token('card-border-color')};
-  border-radius: ${token('card-border-radius')};
-  background: ${token('card-background')};
 `
 
 const Container = styled.div<{ flagged: boolean }>`

package/src/components/Card/CardTitle.tsx

@@ -23,11 +23,11 @@ const Leading = styled(StyledSpan)`
 const Wrapper = styled.div`
 
   padding: ${token('card-padding-y')} ${token('card-padding-x')} 0;
-
-  color: ${token('card-color')};
-  font-weight: ${token('card-title-font-weight')};
   font-size: ${token('card-title-font-size')};
+  font-weight: ${token('card-title-font-weight')};
   line-height: ${token('card-title-font-height')};
+
+  color: ${token('card-color')};
 `
 
 function CardTitle({ children, leading, ...others }: CardTitleProps): JSX.Element {

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Checkbox, { CheckboxProps } from './Checkbox'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import Status from 'utils/types/Status'
 

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import Checkbox from './Checkbox'
-import generator from '../../../tests/generator'
-import renderer, { fire } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { fire } from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Checkbox {...overrides} />).render()