@loadsmart/loadsmart-ui 5.16.1 → 5.18.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.18.0",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [
@@ -26,39 +26,6 @@
 	"storybook-deployer": {
 		"commitMessage": "chore(docs): deploy storybook to GitHub pages [skip ci]"
 	},
-	"jest": {
-		"globals": {
-			"window": true
-		},
-		"verbose": true,
-		"coverageDirectory": "./coverage/",
-		"collectCoverage": false,
-		"setupFiles": [
-			"./tests/jestsetup.tsx"
-		],
-		"collectCoverageFrom": [
-			"src/components/**/*.{js,tsx}",
-			"!src/**/**/*.test.{js,tsx}"
-		],
-		"coverageReporters": [
-			"text",
-			"lcov"
-		],
-		"moduleDirectories": [
-			"node_modules",
-			"src"
-		],
-		"moduleFileExtensions": [
-			"ts",
-			"tsx",
-			"js",
-			"json"
-		],
-		"testMatch": [
-			"**/__tests__/**/*.[jt]s?(x)",
-			"**/?(*.)+(jest|test).[jt]s?(x)"
-		]
-	},
 	"lint-staged": {
 		"src/**/*.{js,ts,jsx,tsx,json}": [
 			"eslint --fix",
@@ -71,11 +38,10 @@
 		]
 	},
 	"devDependencies": {
-		"@babel/cli": "7.13.16",
-		"@babel/core": "7.14.0",
-		"@babel/preset-env": "7.14.1",
-		"@babel/preset-react": "7.13.13",
-		"@babel/preset-typescript": "7.13.0",
+		"@babel/core": "^7.20.12",
+		"@babel/preset-env": "^7.20.2",
+		"@babel/preset-react": "^7.18.6",
+		"@babel/preset-typescript": "^7.18.6",
 		"@commitlint/cli": "16.0.2",
 		"@commitlint/config-conventional": "16.0.0",
 		"@loadsmart/miranda-tokens": "1.3.0",
@@ -109,7 +75,7 @@
 		"@testing-library/react-hooks": "^5.1.3",
 		"@testing-library/user-event": "^13.5.0",
 		"@types/chance": "1.1.1",
-		"@types/jest": "26.0.23",
+		"@types/jest": "^27.5.2",
 		"@types/lodash.debounce": "4.0.6",
 		"@types/lodash.flatten": "4.4.6",
 		"@types/lodash.get": "4.4.6",
@@ -126,7 +92,7 @@
 		"@typescript-eslint/parser": "4.22.1",
 		"@zerollup/ts-transform-paths": "1.7.18",
 		"autoprefixer": "9",
-		"babel-jest": "26.6.3",
+		"babel-jest": "^27.5.1",
 		"babel-loader": "8.2.2",
 		"babel-plugin-react-remove-properties": "0.3.0",
 		"babel-plugin-styled-components": "1.12.0",
@@ -147,8 +113,8 @@
 		"eslint-plugin-testing-library": "^5.9.1",
 		"husky": "7.0.4",
 		"identity-obj-proxy": "3.0.0",
-		"jest": "26.6.3",
-		"jest-svg-transformer": "1.0.0",
+		"jest": "^27.5.1",
+		"jest-transformer-svg": "1.0.2",
 		"lint-staged": "11.0.0",
 		"npm-run-all": "4.1.5",
 		"postcss": "^7.0.39",
@@ -175,7 +141,7 @@
 		"stylelint-no-unsupported-browser-features": "5.0.1",
 		"stylelint-order": "4.1.0",
 		"tailwindcss": "npm:@tailwindcss/postcss7-compat",
-		"ts-jest": "26.5.6",
+		"ts-jest": "^27.1.5",
 		"ts-node": "^10.9.1",
 		"ts-toolbelt": "^9.6.0",
 		"ttypescript": "^1.5.13",

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/components/Label/Label.test.tsx

@@ -51,9 +51,30 @@ describe('<Label />', () => {
     setup(props)
 
     const tipAnchor = screen.getByText('?', { selector: 'span' })
-    expect(() => screen.getByText(/`${props.message}`/i)).toThrow()
+    expect(screen.queryByText(/`${props.message}`/i)).not.toBeInTheDocument()
 
     userEvent.hover(tipAnchor)
     screen.getByText(props.tip)
   })
+
+  it('renders node tip', () => {
+    const sentence = generator.sentence()
+    const props = {
+      children: generator.word(),
+      tip: (
+        <div data-testid="tip-div-id">
+          <b>{sentence}</b>
+        </div>
+      ),
+    }
+
+    setup(props)
+
+    const tipAnchor = screen.getByText('?', { selector: 'span' })
+    expect(screen.queryByText(/`${props.message}`/i)).not.toBeInTheDocument()
+
+    userEvent.hover(tipAnchor)
+    expect(screen.getByTestId('tip-div-id')).toBeInTheDocument()
+    screen.getByText(sentence)
+  })
 })

package/src/components/Label/Label.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import type { LabelHTMLAttributes } from 'react'
 import styled from 'styled-components'
 import clsx from 'clsx'
@@ -20,7 +20,7 @@ interface WithAdditionalProps {
   disabled?: boolean
   required?: boolean
   scheme?: ColorScheme
-  tip?: string
+  tip?: ReactNode
 }
 
 export interface LabelProps

package/src/testing/SelectEvent/SelectEvent.test.tsx

@@ -41,14 +41,6 @@ function Experiment(overrides: Partial<SelectProps>) {
 }
 
 describe('SelectEvent', () => {
-  beforeEach(() => {
-    jest.useFakeTimers()
-  })
-  afterEach(() => {
-    jest.runOnlyPendingTimers()
-    jest.useRealTimers()
-  })
-
   const setup = (overrides: Partial<SelectProps>) =>
     renderer(<Experiment {...overrides} />).render()
 

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'
+}