Integrate flatpickr with spectrum

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -14,7 +14,7 @@
       "optionsfield",
       "booleanfield",
       "longformfield",
-      "datepicker"
+      "datetimefield"
     ]
   },
   {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte

@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="datetime" />

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 => {

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"
+      }
+    ]
   }
 }

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",

packages/standard-components/src/DatePicker.svelte

@@ -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>

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>

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)
 

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"

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"

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"