From 894cfba0e07eebfd2b34878dfa123984a98fc420 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 10:58:03 +0100
Subject: [PATCH 1/6] Type BindingSidePanel

---
 .../bbui/src/Actions/position_dropdown.ts     |   2 +-
 packages/bbui/src/Popover/Popover.svelte      |   3 +-
 .../common/bindings/BindingPanel.svelte       |   2 +-
 .../common/bindings/BindingSidePanel.svelte   | 109 ++++++++++--------
 packages/types/src/ui/bindings/binding.ts     |  12 ++
 packages/types/src/ui/bindings/helper.ts      |   1 +
 6 files changed, 79 insertions(+), 50 deletions(-)

diff --git a/packages/bbui/src/Actions/position_dropdown.ts b/packages/bbui/src/Actions/position_dropdown.ts
index 424baf91f3..edfe901921 100644
--- a/packages/bbui/src/Actions/position_dropdown.ts
+++ b/packages/bbui/src/Actions/position_dropdown.ts
@@ -27,7 +27,7 @@ export type UpdateHandler = (
 
 interface Opts {
   anchor?: HTMLElement
-  align: PopoverAlignment
+  align: PopoverAlignment | `${PopoverAlignment}`
   maxHeight?: number
   maxWidth?: number
   minWidth?: number
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 0d16aa4f77..5d0c5b7039 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -19,7 +19,8 @@
   import { PopoverAlignment } from "../constants"
 
   export let anchor: HTMLElement
-  export let align: PopoverAlignment = PopoverAlignment.Right
+  export let align: PopoverAlignment | `${PopoverAlignment}` =
+    PopoverAlignment.Right
   export let portalTarget: string | undefined = undefined
   export let minWidth: number | undefined = undefined
   export let maxWidth: number | undefined = undefined
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 2c35acdf2d..1f61136500 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -421,7 +421,7 @@
           {context}
           addHelper={onSelectHelper}
           addBinding={onSelectBinding}
-          mode={editorMode}
+          {mode}
         />
       {:else if sidePanel === SidePanel.Evaluation}
         <EvaluationSidePanel
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index c45d7999e5..9cd56c7797 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -1,32 +1,40 @@
-<script>
+<script lang="ts">
   import groupBy from "lodash/fp/groupBy"
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "@/constants/completions"
+  import { BindingMode, EnrichedBinding, Helper } from "@budibase/types"
 
-  export let addHelper
-  export let addBinding
-  export let bindings
-  export let mode
-  export let allowHelpers
+  export let addHelper: (helper: Helper, js?: boolean) => void
+  export let addBinding: (binding: EnrichedBinding) => void
+  export let bindings: EnrichedBinding[]
+  export let mode: BindingMode
+  export let allowHelpers: boolean
   export let context = null
 
   let search = ""
   let searching = false
-  let popover
-  let popoverAnchor
-  let hoverTarget
+  let popover: Popover
+  let popoverAnchor: HTMLElement | null
+  let hoverTarget: {
+    helper: boolean
+    code: string
+    description?: string
+  } | null
   let helpers = handlebarsCompletions()
-  let selectedCategory
-  let hideTimeout
+  let selectedCategory: string | null
+  let hideTimeout: ReturnType<typeof setTimeout> | null
 
-  $: bindingIcons = bindings?.reduce((acc, ele) => {
+  $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
     if (ele.icon) {
       acc[ele.category] = acc[ele.category] || ele.icon
     }
     return acc
   }, {})
-  $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
+  $: categoryIcons = {
+    ...bindingIcons,
+    Helpers: "MagicWand",
+  } as Record<string, string>
   $: categories = Object.entries(groupBy("category", bindings))
   $: categoryNames = getCategoryNames(categories)
   $: searchRgx = new RegExp(search, "ig")
@@ -48,11 +56,11 @@
       (!search ||
         helper.label.match(searchRgx) ||
         helper.description.match(searchRgx)) &&
-      (mode.name !== "javascript" || helper.allowsJs)
+      (mode !== BindingMode.JavaScript || helper.allowsJs)
     )
   })
 
-  const getHelperExample = (helper, js) => {
+  const getHelperExample = (helper: Helper, js: boolean) => {
     let example = helper.example || ""
     if (js) {
       example = convertToJS(example).split("\n")[0].split("= ")[1]
@@ -63,15 +71,18 @@
     return example || ""
   }
 
-  const getCategoryNames = categories => {
-    let names = [...categories.map(cat => cat[0])]
+  const getCategoryNames = (categories: [string, EnrichedBinding[]][]) => {
+    const names = [...categories.map(cat => cat[0])]
     if (allowHelpers) {
       names.push("Helpers")
     }
     return names
   }
 
-  const showBindingPopover = (binding, target) => {
+  const showBindingPopover = (
+    binding: EnrichedBinding,
+    target: HTMLElement
+  ) => {
     if (!context || !binding.value || binding.value === "") {
       return
     }
@@ -84,7 +95,7 @@
     popover.show()
   }
 
-  const showHelperPopover = (helper, target) => {
+  const showHelperPopover = (helper: any, target: HTMLElement) => {
     stopHidingPopover()
     if (!helper.displayText && helper.description) {
       return
@@ -93,7 +104,7 @@
     hoverTarget = {
       helper: true,
       description: helper.description,
-      code: getHelperExample(helper, mode.name === "javascript"),
+      code: getHelperExample(helper, mode === BindingMode.JavaScript),
     }
     popover.show()
   }
@@ -119,37 +130,39 @@
     search = ""
   }
 
-  const stopSearching = e => {
+  const stopSearching = (e: Event) => {
     e.stopPropagation()
     searching = false
     search = ""
   }
 </script>
 
-<Popover
-  align="left-outside"
-  bind:this={popover}
-  anchor={popoverAnchor}
-  minWidth={0}
-  maxWidth={480}
-  maxHeight={480}
-  dismissible={false}
-  on:mouseenter={stopHidingPopover}
-  on:mouseleave={hidePopover}
->
-  <div class="binding-popover" class:helper={hoverTarget.helper}>
-    {#if hoverTarget.description}
-      <div>
+{#if popoverAnchor && hoverTarget}
+  <Popover
+    align="left-outside"
+    bind:this={popover}
+    anchor={popoverAnchor}
+    minWidth={0}
+    maxWidth={480}
+    maxHeight={480}
+    dismissible={false}
+    on:mouseenter={stopHidingPopover}
+    on:mouseleave={hidePopover}
+  >
+    <div class="binding-popover" class:helper={hoverTarget.helper}>
+      {#if hoverTarget.description}
+        <div>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html hoverTarget.description}
+        </div>
+      {/if}
+      {#if hoverTarget.code}
         <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-        {@html hoverTarget.description}
-      </div>
-    {/if}
-    {#if hoverTarget.code}
-      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-      <pre>{@html hoverTarget.code}</pre>
-    {/if}
-  </div>
-</Popover>
+        <pre>{@html hoverTarget.code}</pre>
+      {/if}
+    </div>
+  </Popover>
+{/if}
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -173,7 +186,7 @@
           <div class="search-input">
             <Input
               placeholder="Search for bindings"
-              autocomplete="off"
+              autocomplete={false}
               bind:value={search}
               autofocus
             />
@@ -230,7 +243,8 @@
               {#each category.bindings as binding}
                 <li
                   class="binding"
-                  on:mouseenter={e => showBindingPopover(binding, e.target)}
+                  on:mouseenter={e =>
+                    showBindingPopover(binding, e.currentTarget)}
                   on:mouseleave={hidePopover}
                   on:click={() => addBinding(binding)}
                 >
@@ -266,7 +280,8 @@
                   class="binding"
                   on:mouseenter={e => showHelperPopover(helper, e.target)}
                   on:mouseleave={hidePopover}
-                  on:click={() => addHelper(helper, mode.name === "javascript")}
+                  on:click={() =>
+                    addHelper(helper, mode === BindingMode.JavaScript)}
                 >
                   <span class="binding__label">{helper.displayText}</span>
                   <span class="binding__typeWrap">
diff --git a/packages/types/src/ui/bindings/binding.ts b/packages/types/src/ui/bindings/binding.ts
index fdeb4a6c13..9e15d9dd13 100644
--- a/packages/types/src/ui/bindings/binding.ts
+++ b/packages/types/src/ui/bindings/binding.ts
@@ -1,7 +1,19 @@
 export interface EnrichedBinding {
+  value: string
+  valueHTML: string
   runtimeBinding: string
   readableBinding: string
   type?: null | string
+  icon?: string
+  category: string
+  display?: { name: string; type: string }
+  fieldSchema?: {
+    name: string
+    tableId: string
+    type: string
+    subtype?: string
+    prefixKeys?: string
+  }
 }
 
 export enum BindingMode {
diff --git a/packages/types/src/ui/bindings/helper.ts b/packages/types/src/ui/bindings/helper.ts
index e772180264..e25918438f 100644
--- a/packages/types/src/ui/bindings/helper.ts
+++ b/packages/types/src/ui/bindings/helper.ts
@@ -1,4 +1,5 @@
 export interface Helper {
+  displayText: string
   example: string
   description: string
   args: any[]

From 93a65b6289f74f9b1248dc9ab09cb454ed77a4d3 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 11:17:09 +0100
Subject: [PATCH 2/6] Add eslint rule for consistent type imports

---
 eslint.config.mjs | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index c497974612..2f4072a188 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -94,6 +94,15 @@ export default [
         allowImportExportEverywhere: true,
       },
     },
+
+    plugins: {
+      ...config.plugins,
+      "@typescript-eslint": tseslint.plugin,
+    },
+    rules: {
+      ...config.rules,
+      "@typescript-eslint/consistent-type-imports": "error",
+    },
   })),
   ...tseslint.configs.strict.map(config => ({
     ...config,

From a84044e6a1daf862a03f56cefa7e85acd3eb4f28 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 11:18:40 +0100
Subject: [PATCH 3/6] Lint fix

---
 .../components/common/bindings/BindingSidePanel.svelte   | 3 ++-
 packages/client/src/components/app/DataProvider.svelte   | 9 +++++----
 .../src/components/app/blocks/form/FormBlock.svelte      | 2 +-
 .../components/error-states/ComponentErrorState.svelte   | 2 +-
 .../error-states/ComponentErrorStateCTA.svelte           | 2 +-
 packages/client/src/components/preview/DNDHandler.svelte | 2 +-
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 9cd56c7797..120d14252d 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -3,7 +3,8 @@
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "@/constants/completions"
-  import { BindingMode, EnrichedBinding, Helper } from "@budibase/types"
+  import type { EnrichedBinding, Helper } from "@budibase/types";
+import { BindingMode } from "@budibase/types"
 
   export let addHelper: (helper: Helper, js?: boolean) => void
   export let addBinding: (binding: EnrichedBinding) => void
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index a80b9a5f74..9c79b36c4b 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -2,9 +2,7 @@
   import { getContext } from "svelte"
   import { Pagination, ProgressCircle } from "@budibase/bbui"
   import { fetchData, QueryUtils } from "@budibase/frontend-core"
-  import {
-    LogicalOperator,
-    EmptyFilterOption,
+  import type {
     TableSchema,
     SortOrder,
     SearchFilters,
@@ -12,7 +10,10 @@
     DataFetchDatasource,
     UserDatasource,
     GroupUserDatasource,
-    DataFetchOptions,
+    DataFetchOptions} from "@budibase/types";
+import {
+    LogicalOperator,
+    EmptyFilterOption
   } from "@budibase/types"
 
   type ProviderDatasource = Exclude<
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index 3f44aee1d7..17804b033a 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -4,7 +4,7 @@
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./FormBlockWrapper.svelte"
   import { get } from "svelte/store"
-  import { TableSchema, UIDatasource } from "@budibase/types"
+  import type { TableSchema, UIDatasource } from "@budibase/types"
 
   type Field = { name: string; active: boolean }
 
diff --git a/packages/client/src/components/error-states/ComponentErrorState.svelte b/packages/client/src/components/error-states/ComponentErrorState.svelte
index b2e7c92eae..1bcd5f21fa 100644
--- a/packages/client/src/components/error-states/ComponentErrorState.svelte
+++ b/packages/client/src/components/error-states/ComponentErrorState.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte"
   import { Icon } from "@budibase/bbui"
-  import { UIComponentError } from "@budibase/types"
+  import type { UIComponentError } from "@budibase/types"
   import ComponentErrorStateCta from "./ComponentErrorStateCTA.svelte"
 
   export let componentErrors: UIComponentError[] | undefined
diff --git a/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte b/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte
index ef22f307f7..43ab49a6b6 100644
--- a/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte
+++ b/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte"
-  import { UIComponentError } from "@budibase/types"
+  import type { UIComponentError } from "@budibase/types"
 
   export let error: UIComponentError | undefined
 
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 15177a90c4..abb5925eed 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -6,7 +6,7 @@
   import { findComponentById } from "@/utils/components.js"
   import { isGridEvent } from "@/utils/grid"
   import { DNDPlaceholderID } from "@/constants"
-  import { Component } from "@budibase/types"
+  import type { Component } from "@budibase/types"
 
   type ChildCoords = {
     placeholder: boolean

From 576e14a23a761c2ebd631ff5707cb386463e5465 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 11:38:21 +0100
Subject: [PATCH 4/6] Type hbsCompletions

---
 .../src/constants/{completions.js => completions.ts}     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)
 rename packages/builder/src/constants/{completions.js => completions.ts} (62%)

diff --git a/packages/builder/src/constants/completions.js b/packages/builder/src/constants/completions.ts
similarity index 62%
rename from packages/builder/src/constants/completions.js
rename to packages/builder/src/constants/completions.ts
index e539a8084a..79cfbf61bf 100644
--- a/packages/builder/src/constants/completions.js
+++ b/packages/builder/src/constants/completions.ts
@@ -1,10 +1,10 @@
 import { getManifest, helpersToRemoveForJs } from "@budibase/string-templates"
+import { Helper } from "@budibase/types"
 
-export function handlebarsCompletions() {
+export function handlebarsCompletions(): Helper[] {
   const manifest = getManifest()
-
-  return Object.keys(manifest).flatMap(key =>
-    Object.entries(manifest[key]).map(([helperName, helperConfig]) => ({
+  return Object.values(manifest).flatMap(helpersObj =>
+    Object.entries(helpersObj).map<Helper>(([helperName, helperConfig]) => ({
       text: helperName,
       path: helperName,
       example: helperConfig.example,
@@ -14,6 +14,7 @@ export function handlebarsCompletions() {
       allowsJs:
         !helperConfig.requiresBlock &&
         !helpersToRemoveForJs.includes(helperName),
+      args: helperConfig.args,
     }))
   )
 }

From 6bb01291441baae3a208b243f8928658ee752978 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 11:40:40 +0100
Subject: [PATCH 5/6] Improve types

---
 .../src/components/common/bindings/BindingSidePanel.svelte | 7 ++++---
 packages/types/src/ui/bindings/helper.ts                   | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 120d14252d..8627bdbfc9 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -3,8 +3,8 @@
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "@/constants/completions"
-  import type { EnrichedBinding, Helper } from "@budibase/types";
-import { BindingMode } from "@budibase/types"
+  import type { EnrichedBinding, Helper } from "@budibase/types"
+  import { BindingMode } from "@budibase/types"
 
   export let addHelper: (helper: Helper, js?: boolean) => void
   export let addBinding: (binding: EnrichedBinding) => void
@@ -279,7 +279,8 @@ import { BindingMode } from "@budibase/types"
               {#each filteredHelpers as helper}
                 <li
                   class="binding"
-                  on:mouseenter={e => showHelperPopover(helper, e.target)}
+                  on:mouseenter={e =>
+                    showHelperPopover(helper, e.currentTarget)}
                   on:mouseleave={hidePopover}
                   on:click={() =>
                     addHelper(helper, mode === BindingMode.JavaScript)}
diff --git a/packages/types/src/ui/bindings/helper.ts b/packages/types/src/ui/bindings/helper.ts
index e25918438f..110a3e13fc 100644
--- a/packages/types/src/ui/bindings/helper.ts
+++ b/packages/types/src/ui/bindings/helper.ts
@@ -1,7 +1,9 @@
 export interface Helper {
+  label: string
   displayText: string
   example: string
   description: string
   args: any[]
   requiresBlock?: boolean
+  allowsJs: boolean
 }

From d8fe96eb8521483ca81103646f0d5ecba45d19a9 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 11:48:10 +0100
Subject: [PATCH 6/6] Lint

---
 .../src/components/common/bindings/BindingSidePanel.svelte  | 4 ++--
 packages/client/src/components/app/DataProvider.svelte      | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 8627bdbfc9..1b375db867 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -6,8 +6,8 @@
   import type { EnrichedBinding, Helper } from "@budibase/types"
   import { BindingMode } from "@budibase/types"
 
-  export let addHelper: (helper: Helper, js?: boolean) => void
-  export let addBinding: (binding: EnrichedBinding) => void
+  export let addHelper: (_helper: Helper, _js?: boolean) => void
+  export let addBinding: (_binding: EnrichedBinding) => void
   export let bindings: EnrichedBinding[]
   export let mode: BindingMode
   export let allowHelpers: boolean
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 9c79b36c4b..442125f32b 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -10,11 +10,9 @@
     DataFetchDatasource,
     UserDatasource,
     GroupUserDatasource,
-    DataFetchOptions} from "@budibase/types";
-import {
-    LogicalOperator,
-    EmptyFilterOption
+    DataFetchOptions,
   } from "@budibase/types"
+  import { LogicalOperator, EmptyFilterOption } from "@budibase/types"
 
   type ProviderDatasource = Exclude<
     DataFetchDatasource,