From 66a2c9ba03ed3c5630fd5aefc42f4178af9dd461 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 18 Jan 2023 12:06:01 +0000
Subject: [PATCH] Add fancy select and improve other fancy components

---
 .../bbui/src/FancyForm/FancyCheckbox.svelte   |  26 +--
 packages/bbui/src/FancyForm/FancyField.svelte |  25 +++
 packages/bbui/src/FancyForm/FancyInput.svelte |  27 +--
 .../bbui/src/FancyForm/FancySelect.svelte     | 156 ++++++++++++++++++
 packages/bbui/src/FancyForm/index.js          |   1 +
 packages/bbui/src/Form/Core/Select.svelte     |   3 +
 6 files changed, 189 insertions(+), 49 deletions(-)
 create mode 100644 packages/bbui/src/FancyForm/FancySelect.svelte

diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
index 5947034c4c..91b6239bde 100644
--- a/packages/bbui/src/FancyForm/FancyCheckbox.svelte
+++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, getContext, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import FancyField from "./FancyField.svelte"
   import Checkbox from "../Form/Core/Checkbox.svelte"
 
@@ -10,8 +10,6 @@
   export let validate = null
 
   const dispatch = createEventDispatcher()
-  const formContext = getContext("fancy-form")
-  const id = Math.random()
 
   const onChange = () => {
     const newValue = !value
@@ -21,29 +19,9 @@
       error = validate(newValue)
     }
   }
-
-  const API = {
-    validate: () => {
-      if (validate) {
-        error = validate(value)
-      }
-      return !error
-    },
-  }
-
-  onMount(() => {
-    if (formContext) {
-      formContext.registerField(id, API)
-    }
-    return () => {
-      if (formContext) {
-        formContext.unregisterField(id)
-      }
-    }
-  })
 </script>
 
-<FancyField {error} {disabled} clickable on:click={onChange}>
+<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
   <span>
     <Checkbox {disabled} {value} />
   </span>
diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte
index ff02f68df9..ecdb262945 100644
--- a/packages/bbui/src/FancyForm/FancyField.svelte
+++ b/packages/bbui/src/FancyForm/FancyField.svelte
@@ -1,10 +1,35 @@
 <script>
   import Icon from "../Icon/Icon.svelte"
+  import { getContext, onMount } from "svelte"
 
   export let disabled = false
   export let error = null
   export let focused = false
   export let clickable = false
+  export let validate
+  export let value
+
+  const formContext = getContext("fancy-form")
+  const id = Math.random()
+  const API = {
+    validate: () => {
+      if (validate) {
+        error = validate(value)
+      }
+      return !error
+    },
+  }
+
+  onMount(() => {
+    if (formContext) {
+      formContext.registerField(id, API)
+    }
+    return () => {
+      if (formContext) {
+        formContext.unregisterField(id)
+      }
+    }
+  })
 </script>
 
 <div
diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte
index 6b8b839d53..3ccc86f8b7 100644
--- a/packages/bbui/src/FancyForm/FancyInput.svelte
+++ b/packages/bbui/src/FancyForm/FancyInput.svelte
@@ -1,7 +1,6 @@
 <script>
-  import { createEventDispatcher, getContext, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import FancyField from "./FancyField.svelte"
-  import Icon from "../Icon/Icon.svelte"
 
   export let label
   export let value
@@ -11,8 +10,6 @@
   export let validate = null
 
   const dispatch = createEventDispatcher()
-  const formContext = getContext("fancy-form")
-  const id = Math.random()
 
   let focused = false
   $: placeholder = !focused && !value
@@ -25,29 +22,9 @@
       error = validate(newValue)
     }
   }
-
-  const API = {
-    validate: () => {
-      if (validate) {
-        error = validate(value)
-      }
-      return !error
-    },
-  }
-
-  onMount(() => {
-    if (formContext) {
-      formContext.registerField(id, API)
-    }
-    return () => {
-      if (formContext) {
-        formContext.unregisterField(id)
-      }
-    }
-  })
 </script>
 
-<FancyField {error} {disabled} {focused}>
+<FancyField {error} {value} {validate} {disabled} {focused}>
   {#if label}
     <div class="label" class:placeholder>
       {label}
diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte
new file mode 100644
index 0000000000..59eed3c193
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@@ -0,0 +1,156 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Popover from "../Popover/Popover.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  let open = false
+  let popover
+  let wrapper
+
+  $: placeholder = !value
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+    open = false
+  }
+</script>
+
+<div bind:this={wrapper}>
+  <FancyField
+    {error}
+    {value}
+    {validate}
+    {disabled}
+    clickable
+    on:click={() => (open = true)}
+  >
+    {#if label}
+      <div class="label" class:placeholder>
+        {label}
+      </div>
+    {/if}
+
+    <div class="value" class:placeholder>
+      {value || ""}
+    </div>
+
+    <div class="arrow">
+      <Icon name="ChevronDown" />
+    </div>
+  </FancyField>
+</div>
+
+<svelte:head>
+  <script>
+    console.log("FOO")
+  </script>
+</svelte:head>
+
+<span>
+  <Popover
+    anchor={wrapper}
+    align="left"
+    portalTarget={document.documentElement}
+    bind:this={popover}
+    {open}
+    on:close={() => (open = false)}
+    useAnchorWidth={true}
+    maxWidth={null}
+  >
+    <div class="popover-content">
+      {#if options.length}
+        {#each options as option, idx}
+          <div
+            class="popover-option"
+            tabindex="0"
+            on:click={() => onChange(getOptionValue(option, idx))}
+          >
+            <span class="option-text">
+              {getOptionLabel(option, idx)}
+            </span>
+            {#if value === getOptionValue(option, idx)}
+              <Icon name="Checkmark" />
+            {/if}
+          </div>
+        {/each}
+      {/if}
+    </div>
+  </Popover>
+</span>
+
+<style>
+  span :global(.spectrum-Popover) {
+    background: red !important;
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 18px;
+    color: var(--spectrum-global-color-gray-600);
+    transition: font-size 130ms ease-out, top 130ms ease-out;
+  }
+  .label.placeholder {
+    top: 50%;
+    font-size: 15px;
+    transform: translateY(-50%);
+  }
+  .value {
+    display: block;
+    flex: 1 1 auto;
+    font-size: 15px;
+    margin-top: 18px;
+    color: var(--spectrum-global-color-gray-900);
+    transition: margin-top 130ms ease-out, opacity 130ms ease-out;
+    opacity: 1;
+  }
+  .value.placeholder {
+    opacity: 0;
+    pointer-events: none;
+    margin-top: 0;
+  }
+  .popover-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 10px 0;
+  }
+  .popover-option {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 7px 12px;
+    transition: background 130ms ease-out;
+  }
+  .popover-option:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js
index 78f03202c8..836c9ed679 100644
--- a/packages/bbui/src/FancyForm/index.js
+++ b/packages/bbui/src/FancyForm/index.js
@@ -1,4 +1,5 @@
 export { default as FancyInput } from "./FancyInput.svelte"
 export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
+export { default as FancySelect } from "./FancySelect.svelte"
 export { default as FancyButton } from "./FancyButton.svelte"
 export { default as FancyForm } from "./FancyForm.svelte"
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 3e15b7f6ef..721083e3a6 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -18,8 +18,11 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+
   const dispatch = createEventDispatcher()
+
   let open = false
+
   $: fieldText = getFieldText(value, options, placeholder)
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)