Fix all eslint issues

2021-06-15 19:36:56 +01:00 · 2021-06-15 19:36:56 +01:00 · 38e064fa0f
parent ef97b1e5ff
commit 38e064fa0f
97 changed files with 73 additions and 336 deletions
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@ -58,6 +58,7 @@
    class:is-focused={open || focus}
  >
    <input
+      {id}
      type="text"
      on:focus={() => (focus = true)}
      on:blur={() => (focus = false)}
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@ -10,7 +10,6 @@
  export let id = null
  export let disabled = false
  export let error = null
-  export let isPlaceholder = false
  export let enableTime = true
  export let value = null
  export let placeholder = null
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@ -30,9 +30,6 @@
    "bmp",
    "jfif",
  ]
-  const onChange = event => {
-    dispatch("change", event.target.checked)
-  }

  const fieldId = id || generateID()
  let selectedImageIdx = 0
@ -205,7 +202,8 @@
        width="125"
        height="60"
        viewBox="0 0 199 97.7"
-        ><defs>
+      >
+        <defs>
          <style>
            .cls-1,
            .cls-2 {
@ -267,9 +265,9 @@
        <p
          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
        >
-          <label for={fieldId} class="spectrum-Link"
-            >Select a file to upload</label
-          >
+          <label for={fieldId} class="spectrum-Link">
+            Select a file to upload
+          </label>
          <br />
          from your computer
        </p>
@ -368,22 +366,11 @@
  .right {
    right: 5px;
  }
-  i {
-    font-size: 2rem;
-    color: var(--ink);
-  }
-  i:hover {
-    cursor: pointer;
-    color: var(--background);
-  }
  .delete-button {
    transition: all 0.3s;
    margin-left: 10px;
    display: flex;
  }
-  .delete-button i {
-    font-size: 2em;
-  }
  .delete-button:hover {
    cursor: pointer;
    color: var(--red);
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@ -10,6 +10,7 @@
  export let options = []
  export let getOptionLabel = option => option
  export let getOptionValue = option => option
+  export let readonly = false

  const dispatch = createEventDispatcher()
  $: selectedLookupMap = getSelectedLookupMap(value)
@ -72,6 +73,7 @@
  {id}
  {error}
  {disabled}
+  {readonly}
  {fieldText}
  {options}
  isPlaceholder={!value?.length}
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@ -22,7 +22,7 @@
  export let quiet = false

  const dispatch = createEventDispatcher()
-  const onClick = e => {
+  const onClick = () => {
    dispatch("click")
    if (readonly) {
      return
--- a/packages/bbui/src/Form/Core/RadioGroup.svelte
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@ -32,7 +32,9 @@
          {disabled}
        />
        <span class="spectrum-Radio-button" />
-        <label class="spectrum-Radio-label">{getOptionLabel(option)}</label>
+        <label for="" class="spectrum-Radio-label">
+          {getOptionLabel(option)}
+        </label>
      </div>
    {/each}
  {/if}
--- a/packages/bbui/src/Form/Core/Switch.svelte
+++ b/packages/bbui/src/Form/Core/Switch.svelte
@ -3,7 +3,6 @@
  import { createEventDispatcher } from "svelte"

  export let value = false
-  export let error = null
  export let id = null
  export let text = null
  export let disabled = false
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@ -25,6 +25,7 @@
  <Multiselect
    {error}
    {disabled}
+    {readonly}
    {value}
    {options}
    {placeholder}
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@ -10,7 +10,11 @@
  export let hoverable = false
  export let disabled = false

-  $: rotation = directions.indexOf(direction) * 45
+  $: rotation = getRotation(direction)
+
+  const getRotation = direction => {
+    return directions.indexOf(direction) * 45
+  }
 </script>

 <svg
--- a/packages/bbui/src/Label/Label.svelte
+++ b/packages/bbui/src/Label/Label.svelte
@ -4,7 +4,7 @@
  export let size = "M"
 </script>

-<label class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
+<label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
  <slot />
 </label>

--- a/packages/bbui/src/Modal/Content.svelte
+++ b/packages/bbui/src/Modal/Content.svelte
@ -4,14 +4,3 @@
 </script>

 <Input label="Your Name" bind:value />
-
-<style>
-  p {
-    font-size: var(--font-size-m);
-    margin: 0;
-    font-family: var(--font-sans);
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--grey-7);
-  }
-</style>
--- a/packages/bbui/src/Modal/QuizModal.svelte
+++ b/packages/bbui/src/Modal/QuizModal.svelte
@ -1,5 +1,4 @@
 <script>
-  import { onMount } from "svelte"
  import ModalContent from "./ModalContent.svelte"
  import Input from "../Form/Input.svelte"

--- a/packages/bbui/src/ProgressBar/ProgressBar.svelte
+++ b/packages/bbui/src/ProgressBar/ProgressBar.svelte
@ -8,7 +8,6 @@
  export let duration = 1000
  export let width = false
  export let sideLabel = false
-  export let overBackground = false

  export let size = "M"

--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@ -10,7 +10,6 @@
  export let value
  export let customRenderers = []

-  const plainTypes = ["string", "options", "number", "longform"]
  const typeMap = {
    boolean: BooleanRenderer,
    datetime: DateTimeRenderer,
--- a/packages/bbui/src/Table/SelectEditRenderer.svelte
+++ b/packages/bbui/src/Table/SelectEditRenderer.svelte
@ -3,7 +3,6 @@
  import ActionButton from "../ActionButton/ActionButton.svelte"

  export let selected
-  export let onToggleSelection
  export let onEdit
  export let allowSelectRows = false
  export let allowEditRows = false
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
@ -48,7 +48,7 @@
          return
        }
        formattedTagline = formattedTagline.replace(
-          new RegExp(`{{\s*${inputPath}\s*}}`),
+          new RegExp(`{{\\s*${inputPath}\\s*}}`),
          prettyValue
        )
      }
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -84,14 +84,4 @@
    background-color: var(--grey-2);
    color: var(--grey-8);
  }
-  header i {
-    font-size: 20px;
-  }
-  header i.delete {
-    opacity: 0.5;
-  }
-  header i.delete:hover {
-    cursor: pointer;
-    opacity: 1;
-  }
 </style>
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@ -53,8 +53,4 @@
    text-decoration: underline;
    margin-left: var(--spectrum-alias-item-padding-s);
  }
-  i {
-    font-size: 20px;
-    text-decoration: none;
-  }
 </style>
--- a/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Select, Label, Heading, Input } from "@budibase/bbui"
+  import { Button, Select, Input } from "@budibase/bbui"

  export let value

--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@ -11,7 +11,6 @@
  import * as api from "./api"
  import Table from "./Table.svelte"
  import { TableNames } from "constants"
-  import CreateEditUser from "./modals/CreateEditUser.svelte"
  import CreateEditRow from "./modals/CreateEditRow.svelte"

  let hideAutocolumns = true
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -18,7 +18,6 @@
  export let title
  export let allowEditing = false
  export let loading = false
-  export let theme = "alpine"
  export let hideAutocolumns
  export let rowCount

@ -149,11 +148,6 @@
    justify-content: flex-start;
    align-items: center;
  }
-  .table-title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 600;
-    margin: 0;
-  }
  .table-title > div {
    margin-left: var(--spacing-xs);
  }
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"

  export let selectedRows
--- a/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
@ -19,7 +19,6 @@
  ]

  export let view = {}
-  export let onClosed

  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
  $: fields =
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -33,7 +33,6 @@
  let fieldDefinitions = cloneDeep(FIELDS)
  const { hide } = getContext(Context.Modal)

-  export let onClosed = () => {}
  export let field = {
    type: "string",
    constraints: fieldDefinitions.STRING.constraints,
--- a/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
@ -5,8 +5,6 @@
  import { tables } from "stores/backend"
  import analytics from "analytics"

-  export let onClosed
-
  let name
  let field

--- a/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
@ -56,7 +56,6 @@
  ]

  export let view = {}
-  export let onClosed

  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
  $: fields = viewTable && Object.keys(viewTable.schema)
--- a/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
@ -1,10 +1,9 @@
 <script>
-  import { Button, Select, ModalContent, notifications } from "@budibase/bbui"
+  import { Select, ModalContent, notifications } from "@budibase/bbui"
  import { tables, views } from "stores/backend"
  import { FIELDS } from "constants/backend"

  export let view = {}
-  export let onClosed

  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
  $: fields =
--- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
@ -12,7 +12,6 @@

  export let resourceId
  export let permissions
-  export let onClosed

  async function changePermission(level, role) {
    await permissionsStore.save({
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@ -2,7 +2,7 @@
  import { goto } from "@roxi/routify"
  import { datasources } from "stores/backend"
  import { notifications } from "@budibase/bbui"
-  import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"

  export let datasource
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@ -27,7 +27,6 @@

  $: tableNames = $tables.list.map(table => table.name)

-  let modal
  let name
  let dataImport
  let error = ""
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@ -117,22 +117,4 @@
    margin-top: 4px;
    font-weight: 600;
  }
-
-  .actions {
-    padding: var(--spacing-xl);
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 600;
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
 </style>
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@ -15,7 +15,6 @@
  export let view

  let editorModal
-  let confirmDeleteDialogue
  let originalName = view.name
  let confirmDeleteDialog

--- a/packages/builder/src/components/common/ValuesList.svelte
+++ b/packages/builder/src/components/common/ValuesList.svelte
@ -1,6 +1,6 @@
 <script>
  import { join } from "lodash/fp"
-  import { TextArea, Label } from "@budibase/bbui"
+  import { TextArea } from "@budibase/bbui"

  export let values
  export let label
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@ -15,7 +15,6 @@

  const dispatch = createEventDispatcher()

-  export let bindingContainer
  export let bindableProperties = []
  export let validity = true
  export let value = ""
@ -50,9 +49,7 @@
      <div class="section">
        {#each categories as [categoryName, bindings]}
          <Heading size="XS">{categoryName}</Heading>
-          {#each bindings.filter(binding =>
-            binding.label.match(searchRgx)
-          ) as binding}
+          {#each bindings.filter( binding => binding.label.match(searchRgx) ) as binding}
            <div
              class="binding"
              on:click={() => {
--- a/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
+++ b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
@ -12,6 +12,7 @@
    "",
    requiredValidator
  )
+  // eslint-disable-next-line no-unused-vars
  const [repeatPassword, _, repeatTouched] = createValidationStore(
    "",
    requiredValidator
--- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
+++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
@ -3,7 +3,6 @@
  import { ModalContent } from "@budibase/bbui"
  import { onMount } from "svelte"
  import WebhookDisplay from "../automation/Shared/WebhookDisplay.svelte"
-  import analytics from "analytics"

  let webhookUrls = []

--- a/packages/builder/src/components/deploy/DeployModal.svelte
+++ b/packages/builder/src/components/deploy/DeployModal.svelte
@ -14,7 +14,6 @@

  const POLL_INTERVAL = 10000

-  let loading = false
  let feedbackModal
  let deployments = []
  let poll
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@ -2,7 +2,7 @@
  import { onMount, onDestroy } from "svelte"
  import Spinner from "components/common/Spinner.svelte"
  import { slide } from "svelte/transition"
-  import { Heading, Body, Button, Modal, ModalContent } from "@budibase/bbui"
+  import { Heading, Button, Modal, ModalContent } from "@budibase/bbui"
  import api from "builderStore/api"
  import { notifications } from "@budibase/bbui"
  import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
@ -160,11 +160,6 @@
    overflow-y: auto;
  }

-  h4 {
-    margin-top: var(--spacing-xl);
-    margin-bottom: var(--spacing-s);
-  }
-
  header {
    padding-left: var(--spacing-l);
    padding-bottom: var(--spacing-xl);
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@ -1,14 +1,6 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
-  import {
-    Button,
-    Icon,
-    Modal,
-    notifications,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { Icon, Modal, notifications, ModalContent } from "@budibase/bbui"
  import { store } from "builderStore"
-  import { apps } from "stores/portal"
  import api from "builderStore/api"

  let revertModal
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@ -1,11 +1,5 @@
 <script>
-  import {
-    ActionMenu,
-    ActionGroup,
-    ActionButton,
-    MenuItem,
-    Icon,
-  } from "@budibase/bbui"
+  import { ActionMenu, ActionButton, MenuItem, Icon } from "@budibase/bbui"
  import { store, currentAssetName } from "builderStore"
  import structure from "./componentStructure.json"

--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@ -1,6 +1,6 @@
 <script>
  import { onMount } from "svelte"
-  import { store, currentAsset, selectedComponent } from "builderStore"
+  import { store, currentAsset } from "builderStore"
  import iframeTemplate from "./iframeTemplate"
  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
  import { FrontendTypes } from "constants"
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@ -8,7 +8,6 @@
  export let component

  let confirmDeleteDialog
-  let anchor

  $: definition = store.actions.components.getDefinition(component?._component)
  $: noChildrenAllowed = !component || !definition?.hasChildren
@ -115,12 +114,3 @@
  okText="Delete Component"
  onOk={deleteComponent}
 />
-
-<style>
-  hr {
-    margin: 8px 0;
-    background-color: var(--grey-4);
-    height: 1px;
-    border: none;
-  }
-</style>
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
@ -1,6 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import { store, currentAssetId } from "builderStore"
+  import { store } from "builderStore"
  import { DropEffect, DropPosition } from "./dragDropStore"
  import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
  import NavItem from "components/common/NavItem.svelte"
--- a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
@ -1,5 +1,4 @@
 <script>
-  import { goto } from "@roxi/routify"
  import { notifications } from "@budibase/bbui"
  import { store } from "builderStore"
  import { Input, ModalContent } from "@budibase/bbui"
--- a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
@ -1,7 +1,7 @@
 <script>
  export let categories = []
  export let selectedCategory = {}
-  export let onClick = category => {}
+  export let onClick = () => {}
 </script>

 <div class="tabs">
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@ -131,8 +131,4 @@
    min-height: 120px;
    font-size: var(--font-size-xs);
  }
-
-  option {
-    text-transform: capitalize;
-  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@ -3,17 +3,10 @@
  import { store, selectedComponent, currentAsset } from "builderStore"
  import { Tabs, Tab } from "@budibase/bbui"
  import { FrontendTypes } from "constants"
-  import CategoryTab from "./CategoryTab.svelte"
  import DesignView from "./DesignView.svelte"
  import SettingsView from "./SettingsView.svelte"
  import { setWith } from "lodash"

-  const categories = [
-    { value: "settings", name: "Settings" },
-    { value: "design", name: "Design" },
-  ]
-  let selectedCategory = categories[0]
-
  $: definition = store.actions.components.getDefinition(
    $selectedComponent._component
  )
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@ -6,7 +6,6 @@
  import { createEventDispatcher, onMount } from "svelte"

  export let value
-  export let onChange

  const dispatch = createEventDispatcher()
  const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@ -103,8 +103,9 @@
  }

  function fetchQueryDefinition(query) {
-    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
-      .source
+    const source = $datasources.list.find(
+      ds => ds._id === query.datasourceId
+    ).source
    return $integrations[source].query[query.queryVerb]
  }
 </script>
@ -264,12 +265,6 @@
    background-color: var(--spectrum-global-color-gray-200);
  }

-  .drawer-contents {
-    padding: var(--spacing-l);
-    height: calc(40vh - 2 * var(--spacing-l));
-    overflow-y: auto;
-  }
-
  i {
    margin-left: 5px;
    display: flex;
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@ -153,16 +153,6 @@
    color: var(--ink);
  }

-  .available-action {
-    padding: var(--spacing-s);
-    font-size: var(--font-size-s);
-    cursor: pointer;
-  }
-
-  .available-action:hover {
-    background: var(--grey-2);
-  }
-
  .action-container {
    border-bottom: 1px solid var(--grey-1);
    display: flex;
@ -171,9 +161,4 @@
  .action-container:last-child {
    border-bottom: none;
  }
-
-  i:hover {
-    color: var(--red);
-    cursor: pointer;
-  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Layout } from "@budibase/bbui"
+  import { Select, Layout } from "@budibase/bbui"
  import { store, currentAsset } from "builderStore"
  import { datasources, integrations, queries } from "stores/backend"
  import { getBindableProperties } from "builderStore/dataBinding"
@ -18,8 +18,9 @@
  )

  function fetchQueryDefinition(query) {
-    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
-      .source
+    const source = $datasources.list.find(
+      ds => ds._id === query.datasourceId
+    ).source
    return $integrations[source].query[query.queryVerb]
  }
 </script>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@ -6,9 +6,6 @@

  export let parameters

-  let bindingDrawer
-  let tempValue = parameters.url
-
  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>

--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
@ -9,7 +9,6 @@

  export let componentInstance = {}
  export let value = ""
-  export let multiselect = false
  export let placeholder

  const dispatch = createEventDispatcher()
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
@ -14,7 +14,6 @@
  } from "builderStore/dataBinding"
  import LuceneFilterBuilder from "./LuceneFilterBuilder.svelte"
  import { currentAsset } from "builderStore"
-  import SaveFields from "../EventsEditor/actions/SaveFields.svelte"

  const dispatch = createEventDispatcher()

--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte
@ -9,12 +9,9 @@
  } from "@budibase/bbui"
  import { store, currentAsset } from "builderStore"
  import { getBindableProperties } from "builderStore/dataBinding"
-  import { createEventDispatcher } from "svelte"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
  import { generate } from "shortid"

-  const dispatch = createEventDispatcher()
-
  export let schemaFields
  export let value

--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
@ -6,7 +6,7 @@
  export let isMultiSelect = false
  export let value = []
  export let initialValue = ""
-  export let onChange = selected => {}
+  export let onChange = () => {}

  onMount(() => {
    if (!value && !!initialValue) {
@ -28,9 +28,6 @@
    }
    onChange(val)
  }
-
-  const checkSelected = val =>
-    isMultiSelect ? value.includes(val) : value === val
 </script>

 <div class="flatbutton-group">
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@ -9,7 +9,6 @@

  export let componentInstance
  export let value
-  export let onChange
  export let type

  $: form = findClosestMatchingComponent(
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
@ -57,7 +57,7 @@
  let loading = false

  function findIconByTerm(term) {
-    const r = new RegExp(`\^${term}`, "i")
+    const r = new RegExp(`^${term}`, "i")
    return icons.filter(i => r.test(i))
  }

@ -99,7 +99,7 @@
    loading = false
  }

-  async function searchForIcon(e) {
+  async function searchForIcon() {
    currentPage = 1
    loading = true
    filteredIcons = findIconByTerm(searchTerm)
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
@ -9,7 +9,6 @@

  export let componentInstance = {}
  export let value = ""
-  export let multiselect = false
  export let placeholder

  const dispatch = createEventDispatcher()
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer, Body } from "@budibase/bbui"
+  import { Button, Icon, Drawer } from "@budibase/bbui"
  import { store, currentAsset } from "builderStore"
  import {
    getBindableProperties,
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@ -17,8 +17,11 @@
  }

  const getControlProps = props => {
-    const { label, key, control, ...otherProps } = props || {}
-    return otherProps || {}
+    let controlProps = { ...(props || {}) }
+    delete controlProps.label
+    delete controlProps.key
+    delete controlProps.control
+    return controlProps
  }
 </script>

--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@ -42,13 +42,6 @@
    { key: "routing.roleId", label: "Access", control: RoleSelect },
    { key: "layoutId", label: "Layout", control: LayoutSelect },
  ]
-  const assetProps = [
-    "title",
-    "description",
-    "routing.route",
-    "layoutId",
-    "routing.roleId",
-  ]
  let confirmResetFieldsDialog

  $: settings = componentDefinition?.settings ?? []
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@ -46,8 +46,4 @@
    align-items: center;
    margin-bottom: var(--spacing-m);
  }
-
-  .ri-close-circle-fill {
-    cursor: pointer;
-  }
 </style>
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@ -77,8 +77,6 @@
  const refs = {}
  let editor
  let updating_externally = false
-  let marker
-  let error_line
  let destroyed = false

  $: if (editor && width && height) {
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@ -59,14 +59,6 @@
 {/if}

 <style>
-  .field {
-    margin-bottom: var(--spacing-m);
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
-
  .horizontal {
    display: grid;
    grid-template-columns: 20% 1fr;
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -216,15 +216,6 @@
    gap: var(--spacing-l);
  }

-  .button-container {
-    display: flex;
-  }
-
-  .delete {
-    align-self: center;
-    cursor: pointer;
-  }
-
  .viewer {
    min-height: 200px;
  }
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@ -17,10 +17,6 @@
 </Modal>

 <style>
-  i {
-    font-size: 18px;
-    color: var(--grey-7);
-  }
  .topnavitemright {
    cursor: pointer;
    color: var(--grey-7);
@ -34,7 +30,4 @@
    height: 24px;
    width: 24px;
  }
-  .topnavitemright:hover i {
-    color: var(--ink);
-  }
 </style>
--- a/packages/builder/src/components/settings/tabs/Integrations.svelte
+++ b/packages/builder/src/components/settings/tabs/Integrations.svelte
@ -37,9 +37,4 @@
    font-size: 14px;
    font-weight: bold;
  }
-  .background {
-    border-radius: 5px;
-    background-color: var(--light-grey);
-    padding: 12px 12px 18px 12px;
-  }
 </style>
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -1,6 +1,5 @@
 <script>
  import { Button, Heading, Body } from "@budibase/bbui"
-  import AppCard from "./AppCard.svelte"
  import Spinner from "components/common/Spinner.svelte"
  import api from "builderStore/api"

@ -27,7 +26,7 @@
          <Heading size="S">{template.name}</Heading>
          <Body size="M" grey>{template.category}</Body>
          <Body size="S" black>{template.description}</Body>
-          <div><img src={template.image} width="100%" /></div>
+          <div><img alt="template" src={template.image} width="100%" /></div>
          <div class="card-footer">
            <Button secondary on:click={() => onSelect(template)}>
              Create
--- a/packages/builder/src/pages/builder/admin/index.svelte
+++ b/packages/builder/src/pages/builder/admin/index.svelte
@ -36,7 +36,7 @@
 <section>
  <div class="container">
    <Layout>
-      <img src={Logo} />
+      <img alt="logo" src={Logo} />
      <Layout gap="XS" justifyItems="center" noPadding>
        <Heading size="M">Create an admin user</Heading>
        <Body size="M" textAlign="center">
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -1,7 +1,7 @@
 <script>
  import { store, automationStore } from "builderStore"
  import { roles } from "stores/backend"
-  import { Button, Icon, ActionGroup, Tabs, Tab } from "@budibase/bbui"
+  import { Icon, ActionGroup, Tabs, Tab } from "@budibase/bbui"
  import DeployModal from "components/deploy/DeployModal.svelte"
  import RevertModal from "components/deploy/RevertModal.svelte"
  import { get } from "builderStore/api"
@ -113,11 +113,6 @@
    flex-direction: column;
  }

-  a {
-    text-transform: none;
-    color: var(--grey-5);
-  }
-
  .top-nav {
    flex: 0 0 auto;
    background: var(--background);
@ -150,23 +145,6 @@
    margin-bottom: -1px;
  }

-  .topnavitemright a {
-    cursor: pointer;
-    color: var(--grey-7);
-    margin: 0 12px 0 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 24px;
-    width: 24px;
-  }
-
-  .topnavitemright a:hover {
-    color: var(--ink);
-    font-weight: 600;
-  }
-
  .home-logo {
    border-style: none;
    background-color: rgba(0, 0, 0, 0);
@ -184,12 +162,4 @@
  .home-logo img {
    height: 30px;
  }
-
-  i {
-    font-size: 18px;
-    color: var(--grey-7);
-  }
-  i:hover {
-    color: var(--ink);
-  }
 </style>
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@ -3,17 +3,6 @@
  import { database, queries } from "stores/backend"
  import QueryInterface from "components/integration/QueryViewer.svelte"

-  async function fetchQueryConfig() {
-    try {
-      const response = await api.get(`/api/integrations/${datasource.source}`)
-      const json = await response.json()
-      config = json.query
-    } catch (err) {
-      notifications.error("Error fetching datasource configuration options.")
-      console.error(err)
-    }
-  }
-
  $: selectedQuery = $queries.list.find(
    query => query._id === $queries.selected
  ) || {
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -28,7 +28,7 @@
    unsaved = true
  }

-  $beforeUrlChange((event, store) => {
+  $beforeUrlChange(() => {
    if (unsaved) {
      notifications.error(
        "Unsaved changes. Please save your datasource configuration before leaving."
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
@ -1,5 +1,5 @@
 <script>
-  import { datasources, tables } from "stores/backend"
+  import { datasources } from "stores/backend"
  import { goto } from "@roxi/routify"
  import { onMount } from "svelte"

--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -13,7 +13,7 @@
  } from "@budibase/bbui"
  import { onMount } from "svelte"
  import { apps, organisation, auth } from "stores/portal"
-  import { goto, redirect } from "@roxi/routify"
+  import { goto } from "@roxi/routify"
  import { AppStatus } from "constants"
  import { gradient } from "actions"
  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
@ -46,7 +46,7 @@
    <Page>
      <div class="content">
        <Layout noPadding>
-          <img src={$organisation.logoUrl || Logo} />
+          <img alt="logo" src={$organisation.logoUrl || Logo} />
          <div class="info-title">
            <Layout noPadding gap="XS">
              <Heading size="L">
--- a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
@ -35,8 +35,4 @@
  .inner p {
    margin: 0;
  }
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
 </style>
--- a/packages/builder/src/pages/builder/auth/forgot.svelte
+++ b/packages/builder/src/pages/builder/auth/forgot.svelte
@ -26,7 +26,7 @@
  <div class="main">
    <Layout>
      <Layout noPadding justifyItems="center">
-        <img src={$organisation.logoUrl || Logo} />
+        <img alt="logo" src={$organisation.logoUrl || Logo} />
      </Layout>
      <Layout gap="XS" noPadding>
        <Heading textAlign="center">Forgotten your password?</Heading>
--- a/packages/builder/src/pages/builder/auth/login.svelte
+++ b/packages/builder/src/pages/builder/auth/login.svelte
@ -50,7 +50,7 @@
  <div class="main">
    <Layout>
      <Layout noPadding justifyItems="center">
-        <img src={Logo} />
+        <img alt="logo" src={Logo} />
        <Heading>Sign in to Budibase</Heading>
      </Layout>
      <GoogleButton />
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@ -25,7 +25,7 @@
 <section>
  <div class="container">
    <Layout>
-      <img src={Logo} />
+      <img src={Logo} alt="logo" />
      <Layout gap="XS" justifyItems="center" noPadding>
        <Heading size="M">Accept Invitation</Heading>
        <Body textAlign="center" size="M">
--- a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
@ -6,7 +6,6 @@
    Heading,
    ActionButton,
    Body,
-    Page,
    Layout,
    notifications,
    Tabs,
@ -128,7 +127,7 @@
  </Tab>
  <Tab title="Preview">
    <div class="preview">
-      <iframe srcdoc={previewContent} />
+      <iframe title="preview" srcdoc={previewContent} />
    </div>
  </Tab>
 </Tabs>
--- a/packages/builder/src/pages/builder/portal/manage/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/index.svelte
@ -51,10 +51,12 @@

    if (response.status !== 200) {
      const error = await response.text()
-      let message = error
+      let message
      try {
        message = JSON.parse(error).message
-      } catch (err) {}
+      } catch (err) {
+        message = error
+      }
      notifications.error(`Failed to save email settings, reason: ${message}`)
    } else {
      const json = await response.json()
--- a/packages/builder/src/pages/builder/portal/settings/organisation.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
@ -12,7 +12,7 @@
    notifications,
  } from "@budibase/bbui"
  import { auth, organisation } from "stores/portal"
-  import { post, get } from "builderStore/api"
+  import { post } from "builderStore/api"
  import analytics from "analytics"
  import { writable } from "svelte/store"
  import { redirect } from "@roxi/routify"
--- a/packages/builder/src/pages/builder/portal/settings/update.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/update.svelte
@ -5,16 +5,9 @@
    Body,
    Button,
    Divider,
-    Label,
-    Input,
-    Toggle,
-    Dropzone,
    notifications,
  } from "@budibase/bbui"
-  import { auth, organisation } from "stores/portal"
-  import { post, get } from "builderStore/api"
-  import analytics from "analytics"
-  import { writable } from "svelte/store"
+  import { auth } from "stores/portal"
  import { redirect } from "@roxi/routify"

  // Only admins allowed here
@ -27,7 +20,7 @@
  async function updateBudibase() {
    try {
      notifications.info("Updating budibase..")
-      const response = await fetch("/v1/update", {
+      await fetch("/v1/update", {
        headers: {
          Authorization: "Bearer budibase",
        },
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@ -2,8 +2,6 @@
  export let title = ""
  export let favicon = ""

-  export let appId
-  export let production
  export let clientLibPath
 </script>

--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@ -4,7 +4,6 @@
  const { styleable } = getContext("sdk")
  const component = getContext("component")

-  export let className = "default"
  export let disabled = false
  export let text = ""
  export let onClick
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@ -1,7 +1,7 @@
 <script>
  import { getContext } from "svelte"

-  const { styleable, transition, builderStore } = getContext("sdk")
+  const { styleable, transition } = getContext("sdk")
  const component = getContext("component")

  export let direction
--- a/packages/standard-components/src/DateRangePicker.svelte
+++ b/packages/standard-components/src/DateRangePicker.svelte
@ -11,9 +11,8 @@
  export let field
  export let defaultValue

-  const dataContext = getContext("context")
  const component = getContext("component")
-  const { styleable, builderStore, ActionTypes, getAction } = getContext("sdk")
+  const { styleable, ActionTypes, getAction } = getContext("sdk")

  const setQuery = getAction(dataProvider?.id, ActionTypes.SetDataProviderQuery)
  const options = [
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@ -1,7 +1,7 @@
 <script>
  import { getContext } from "svelte"

-  const { authStore, linkable, styleable, builderStore } = getContext("sdk")
+  const { linkable, styleable } = getContext("sdk")
  const component = getContext("component")

  // BB emblem: https://i.imgur.com/Xhdt1YP.png
@ -48,18 +48,6 @@
    margin-right: 16px;
  }

-  .nav__controls {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 16px;
-  }
-  .nav__controls > div:hover {
-    cursor: pointer;
-    color: #4285f4;
-  }
-
  .nav__menu {
    display: flex;
    flex-direction: row;
--- a/packages/standard-components/src/Repeater.svelte
+++ b/packages/standard-components/src/Repeater.svelte
@ -5,9 +5,8 @@
  export let dataProvider
  export let noRowsMessage

-  const { API, styleable, builderStore, Provider } = getContext("sdk")
+  const { styleable, Provider } = getContext("sdk")
  const component = getContext("component")
-  const context = getContext("context")

  $: rows = dataProvider?.rows ?? []
  $: loaded = dataProvider?.loaded ?? true
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@ -10,7 +10,6 @@
  export let yAxisLabel
  export let height
  export let width
-  export let color
  export let dataLabels
  export let animate
  export let legend
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@ -11,7 +11,6 @@
  export let yAxisLabel
  export let height
  export let width
-  export let color
  export let animate
  export let dataLabels
  export let curve
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@ -8,7 +8,6 @@
  export let valueColumn
  export let height
  export let width
-  export let color
  export let dataLabels
  export let animate
  export let legend
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@ -9,14 +9,11 @@

  let fieldState
  let fieldApi
-  let fieldSchema

  const { API, notifications } = getContext("sdk")
  const formContext = getContext("form")
  const BYTES_IN_MB = 1000000

-  export let files = []
-
  const handleFileTooLarge = fileSizeLimit => {
    notifications.warning(
      `Files cannot exceed ${
--- a/packages/standard-components/src/forms/FieldGroupFallback.svelte
+++ b/packages/standard-components/src/forms/FieldGroupFallback.svelte
@ -2,7 +2,6 @@
  import { getContext } from "svelte"

  const fieldGroupContext = getContext("fieldGroup")
-  const labelPosition = fieldGroupContext?.labelPosition || "above"
 </script>

 {#if fieldGroupContext}
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@ -8,11 +8,9 @@
  export let theme
  export let size
  export let disabled = false
-  export let actionType = "Create"
  export let initialValues

  const component = getContext("component")
-  const context = getContext("context")
  const { styleable, API, Provider, ActionTypes } = getContext("sdk")

  let loaded = false
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@ -81,6 +81,7 @@
      error={$fieldState.error}
      getOptionLabel={getDisplayName}
      getOptionValue={option => option._id}
+      {placeholder}
    />
  {/if}
 </Field>
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@ -12,7 +12,7 @@
  export let quiet

  const component = getContext("component")
-  const { styleable, Provider } = getContext("sdk")
+  const { styleable } = getContext("sdk")
  const customColumnKey = `custom-${Math.random()}`
  const customRenderers = [
    {