More conversions

packages/builder/src/helpers/components.ts

@@ -15,7 +15,10 @@ const { ContextScopes } = Constants
 /**
  * Recursively searches for a specific component ID
  */
-export const findComponent = (rootComponent: Component, id: string) => {
+export const findComponent = (
+  rootComponent: Component | undefined,
+  id: string
+) => {
   return searchComponentTree(rootComponent, comp => comp._id === id)
 }
 
@@ -138,7 +141,7 @@ export const findClosestMatchingComponent = (
  * components until a match is found
  */
 const searchComponentTree = (
-  rootComponent: Component,
+  rootComponent: Component | undefined,
   matchComponent: (component: Component) => boolean
 ): Component | null => {
   if (!rootComponent || !matchComponent) {

packages/builder/src/templates/BaseStructure.js

@@ -1,35 +0,0 @@
-import { cloneDeep } from "lodash/fp"
-
-export class BaseStructure {
-  constructor(isScreen) {
-    this._isScreen = isScreen
-    this._children = []
-    this._json = {}
-  }
-
-  addChild(child) {
-    this._children.push(child)
-    return this
-  }
-
-  customProps(props) {
-    for (let key of Object.keys(props)) {
-      this._json[key] = props[key]
-    }
-    return this
-  }
-
-  json() {
-    const structure = cloneDeep(this._json)
-    if (this._children.length !== 0) {
-      for (let child of this._children) {
-        if (this._isScreen) {
-          structure.props._children.push(child.json?.() || child)
-        } else {
-          structure._children.push(child.json?.() || child)
-        }
-      }
-    }
-    return structure
-  }
-}

packages/builder/src/templates/BaseStructure.ts

@@ -0,0 +1,40 @@
+import { Document } from "@budibase/types"
+import { cloneDeep } from "lodash/fp"
+
+export class BaseStructure<T extends Document> {
+  private _isScreen: boolean
+  private _children: BaseStructure<any>[]
+  _json: T
+
+  constructor(isScreen: boolean, initialDoc: T) {
+    this._isScreen = isScreen
+    this._children = []
+    this._json = initialDoc
+  }
+
+  addChild(child: BaseStructure<any>) {
+    this._children.push(child)
+    return this
+  }
+
+  customProps(props: Record<string, any>) {
+    for (let key of Object.keys(props)) {
+      this._json[key as keyof T] = props[key]
+    }
+    return this
+  }
+
+  json() {
+    const structure = cloneDeep(this._json)
+    if (this._children.length !== 0) {
+      for (let child of this._children) {
+        if (this._isScreen) {
+          ;(structure as any).props._children.push(child.json?.() || child)
+        } else {
+          ;(structure as any)._children.push(child.json?.() || child)
+        }
+      }
+    }
+    return structure
+  }
+}

packages/builder/src/templates/Component.ts

@@ -1,11 +1,10 @@
 import { Helpers } from "@budibase/bbui"
+import { Component as ComponentDoc } from "@budibase/types"
 import { BaseStructure } from "./BaseStructure"
 
-export class Component extends BaseStructure {
-  constructor(name, _id = Helpers.uuid()) {
-    super(false)
-    this._children = []
-    this._json = {
+export class Component extends BaseStructure<ComponentDoc> {
+  constructor(name: string, _id: string = Helpers.uuid()) {
+    super(false, {
       _id,
       _component: name,
       _styles: {
@@ -16,37 +15,37 @@ export class Component extends BaseStructure {
       },
       _instanceName: "",
       _children: [],
-    }
+    })
   }
 
-  normalStyle(styling) {
+  normalStyle(styling: any) {
     this._json._styles.normal = styling
     return this
   }
 
-  hoverStyle(styling) {
+  hoverStyle(styling: any) {
     this._json._styles.hover = styling
     return this
   }
 
-  customStyle(styling) {
+  customStyle(styling: any) {
     this._json._styles.custom = styling
     return this
   }
 
-  instanceName(name) {
+  instanceName(name: string) {
     this._json._instanceName = name
     return this
   }
 
   // Shorthand for custom props "type"
-  type(type) {
+  type(type: string) {
     this._json.type = type
     return this
   }
 
   // Shorthand for custom props "text"
-  text(text) {
+  text(text: string) {
     this._json.text = text
     return this
   }
@@ -55,25 +54,25 @@ export class Component extends BaseStructure {
     return this._json._id
   }
 
-  gridDesktopColSpan(start, end) {
+  gridDesktopColSpan(start: number, end: number) {
     this._json._styles.normal["--grid-desktop-col-start"] = start
     this._json._styles.normal["--grid-desktop-col-end"] = end
     return this
   }
 
-  gridDesktopRowSpan(start, end) {
+  gridDesktopRowSpan(start: number, end: number) {
     this._json._styles.normal["--grid-desktop-row-start"] = start
     this._json._styles.normal["--grid-desktop-row-end"] = end
     return this
   }
 
-  gridMobileColSpan(start, end) {
+  gridMobileColSpan(start: number, end: number) {
     this._json._styles.normal["--grid-mobile-col-start"] = start
     this._json._styles.normal["--grid-mobile-col-end"] = end
     return this
   }
 
-  gridMobileRowSpan(start, end) {
+  gridMobileRowSpan(start: number, end: number) {
     this._json._styles.normal["--grid-mobile-row-start"] = start
     this._json._styles.normal["--grid-mobile-row-end"] = end
     return this

packages/builder/src/templates/screenTemplating/Screen.ts

@@ -1,11 +1,14 @@
 import { BaseStructure } from "../BaseStructure"
 import { Helpers } from "@budibase/bbui"
-import { ScreenVariant } from "@budibase/types"
+import {
+  ScreenVariant,
+  Screen as ScreenDoc,
+  ScreenProps,
+} from "@budibase/types"
 
-export class Screen extends BaseStructure {
+export class Screen extends BaseStructure<ScreenDoc> {
   constructor() {
-    super(true)
-    this._json = {
+    super(true, {
       showNavigation: true,
       width: "Large",
       props: {
@@ -32,50 +35,50 @@ export class Screen extends BaseStructure {
         homeScreen: false,
       },
       name: "screen-id",
-    }
+    })
   }
 
-  role(role) {
+  role(role: string) {
     this._json.routing.roleId = role
     return this
   }
 
-  normalStyle(styling) {
+  normalStyle(styling: any) {
     this._json.props._styles.normal = styling
     return this
   }
 
-  component(name) {
+  component(name: string) {
     this._json.props._component = name
     return this
   }
 
-  table(tableName) {
+  table(tableName: string) {
     this._json.props.table = tableName
     return this
   }
 
-  route(route) {
+  route(route: string) {
     this._json.routing.route = route
     return this
   }
 
-  name(name) {
+  name(name: string) {
     this._json.name = name
     return this
   }
 
-  autoTableId(autoTableId) {
-    this._json.autoTableId = autoTableId
+  autoTableId(autoTableId: string) {
+    ;(this._json as any).autoTableId = autoTableId
     return this
   }
 
-  instanceName(name) {
+  instanceName(name: string) {
     this._json.props._instanceName = name
     return this
   }
 
-  customProps(props) {
+  customProps(props: ScreenProps) {
     for (let key of Object.keys(props)) {
       this._json.props[key] = props[key]
     }