From c120eb934d9326f5f252114a3851455c2b76d681 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 31 Mar 2020 13:16:03 +0200
Subject: [PATCH] updates imports and finishes moving all commonly used files
 to the node_modules folder

---
 packages/builder/rollup.config.js             |  9 ++-
 packages/builder/src/App.svelte               |  2 +-
 .../node_modules/builderStore/generate_css.js |  2 +-
 .../builderStore/loadComponentLibraries.js    |  2 +-
 .../builderStore/store/backend.js             | 10 +--
 .../node_modules/builderStore/store/index.js  | 12 ++--
 .../accessLevels/AccessLevelsRoot.svelte      | 17 +++--
 .../actionsAndTriggers/ActionView.svelte      | 14 ++--
 .../actionsAndTriggers/Actions.svelte         | 12 ++--
 .../ActionsAndTriggersRoot.svelte             | 35 +++++-----
 .../actionsAndTriggers/TriggerView.svelte     | 23 ++++---
 .../actionsAndTriggers/Triggers.svelte        |  8 +--
 .../node_modules/components/common/core.js    | 18 +++---
 .../components/common/eventHandlers.js        |  6 +-
 .../components/database/DatabaseRoot.svelte   | 10 +--
 .../components/database/IndexView.svelte      | 19 +++---
 .../ModelDataTable/ModelDataTable.svelte      | 20 ++++--
 .../ModelDataTable/TablePagination.svelte     |  2 +-
 .../components/database/ModelDataTable/api.js |  4 +-
 .../modals/CreateDatabase.svelte              |  6 +-
 .../modals/CreateEditModel.svelte             |  6 +-
 .../modals/CreateEditRecord.svelte            | 12 ++--
 .../ModelDataTable/modals/CreateUser.svelte   |  6 +-
 .../ModelDataTable/modals/DeleteRecord.svelte |  6 +-
 .../components/database/ModelView.svelte      | 64 ++++++++++---------
 .../components/nav/BackendNav.svelte          |  5 +-
 .../components/nav/DatabasesList.svelte       |  2 +-
 .../components/nav/HierarchyRow.svelte        |  2 +-
 .../components/nav/NavItem.svelte             |  2 +-
 .../nav/SchemaManagementDrawer.svelte         |  7 +-
 .../components/nav/UsersList.svelte           |  4 +-
 .../userInterface/CodeEditor.svelte           |  6 +-
 .../ComponentPropertiesPanel.svelte           |  6 +-
 .../ComponentSelectionList.svelte             | 29 +++++----
 .../userInterface/ComponentsHierarchy.svelte  | 31 +++++----
 .../ComponentsPaneSwitcher.svelte             |  2 +-
 .../userInterface/CurrentItemPreview.svelte   |  4 +-
 .../EventsEditor/EventsEditor.svelte          | 18 +++---
 .../EventsEditor/HandlerSelector.svelte       | 12 ++--
 .../EventsEditor/StateBindingCascader.svelte  | 16 ++---
 .../userInterface/MasterLayout.svelte         | 28 ++++----
 .../components/userInterface/NewScreen.svelte | 25 ++++----
 .../components/userInterface/PageView.svelte  | 18 +++---
 .../components/userInterface/PagesList.svelte |  6 +-
 .../PropertyCascader/PropertyCascader.svelte  |  8 +--
 .../userInterface/SettingsView.svelte         | 10 +--
 .../userInterface/UserInterfaceRoot.svelte    | 10 +--
 .../userInterface/pagesParsing/createProps.js |  2 +-
 48 files changed, 305 insertions(+), 273 deletions(-)

diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js
index b928418559..615e5b8208 100644
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@@ -214,13 +214,12 @@ export default {
 
     // Watch the `dist` directory and refresh the
     // browser on changes when not in production
-    !production && serve(),
     !production && livereload(outputpath),
     !production &&
-      browsersync({
-        server: outputpath,
-        middleware: [apiProxy, _builderProxy],
-      }),
+    browsersync({
+      server: outputpath,
+      middleware: [apiProxy, _builderProxy],
+    }),
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify
diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index 5c7124fd24..424c7b9a1e 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -8,7 +8,7 @@
   import Spinner from "components/common/Spinner.svelte"
   import AppNotification, {
     showAppNotification,
-  } from "components/AppNotification.svelte"
+  } from "components/common/AppNotification.svelte"
 
   let init = initialise()
 
diff --git a/packages/builder/src/node_modules/builderStore/generate_css.js b/packages/builder/src/node_modules/builderStore/generate_css.js
index 19148ce9b0..0f776a5255 100644
--- a/packages/builder/src/node_modules/builderStore/generate_css.js
+++ b/packages/builder/src/node_modules/builderStore/generate_css.js
@@ -1,5 +1,5 @@
 import { filter, map, reduce, toPairs } from "lodash/fp"
-import { pipe } from "../common/core"
+import { pipe } from "components/common/core"
 
 const self = n => n
 const join_with = delimiter => a => a.join(delimiter)
diff --git a/packages/builder/src/node_modules/builderStore/loadComponentLibraries.js b/packages/builder/src/node_modules/builderStore/loadComponentLibraries.js
index 5a142f2798..8534bcf177 100644
--- a/packages/builder/src/node_modules/builderStore/loadComponentLibraries.js
+++ b/packages/builder/src/node_modules/builderStore/loadComponentLibraries.js
@@ -1,5 +1,5 @@
 import { flatten, values, uniq, map } from "lodash/fp"
-import { pipe } from "../common/core"
+import { pipe } from "components/common/core"
 
 export const loadLibs = async (appName, appPackage) => {
   const allLibraries = {}
diff --git a/packages/builder/src/node_modules/builderStore/store/backend.js b/packages/builder/src/node_modules/builderStore/store/backend.js
index 65f012e34c..fa888ca9d5 100644
--- a/packages/builder/src/node_modules/builderStore/store/backend.js
+++ b/packages/builder/src/node_modules/builderStore/store/backend.js
@@ -1,7 +1,7 @@
 import { writable } from "svelte/store"
 import api from "../api"
 import { cloneDeep, sortBy, find, remove } from "lodash/fp"
-import { hierarchy as hierarchyFunctions } from "../../../../core/src"
+import { hierarchy as hierarchyFunctions } from "../../../../../core/src"
 import {
   getNode,
   validate,
@@ -10,7 +10,7 @@ import {
   isIndex,
   canDeleteIndex,
   canDeleteRecord,
-} from "../../common/core"
+} from "components/common/core"
 
 export const getBackendUiStore = () => {
   const INITIAL_BACKEND_UI_STATE = {
@@ -100,9 +100,9 @@ export const saveBackend = async state => {
 
   const instances_currentFirst = state.selectedDatabase
     ? [
-        state.appInstances.find(i => i.id === state.selectedDatabase.id),
-        ...state.appInstances.filter(i => i.id !== state.selectedDatabase.id),
-      ]
+      state.appInstances.find(i => i.id === state.selectedDatabase.id),
+      ...state.appInstances.filter(i => i.id !== state.selectedDatabase.id),
+    ]
     : state.appInstances
 
   for (let instance of instances_currentFirst) {
diff --git a/packages/builder/src/node_modules/builderStore/store/index.js b/packages/builder/src/node_modules/builderStore/store/index.js
index 41230bcaf4..76cdc5a7c3 100644
--- a/packages/builder/src/node_modules/builderStore/store/index.js
+++ b/packages/builder/src/node_modules/builderStore/store/index.js
@@ -1,18 +1,18 @@
 import { filter, cloneDeep, last, concat, isEmpty, values } from "lodash/fp"
-import { pipe, getNode, constructHierarchy } from "../../common/core"
+import { pipe, getNode, constructHierarchy } from "components/common/core"
 import * as backendStoreActions from "./backend"
 import { writable } from "svelte/store"
-import { defaultPagesObject } from "../../userInterface/pagesParsing/defaultPagesObject"
+import { defaultPagesObject } from "components/userInterface/pagesParsing/defaultPagesObject"
 import api from "../api"
-import { getExactComponent } from "../../userInterface/pagesParsing/searchComponents"
-import { rename } from "../../userInterface/pagesParsing/renameScreen"
+import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
+import { rename } from "components/userInterface/pagesParsing/renameScreen"
 import {
   getNewScreen,
   createProps,
   makePropsSafe,
   getBuiltin,
-} from "../../userInterface/pagesParsing/createProps"
-import { expandComponentDefinition } from "../../userInterface/pagesParsing/types"
+} from "components/userInterface/pagesParsing/createProps"
+import { expandComponentDefinition } from "components/userInterface/pagesParsing/types"
 import { loadLibs, libUrlsForPreview } from "../loadComponentLibraries"
 import { buildCodeForScreens } from "../buildCodeForScreens"
 import { generate_screen_css } from "../generate_css"
diff --git a/packages/builder/src/node_modules/components/accessLevels/AccessLevelsRoot.svelte b/packages/builder/src/node_modules/components/accessLevels/AccessLevelsRoot.svelte
index 8d57d83f2b..f53afae5f6 100644
--- a/packages/builder/src/node_modules/components/accessLevels/AccessLevelsRoot.svelte
+++ b/packages/builder/src/node_modules/components/accessLevels/AccessLevelsRoot.svelte
@@ -1,12 +1,15 @@
 <script>
-  import ButtonGroup from "../common/ButtonGroup.svelte"
-  import Button from "../common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
-  import { store, backendUiStore } from "../builderStore"
-  import { generateFullPermissions, getNewAccessLevel } from "../common/core"
-  import getIcon from "../common/icon"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
+  import Button from "components/common/Button.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import { store, backendUiStore } from "builderStore"
+  import {
+    generateFullPermissions,
+    getNewAccessLevel,
+  } from "components/common/core"
+  import getIcon from "components/common/icon"
   import AccessLevelView from "./AccessLevelView.svelte"
-  import Modal from "../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
 
   let editingLevel = null
   let editingLevelIsNew = false
diff --git a/packages/builder/src/node_modules/components/actionsAndTriggers/ActionView.svelte b/packages/builder/src/node_modules/components/actionsAndTriggers/ActionView.svelte
index 22a45b473b..edbd382647 100644
--- a/packages/builder/src/node_modules/components/actionsAndTriggers/ActionView.svelte
+++ b/packages/builder/src/node_modules/components/actionsAndTriggers/ActionView.svelte
@@ -1,12 +1,12 @@
 <script>
-  import Textbox from "../common/Textbox.svelte"
-  import Button from "../common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import Textbox from "components/common/Textbox.svelte"
+  import Button from "components/common/Button.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
   import { cloneDeep, filter, keys, map, isUndefined } from "lodash/fp"
-  import ErrorsBox from "../common/ErrorsBox.svelte"
-  import { validateActions, pipe } from "../common/core"
-  import getIcon from "../common/icon"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import { validateActions, pipe } from "components/common/core"
+  import getIcon from "components/common/icon"
 
   export let action
   export let onFinished = action => {}
diff --git a/packages/builder/src/node_modules/components/actionsAndTriggers/Actions.svelte b/packages/builder/src/node_modules/components/actionsAndTriggers/Actions.svelte
index 309cdf44a2..06a8c6906d 100644
--- a/packages/builder/src/node_modules/components/actionsAndTriggers/Actions.svelte
+++ b/packages/builder/src/node_modules/components/actionsAndTriggers/Actions.svelte
@@ -1,11 +1,11 @@
 <script>
-  import getIcon from "../common/icon"
-  import { store } from "../builderStore"
-  import Button from "../common/Button.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import getIcon from "components/common/icon"
+  import { store } from "builderStore"
+  import Button from "components/common/Button.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
   import ActionView from "./ActionView.svelte"
-  import Modal from "../common/Modal.svelte"
-  import { pipe } from "../common/core"
+  import Modal from "components/common/Modal.svelte"
+  import { pipe } from "components/common/core"
   import { keys, map, join } from "lodash/fp"
 
   export let editingActionIsNew = false
diff --git a/packages/builder/src/node_modules/components/actionsAndTriggers/ActionsAndTriggersRoot.svelte b/packages/builder/src/node_modules/components/actionsAndTriggers/ActionsAndTriggersRoot.svelte
index 09d198148f..2d7c1e23cd 100644
--- a/packages/builder/src/node_modules/components/actionsAndTriggers/ActionsAndTriggersRoot.svelte
+++ b/packages/builder/src/node_modules/components/actionsAndTriggers/ActionsAndTriggersRoot.svelte
@@ -1,12 +1,12 @@
 <script>
-  import getIcon from "../common/icon"
-  import { store } from "../builderStore"
-  import Button from "../common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import getIcon from "components/common/icon"
+  import { store } from "builderStore"
+  import Button from "components/common/Button.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
   import Actions from "./Actions.svelte"
   import Triggers from "./Triggers.svelte"
-  import { getNewAction, getNewTrigger } from "../common/core"
+  import { getNewAction, getNewTrigger } from "components/common/core"
 
   let editingAction = null
   let editingActionIsNew = true
@@ -14,16 +14,19 @@
   let editingTriggerIsNew = true
 
   let getDefaultOptionsHtml = defaultOptions =>
-    pipe(defaultOptions, [
-      keys,
-      map(
-        k =>
-          `<span style="color:var(--slate)">${k}: </span>${JSON.parse(
-            typeOptions[k]
-          )}`
-      ),
-      join("<br>"),
-    ])
+    pipe(
+      defaultOptions,
+      [
+        keys,
+        map(
+          k =>
+            `<span style="color:var(--slate)">${k}: </span>${JSON.parse(
+              typeOptions[k]
+            )}`
+        ),
+        join("<br>"),
+      ]
+    )
 
   let onActionEdit = action => {
     editingAction = action
diff --git a/packages/builder/src/node_modules/components/actionsAndTriggers/TriggerView.svelte b/packages/builder/src/node_modules/components/actionsAndTriggers/TriggerView.svelte
index fe9cf910cc..a74d0663f5 100644
--- a/packages/builder/src/node_modules/components/actionsAndTriggers/TriggerView.svelte
+++ b/packages/builder/src/node_modules/components/actionsAndTriggers/TriggerView.svelte
@@ -1,14 +1,14 @@
 <script>
-  import Textbox from "../common/Textbox.svelte"
-  import Button from "../common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
-  import Dropdown from "../common/Dropdown.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
-  import CodeArea from "../common/CodeArea.svelte"
+  import Textbox from "components/common/Textbox.svelte"
+  import Button from "components/common/Button.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import Dropdown from "components/common/Dropdown.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
+  import CodeArea from "components/common/CodeArea.svelte"
   import { cloneDeep, filter, keys, some, map, isUndefined } from "lodash/fp"
-  import ErrorsBox from "../common/ErrorsBox.svelte"
-  import { validateTriggers, pipe, events } from "../common/core"
-  import getIcon from "../common/icon"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import { validateTriggers, pipe, events } from "components/common/core"
+  import getIcon from "components/common/icon"
 
   export let trigger
   export let onFinished = action => {}
@@ -22,7 +22,10 @@
   let cancel = () => onFinished()
   let save = () => {
     const newTriggersList = [
-      ...pipe(allTriggers, [filter(t => t !== trigger)]),
+      ...pipe(
+        allTriggers,
+        [filter(t => t !== trigger)]
+      ),
       clonedTrigger,
     ]
 
diff --git a/packages/builder/src/node_modules/components/actionsAndTriggers/Triggers.svelte b/packages/builder/src/node_modules/components/actionsAndTriggers/Triggers.svelte
index 522143a630..3e96bf72a8 100644
--- a/packages/builder/src/node_modules/components/actionsAndTriggers/Triggers.svelte
+++ b/packages/builder/src/node_modules/components/actionsAndTriggers/Triggers.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { store } from "../builderStore"
-  import getIcon from "../common/icon"
-  import Button from "../common/Button.svelte"
-  import Modal from "../common/Modal.svelte"
+  import { store } from "builderStore"
+  import getIcon from "components/common/icon"
+  import Button from "components/common/Button.svelte"
+  import Modal from "components/common/Modal.svelte"
   import TriggerView from "./TriggerView.svelte"
 
   export let editingTrigger = null
diff --git a/packages/builder/src/node_modules/components/common/core.js b/packages/builder/src/node_modules/components/common/core.js
index 78be9aaa4b..af627a7931 100644
--- a/packages/builder/src/node_modules/components/common/core.js
+++ b/packages/builder/src/node_modules/components/common/core.js
@@ -3,17 +3,17 @@ import {
   common,
   getTemplateApi,
   getAuthApi,
-} from "../../../core/src"
-import { _getNew } from "../../../core/src/recordApi/getNew"
+} from "../../../../../core/src"
+import { _getNew } from "../../../../../core/src/recordApi/getNew"
 import { find, filter, keyBy, flatten, map } from "lodash/fp"
-import { generateSchema } from "../../../core/src/indexing/indexSchemaCreator"
+import { generateSchema } from "../../../../../core/src/indexing/indexSchemaCreator"
 import { generate } from "shortid"
 
-export { canDeleteIndex } from "../../../core/src/templateApi/canDeleteIndex"
-export { canDeleteRecord } from "../../../core/src/templateApi/canDeleteRecord"
-export { userWithFullAccess } from "../../../core/src/index"
-export { joinKey } from "../../../core/src/common"
-export { getExactNodeForKey } from "../../../core/src/templateApi/hierarchy"
+export { canDeleteIndex } from "../../../../../core/src/templateApi/canDeleteIndex"
+export { canDeleteRecord } from "../../../../../core/src/templateApi/canDeleteRecord"
+export { userWithFullAccess } from "../../../../../core/src/index"
+export { joinKey } from "../../../../../core/src/common"
+export { getExactNodeForKey } from "../../../../../core/src/templateApi/hierarchy"
 export const pipe = common.$
 
 export const events = common.eventsList
@@ -38,7 +38,7 @@ export const authApi = (hierarchy, actions) =>
   getAuthApi({
     hierarchy,
     actions: keyBy("name")(actions),
-    publish: () => {},
+    publish: () => { },
   })
 
 export const allTypes = templateApi({}).allTypes
diff --git a/packages/builder/src/node_modules/components/common/eventHandlers.js b/packages/builder/src/node_modules/components/common/eventHandlers.js
index e88815a444..3ddfe084d7 100644
--- a/packages/builder/src/node_modules/components/common/eventHandlers.js
+++ b/packages/builder/src/node_modules/components/common/eventHandlers.js
@@ -1,7 +1,7 @@
-import { eventHandlers } from "../../../client/src/state/eventHandlers"
+import { eventHandlers } from "../../../../../client/src/state/eventHandlers"
 import { writable } from "svelte/store"
-export { EVENT_TYPE_MEMBER_NAME } from "../../../client/src/state/eventHandlers"
-import { createCoreApi } from "../../../client/src/core"
+export { EVENT_TYPE_MEMBER_NAME } from "../../../../../client/src/state/eventHandlers"
+import { createCoreApi } from "../../../../../client/src/core"
 
 export const allHandlers = (appDefinition, user) => {
   const coreApi = createCoreApi(appDefinition, user)
diff --git a/packages/builder/src/node_modules/components/database/DatabaseRoot.svelte b/packages/builder/src/node_modules/components/database/DatabaseRoot.svelte
index f5798281e6..3489acb032 100644
--- a/packages/builder/src/node_modules/components/database/DatabaseRoot.svelte
+++ b/packages/builder/src/node_modules/components/database/DatabaseRoot.svelte
@@ -2,11 +2,11 @@
   import ModelView from "./ModelView.svelte"
   import IndexView from "./IndexView.svelte"
   import ModelDataTable from "./ModelDataTable"
-  import { store, backendUiStore } from "../builderStore"
-  import getIcon from "../common/icon"
-  import DropdownButton from "../common/DropdownButton.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
-  import Modal from "../common/Modal.svelte"
+  import { store, backendUiStore } from "builderStore"
+  import getIcon from "components/common/icon"
+  import DropdownButton from "components/common/DropdownButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import Modal from "components/common/Modal.svelte"
   import * as api from "./ModelDataTable/api"
   import {
     CreateEditRecordModal,
diff --git a/packages/builder/src/node_modules/components/database/IndexView.svelte b/packages/builder/src/node_modules/components/database/IndexView.svelte
index d06cdf2f8d..30b6907500 100644
--- a/packages/builder/src/node_modules/components/database/IndexView.svelte
+++ b/packages/builder/src/node_modules/components/database/IndexView.svelte
@@ -1,13 +1,16 @@
 <script>
-  import Textbox from "../common/Textbox.svelte"
-  import CodeArea from "../common/CodeArea.svelte"
-  import Button from "../common/Button.svelte"
-  import Dropdown from "../common/Dropdown.svelte"
-  import { store } from "../builderStore"
+  import Textbox from "components/common/Textbox.svelte"
+  import CodeArea from "components/common/CodeArea.svelte"
+  import Button from "components/common/Button.svelte"
+  import Dropdown from "components/common/Dropdown.svelte"
+  import { store } from "builderStore"
   import { filter, some, map, compose } from "lodash/fp"
-  import { hierarchy as hierarchyFunctions, common } from "../../../core/src"
-  import ErrorsBox from "../common/ErrorsBox.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
+  import {
+    hierarchy as hierarchyFunctions,
+    common,
+  } from "../../../../../core/src/"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
 
   const SNIPPET_EDITORS = {
     MAP: "Map",
diff --git a/packages/builder/src/node_modules/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/node_modules/components/database/ModelDataTable/ModelDataTable.svelte
index 6ac539282c..efb083f831 100644
--- a/packages/builder/src/node_modules/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/node_modules/components/database/ModelDataTable/ModelDataTable.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { store, backendUiStore } from "../../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import {
     tap,
     get,
@@ -11,11 +11,11 @@
     map,
     remove,
     keys,
-    takeRight
+    takeRight,
   } from "lodash/fp"
-  import Select from "../../common/Select.svelte"
-  import { getIndexSchema } from "../../common/core"
-  import ActionButton from "../../common/ActionButton.svelte"
+  import Select from "components/common/Select.svelte"
+  import { getIndexSchema } from "components/common/core"
+  import ActionButton from "components/common/ActionButton.svelte"
   import TablePagination from "./TablePagination.svelte"
   import { DeleteRecordModal } from "./modals"
   import * as api from "./api"
@@ -56,7 +56,11 @@
 
   const getSchema = getIndexSchema($store.hierarchy)
 
-  const childViewsForRecord = compose(flatten, map("indexes"), get("children"))
+  const childViewsForRecord = compose(
+    flatten,
+    map("indexes"),
+    get("children")
+  )
 
   const hideInternalHeaders = compose(
     remove(headerName => INTERNAL_HEADERS.includes(headerName)),
@@ -95,7 +99,9 @@
 
 <section>
   <div class="table-controls">
-    <h4 class="budibase__title--3">{takeRight(2, $backendUiStore.breadcrumbs).join(" / ")}</h4>
+    <h4 class="budibase__title--3">
+      {takeRight(2, $backendUiStore.breadcrumbs).join(' / ')}
+    </h4>
     <Select icon="ri-eye-line" bind:value={$backendUiStore.selectedView}>
       {#each views as view}
         <option value={view}>{view.name}</option>
diff --git a/packages/builder/src/node_modules/components/database/ModelDataTable/TablePagination.svelte b/packages/builder/src/node_modules/components/database/ModelDataTable/TablePagination.svelte
index d6d09f197f..52a480f224 100644
--- a/packages/builder/src/node_modules/components/database/ModelDataTable/TablePagination.svelte
+++ b/packages/builder/src/node_modules/components/database/ModelDataTable/TablePagination.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { backendUiStore } from "../../builderStore"
+  import { backendUiStore } from "builderStore"
 
   export let data
   export let currentPage
diff --git a/packages/builder/src/node_modules/components/database/ModelDataTable/api.js b/packages/builder/src/node_modules/components/database/ModelDataTable/api.js
index 0d9f275504..b7a19801df 100644
--- a/packages/builder/src/node_modules/components/database/ModelDataTable/api.js
+++ b/packages/builder/src/node_modules/components/database/ModelDataTable/api.js
@@ -1,5 +1,5 @@
-import api from "../../builderStore/api"
-import { getNewRecord, getNewInstance } from "../../common/core"
+import api from "builderStore/api"
+import { getNewRecord, getNewInstance } from "components/common/core"
 
 export async function createUser(password, user, { appname, instanceId }) {
   const CREATE_USER_URL = `/_builder/instance/${appname}/${instanceId}/api/createUser`
diff --git a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateDatabase.svelte b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateDatabase.svelte
index 777d53dc59..f07c67baaf 100644
--- a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateDatabase.svelte
+++ b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateDatabase.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Modal from "../../../common/Modal.svelte"
-  import { store } from "../../../builderStore"
-  import ActionButton from "../../../common/ActionButton.svelte"
+  import Modal from "components/common/Modal.svelte"
+  import { store } from "builderStore"
+  import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "../api"
 
   export let onClosed
diff --git a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateEditModel.svelte b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateEditModel.svelte
index 4b12e8c4eb..29afaac6df 100644
--- a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateEditModel.svelte
+++ b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateEditModel.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Modal from "../../../common/Modal.svelte"
-  import ActionButton from "../../../common/ActionButton.svelte"
-  import { backendUiStore } from "../../../builderStore"
+  import Modal from "components/common/Modal.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import { backendUiStore } from "builderStore"
   import ModelView from "../../ModelView.svelte"
   import * as api from "../api"
 </script>
diff --git a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index 25837db018..99c7e78116 100644
--- a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -1,18 +1,18 @@
 <script>
   import { onMount } from "svelte"
-  import { store, backendUiStore } from "../../../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import { compose, map, get, flatten } from "lodash/fp"
-  import Modal from "../../../common/Modal.svelte"
-  import ActionButton from "../../../common/ActionButton.svelte"
-  import Select from "../../../common/Select.svelte"
+  import Modal from "components/common/Modal.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import Select from "components/common/Select.svelte"
   import {
     getNewRecord,
     joinKey,
     getExactNodeForKey,
-  } from "../../../common/core"
+  } from "components/common/core"
   import RecordFieldControl from "./RecordFieldControl.svelte"
   import * as api from "../api"
-  import ErrorsBox from "../../../common/ErrorsBox.svelte"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
 
   export let record
   export let onClosed
diff --git a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateUser.svelte
index ac4fa82f7e..9ea76e9bdc 100644
--- a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Modal from "../../../common/Modal.svelte"
-  import { store, backendUiStore } from "../../../builderStore"
-  import ActionButton from "../../../common/ActionButton.svelte"
+  import Modal from "components/common/Modal.svelte"
+  import { store, backendUiStore } from "builderStore"
+  import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "../api"
 
   export let onClosed
diff --git a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/DeleteRecord.svelte b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/DeleteRecord.svelte
index e3fc0cdda1..d940ef33f3 100644
--- a/packages/builder/src/node_modules/components/database/ModelDataTable/modals/DeleteRecord.svelte
+++ b/packages/builder/src/node_modules/components/database/ModelDataTable/modals/DeleteRecord.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Modal from "../../../common/Modal.svelte"
-  import ActionButton from "../../../common/ActionButton.svelte"
-  import { store, backendUiStore } from "../../../builderStore"
+  import Modal from "components/common/Modal.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import { store, backendUiStore } from "builderStore"
   import * as api from "../api"
 
   export let record
diff --git a/packages/builder/src/node_modules/components/database/ModelView.svelte b/packages/builder/src/node_modules/components/database/ModelView.svelte
index 8c5fec18b5..a67293c4d1 100644
--- a/packages/builder/src/node_modules/components/database/ModelView.svelte
+++ b/packages/builder/src/node_modules/components/database/ModelView.svelte
@@ -1,12 +1,12 @@
 <script>
   import { tick } from "svelte"
-  import Textbox from "../common/Textbox.svelte"
-  import Button from "../common/Button.svelte"
-  import Select from "../common/Select.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
-  import getIcon from "../common/icon"
+  import Textbox from "components/common/Textbox.svelte"
+  import Button from "components/common/Button.svelte"
+  import Select from "components/common/Select.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import getIcon from "components/common/icon"
   import FieldView from "./FieldView.svelte"
-  import Modal from "../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
   import {
     get,
     compose,
@@ -18,11 +18,11 @@
     keys,
     isDate,
   } from "lodash/fp"
-  import { store, backendUiStore } from "../builderStore"
-  import { common, hierarchy } from "../../../core/src"
-  import { getNode } from "../common/core"
-  import { templateApi, pipe, validate } from "../common/core"
-  import ErrorsBox from "../common/ErrorsBox.svelte"
+  import { store, backendUiStore } from "builderStore"
+  import { common, hierarchy } from "../../../../../core/src/"
+  import { getNode } from "components/common/core"
+  import { templateApi, pipe, validate } from "components/common/core"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
 
   let record
   let getIndexAllowedRecords
@@ -154,7 +154,7 @@
               <div>{field.name}</div>
             </td>
             <td>{field.type}</td>
-            <td>{field.typeOptions.values || ""}</td>
+            <td>{field.typeOptions.values || ''}</td>
             <td>
               <i
                 class="ri-delete-bin-6-line hoverable"
@@ -164,26 +164,28 @@
         {/each}
       </tbody>
     </table>
-      <div class="uk-margin">
-        <ActionButton color="secondary" on:click={store.saveCurrentNode}>
-          Save
+    <div class="uk-margin">
+      <ActionButton color="secondary" on:click={store.saveCurrentNode}>
+        Save
+      </ActionButton>
+      {#if modelExistsInHierarchy}
+        <ActionButton color="primary" on:click={store.newChildRecord}>
+          Create Child Model on {record.name}
         </ActionButton>
-        {#if modelExistsInHierarchy}
-          <ActionButton color="primary" on:click={store.newChildRecord}>
-            Create Child Model on {record.name}
-          </ActionButton>
-          <ActionButton
-            color="primary"
-            on:click={async () => {
-              backendUiStore.actions.modals.show('VIEW')
-              await tick()
-              store.newChildIndex()
-            }}>
-            Create Child View on {record.name}
-          </ActionButton>
-          <ActionButton alert on:click={store.deleteCurrentNode}>Delete</ActionButton>
-        {/if}
-      </div>
+        <ActionButton
+          color="primary"
+          on:click={async () => {
+            backendUiStore.actions.modals.show('VIEW')
+            await tick()
+            store.newChildIndex()
+          }}>
+          Create Child View on {record.name}
+        </ActionButton>
+        <ActionButton alert on:click={store.deleteCurrentNode}>
+          Delete
+        </ActionButton>
+      {/if}
+    </div>
   {:else}
     <FieldView
       field={fieldToEdit}
diff --git a/packages/builder/src/node_modules/components/nav/BackendNav.svelte b/packages/builder/src/node_modules/components/nav/BackendNav.svelte
index 57ad7ba957..96dddfa3ee 100644
--- a/packages/builder/src/node_modules/components/nav/BackendNav.svelte
+++ b/packages/builder/src/node_modules/components/nav/BackendNav.svelte
@@ -1,12 +1,11 @@
 <script>
   import { getContext } from "svelte"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import HierarchyRow from "./HierarchyRow.svelte"
   import DatabasesList from "./DatabasesList.svelte"
   import UsersList from "./UsersList.svelte"
-  import { hierarchy as hierarchyFunctions } from "../../../core/src"
   import NavItem from "./NavItem.svelte"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
 </script>
 
 <div class="items-root">
diff --git a/packages/builder/src/node_modules/components/nav/DatabasesList.svelte b/packages/builder/src/node_modules/components/nav/DatabasesList.svelte
index b531d34351..422e1b3136 100644
--- a/packages/builder/src/node_modules/components/nav/DatabasesList.svelte
+++ b/packages/builder/src/node_modules/components/nav/DatabasesList.svelte
@@ -1,6 +1,6 @@
 <script>
   import { tick } from "svelte"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 
diff --git a/packages/builder/src/node_modules/components/nav/HierarchyRow.svelte b/packages/builder/src/node_modules/components/nav/HierarchyRow.svelte
index fe80186ff2..247c626d1b 100644
--- a/packages/builder/src/node_modules/components/nav/HierarchyRow.svelte
+++ b/packages/builder/src/node_modules/components/nav/HierarchyRow.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import { cloneDeep } from "lodash/fp"
   import getIcon from "../common/icon"
 
diff --git a/packages/builder/src/node_modules/components/nav/NavItem.svelte b/packages/builder/src/node_modules/components/nav/NavItem.svelte
index 8bbda95ada..4ae739094d 100644
--- a/packages/builder/src/node_modules/components/nav/NavItem.svelte
+++ b/packages/builder/src/node_modules/components/nav/NavItem.svelte
@@ -1,6 +1,6 @@
 <script>
   import getIcon from "../common/icon"
-  import { backendUiStore } from "../builderStore"
+  import { backendUiStore } from "builderStore"
 
   export let name = ""
   export let label = ""
diff --git a/packages/builder/src/node_modules/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/node_modules/components/nav/SchemaManagementDrawer.svelte
index 4500845fd6..0f6118732b 100644
--- a/packages/builder/src/node_modules/components/nav/SchemaManagementDrawer.svelte
+++ b/packages/builder/src/node_modules/components/nav/SchemaManagementDrawer.svelte
@@ -1,10 +1,9 @@
 <script>
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import HierarchyRow from "./HierarchyRow.svelte"
-  import DropdownButton from "../common/DropdownButton.svelte"
-  import { hierarchy as hierarchyFunctions } from "../../../core/src"
+  import DropdownButton from "components/common/DropdownButton.svelte"
   import NavItem from "./NavItem.svelte"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
 
   function newModel() {
     if ($store.currentNode) {
diff --git a/packages/builder/src/node_modules/components/nav/UsersList.svelte b/packages/builder/src/node_modules/components/nav/UsersList.svelte
index e6a9398b3d..1caabf8a2a 100644
--- a/packages/builder/src/node_modules/components/nav/UsersList.svelte
+++ b/packages/builder/src/node_modules/components/nav/UsersList.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
-  import { store, backendUiStore } from "../builderStore"
-  import api from "../builderStore/api"
+  import { store, backendUiStore } from "builderStore"
+  import api from "builderStore/api"
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 
diff --git a/packages/builder/src/node_modules/components/userInterface/CodeEditor.svelte b/packages/builder/src/node_modules/components/userInterface/CodeEditor.svelte
index 2a870abc68..7f6bc9c297 100644
--- a/packages/builder/src/node_modules/components/userInterface/CodeEditor.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/CodeEditor.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
   import UIkit from "uikit"
-  import ActionButton from "../common/ActionButton.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
   import CodeMirror from "codemirror"
   import "codemirror/mode/javascript/javascript.js"
 
diff --git a/packages/builder/src/node_modules/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/node_modules/components/userInterface/ComponentPropertiesPanel.svelte
index f4ae4c3e3c..b9af0888d5 100644
--- a/packages/builder/src/node_modules/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/ComponentPropertiesPanel.svelte
@@ -1,15 +1,15 @@
 <script>
   import PropsView from "./PropsView.svelte"
   import StateBindingControl from "./StateBindingControl.svelte"
-  import { store } from "../builderStore"
-  import IconButton from "../common/IconButton.svelte"
+  import { store } from "builderStore"
+  import IconButton from "components/common/IconButton.svelte"
   import {
     LayoutIcon,
     PaintIcon,
     TerminalIcon,
     CircleIndicator,
     EventsIcon,
-  } from "../common/Icons/"
+  } from "components/common/Icons/"
   import CodeEditor from "./CodeEditor.svelte"
   import LayoutEditor from "./LayoutEditor.svelte"
   import EventsEditor from "./EventsEditor"
diff --git a/packages/builder/src/node_modules/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/node_modules/components/userInterface/ComponentSelectionList.svelte
index 3c342f6637..0ba617c32f 100644
--- a/packages/builder/src/node_modules/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/ComponentSelectionList.svelte
@@ -1,6 +1,6 @@
 <script>
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
   import {
     find,
     sortBy,
@@ -11,16 +11,16 @@
     uniqBy,
     flatten,
   } from "lodash/fp"
-  import { ImageIcon, InputIcon, LayoutIcon } from "../common/Icons/"
-  import Select from "../common/Select.svelte"
-  import Button from "../common/PlusButton.svelte"
-  import ConfirmDialog from "../common/ConfirmDialog.svelte"
+  import { ImageIcon, InputIcon, LayoutIcon } from "components/common/Icons/"
+  import Select from "components/common/Select.svelte"
+  import Button from "components/common/PlusButton.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     getRecordNodes,
     getIndexNodes,
     getIndexSchema,
     pipe,
-  } from "../common/core"
+  } from "components/common/core"
 
   export let toggleTab
 
@@ -35,13 +35,16 @@
   $: templatesByComponent = groupBy(t => t.component)($store.templates)
   $: hierarchy = $store.hierarchy
   $: libraryModules = $store.libraries
-  $: standaloneTemplates = pipe(templatesByComponent, [
-    values,
-    flatten,
-    filter(t => !$store.components.some(c => c.name === t.component)),
-    map(t => ({ name: splitName(t.component).componentName, template: t })),
-    uniqBy(t => t.name),
-  ])
+  $: standaloneTemplates = pipe(
+    templatesByComponent,
+    [
+      values,
+      flatten,
+      filter(t => !$store.components.some(c => c.name === t.component)),
+      map(t => ({ name: splitName(t.component).componentName, template: t })),
+      uniqBy(t => t.name),
+    ]
+  )
 
   const addRootComponent = (component, allComponents) => {
     const { libName } = splitName(component.name)
diff --git a/packages/builder/src/node_modules/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/node_modules/components/userInterface/ComponentsHierarchy.svelte
index 15d89e6d80..945d956c04 100644
--- a/packages/builder/src/node_modules/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/ComponentsHierarchy.svelte
@@ -2,10 +2,10 @@
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
 
   import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
-  import ConfirmDialog from "../common/ConfirmDialog.svelte"
-  import { pipe } from "../common/core"
-  import { store } from "../builderStore"
-  import { ArrowDownIcon, ShapeIcon } from "../common/Icons/"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { pipe } from "components/common/core"
+  import { store } from "builderStore"
+  import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
 
   export let screens = []
 
@@ -15,12 +15,15 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const lastPartOfName = c => {
     if (!c) return ""
@@ -32,10 +35,10 @@
 
   const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
 
-  $: _screens = pipe(screens, [
-    map(c => ({ component: c, title: lastPartOfName(c) })),
-    sortBy("title"),
-  ])
+  $: _screens = pipe(
+    screens,
+    [map(c => ({ component: c, title: lastPartOfName(c) })), sortBy("title")]
+  )
 
   const isScreenSelected = component =>
     component.component &&
diff --git a/packages/builder/src/node_modules/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/node_modules/components/userInterface/ComponentsPaneSwitcher.svelte
index 359891b2af..e40d47f526 100644
--- a/packages/builder/src/node_modules/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { store } from "../builderStore/"
+  import { store } from "builderStore/"
   import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "./ComponentSelectionList.svelte"
 
diff --git a/packages/builder/src/node_modules/components/userInterface/CurrentItemPreview.svelte b/packages/builder/src/node_modules/components/userInterface/CurrentItemPreview.svelte
index 3ec48442ac..371f1eaada 100644
--- a/packages/builder/src/node_modules/components/userInterface/CurrentItemPreview.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/CurrentItemPreview.svelte
@@ -1,7 +1,7 @@
 <script>
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import { map, join } from "lodash/fp"
-  import { pipe } from "../common/core"
+  import { pipe } from "components/common/core"
 
   let iframe
 
diff --git a/packages/builder/src/node_modules/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/node_modules/components/userInterface/EventsEditor/EventsEditor.svelte
index 55ea54475e..d4c31ae2c0 100644
--- a/packages/builder/src/node_modules/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/EventsEditor/EventsEditor.svelte
@@ -10,18 +10,18 @@
     filter,
     difference,
   } from "lodash/fp"
-  import { pipe } from "../../common/core"
-  import Checkbox from "../../common/Checkbox.svelte"
-  import Textbox from "../../common/Textbox.svelte"
-  import Dropdown from "../../common/Dropdown.svelte"
-  import PlusButton from "../../common/PlusButton.svelte"
-  import IconButton from "../../common/IconButton.svelte"
-  import Modal from "../../common/Modal.svelte"
+  import { pipe } from "components/common/core"
+  import Checkbox from "components/common/Checkbox.svelte"
+  import Textbox from "components/common/Textbox.svelte"
+  import Dropdown from "components/common/Dropdown.svelte"
+  import PlusButton from "components/common/PlusButton.svelte"
+  import IconButton from "components/common/IconButton.svelte"
+  import Modal from "components/common/Modal.svelte"
   import EventEditorModal from "./EventEditorModal.svelte"
   import HandlerSelector from "./HandlerSelector.svelte"
 
-  import { PencilIcon } from "../../common/Icons"
-  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
+  import { PencilIcon } from "components/common/Icons"
+  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
 
   export const EVENT_TYPE = "event"
 
diff --git a/packages/builder/src/node_modules/components/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/node_modules/components/userInterface/EventsEditor/HandlerSelector.svelte
index d34b7303ab..dacdf60681 100644
--- a/packages/builder/src/node_modules/components/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/EventsEditor/HandlerSelector.svelte
@@ -1,16 +1,16 @@
 <script>
-  import IconButton from "../../common/IconButton.svelte"
-  import PlusButton from "../../common/PlusButton.svelte"
-  import Select from "../../common/Select.svelte"
+  import IconButton from "components/common/IconButton.svelte"
+  import PlusButton from "components/common/PlusButton.svelte"
+  import Select from "components/common/Select.svelte"
   import StateBindingCascader from "./StateBindingCascader.svelte"
   import StateBindingControl from "../StateBindingControl.svelte"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
-  import { pipe, userWithFullAccess } from "../../common/core"
+  import { pipe, userWithFullAccess } from "components/common/core"
   import {
     EVENT_TYPE_MEMBER_NAME,
     allHandlers,
-  } from "../../common/eventHandlers"
-  import { store } from "../../builderStore"
+  } from "components/common/eventHandlers"
+  import { store } from "builderStore"
 
   export let handler
   export let onCreate
diff --git a/packages/builder/src/node_modules/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/node_modules/components/userInterface/EventsEditor/StateBindingCascader.svelte
index 87a4cba96f..fdadc20a67 100644
--- a/packages/builder/src/node_modules/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -1,18 +1,18 @@
 <script>
-  import IconButton from "../../common/IconButton.svelte"
-  import PlusButton from "../../common/PlusButton.svelte"
-  import Select from "../../common/Select.svelte"
-  import Input from "../../common/Input.svelte"
+  import IconButton from "components/common/IconButton.svelte"
+  import PlusButton from "components/common/PlusButton.svelte"
+  import Select from "components/common/Select.svelte"
+  import Input from "components/common/Input.svelte"
   import StateBindingControl from "../StateBindingControl.svelte"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
-  import { pipe, userWithFullAccess } from "../../common/core"
+  import { pipe, userWithFullAccess } from "components/common/core"
   import {
     EVENT_TYPE_MEMBER_NAME,
     allHandlers,
-  } from "../../common/eventHandlers"
-  import { store } from "../../builderStore"
+  } from "components/common/eventHandlers"
+  import { store } from "builderStore"
   import StateBindingOptions from "../PropertyCascader/StateBindingOptions.svelte"
-  import { ArrowDownIcon } from "../../common/Icons/"
+  import { ArrowDownIcon } from "components/common/Icons/"
 
   export let parameter
   export let onChange
diff --git a/packages/builder/src/node_modules/components/userInterface/MasterLayout.svelte b/packages/builder/src/node_modules/components/userInterface/MasterLayout.svelte
index bf691069c0..4f7cfd2cec 100644
--- a/packages/builder/src/node_modules/components/userInterface/MasterLayout.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/MasterLayout.svelte
@@ -3,10 +3,10 @@
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
 
   import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
-  import ConfirmDialog from "../common/ConfirmDialog.svelte"
-  import { pipe } from "../common/core"
-  import { store } from "../builderStore"
-  import { ArrowDownIcon, GridIcon } from "../common/Icons/"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { pipe } from "components/common/core"
+  import { store } from "builderStore"
+  import { ArrowDownIcon, GridIcon } from "components/common/Icons/"
 
   export let layout
 
@@ -16,12 +16,15 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const lastPartOfName = c =>
     c && last(c.name ? c.name.split("/") : c._component.split("/"))
@@ -30,7 +33,10 @@
 
   const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
 
-  $: _layout = pipe(layout, [c => ({ component: c, title: lastPartOfName(c) })])
+  $: _layout = pipe(
+    layout,
+    [c => ({ component: c, title: lastPartOfName(c) })]
+  )
 
   const isScreenSelected = component =>
     component.component &&
diff --git a/packages/builder/src/node_modules/components/userInterface/NewScreen.svelte b/packages/builder/src/node_modules/components/userInterface/NewScreen.svelte
index 617fb91145..be2f3f3bcc 100644
--- a/packages/builder/src/node_modules/components/userInterface/NewScreen.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/NewScreen.svelte
@@ -1,12 +1,12 @@
 <script>
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
   import PropsView from "./PropsView.svelte"
-  import Textbox from "../common/Textbox.svelte"
-  import Button from "../common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
-  import ConfirmDialog from "../common/ConfirmDialog.svelte"
-  import { pipe } from "../common/core"
+  import Textbox from "components/common/Textbox.svelte"
+  import Button from "components/common/Button.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { pipe } from "components/common/core"
   import UIkit from "uikit"
   import { isRootComponent } from "./pagesParsing/searchComponents"
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
@@ -26,10 +26,13 @@
 
   let saveAttempted = false
 
-  $: layoutComponents = pipe($store.components, [
-    filter(c => c.container),
-    map(c => ({ name: c.name, ...splitName(c.name) })),
-  ])
+  $: layoutComponents = pipe(
+    $store.components,
+    [
+      filter(c => c.container),
+      map(c => ({ name: c.name, ...splitName(c.name) })),
+    ]
+  )
 
   $: layoutComponent = layoutComponent
     ? find(c => c.name === layoutComponent.name)(layoutComponents)
diff --git a/packages/builder/src/node_modules/components/userInterface/PageView.svelte b/packages/builder/src/node_modules/components/userInterface/PageView.svelte
index ad48789303..4c950e37d1 100644
--- a/packages/builder/src/node_modules/components/userInterface/PageView.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/PageView.svelte
@@ -1,20 +1,20 @@
 <script>
-  import Textbox from "../common/Textbox.svelte"
-  import Dropdown from "../common/Dropdown.svelte"
-  import Button from "../common/Button.svelte"
-  import { store } from "../builderStore"
+  import Textbox from "components/common/Textbox.svelte"
+  import Dropdown from "components/common/Dropdown.svelte"
+  import Button from "components/common/Button.svelte"
+  import { store } from "builderStore"
   import { isRootComponent } from "./pagesParsing/searchComponents"
-  import { pipe } from "../common/core"
+  import { pipe } from "components/common/core"
   import { filter, find, concat } from "lodash/fp"
 
   const notSeletedComponent = { name: "(none selected)" }
 
   $: page = $store.pages[$store.currentPageName]
   $: title = page.index.title
-  $: components = pipe($store.components, [
-    filter(store => !isRootComponent($store)),
-    concat([notSeletedComponent]),
-  ])
+  $: components = pipe(
+    $store.components,
+    [filter(store => !isRootComponent($store)), concat([notSeletedComponent])]
+  )
   $: entryComponent =
     find(c => c.name === page.appBody)(components) || notSeletedComponent
 
diff --git a/packages/builder/src/node_modules/components/userInterface/PagesList.svelte b/packages/builder/src/node_modules/components/userInterface/PagesList.svelte
index bd4ce7bd35..0f0a9f4dc7 100644
--- a/packages/builder/src/node_modules/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/PagesList.svelte
@@ -1,7 +1,7 @@
 <script>
-  import { store } from "../builderStore"
-  import getIcon from "../common/icon"
-  import { CheckIcon } from "../common/Icons"
+  import { store } from "builderStore"
+  import getIcon from "components/common/icon"
+  import { CheckIcon } from "components/common/Icons"
 
   const getPage = (s, name) => {
     const props = s.pages[name]
diff --git a/packages/builder/src/node_modules/components/userInterface/PropertyCascader/PropertyCascader.svelte b/packages/builder/src/node_modules/components/userInterface/PropertyCascader/PropertyCascader.svelte
index 4b51cab58b..dba1001f8f 100644
--- a/packages/builder/src/node_modules/components/userInterface/PropertyCascader/PropertyCascader.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/PropertyCascader/PropertyCascader.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { ArrowDownIcon } from "../../common/Icons/"
-  import { store } from "../../builderStore"
-  import { buildStateOrigins } from "../../builderStore/buildStateOrigins"
-  import { isBinding, getBinding, setBinding } from "../../common/binding"
+  import { ArrowDownIcon } from "components/common/Icons/"
+  import { store } from "builderStore"
+  import { buildStateOrigins } from "builderStore/buildStateOrigins"
+  import { isBinding, getBinding, setBinding } from "components/common/binding"
   import StateBindingOptions from "./StateBindingOptions.svelte"
 
   export let onChanged = () => {}
diff --git a/packages/builder/src/node_modules/components/userInterface/SettingsView.svelte b/packages/builder/src/node_modules/components/userInterface/SettingsView.svelte
index bc7441561d..e786bfcab3 100644
--- a/packages/builder/src/node_modules/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/SettingsView.svelte
@@ -1,11 +1,11 @@
 <script>
-  import { store } from "../builderStore"
-  import Textbox from "../common/Textbox.svelte"
-  import Button from "../common/Button.svelte"
-  import IconButton from "../common/IconButton.svelte"
+  import { store } from "builderStore"
+  import Textbox from "components/common/Textbox.svelte"
+  import Button from "components/common/Button.svelte"
+  import IconButton from "components/common/IconButton.svelte"
   import { libraryDependencies } from "./pagesParsing/findDependencies"
   import UIkit from "uikit"
-  import { libsFromPages } from "../builderStore/loadComponentLibraries"
+  import { libsFromPages } from "builderStore/loadComponentLibraries"
   let addNewLib = ""
   let addNewStylesheet = ""
   let modalElement
diff --git a/packages/builder/src/node_modules/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/node_modules/components/userInterface/UserInterfaceRoot.svelte
index 54c96114f4..c075a4e199 100644
--- a/packages/builder/src/node_modules/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/node_modules/components/userInterface/UserInterfaceRoot.svelte
@@ -3,17 +3,17 @@
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
   import MasterLayout from "./MasterLayout.svelte"
   import PagesList from "./PagesList.svelte"
-  import { store } from "../builderStore"
-  import IconButton from "../common/IconButton.svelte"
-  import Modal from "../common/Modal.svelte"
+  import { store } from "builderStore"
+  import IconButton from "components/common/IconButton.svelte"
+  import Modal from "components/common/Modal.svelte"
   import NewScreen from "./NewScreen.svelte"
   import CurrentItemPreview from "./CurrentItemPreview.svelte"
   import SettingsView from "./SettingsView.svelte"
   import PageView from "./PageView.svelte"
   import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
-  import ConfirmDialog from "../common/ConfirmDialog.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
-  import { AddIcon } from "../common/Icons"
+  import { AddIcon } from "components/common/Icons"
 
   let newScreenPicker
   let confirmDeleteDialog
diff --git a/packages/builder/src/node_modules/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/node_modules/components/userInterface/pagesParsing/createProps.js
index 42e1fd37e4..cda6ec760a 100644
--- a/packages/builder/src/node_modules/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/node_modules/components/userInterface/pagesParsing/createProps.js
@@ -1,7 +1,7 @@
 import { isString, isUndefined } from "lodash/fp"
 import { types } from "./types"
 import { assign } from "lodash"
-import { uuid } from "../../builderStore/uuid"
+import { uuid } from "builderStore/uuid"
 
 export const getBuiltin = name => {
   const { props } = createProps({ name })