From 431abb53ceb3e05992252adc2898690e8f03a884 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Apr 2021 14:30:33 +0100
Subject: [PATCH] Add radio group spectrum component and update builder

---
 packages/bbui/package.json                    |   1 +
 packages/bbui/src/Form/Checkbox.svench.svx    |  67 -------
 packages/bbui/src/Form/Core/Checkbox.svelte   |   4 +-
 .../bbui/src/Form/Core/Multiselect.svelte     |   4 +-
 packages/bbui/src/Form/Core/Picker.svelte     |   4 +-
 packages/bbui/src/Form/Core/RadioGroup.svelte |  36 ++++
 packages/bbui/src/Form/Core/Select.svelte     |   4 +-
 packages/bbui/src/Form/Core/TextField.svelte  |   2 +-
 packages/bbui/src/Form/Core/index.js          |   1 +
 packages/bbui/src/Form/DataList.svench        |  57 ------
 packages/bbui/src/Form/Input.svench           |  62 -------
 packages/bbui/src/Form/Multiselect.svench     |  63 -------
 packages/bbui/src/Form/Radio.svelte           | 140 --------------
 packages/bbui/src/Form/Radio.svench.svx       |  64 -------
 packages/bbui/src/Form/RadioGroup.svelte      |  37 ++++
 packages/bbui/src/Form/RichText.svench.svx    |  40 ----
 packages/bbui/src/Form/Select.svench          |  62 -------
 packages/bbui/src/Form/Slider.svench          |  26 ---
 packages/bbui/src/Form/TextArea.svench        |  30 ---
 packages/bbui/src/Form/Toggle.svench          |  21 ---
 packages/bbui/src/index.js                    |   3 +-
 packages/bbui/yarn.lock                       |   5 +
 .../DataTable/TableHeader/TableHeader.svelte  | 171 ------------------
 .../backend/DataTable/TableHeader/index.js    |  35 ----
 .../TableLoadingOverlay/LoadingOverlay.svelte |  27 ---
 .../DataTable/TableLoadingOverlay/index.js    |  17 --
 .../DataTable/modals/CreateEditColumn.svelte  |  36 ++--
 .../src/forms/BooleanField.svelte             |   2 +-
 .../src/forms/OptionsField.svelte             |   2 +-
 .../src/forms/Picker.svelte                   | 110 -----------
 .../src/forms/RelationshipField.svelte        |   2 +-
 31 files changed, 109 insertions(+), 1026 deletions(-)
 delete mode 100644 packages/bbui/src/Form/Checkbox.svench.svx
 create mode 100644 packages/bbui/src/Form/Core/RadioGroup.svelte
 delete mode 100644 packages/bbui/src/Form/DataList.svench
 delete mode 100644 packages/bbui/src/Form/Input.svench
 delete mode 100644 packages/bbui/src/Form/Multiselect.svench
 delete mode 100644 packages/bbui/src/Form/Radio.svelte
 delete mode 100644 packages/bbui/src/Form/Radio.svench.svx
 create mode 100644 packages/bbui/src/Form/RadioGroup.svelte
 delete mode 100644 packages/bbui/src/Form/RichText.svench.svx
 delete mode 100644 packages/bbui/src/Form/Select.svench
 delete mode 100644 packages/bbui/src/Form/Slider.svench
 delete mode 100644 packages/bbui/src/Form/TextArea.svench
 delete mode 100644 packages/bbui/src/Form/Toggle.svench
 delete mode 100644 packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/TableHeader/index.js
 delete mode 100644 packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js
 delete mode 100644 packages/standard-components/src/forms/Picker.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index d7fe9d9f26..ed9bba0d35 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -53,6 +53,7 @@
     "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/progressbar": "^1.0.2",
     "@spectrum-css/progresscircle": "^1.0.2",
+    "@spectrum-css/radio": "^3.0.2",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
     "@spectrum-css/textfield": "^3.0.1",
diff --git a/packages/bbui/src/Form/Checkbox.svench.svx b/packages/bbui/src/Form/Checkbox.svench.svx
deleted file mode 100644
index b3246ec9d2..0000000000
--- a/packages/bbui/src/Form/Checkbox.svench.svx
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Checkbox from "./Checkbox.svelte";
-
-  let checked = false
-
-  let menu = [
-    {text: 'Cookies and cream', checked: false},
-    {text: 'Mint choc chip', checked: false},
-    {text: 'Raspberry ripple', checked: true}
-  ];
-</script>
-
-<View name="Single checkbox">
-      <Checkbox bind:checked value="value">
-        <label for="value">One single checkbox with text</label>
-      </Checkbox>
-</View>
-
-<View name="Single disabled checkbox">
-  <Checkbox disabled checked value="value">
-    <label for="someOtherValue">A disabled checkbox</label>
-  </Checkbox>
-</View>
-
-<View name="No text">
-  <Checkbox bind:checked value="somevalue" />
-</View>
-
-## Multiple checkboxes
-Use an array and an each block to use multiple checkboxes
-```svelte
-<script>
-  let menu = [
-    {text: 'Cookies and cream', checked: false},
-    {text: 'Mint choc chip', checked: false},
-    {text: 'Raspberry ripple', checked: true}
-  ];
-</script>
-
-{#each menu as {text, checked}}
-  <Checkbox value={text} bind:checked>
-    <label for={text}>{text}</label>
-  </Checkbox>
-{/each}
-```
-
-<View name="Multiple checkboxes">
-  <div class="container">
-    {#each menu as {text, checked}}
-      <Checkbox value={text} bind:checked>
-        <label for={text}>{text}</label>
-      </Checkbox>
-    {/each}
-  </div>
-</View>
-
-<style>
-    label {
-      display: grid;
-      place-items: center;
-    }
-  .container {
-    display: grid;
-    grid-gap: 10px;
-  }
-</style>
\ No newline at end of file
diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
index 21a79cf0c7..bc9b9a9fc7 100644
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -5,7 +5,7 @@
 
   export let value = false
   export let error = null
-  export let fieldId = null
+  export let id = null
   export let text = null
   export let disabled = false
 
@@ -24,7 +24,7 @@
     on:change={onChange}
     type="checkbox"
     class="spectrum-Checkbox-input"
-    id={fieldId} />
+    {id} />
   <span class="spectrum-Checkbox-box">
     <svg
       class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 90fdfaaa48..a1395a66b2 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -3,7 +3,7 @@
   import { createEventDispatcher } from "svelte"
 
   export let value = []
-  export let fieldId = null
+  export let id = null
   export let placeholder = null
   export let disabled = false
   export let error = null
@@ -69,7 +69,7 @@
 </script>
 
 <Picker
-  {fieldId}
+  {id}
   {error}
   {disabled}
   {fieldText}
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 4fb6c27acc..eea5289218 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -4,7 +4,7 @@
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
 
-  export let fieldId = null
+  export let id = null
   export let disabled = false
   export let error = null
   export let fieldText = ""
@@ -19,7 +19,7 @@
 </script>
 
 <button
-  id={fieldId}
+  {id}
   class="spectrum-Picker spectrum-Picker--sizeM"
   {disabled}
   class:is-invalid={!!error}
diff --git a/packages/bbui/src/Form/Core/RadioGroup.svelte b/packages/bbui/src/Form/Core/RadioGroup.svelte
new file mode 100644
index 0000000000..e5dd2ff48c
--- /dev/null
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@@ -0,0 +1,36 @@
+<script>
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import "@spectrum-css/radio/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let direction = "vertical"
+  export let value = null
+  export let options = []
+  export let error = null
+  export let disabled = false
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => dispatch("change", e.target.value)
+</script>
+
+<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
+  {#if options && Array.isArray(options)}
+    {#each options as option}
+      <div
+        class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
+        class:is-invalid={!!error}>
+        <input
+          on:change={onChange}
+          bind:group={value}
+          value={getOptionValue(option)}
+          type="radio"
+          class="spectrum-Radio-input"
+          {disabled} />
+        <span class="spectrum-Radio-button" />
+        <label class="spectrum-Radio-label">{getOptionLabel(option)}</label>
+      </div>
+    {/each}
+  {/if}
+</div>
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 15640d93bf..24e8629e44 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -3,7 +3,7 @@
   import Picker from "./Picker.svelte"
 
   export let value = null
-  export let fieldId = null
+  export let id = null
   export let placeholder = "Choose an option"
   export let disabled = false
   export let error = null
@@ -39,7 +39,7 @@
 
 <Picker
   bind:open
-  {fieldId}
+  {id}
   {error}
   {disabled}
   {fieldText}
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 9ffaf4858c..63c852dfb3 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -3,7 +3,7 @@
   import { createEventDispatcher } from "svelte"
 
   export let value = ""
-  export let placeholder = ""
+  export let placeholder = null
   export let type = "text"
   export let disabled = false
   export let error = null
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index b8af2ca9e1..95971a2560 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -2,3 +2,4 @@ export { default as CoreTextField } from "./TextField.svelte"
 export { default as CoreSelect } from "./Select.svelte"
 export { default as CoreMultiselect } from "./Multiselect.svelte"
 export { default as CoreCheckbox } from "./Checkbox.svelte"
+export { default as CoreRadioGroup } from "./RadioGroup.svelte"
diff --git a/packages/bbui/src/Form/DataList.svench b/packages/bbui/src/Form/DataList.svench
deleted file mode 100644
index eea8294dea..0000000000
--- a/packages/bbui/src/Form/DataList.svench
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Select from "./Select.svelte";
-  import DataList from "./DataList.svelte";
-  import Spacer from "../Spacer/Spacer.svelte"
-
-  const options = ["Chocolate", "Vanilla", "Strawberry Cheesecake"];
-</script>
-
-<View name="default">
-  <DataList name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="secondary">
-  <DataList secondary name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="outline">
-  <DataList outline name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="disabled">
-  <DataList disabled name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="thin">
-  <DataList thin name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="extraThin">
-  <DataList extraThin name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
diff --git a/packages/bbui/src/Form/Input.svench b/packages/bbui/src/Form/Input.svench
deleted file mode 100644
index 1b95727a1a..0000000000
--- a/packages/bbui/src/Form/Input.svench
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Input from "./Input.svelte";
-  import Button from "../Button/Button.svelte";
-</script>
-
-<View name="default">
-  <Input placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="presentation">
-  <Input presentation placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="outline">
-  <Input outline placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="disabled">
-  <Input disabled placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="disabled with value">
-  <Input value="Some text" disabled placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="thin">
-  <Input thin placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="extraThin">
-  <Input extraThin placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="large">
-  <Input large placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="border">
-  <Input border presentation placeholder="Enter your name" label="Name" />
-</View>
-
-
-<View name="number">
-  <Input type="number" placeholder="Enter your age" label="Age" />
-</View>
-
-<View name="with edit buttons">
-  <Input
-    thin
-    edit
-    placeholder="Enter your name"
-    label="Name"
-    on:save={console.log} />
-</View>
-<View name="with error message">
-  <Input
-    placeholder="Enter your name"
-    label="Name"
-    error="This is an error message!"
-    on:save={console.log} />
-</View>
diff --git a/packages/bbui/src/Form/Multiselect.svench b/packages/bbui/src/Form/Multiselect.svench
deleted file mode 100644
index 86ad0de529..0000000000
--- a/packages/bbui/src/Form/Multiselect.svench
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Multiselect from "./Multiselect.svelte";
-
-  const options = ["Red", "Blue", "Yellow", "Green", "Pink", "Very long color name to show text wrapping"];
-</script>
-
-<View name="default">
-  <Multiselect name="Test" label="Colours" placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="right aligned">
-<div class="max-width">
-  <Multiselect align="right" name="Test" label="Colours" placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</div>
-</View>
-
-<View name="secondary">
-  <Multiselect name="Test" label="Colours" secondary placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="outline">
-  <Multiselect name="Test" label="Colours" outline placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="disabled">
-  <Multiselect name="Test" label="Colours" disabled placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="extraThin">
-  <Multiselect name="Test" label="Colours" extraThin placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<style>
-  .max-width {
-    align-self: flex-end;
-    max-width: 150px;
-  }
-</style>
diff --git a/packages/bbui/src/Form/Radio.svelte b/packages/bbui/src/Form/Radio.svelte
deleted file mode 100644
index b4a2637803..0000000000
--- a/packages/bbui/src/Form/Radio.svelte
+++ /dev/null
@@ -1,140 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let value
-  export let group
-  export let name
-  export let disabled = false
-
-  function handleChange() {
-    if (disabled) return
-    group = value
-    dispatch("change", group)
-  }
-</script>
-
-<div class="container">
-  <input
-    {disabled}
-    on:change={handleChange}
-    {value}
-    bind:group
-    type="radio"
-    {name}
-    class="checkbox"
-    id={value} />
-  <div class="checkbox-container" on:click={handleChange}>
-    <div class:disabled class="check-div" class:checked={group === value}>
-      <div class="tick_mark" />
-    </div>
-  </div>
-  <slot />
-</div>
-
-<style>
-  .container {
-    display: flex;
-    gap: var(--spacing-s);
-  }
-  .checkbox-container {
-    position: relative;
-    z-index: 0;
-  }
-
-  .checkbox {
-    display: none;
-  }
-
-  .check-div {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background-color: var(--grey-2);
-    cursor: pointer;
-    transition: 0.2s ease transform, 0.2s ease background-color,
-      0.2s ease box-shadow;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-
-  .check-div:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 0;
-    width: 12px;
-    height: 12px;
-    margin: 0 auto;
-    background-color: var(--background);
-    transform: translateY(-50%);
-    transition: 0.2s ease width, 0.2s ease height;
-    border-radius: 2px;
-  }
-
-  .check-div:active {
-    transform: translateY(-50%) scale(0.9);
-  }
-
-  .tick_mark {
-    position: absolute;
-    top: 50%;
-    left: 6px;
-    width: 5px;
-    height: 4px;
-    margin: 0 auto;
-    transform: rotateZ(-40deg);
-  }
-
-  .tick_mark:before,
-  .tick_mark:after {
-    content: "";
-    position: absolute;
-    background-color: var(--ink);
-    border-radius: 2px;
-    opacity: 0;
-    transition: 0.2s ease transform, 0.2s ease opacity;
-  }
-
-  .tick_mark:before {
-    left: 0;
-    bottom: 0;
-    width: 2px;
-    height: 6px;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-    transform: translateY(-68px);
-  }
-
-  .tick_mark:after {
-    left: 0;
-    bottom: 0;
-    width: 12px;
-    height: 2px;
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-    transform: translateX(78px);
-  }
-
-  .check-div.disabled:active {
-    transform: none;
-  }
-
-  .checked {
-    background-color: var(--grey-2);
-  }
-  .checked.disabled {
-    background-color: var(--grey-5);
-  }
-
-  .checked:before {
-    width: 0;
-    height: 0;
-  }
-
-  .checked .tick_mark:before,
-  .checked .tick_mark:after {
-    transform: translate(0);
-    opacity: 1;
-  }
-</style>
diff --git a/packages/bbui/src/Form/Radio.svench.svx b/packages/bbui/src/Form/Radio.svench.svx
deleted file mode 100644
index 20d3c58c99..0000000000
--- a/packages/bbui/src/Form/Radio.svench.svx
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-    import { View } from "svench";
-    import Radio from "./Radio.svelte";
-  
-    let selected = 'Cookies and cream'
-    let selected2 = 'Mint choc chip'
-  
-    let menu = [
-		'Cookies and cream',
-		'Mint choc chip',
-		'Raspberry ripple'
-	];
-  </script>
-  
-  ## Multiple checkboxes
-  Use an array and an each block to use the radio button.
-```svelte
-<script>
-    let selected = 'Cookies and cream'
-    let selected2 = 'Cookies and cream'
-
-    let menu = [
-        'Cookies and cream',
-        'Mint choc chip',
-        'Raspberry ripple'
-    ];
-</script>
-
-{#each menu as flavour}
-    <Radio name="Ice Cream Flavour" value={flavour} bind:group={selected} label={flavour} showLabel/>
-{/each}
-```
-  
-  
-  <View name="Multiple radio buttons">
-    <div class="container">
-        {#each menu as flavour}
-            <Radio name="Ice Cream Flavour"  value={flavour} bind:group={selected}>
-              <label for={flavour}>{flavour}</label>
-            </Radio>
-        {/each}
-    </div>
-  </View>
-
-  <View name="Disabled Radio inputs">
-    <div class="container">
-        {#each menu as flavour}
-            <Radio disabled name="Ice Cream Flavour"  value={flavour} bind:group={selected2}>
-              <label for={flavour}>{flavour}</label>
-            </Radio>
-        {/each}
-    </div>
-  </View>
-  
-  <style>
-    label {
-      display: grid;
-      place-items: center;
-    }
-    .container {
-      display: grid;
-      grid-gap: 10px;
-    }
-  </style>
\ No newline at end of file
diff --git a/packages/bbui/src/Form/RadioGroup.svelte b/packages/bbui/src/Form/RadioGroup.svelte
new file mode 100644
index 0000000000..227555c802
--- /dev/null
+++ b/packages/bbui/src/Form/RadioGroup.svelte
@@ -0,0 +1,37 @@
+<script>
+  import Field from "./Field.svelte"
+  import RadioGroup from "./Core/RadioGroup.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = undefined
+  export let disabled = false
+  export let labelPosition = "above"
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    dispatch("change", e.detail)
+    value = e.detail
+  }
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+</script>
+
+<Field {label} {labelPosition} {disabled} {error}>
+  <RadioGroup
+    {error}
+    {disabled}
+    {value}
+    {options}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange} />
+</Field>
diff --git a/packages/bbui/src/Form/RichText.svench.svx b/packages/bbui/src/Form/RichText.svench.svx
deleted file mode 100644
index 0a0a858866..0000000000
--- a/packages/bbui/src/Form/RichText.svench.svx
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-  import { View } from "svench";
-  import RichText from "./RichText.svelte";
-
-  const options = { placeholder: "this is not the default value!" };
-  let value;
-</script>
-
-### Rich Text Component
-
-This component uses the QuillJS library to add Rich Text editing functionality.
-
-It exposes a <code>content</code> variable that you can bind to in order to get Markdown out of the component.
-
-As well as the content you can also pass in an option object that looks like so:
-
-```js
-let options = {
-  modules: {
-   toolbar: [
-     [{ header: [1, 2, 3, false] }],
-     ['bold', 'italic', 'underline', 'strike']
-   ]
- },
-  placeholder: 'Type something...',
-  theme: 'snow'
-}
-```
-
-<View name="default">
-  <RichText bind:value />
-</View>
-
-<View name="passing in Markdown">
-  <RichText value="# This is an h1 heading!" />
-</View>
-
-<View name="passing in custom options">
-  <RichText {options} />
-</View>
diff --git a/packages/bbui/src/Form/Select.svench b/packages/bbui/src/Form/Select.svench
deleted file mode 100644
index 750d7224ca..0000000000
--- a/packages/bbui/src/Form/Select.svench
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Select from "./Select.svelte";
-  import Spacer from "../Spacer/Spacer.svelte"
-
-  const options = ["Chocolate", "Vanilla", "Strawberry Cheesecake"];
-</script>
-
-<View name="default">
-  <Select name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="secondary">
-  <Select secondary name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="outline">
-  <Select outline name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="disabled">
-  <Select disabled name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="thin">
-  <Select thin name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="extraThin">
-  <Select extraThin name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
diff --git a/packages/bbui/src/Form/Slider.svench b/packages/bbui/src/Form/Slider.svench
deleted file mode 100644
index 7ed59f78b8..0000000000
--- a/packages/bbui/src/Form/Slider.svench
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Slider from "./Slider.svelte";
-</script>
-
-<View name="default">
-  <Slider label=Quantity value="50" />
-</View>
-
-<View name="show value">
-  <Slider label="Quantity" value="50" showValue />
-</View>
-
-<View name="show range">
-  <Slider label="Quantity" value="25" showValue showRange min="0" max="100" />
-</View>
-
-<View name="custom min and max">
-  <Slider label="Quantity" value="350" showValue showRange min="50" max="500" />
-</View>
-
-<View name="custom step">
-  <Slider label="Quantity" value="25" step="25" showValue showRange min="0" max="100" />
-</View>
-
-
diff --git a/packages/bbui/src/Form/TextArea.svench b/packages/bbui/src/Form/TextArea.svench
deleted file mode 100644
index 549d365b83..0000000000
--- a/packages/bbui/src/Form/TextArea.svench
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextArea from "./TextArea.svelte";
-
-  import Button from "../Button/Button.svelte";
-</script>
-
-<View name="default">
-  <TextArea placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="disabled">
-  <TextArea disabled placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="no label">
-  <TextArea placeholder="Enter your email text" />
-</View>
-
-<View name="thin">
-  <TextArea thin placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="extraThin">
-  <TextArea extraThin placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="with buttons">
-  <TextArea edit placeholder="Enter your email text" label="Email Body" />
-</View>
diff --git a/packages/bbui/src/Form/Toggle.svench b/packages/bbui/src/Form/Toggle.svench
deleted file mode 100644
index 4e2af13021..0000000000
--- a/packages/bbui/src/Form/Toggle.svench
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Toggle from "./Toggle.svelte";
-</script>
-
-<View name="default">
-  <Toggle />
-</View>
-
-<View name="checked with text">
-  <Toggle text="Display on mobile?" />
-</View>
-
-<View name="thin">
-  <Toggle text="Display on mobile?" thin />
-</View>
-
-<View name="disabled">
-  <Toggle disabled={true} />
-</View>
-
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index a20067e349..616f313d3f 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -14,7 +14,7 @@ export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
-export { default as Radio } from "./Form/Radio.svelte"
+export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
 export { default as Home } from "./Links/Home.svelte"
 export { default as DetailSummary } from "./List/Items/DetailSummary.svelte"
@@ -49,7 +49,6 @@ export { default as Heading } from "./Typography/Heading.svelte"
 export { default as Detail } from "./Typography/Detail.svelte"
 export { default as Code } from "./Typography/Code.svelte"
 
-
 // Core form components to be used elsewhere (standard components)
 export * from "./Form/Core"
 
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 2437ca20ef..1ed65105c8 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -156,6 +156,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-1.0.2.tgz#258ea9170fb70f795edda03e38a61d93bef4487c"
   integrity sha512-JLULpyzjIY95lzlWR1yE1gv4l1K6p+scQ+edmuZZUHBzwM3pUtkvHJmUlA9TYdResUYW6Uka60VRdY6lZ8gnFQ==
 
+"@spectrum-css/radio@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.2.tgz#9c1386894920bbed604e4e174fbbd45d9d762152"
+  integrity sha512-0TDdzC9omNXnpKHEXNuuGeXdNh4x8jvTKVUqMRLb7vY4hY94hAdt6X01NBqka+jzK35HxGzpDdPADAz62yZLPQ==
+
 "@spectrum-css/table@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.2.tgz#c666743d569fef81ddc8810fac8cda53b315f8d7"
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
deleted file mode 100644
index 43abaaff67..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
+++ /dev/null
@@ -1,171 +0,0 @@
-<script>
-  import { onMount, onDestroy } from "svelte"
-  import { Modal, ModalContent } from "@budibase/bbui"
-  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
-  import { FIELDS } from "constants/backend"
-
-  const SORT_ICON_MAP = {
-    asc: "ri-arrow-down-fill",
-    desc: "ri-arrow-up-fill",
-  }
-
-  export let field
-  export let displayName
-  export let column
-  export let enableSorting = true
-  export let showColumnMenu
-  export let progressSort
-  export let editable
-
-  let menuButton
-  let sortDirection = ""
-  let modal
-  let hovered
-  let filterActive
-
-  function toggleMenu() {
-    showColumnMenu(menuButton)
-  }
-
-  function onSort(event) {
-    progressSort(event.shiftKey)
-  }
-
-  function showModal() {
-    modal.show()
-  }
-
-  function setSort() {
-    sortDirection = column.getSort()
-  }
-
-  function setFilterActive(e) {
-    filterActive = e.column.filterActive
-  }
-
-  onMount(() => {
-    column.addEventListener("sortChanged", setSort)
-    column.addEventListener("filterActiveChanged", setFilterActive)
-  })
-
-  onDestroy(() => {
-    column.removeEventListener("sortChanged", setSort)
-    column.removeEventListener("filterActiveChanged", setFilterActive)
-  })
-
-  $: type = FIELDS[field?.type?.toUpperCase()]?.name
-</script>
-
-<header
-  on:click={onSort}
-  data-cy="table-header"
-  on:mouseover={() => (hovered = true)}
-  on:mouseleave={() => (hovered = false)}>
-  <div class="column-header">
-    <div class="column-header-text">
-      <div class="column-header-name">
-        {displayName}
-        {#if field.autocolumn}<i class="auto ri-magic-fill" />{/if}
-      </div>
-      {#if type}
-        <div class="column-header-type">{type}</div>
-      {/if}
-    </div>
-    <i class={`${SORT_ICON_MAP[sortDirection]} icon`} />
-  </div>
-  <Modal bind:this={modal}>
-    <ModalContent
-      size="large"
-      showCancelButton={false}
-      showConfirmButton={false}
-      title={`Edit Column: ${field.name}`}>
-      <CreateEditColumn onClosed={modal.hide} {field} />
-    </ModalContent>
-  </Modal>
-  <section class:show={hovered || filterActive}>
-    {#if editable && hovered}
-      <span on:click|stopPropagation={showModal}>
-        <i class="ri-pencil-line icon" />
-      </span>
-    {/if}
-    <span on:click|stopPropagation={toggleMenu} bind:this={menuButton}>
-      <i class="ri-filter-line icon" class:active={filterActive} />
-    </span>
-  </section>
-</header>
-
-<style>
-  header {
-    font-family: Inter;
-    font-weight: 600;
-    display: flex;
-    justify-content: space-between;
-    height: 100%;
-    width: 100%;
-    align-items: center;
-    color: var(--ink);
-  }
-
-  section {
-    opacity: 0;
-    transition: 0.3s all;
-  }
-
-  section.show {
-    opacity: 1;
-  }
-
-  .column-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-s);
-  }
-
-  .column-header-text {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-xs);
-  }
-
-  .column-header-name {
-    white-space: normal !important;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-  }
-
-  .column-header-type {
-    font-size: var(--font-size-xs);
-    color: var(--grey-6);
-  }
-
-  .icon {
-    transition: 0.2s all;
-    font-size: var(--font-size-m);
-    font-weight: 500;
-  }
-  .auto {
-    font-size: 9px;
-    transition: none;
-    position: relative;
-    margin-left: 2px;
-    top: -3px;
-    color: var(--grey-6);
-  }
-
-  .icon:hover {
-    color: var(--blue);
-  }
-
-  .icon.active,
-  .icon:hover {
-    color: var(--blue);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/index.js b/packages/builder/src/components/backend/DataTable/TableHeader/index.js
deleted file mode 100644
index 538681a3c1..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableHeader/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import TableHeader from "./TableHeader.svelte"
-
-export default class TableHeaderWrapper {
-  constructor() {}
-
-  init(params) {
-    this.agParams = params
-    this.container = document.createElement("div")
-    this.container.style.height = "100%"
-    this.container.style.width = "100%"
-
-    this.headerComponent = new TableHeader({
-      target: this.container,
-      props: params,
-    })
-    this.gui = this.container
-  }
-
-  // can get called more than once, you should return the HTML element
-  getGui() {
-    return this.gui
-  }
-
-  // gets called when a new Column Definition has been set for this header
-  refresh(params) {
-    this.agParams = params
-    this.headerComponent = new TableHeader({
-      target: this.container,
-      props: params,
-    })
-  }
-
-  // optional method, gets called once, when component is destroyed
-  destroy() {}
-}
diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
deleted file mode 100644
index 9d4f0f10ba..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import Spinner from "components/common/Spinner.svelte"
-  import { fade } from "svelte/transition"
-  import Logo from "/assets/bb-logo.svg"
-</script>
-
-<div class="ag-overlay-loading-center loading-container">
-  <div transition:fade class="loading-overlay">
-    <img height="30" width="30" src={Logo} alt="Budibase icon" />
-    <span> Loading Your Data </span>
-    <Spinner size="12" />
-  </div>
-</div>
-
-<style>
-  .loading-overlay {
-    display: flex;
-    align-items: center;
-    font-family: var(--font-sans);
-    font-weight: 500;
-    color: var(--ink);
-  }
-
-  .loading-overlay > * {
-    margin-right: var(--spacing-m);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js
deleted file mode 100644
index 886391d537..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import LoadingOverlay from "./LoadingOverlay.svelte"
-
-export default class LoadingOverlayWrapper {
-  init(params) {
-    this.gui = document.createElement("div")
-    new LoadingOverlay({
-      target: this.gui,
-      props: {
-        params,
-      },
-    })
-  }
-
-  getGui() {
-    return this.gui
-  }
-}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 0ecd667d5a..28051c6edd 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { Input, Button, Label, Select, Toggle, Radio } from "@budibase/bbui"
+  import {
+    Input,
+    Button,
+    Label,
+    Select,
+    Toggle,
+    RadioGroup,
+  } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
   import { tables } from "stores/backend"
 
@@ -242,26 +249,15 @@
       getOptionLabel={table => table.name}
       getOptionValue={table => table._id} />
     {#if relationshipOptions && relationshipOptions.length > 0}
-      <div>
-        <Label grey extraSmall>Define the relationship</Label>
-        <div class="radio-buttons">
-          {#each relationshipOptions as { value, name }}
-            <Radio
-              disabled={originalName}
-              name="Relationship type"
-              {value}
-              bind:group={field.relationshipType}>
-              <div class="radio-button-labels">
-                <label for={value}>{name.split('→')[0]}</label>
-                <label class="rel-type-center" for={value}>→</label>
-                <label for={value}>{name.split('→')[1]}</label>
-              </div>
-            </Radio>
-          {/each}
-        </div>
-      </div>
+      <RadioGroup
+        disabled={originalName}
+        label="Define the relationship"
+        bind:value={field.relationshipType}
+        options={relationshipOptions}
+        getOptionLabel={option => option.name}
+        getOptionValue={option => option.value} />
     {/if}
-    <Input label={`Column Name in Other Table`} bind:value={field.fieldName} />
+    <Input label={`Column name in other table`} bind:value={field.fieldName} />
   {:else if field.type === AUTO_COL}
     <Select
       label="Auto Column Type"
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index 26db4aa96d..95b672b63a 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -24,7 +24,7 @@
       value={$fieldState.value}
       disabled={$fieldState.disabled}
       error={$fieldState.error}
-      fieldId={$fieldState.fieldId}
+      id={$fieldState.fieldId}
       on:change={e => fieldApi.setValue(e.detail)}
       {text} />
   {/if}
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index c3889fe831..29ab4be584 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -23,7 +23,7 @@
   {#if fieldState}
     <CoreSelect
       value={$fieldState.value}
-      fieldId={$fieldState.fieldId}
+      id={$fieldState.fieldId}
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       options={fieldSchema?.constraints?.inclusion ?? []}
diff --git a/packages/standard-components/src/forms/Picker.svelte b/packages/standard-components/src/forms/Picker.svelte
deleted file mode 100644
index de6fb44dcb..0000000000
--- a/packages/standard-components/src/forms/Picker.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-  import "@spectrum-css/picker/dist/index-vars.css"
-  import "@spectrum-css/popover/dist/index-vars.css"
-  import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
-
-  export let fieldState
-  export let fieldText = ""
-  export let isPlaceholder = false
-  export let placeholderOption = null
-  export let options = []
-  export let isOptionSelected = () => false
-  export let onSelectOption = () => {}
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let open = false
-</script>
-
-{#if fieldState}
-  <button
-    id={$fieldState.fieldId}
-    class="spectrum-Picker spectrum-Picker--sizeM"
-    disabled={$fieldState.disabled}
-    class:is-invalid={!$fieldState.valid}
-    class:is-open={open}
-    aria-haspopup="listbox"
-    on:click={() => (open = true)}>
-    <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
-      {fieldText}
-    </span>
-    {#if !$fieldState.valid}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-        aria-label="Folder">
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
-      focusable="false"
-      aria-hidden="true">
-      <use xlink:href="#spectrum-css-icon-Chevron100" />
-    </svg>
-  </button>
-  {#if open}
-    <div class="overlay" on:mousedown|self={() => (open = false)} />
-    <div
-      transition:fly={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
-      <ul class="spectrum-Menu" role="listbox">
-        {#if placeholderOption}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={isPlaceholder}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => onSelectOption(null)}>
-            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/if}
-        {#each options as option}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={isOptionSelected(getOptionValue(option))}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => onSelectOption(getOptionValue(option))}>
-            <span
-              class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  {/if}
-{/if}
-
-<style>
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-  }
-  .spectrum-Popover {
-    max-height: 240px;
-    width: 100%;
-    z-index: 999;
-  }
-  .spectrum-Picker {
-    width: 100%;
-  }
-</style>
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index 85643be227..2dd884f89a 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -75,7 +75,7 @@
       {options}
       value={multiselect ? multiValue : singleValue}
       on:change={multiselect ? multiHandler : singleHandler}
-      fieldId={$fieldState.fieldId}
+      id={$fieldState.fieldId}
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       getOptionLabel={getDisplayName}