feat!: migrate from Moment to Tempo

angular.json

@@ -23,7 +23,6 @@
               "fetch-jsonp",
               "flatpickr",
               "isomorphic-dompurify",
-              "moment-mini",
               "stream"
             ],
             "assets": [

docs/column-functionalities/Formatters.md

@@ -25,11 +25,7 @@ For a [UI sample](#ui-sample), scroll down below.
 
 `Slickgrid-Universal` ships with a few `Formatters` by default which helps with common fields, you can see the [entire list here](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37).
 
-
-
-> **Note** you might not need a Formatter when a simple CSS style is needed, think about using `cssClass` column property instead.
-
-
+> **Note** you might not need a Formatter when a simple CSS style and class might be enough, think about using `cssClass` column property as much as possible since it has much better perf.
 
 **List of provided `Formatters`**
 
@@ -57,6 +53,7 @@ For a [UI sample](#ui-sample), scroll down below.
 * `dateTimeUs` : Takes a Date object and displays it as an US Date+Time format (MM/DD/YYYY HH:mm:ss)
 * `dateTimeShortUs`: Takes a Date object and displays it as an US Date+Time (without seconds) format (MM/DD/YYYY HH:mm:ss)
 * `dateTimeUsAmPm` : Takes a Date object and displays it as an US Date+Time+(am/pm) format (MM/DD/YYYY hh:mm:ss a)
+* `dateUtc` : Takes a Date object and displays it as a TZ format (YYYY-MM-DDThh:mm:ssZ)
 * `decimal`: Display the value as x decimals formatted, defaults to 2 decimals. You can pass "minDecimal" and/or "maxDecimal" to the "params" property.
 * `dollar`: Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value.
 * `dollarColored`: Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value
@@ -81,11 +78,12 @@ For a [UI sample](#ui-sample), scroll down below.
 * `translateBoolean`: Takes a boolean value, cast it to upperCase string and finally translates it (i18n).
 * `tree`: Formatter that must be used when the column is a Tree Data column
 
-**Note:** The list might not always be up to date, you can refer to the [Formatters export](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37) to know exactly which ones are available.
+> **Note:** The list is certainly not up to date (especially for Dates), please refer to the [Formatters export](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37) to know exactly which formatters are available.
 
-**Usage**
+> **Note** all Date formatters are formatted using [Tempo](https://tempo.formkit.com/#format-tokens). There are also many more Date formats not shown above, simply visit the [formatters.index](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/formatters.index.ts#L101) to see all available Date/Time formats.
 
-To use any of them, you need to import `Formatters` from `Angular-Slickgrid` and add a `formatter: ...` in your column definitions as shown below:
+### Usage
+To use any of them, you simply need to import `Formatters` from `Slickgrid-Universal` and add a `formatter: Formatters.xyz` (where `xyx` is the name of the built-in formatter) in your column definitions as shown below:
 
 ```ts
 import { Formatters } from 'angular-slickgrid';

docs/column-functionalities/filters/Compound-Filters.md

@@ -52,7 +52,8 @@ The column definition `type` will affect the list of Operators shown, for exampl
 
 
 ### How to use CompoundDate Filter
-Again set the column definition flag `filterable: true` and use the filter type `Filters.compoundDate`. Here is an example with a full column definition:
+As any other columns, set the column definition flag `filterable: true` and use the filter type `Filters.compoundDate`. Here is an example with a full column definition:
+
 ```ts
 // define you columns, in this demo Effort Driven will use a Select Filter
 this.columnDefinitions = [
@@ -76,6 +77,8 @@ this.gridOptions = {
 };
 ```
 
+> **Note** we use [Tempo](https://tempo.formkit.com/) to parse and format Dates to the chosen format via the `type` option when provided in your column definition.
+
 #### Dealing with different input/ouput dates (example: UTC)
 What if your date input (from your dataset) has a different output on the screen (UI)?
 In that case, you will most probably have a Formatter and type representing the input type, we also provided an `outputType` that can be used to deal with that case.
@@ -180,7 +183,7 @@ You could also define certain options as a global level (for the entire grid or
 
 ```ts
 this.gridOptions = {
-  defaultFilterOptions: { 
+  defaultFilterOptions: {
     // Note: that `date`, `select` and `slider` are combining both compound & range filters together
     date: { minDate: 'today' },
     select: { minHeight: 350 }, // typed as MultipleSelectOption

docs/column-functionalities/filters/Range-Filters.md

@@ -123,7 +123,7 @@ You could also define certain options as a global level (for the entire grid or
 
 ```ts
 this.gridOptions = {
-  defaultFilterOptions: { 
+  defaultFilterOptions: {
     // Note: that `date`, `select` and `slider` are combining both compound & range filters together
     date: { minDate: 'today' },
     select: { minHeight: 350 }, // typed as MultipleSelectOption
@@ -135,6 +135,8 @@ this.gridOptions = {
 ### Using a Date Range Filter
 The date range filter allows you to search data between 2 dates (it uses [Flatpickr Range](https://flatpickr.js.org/examples/#range-calendar) feature).
 
+> **Note** we use [Tempo](https://tempo.formkit.com/) to parse and format Dates to the chosen format via the `type` option when provided in your column definition.
+
 ##### Component
 import { Filters, FlatpickrOption, Formatters, GridOption, OperatorType } from '@slickgrid-universal/common';
 

docs/getting-started/quick-start.md

@@ -211,7 +211,6 @@ You should also add `Angular-Slickgrid` and any dependency that Angular shows a
     "autocompleter",
     "dompurify",
     "flatpickr",
-    "moment-mini",
     "stream"
   ],
 }

package.json

@@ -83,6 +83,7 @@
     "@angular/router": "^17.3.6",
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
+    "@formkit/tempo": "^0.1.1",
     "@ng-select/ng-select": "^12.0.7",
     "@ngx-translate/http-loader": "^8.0.0",
     "@popperjs/core": "^2.11.8",
@@ -111,7 +112,6 @@
     "jest": "^29.7.0",
     "jest-extended": "^4.0.2",
     "jest-preset-angular": "^14.0.3",
-    "moment-mini": "^2.29.4",
     "ng-packagr": "^17.3.0",
     "ngx-bootstrap": "^12.0.0",
     "npm-run-all2": "^6.1.2",

src/app/examples/grid-graphql.component.ts

@@ -16,7 +16,7 @@ import {
   SortDirection,
   unsubscribeAllObservables,
 } from './../modules/angular-slickgrid';
-import moment from 'moment-mini';
+import { addDay, format } from '@formkit/tempo';
 import { Subscription } from 'rxjs';
 
 const defaultPageSize = 20;
@@ -123,8 +123,8 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
       },
     ];
 
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
 
     this.gridOptions = {
       gridHeight: 200,
@@ -312,8 +312,8 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
   }
 
   setFiltersDynamically() {
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
 
     // we can Set Filters Dynamically (or different filters) afterward through the FilterService
     this.angularGrid.filterService.updateFilters([
@@ -334,8 +334,8 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
   }
 
   resetToOriginalPresets() {
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
 
     this.angularGrid.filterService.updateFilters([
       // you can use OperatorType or type them as string, e.g.: operator: 'EQ'

src/app/examples/grid-range.component.ts

@@ -18,7 +18,7 @@ import {
   SliderRangeOption,
   unsubscribeAllObservables,
 } from '../modules/angular-slickgrid';
-import moment from 'moment-mini';
+import { addDay, format } from '@formkit/tempo';
 import { Subscription } from 'rxjs';
 
 const NB_ITEMS = 1500;
@@ -153,8 +153,8 @@ export class GridRangeComponent implements OnInit, OnDestroy {
     ];
 
     const today = new Date();
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(today.getDate() < 14 ? 30 : 25, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), today.getDate() < 14 ? 30 : 25), 'YYYY-MM-DD');
 
     this.gridOptions = {
       autoResize: {
@@ -201,7 +201,7 @@ export class GridRangeComponent implements OnInit, OnDestroy {
     const tempDataset = [];
     for (let i = startingIndex; i < (startingIndex + itemCount); i++) {
       const randomDuration = randomBetween(0, 365);
-      const randomYear = randomBetween(moment().year(), moment().year() + 1);
+      const randomYear = randomBetween(new Date().getFullYear(), new Date().getFullYear() + 1);
       const randomMonth = randomBetween(0, 12);
       const randomDay = randomBetween(10, 28);
       const randomPercent = randomBetween(0, 100);
@@ -250,8 +250,8 @@ export class GridRangeComponent implements OnInit, OnDestroy {
   }
 
   setFiltersDynamically() {
-    const presetLowestDay = moment().add(-5, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(25, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -5), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), 25), 'YYYY-MM-DD');
 
     // we can Set Filters Dynamically (or different filters) afterward through the FilterService
     this.angularGrid.filterService.updateFilters([
@@ -271,7 +271,7 @@ export class GridRangeComponent implements OnInit, OnDestroy {
 
   usePredefinedFilter(filterValue: string) {
     let filters: any[] = [];
-    const currentYear = moment().year();
+    const currentYear = new Date().getFullYear();
 
     switch (filterValue) {
       case 'currentYearTasks':

test/cypress/e2e/example04.cy.ts

@@ -1,4 +1,4 @@
-import moment from 'moment-mini';
+import { isAfter, isBefore, isEqual, parse } from '@formkit/tempo';
 import { removeExtraSpaces } from '../plugins/utilities';
 
 describe('Example 4 - Client Side Sort/Filter Grid', () => {
@@ -43,7 +43,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => {
           cy.wrap($row)
             .children('.slick-cell:nth(5)')
             .each(($cell) => {
-              const isDateValid = moment($cell.text(), 'M/D/YY').isBefore(presetUsDateShort);
+              const isDateValid = isBefore(parse($cell.text(), 'M/D/YY'), presetUsDateShort);
               expect(isDateValid).to.eq(true);
             });
         });
@@ -142,7 +142,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => {
           cy.wrap($row)
             .children('.slick-cell:nth(4)')
             .each(($cell) => {
-              const isDateValid = moment($cell.text()).isSameOrAfter(dynamicStartDate);
+              const isDateValid = isEqual(parse($cell.text()), dynamicStartDate) || isAfter(parse($cell.text()), dynamicStartDate);
               expect(isDateValid).to.eq(true);
             });
         });

test/cypress/e2e/example06.cy.ts

@@ -1,8 +1,9 @@
-import moment from 'moment-mini';
+import { addDay, format } from '@formkit/tempo';
+
 import { removeWhitespaces } from '../plugins/utilities';
 
-const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
 
 describe('Example 6 - GraphQL Grid', { retries: 0 }, () => {
   it('should display Example title', () => {

test/cypress/e2e/example12.cy.ts

@@ -1,4 +1,5 @@
-import moment from 'moment-mini';
+import { format } from '@formkit/tempo';
+
 import { removeExtraSpaces } from '../plugins/utilities';
 
 describe('Example 12: Localization (i18n)', () => {
@@ -48,8 +49,7 @@ describe('Example 12: Localization (i18n)', () => {
         .find('.right-footer')
         .should($span => {
           const text = removeExtraSpaces($span.text()); // remove all white spaces
-          const now = new Date();
-          const dateFormatted = moment(now).format('YYYY-MM-DD, hh:mm a');
+          const dateFormatted = format(new Date(), 'YYYY-MM-DD, hh:mm a');
           expect(text).to.eq(`Last Update ${dateFormatted} | 1500 of 1500 items`);
         });
     });
@@ -118,9 +118,8 @@ describe('Example 12: Localization (i18n)', () => {
         .find('.slick-custom-footer')
         .find('.right-footer')
         .should($span => {
-          const now = new Date();
           const text = removeExtraSpaces($span.text()); // remove all white spaces
-          const dateFormatted = moment(now).format('YYYY-MM-DD, hh:mm a');
+          const dateFormatted = format(new Date(), 'YYYY-MM-DD, hh:mm a');
           expect(text).to.eq(`Dernière mise à jour ${dateFormatted} | 1500 de 1500 éléments`);
         });
     });

test/cypress/e2e/example25.cy.ts

@@ -1,12 +1,19 @@
-import moment from 'moment-mini';
+import { addDay, format, isAfter, isBefore, isEqual } from '@formkit/tempo';
 
 const presetMinComplete = 5;
 const presetMaxComplete = 80;
 const presetMinDuration = 4;
 const presetMaxDuration = 88;
 const today = new Date();
-const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-const presetHighestDay = moment().add(today.getDate() < 14 ? 30 : 25, 'days').format('YYYY-MM-DD');
+const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+const presetHighestDay = format(addDay(new Date(), today.getDate() < 14 ? 30 : 25), 'YYYY-MM-DD');
+
+function isBetween(inputDate: Date | string, minDate: Date | string, maxDate: Date | string, isInclusive = false) {
+  if (isInclusive) {
+    return isEqual(inputDate, minDate) || isEqual(inputDate, maxDate);
+  }
+  return isAfter(inputDate, minDate) || isBefore(inputDate, maxDate);
+}
 
 describe('Example 25 - Range Filters', () => {
   it('should display Example title', () => {
@@ -53,7 +60,7 @@ describe('Example 25 - Range Filters', () => {
         cy.wrap($row)
           .children('.slick-cell:nth(4)')
           .each(($cell) => {
-            const isDateBetween = moment($cell.text()).isBetween(presetLowestDay, presetHighestDay, null as any, '[]'); // [] is inclusive, () is exclusive
+            const isDateBetween = isBetween($cell.text(), presetLowestDay, presetHighestDay, true);
             expect(isDateBetween).to.eq(true);
           });
       });
@@ -119,7 +126,7 @@ describe('Example 25 - Range Filters', () => {
       .should('have.length.gte', 2);
 
     // cy.get('.flatpickr-day.selected.endRange')
-    //   .should('contain', moment().add(25, 'days').day() - 1);
+    //   .should('contain', format(addDay(new Date(), 25, 'days').day() - 1);
   });
 
   it('should change the "Duration" input filter and expect all rows to be within new range', () => {
@@ -156,9 +163,9 @@ describe('Example 25 - Range Filters', () => {
     const dynamicMaxComplete = 85;
     const dynamicMinDuration = 14;
     const dynamicMaxDuration = 78;
-    const currentYear = moment().year();
-    const dynamicLowestDay = moment().add(-5, 'days').format('YYYY-MM-DD');
-    const dynamicHighestDay = moment().add(25, 'days').format('YYYY-MM-DD');
+    const currentYear = new Date().getFullYear();
+    const dynamicLowestDay = format(addDay(new Date(), -5), 'YYYY-MM-DD');
+    const dynamicHighestDay = format(addDay(new Date(), 25), 'YYYY-MM-DD');
 
     it('should click on Set Dynamic Filters', () => {
       cy.get('[data-test=set-dynamic-filter]')
@@ -209,7 +216,7 @@ describe('Example 25 - Range Filters', () => {
           cy.wrap($row)
             .children('.slick-cell:nth(4)')
             .each(($cell) => {
-              const isDateBetween = moment($cell.text()).isBetween(dynamicLowestDay, dynamicHighestDay, null as any, '[]'); // [] is inclusive, () is exclusive
+              const isDateBetween = isBetween($cell.text(), dynamicLowestDay, dynamicHighestDay, true);
               expect(isDateBetween).to.eq(true);
             });
         });

test/jest-global-mocks.ts

@@ -37,7 +37,3 @@ jest.mock('flatpickr', () => {
   const actual = jest.requireActual('flatpickr');
   return { __esModule: true, ...actual, default: actual };
 });
-jest.mock('moment-mini', () => {
-  const actual = jest.requireActual('moment-mini');
-  return { __esModule: true, ...actual, default: actual };
-});