From 2e7da50cc3a8f8bcd52ee7c3cc20fd4132dad0a5 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Wed, 30 Aug 2023 18:19:00 -0300
Subject: [PATCH] fix/chore: migrate DateTimePicker (#538)

* chore: replace DateTimePicker from bloom for bloom-ui

* Add patch for svelty-picker

---------

Co-authored-by: Matthew Maxwell <maxwellmattryan@gmail.com>
---
 .../views/components/DateTimePicker.svelte    |   2 +-
 packages/shared/package.json                  |   3 +-
 .../components/inputs/DateTimePicker.svelte   | 122 ------------------
 .../inputs/ExpirationDateTimePicker.svelte    |   2 +-
 .../shared/src/components/inputs/index.js     |   1 -
 .../molecules/DateInputButton.svelte          |   3 +-
 patches/svelty-picker+4.1.3.patch             |  48 +++++++
 yarn.lock                                     |  29 +++--
 8 files changed, 73 insertions(+), 137 deletions(-)
 delete mode 100644 packages/shared/src/components/inputs/DateTimePicker.svelte
 create mode 100644 patches/svelty-picker+4.1.3.patch

diff --git a/packages/desktop/views/dashboard/send-flow/views/components/DateTimePicker.svelte b/packages/desktop/views/dashboard/send-flow/views/components/DateTimePicker.svelte
index 93e4476dc1..ebf506f1ac 100644
--- a/packages/desktop/views/dashboard/send-flow/views/components/DateTimePicker.svelte
+++ b/packages/desktop/views/dashboard/send-flow/views/components/DateTimePicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte'
-    import { DateTimePicker } from '@ui'
+    import { DateTimePicker } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { isValidExpirationDateTime, MILLISECONDS_PER_SECOND, SECONDS_PER_MINUTE } from '@core/utils'
     import { showNotification } from '@auxiliary/notification'
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 2550c40c67..77dc64a269 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Charlie Varley <charlie@bloomwallet.io>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.7.10",
+        "@bloomwalletio/ui": "0.7.12",
         "@iota/bundle": "1.0.0-beta.30",
         "@iota/converter": "1.0.0-beta.30",
         "@iota/crypto.js": "1.8.6",
@@ -26,7 +26,6 @@
         "svelte": "3.58.0",
         "svelte-i18n": "3.7.0",
         "svelte-markdown": "0.2.3",
-        "svelty-picker": "3.5.0",
         "web3": "1.10.0",
         "zxcvbn": "4.4.2"
     },
diff --git a/packages/shared/src/components/inputs/DateTimePicker.svelte b/packages/shared/src/components/inputs/DateTimePicker.svelte
deleted file mode 100644
index 24a2e82b50..0000000000
--- a/packages/shared/src/components/inputs/DateTimePicker.svelte
+++ /dev/null
@@ -1,122 +0,0 @@
-<!-- this is a wrapper component for svelty-picker -->
-<script lang="ts">
-    import SveltyPicker from 'svelty-picker'
-    import { createEventDispatcher } from 'svelte'
-    import { Tooltip, Button, ButtonSize } from '@ui'
-    import { localize } from '@core/i18n'
-    import sveltyPickerTranslations from 'svelty-picker/i18n'
-    import { appSettings } from '@core/app/stores'
-
-    export let value: Date = undefined
-    export let startDate: Date = null
-    export let mode: 'auto' | 'datetime' | 'date' | 'time' = 'auto'
-
-    const dispatch = createEventDispatcher()
-    const sveltyPickerStartDate = convertDateToSveltyPickerFormat(startDate)
-
-    let sveltyPickerDate = convertDateToSveltyPickerFormat(value) ?? sveltyPickerStartDate
-    const translations = getSveltyPickerTranslations()
-    let tooltip: Tooltip
-
-    function convertDateToSveltyPickerFormat(date: Date): string {
-        return date?.toLocaleString('sv')
-    }
-
-    function onCancelClick(): void {
-        dispatch('cancel')
-    }
-
-    function onConfirmClick(): void {
-        value = new Date(sveltyPickerDate)
-        dispatch('confirm')
-    }
-
-    function getSveltyPickerTranslations(): Record<string, unknown> {
-        return sveltyPickerTranslations[getSveltyPickerLanguage($appSettings.language)] ?? sveltyPickerTranslations.en
-    }
-
-    function getSveltyPickerLanguage(settingsLanguage: string): string {
-        switch (settingsLanguage) {
-            case 'cs':
-                return 'cz'
-            case 'de':
-                return 'de'
-            case 'en':
-                return 'en'
-            case 'es-ES':
-            case 'es-LA':
-                return 'es'
-            case 'fr':
-                return 'fr'
-            case 'hu':
-                return 'hu'
-            case 'id':
-                return 'id'
-            case 'ja':
-                return 'jp'
-            case 'ko':
-                return 'ko'
-            case 'nl':
-                return 'nl'
-            case 'pt-BR':
-            case 'pt-PT':
-                return 'pt_BR'
-            case 'sk':
-                return 'sk'
-            default:
-                return 'en'
-        }
-    }
-</script>
-
-<Tooltip {...$$restProps} classes="flex justify-center items-center flex-col" bind:this={tooltip}>
-    <SveltyPicker
-        pickerOnly
-        autoclose
-        {mode}
-        clearBtn={false}
-        todayBtn={false}
-        startDate={sveltyPickerStartDate}
-        i18n={translations}
-        format="yyyy-mm-dd hh:ii"
-        theme="datetime-picker-colors"
-        bind:value={sveltyPickerDate}
-        on:change={tooltip?.refreshPosition}
-    />
-    <div class="flex flex-row justify-center items-center space-x-4 w-full">
-        <Button size={ButtonSize.Small} outline onClick={onCancelClick} classes="w-full"
-            >{localize('actions.cancel')}</Button
-        >
-        <Button size={ButtonSize.Small} onClick={onConfirmClick} classes="w-full">{localize('actions.confirm')}</Button>
-    </div>
-</Tooltip>
-
-<style lang="scss">
-    @media (prefers-color-scheme: dark) {
-        :global(.datetime-picker-colors) {
-            --sdt-color: theme('colors.white');
-            --sdt-btn-bg-hover: theme('colors.gray.800');
-            --sdt-btn-bg-hover: theme('colors.gray.800');
-            --sdt-btn-header-bg-hover: theme('colors.gray.800');
-            --sdt-clock-bg: theme('colors.gray.800');
-            --sdt-clock-bg-minute: theme('colors.gray.800');
-        }
-    }
-
-    @media (prefers-color-scheme: light) {
-        :global(.datetime-picker-colors) {
-            --sdt-primary: theme('colors.blue.500');
-            --sdt-color: theme('colors.gray.600');
-            --sdt-color-selected: theme('colors.white');
-            --sdt-bg-main: none;
-            --sdt-bg-today: var(--sdt-primary);
-            --sdt-today-color: theme('colors.white');
-            --sdt-btn-bg-hover: theme('colors.gray.200');
-            --sdt-btn-header-bg-hover: theme('colors.gray.200');
-            --sdt-clock-bg: theme('colors.gray.200');
-            --sdt-clock-bg-minute: theme('colors.gray.200');
-            --sdt-clock-bg-shadow: none;
-            --sdt-shadow: none;
-        }
-    }
-</style>
diff --git a/packages/shared/src/components/inputs/ExpirationDateTimePicker.svelte b/packages/shared/src/components/inputs/ExpirationDateTimePicker.svelte
index 93e4476dc1..ebf506f1ac 100644
--- a/packages/shared/src/components/inputs/ExpirationDateTimePicker.svelte
+++ b/packages/shared/src/components/inputs/ExpirationDateTimePicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte'
-    import { DateTimePicker } from '@ui'
+    import { DateTimePicker } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { isValidExpirationDateTime, MILLISECONDS_PER_SECOND, SECONDS_PER_MINUTE } from '@core/utils'
     import { showNotification } from '@auxiliary/notification'
diff --git a/packages/shared/src/components/inputs/index.js b/packages/shared/src/components/inputs/index.js
index 414f9e358d..9a4c306806 100644
--- a/packages/shared/src/components/inputs/index.js
+++ b/packages/shared/src/components/inputs/index.js
@@ -3,7 +3,6 @@ export { default as AliasInput } from './AliasInput.svelte'
 export { default as AmountInput } from './AmountInput.svelte'
 export { default as Checkbox } from './Checkbox.svelte'
 export { default as ClosableInput } from './ClosableInput.svelte'
-export { default as DateTimePicker } from './DateTimePicker.svelte'
 export { default as Dropdown } from './Dropdown.svelte'
 export { default as Dropdown2 } from './Dropdown2.svelte'
 export { default as Dropzone } from './Dropzone.svelte'
diff --git a/packages/shared/src/components/molecules/DateInputButton.svelte b/packages/shared/src/components/molecules/DateInputButton.svelte
index e791608f2b..f5e53f12de 100644
--- a/packages/shared/src/components/molecules/DateInputButton.svelte
+++ b/packages/shared/src/components/molecules/DateInputButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+    import { DateTimePicker } from '@bloomwalletio/ui'
+    import { Text, Icon } from '@ui'
     import { formatDate } from '@core/i18n'
-    import { Text, DateTimePicker, Icon } from '@ui'
     import { appSettings } from '@core/app/stores'
 
     export let value: string = undefined
diff --git a/patches/svelty-picker+4.1.3.patch b/patches/svelty-picker+4.1.3.patch
new file mode 100644
index 0000000000..91e337d45d
--- /dev/null
+++ b/patches/svelty-picker+4.1.3.patch
@@ -0,0 +1,48 @@
+diff --git a/node_modules/svelty-picker/dist/components/SveltyPicker.svelte b/node_modules/svelty-picker/dist/components/SveltyPicker.svelte
+index fc6354a..751d4ed 100644
+--- a/node_modules/svelty-picker/dist/components/SveltyPicker.svelte
++++ b/node_modules/svelty-picker/dist/components/SveltyPicker.svelte
+@@ -1,5 +1,5 @@
+ <script context="module">
+-  import settings from "../settings";
++  import settings from "../settings.js";
+   export const config = settings;
+ </script>
+ 
+@@ -12,10 +12,10 @@
+   import { fade } from "svelte/transition";
+   import Calendar from "./Calendar.svelte";
+   import Time from "./Time.svelte";
+-  import { formatDate, parseDate } from "../utils/dateUtils";
++  import { formatDate, parseDate } from "../utils/dateUtils.js";
+   import { usePosition } from "../utils/actions.js";
+-  import { computeResolvedMode, initProps } from "../utils/state";
+-  import { MODE_MONTH, STARTVIEW_TIME } from "../utils/constants";
++  import { computeResolvedMode, initProps } from "../utils/state.js";
++  import { MODE_MONTH, STARTVIEW_TIME } from "../utils/constants.js";
+ 
+   // html
+   export let inputId = '';
+diff --git a/node_modules/svelty-picker/dist/utils/grid.js b/node_modules/svelty-picker/dist/utils/grid.js
+index 19c3403..5318956 100644
+--- a/node_modules/svelty-picker/dist/utils/grid.js
++++ b/node_modules/svelty-picker/dist/utils/grid.js
+@@ -1,6 +1,6 @@
+ 
+-import { MODE_YEAR, MODE_DECADE } from "./constants";
+-import { getDaysInMonth } from "./dateUtils";
++import { MODE_YEAR, MODE_DECADE } from "./constants.js";
++import { getDaysInMonth } from "./dateUtils.js";
+ 
+ /**
+  * @typedef {object} Dataset
+diff --git a/node_modules/svelty-picker/dist/utils/state.js b/node_modules/svelty-picker/dist/utils/state.js
+index e264172..c6101a2 100644
+--- a/node_modules/svelty-picker/dist/utils/state.js
++++ b/node_modules/svelty-picker/dist/utils/state.js
+@@ -1,4 +1,4 @@
+-import { formatDate, parseDate } from "./dateUtils";
++import { formatDate, parseDate } from "./dateUtils.js";
+ 
+ /**
+  * @typedef {object} ValueInit
diff --git a/yarn.lock b/yarn.lock
index 3ef85160b7..c03bfb30ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -342,16 +342,17 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.7.10":
-  version "0.7.10"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.7.10/517dde2cd81244de9848c41d202bc93d21bfd393#517dde2cd81244de9848c41d202bc93d21bfd393"
-  integrity sha512-7lfkfCAvpwQd6otDeSoLJ47RYNjvRwCcHJ9Y96EMq8nfRXfGfsR5aPJWDgqTFw2AW020k0YLK41WpXhgpUD0SQ==
+"@bloomwalletio/ui@0.7.12":
+  version "0.7.12"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.7.12/80419dcec6f6031dc888a5defabdc69cf7926722#80419dcec6f6031dc888a5defabdc69cf7926722"
+  integrity sha512-384Eci/XxTGxw/aA/wfzehu0trMg3eTiQr6c7cZhng9S75WsRxnB0kOTlRde9dwawAeo5rTHtEXOTz5xA/PIEw==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"
     flowbite "1.7.0"
     flowbite-svelte "0.39.2"
     svelte-json-tree "2.1.0"
+    svelty-picker "4.1.3"
     tailwind-merge "1.13.2"
 
 "@chainsafe/as-sha256@^0.4.1":
@@ -1114,7 +1115,7 @@
     "@ethersproject/properties" "^5.7.0"
     "@ethersproject/strings" "^5.7.0"
 
-"@floating-ui/core@^1.3.1":
+"@floating-ui/core@^1.3.1", "@floating-ui/core@^1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
   integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
@@ -1128,6 +1129,14 @@
   dependencies:
     "@floating-ui/core" "^1.3.1"
 
+"@floating-ui/dom@^1.4.5":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
+  dependencies:
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
 "@floating-ui/utils@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
@@ -9996,10 +10005,12 @@ svelte@3.58.0:
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
   integrity sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==
 
-svelty-picker@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/svelty-picker/-/svelty-picker-3.5.0.tgz#003e602489ba66f82745bd517d926a85879d1015"
-  integrity sha512-URxe82uJshx1I2mYdHU1/b2DysexvDZhgnfBP3p/aL5VBCa/PN0YltDR5VXQduW4EqxfQAJ9V/7w+adXqfx1rQ==
+svelty-picker@4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/svelty-picker/-/svelty-picker-4.1.3.tgz#a19ca75459b5a6f2bc2387567b33b7048427645e"
+  integrity sha512-83gaWpwn16zhJctNEUuUMA883vvgsdbyj+Eil/nTWrRZ9b+xg2McQIRMcG4KxE+jvS10AdUO5pduxT1HLBBMpQ==
+  dependencies:
+    "@floating-ui/dom" "^1.4.5"
 
 swarm-js@^0.1.40:
   version "0.1.42"