From 58fdabe96b9a33cb2e365a4f35cc66d1c8ff79ee Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Jan 2021 18:53:40 +0000
Subject: [PATCH] Integrate flatpickr with spectrum

---
 .../design/AppPreview/componentStructure.json |  2 +-
 .../DateTimeFieldSelect.svelte                |  5 ++
 .../PropertiesPanel/SettingsView.svelte       |  2 +
 packages/standard-components/manifest.json    | 36 +++++----
 packages/standard-components/package.json     |  1 +
 .../standard-components/src/DatePicker.svelte | 21 -----
 .../src/forms/DateTimeField.svelte            | 79 +++++++++++++++++++
 .../src/forms/LongFormField.svelte            |  2 -
 .../standard-components/src/forms/index.js    |  1 +
 packages/standard-components/src/index.js     |  2 -
 packages/standard-components/yarn.lock        |  5 ++
 11 files changed, 116 insertions(+), 40 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
 delete mode 100644 packages/standard-components/src/DatePicker.svelte
 create mode 100644 packages/standard-components/src/forms/DateTimeField.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 96e45ed658..6ecdcc8657 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -14,7 +14,7 @@
       "optionsfield",
       "booleanfield",
       "longformfield",
-      "datepicker"
+      "datetimefield"
     ]
   },
   {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
new file mode 100644
index 0000000000..5c0ed8cb2f
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="datetime" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 5575ac0b9f..a1be940553 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -22,6 +22,7 @@
   import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
   import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
   import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte"
+  import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -68,6 +69,7 @@
     "field/options": OptionsFieldSelect,
     "field/boolean": BooleanFieldSelect,
     "field/longform": LongFormFieldSelect,
+    "field/datetime": DateTimeFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index d0b81cdf13..4214346a7f 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -114,20 +114,6 @@
       }
     ]
   },
-  "datepicker": {
-    "name": "Date Picker",
-    "description": "A basic date picker component",
-    "icon": "ri-calendar-line",
-    "styleable": true,
-    "bindable": true,
-    "settings": [
-      {
-        "type": "text",
-        "label": "Placeholder",
-        "key": "placeholder"
-      }
-    ]
-  },
   "stackedlist": {
     "name": "Stacked List",
     "icon": "ri-archive-drawer-line",
@@ -1257,5 +1243,27 @@
         "placeholder": "Type something..."
       }
     ]
+  },
+  "datetimefield": {
+    "name": "Date Picker",
+    "icon": "ri-calendar-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "field/datetime",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 678e772c0f..eec67a7ff4 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -47,6 +47,7 @@
     "@spectrum-css/checkbox": "^3.0.0-beta.6",
     "@spectrum-css/fieldlabel": "^3.0.0-beta.7",
     "@spectrum-css/icon": "^3.0.0-beta.2",
+    "@spectrum-css/inputgroup": "^3.0.0-beta.7",
     "@spectrum-css/menu": "^3.0.0-beta.5",
     "@spectrum-css/page": "^3.0.0-beta.0",
     "@spectrum-css/picker": "^1.0.0-beta.3",
diff --git a/packages/standard-components/src/DatePicker.svelte b/packages/standard-components/src/DatePicker.svelte
deleted file mode 100644
index 200a563516..0000000000
--- a/packages/standard-components/src/DatePicker.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { DatePicker } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { styleable, setBindableValue } = getContext("sdk")
-  const component = getContext("component")
-
-  export let placeholder
-
-  let value
-  $: setBindableValue($component.id, value)
-
-  function handleChange(event) {
-    const [fullDate] = event.detail
-    value = fullDate
-  }
-</script>
-
-<div use:styleable={$component.styles}>
-  <DatePicker {placeholder} on:change={handleChange} {value} />
-</div>
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
new file mode 100644
index 0000000000..3245ce7662
--- /dev/null
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -0,0 +1,79 @@
+<script>
+  import Flatpickr from "svelte-flatpickr"
+  import SpectrumField from "./SpectrumField.svelte"
+  import "flatpickr/dist/flatpickr.css"
+  import "@spectrum-css/inputgroup/dist/index-vars.css"
+
+  export let field
+  export let label
+  export let placeholder
+
+  let fieldState
+  let fieldApi
+  let value
+  $: fieldApi?.setValue(value)
+
+  const handleChange = event => {
+    const [fullDate] = event.detail
+    value = fullDate
+  }
+
+  const formatDate = dateString => {
+    const date = new Date(dateString)
+    return date.toDateString()
+  }
+</script>
+
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+  {#if fieldState}
+    <Flatpickr
+      {value}
+      options={{ element: `#${$fieldState.id}-wrapper` }}
+      on:change={handleChange}
+      element={`#${$fieldState.id}-wrapper`}>
+      <div
+        id={`${$fieldState.id}-wrapper`}
+        aria-disabled="false"
+        aria-invalid="false"
+        class="flatpickr spectrum-InputGroup spectrum-Datepicker"
+        aria-readonly="false"
+        aria-required="false"
+        aria-haspopup="true">
+        <div class="spectrum-Textfield spectrum-InputGroup-textfield">
+          <input
+            data-input
+            type="text"
+            class="spectrum-Textfield-input spectrum-InputGroup-input"
+            aria-invalid="false"
+            {placeholder}
+            id={$fieldState.id}
+            value={formatDate($fieldState.value)} />
+        </div>
+        <button
+          type="button"
+          class="spectrum-Picker spectrum-InputGroup-button"
+          tabindex="-1">
+          <svg
+            class="spectrum-Icon spectrum-Icon--sizeM"
+            focusable="false"
+            aria-hidden="true"
+            aria-label="Calendar">
+            <use xlink:href="#spectrum-icon-18-Calendar" />
+          </svg>
+        </button>
+      </div>
+    </Flatpickr>
+  {/if}
+</SpectrumField>
+
+<style>
+  .flatpickr {
+    width: var(
+      --spectrum-alias-single-line-width,
+      var(--spectrum-global-dimension-size-2400)
+    );
+  }
+  .flatpickr .spectrum-Textfield {
+    width: auto;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index 0b2b873760..a9cd13de4a 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -1,6 +1,5 @@
 <script>
   import { RichText } from "@budibase/bbui"
-  import "@spectrum-css/checkbox/dist/index-vars.css"
   import SpectrumField from "./SpectrumField.svelte"
 
   export let field
@@ -9,7 +8,6 @@
 
   let fieldState
   let fieldApi
-
   let value
   $: fieldApi?.setValue(value)
 
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index 5d0fc1d70c..caaf0bc276 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -5,3 +5,4 @@ export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"
 export { default as booleanfield } from "./BooleanField.svelte"
 export { default as longformfield } from "./LongFormField.svelte"
+export { default as datetimefield } from "./DateTimeField.svelte"
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 8f0b38f2f1..e100a0d6bd 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -1,5 +1,4 @@
 import "@budibase/bbui/dist/bbui.css"
-import "flatpickr/dist/flatpickr.css"
 import "@spectrum-css/vars/dist/spectrum-global.css"
 import "@spectrum-css/vars/dist/spectrum-medium.css"
 import "@spectrum-css/vars/dist/spectrum-large.css"
@@ -19,7 +18,6 @@ export { default as button } from "./Button.svelte"
 export { default as list } from "./List.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
-export { default as datepicker } from "./DatePicker.svelte"
 export { default as text } from "./Text.svelte"
 export { default as login } from "./Login.svelte"
 export { default as navigation } from "./Navigation.svelte"
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 4002f824cc..cd03e685b9 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -157,6 +157,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb"
   integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA==
 
+"@spectrum-css/inputgroup@^3.0.0-beta.7":
+  version "3.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.0-beta.7.tgz#9829812e349bf973fb8835f0586bf013c8c38d23"
+  integrity sha512-pZDpYhtTKZUVG31Rtx7imdwK2ohLyVuTEsl+mj2yDKn+2TOwYRxr6LdbfNhFN4xd0GtSqapKYfbgKBWYpIyiSw==
+
 "@spectrum-css/menu@^3.0.0-beta.5":
   version "3.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74"