Fix all eslint issues

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)}

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

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"
+          <label for={fieldId} class="spectrum-Link">
-            >Select a file to upload</label
+            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);

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}

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

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}

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

packages/bbui/src/Form/Multiselect.svelte

@@ -25,6 +25,7 @@
   <Multiselect
     {error}
     {disabled}
+    {readonly}
     {value}
     {options}
     {placeholder}

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

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>
 

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>

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"
 

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"
 

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,

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

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
         )
       }

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>

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>

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
 

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

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);
   }

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

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 =

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,

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
 

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)

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 =

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({

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

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 = ""

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>

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
 

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

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 =>
+          {#each bindings.filter( binding => binding.label.match(searchRgx) ) as binding}
-            binding.label.match(searchRgx)
-          ) as binding}
             <div
               class="binding"
               on:click={() => {

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

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 = []
 

packages/builder/src/components/deploy/DeployModal.svelte

@@ -14,7 +14,6 @@
 
   const POLL_INTERVAL = 10000
 
-  let loading = false
   let feedbackModal
   let deployments = []
   let poll

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);

packages/builder/src/components/deploy/RevertModal.svelte

@@ -1,14 +1,6 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
+  import { Icon, Modal, notifications, ModalContent } from "@budibase/bbui"
-  import {
-    Button,
-    Icon,
-    Modal,
-    notifications,
-    ModalContent,
-  } from "@budibase/bbui"
   import { store } from "builderStore"
-  import { apps } from "stores/portal"
   import api from "builderStore/api"
 
   let revertModal

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -1,11 +1,5 @@
 <script>
-  import {
+  import { ActionMenu, ActionButton, MenuItem, Icon } from "@budibase/bbui"
-    ActionMenu,
-    ActionGroup,
-    ActionButton,
-    MenuItem,
-    Icon,
-  } from "@budibase/bbui"
   import { store, currentAssetName } from "builderStore"
   import structure from "./componentStructure.json"
 

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"

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>

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { store } from "builderStore"
-  import { store, currentAssetId } from "builderStore"
   import { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"

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"

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">

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>

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
   )

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)} }}`

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)
+    const source = $datasources.list.find(
-      .source
+      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;

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>

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)
+    const source = $datasources.list.find(
-      .source
+      ds => ds._id === query.datasourceId
+    ).source
     return $integrations[source].query[query.queryVerb]
   }
 </script>

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>
 

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()

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()
 

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
 

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">

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(

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)

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()

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,

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte

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

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 ?? []

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>

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) {

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;

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;
   }

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>

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>

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

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">

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>

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
   ) || {

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."

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"
 

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">

packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte

@@ -35,8 +35,4 @@
   .inner p {
     margin: 0;
   }
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
 </style>

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>

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 />

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">

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>

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()

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"

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 { auth } from "stores/portal"
-  import { post, get } from "builderStore/api"
-  import analytics from "analytics"
-  import { writable } from "svelte/store"
   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",
         },

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>
 

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

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

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 = [

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;

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

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

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

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

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 ${

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}

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

packages/standard-components/src/forms/RelationshipField.svelte

@@ -81,6 +81,7 @@
       error={$fieldState.error}
       getOptionLabel={getDisplayName}
       getOptionValue={option => option._id}
+      {placeholder}
     />
   {/if}
 </Field>

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 = [
     {