Remove bunch of unused components and tidy up unused references

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -1,22 +1,13 @@
 <script>
   import { goto, params } from "@sveltech/routify"
-  import { onMount } from "svelte"
   import { fade } from "svelte/transition"
   import fsort from "fast-sort"
   import getOr from "lodash/fp/getOr"
-  import { store, backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import { Button, Icon } from "@budibase/bbui"
-  import ActionButton from "components/common/ActionButton.svelte"
+  import { backendUiStore } from "builderStore"
   import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
-  import CreateEditRowModal from "./modals/CreateEditRowModal.svelte"
-  import RowPopover from "./buttons/CreateRowButton.svelte"
-  import ColumnPopover from "./buttons/CreateColumnButton.svelte"
-  import ViewPopover from "./buttons/CreateViewButton.svelte"
   import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte"
   import EditRowPopover from "./popovers/RowPopover.svelte"
-  import CalculationPopover from "./buttons/CalculateButton.svelte"
   import Spinner from "components/common/Spinner.svelte"
 
   const ITEMS_PER_PAGE = 10

packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte

@@ -1,26 +1,10 @@
 <script>
-  import { onMount } from "svelte"
-  import {
-    Input,
-    TextArea,
-    Button,
-    Select,
-    Toggle,
-    Label,
-  } from "@budibase/bbui"
-  import { cloneDeep, merge } from "lodash/fp"
-  import { store, backendUiStore } from "builderStore"
+  import { Input, Button, Select, Toggle } from "@budibase/bbui"
+  import { cloneDeep } from "lodash/fp"
+  import { backendUiStore } from "builderStore"
   import { FIELDS } from "constants/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import NumberBox from "components/common/NumberBox.svelte"
   import ValuesList from "components/common/ValuesList.svelte"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import Checkbox from "components/common/Checkbox.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
   import DatePicker from "components/common/DatePicker.svelte"
-  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
-  import * as api from "../api"
 
   let fieldDefinitions = cloneDeep(FIELDS)
 
@@ -38,12 +22,12 @@
     $backendUiStore.selectedTable.primaryDisplay == null ||
     $backendUiStore.selectedTable.primaryDisplay === field.name
   $: tableOptions = $backendUiStore.tables.filter(
-    table => table._id !== $backendUiStore.draftTable._id
+    (table) => table._id !== $backendUiStore.draftTable._id
   )
   $: required = !!field?.constraints?.presence || primaryDisplay
 
   async function saveColumn() {
-    backendUiStore.update(state => {
+    backendUiStore.update((state) => {
       backendUiStore.actions.tables.saveField({
         originalName,
         field,

packages/builder/src/components/common/ActionButton.svelte

@@ -1,70 +0,0 @@
-<script>
-  export let disabled = false
-  export let hidden = false
-  export let secondary = false
-  export let primary = true
-  export let cancel = false
-  export let alert = false
-  export let warning = false
-</script>
-
-<button
-  on:click
-  class="button"
-  class:hidden
-  class:secondary
-  class:primary
-  class:alert
-  class:cancel
-  class:warning
-  {disabled}>
-  <slot />
-</button>
-
-<style>
-  .primary {
-    color: #ffffff;
-    background: var(--blue);
-    border: solid 1px var(--blue);
-  }
-
-  .alert {
-    color: white;
-    background: #e26d69;
-    border: solid 1px #e26d69;
-  }
-
-  .cancel {
-    color: var(--secondary40);
-    background: none;
-  }
-
-  .secondary {
-    color: var(--ink);
-    border: solid 1px var(--grey-4);
-    background: white;
-  }
-
-  .button {
-    font-size: 14px;
-    font-weight: 500;
-    border-radius: 3px;
-    padding: 10px 20px;
-    height: 40px;
-  }
-
-  .button:hover {
-    cursor: pointer;
-    filter: saturate(90%);
-  }
-
-  .button:disabled {
-    color: rgba(22, 48, 87, 0.2);
-    cursor: default;
-    background: transparent;
-  }
-
-  .hidden {
-    visibility: hidden;
-  }
-</style>

packages/builder/src/components/common/Button.svelte

@@ -1,171 +0,0 @@
-<script>
-  export let color = "primary"
-  export let className = ""
-  export let style = ""
-  export let groupPosition = ""
-  export let grouped = false
-
-  $: borderClass = grouped ? "" : "border-normal"
-</script>
-
-<button
-  class="{color}
-  {className}
-  {borderClass}
-  {grouped ? 'grouped' : ''}"
-  {style}
-  on:click>
-  <slot />
-</button>
-
-<style>
-  .border-normal {
-    border-radius: var(--borderradiusall);
-  }
-  .border-left {
-    border-radius: var(--borderradius) 0 0 var(--borderradius);
-  }
-  .border-right {
-    border-radius: 0 var(--borderradius) var(--borderradius) 0;
-  }
-  .border-middle {
-    border-radius: 0;
-  }
-
-  button {
-    border-style: solid;
-    padding: 7.5px 15px;
-    cursor: pointer;
-    margin: 5px;
-    border-radius: 5px;
-  }
-
-  /* ---- PRIMARY ----*/
-  .primary {
-    background-color: var(--blue);
-    border-color: var(--blue);
-    color: var(--white);
-  }
-
-  .primary:hover {
-    background-color: var(--blue);
-    border-color: var(--blue);
-  }
-
-  .primary:active {
-    background-color: var(--primarydark);
-    border-color: var(--primarydark);
-  }
-
-  .primary-outline {
-    background-color: var(--white);
-    border-color: var(--blue);
-    color: var(--blue);
-  }
-
-  .primary-outline:hover {
-    background-color: var(--primary10);
-  }
-
-  .primary-outline:pressed {
-    background-color: var(--primary25);
-  }
-
-  /* ---- secondary ----*/
-
-  .secondary {
-    background-color: var(--ink);
-    border-color: var(--ink);
-    color: var(--white);
-  }
-
-  .secondary:hover {
-    background-color: var(--secondary75);
-    border-color: var(--secondary75);
-  }
-
-  .secondary:pressed {
-    background-color: var(--secondarydark);
-    border-color: var(--secondarydark);
-  }
-
-  .secondary-outline {
-    background-color: var(--white);
-    border-color: var(--ink);
-    color: var(--ink);
-  }
-
-  .secondary-outline:hover {
-    background-color: var(--secondary10);
-  }
-
-  .secondary-outline:pressed {
-    background-color: var(--secondary25);
-  }
-
-  /* ---- success ----*/
-  .success {
-    background-color: var(--success100);
-    border-color: var(--success100);
-    color: var(--white);
-  }
-
-  .success:hover {
-    background-color: var(--success75);
-    border-color: var(--success75);
-  }
-
-  .success:pressed {
-    background-color: var(--successdark);
-    border-color: var(--successdark);
-  }
-
-  .success-outline {
-    background-color: var(--white);
-    border-color: var(--success100);
-    color: var(--success100);
-  }
-
-  .success-outline:hover {
-    background-color: var(--success10);
-  }
-
-  .success-outline:pressed {
-    background-color: var(--success25);
-  }
-
-  /* ---- deletion ----*/
-  .deletion {
-    background-color: var(--red);
-    border-color: var(--red);
-    color: var(--white);
-  }
-
-  .deletion:hover {
-    background-color: var(--red-light);
-    border-color: var(--red);
-    color: var(--red);
-  }
-
-  .deletion:pressed {
-    background-color: var(--red-dark);
-    border-color: var(--red-dark);
-    color: var(--white);
-  }
-
-  .deletion-outline {
-    background-color: var(--white);
-    border-color: var(--red);
-    color: var(--red);
-  }
-
-  .deletion-outline:hover {
-    background-color: var(--red-light);
-    color: var(--red);
-  }
-
-  .deletion-outline:pressed {
-    background-color: var(--red-dark);
-    color: var(--white);
-  }
-</style>

packages/builder/src/components/common/ButtonGroup.svelte

@@ -1,15 +0,0 @@
-<script>
-  export let style = ""
-</script>
-
-<div class="root" {style}>
-  <slot />
-</div>
-
-<style>
-  .root {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-</style>

packages/builder/src/components/common/Dropzone.svelte

@@ -1,14 +1,17 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
-  import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
+  import { Dropzone } from "@budibase/bbui"
   import api from "builderStore/api"
 
   export let files = []
 
-  function handleFileTooLarge() {
+  const BYTES_IN_MB = 1000000
+
+  function handleFileTooLarge(fileSizeLimit) {
     notifier.danger(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
+      `Files cannot exceed ${
+        fileSizeLimit / BYTES_IN_MB
+      }MB. Please try again with smaller files.`
     )
   }
 

packages/builder/src/components/common/NumberBox.svelte

@@ -1,36 +0,0 @@
-<script>
-  export let value
-  export let label
-
-  const inputChanged = ev => {
-    try {
-      value = Number(ev.target.value)
-    } catch (_) {
-      value = null
-    }
-  }
-
-  let numberText = value === null || value === undefined ? "" : value.toString()
-</script>
-
-<div class="numberbox">
-  <label>{label}</label>
-  <input
-    class="budibase__input"
-    type="number"
-    {value}
-    on:change={inputChanged} />
-</div>
-
-<style>
-  .numberbox {
-    display: grid;
-    align-items: center;
-  }
-
-  label {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 8px;
-  }
-</style>

packages/builder/src/components/common/Switcher.svelte

@@ -1,76 +0,0 @@
-<script>
-  export let tabs = []
-  export const selectTab = tabName => {
-    selected = tabName
-    selectedIndex = tabs.indexOf(selected)
-  }
-
-  let selected = tabs.length > 0 && tabs[0]
-  let selectedIndex = 0
-
-  const isSelected = tab => selected === tab
-</script>
-
-<div class="root">
-  <div class="switcher">
-    {#each tabs as tab}
-      <button class:selected={selected === tab} on:click={() => selectTab(tab)}>
-        {tab}
-      </button>
-    {/each}
-  </div>
-
-  <div class="panel">
-    {#if selectedIndex === 0}
-      <slot name="0" />
-    {:else if selectedIndex === 1}
-      <slot name="1" />
-    {:else if selectedIndex === 2}
-      <slot name="2" />
-    {:else if selectedIndex === 3}
-      <slot name="3" />
-    {/if}
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px;
-    border-left: solid 1px var(--grey-2);
-    box-sizing: border-box;
-  }
-
-  .switcher {
-    display: flex;
-    margin: 0px 20px 20px 0px;
-    box-sizing: border-box;
-  }
-
-  .switcher > button {
-    display: inline-block;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--grey-5);
-    margin-right: 20px;
-    background: none;
-    outline: none;
-    font-family: Inter;
-  }
-
-  .switcher > .selected {
-    color: var(--ink);
-  }
-
-  .panel {
-    min-height: 0;
-    height: 100%;
-    overflow-y: auto;
-  }
-</style>

packages/builder/src/components/common/core.js

@@ -1,3 +0,0 @@
-import { flow } from "lodash/fp"
-
-export const pipe = (arg, funcs) => flow(funcs)(arg)

packages/builder/src/components/common/eventHandlers.js

@@ -1,13 +0,0 @@
-import { eventHandlers } from "../../../../client/src/state/eventHandlers"
-export { EVENT_TYPE_MEMBER_NAME } from "../../../../client/src/state/eventHandlers"
-
-export const allHandlers = () => {
-  const handlersObj = eventHandlers()
-
-  const handlers = Object.keys(handlersObj).map(name => ({
-    name,
-    ...handlersObj[name],
-  }))
-
-  return handlers
-}

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -2,7 +2,7 @@
   import { store, backendUiStore } from "builderStore"
   import { map, join } from "lodash/fp"
   import iframeTemplate from "./iframeTemplate"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../../helpers"
 
   let iframe
   let styles = ""
@@ -16,7 +16,7 @@
     return props
   }
 
-  const getComponentTypeName = component => {
+  const getComponentTypeName = (component) => {
     let [componentName] = component._component.match(/[a-z]*$/)
     return componentName || "element"
   }
@@ -144,7 +144,7 @@
   }
 
   $: stylesheetLinks = pipe($store.pages.stylesheets, [
-    map(s => `<link rel="stylesheet" href="${s}"/>`),
+    map((s) => `<link rel="stylesheet" href="${s}"/>`),
     join("\n"),
   ])
 

packages/builder/src/components/userInterface/ComponentsHierarchy.svelte

@@ -2,7 +2,7 @@
   import { goto } from "@sveltech/routify"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
   import { trimCharsStart, trimChars } from "lodash/fp"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../helpers"
   import { store } from "builderStore"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import { writable } from "svelte/store"

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -2,7 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { last } from "lodash/fp"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../helpers"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import { getComponentDefinition } from "builderStore/storeUtils"

packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte

@@ -1,14 +1,7 @@
 <script>
-  import { store } from "builderStore"
-  import {
-    TextButton,
-    Button,
-    Body,
-    DropdownMenu,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
-  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
+  import { EVENT_TYPE_MEMBER_NAME } from "../../../../../client/src/state/eventHandlers"
   import actionTypes from "./actions"
   import { createEventDispatcher } from "svelte"
 
@@ -25,19 +18,19 @@
   $: actions = event || []
   $: selectedActionComponent =
     selectedAction &&
-    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
+    actionTypes.find((t) => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
       .component
 
   const updateEventHandler = (updatedHandler, index) => {
     actions[index] = updatedHandler
   }
 
-  const deleteAction = index => {
+  const deleteAction = (index) => {
     actions.splice(index, 1)
     actions = actions
   }
 
-  const addAction = actionType => () => {
+  const addAction = (actionType) => () => {
     const newAction = {
       parameters: {},
       [EVENT_TYPE_MEMBER_NAME]: actionType.name,
@@ -48,7 +41,7 @@
     addActionDropdown.hide()
   }
 
-  const selectAction = action => () => {
+  const selectAction = (action) => () => {
     selectedAction = action
   }
 

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -1,17 +1,12 @@
 <script>
   import { Input, DataList, Select } from "@budibase/bbui"
-  import { find, map, keys, reduce, keyBy } from "lodash/fp"
-  import { pipe } from "components/common/core"
-  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
   import { store, automationStore } from "builderStore"
-  import { ArrowDownIcon } from "components/common/Icons/"
-  import { createEventDispatcher } from "svelte"
 
   export let parameter
 
   let isOpen = false
 
-  const capitalize = s => {
+  const capitalize = (s) => {
     if (typeof s !== "string") return ""
     return s.charAt(0).toUpperCase() + s.slice(1)
   }
@@ -22,7 +17,7 @@
   {#if parameter.name === 'automation'}
     <Select on:change bind:value={parameter.value}>
       <option value="" />
-      {#each $automationStore.automations.filter(wf => wf.live) as automation}
+      {#each $automationStore.automations.filter((wf) => wf.live) as automation}
         <option value={automation._id}>{automation.name}</option>
       {/each}
     </Select>

packages/builder/src/components/userInterface/pagesParsing/searchComponents.js

@@ -1,21 +1,21 @@
 import { isUndefined, filter, some, includes } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { pipe } from "../../../helpers"
 
-const normalString = s => (s || "").trim().toLowerCase()
+const normalString = (s) => (s || "").trim().toLowerCase()
 
-export const isRootComponent = c =>
+export const isRootComponent = (c) =>
   isComponent(c) && isUndefined(c.props._component)
 
-export const isComponent = c => {
-  const hasProp = n => !isUndefined(c[n])
+export const isComponent = (c) => {
+  const hasProp = (n) => !isUndefined(c[n])
   return hasProp("name") && hasProp("props")
 }
 
 export const searchAllComponents = (components, phrase) => {
   const hasPhrase = (...vals) =>
-    pipe(vals, [some(v => includes(normalString(phrase))(normalString(v)))])
+    pipe(vals, [some((v) => includes(normalString(phrase))(normalString(v)))])
 
-  const componentMatches = c => {
+  const componentMatches = (c) => {
     if (hasPhrase(c._instanceName, ...(c.tags || []))) return true
 
     if (isRootComponent(c)) return false
@@ -29,7 +29,7 @@ export const searchAllComponents = (components, phrase) => {
 }
 
 export const getExactComponent = (components, name, isScreen = false) => {
-  return components.find(c =>
+  return components.find((c) =>
     isScreen ? c.props._instanceName === name : c._instanceName === name
   )
 }

packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js

@@ -1,7 +1,7 @@
 import { split, last } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { pipe } from "../../../helpers"
 
-export const splitName = fullname => {
+export const splitName = (fullname) => {
   const componentName = pipe(fullname, [split("/"), last])
 
   const libName = fullname.substring(

packages/builder/src/helpers.js

@@ -1,6 +1,6 @@
-import { last } from "lodash/fp"
-import { pipe } from "components/common/core"
-export const buildStyle = styles => {
+import { last, flow } from "lodash/fp"
+
+export const buildStyle = (styles) => {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
@@ -11,12 +11,15 @@ export const buildStyle = styles => {
   return str
 }
 
-export const convertCamel = str => {
-  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+export const convertCamel = (str) => {
+  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
 }
 
-export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
+export const pipe = (arg, funcs) => flow(funcs)(arg)
 
-export const get_name = s => (!s ? "" : last(s.split("/")))
+export const capitalise = (s) =>
+  s.substring(0, 1).toUpperCase() + s.substring(1)
 
-export const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+export const get_name = (s) => (!s ? "" : last(s.split("/")))
+
+export const get_capitalised_name = (name) => pipe(name, [get_name, capitalise])

packages/builder/src/pages/[application]/design/_layout.svelte

@@ -1,15 +1,10 @@
 <script>
   import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
-  import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
-  import Switcher from "components/common/Switcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
   import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
 
   $: instances = $store.appInstances

packages/builder/src/pages/index.svelte

@@ -1,11 +1,7 @@
 <script>
-  import { store } from "builderStore"
   import api from "builderStore/api"
   import AppList from "components/start/AppList.svelte"
-  import { onMount } from "svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
   import { get } from "builderStore/api"
-  import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { Button, Heading, Modal } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"

packages/standard-components/src/attachments/Dropzone.svelte

@@ -2,14 +2,15 @@
   import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
   import { FILE_TYPES } from "./fileTypes"
 
-  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
 
   export let files = []
 
   function handleFileTooLarge(fileSizeLimit) {
     alert(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
+      `Files cannot exceed ${
+        fileSizeLimit / BYTES_IN_MB
+      }MB. Please try again with smaller files.`
     )
   }