Type DND store and update store import aliases

packages/client/src/api/api.ts

@@ -1,10 +1,6 @@
 import { createAPIClient } from "@budibase/frontend-core"
 import { authStore } from "../stores/auth"
-import {
+import { notificationStore, devToolsEnabled, devToolsStore } from "../stores"
-  notificationStore,
-  devToolsEnabled,
-  devToolsStore,
-} from "../stores/index"
 import { get } from "svelte/store"
 
 export const API = createAPIClient({

packages/client/src/components/ClientApp.svelte

@@ -6,7 +6,7 @@
   import { Constants, CookieUtils } from "@budibase/frontend-core"
   import { getThemeClassNames } from "@budibase/shared-core"
   import Component from "./Component.svelte"
-  import SDK from "sdk"
+  import SDK from "@/sdk"
   import {
     featuresStore,
     createContextStore,
@@ -22,26 +22,26 @@
     environmentStore,
     sidePanelStore,
     modalStore,
-  } from "stores"
+  } from "@/stores"
-  import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
+  import NotificationDisplay from "./overlay/NotificationDisplay.svelte"
-  import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
+  import ConfirmationDisplay from "./overlay/ConfirmationDisplay.svelte"
-  import PeekScreenDisplay from "components/overlay/PeekScreenDisplay.svelte"
+  import PeekScreenDisplay from "./overlay/PeekScreenDisplay.svelte"
-  import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
+  import UserBindingsProvider from "./context/UserBindingsProvider.svelte"
-  import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
+  import DeviceBindingsProvider from "./context/DeviceBindingsProvider.svelte"
-  import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
+  import StateBindingsProvider from "./context/StateBindingsProvider.svelte"
-  import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
+  import RowSelectionProvider from "./context/RowSelectionProvider.svelte"
-  import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
+  import QueryParamsProvider from "./context/QueryParamsProvider.svelte"
-  import SettingsBar from "components/preview/SettingsBar.svelte"
+  import SettingsBar from "./preview/SettingsBar.svelte"
-  import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
+  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
-  import HoverIndicator from "components/preview/HoverIndicator.svelte"
+  import HoverIndicator from "./preview/HoverIndicator.svelte"
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
-  import DNDHandler from "components/preview/DNDHandler.svelte"
+  import DNDHandler from "./preview/DNDHandler.svelte"
-  import GridDNDHandler from "components/preview/GridDNDHandler.svelte"
+  import GridDNDHandler from "./preview/GridDNDHandler.svelte"
-  import KeyboardManager from "components/preview/KeyboardManager.svelte"
+  import KeyboardManager from "./preview/KeyboardManager.svelte"
-  import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
+  import DevToolsHeader from "./devtools/DevToolsHeader.svelte"
-  import DevTools from "components/devtools/DevTools.svelte"
+  import DevTools from "./devtools/DevTools.svelte"
-  import FreeFooter from "components/FreeFooter.svelte"
+  import FreeFooter from "./FreeFooter.svelte"
-  import MaintenanceScreen from "components/MaintenanceScreen.svelte"
+  import MaintenanceScreen from "./MaintenanceScreen.svelte"
   import SnippetsProvider from "./context/SnippetsProvider.svelte"
   import EmbedProvider from "./context/EmbedProvider.svelte"
   import DNDSelectionIndicators from "./preview/DNDSelectionIndicators.svelte"

packages/client/src/components/Component.svelte

@@ -20,7 +20,7 @@
     appStore,
     dndComponentPath,
     dndIsDragging,
-  } from "stores"
+  } from "@/stores"
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import EmptyPlaceholder from "components/app/EmptyPlaceholder.svelte"

packages/client/src/components/CustomThemeWrapper.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { themeStore } from "stores"
+  import { themeStore } from "@/stores"
   import { setContext } from "svelte"
   import { Context } from "@budibase/bbui"
 

packages/client/src/components/Router.svelte

@@ -1,7 +1,7 @@
 <script>
   import { setContext, getContext, onMount } from "svelte"
   import Router, { querystring } from "svelte-spa-router"
-  import { routeStore, stateStore } from "stores"
+  import { routeStore, stateStore } from "@/stores"
   import Screen from "./Screen.svelte"
   import { get } from "svelte/store"
 

packages/client/src/components/Screen.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { screenStore, routeStore, builderStore } from "stores"
+  import { screenStore, routeStore, builderStore } from "@/stores"
   import { get } from "svelte/store"
   import Component from "./Component.svelte"
   import Provider from "./context/Provider.svelte"

packages/client/src/components/app/GridBlock.svelte

@@ -3,7 +3,7 @@
   // because it functions similarly to one
   import { getContext, onMount } from "svelte"
   import { get, derived, readable } from "svelte/store"
-  import { featuresStore } from "stores"
+  import { featuresStore } from "@/stores"
   import { Grid } from "@budibase/frontend-core"
   import { processStringSync } from "@budibase/string-templates"
 

packages/client/src/components/app/blocks/MultiStepFormblock.svelte

@@ -2,7 +2,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import { Helpers } from "@budibase/bbui"
   import { getContext, setContext } from "svelte"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
   import { get, writable } from "svelte/store"

packages/client/src/components/context/DeviceBindingsProvider.svelte

@@ -1,7 +1,7 @@
 <script>
   import Provider from "./Provider.svelte"
   import { onMount, onDestroy } from "svelte"
-  import { themeStore } from "stores"
+  import { themeStore } from "@/stores"
 
   let width = window.innerWidth
   let height = window.innerHeight

packages/client/src/components/context/Provider.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext, setContext, onDestroy } from "svelte"
-  import { dataSourceStore, createContextStore } from "stores"
+  import { dataSourceStore, createContextStore } from "@/stores"
   import { ActionTypes } from "constants"
   import { generate } from "shortid"
 

packages/client/src/components/context/QueryParamsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { routeStore } from "stores"
+  import { routeStore } from "@/stores"
 </script>
 
 <Provider key="query" data={$routeStore.queryParams}>

packages/client/src/components/context/RowSelectionProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { rowSelectionStore } from "stores"
+  import { rowSelectionStore } from "@/stores"
 </script>
 
 <Provider key="rowSelection" data={$rowSelectionStore}>

packages/client/src/components/context/SnippetsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { snippets } from "stores"
+  import { snippets } from "@/stores"
 </script>
 
 <Provider key="snippets" data={$snippets}>

packages/client/src/components/context/StateBindingsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { stateStore } from "stores"
+  import { stateStore } from "@/stores"
 </script>
 
 <Provider key="state" data={$stateStore}>

packages/client/src/components/context/UserBindingsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { authStore, currentRole } from "stores"
+  import { authStore, currentRole } from "@/stores"
   import { ActionTypes } from "constants"
   import { Constants } from "@budibase/frontend-core"
 

packages/client/src/components/devtools/DevTools.svelte

@@ -3,7 +3,7 @@
   import { Layout, Heading, Tabs, Tab, Icon } from "@budibase/bbui"
   import DevToolsStatsTab from "./DevToolsStatsTab.svelte"
   import DevToolsComponentTab from "./DevToolsComponentTab.svelte"
-  import { devToolsStore } from "stores"
+  import { devToolsStore } from "@/stores"
 
   const context = getContext("context")
 </script>

packages/client/src/components/devtools/DevToolsComponentContextTab.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Layout, Select, Body } from "@budibase/bbui"
-  import { componentStore } from "stores/index.js"
+  import { componentStore } from "stores/index.ts"
   import DevToolsStat from "./DevToolsStat.svelte"
 
   const ReadableBindingMap = {

packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte

@@ -2,7 +2,7 @@
   import { Layout, Toggle } from "@budibase/bbui"
   import { getSettingsDefinition } from "@budibase/frontend-core"
   import DevToolsStat from "./DevToolsStat.svelte"
-  import { componentStore } from "stores/index.js"
+  import { componentStore } from "stores/index.ts"
 
   let showEnrichedSettings = true
 

packages/client/src/components/devtools/DevToolsComponentTab.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Body, Layout, Heading, Button, Tabs, Tab } from "@budibase/bbui"
-  import { builderStore, devToolsStore, componentStore } from "stores"
+  import { builderStore, devToolsStore, componentStore } from "@/stores"
   import DevToolsStat from "./DevToolsStat.svelte"
   import DevToolsComponentSettingsTab from "./DevToolsComponentSettingsTab.svelte"
   import DevToolsComponentContextTab from "./DevToolsComponentContextTab.svelte"

packages/client/src/components/devtools/DevToolsHeader.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Heading, Select, ActionButton } from "@budibase/bbui"
-  import { devToolsStore, appStore } from "../../stores"
+  import { devToolsStore, appStore } from "stores"
   import { getContext, onMount } from "svelte"
   import { API } from "api"
 

packages/client/src/components/devtools/DevToolsStat.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Helpers } from "@budibase/bbui"
-  import { notificationStore } from "stores"
+  import { notificationStore } from "@/stores"
 
   export let label
   export let value

packages/client/src/components/devtools/DevToolsStatsTab.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Layout } from "@budibase/bbui"
-  import { authStore, appStore, screenStore, componentStore } from "stores"
+  import { authStore, appStore, screenStore, componentStore } from "@/stores"
   import DevToolsStat from "./DevToolsStat.svelte"
 </script>
 

packages/client/src/components/overlay/ConfirmationDisplay.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { confirmationStore } from "stores"
+  import { confirmationStore } from "@/stores"
   import { Modal, ModalContent } from "@budibase/bbui"
 </script>
 

packages/client/src/components/overlay/NotificationDisplay.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { notificationStore } from "stores"
+  import { notificationStore } from "@/stores"
   import { Notification } from "@budibase/bbui"
   import { fly } from "svelte/transition"
 </script>

packages/client/src/components/overlay/PeekScreenDisplay.svelte

@@ -5,7 +5,7 @@
     notificationStore,
     routeStore,
     stateStore,
-  } from "stores"
+  } from "@/stores"
   import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 

packages/client/src/components/preview/DNDHandler.svelte

@@ -10,7 +10,7 @@
     dndSource,
     dndIsDragging,
     isGridScreen,
-  } from "stores"
+  } from "@/stores"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "@/utils/components.js"
   import { isGridEvent } from "@/utils/grid"
@@ -266,7 +266,7 @@
         source.type,
         drop.parent,
         drop.index,
-        $dndStore.meta.newComponentProps
+        $dndStore.source?.props
       )
       dropping = false
       stopDragging()

packages/client/src/components/preview/DNDSelectionIndicators.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { isGridScreen, dndParent, dndSource, dndIsDragging } from "@/stores"
+  import { isGridScreen, dndParent, dndSource, dndIsDragging } from "stores"
   import { DNDPlaceholderID } from "@/constants"
   import IndicatorSet from "./IndicatorSet.svelte"
 </script>

packages/client/src/components/preview/GridDNDHandler.svelte

@@ -7,7 +7,7 @@
     dndStore,
     dndSource,
     isGridScreen,
-  } from "stores"
+  } from "@/stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import { DNDPlaceholderID, GridRowHeight } from "@/constants"
   import {
@@ -54,7 +54,7 @@
     // real component to render in the new position before updating the DND
     // store, preventing the green DND overlay from being out of position
     if ($dndSource?.isNew && styles) {
-      dndStore.actions.updateNewComponentProps({
+      dndStore.actions.updateSourceProps({
         _styles: {
           normal: styles,
         },

packages/client/src/components/preview/GridNewComponentDNDHandler.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onDestroy, getContext } from "svelte"
-  import { builderStore, componentStore, screenStore } from "stores"
+  import { builderStore, componentStore, screenStore } from "@/stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import { GridRowHeight } from "constants"
   import { GridParams, getGridVar, Devices } from "utils/grid"

packages/client/src/components/preview/GridStylesButton.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let style
   export let value

packages/client/src/components/preview/KeyboardManager.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import { get } from "svelte/store"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   onMount(() => {
     if (get(builderStore).inBuilder) {

packages/client/src/components/preview/SelectionIndicator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { dndIsDragging, builderStore } from "@/stores"
+  import { dndIsDragging, builderStore } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 
   $: color = $builderStore.editMode

packages/client/src/components/preview/SettingsBar.svelte

@@ -4,7 +4,7 @@
   import GridStylesButton from "./GridStylesButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore, componentStore, dndIsDragging } from "stores"
+  import { builderStore, componentStore, dndIsDragging } from "@/stores"
   import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
   import { getGridVar, GridParams, Devices } from "utils/grid"
 

packages/client/src/components/preview/SettingsButton.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop

packages/client/src/components/preview/SettingsColorPicker.svelte

@@ -1,6 +1,6 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let prop
   export let component

packages/client/src/components/preview/SettingsPicker.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let prop
   export let options

packages/client/src/index.ts

@@ -10,7 +10,7 @@ import {
   eventStore,
   hoverStore,
   stateStore,
-} from "@/stores"
+} from "stores"
 import { get } from "svelte/store"
 import { initWebsocket } from "@/websocket"
 import { APIClient } from "@budibase/frontend-core"
@@ -163,12 +163,7 @@ const loadBudibase = async () => {
     } else if (type === "dragging-new-component") {
       const { dragging, component } = data
       if (dragging) {
-        const definition =
+        dndStore.actions.startDraggingNewComponent(component)
-          componentStore.actions.getComponentDefinition(component)
-        dndStore.actions.startDraggingNewComponent({
-          component,
-          definition,
-        })
       } else {
         dndStore.actions.reset()
       }

packages/client/src/sdk.js

@@ -18,7 +18,7 @@ import {
   appStore,
   stateStore,
   createContextStore,
-} from "stores"
+} from "@/stores"
 import { styleable } from "utils/styleable"
 import { linkable } from "utils/linkable"
 import { getAction } from "utils/getAction"

packages/client/src/stores/derived/dndComponentPath.js

@@ -1,6 +1,6 @@
 import { derived } from "svelte/store"
 import { findComponentPathById } from "utils/components.js"
-import { dndParent } from "../dnd.js"
+import { dndParent } from "../dnd.ts"
 import { screenStore } from "../screens.js"
 
 export const dndComponentPath = derived(

packages/client/src/stores/dnd.ts

@@ -1,54 +1,65 @@
 import { writable, get } from "svelte/store"
 import { derivedMemo } from "@budibase/frontend-core"
-import { screenStore, isGridScreen } from "@/stores"
+import { screenStore, isGridScreen, componentStore } from "stores/index"
 import { ScreenslotID } from "@/constants"
+import { ComponentDefinition } from "@budibase/types"
+
+interface DNDSource {
+  id?: string
+  parent?: string
+  index?: number
+  bounds: {
+    height: number
+    width: number
+  }
+  name: string
+  icon: string
+  type: string
+  isNew: boolean
+  props?: Record<string, any>
+}
+
+interface DNDTarget {
+  id: string
+  parent: string
+  empty: boolean
+  acceptsChildren: boolean
+  node?: Node
+}
+
+interface DNDDrop {
+  parent: string
+  index: number
+}
+
+interface DNDState {
+  source?: DNDSource
+  target?: DNDTarget
+  drop?: DNDDrop
+}
 
 const createDndStore = () => {
-  const initialState = {
+  const store = writable<DNDState>({})
-    // Info about the dragged component
-    source: null,
 
-    // Info about the target component being hovered over
+  const startDraggingExistingComponent = (source: Omit<DNDSource, "isNew">) => {
-    target: null,
-
-    // Info about where the component would be dropped
-    drop: null,
-
-    // Metadata about the event
-    meta: {
-      newComponentProps: null,
-    },
-  }
-  const store = writable(initialState)
-
-  const startDraggingExistingComponent = ({
-    id,
-    parent,
-    bounds,
-    index,
-    name,
-    icon,
-  }) => {
     store.set({
-      ...initialState,
+      source: {
-      source: { id, parent, bounds, index, name, icon, isNew: false },
+        ...source,
+        isNew: false,
+      },
     })
   }
 
-  const startDraggingNewComponent = ({ component, definition }) => {
+  const startDraggingNewComponent = (type: string) => {
-    if (!component) {
-      return
-    }
-
     // On grid screens, we already know exactly where to insert the component
-    let target, drop
+    let target: DNDTarget | undefined = undefined
-    const screen = get(screenStore)?.activeScreen
+    let drop: DNDDrop | undefined = undefined
     if (get(isGridScreen)) {
-      const id = screen?.props?._id
+      const screen = get(screenStore)?.activeScreen
+      const id = screen.props._id
       target = {
         id,
         parent: ScreenslotID,
-        node: null,
         empty: false,
         acceptsChildren: true,
       }
@@ -59,52 +70,55 @@ const createDndStore = () => {
     }
 
     // Get size of new component so we can show a properly sized placeholder
+    const definition: ComponentDefinition =
+      componentStore.actions.getComponentDefinition(type)
     const width = definition?.size?.width || 128
     const height = definition?.size?.height || 64
 
     store.set({
-      ...initialState,
       source: {
-        id: null,
-        parent: null,
         bounds: { height, width },
-        index: null,
+        type,
-        type: component,
         isNew: true,
-        name: `New ${definition.name}`,
+        name: `New ${definition?.name || "component"}`,
-        icon: definition.icon,
+        icon: definition?.icon || "Selection",
       },
       target,
       drop,
     })
   }
 
-  const updateTarget = ({ id, parent, node, empty, acceptsChildren }) => {
+  const updateTarget = (target: DNDTarget) => {
     store.update(state => {
-      state.target = { id, parent, node, empty, acceptsChildren }
+      state.target = target
       return state
     })
   }
 
-  const updateDrop = ({ parent, index }) => {
+  const updateDrop = (drop: DNDDrop) => {
     store.update(state => {
-      state.drop = { parent, index }
+      state.drop = drop
       return state
     })
   }
 
   const reset = () => {
-    store.set(initialState)
+    store.set({})
   }
 
-  const updateNewComponentProps = newComponentProps => {
+  const updateSourceProps = (props: Record<string, any>) => {
-    store.update(state => ({
+    store.update(state => {
+      if (!state.source) {
+        return state
+      }
+      return {
         ...state,
-      meta: {
+        source: {
-        ...state.meta,
+          ...state.source,
-        newComponentProps,
+          props,
         },
-    }))
+      }
+    })
   }
 
   return {
@@ -115,7 +129,7 @@ const createDndStore = () => {
       updateTarget,
       updateDrop,
       reset,
-      updateNewComponentProps,
+      updateSourceProps,
     },
   }
 }

packages/client/src/stores/screens.js

@@ -3,7 +3,7 @@ import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
 import { orgStore } from "./org"
-import { dndIndex, dndParent, dndSource } from "./dnd.js"
+import { dndIndex, dndParent, dndSource } from "./dnd.ts"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"

packages/client/src/utils/buttonActions.js

@@ -13,7 +13,7 @@ import {
   rowSelectionStore,
   sidePanelStore,
   modalStore,
-} from "stores"
+} from "@/stores"
 import { API } from "api"
 import { ActionTypes } from "constants"
 import { enrichDataBindings } from "./enrichDataBinding"

packages/client/src/utils/styleable.js

@@ -1,4 +1,4 @@
-import { builderStore } from "stores"
+import { builderStore } from "@/stores"
 
 /**
  * Helper to build a CSS string from a style object.

packages/client/src/websocket.js

@@ -1,8 +1,4 @@
-import {
+import { builderStore, environmentStore, notificationStore } from "stores"
-  builderStore,
-  environmentStore,
-  notificationStore,
-} from "./stores/index.js"
 import { get } from "svelte/store"
 import { createWebsocket } from "@budibase/frontend-core"
 

packages/types/src/ui/components/index.ts

@@ -23,6 +23,11 @@ export interface ComponentDefinition {
   legalDirectChildren: string[]
   requiredAncestors?: string[]
   illegalChildren: string[]
+  icon?: string
+  size?: {
+    width: number
+    height: number
+  }
 }
 
 export interface ComponentSetting {