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>
+<div class="container">
+  <div class="text">
+    <TextArea
+      bind:value
+      placeholder="Enter your name"
+      label="Construct your text" />
+  </div>
+  <div class="list">
     <ul>
-  <li>1</li>
-  <li>2</li>
-  <li>3</li>
-  <li>4</li>
+      {#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,6 +35,7 @@
     const boundValues = val.match(/{{([^}]+)}}/g)
 
     // Replace with names:
+    boundValues &&
       boundValues.forEach(v => {
         const binding = bindableProperties.find(({ readableBinding }) => {
           return v === `{{ ${readableBinding} }}`
@@ -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>