feat(common)!: migrate from Flatpickr to Vanilla-Calendar

eslint.config.mjs

@@ -39,8 +39,6 @@ export default tsEslint.config(
     languageOptions: {
       globals: {
         // ...globals,
-        flatpickr: true,
-        Slick: true,
         Sortable: true,
       },
       parser: tsParser,

package.json

@@ -89,11 +89,11 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~4.7.0",
-    "@slickgrid-universal/custom-footer-component": "~4.7.0",
-    "@slickgrid-universal/empty-warning-component": "~4.7.0",
-    "@slickgrid-universal/event-pub-sub": "~4.7.0",
-    "@slickgrid-universal/pagination-component": "~4.7.0",
+    "@slickgrid-universal/common": "~5.0.0-beta.1",
+    "@slickgrid-universal/custom-footer-component": "~5.0.0-beta.1",
+    "@slickgrid-universal/empty-warning-component": "~5.0.0-beta.1",
+    "@slickgrid-universal/event-pub-sub": "~5.0.0-beta.1",
+    "@slickgrid-universal/pagination-component": "~5.0.0-beta.1",
     "dequal": "^2.0.3",
     "font-awesome": "^4.7.0",
     "i18next": "^23.11.2",
@@ -107,15 +107,14 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@slickgrid-universal/composite-editor-component": "~4.7.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "~4.7.0",
-    "@slickgrid-universal/excel-export": "~4.7.0",
-    "@slickgrid-universal/graphql": "~4.7.0",
-    "@slickgrid-universal/odata": "~4.7.0",
-    "@slickgrid-universal/rxjs-observable": "~4.7.0",
-    "@slickgrid-universal/text-export": "~4.7.0",
+    "@slickgrid-universal/composite-editor-component": "~5.0.0-beta.1",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.0.0-beta.1",
+    "@slickgrid-universal/excel-export": "~5.0.0-beta.1",
+    "@slickgrid-universal/graphql": "~5.0.0-beta.1",
+    "@slickgrid-universal/odata": "~5.0.0-beta.1",
+    "@slickgrid-universal/rxjs-observable": "~5.0.0-beta.1",
+    "@slickgrid-universal/text-export": "~5.0.0-beta.1",
     "@types/dompurify": "^3.0.5",
-    "@types/flatpickr": "^3.1.2",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/jest": "^29.5.12",
@@ -181,4 +180,4 @@
   "resolutions": {
     "caniuse-lite": "1.0.30001614"
   }
-}
+}

src/examples/slickgrid/Example23.tsx

@@ -63,12 +63,6 @@ class Example23 extends React.Component<Props, State> {
         <li>For a numeric range defined in an input filter (must be of type text), you can use 2 dots (..) to represent a range</li>
         <li>example: typing "10..90" will filter values between 10 and 90 (but excluding the number 10 and 90)</li>
       </ul>
-      <ul>
-        <li>note that the examples shown below for the operator, are case sensitive</li>
-        <li>by default the range are not inclusive which would be the same as defining the filter options to "operator: 'RangeExclusive'" or "operator: OperatoryType.rangeExclusive"</li>
-        <li>you can also set the inverse (inclusive) by defining the filter options to "operator: 'RangeInclusive'" or "operator: OperatoryType.rangeIncluside"</li>
-      </ul>
-      <li>Date Range with Flatpickr Date Picker, they will also use the locale, choose a start date then drag or click on the end date</li>
     </ul>
   `;
 

src/examples/slickgrid/Example3.tsx

@@ -11,14 +11,14 @@ import {
   EditorValidator,
   FieldType,
   Filters,
-  FlatpickrOption,
   Formatters,
   OnEventArgs,
   OperatorType,
   SortComparers,
   SlickGlobalEditorLock,
   SlickgridReact,
   GridOption,
+  type VanillaCalendarOption,
 } from '../../slickgrid-react';
 import { CustomInputEditor } from './custom-inputEditor';
 import { CustomInputFilter } from './custom-inputFilter';
@@ -302,9 +302,9 @@ export default class Example3 extends React.Component<Props, State> {
         saveOutputType: FieldType.dateUtc, // save output date format
         editor: {
           model: Editors.date,
-          // override any of the Flatpickr options through 'filterOptions'
+          // override any of the calendar options through 'filterOptions'
           // please note that there's no TSlint on this property since it's generic for any filter, so make sure you entered the correct filter option(s)
-          editorOptions: { minDate: 'today' } as FlatpickrOption,
+          editorOptions: { range: { min: 'today' } } as VanillaCalendarOption,
         },
       },
       {

src/examples/slickgrid/Example30.tsx

@@ -11,7 +11,6 @@ import {
   Editors,
   FieldType,
   Filters,
-  FlatpickrOption,
   formatNumber,
   Formatter,
   Formatters,
@@ -24,6 +23,7 @@ import {
   SlickGrid,
   SlickgridReact,
   SortComparers,
+  type VanillaCalendarOption,
 } from '../../slickgrid-react';
 import './example30.scss'; // provide custom CSS/SASS styling
 import BaseSlickGridState from './state-slick-grid-base';
@@ -256,16 +256,17 @@ export default class Example30 extends React.Component<Props, State> {
         editor: {
           model: Editors.date,
           editorOptions: {
-            minDate: 'today',
+            range: { min: 'today' },
 
             // if we want to preload the date picker with a different date,
-            // we could toggle the `closeOnSelect: false`, set the date in the picker and re-toggle `closeOnSelect: true`
-            // closeOnSelect: false,
-            // onOpen: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => {
-            //   instance.setDate('2021-06-04', true);
-            //   instance.set('closeOnSelect', true);
-            // },
-          } as FlatpickrOption,
+            // we could do it by assigning settings.seleted.dates
+            // NOTE: vanilla-calendar doesn't automatically focus the picker to the year/month and you need to do it yourself
+            // selected: {
+            //   dates: ['2021-06-04'],
+            //   month: 6 - 1, // Note: JS Date month (only) is zero index based, so June is 6-1 => 5
+            //   year: 2021
+            // }
+          } as VanillaCalendarOption,
           massUpdate: true,
           validator: (value, args) => {
             const dataContext = args?.item;

src/examples/slickgrid/Example32.tsx

@@ -15,6 +15,7 @@ import {
   SlickgridReact,
   SlickGrid,
   SortComparers,
+  type VanillaCalendarOption,
 } from '../../slickgrid-react';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import React from 'react';
@@ -211,7 +212,7 @@ export default class Example32 extends React.Component<Props, State> {
         exportCustomFormatter: Formatters.dateUs,
         editor: {
           model: Editors.date,
-          editorOptions: { minDate: 'today' },
+          editorOptions: { range: { min: 'today' } } as VanillaCalendarOption,
           validator: (value, args) => {
             const dataContext = args && args.item;
             if (dataContext && (dataContext.completed && !value)) {

src/examples/slickgrid/Example33.tsx

@@ -12,6 +12,7 @@ import {
   SlickgridReactInstance,
   SlickgridReact,
   SlickGrid,
+  type VanillaCalendarOption,
 } from '../../slickgrid-react';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
@@ -195,7 +196,7 @@ export default class Example32 extends React.Component<Props, State> {
       },
       {
         id: 'finish', name: 'Finish', field: 'finish', sortable: true,
-        editor: { model: Editors.date, editorOptions: { minDate: 'today' }, },
+        editor: { model: Editors.date, editorOptions: { range: { min: 'today' } } as VanillaCalendarOption, },
         // formatter: Formatters.dateIso,
         type: FieldType.date, outputType: FieldType.dateIso,
         formatter: Formatters.dateIso,

src/examples/slickgrid/Example4.tsx

@@ -7,7 +7,6 @@ import {
   Column,
   FieldType,
   Filters,
-  FlatpickrOption,
   Formatters,
   GridOption,
   GridStateChange,
@@ -16,6 +15,7 @@ import {
   OperatorType,
   SlickgridReactInstance,
   SlickgridReact,
+  type VanillaCalendarOption,
 } from '../../slickgrid-react';
 import BaseSlickGridState from './state-slick-grid-base';
 
@@ -176,9 +176,9 @@ export default class Example4 extends React.Component<Props, State> {
         filterable: true,
         filter: {
           model: Filters.compoundDate,
-          // override any of the Flatpickr options through "filterOptions"
+          // override any of the calendar options through "filterOptions"
           // please note that there's no TSlint on this property since it's generic for any filter, so make sure you entered the correct filter option(s)
-          filterOptions: { minDate: 'today' } as FlatpickrOption
+          filterOptions: { range: { min: 'today' } } as VanillaCalendarOption
         }
       },
       {

src/index.tsx

@@ -2,7 +2,6 @@
 import 'font-awesome/css/font-awesome.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap';
-import 'flatpickr/dist/flatpickr.min.css';
 import i18n from 'i18next';
 import Backend from 'i18next-http-backend';
 import React from 'react';
@@ -46,7 +45,3 @@ root.render(
     <App />
   </HashRouter>
 );
-
-// load necessary Flatpickr Locale(s), but make sure it's imported AFTER loading Slickgrid-React plugin
-// delaying the import will work for our use case
-setTimeout(() => import('flatpickr/dist/l10n/fr'));

test/cypress/e2e/example03.cy.ts

@@ -65,10 +65,11 @@ describe('Example 3 - Grid with Editors', () => {
 
     // change Finish date
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).click();
-    cy.get('.flatpickr-monthDropdown-months:visible')
-      .select('January', { force: true });
-    cy.get('.numInput.cur-year:visible').type('2009');
-    cy.get('.flatpickr-day:visible:nth(25)').click('bottom', { force: true });
+    cy.get('.vanilla-calendar-month:visible').click();
+    cy.get('.vanilla-calendar-months__month').contains('Jan').click();
+    cy.get('.vanilla-calendar-year').click();
+    cy.get('.vanilla-calendar-years__year').contains('2009').click();
+    cy.get('.vanilla-calendar-day__btn').contains('22').click();
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).should('contain', '2009-01-22');
 
     // change City of Origin
@@ -136,16 +137,18 @@ describe('Example 3 - Grid with Editors', () => {
 
     // change Finish date
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).click();
-    cy.get('.flatpickr-monthDropdown-months:visible')
-      .select('January', { force: true });
-    cy.get('.numInput.cur-year:visible').type('2009');
-    cy.get('.flatpickr-day:visible:nth(25)').click('bottom', { force: true });
+    cy.get('.vanilla-calendar-month:visible').click();
+    cy.get('.vanilla-calendar-months__month').contains('Jan').click();
+    cy.get('.vanilla-calendar-year').click();
+    cy.get('.vanilla-calendar-years__year').contains('2009').click();
+    cy.get('.vanilla-calendar-day__btn').contains('22').click();
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', '2009-01-22');
 
     // change Effort Driven
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).click();
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check().blur();
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).find('.fa-check.checkmark-icon');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).click(); // the blur seems to not always work, so just click on another cell
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).find('.mdi-check.checkmark-icon');
 
     cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
       .scrollTo('top');
@@ -210,7 +213,7 @@ describe('Example 3 - Grid with Editors', () => {
 
     // change Finish date
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).click();
-    cy.get('.flatpickr-day:visible:nth(24)').click('bottom', { force: true });
+    cy.get('.vanilla-calendar-day__btn').contains('21').click();
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', '2009-01-21');
 
     // // change Effort Driven

test/cypress/e2e/example06.cy.ts

@@ -22,9 +22,6 @@ describe('Example 6 - GraphQL Grid', () => {
   it('should have English Text inside some of the Filters', () => {
     cy.get('.search-filter.filter-gender .ms-choice > span')
       .contains('Male');
-
-    cy.get('.flatpickr-input')
-      .should('contain.value', 'to'); // date range will contains (y to z) or in French (y au z)
   });
 
   it('should have GraphQL query with defined Grid Presets', () => {
@@ -45,7 +42,7 @@ describe('Example 6 - GraphQL Grid', () => {
     cy.get('.search-filter.filter-finish')
       .find('input')
       .invoke('val')
-      .then(text => expect(text).to.eq(`${presetLowestDay} to ${presetHighestDay}`));
+      .then(text => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`));
 
     cy.get('[data-test=alert-graphql-query]').should('exist');
     cy.get('[data-test=alert-graphql-query]').should('contain', 'GraphQL Query');
@@ -327,7 +324,7 @@ describe('Example 6 - GraphQL Grid', () => {
     cy.get('.search-filter.filter-finish')
       .find('input')
       .invoke('val')
-      .then(text => expect(text).to.eq(`${presetLowestDay} to ${presetHighestDay}`));
+      .then(text => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`));
 
     // wait for the query to finish
     cy.get('[data-test=status]').should('contain', 'finished');
@@ -647,7 +644,7 @@ describe('Example 6 - GraphQL Grid', () => {
       cy.get('.search-filter.filter-finish')
         .find('input')
         .invoke('val')
-        .then(text => expect(text).to.eq(`${presetLowestDay} au ${presetHighestDay}`));
+        .then(text => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`));
 
       // wait for the query to finish
       cy.get('[data-test=status]').should('contain', 'finished');
@@ -673,9 +670,6 @@ describe('Example 6 - GraphQL Grid', () => {
 
       cy.get('.search-filter.filter-gender .ms-choice > span')
         .contains('Masculin');
-
-      cy.get('.flatpickr-input')
-        .should('contain.value', 'au'); // date range will contains (y to z) or in French (y au z)
     });
 
     it('should switch locale to English', () => {

test/cypress/e2e/example23.cy.ts

@@ -117,14 +117,17 @@ describe('Example 23 - Range Filters', () => {
   });
 
   it('should change the "Finish" date in the picker and expect all rows to be within new dates range', () => {
-    cy.get('.flatpickr.search-filter.filter-finish')
+    cy.get('.date-picker.search-filter.filter-finish')
       .click();
 
-    cy.get('.flatpickr-day.inRange')
+    cy.get('.vanilla-calendar-day_selected-first')
+      .should('exist');
+
+    cy.get('.vanilla-calendar-day_selected-intermediate')
       .should('have.length.gte', 2);
 
-    // cy.get('.flatpickr-day.selected.endRange')
-    //   .should('contain', moment().add(25, 'days').day() - 1);
+    cy.get('.vanilla-calendar-day_selected-last')
+      .should('exist');
   });
 
   it('should change the "Duration" input filter and expect all rows to be within new range', () => {
@@ -206,7 +209,7 @@ describe('Example 23 - Range Filters', () => {
       cy.get('.search-filter.filter-finish')
         .find('input')
         .invoke('val')
-        .then(text => expect(text).to.eq(`${dynamicLowestDay} to ${dynamicHighestDay}`));
+        .then(text => expect(text).to.eq(`${dynamicLowestDay} — ${dynamicHighestDay}`));
 
       cy.get('#grid23')
         .find('.slick-row')
@@ -227,7 +230,7 @@ describe('Example 23 - Range Filters', () => {
       cy.get('.search-filter.filter-finish')
         .find('input')
         .invoke('val')
-        .then(text => expect(text).to.eq(`${currentYear}-01-01 to ${currentYear}-12-31`));
+        .then(text => expect(text).to.eq(`${currentYear}-01-01 — ${currentYear}-12-31`));
 
       cy.get('.ms-parent.search-filter.filter-completed > button > span')
         .should('contain', 'True');