adds panel interface

packages/builder/src/components/userInterface/BindingDropdown.svelte

@@ -1,17 +1,48 @@
 <script>
-  export let value = "Something is wrong"
+  import { TextArea } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  export let bindableProperties
+  export let value = ""
+
+  function addToText(readableBinding) {
+    value = value + `{{ ${readableBinding} }}`
+  }
+
+  $: dispatch("update", value)
 </script>
 
-<div class="container">{value}</div>
-<button on:click>Get stuff!</button>
-<ul>
-  <li>1</li>
-  <li>2</li>
-  <li>3</li>
-  <li>4</li>
-</ul>
+<div class="container">
+  <div class="text">
+    <TextArea
+      bind:value
+      placeholder="Enter your name"
+      label="Construct your text" />
+  </div>
+  <div class="list">
+    <ul>
+      {#each bindableProperties as { readableBinding }}
+        <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+      {/each}
+    </ul>
+  </div>
+</div>
 
 <style>
+  .container {
+    grid-gap: 20px;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+  .text {
+    width: 600px;
+    display: grid;
+  }
+  .list {
+    width: 150px;
+  }
   ul {
     list-style: none;
     padding-left: 0;

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -35,14 +35,15 @@
     const boundValues = val.match(/{{([^}]+)}}/g)
 
     // Replace with names:
-    boundValues.forEach(v => {
-      const binding = bindableProperties.find(({ readableBinding }) => {
-        return v === `{{ ${readableBinding} }}`
+    boundValues &&
+      boundValues.forEach(v => {
+        const binding = bindableProperties.find(({ readableBinding }) => {
+          return v === `{{ ${readableBinding} }}`
+        })
+        if (binding) {
+          val = val.replace(v, `{{ ${binding.runtimeBinding} }}`)
+        }
       })
-      if (binding) {
-        val = val.replace(v, `{{ ${binding.runtimeBinding} }}`)
-      }
-    })
     onChange(key, val)
   }
 
@@ -61,7 +62,7 @@
   const safeValue = () => {
     getBindableProperties()
     let temp = value
-    const boundValues = value.match(/{{([^}]+)}}/g) || []
+    const boundValues = (value && value.match(/{{([^}]+)}}/g)) || []
     console.log(boundValues)
 
     // Replace with names:
@@ -100,7 +101,10 @@
   <button on:click={dropdown.show}>O</button>
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="right">
-  <BindingDropdown />
+  <BindingDropdown
+    {...handlevalueKey(value)}
+    on:update={e => handleChange(key, e.detail)}
+    {bindableProperties} />
 </DropdownMenu>
 
 <style>