Merge branch 'master' into event-panel

2020-09-09 15:59:57 +01:00 · 2020-09-09 15:59:57 +01:00 · e917d7467a
parent 349f350ee4 2cee41eb11
commit e917d7467a
80 changed files with 1270 additions and 751 deletions
--- a/.github/workflows/ecs_deploy.yml
+++ b/.github/workflows/ecs_deploy.yml
@ -0,0 +1,85 @@
+# This workflow will build and push a new container image to Amazon ECR,
+# and then will deploy a new task definition to Amazon ECS, when a release is created
+#
+# To use this workflow, you will need to complete the following set-up steps:
+#
+# 1. Create an ECR repository to store your images.
+#    For example: `aws ecr create-repository --repository-name my-ecr-repo --region us-east-2`.
+#    Replace the value of `ECR_REPOSITORY` in the workflow below with your repository's name.
+#    Replace the value of `aws-region` in the workflow below with your repository's region.
+#
+# 2. Create an ECS task definition, an ECS cluster, and an ECS service.
+#    For example, follow the Getting Started guide on the ECS console:
+#      https://us-east-2.console.aws.amazon.com/ecs/home?region=us-east-2#/firstRun
+#    Replace the values for `service` and `cluster` in the workflow below with your service and cluster names.
+#
+# 3. Store your ECS task definition as a JSON file in your repository.
+#    The format should follow the output of `aws ecs register-task-definition --generate-cli-skeleton`.
+#    Replace the value of `task-definition` in the workflow below with your JSON file's name.
+#    Replace the value of `container-name` in the workflow below with the name of the container
+#    in the `containerDefinitions` section of the task definition.
+#
+# 4. Store an IAM user access key in GitHub Actions secrets named `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`.
+#    See the documentation for each action used below for the recommended IAM policies for this IAM user,
+#    and best practices on handling the access key credentials.
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+name: Deploy to Amazon ECS
+
+jobs:
+  deploy:
+    name: deploy
+    runs-on: ubuntu-16.04
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: eu-west-1
+
+    - name: Download task definition
+      run: |
+        aws ecs describe-task-definition --task-definition ProdAppServerStackprodbudiapplbfargateserviceprodbudiappserverfargatetaskdefinition2EF7F1E7 --query taskDefinition > task-definition.json
+      
+    - name: Login to Amazon ECR
+      id: login-ecr
+      uses: aws-actions/amazon-ecr-login@v1
+
+    - name: Build, tag, and push image to Amazon ECR
+      id: build-image
+      env:
+        ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+        ECR_REPOSITORY: prod-budi-app-server
+        IMAGE_TAG: ${{ github.sha }}
+      run: |
+        # Build a docker container and
+        # push it to ECR so that it can
+        # be deployed to ECS
+        cd packages/server
+        docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+        docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
+        echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"
+    - name: Fill in the new image ID in the Amazon ECS task definition
+      id: task-def
+      uses: aws-actions/amazon-ecs-render-task-definition@v1
+      with:
+        task-definition: task-definition.json
+        container-name: prod-budi-app-server 
+        image: ${{ steps.build-image.outputs.image }}
+
+    - name: Deploy Amazon ECS task definition
+      uses: aws-actions/amazon-ecs-deploy-task-definition@v1
+      with:
+        task-definition: ${{ steps.task-def.outputs.task-definition }}
+        service: prod-budi-app-server-service
+        cluster: prod-budi-app-server
+        wait-for-service-stability: true
--- a/.gitignore
+++ b/.gitignore
@ -2,6 +2,7 @@ builder/*
 .data/
 .temp/
 packages/server/runtime_apps/
+.idea/

 # Logs
 logs
--- a/AUTHORS.md
+++ b/AUTHORS.md
@ -5,3 +5,5 @@ Contributors
 * Daniel Loudon - [@danbudi](https://github.com/marblekirby)
 * Joe  - [@joebudi](https://github.com/joebudi)
 * Martin McKeaveney - [@shogunpurple](https://github.com/shogunpurple)
+* Andrew Kingston - [@aptkingston](https://github.com/aptkingston)
+* Michael Drury - [@mike12345567](https://github.com/mike12345567)
--- a/packages/builder/cypress/integration/createBinding.spec.js
+++ b/packages/builder/cypress/integration/createBinding.spec.js
@ -0,0 +1,18 @@
+xcontext('Create a Binding', () => {
+    before(() => {
+        cy.visit('localhost:4001/_builder')
+        cy.createApp('Binding App', 'Binding App Description')
+        cy.navigateToFrontend()
+    })
+
+    it('add an input binding', () => {
+        cy.get(".nav-items-container").contains('Home').click()
+        cy.contains("Add").click()
+        cy.get("[data-cy=Input]").click()
+        cy.get("[data-cy=Textfield]").click()
+        cy.contains("Heading").click()
+        cy.get("[data-cy=text-binding-button]").click()
+        cy.get("[data-cy=binding-dropdown-modal]").contains('Input 1').click()
+        cy.get("[data-cy=binding-dropdown-modal] textarea").should('have.value', 'Home{{ Input 1 }}')
+    })
+})
--- a/packages/builder/cypress/integration/createUser.spec.js
+++ b/packages/builder/cypress/integration/createUser.spec.js
@ -9,7 +9,7 @@ context('Create a User', () => {

    // https://on.cypress.io/interacting-with-elements
    it('should create a user', () => {
-        cy.createUser('bbuser', 'test', 'ADMIN')
+        cy.createUser('bbuser', 'test', 'POWER_USER')

        // Check to make sure user was created!
        cy.get("input[disabled]").should('have.value', 'bbuser')
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@ -54,7 +54,7 @@ context('Create a View', () => {
        expect($headers).to.have.length(7)
        const headers = $headers.map((i, header) => Cypress.$(header).text())
        expect(headers.get()).to.deep.eq([
-          "group",
+          "field",
          "sum",
          "min",
          "max",
@ -66,7 +66,7 @@ context('Create a View', () => {
      cy.get("tbody td").should(($values) => {
        const values = $values.map((i, value) => Cypress.$(value).text())
        expect(values.get()).to.deep.eq([
-          "null",
+          "age",
          "155",
          "20",
          "49",
--- a/packages/builder/cypress/integration/createWorkflow.spec.js
+++ b/packages/builder/cypress/integration/createWorkflow.spec.js
@ -1,4 +1,4 @@
-xcontext('Create a workflow', () => {
+context('Create a workflow', () => {

    before(() => {
        cy.server()
@ -9,7 +9,7 @@ xcontext('Create a workflow', () => {

    // https://on.cypress.io/interacting-with-elements
    it('should create a workflow', () => {
-        cy.createTable('dog', 'name', 'age')
+        cy.createTestTableWithData()

        cy.contains('workflow').click()
        cy.contains('Create New Workflow').click()
@ -23,21 +23,23 @@ xcontext('Create a workflow', () => {

        // Create action
        cy.get('[data-cy=SAVE_RECORD]').click()
-        cy.get(':nth-child(2) > .budibase__input').type('goodboy')
-        cy.get(':nth-child(3) > .budibase__input').type('11')
+        cy.get('.container input').first().type('goodboy')
+        cy.get('.container input').eq(1).type('11')

        // Save
        cy.contains('Save Workflow').click()

        // Activate Workflow
        cy.get('[data-cy=activate-workflow]').click()
-
+        cy.contains("Add Record").should("be.visible")
+        cy.get(".stop-button.highlighted").should("be.visible")
    })
-    xit('should add record when a new record is added', () => {
+
+    it('should add record when a new record is added', () => {
        cy.contains('backend').click()

-        cy.addRecord('bob', '15')
-
+        cy.addRecord(["Rover", 15])
+        cy.reload()
        cy.contains('goodboy').should('have.text', 'goodboy')

    })
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -52,17 +52,22 @@ Cypress.Commands.add("createApp", name => {
        .type("test")
      cy.contains("Submit").click()
      cy.contains("Create New Table", {
-        timeout: 10000,
+        timeout: 20000,
      }).should("be.visible")
    })
 })

+Cypress.Commands.add("createTestTableWithData", () => {
+  cy.createTable("dog")
+  cy.addColumn("dog", "name", "Plain Text")
+  cy.addColumn("dog", "age", "Number")
+})
+
 Cypress.Commands.add("createTable", tableName => {
  // Enter model name
  cy.contains("Create New Table").click()
  cy.get("[placeholder='Table Name']").type(tableName)

-  // Add 'name' field
  cy.contains("Save").click()
  cy.contains(tableName).should("be.visible")
 })
@ -84,7 +89,7 @@ Cypress.Commands.add("addRecord", values => {
  cy.contains("Create New Row").click()

  for (let i = 0; i < values.length; i++) {
-    cy.get("input")
+    cy.get(".actions input")
      .eq(i)
      .type(values[i])
  }
@ -93,7 +98,7 @@ Cypress.Commands.add("addRecord", values => {
  cy.contains("Save").click()
 })

-Cypress.Commands.add("createUser", (username, password) => {
+Cypress.Commands.add("createUser", (username, password, accessLevel) => {
  // Create User
  cy.get(".toprightnav > .settings").click()
  cy.contains("Users").click()
@ -104,9 +109,12 @@ Cypress.Commands.add("createUser", (username, password) => {
  cy.get("[name=Password]")
    .first()
    .type(password)
+  cy.get("select")
+    .first()
+    .select(accessLevel)

  // Save
-  cy.get(".create-button").click()
+  cy.get(".create-button > button").click()
 })

 Cypress.Commands.add("addHeadlineComponent", text => {
@ -135,7 +143,7 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
  if (route) {
    cy.get("[data-cy=new-screen-dialog] input:last").type(route)
  }
-  cy.get(".uk-modal-footer").within(() => {
+  cy.get("[data-cy=create-screen-footer]").within(() => {
    cy.contains("Create Screen").click()
  })
  cy.get(".nav-items-container").within(() => {
--- a/packages/builder/cypress/support/cookies.js
+++ b/packages/builder/cypress/support/cookies.js
@ -1,3 +1,3 @@
 Cypress.Cookies.defaults({
-  whitelist: "builder:token",
+  preserve: "builder:token",
 })
--- a/packages/builder/cypress/videos/createApp.spec.js.mp4
+++ b/packages/builder/cypress/videos/createApp.spec.js.mp4
--- a/packages/builder/cypress/videos/createBinding.spec.js.mp4
+++ b/packages/builder/cypress/videos/createBinding.spec.js.mp4
--- a/packages/builder/cypress/videos/createComponents.spec.js.mp4
+++ b/packages/builder/cypress/videos/createComponents.spec.js.mp4
--- a/packages/builder/cypress/videos/createTable.spec.js.mp4
+++ b/packages/builder/cypress/videos/createTable.spec.js.mp4
--- a/packages/builder/cypress/videos/createUser.spec.js.mp4
+++ b/packages/builder/cypress/videos/createUser.spec.js.mp4
--- a/packages/builder/cypress/videos/createView.spec.js.mp4
+++ b/packages/builder/cypress/videos/createView.spec.js.mp4
--- a/packages/builder/cypress/videos/createWorkflow.spec.js.mp4
+++ b/packages/builder/cypress/videos/createWorkflow.spec.js.mp4
--- a/packages/builder/cypress/videos/screens.spec.js.mp4
+++ b/packages/builder/cypress/videos/screens.spec.js.mp4
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -57,10 +57,13 @@
  "eslintConfig": {
    "extends": [
      "plugin:cypress/recommended"
-    ]
+    ],
+    "rules": {
+      "cypress/no-unnecessary-waiting": "off"
+    }
  },
  "dependencies": {
-    "@budibase/bbui": "^1.28.2",
+    "@budibase/bbui": "^1.31.0",
    "@budibase/client": "^0.1.19",
    "@budibase/colorpicker": "^1.0.1",
    "@sentry/browser": "5.19.1",
@ -75,9 +78,9 @@
    "mustache": "^4.0.1",
    "posthog-js": "1.3.1",
    "shortid": "^2.2.15",
+    "svelte-loading-spinners": "^0.1.1",
    "svelte-portal": "^0.1.0",
    "svelte-simple-modal": "^0.4.2",
-    "uikit": "^3.1.7",
    "yup": "^0.29.2"
  },
  "devDependencies": {
@ -91,7 +94,7 @@
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/svelte": "^3.0.0",
    "babel-jest": "^24.8.0",
-    "cypress": "^4.8.0",
+    "cypress": "^5.1.0",
    "cypress-terminal-report": "^1.4.1",
    "eslint-plugin-cypress": "^2.11.1",
    "identity-obj-proxy": "^3.0.0",
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@ -85,11 +85,6 @@
     box-sizing: border-box; 
 }

-.uk-text-right {
-    display: flex;
-    justify-content: flex-start;
-}
-
 .preview-pane {
    grid-column: 2;
    margin: 80px 60px;
@ -154,3 +149,13 @@

 .bb-table td > :last-child { margin-bottom: 0; }

+.bb__alert {
+    position: relative;
+    margin-bottom: var(--spacing-m);
+    padding: var(--spacing-l);
+}
+
+.bb__alert--danger {
+    background: #fef4f6;
+    color: #f0506e;
+}
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@ -104,6 +104,10 @@ const setPackage = (store, initial) => async pkg => {
  initial.pages = pkg.pages
  initial.hasAppPackage = true
  initial.screens = values(pkg.screens)
+  initial.allScreens = [
+    ...Object.values(main_screens),
+    ...Object.values(unauth_screens),
+  ]
  initial.builtins = [getBuiltin("##builtin/screenslot")]
  initial.appInstances = pkg.application.instances
  initial.appId = pkg.application._id
@ -132,6 +136,7 @@ const _saveScreen = async (store, s, screen) => {
        innerState.pages[s.currentPageName]._screens = screens
        innerState.screens = screens
        innerState.currentPreviewItem = screen
+        innerState.allScreens = [...innerState.allScreens, screen]
        const safeProps = makePropsSafe(
          innerState.components[screen.props._component],
          screen.props
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@ -1,8 +1,5 @@
 <script>
-  import Button from "./Button.svelte"
-  import ActionButton from "./ActionButton.svelte"
-  import ButtonGroup from "./ButtonGroup.svelte"
-  import UIkit from "uikit"
+  import { Modal, Button, Heading, Spacer } from "@budibase/bbui"

  export let title = ""
  export let body = ""
@ -12,16 +9,14 @@
  export let onCancel = () => {}

  export const show = () => {
-    uiKitModal.hide()
-    uiKitModal.show()
+    theModal.show()
  }

  export const hide = () => {
-    uiKitModal.hide()
+    theModal.hide()
  }

  let theModal
-  $: uiKitModal = theModal && UIkit.modal(theModal)

  const cancel = () => {
    hide()
@ -36,31 +31,27 @@
  }
 </script>

-<div id={title} uk-modal bind:this={theModal}>
-  <div class="uk-modal-dialog">
-    <button class="uk-modal-close-default" type="button" uk-close />
-    <div class="uk-modal-header">
-      <h4 class="budibase__title--4">{title}</h4>
-    </div>
-    <div class="uk-modal-body">
+<Modal id={title} bind:this={theModal}>
+  <h2>{title}</h2>
+  <Spacer extraLarge />
  <slot class="rows">{body}</slot>
+  <Spacer extraLarge />
+  <div class="modal-footer">
+    <Button red wide on:click={ok}>{okText}</Button>
+    <Button secondary wide on:click={cancel}>{cancelText}</Button>
  </div>
-    <div class="uk-modal-footer">
-      <ButtonGroup>
-        <ActionButton cancel on:click={cancel}>{cancelText}</ActionButton>
-        <ActionButton primary on:click={ok}>{okText}</ActionButton>
-      </ButtonGroup>
-    </div>
-  </div>
-</div>
+</Modal>

 <style>
-  .uk-modal-footer {
-    background: var(--grey-1);
+  h2 {
+    font-size: var(--font-size-xl);
+    margin: 0;
+    font-family: var(--font-sans);
+    font-weight: 600;
  }

-  .uk-modal-dialog {
-    width: 400px;
-    border-radius: 5px;
+  .modal-footer {
+    display: grid;
+    grid-gap: var(--spacing-s);
  }
 </style>
--- a/packages/builder/src/components/common/DatePicker.svelte
+++ b/packages/builder/src/components/common/DatePicker.svelte
@ -2,11 +2,10 @@
  import flatpickr from "flatpickr"
  import "flatpickr/dist/flatpickr.css"
  import { onMount } from "svelte"
+  import { Label, Input } from "@budibase/bbui"

  export let value
  export let label
-  export let width = "medium"
-  export let size = "small"

  let input
  let fpInstance
@ -25,10 +24,9 @@
 </script>

 <div class="bb-margin-m">
-  <label class="uk-form-label">{label}</label>
-  <div class="uk-form-controls">
-    <input
-      class="uk-input uk-form-width-{width} uk-form-{size}"
-      bind:this={input} />
-  </div>
+  <Label small forAttr={'datepicker-label'}>{label}</Label>
+  <Input thin bind:this={input} />
 </div>
+
+<!-- TODO: Verify DatePicker Input works as expected when datetime property used again
+in CreateEditColumn -->
--- a/packages/builder/src/components/common/ErrorsBox.svelte
+++ b/packages/builder/src/components/common/ErrorsBox.svelte
@ -5,7 +5,7 @@
 </script>

 {#if hasErrors}
-  <div uk-alert class="uk-alert-danger">
+  <div class="bb__alert bb__alert--danger">
    {#each errors as error}
      <div>{error.dataPath} {error.message}</div>
    {/each}
--- a/packages/builder/src/components/common/IconButton.svelte
+++ b/packages/builder/src/components/common/IconButton.svelte
@ -1,59 +0,0 @@
-<script>
-  import getIcon from "./icon"
-
-  export let size = 18
-  export let icon = ""
-  export let style = ""
-  export let color = "var(--ink)"
-  export let hoverColor = "var(--secondary75)"
-  export let attributes = {}
-
-  let currentAttributes = []
-  const addAttributes = (node, attributes) => {
-    const add = _attributes => {
-      const attrs = []
-      for (let attr in _attributes) {
-        node.setAttribute(attr, _attributes[attr])
-        attrs.push("uk-toggle")
-      }
-      currentAttributes = attrs
-    }
-
-    add(attributes)
-
-    return {
-      // should implement update method
-      update(attributes) {
-        for (let attr of currentAttributes) {
-          node.removeAttribute(attr)
-        }
-        add(attributes)
-      },
-      destroy() {},
-    }
-  }
-</script>
-
-<button
-  style="{style}{style ? ';' : ''} color:{color}; --hovercolor:{hoverColor}"
-  on:click
-  use:addAttributes={attributes}>
-  {@html getIcon(icon, size)}
-</button>
-
-<style>
-  button {
-    border-style: none;
-    background-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    outline: none;
-  }
-
-  button:hover {
-    color: var(--hovercolor);
-  }
-
-  button:active {
-    outline: none;
-  }
-</style>
--- a/packages/builder/src/components/common/Modal.svelte
+++ b/packages/builder/src/components/common/Modal.svelte
@ -1,59 +0,0 @@
-<script>
-  import UIkit from "uikit"
-  import ActionButton from "../common/ActionButton.svelte"
-
-  export let isOpen = false
-  export let onClosed
-  export let id = ""
-  export let title
-
-  let ukModal
-  let listenerAdded = false
-
-  $: {
-    if (ukModal && !listenerAdded) {
-      listenerAdded = true
-      ukModal.addEventListener("hidden", onClosed)
-    }
-
-    if (ukModal) {
-      if (isOpen) {
-        UIkit.modal(ukModal).show()
-      } else {
-        UIkit.modal(ukModal).hide()
-      }
-    }
-  }
-</script>
-
-<div bind:this={ukModal} uk-modal {id}>
-  {#if isOpen}
-    <div class="uk-modal-dialog" uk-overflow-auto>
-      {#if title}
-        <div class="uk-modal-header">
-          <h4 class="budibase__title--4">{title}</h4>
-        </div>
-      {/if}
-      <div class="uk-modal-body">
-        {#if onClosed}
-          <button class="uk-modal-close-default" type="button" uk-close />
-        {/if}
-        <slot />
-      </div>
-      <div class="uk-modal-footer">
-        <slot name="footer" />
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .uk-modal-dialog {
-    border-radius: 0.3rem;
-    width: 520px;
-    height: 80vh;
-    display: flex;
-    flex-direction: column;
-    padding: 40px;
-  }
-</style>
--- a/packages/builder/src/components/common/Spinner.svelte
+++ b/packages/builder/src/components/common/Spinner.svelte
@ -1,5 +1,5 @@
 <script>
-  export let ratio = "4.5"
+  import { Circle } from "svelte-loading-spinners"
 </script>

-<span uk-spinner={`ratio: ${ratio}`} />
+<Circle size="60" color="#000000" unit="px" />
--- a/packages/builder/src/components/common/ValuesList.svelte
+++ b/packages/builder/src/components/common/ValuesList.svelte
@ -17,9 +17,9 @@

 <div class="margin">
  <label class="label">{label}</label>
-  <div class="uk-form-controls">
+
  <textarea value={valuesText} on:change={inputChanged} />
-  </div>
+
 </div>

 <style>
--- a/packages/builder/src/components/database/DataTable/Table.svelte
+++ b/packages/builder/src/components/database/DataTable/Table.svelte
@ -25,6 +25,7 @@
  let currentPage = 0

  $: columns = schema ? Object.keys(schema) : []
+
  $: paginatedData =
    data && data.length
      ? data.slice(
--- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
@ -32,7 +32,10 @@
  async function fetchViewData(name, field, groupBy) {
    const params = new URLSearchParams()

-    if (field) params.set("stats", true)
+    if (field) {
+      params.set("field", field)
+      params.set("stats", true)
+    }
    if (groupBy) params.set("group", groupBy)

    let QUERY_VIEW_URL = `/api/views/${name}?${params}`
--- a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
@ -45,7 +45,7 @@

 <div class="actions">
  <ErrorsBox {errors} />
-  <form on:submit|preventDefault class="uk-form-stacked">
+  <form on:submit|preventDefault>
    {#each modelSchema as [key, meta]}
      <div class="bb-margin-xl">
        {#if meta.type === 'link'}
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@ -1,31 +1,63 @@
 <script>
-  import { TextArea } from "@budibase/bbui"
+  import groupBy from "lodash/fp/groupBy"
+  import { Button, TextArea, Label, Body } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"

  const dispatch = createEventDispatcher()
  export let bindableProperties
+  console.log("Bindable Props: ", bindableProperties)
  export let value = ""
+  export let close

  function addToText(readableBinding) {
    value = value + `{{ ${readableBinding} }}`
  }
+  let originalValue = value

  $: dispatch("update", value)
+
+  function cancel() {
+    dispatch("update", originalValue)
+    close()
+  }
+
+  $: ({ instance, context } = groupBy("type", bindableProperties))
 </script>

-<div class="container">
-  <div class="text">
-    <TextArea
-      bind:value
-      placeholder=""
-      label="Select bindable properties from the right." />
-  </div>
+<div class="container" data-cy="binding-dropdown-modal">
  <div class="list">
+    <Label size="l" color="dark">Objects</Label>
+    {#if context}
+      <Label size="s" color="dark">Table</Label>
      <ul>
-      {#each bindableProperties as { readableBinding }}
+        {#each context as { readableBinding }}
          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
        {/each}
      </ul>
+    {/if}
+    {#if instance}
+      <Label size="s" color="dark">Components</Label>
+      <ul>
+        {#each instance as { readableBinding }}
+          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+  <div class="text">
+    <Label size="l" color="dark">Data binding</Label>
+    <Body size="s" color="dark">
+      Binding connects one piece of data to another and makes it dynamic. Click
+      the objects on the left, to add them to the textbox.
+    </Body>
+    <TextArea bind:value placeholder="" />
+    <div class="controls">
+      <a href="#">
+        <Body size="s" color="light">Learn more about binding</Body>
+      </a>
+      <Button on:click={cancel} secondary>Cancel</Button>
+      <Button on:click={close} primary>Done</Button>
+    </div>
  </div>
 </div>

@ -34,13 +66,27 @@
    display: grid;
    grid-template-columns: auto auto;
  }
+  .list,
  .text {
-    padding: var(--spacing-s) 0 var(--spacing-s) var(--spacing-s);
-    width: 600px;
+    padding: var(--spacing-m);
+  }
+  .controls {
+    margin-top: var(--spacing-m);
    display: grid;
+    align-items: center;
+    grid-gap: var(--spacing-l);
+    grid-template-columns: 1fr auto auto;
  }
  .list {
    width: 150px;
+    border-right: 1.5px solid var(--grey-4);
+  }
+  .text {
+    width: 600px;
+    display: grid;
+  }
+  .text :global(p) {
+    margin: 0;
  }
  ul {
    list-style: none;
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@ -4,7 +4,6 @@
  import { getComponentDefinition } from "builderStore/storeUtils"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { last, cloneDeep } from "lodash/fp"
-  import UIkit from "uikit"
  import {
    selectComponent,
    getParent,
@ -13,20 +12,14 @@
    regenerateCssForCurrentScreen,
  } from "builderStore/storeUtils"
  import { uuid } from "builderStore/uuid"
+  import { DropdownMenu } from "@budibase/bbui"

  export let component

  let confirmDeleteDialog
-  let dropdownEl
+  let dropdown
+  let anchor

-  $: dropdown = UIkit.dropdown(dropdownEl, {
-    mode: "click",
-    offset: 0,
-    pos: "bottom-right",
-    "delay-hide": 0,
-    animation: false,
-  })
-  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
  $: noChildrenAllowed =
    !component || !getComponentDefinition($store, component._component).children
  $: noPaste = !$store.componentToPaste
@ -115,11 +108,19 @@
  }
 </script>

-<div class="root boundary" on:click|stopPropagation={() => {}}>
-  <button>
+<div bind:this={anchor} on:click|stopPropagation={() => {}}>
+  <button on:click={dropdown.show}>
    <MoreIcon />
  </button>
-  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
+</div>
+<DropdownMenu
+  class="menu"
+  bind:this={dropdown}
+  on:click={hideDropdown}
+  width="170px"
+  {anchor}
+  align="left">
+  <ul>
    <li class="item" on:click={() => confirmDeleteDialog.show()}>
      <i class="icon ri-delete-bin-2-line" />
      Delete
@ -167,7 +168,7 @@
      Paste inside
    </li>
  </ul>
-</div>
+</DropdownMenu>

 <ConfirmDialog
  bind:this={confirmDeleteDialog}
@ -177,36 +178,39 @@
  onOk={deleteComponent} />

 <style>
-  .root {
-    overflow: hidden;
-    z-index: 9;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
  }

-  .root button {
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  button {
    border-style: none;
    border-radius: 2px;
-    padding: 5px;
+    padding: 0;
    background: transparent;
    cursor: pointer;
    color: var(--ink);
    outline: none;
  }

-  .menu {
-    z-index: 100000;
-    overflow: visible;
-    padding: 12px 0px;
-    border-radius: 5px;
+  li:hover {
+    background-color: var(--grey-2);
  }

-  .menu li {
-    border-style: none;
-    background-color: transparent;
-    list-style-type: none;
-    padding: 4px 16px;
-    margin: 0;
-    width: 100%;
-    box-sizing: border-box;
+  li:active {
+    color: var(--blue);
  }

  .item {
@ -219,16 +223,6 @@
    margin-right: 8px;
  }

-  .menu li:not(.disabled) {
-    cursor: pointer;
-    color: var(--grey-7);
-  }
-
-  .menu li:not(.disabled):hover {
-    color: var(--ink);
-    background-color: var(--grey-1);
-  }
-
  .disabled {
    color: var(--grey-4);
    cursor: default;
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@ -2,7 +2,6 @@
  import { setContext, onMount } from "svelte"

  import { store } from "builderStore"
-  import IconButton from "components/common/IconButton.svelte"
  import {
    LayoutIcon,
    PaintIcon,
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@ -109,10 +109,10 @@

  .dropdown-menu {
    display: none;
-    height: 24px;
-    width: 24px;
    color: var(--ink);
-    padding: 0px 5px;
+    padding: 0 5px;
+    width: 24px;
+    height: 24px;
    border-style: none;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@ -204,10 +204,10 @@

  .actions {
    display: none;
-    height: 24px;
-    width: 24px;
    color: var(--ink);
-    padding: 0px 5px;
+    padding: 0 5px;
+    width: 24px;
+    height: 24px;
    border-style: none;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@ -13,7 +13,6 @@
  } from "lodash/fp"
  import { pipe } from "components/common/core"
  import Checkbox from "components/common/Checkbox.svelte"
-  import IconButton from "components/common/IconButton.svelte"
  import EventEditorModal from "./EventEditorModal.svelte"

  import { PencilIcon } from "components/common/Icons"
@ -67,7 +66,7 @@
 </button>

 <div class="root">
-  <form on:submit|preventDefault class="uk-form-stacked form-root">
+  <form on:submit|preventDefault class="form-root">
    {#each events as event, index}
      {#if event.handlers.length > 0}
        <div
--- a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
@ -1,6 +1,5 @@
 <script>
  import { Button, Select } from "@budibase/bbui"
-  import IconButton from "components/common/IconButton.svelte"
  import StateBindingCascader from "./StateBindingCascader.svelte"
  import { find, map, keys, reduce, keyBy } from "lodash/fp"
  import { pipe } from "components/common/core"
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@ -1,6 +1,5 @@
 <script>
  import { Input, Select } from "@budibase/bbui"
-  import IconButton from "components/common/IconButton.svelte"
  import { find, map, keys, reduce, keyBy } from "lodash/fp"
  import { pipe } from "components/common/core"
  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@ -29,6 +28,13 @@
        <option value={workflow._id}>{workflow.name}</option>
      {/each}
    </Select>
+  {:else if parameter.name === 'url'}
+    <Select editable on:change bind:value={parameter.value}>
+      <option value="" />
+      {#each $store.allScreens as screen}
+        <option value={screen.route}>{screen.props._instanceName}</option>
+      {/each}
+    </Select>
  {:else}
    <Input
      name={parameter.name}
--- a/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
@ -0,0 +1,25 @@
+<script>
+  import OptionSelect from "./OptionSelect.svelte"
+  import { backendUiStore } from "builderStore"
+  import { onMount } from "svelte"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let onChange = (val = {})
+
+  const models = $backendUiStore.models
+
+  let options = []
+
+  $: model = componentInstance.datasource
+    ? models.find(m => m._id === componentInstance.datasource.modelId)
+    : null
+
+  $: if (model) {
+    options = componentInstance.datasource.isModel
+      ? Object.keys(model.schema)
+      : Object.keys(model.views[componentInstance.datasource.name].schema)
+  }
+</script>
+
+<OptionSelect {value} {onChange} {options} />
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@ -0,0 +1,110 @@
+<script>
+  import { Button, Icon, DropdownMenu } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { backendUiStore } from "builderStore"
+
+  const dispatch = createEventDispatcher()
+  let anchor, dropdown
+
+  export let value = {}
+
+  function handleSelected(selected) {
+    dispatch("change", selected)
+    dropdown.hide()
+  }
+
+  const models = $backendUiStore.models.map(m => ({
+    label: m.name,
+    name: `all_${m._id}`,
+    modelId: m._id,
+    isModel: true,
+  }))
+
+  const views = $backendUiStore.models.reduce((acc, cur) => {
+    let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
+      label: key,
+      name: key,
+      ...value,
+    }))
+    return [...acc, ...viewsArr]
+  }, [])
+</script>
+
+<div bind:this={anchor}>
+  <Button secondary small on:click={dropdown.show}>
+    <span>{value.label ? value.label : 'Model / View'}</span>
+    <Icon name="arrowdown" />
+  </Button>
+</div>
+<DropdownMenu
+  bind:this={dropdown}
+  width="175px"
+  borderColor="#d1d1d1ff"
+  {anchor}
+  align="right">
+  <div class="model-view-container">
+    <p>Tables</p>
+
+    <ul>
+      {#each models as model}
+        <li
+          class:selected={value === model}
+          on:click={() => handleSelected(model)}>
+          {model.label}
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <p>Views</p>
+    <ul>
+      {#each views as view}
+        <li
+          class:selected={value === view}
+          on:click={() => handleSelected(view)}>
+          {view.label}
+        </li>
+      {/each}
+    </ul>
+  </div>
+</DropdownMenu>
+
+<style>
+  .model-view-container {
+    padding-bottom: 8px;
+    font: var(--smallheavybodytext);
+  }
+
+  p {
+    color: var(--grey-7);
+    margin: 0px;
+    padding: 8px;
+  }
+
+  span {
+    text-transform: capitalize;
+  }
+
+  hr {
+    margin: 10px 0px 5px 0px;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+  }
+
+  li {
+    cursor: pointer;
+    margin: 0px;
+    padding: 5px 8px;
+  }
+
+  .selected {
+    background-color: var(--grey-4);
+  }
+
+  li:hover {
+    background-color: var(--grey-4);
+  }
+</style>
--- a/packages/builder/src/components/userInterface/NewScreen.svelte
+++ b/packages/builder/src/components/userInterface/NewScreen.svelte
@ -1,14 +1,9 @@
 <script>
  import { store } from "builderStore"
-  import Button from "components/common/Button.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { pipe } from "components/common/core"
-  import UIkit from "uikit"
  import { isRootComponent } from "./pagesParsing/searchComponents"
  import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { Input, Select } from "@budibase/bbui"
+  import { Input, Select, Modal, Button, Spacer } from "@budibase/bbui"

  import { find, filter, some, map, includes } from "lodash/fp"
  import { assign } from "lodash"
@ -72,12 +67,9 @@
  }
 </script>

-<ConfirmDialog
-  bind:this={dialog}
-  title="New Screen"
-  onCancel={cancel}
-  onOk={save}
-  okText="Create Screen">
+<Modal bind:this={dialog} minWidth="500px">
+  <h2>New Screen</h2>
+  <Spacer extraLarge />

  <div data-cy="new-screen-dialog">
    <div class="bb-margin-xl">
@ -102,4 +94,24 @@
    </div>
  </div>

-</ConfirmDialog>
+  <Spacer extraLarge />
+
+  <div data-cy="create-screen-footer" class="modal-footer">
+    <Button secondary medium on:click={cancel}>Cancel</Button>
+    <Button blue medium on:click={save}>Create Screen</Button>
+  </div>
+</Modal>
+
+<style>
+  h2 {
+    font-size: var(--font-size-xl);
+    margin: 0;
+    font-family: var(--font-sans);
+    font-weight: 600;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@ -2,6 +2,7 @@
  import { onMount, beforeUpdate, afterUpdate } from "svelte"
  import Portal from "svelte-portal"
  import { buildStyle } from "../../helpers.js"
+
  export let options = []
  export let value = ""
  export let styleBindingProperty
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@ -8,25 +8,25 @@
  import { onMount, getContext } from "svelte"

  export let label = ""
+  export let componentInstance = {}
  export let control = null
  export let key = ""
  export let value
  export let props = {}
  export let onChange = () => {}

-  const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
  let temporaryBindableValue = value

  function handleClose() {
    handleChange(key, temporaryBindableValue)
  }

-  let bindableProperties
+  let bindableProperties = []

  let anchor
  let dropdown

-  async function getBindableProperties() {
+  function getBindableProperties() {
    // Get all bindableProperties
    bindableProperties = fetchBindableProperties({
      componentInstanceId: $store.currentComponentInfo._id,
@ -36,7 +36,8 @@
    })
  }

-  async function replaceBindings(textWithBindings) {
+  const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
+  function replaceBindings(textWithBindings) {
    getBindableProperties()
    // Find all instances of mustasche
    const boundValues = textWithBindings.match(CAPTURE_VAR_INSIDE_MUSTACHE)
@ -66,14 +67,19 @@
        innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
      }
    }
-    if (typeof innerVal === "string") replaceBindings(innerVal)
+    if (typeof innerVal !== "object") {
+      replaceBindings(innerVal)
+    } else {
+      onChange(key, innerVal)
+    }
  }

  const safeValue = () => {
    getBindableProperties()
    let temp = value
    const boundValues =
-      (value && value.match && value.match(CAPTURE_VAR_INSIDE_MUSTACHE)) || []
+      (typeof value === "string" && value.match(CAPTURE_VAR_INSIDE_MUSTACHE)) ||
+      []

    // Replace with names:
    boundValues.forEach(v => {
@ -100,6 +106,7 @@
  <div data-cy={`${key}-prop-control`} class="control">
    <svelte:component
      this={control}
+      {componentInstance}
      {...handlevalueKey(value)}
      on:change={val => handleChange(key, val)}
      onChange={val => handleChange(key, val)}
@ -107,7 +114,7 @@
      name={key} />
  </div>
  {#if control == Input}
-    <button on:click={dropdown.show}>
+    <button data-cy={`${key}-binding-button`} on:click={dropdown.show}>
      <Icon name="edit" />
    </button>
  {/if}
@ -120,6 +127,7 @@
    align="right">
    <BindingDropdown
      {...handlevalueKey(value)}
+      close={dropdown.hide}
      on:update={e => (temporaryBindableValue = e.detail)}
      {bindableProperties} />
  </DropdownMenu>
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@ -2,7 +2,6 @@
  import { MoreIcon } from "components/common/Icons"
  import { store } from "builderStore"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import UIkit from "uikit"
  import api from "builderStore/api"
  import Portal from "svelte-portal"
  import { DropdownMenu } from "@budibase/bbui"
@ -65,7 +64,7 @@
  .root button {
    border-style: none;
    border-radius: 2px;
-    padding: 5px;
+    padding: 0;
    background: transparent;
    cursor: pointer;
    color: var(--ink);
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@ -0,0 +1,18 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  const handleBlur = () => dispatch("change", value)
+</script>
+
+<Select editable secondary on:blur={handleBlur} on:change bind:value>
+  <option value="" />
+  {#each $store.allScreens as screen}
+    <option value={screen.route}>{screen.props._instanceName}</option>
+  {/each}
+</Select>
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@ -1,4 +1,5 @@
 <script>
+  import { isEmpty } from "lodash/fp"
  import PropertyControl from "./PropertyControl.svelte"
  import Input from "./PropertyPanelControls/Input.svelte"
  import { goto } from "@sveltech/routify"
@ -33,6 +34,15 @@
    { key: "favicon", label: "Favicon", control: Input },
  ]

+  const canRenderControl = (key, dependsOn) => {
+    let test = !isEmpty(componentInstance[dependsOn])
+
+    return (
+      propExistsOnComponentDef(key) &&
+      (!dependsOn || !isEmpty(componentInstance[dependsOn]))
+    )
+  }
+
  $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
  $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition

@ -101,12 +111,13 @@

 {#if panelDefinition && panelDefinition.length > 0}
  {#each panelDefinition as definition}
-    {#if propExistsOnComponentDef(definition.key)}
+    {#if canRenderControl(definition.key, definition.dependsOn)}
      <PropertyControl
        control={definition.control}
        label={definition.label}
        key={definition.key}
        value={componentInstance[definition.key]}
+        {componentInstance}
        {onChange}
        props={{ ...excludeProps(definition, ['control', 'label']) }} />
    {/if}
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@ -4,7 +4,6 @@
  import PageLayout from "./PageLayout.svelte"
  import PagesList from "./PagesList.svelte"
  import { store } from "builderStore"
-  import IconButton from "components/common/IconButton.svelte"
  import NewScreen from "./NewScreen.svelte"
  import CurrentItemPreview from "./CurrentItemPreview.svelte"
  import SettingsView from "./SettingsView.svelte"
--- a/packages/builder/src/components/userInterface/pagesParsing/types.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/types.js
@ -21,6 +21,6 @@ export const TYPE_MAP = {
    },
  },
  models: {
-    default: [],
+    default: {},
  },
 }
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -2,7 +2,10 @@ import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"
+import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
+import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
+import ScreenSelect from "components/userInterface/ScreenSelect.svelte"

 import { all } from "./propertyCategories.js"
 /* 
@ -237,7 +240,7 @@ export default {
            design: { ...all },
            settings: [
              { label: "Text", key: "text", control: Input },
-              { label: "Url", key: "url", control: Input },
+              { label: "Url", key: "url", control: ScreenSelect },
              {
                label: "Open New Tab",
                key: "openInNewTab",
@ -260,7 +263,13 @@ export default {
          icon: "ri-file-list-line",
          properties: {
            design: { ...all },
-            settings: [{ label: "Table", key: "model", control: ModelSelect }],
+            settings: [
+              {
+                label: "Table",
+                key: "datasource",
+                control: ModelViewSelect,
+              },
+            ],
          },
          children: [],
        },
@ -488,7 +497,11 @@ export default {
          properties: {
            design: { ...all },
            settings: [
-              { label: "Model", key: "model", control: ModelSelect },
+              {
+                label: "Table",
+                key: "datasource",
+                control: ModelViewSelect,
+              },
              { label: "Stripe Color", key: "stripeColor", control: Input },
              { label: "Border Color", key: "borderColor", control: Input },
              { label: "TH Color", key: "backgroundColor", control: Input },
@ -570,8 +583,20 @@ export default {
                settings: [
                  {
                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
+                    key: "datasource",
+                    control: ModelViewSelect,
+                  },
+                  {
+                    label: "Name Field",
+                    key: "nameKey",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Value Field",
+                    key: "valueKey",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Animate Chart",
@ -608,16 +633,6 @@ export default {
                      "yellow",
                    ],
                  },
-                  {
-                    label: "Name Field",
-                    key: "nameKey",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Field",
-                    key: "valueKey",
-                    control: Input,
-                  },
                  {
                    label: "External Radius",
                    key: "externalRadius",
@ -662,18 +677,20 @@ export default {
                settings: [
                  {
                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
+                    key: "datasource",
+                    control: ModelViewSelect,
                  },
                  {
                    label: "Name Label",
                    key: "nameLabel",
-                    control: Input,
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Value Label",
                    key: "valueLabel",
-                    control: Input,
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Y Axis Label",
@ -774,8 +791,26 @@ export default {
                settings: [
                  {
                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
+                    key: "datasource",
+                    control: ModelViewSelect,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Group Label",
+                    key: "groupLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Color",
@ -815,16 +850,6 @@ export default {
                    control: OptionSelect,
                    options: ["vertical", "horizontal", "full"],
                  },
-                  {
-                    label: "Group Label",
-                    key: "groupLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    control: Input,
-                  },
                  {
                    label: "Value Label",
                    key: "valueLabel",
@ -869,8 +894,26 @@ export default {
                settings: [
                  {
                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
+                    key: "datasource",
+                    control: ModelViewSelect,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Topic Label",
+                    key: "topicLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Date Label",
+                    key: "dateLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Colors",
@ -929,21 +972,6 @@ export default {
                    control: OptionSelect,
                    options: ["vertical", "horizontal", "full"],
                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Topic Label",
-                    key: "topicLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
                  {
                    label: "X Axis Label",
                    key: "xAxisLabel",
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte
@ -1,6 +1,7 @@
 <script>
  import { store } from "builderStore"
  import deepmerge from "deepmerge"
+  import { Label } from "@budibase/bbui"

  export let value

@ -24,22 +25,18 @@
 </script>

 <div class="bb-margin-xl block-field">
-  <label class="uk-form-label">Page</label>
-  <div class="uk-form-controls">
+  <Label small forAttr={'page'}>Page</Label>
  <select class="budibase__input" bind:value={pageName}>
    {#each Object.keys(pages) as page}
      <option value={page}>{page}</option>
    {/each}
  </select>
-  </div>
  {#if components.length > 0}
-    <label class="uk-form-label">Component</label>
-    <div class="uk-form-controls">
+    <Label small forAttr={'component'}>Component</Label>
    <select class="budibase__input" bind:value>
      {#each components as component}
        <option value={component._id}>{component._id}</option>
      {/each}
    </select>
-    </div>
  {/if}
 </div>
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
@ -5,7 +5,6 @@
 </script>

 <div class="bb-margin-xl block-field">
-  <div class="uk-form-controls">
  <select class="budibase__input" bind:value>
    <option value="" />
    {#each $backendUiStore.models as model}
@ -13,4 +12,3 @@
    {/each}
  </select>
 </div>
-</div>
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
@ -1,33 +1,39 @@
 <script>
  import { backendUiStore } from "builderStore"
-  import { Input } from "@budibase/bbui"
+  import { Input, Label } from "@budibase/bbui"

  export let value
+
+  function setParsedValue(evt, field) {
+    const fieldSchema = value.model.schema[field]
+    if (fieldSchema.type === "number") {
+      value[field] = parseInt(evt.target.value)
+      return
+    }
+
+    value[field] = evt.target.value
+  }
 </script>

 <div class="bb-margin-xl block-field">
-  <div class="uk-form-controls">
  <select class="budibase__input" bind:value={value.model}>
    {#each $backendUiStore.models as model}
      <option value={model}>{model.name}</option>
    {/each}
  </select>
 </div>
-</div>

 {#if value.model}
  <div class="bb-margin-xl block-field">
-    <label class="uk-form-label fields">Fields</label>
+    <Label small forAttr={'fields'}>Fields</Label>
    {#each Object.keys(value.model.schema) as field}
-      <div class="uk-form-controls bb-margin-xl">
-        <Input bind:value={value[field]} label={field} />
+      <div class="bb-margin-xl">
+        <Input
+          thin
+          value={value[field]}
+          label={field}
+          on:change={e => setParsedValue(e, field)} />
      </div>
    {/each}
  </div>
 {/if}
-
-<style>
-  .fields {
-    font-weight: 500;
-  }
-</style>
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@ -5,7 +5,7 @@
  import { notifier } from "builderStore/store/notifications"
  import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
  import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
-  import { Button, Input } from "@budibase/bbui"
+  import { Button, Input, Label } from "@budibase/bbui"

  const { open, close } = getContext("simple-modal")

@ -112,14 +112,13 @@
        <div class="panel-body">
          <div class="block-label">Workflow: {workflow.name}</div>
          <div class="config-item">
-            <label class="uk-form-label">User Access</label>
+            <Label small forAttr={'useraccess'}>User Access</Label>
            <div class="access-levels">

              {#each ACCESS_LEVELS as level}
                <span class="access-level">
                  <label>{level.name}</label>
                  <input
-                    class="uk-checkbox"
                    type="checkbox"
                    disabled={!level.editable}
                    bind:checked={level.canExecute} />
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@ -44,7 +44,7 @@
    {:else if type === 'model'}
      <ModelSelector bind:value={workflowBlock.args[parameter]} />
    {:else if type === 'record'}
-      <RecordSelector bind:value={workflowBlock.args[parameter]} />
+      <RecordSelector value={workflowBlock.args[parameter]} />
    {:else if type === 'string'}
      <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
    {/if}
--- a/packages/builder/src/helpers.js
+++ b/packages/builder/src/helpers.js
@ -1,6 +1,5 @@
 import { last } from "lodash/fp"
 import { pipe } from "components/common/core"
-
 export const buildStyle = styles => {
  let str = ""
  for (let s in styles) {
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@ -15,7 +15,6 @@
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/bbui.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>
-	<link rel='stylesheet' href="/_builder/uikit.min.css">

 </head>

--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@ -8,7 +8,6 @@
  import { isActive, goto, layout, url } from "@sveltech/routify"

  import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
-  import IconButton from "components/common/IconButton.svelte"

  // Get Package and set store
  export let application
@ -69,9 +68,6 @@
            {title}
          </span>
        {/each}
-        <!-- <IconButton icon="home"
-                      color="var(--grey-2)"
-                      hoverColor="var(--secondary75)"/> -->
      </div>
      <div class="toprightnav">
        <SettingsLink />
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@ -3,7 +3,6 @@
  import { goto } from "@sveltech/routify"
  import { onMount } from "svelte"
  import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
-  import IconButton from "components/common/IconButton.svelte"
  import CurrentItemPreview from "components/userInterface/AppPreview"
  import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
  import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -5,7 +5,6 @@
  import AppList from "components/start/AppList.svelte"
  import { onMount } from "svelte"
  import ActionButton from "components/common/ActionButton.svelte"
-  import IconButton from "components/common/IconButton.svelte"
  import { get } from "builderStore/api"
  import Spinner from "components/common/Spinner.svelte"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -688,17 +688,15 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

-"@budibase/bbui@^1.28.2":
-  version "1.28.2"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.28.2.tgz#b86d10c2c4489e352a391ee55cc6fc5b24492e4c"
-  integrity sha512-8Mrh1ZrkGEl7syqMbsalI3pAy/V6Xh4tx14h3SXKx/XKXlzqxS4vq/+3DaphLbLn+0WZmHrxI5MkdfkSIh7nvw==
+"@budibase/bbui@^1.31.0":
+  version "1.31.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.31.0.tgz#5645875abb4a722c0fae7bd980bc71f40d234f2f"
  dependencies:
    sirv-cli "^0.4.6"

 "@budibase/client@^0.1.19":
  version "0.1.19"
  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
-  integrity sha512-crxnLgebsh6CR0aMleDahY/1vFPbveG6JuSS/EVZeoBmckzK8hwiUQYQhIlf68nZfzWsCE/M9TX7SJxsrKY3bQ==
  dependencies:
    "@nx-js/compiler-util" "^2.0.0"
    bcryptjs "^2.4.3"
@ -721,7 +719,7 @@
    exec-sh "^0.3.2"
    minimist "^1.2.0"

-"@cypress/listr-verbose-renderer@0.4.1":
+"@cypress/listr-verbose-renderer@^0.4.1":
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a"
  dependencies:
@ -730,7 +728,7 @@
    date-fns "^1.27.2"
    figures "^1.7.0"

-"@cypress/request@2.88.5":
+"@cypress/request@^2.88.5":
  version "2.88.5"
  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.5.tgz#8d7ecd17b53a849cfd5ab06d5abe7d84976375d7"
  dependencies:
@ -755,7 +753,7 @@
    tunnel-agent "^0.6.0"
    uuid "^3.3.2"

-"@cypress/xvfb@1.2.4":
+"@cypress/xvfb@^1.2.4":
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
  dependencies:
@ -962,7 +960,6 @@
 "@nx-js/compiler-util@^2.0.0":
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
-  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==

 "@polka/url@^0.5.0":
  version "0.5.0"
@ -1207,11 +1204,11 @@
  dependencies:
    "@types/node" "*"

-"@types/sinonjs__fake-timers@6.0.1":
+"@types/sinonjs__fake-timers@^6.0.1":
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.1.tgz#681df970358c82836b42f989188d133e218c458e"

-"@types/sizzle@2.3.2":
+"@types/sizzle@^2.3.2":
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"

@ -1349,9 +1346,9 @@ anymatch@~3.1.1:
    normalize-path "^3.0.0"
    picomatch "^2.0.4"

-arch@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"
+arch@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.2.tgz#0c52bbe7344bb4fa260c443d2cbad9c00ff2f0bf"

 argparse@^1.0.7:
  version "1.0.10"
@ -1385,7 +1382,6 @@ array-equal@^1.0.0:
 array-filter@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=

 array-union@^2.1.0:
  version "2.1.0"
@ -1425,7 +1421,7 @@ async-limiter@~1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"

-async@^3.1.0:
+async@^3.2.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"

@ -1444,7 +1440,6 @@ atob@^2.1.2:
 available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
  dependencies:
    array-filter "^1.0.0"

@ -1525,7 +1520,6 @@ bcrypt-pbkdf@^1.0.0:
 bcryptjs@^2.4.3:
  version "2.4.3"
  resolved "https://registry.yarnpkg.com/bcryptjs/-/bcryptjs-2.4.3.tgz#9ab5627b93e60621ff7cdac5da9733027df1d0cb"
-  integrity sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=

 binary-extensions@^2.0.0:
  version "2.0.0"
@ -1543,7 +1537,11 @@ bl@~0.8.1:
  dependencies:
    readable-stream "~1.0.26"

-bluebird@3.7.2:
+blob-util@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
+
+bluebird@3.7.2, bluebird@^3.7.2:
  version "3.7.2"
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"

@ -1716,7 +1714,7 @@ cache-base@^1.0.1:
    union-value "^1.0.0"
    unset-value "^1.0.0"

-cachedir@2.3.0:
+cachedir@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"

@ -1746,14 +1744,6 @@ caseless@~0.12.0:
  version "0.12.0"
  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"

-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@^1.0.0, chalk@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@ -1764,6 +1754,14 @@ chalk@^1.0.0, chalk@^1.1.3:
    strip-ansi "^3.0.0"
    supports-color "^2.0.0"

+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chalk@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
@ -1771,11 +1769,18 @@ chalk@^3.0.0:
    ansi-styles "^4.1.0"
    supports-color "^7.1.0"

+chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 cheap-watch@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/cheap-watch/-/cheap-watch-1.0.2.tgz#bfa648aea6bcd15e9fe4dce4ac760ab81cd0133c"

-check-more-types@2.24.0:
+check-more-types@2.24.0, check-more-types@^2.24.0:
  version "2.24.0"
  resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"

@ -1829,12 +1834,12 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0:
  dependencies:
    restore-cursor "^2.0.0"

-cli-table3@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.5.1.tgz#0252372d94dfc40dbd8df06005f48f31f656f202"
+cli-table3@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.0.tgz#b7b1bc65ca8e7b5cef9124e13dc2b21e2ce4faee"
  dependencies:
    object-assign "^4.1.0"
-    string-width "^2.1.1"
+    string-width "^4.2.0"
  optionalDependencies:
    colors "^1.1.2"

@ -1910,15 +1915,15 @@ commander@2, commander@^2.19.0:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"

-commander@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
+commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"

 commander@^5.0.0:
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"

-common-tags@1.8.0:
+common-tags@^1.8.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"

@ -2084,47 +2089,48 @@ cypress-terminal-report@^1.4.1:
    chalk "^3.0.0"
    methods "^1.1.2"

-cypress@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.8.0.tgz#8fe731db77f39310511d83e81439d06ae3388554"
+cypress@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.1.0.tgz#979e9ff3e0acd792eefd365bf104046479a9643b"
  dependencies:
-    "@cypress/listr-verbose-renderer" "0.4.1"
-    "@cypress/request" "2.88.5"
-    "@cypress/xvfb" "1.2.4"
-    "@types/sinonjs__fake-timers" "6.0.1"
-    "@types/sizzle" "2.3.2"
-    arch "2.1.1"
-    bluebird "3.7.2"
-    cachedir "2.3.0"
-    chalk "2.4.2"
-    check-more-types "2.24.0"
-    cli-table3 "0.5.1"
-    commander "4.1.0"
-    common-tags "1.8.0"
-    debug "4.1.1"
-    eventemitter2 "4.1.2"
-    execa "1.0.0"
-    executable "4.1.1"
-    extract-zip "1.7.0"
-    fs-extra "8.1.0"
-    getos "3.1.4"
-    is-ci "2.0.0"
-    is-installed-globally "0.1.0"
-    lazy-ass "1.6.0"
-    listr "0.14.3"
-    lodash "4.17.15"
-    log-symbols "3.0.0"
-    minimist "1.2.5"
-    moment "2.24.0"
-    ospath "1.2.2"
-    pretty-bytes "5.3.0"
-    ramda "0.26.1"
-    request-progress "3.0.0"
-    supports-color "7.1.0"
-    tmp "0.1.0"
-    untildify "4.0.0"
-    url "0.11.0"
-    yauzl "2.10.0"
+    "@cypress/listr-verbose-renderer" "^0.4.1"
+    "@cypress/request" "^2.88.5"
+    "@cypress/xvfb" "^1.2.4"
+    "@types/sinonjs__fake-timers" "^6.0.1"
+    "@types/sizzle" "^2.3.2"
+    arch "^2.1.2"
+    blob-util "2.0.2"
+    bluebird "^3.7.2"
+    cachedir "^2.3.0"
+    chalk "^4.1.0"
+    check-more-types "^2.24.0"
+    cli-table3 "~0.6.0"
+    commander "^4.1.1"
+    common-tags "^1.8.0"
+    debug "^4.1.1"
+    eventemitter2 "^6.4.2"
+    execa "^4.0.2"
+    executable "^4.1.1"
+    extract-zip "^1.7.0"
+    fs-extra "^9.0.1"
+    getos "^3.2.1"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.3.2"
+    lazy-ass "^1.6.0"
+    listr "^0.14.3"
+    lodash "^4.17.19"
+    log-symbols "^4.0.0"
+    minimist "^1.2.5"
+    moment "^2.27.0"
+    ospath "^1.2.2"
+    pretty-bytes "^5.3.0"
+    ramda "~0.26.1"
+    request-progress "^3.0.0"
+    supports-color "^7.1.0"
+    tmp "~0.2.1"
+    untildify "^4.0.0"
+    url "^0.11.0"
+    yauzl "^2.10.0"

 d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
  version "1.2.4"
@ -2401,7 +2407,6 @@ decode-uri-component@^0.2.0:
 deep-equal@^2.0.1:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
-  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
  dependencies:
    es-abstract "^1.17.5"
    es-get-iterator "^1.1.0"
@ -2549,6 +2554,10 @@ emoji-regex@^7.0.1:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"

+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+
 end-of-stream@^1.1.0:
  version "1.4.4"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@ -2586,7 +2595,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
 es-abstract@^1.17.4:
  version "1.17.6"
  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
  dependencies:
    es-to-primitive "^1.2.1"
    function-bind "^1.1.1"
@ -2603,7 +2611,6 @@ es-abstract@^1.17.4:
 es-abstract@^1.18.0-next.0:
  version "1.18.0-next.0"
  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
-  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
  dependencies:
    es-to-primitive "^1.2.1"
    function-bind "^1.1.1"
@ -2621,7 +2628,6 @@ es-abstract@^1.18.0-next.0:
 es-get-iterator@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
  dependencies:
    es-abstract "^1.17.4"
    has-symbols "^1.0.1"
@ -2696,9 +2702,9 @@ event-stream@=3.3.4:
    stream-combiner "~0.0.4"
    through "~2.3.1"

-eventemitter2@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-4.1.2.tgz#0e1a8477af821a6ef3995b311bf74c23a5247f15"
+eventemitter2@^6.4.2:
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.3.tgz#35c563619b13f3681e7eb05cbdaf50f56ba58820"

 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
  version "1.0.3"
@ -2711,18 +2717,6 @@ exec-sh@^0.3.2:
  version "0.3.4"
  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"

-execa@1.0.0, execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@3.4.0:
  version "3.4.0"
  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
@ -2738,7 +2732,33 @@ execa@3.4.0:
    signal-exit "^3.0.2"
    strip-final-newline "^2.0.0"

-executable@4.1.1:
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+execa@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+executable@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
  dependencies:
@ -2805,7 +2825,7 @@ extglob@^2.0.4:
    snapdragon "^0.8.1"
    to-regex "^3.0.1"

-extract-zip@1.7.0:
+extract-zip@^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
  dependencies:
@ -2933,7 +2953,6 @@ for-in@^1.0.2:
 foreach@^2.0.5, foreach@~2.0.1:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
-  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=

 forever-agent@~0.6.1:
  version "0.6.1"
@ -2957,7 +2976,7 @@ from@~0:
  version "0.1.7"
  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"

-fs-extra@8.1.0, fs-extra@^8.1.0:
+fs-extra@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
  dependencies:
@ -2974,6 +2993,15 @@ fs-extra@^9.0.0:
    jsonfile "^6.0.1"
    universalify "^1.0.0"

+fs-extra@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^1.0.0"
+
 fs.realpath@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@ -3027,11 +3055,11 @@ get-value@^2.0.3, get-value@^2.0.6:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"

-getos@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.4.tgz#29cdf240ed10a70c049add7b6f8cb08c81876faf"
+getos@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
  dependencies:
-    async "^3.1.0"
+    async "^3.2.0"

 getpass@^0.1.1:
  version "0.1.7"
@ -3056,11 +3084,11 @@ glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
    once "^1.3.0"
    path-is-absolute "^1.0.0"

-global-dirs@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
+global-dirs@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.0.1.tgz#acdf3bb6685bcd55cb35e8a052266569e9469201"
  dependencies:
-    ini "^1.3.4"
+    ini "^1.3.5"

 globals@^11.1.0, globals@^11.12.0:
  version "11.12.0"
@ -3269,7 +3297,7 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1,
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"

-ini@^1.3.4:
+ini@^1.3.5:
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"

@ -3298,7 +3326,6 @@ is-accessor-descriptor@^1.0.0:
 is-arguments@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==

 is-arrayish@^0.2.1:
  version "0.2.1"
@ -3307,7 +3334,6 @@ is-arrayish@^0.2.1:
 is-bigint@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==

 is-binary-path@~2.1.0:
  version "2.1.0"
@ -3318,7 +3344,6 @@ is-binary-path@~2.1.0:
 is-boolean-object@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==

 is-buffer@^1.1.5:
  version "1.1.6"
@ -3331,9 +3356,8 @@ is-callable@^1.1.4, is-callable@^1.1.5:
 is-callable@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
-  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==

-is-ci@2.0.0, is-ci@^2.0.0:
+is-ci@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
  dependencies:
@ -3395,6 +3419,10 @@ is-fullwidth-code-point@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"

+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+
 is-generator-fn@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@ -3405,17 +3433,16 @@ is-glob@^4.0.1, is-glob@~4.0.1:
  dependencies:
    is-extglob "^2.1.1"

-is-installed-globally@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
+is-installed-globally@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
  dependencies:
-    global-dirs "^0.1.0"
-    is-path-inside "^1.0.0"
+    global-dirs "^2.0.1"
+    is-path-inside "^3.0.1"

 is-map@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==

 is-module@^1.0.0:
  version "1.0.0"
@ -3424,12 +3451,10 @@ is-module@^1.0.0:
 is-negative-zero@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
-  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=

 is-number-object@^1.0.3:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==

 is-number@^3.0.0:
  version "3.0.0"
@ -3451,11 +3476,9 @@ is-observable@^1.1.0:
  dependencies:
    symbol-observable "^1.1.0"

-is-path-inside@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
-  dependencies:
-    path-is-inside "^1.0.1"
+is-path-inside@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"

 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
  version "2.0.4"
@ -3492,14 +3515,12 @@ is-regex@^1.0.5:
 is-regex@^1.1.0, is-regex@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
-  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
  dependencies:
    has-symbols "^1.0.1"

 is-set@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==

 is-stream@^1.1.0:
  version "1.1.0"
@ -3512,7 +3533,6 @@ is-stream@^2.0.0:
 is-string@^1.0.4, is-string@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==

 is-symbol@^1.0.2:
  version "1.0.3"
@ -3523,7 +3543,6 @@ is-symbol@^1.0.2:
 is-typed-array@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
  dependencies:
    available-typed-arrays "^1.0.0"
    es-abstract "^1.17.4"
@ -3537,12 +3556,10 @@ is-typedarray@~1.0.0:
 is-weakmap@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==

 is-weakset@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==

 is-windows@^1.0.2:
  version "1.0.2"
@ -3567,7 +3584,6 @@ isarray@1.0.0, isarray@~1.0.0:
 isarray@^2.0.5:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==

 isbuffer@~0.0.0:
  version "0.0.0"
@ -4137,7 +4153,7 @@ kleur@^3.0.0, kleur@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"

-lazy-ass@1.6.0:
+lazy-ass@1.6.0, lazy-ass@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"

@ -4268,7 +4284,7 @@ listr-verbose-renderer@^0.5.0:
    date-fns "^1.27.2"
    figures "^2.0.0"

-listr@0.14.3:
+listr@^0.14.3:
  version "0.14.3"
  resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
  dependencies:
@ -4338,15 +4354,13 @@ lodash.sortby@^4.7.0:
  version "4.7.0"
  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"

-lodash@4.17.15, lodash@^4.17.13, lodash@^4.17.15:
+lodash@^4.17.13, lodash@^4.17.15:
  version "4.17.15"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"

-log-symbols@3.0.0, log-symbols@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
-  dependencies:
-    chalk "^2.4.2"
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"

 log-symbols@^1.0.2:
  version "1.0.2"
@ -4354,6 +4368,18 @@ log-symbols@^1.0.2:
  dependencies:
    chalk "^1.0.0"

+log-symbols@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
+  dependencies:
+    chalk "^2.4.2"
+
+log-symbols@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  dependencies:
+    chalk "^4.0.0"
+
 log-update@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
@ -4375,7 +4401,6 @@ ltgt@^2.1.2:
 lunr@^2.3.5:
  version "2.3.9"
  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
-  integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==

 magic-string@^0.22.5:
  version "0.22.5"
@ -4512,7 +4537,7 @@ minimatch@^3.0.4:
  dependencies:
    brace-expansion "^1.1.7"

-minimist@1.2.5, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
  version "1.2.5"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"

@ -4529,13 +4554,13 @@ mkdirp@^0.5.1, mkdirp@^0.5.4:
  dependencies:
    minimist "^1.2.5"

-moment@2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+moment@^2.27.0:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"

 mri@^1.1.0:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.5.tgz#ce21dba2c69f74a9b7cf8a1ec62307e089e223e0"
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"

 ms@2.0.0:
  version "2.0.0"
@ -4677,12 +4702,10 @@ object-inspect@^1.7.0:
 object-inspect@^1.8.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
-  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==

 object-is@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
-  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
  dependencies:
    define-properties "^1.1.3"
    es-abstract "^1.17.5"
@ -4772,7 +4795,7 @@ optionator@^0.8.1:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/opts/-/opts-1.2.7.tgz#4de4721d592c96901dae623a438c988e9ea7779f"

-ospath@1.2.2:
+ospath@^1.2.2:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"

@ -4883,10 +4906,6 @@ path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"

-path-is-inside@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-
 path-key@^2.0.0, path-key@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
@ -4983,9 +5002,9 @@ prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"

-pretty-bytes@5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
+pretty-bytes@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"

 pretty-format@^24.9.0:
  version "24.9.0"
@ -5080,7 +5099,7 @@ querystring@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"

-ramda@0.26.1:
+ramda@~0.26.1:
  version "0.26.1"
  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"

@ -5204,7 +5223,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
 regexp.prototype.flags@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
  dependencies:
    define-properties "^1.1.3"
    es-abstract "^1.17.0-next.1"
@ -5212,7 +5230,6 @@ regexp.prototype.flags@^1.3.0:
 regexparam@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==

 regexpu-core@^4.7.0:
  version "4.7.0"
@ -5247,7 +5264,7 @@ repeat-string@^1.6.1:
  version "1.6.1"
  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"

-request-progress@3.0.0:
+request-progress@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
  dependencies:
@ -5360,7 +5377,7 @@ rimraf@^2.5.4, rimraf@^2.6.3:
  dependencies:
    glob "^7.1.3"

-rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
  dependencies:
@ -5607,14 +5624,12 @@ shellwords@^0.1.1:
 shortid@^2.2.15, shortid@^2.2.8:
  version "2.2.15"
  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
  dependencies:
    nanoid "^2.1.0"

 side-channel@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
  dependencies:
    es-abstract "^1.18.0-next.0"
    object-inspect "^1.8.0"
@ -5837,6 +5852,14 @@ string-width@^3.0.0, string-width@^3.1.0:
    is-fullwidth-code-point "^2.0.0"
    strip-ansi "^5.1.0"

+string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
 string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
@ -5901,6 +5924,12 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
  dependencies:
    ansi-regex "^4.1.0"

+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-bom@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@ -5919,12 +5948,6 @@ strip-indent@^3.0.0:
  dependencies:
    min-indent "^1.0.0"

-supports-color@7.1.0, supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@ -5941,12 +5964,22 @@ supports-color@^6.1.0:
  dependencies:
    has-flag "^3.0.0"

+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  dependencies:
+    has-flag "^4.0.0"
+
 svelte-jester@^1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/svelte-jester/-/svelte-jester-1.0.6.tgz#a95da31acdcdd339468745c05c63fd0b52acff93"
  dependencies:
    cosmiconfig "^6.0.0"

+svelte-loading-spinners@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/svelte-loading-spinners/-/svelte-loading-spinners-0.1.1.tgz#a35a811b7db0389ec2a5de6904c718c58c36e1f9"
+
 svelte-portal@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
@ -5962,7 +5995,6 @@ svelte@3.23.x:
 svelte@^3.9.2:
  version "3.24.1"
  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
-  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==

 symbol-observable@^1.1.0:
  version "1.2.0"
@ -6006,14 +6038,14 @@ through@2, through@~2.3, through@~2.3.1:
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"

 tinydate@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.2.0.tgz#36b4bb02715f89743f3ef9073d3573d005a28d0e"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"

-tmp@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
+tmp@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
  dependencies:
-    rimraf "^2.6.3"
+    rimraf "^3.0.0"

 tmpl@1.0.x:
  version "1.0.4"
@ -6110,10 +6142,6 @@ typedarray@^0.0.6:
  version "0.0.6"
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"

-uikit@^3.1.7:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/uikit/-/uikit-3.4.6.tgz#39d59620aeb42d53ba905a67e99e2015d4aaaf9c"
-
 unicode-canonical-property-names-ecmascript@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@ -6157,7 +6185,7 @@ unset-value@^1.0.0:
    has-value "^0.3.1"
    isobject "^3.0.0"

-untildify@4.0.0:
+untildify@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"

@ -6171,7 +6199,7 @@ urix@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"

-url@0.11.0:
+url@^0.11.0:
  version "0.11.0"
  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
  dependencies:
@ -6302,7 +6330,6 @@ whatwg-url@^8.0.0:
 which-boxed-primitive@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
  dependencies:
    is-bigint "^1.0.0"
    is-boolean-object "^1.0.0"
@ -6313,7 +6340,6 @@ which-boxed-primitive@^1.0.1:
 which-collection@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
  dependencies:
    is-map "^2.0.1"
    is-set "^2.0.1"
@ -6327,7 +6353,6 @@ which-module@^2.0.0:
 which-typed-array@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
  dependencies:
    available-typed-arrays "^1.0.2"
    es-abstract "^1.17.5"
@ -6454,7 +6479,7 @@ yargs@^13.3.0:
    y18n "^4.0.0"
    yargs-parser "^13.1.2"

-yauzl@2.10.0, yauzl@^2.10.0:
+yauzl@^2.10.0:
  version "2.10.0"
  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
  dependencies:
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@ -80,7 +80,7 @@ exports.save = async function(ctx) {

 exports.fetchView = async function(ctx) {
  const db = new CouchDB(ctx.user.instanceId)
-  const { stats, group } = ctx.query
+  const { stats, group, field } = ctx.query
  const response = await db.query(`database/${ctx.params.viewName}`, {
    include_docs: !stats,
    group,
@ -89,6 +89,7 @@ exports.fetchView = async function(ctx) {
  if (stats) {
    response.rows = response.rows.map(row => ({
      group: row.key,
+      field,
      ...row.value,
      avg: row.value.sum / row.value.count,
    }))
--- a/packages/server/src/api/controllers/view/tests/snapshots/viewBuilder.spec.js.snap
+++ b/packages/server/src/api/controllers/view/tests/snapshots/viewBuilder.spec.js.snap
@ -20,7 +20,7 @@ Object {
      "count": Object {
        "type": "number",
      },
-      "group": Object {
+      "field": Object {
        "type": "string",
      },
      "max": Object {
@ -66,7 +66,7 @@ Object {
    ],
    "groupBy": undefined,
    "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
-    "schema": undefined,
+    "schema": null,
  },
 }
 `;
@ -84,7 +84,7 @@ Object {
    "filters": Array [],
    "groupBy": "age",
    "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
-    "schema": undefined,
+    "schema": null,
  },
  "reduce": "_stats",
 }
--- a/packages/server/src/api/controllers/view/viewBuilder.js
+++ b/packages/server/src/api/controllers/view/viewBuilder.js
@ -9,11 +9,20 @@ const TOKEN_MAP = {
  OR: "||",
 }

-const SCHEMA_MAP = {
-  stats: {
+const GROUP_PROPERTY = {
  group: {
    type: "string",
  },
+}
+
+const FIELD_PROPERTY = {
+  field: {
+    type: "string",
+  },
+}
+
+const SCHEMA_MAP = {
+  stats: {
    sum: {
      type: "number",
    },
@ -91,13 +100,21 @@ function viewTemplate({ field, modelId, groupBy, filters = [], calculation }) {

  const reduction = field ? { reduce: "_stats" } : {}

+  let schema = null
+
+  if (calculation) {
+    schema = groupBy
+      ? { ...GROUP_PROPERTY, ...SCHEMA_MAP[calculation] }
+      : { ...FIELD_PROPERTY, ...SCHEMA_MAP[calculation] }
+  }
+
  return {
    meta: {
      field,
      modelId,
      groupBy,
      filters,
-      schema: SCHEMA_MAP[calculation],
+      schema,
      calculation,
    },
    map: `function (doc) {
--- a/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
+++ b/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
@ -14,9 +14,8 @@ module.exports = async function saveRecord({ args, context }) {
    user: { instanceId: context.instanceId },
  }

-  await recordController.save(ctx)
-
  try {
+    await recordController.save(ctx)
    return {
      record: ctx.body,
    }
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@ -172,6 +172,20 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

+"@budibase/client@^0.1.19":
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    bcryptjs "^2.4.3"
+    deep-equal "^2.0.1"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
 "@cnakazawa/watch@^1.0.3":
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@ -354,6 +368,10 @@
    path-to-regexp "1.x"
    urijs "^1.19.2"

+"@nx-js/compiler-util@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
+
 "@sendgrid/client@^7.1.1":
  version "7.1.1"
  resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f"
@ -811,6 +829,10 @@ array-equal@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"

+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+
 array-unique@^0.3.2:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@ -869,6 +891,12 @@ atomic-sleep@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"

+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sdk@^2.706.0:
  version "2.706.0"
  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
@ -980,8 +1008,8 @@ bindings@^1.5.0:
    file-uri-to-path "1.0.0"

 bl@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.3.tgz#12d6287adc29080e22a705e5764b2a9522cdc489"
  dependencies:
    buffer "^5.5.0"
    inherits "^2.0.4"
@ -1537,6 +1565,25 @@ decompress-response@^3.3.0:
  dependencies:
    mimic-response "^1.0.0"

+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@ -1863,6 +1910,51 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
    string.prototype.trimleft "^2.1.1"
    string.prototype.trimright "^2.1.1"

+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@ -2753,16 +2845,28 @@ is-accessor-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+
 is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"

+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+
 is-binary-path@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
  dependencies:
    binary-extensions "^2.0.0"

+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+
 is-buffer@^1.1.5:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@ -2771,6 +2875,10 @@ is-callable@^1.1.4, is-callable@^1.1.5:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"

+is-callable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+
 is-ci@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@ -2793,7 +2901,7 @@ is-data-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"

@ -2856,10 +2964,22 @@ is-installed-globally@^0.3.1:
    global-dirs "^2.0.1"
    is-path-inside "^3.0.1"

+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+
 is-npm@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"

+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+
 is-number@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@ -2890,10 +3010,24 @@ is-regex@^1.0.5:
  dependencies:
    has "^1.0.3"

+is-regex@^1.1.0, is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+
 is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"

+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+
 is-symbol@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@ -2908,10 +3042,27 @@ is-type-of@^1.0.0:
    is-class-hotfix "~0.0.6"
    isstream "~0.1.2"

+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"

+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -2932,6 +3083,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"

+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+
 isbinaryfile@^4.0.6:
  version "4.0.6"
  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@ -3871,6 +4026,10 @@ ltgt@~2.1.3:
  version "2.1.3"
  resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.1.3.tgz#10851a06d9964b971178441c23c9e52698eece34"

+lunr@^2.3.5:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
+
 make-dir@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@ -4035,6 +4194,10 @@ nan@^2.12.1:
  version "2.14.0"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"

+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+
 nanomatch@^1.2.9:
  version "1.2.13"
  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@ -4182,6 +4345,17 @@ object-inspect@^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"

+object-inspect@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+
+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@ -4828,6 +5002,17 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+
 regexpp@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@ -4996,10 +5181,14 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
  version "5.1.2"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"

-safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.2:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"

+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
 safe-regex@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@ -5119,6 +5308,19 @@ shellwords@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"

+shortid@^2.2.8:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  dependencies:
+    nanoid "^2.1.0"
+
+side-channel@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@ -5335,7 +5537,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.0"

-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
  dependencies:
@ -5358,7 +5560,7 @@ string.prototype.trimright@^2.1.1:
    es-abstract "^1.17.5"
    string.prototype.trimend "^1.0.0"

-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
  dependencies:
@ -5476,6 +5678,10 @@ supports-color@^7.1.0:
  dependencies:
    has-flag "^4.0.0"

+svelte@^3.9.2:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+
 symbol-tree@^3.2.2:
  version "3.2.4"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@ -5908,10 +6114,40 @@ whatwg-url@^7.0.0:
    tr46 "^1.0.1"
    webidl-conversions "^4.0.2"

+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"

+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
--- a/packages/standard-components/.gitignore
+++ b/packages/standard-components/.gitignore
@ -2,5 +2,4 @@
 node_modules
 yarn.lock
 package-lock.json
-dist/index.js
-dist/index.js.map
+dist/
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -210,7 +210,7 @@
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
-			"model": "models",
+			"datasource": "models",
 			"stripeColor": "string",
 			"borderColor": "string",
 			"backgroundColor": "string",
@ -256,7 +256,7 @@
 		"children": true,
 		"data": true,
 		"props": {
-			"model": "models"
+			"datasource": "models"
 		}
 	},
 	"stackedlist": {
@ -366,7 +366,8 @@
 		"description": "Donut Chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "string",
+			"data": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",
@ -406,7 +407,7 @@
 		"description": "Stacked Bar Chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "models",
 			"color": "string",
 			"height": "number",
 			"width": "number",
@ -507,7 +508,9 @@
 		"description": "Bar Chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "models",
+			"nameLabel": "string",
+			"valueLabel": "string",
 			"betweenBarsPadding": "number",
 			"gradient": "string",
 			"color": "string",
@ -518,9 +521,6 @@
 			"isHorizontal": "bool",
 			"labelNumberFormat": "number",
 			"locale": "string",
-			"nameLabel": "string",
-			"valueLabel": "string",
-			"numberLabel": "string",
 			"xAxisLabel": "string",
 			"yAxisLabel": "string",
 			"useLegend": "bool",
@ -532,7 +532,7 @@
 		"description": "Line Chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "models",
 			"width": "number",
 			"height": "number",
 			"axisTimeCombinations": "string",
@ -590,7 +590,9 @@
 		"description": "Groupedbar chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "models",
+			"nameLabel": "string",
+			"valueLabel": "string",
 			"color": "string",
 			"height": "string",
 			"width": "string",
@ -599,8 +601,6 @@
 			"groupLabel": "string",
 			"isAnimated": "bool",
 			"isHorizontal": "bool",
-			"nameLabel": "string",
-			"valueLabel": "string",
 			"yTicks": "string",
 			"useLegend": "bool",
 			"tooltipTitle": "string"
--- a/packages/standard-components/dist/index.js.map
+++ b/packages/standard-components/dist/index.js.map
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@ -36,6 +36,7 @@
  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
  "dependencies": {
    "@beyonk/svelte-googlemaps": "^2.2.0",
+    "@budibase/bbui": "^1.29.3",
    "britecharts": "^2.16.1",
    "d3-selection": "^1.4.2",
    "fast-sort": "^2.2.0",
--- a/packages/standard-components/rollup.config.js
+++ b/packages/standard-components/rollup.config.js
@ -3,6 +3,8 @@ import resolve from "rollup-plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
 import postcss from "rollup-plugin-postcss"

+const lodash_fp_exports = ["isEmpty"]
+
 export default {
  input: "src/index.js",
  output: [
@ -23,6 +25,10 @@ export default {
    resolve({
      browser: true,
    }),
-    commonjs(),
+    commonjs({
+      namedExports: {
+        "lodash/fp": lodash_fp_exports,
+      },
+    }),
  ],
 }
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@ -6,7 +6,9 @@
    hasProp,
  } from "./utils.js"
  import britecharts from "britecharts"
+  import fetchData from "../fetchData.js"
  import { onMount } from "svelte"
+  import { isEmpty } from "lodash/fp"

  import { select } from "d3-selection"
  import shortid from "shortid"
@ -27,6 +29,7 @@
  export let customClick = null

  let data = []
+  export let datasource = null
  export let xAxisLabel = ""
  export let yAxisLabel = ""
  export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
@ -53,17 +56,10 @@
  export let yTicks = null
  export let percentageAxisToMaxRatio = null

-  export let useLegend = true
-
-  export let _bb
-  export let model
-
-  let store = _bb.store
-
  onMount(async () => {
-    if (model) {
-      await fetchData()
-      data = $store[model]
+    if (!isEmpty(datasource)) {
+      data = await fetchData(datasource)
+
      if (schemaIsValid()) {
        chartContainer = select(`.${chartClass}`)
        bindChartUIProps()
@ -80,20 +76,6 @@
    (hasProp(data, "name") || hasProp(data, nameLabel)) &&
    (hasProp(data, "value") || hasProp(data, valueLabel))

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  function bindChartUIProps() {
    chart.numberFormat(".0f")
    chart.labelsNumberFormat(".1f")
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@ -1,8 +1,10 @@
 <script>
  import { getColorSchema, notNull } from "./utils.js"
+  import fetchData from "../fetchData.js"
  import Legend from "./Legend.svelte"
  import britecharts from "britecharts"
  import { onMount } from "svelte"
+  import { isEmpty } from "lodash/fp"

  import { select } from "d3-selection"
  import shortid from "shortid"
@ -21,7 +23,6 @@
  let chartSvg = null

  export let _bb
-  export let model

  let store = _bb.store

@ -31,6 +32,8 @@
  export let orderingFunction = null

  let data = []
+  export let datasource = {}
+
  export let color = "britecharts"
  export let height = 200
  export let width = 200
@ -54,25 +57,11 @@
  export let legendWidth = null
  export let legendHeight = null

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  onMount(async () => {
    if (chart) {
-      if (model) {
-        await fetchData()
-        data = checkAndReformatData($store[model])
+      if (!isEmpty(datasource)) {
+        let _data = await fetchData(datasource)
+        data = checkAndReformatData(_data)
        if (data.length === 0) {
          console.error(
            "Donut - please provide a valid name and value field for the chart"
@ -95,11 +84,11 @@
  function checkAndReformatData(data) {
    let _data = [...data]

-    if (valueKey) {
+    if (valueKey && valueKey !== "quantity") {
      _data = reformatDataKey(_data, valueKey, "quantity")
    }

-    if (nameKey) {
+    if (nameKey && nameKey !== "name") {
      _data = reformatDataKey(_data, nameKey, "name")
    }

--- a/packages/standard-components/src/Chart/GroupedBar.svelte
+++ b/packages/standard-components/src/Chart/GroupedBar.svelte
@ -1,18 +1,15 @@
 <script>
  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
  import Tooltip from "./Tooltip.svelte"
+  import fetchData from "../fetchData.js"
  import britecharts from "britecharts"
  import { onMount } from "svelte"
  import { select } from "d3-selection"
  import shortid from "shortid"
+  import { isEmpty } from "lodash/fp"

  const _id = shortid.generate()

-  export let _bb
-  export let model
-
-  let store = _bb.store
-
  const chart = britecharts.groupedBar()
  const chartClass = `groupedbar-container-${_id}`
  const legendClass = `legend-container-${_id}`
@ -25,6 +22,7 @@
  export let customClick = null

  let data = []
+  export let datasource = {}
  export let color = "britecharts"
  export let height = 200
  export let width = 200
@ -50,9 +48,8 @@
    (hasProp(data, "value") || hasProp(data, valueLabel))

  onMount(async () => {
-    if (model) {
-      await fetchData()
-      data = $store[model]
+    if (!isEmpty(datasource)) {
+      data = await fetchData(datasource)
      if (schemaIsValid()) {
        chartContainer = select(`.${chartClass}`)
        bindChartUIProps()
@ -67,20 +64,6 @@
    }
  })

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  function bindTooltip() {
    tooltipContainer = select(`.${chartClass} .metadata-group`)
    tooltip.topicLabel("values")
@ -140,7 +123,11 @@
    if (notNull(yTickTextOffset)) {
      chart.yTickTextOffset(yTickTextOffset)
    }
-    tooltip.title(tooltipTitle || "Groupedbar Title")
+    if (notNull(tooltipTitle)) {
+      tooltip.title(tooltipTitle)
+    } else if (datasource.label) {
+      tooltip.title(datasource.label)
+    }
  }

  function bindChartEvents() {
--- a/packages/standard-components/src/Chart/Line.svelte
+++ b/packages/standard-components/src/Chart/Line.svelte
@ -1,17 +1,16 @@
 <script>
  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
+  import fetchData from "../fetchData.js"
  import britecharts from "britecharts"
  import { onMount } from "svelte"
+  import { isEmpty } from "lodash/fp"

  import { select } from "d3-selection"
  import shortid from "shortid"

  const _id = shortid.generate()

-  export let _bb
-  export let model
-
-  let store = _bb.store
+  export let datasource = {}

  const chart = britecharts.line()
  const chartClass = `line-container-${_id}`
@ -65,13 +64,23 @@
  export let tooltipTitle = ""

  onMount(async () => {
-    if (model) {
+    if (!isEmpty(datasource)) {
      data = await getAndPrepareData()
+
      if (data.dataByTopic.length > 0) {
        chartContainer = select(`.${chartClass}`)
        bindChartUIProps()
        bindChartEvents()
        chartContainer.datum(data).call(chart)
+
+        // X Axis Label gets cut off unless we do this 👇
+        const chartSvg = document.querySelector(`.${chartClass} .britechart`)
+        if (chartSvg) {
+          let height = chartSvg.getAttribute("height")
+          height = parseInt(height) + 35
+          chartSvg.setAttribute("height", height)
+        }
+
        bindTooltip()
      } else {
        console.error(
@ -89,20 +98,6 @@
    tooltipContainer.datum([]).call(tooltip)
  }

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  const schemaIsValid = data =>
    hasProp(data, valueLabel) &&
    hasProp(data, dateLabel) &&
@ -124,8 +119,7 @@
      dateLabel = "date"
    }

-    await fetchData()
-    _data = $store[model]
+    _data = await fetchData(datasource)

    if (schemaIsValid(_data)) {
      _data.forEach((data, idx, arr) => {
@ -220,8 +214,11 @@
    if (notNull(lines)) {
      chart.lines(lines)
    }
-
-    tooltip.title(tooltipTitle || "Line Tooltip")
+    if (notNull(tooltipTitle)) {
+      tooltip.title(tooltipTitle)
+    } else if (datasource.label) {
+      tooltip.title(datasource.label)
+    }
  }

  function bindChartEvents() {
@ -246,4 +243,4 @@
  $: chartGradient = getChartGradient(lineGradient)
 </script>

-<div bind:this={chartElement} class={chartClass} />
+<div bind this:👇={chartElement} class={chartClass} />
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@ -1,6 +1,7 @@
 <script>
  import { onMount } from "svelte"
  import { fade } from "svelte/transition"
+  import { Label } from "@budibase/bbui"

  export let _bb
  export let model
@ -167,7 +168,7 @@
  <div class="form-content">
    {#each fields as field}
      <div class="form-item">
-        <label class="form-label" for="form-stacked-text">{field}</label>
+        <Label small forAttr={'form-stacked-text'}>{field}</Label>
        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
          <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
            {#each schema[field].constraints.inclusion as opt}
@ -223,11 +224,6 @@
    margin-bottom: 16px;
  }

-  .form-label {
-    font-weight: bold;
-    margin-bottom: 12px;
-  }
-
  hr {
    border: 1px solid var(--grey-1);
    margin: 20px 0px;
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@ -1,6 +1,7 @@
 <script>
  import { onMount } from "svelte"
  import { fade } from "svelte/transition"
+  import { Label } from "@budibase/bbui"

  export let _bb
  export let model
@ -167,7 +168,7 @@
  <div class="form-content">
    {#each fields as field}
      <div class="form-item">
-        <label class="form-label" for="form-stacked-text">{field}</label>
+        <Label small forAttr={'form-stacked-text'}>{field}</Label>
        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
          <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
            {#each schema[field].constraints.inclusion as opt}
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@ -4,17 +4,17 @@
  import ArrowUp from "./icons/ArrowUp.svelte"
  import ArrowDown from "./icons/ArrowDown.svelte"
  import fsort from "fast-sort"
+  import fetchData from "./fetchData.js"
+  import { isEmpty } from "lodash/fp"

-  export let _bb
-  export let onLoad
-  export let model
  export let backgroundColor
  export let color
  export let stripeColor
  export let borderColor
+  export let datasource = {}

+  let data = []
  let headers = []
-  let store = _bb.store
  let sort = {}
  let sorted = []

@ -25,9 +25,16 @@
    borderColor,
  }

-  $: data = $store[model] || []
  $: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data
-  $: if (model) fetchData()
+
+  onMount(async () => {
+    if (!isEmpty(datasource)) {
+      data = await fetchData(datasource)
+      if (data) {
+        headers = Object.keys(data[0]).filter(shouldDisplayField)
+      }
+    }
+  })

  const shouldDisplayField = name => {
    if (name.startsWith("_")) return false
@ -39,24 +46,6 @@
    return true
  }

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-
-      headers = Object.keys(json[0]).filter(shouldDisplayField)
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  function sortColumn(column) {
    if (column === sort.column) {
      sort = {
@ -71,10 +60,6 @@
      direction: "asc",
    }
  }
-
-  onMount(async () => {
-    await fetchData()
-  })
 </script>

 <table use:cssVars={cssVariables}>
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@ -1,34 +1,21 @@
 <script>
  import { onMount } from "svelte"
+  import fetchData from "./fetchData.js"
+  import { isEmpty } from "lodash/fp"

  export let _bb
-  export let model
+  export let datasource = []

-  let headers = []
-  let store = _bb.store
  let target

-  async function fetchData() {
-    if (!model || !model.length) return
-
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-
+  onMount(async () => {
+    if (!isEmpty(datasource)) {
+      const data = await fetchData(datasource)
      _bb.attachChildren(target, {
        hydrate: false,
-        context: json,
+        context: data,
      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
    }
-  }
-
-  $: if (model) fetchData()
-
-  onMount(async () => {
-    await fetchData()
  })
 </script>

--- a/packages/standard-components/src/api.js
+++ b/packages/standard-components/src/api.js
@ -0,0 +1,26 @@
+const apiCall = method => async (url, body) => {
+  const headers = {
+    "Content-Type": "application/json",
+  }
+  const response = await fetch(url, {
+    method: method,
+    body: body && JSON.stringify(body),
+    headers,
+  })
+
+  return response
+}
+
+export const post = apiCall("POST")
+export const get = apiCall("GET")
+export const patch = apiCall("PATCH")
+export const del = apiCall("DELETE")
+export const put = apiCall("PUT")
+
+export default {
+  post: apiCall("POST"),
+  get: apiCall("GET"),
+  patch: apiCall("PATCH"),
+  delete: apiCall("DELETE"),
+  put: apiCall("PUT"),
+}
--- a/packages/standard-components/src/fetchData.js
+++ b/packages/standard-components/src/fetchData.js
@ -0,0 +1,35 @@
+import api from "./api"
+
+export default async function fetchData(datasource) {
+  const { isModel, name } = datasource
+
+  if (name) {
+    return isModel ? await fetchModelData() : await fetchViewData()
+  }
+
+  async function fetchModelData() {
+    if (!name.startsWith("all_")) {
+      throw new Error("Incorrect model convention - must begin with all_")
+    }
+    const modelsResponse = await api.get(`/api/views/${name}`)
+    return await modelsResponse.json()
+  }
+
+  async function fetchViewData() {
+    const { field, groupBy } = datasource
+    const params = new URLSearchParams()
+
+    if (field) {
+      params.set("field", field)
+      params.set("stats", true)
+    }
+    if (groupBy) params.set("group", groupBy)
+
+    let QUERY_VIEW_URL = field
+      ? `/api/views/${name}?${params}`
+      : `/api/views/${name}`
+
+    const response = await api.get(QUERY_VIEW_URL)
+    return await response.json()
+  }
+}