@loadsmart/loadsmart-ui 5.16.1 → 5.17.0

package/dist/utils/toolset/getOrdinalSuffix.d.ts

@@ -0,0 +1 @@
+export declare const getOrdinalSuffix: (number: number) => 'st' | 'nd' | 'rd' | 'th';

package/dist/utils/toolset/getOrdinalSuffix.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "5.16.1",
+	"version": "5.17.0",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [

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

@@ -134,5 +134,32 @@ describe('DateFormatHelper', () => {
         )
       ).toBe('02/01/2022 11:22:33')
     })
+
+    it('formats compound tokens', () => {
+      expect(
+        DateFormatHelper('ddd, Do, MMM').format(
+          DateHelper('2021-05-04T04:00:00Z', {
+            normalize: false,
+          })
+        )
+      ).toBe('Tue, 4th, May')
+      expect(
+        DateFormatHelper('ddd, DDo, MMM').format(
+          DateHelper('2021-05-05T04:00:00Z', {
+            normalize: false,
+          })
+        )
+      ).toBe('Wed, 05th, May')
+    })
+
+    it('does not formats a compound token when the previous token is invalid', () => {
+      expect(
+        DateFormatHelper('ddd, YYYYo, MMM').format(
+          DateHelper('2021-05-10T04:00:00Z', {
+            normalize: false,
+          })
+        )
+      ).toBe('Mon, 2021o, May')
+    })
   })
 })

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

@@ -2,11 +2,18 @@ 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.
@@ -17,11 +24,16 @@ export default function DateFormatHelper(format: string): DateFormat {
   return {
     format(date: CalendarDate) {
       return tokens
-        .map((token) => {
+        .map((token, index) => {
+          const previousIndex = index - 1
+          const previousToken = tokens[previousIndex]
+
           if (token in DEFAULT_FORMATTERS) {
-            const value = DEFAULT_FORMATTERS[token].format(date.get())
+            return getTokenValue(date, token)
+          }
 
-            return (ADDITIONAL_FORMATTERS[token] || identity)(value)
+          if (token in COMPOUND_FORMATTERS && COMPOUND_FORMATTERS[token].valid(previousToken)) {
+            return COMPOUND_FORMATTERS[token].format(getTokenValue(date, previousToken))
           }
 
           return token
@@ -39,16 +51,18 @@ export default function DateFormatHelper(format: string): DateFormat {
  *| Month                          | MM    | 01, 02, ..., 11, 12                       |
  *|                                | MMM   | Jan, Feb, ..., Nov, Dec                   |
  *|                                | MMMM  | January, February, ..., November,December |
- *| Day of Month                   | DD    | 01, 02, ..., 30, 31                       |
+ *| 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, ..., 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
@@ -56,7 +70,10 @@ export default function DateFormatHelper(format: string): DateFormat {
  */
 export function tokenizer(format: string): string[] {
   function getType(char?: string): string {
-    if (char != undefined && ['M', 'd', 'D', 'Y', 'H', 'h', 'm', 's', 'A', 'a'].includes(char)) {
+    if (
+      char != undefined &&
+      ['M', 'd', 'D', 'Y', 'H', 'h', 'm', 's', 'A', 'a', 'o'].includes(char)
+    ) {
       return 'token'
     }
 
@@ -110,6 +127,9 @@ const DEFAULT_FORMATTERS: Record<string, Intl.DateTimeFormat> = {
   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',
   }),
@@ -154,10 +174,22 @@ const DEFAULT_FORMATTERS: Record<string, Intl.DateTimeFormat> = {
  * 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(' ')[0], 2) : value),
+  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(' ')[1] || '').toLowerCase() : value),
-  A: (value: string) => (value ? (value.split(' ')[1] || '').toUpperCase() : 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/utils/toolset/getOrdinalSuffix.test.ts

@@ -0,0 +1,27 @@
+import { getOrdinalSuffix } from './getOrdinalSuffix'
+
+it('should return "st" for numbers ending with 1', () => {
+  expect(getOrdinalSuffix(1)).toBe('st')
+  expect(getOrdinalSuffix(101)).toBe('st')
+  expect(getOrdinalSuffix(1001)).toBe('st')
+})
+
+it('should return "nd" for numbers ending with 2', () => {
+  expect(getOrdinalSuffix(2)).toBe('nd')
+  expect(getOrdinalSuffix(102)).toBe('nd')
+  expect(getOrdinalSuffix(1002)).toBe('nd')
+})
+
+it('should return "rd" for numbers ending with 3', () => {
+  expect(getOrdinalSuffix(3)).toBe('rd')
+  expect(getOrdinalSuffix(103)).toBe('rd')
+  expect(getOrdinalSuffix(1003)).toBe('rd')
+})
+
+it('should return "th" for 0 and numbers higher than 3 but not ending with 1, 2 or 3', () => {
+  expect(getOrdinalSuffix(0)).toBe('th')
+  expect(getOrdinalSuffix(4)).toBe('th')
+  expect(getOrdinalSuffix(10)).toBe('th')
+  expect(getOrdinalSuffix(100)).toBe('th')
+  expect(getOrdinalSuffix(1000)).toBe('th')
+})

package/src/utils/toolset/getOrdinalSuffix.ts

@@ -0,0 +1,15 @@
+export const getOrdinalSuffix = (number: number): 'st' | 'nd' | 'rd' | 'th' => {
+  if (number % 10 === 1 && number !== 11) {
+    return 'st'
+  }
+
+  if (number % 10 === 2 && number !== 12) {
+    return 'nd'
+  }
+
+  if (number % 10 === 3 && number !== 13) {
+    return 'rd'
+  }
+
+  return 'th'
+}