Merge pull request #13573 from Budibase/flatpickr-cleanup

Remove all traces of flatpickr

packages/bbui/package.json

@@ -83,7 +83,6 @@
     "dayjs": "^1.10.8",
     "easymde": "^2.16.1",
     "svelte-dnd-action": "^0.9.8",
-    "svelte-flatpickr": "3.2.3",
     "svelte-portal": "^1.0.0"
   },
   "resolutions": {

packages/bbui/src/Actions/click_outside.js

@@ -1,6 +1,5 @@
 const ignoredClasses = [
   ".download-js-link",
-  ".flatpickr-calendar",
   ".spectrum-Menu",
   ".date-time-popover",
 ]

packages/bbui/src/helpers.js

@@ -154,7 +154,7 @@ export const parseDate = (value, { enableTime = true }) => {
 // schema flags
 export const stringifyDate = (
   value,
-  { enableTime = true, timeOnly = false, ignoreTimezones = false }
+  { enableTime = true, timeOnly = false, ignoreTimezones = false } = {}
 ) => {
   if (!value) {
     return null
@@ -210,7 +210,7 @@ const localeDateFormat = new Intl.DateTimeFormat()
 // Formats a dayjs date according to schema flags
 export const getDateDisplayValue = (
   value,
-  { enableTime = true, timeOnly = false }
+  { enableTime = true, timeOnly = false } = {}
 ) => {
   if (!value?.isValid()) {
     return ""

packages/client/package.json

@@ -34,7 +34,6 @@
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",
     "svelte-apexcharts": "^1.0.2",
-    "svelte-flatpickr": "^3.3.4",
     "svelte-spa-router": "^4.0.1"
   },
   "devDependencies": {

packages/client/src/components/ClientApp.svelte

@@ -206,13 +206,6 @@
                               />
                             {/key}
 
-                            <!--
-                        Flatpickr needs to be inside the theme wrapper.
-                        It also needs its own container because otherwise it hijacks
-                        key events on the whole page. It is painful to work with.
-                      -->
-                            <div id="flatpickr-root" />
-
                             <!-- Modal container to ensure they sit on top -->
                             <div class="modal-container" />
 

packages/client/src/components/CustomThemeWrapper.svelte

@@ -60,16 +60,6 @@
     --spectrum-link-primary-m-text-color-hover: var(--primaryColorHover);
   }
 
-  /* Theme flatpickr */
-  :global(.flatpickr-day.selected) {
-    background: var(--primaryColor);
-    border-color: var(--primaryColor);
-  }
-  :global(.flatpickr-day.selected:hover) {
-    background: var(--primaryColorHover);
-    border-color: var(--primaryColorHover);
-  }
-
   /* Custom scrollbars */
   :global(::-webkit-scrollbar) {
     width: 8px;

packages/client/src/components/app/forms/DateTimeField.svelte

@@ -49,7 +49,6 @@
       readonly={fieldState.readonly}
       error={fieldState.error}
       id={fieldState.fieldId}
-      appendTo={document.getElementById("flatpickr-root")}
       {enableTime}
       {timeOnly}
       {time24hr}

packages/client/src/components/app/forms/validation.js

@@ -1,5 +1,6 @@
-import flatpickr from "flatpickr"
+import dayjs from "dayjs"
 import { FieldTypes } from "../../../constants"
+import { Helpers } from "@budibase/bbui"
 
 /**
  * Creates a validation function from a combination of schema-level constraints
@@ -81,7 +82,7 @@ export const createValidatorFromConstraints = (
     // Date constraint
     if (exists(schemaConstraints.datetime?.earliest)) {
       const limit = schemaConstraints.datetime.earliest
-      const limitString = flatpickr.formatDate(new Date(limit), "F j Y, H:i")
+      const limitString = Helpers.getDateDisplayValue(dayjs(limit))
       rules.push({
         type: "datetime",
         constraint: "minValue",
@@ -91,7 +92,7 @@ export const createValidatorFromConstraints = (
     }
     if (exists(schemaConstraints.datetime?.latest)) {
       const limit = schemaConstraints.datetime.latest
-      const limitString = flatpickr.formatDate(new Date(limit), "F j Y, H:i")
+      const limitString = Helpers.getDateDisplayValue(dayjs(limit))
       rules.push({
         type: "datetime",
         constraint: "maxValue",

yarn.lock

@@ -11441,11 +11441,6 @@ flat@^5.0.2:
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
-flatpickr@^4.5.2:
-  version "4.6.13"
-  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94"
-  integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==
-
 flatted@^3.1.0:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
@@ -21098,20 +21093,6 @@ svelte-dnd-action@^0.9.8:
     postcss "^8.4.29"
     postcss-scss "^4.0.8"
 
-svelte-flatpickr@3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-3.2.3.tgz#db5dd7ad832ef83262b45e09737955ad3d591fc8"
-  integrity sha512-PNkqK4Napx8nTvCwkaUXdnKo8dISThaxEOK+szTUXcY6H0dQM0TSyuoMaVWY2yX7pM+PN5cpCQCcVe8YvTRFSw==
-  dependencies:
-    flatpickr "^4.5.2"
-
-svelte-flatpickr@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-3.3.4.tgz#80b1ed2d6bc37df78b1660404e9326bfc0a206f4"
-  integrity sha512-i+QqJRs8zPRKsxv8r2GIk1fsb8cI3ozn3/aHXtViAoNKLy0j4PV7OSWavgEZC1wlAa34qi2hMkUh+vg6qt2DRA==
-  dependencies:
-    flatpickr "^4.5.2"
-
 svelte-hmr@^0.15.1:
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.3.tgz#df54ccde9be3f091bf5f18fc4ef7b8eb6405fbe6"