From 075c53df7977d8a4a5714f81f7cd06aa61b35d95 Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Mon, 5 May 2025 15:45:08 +0200 Subject: [PATCH] More conversions --- packages/builder/src/helpers/components.ts | 7 +++- .../builder/src/templates/BaseStructure.js | 35 ---------------- .../builder/src/templates/BaseStructure.ts | 40 +++++++++++++++++++ .../templates/{Component.js => Component.ts} | 31 +++++++------- .../screenTemplating/{Screen.js => Screen.ts} | 33 ++++++++------- 5 files changed, 78 insertions(+), 68 deletions(-) delete mode 100644 packages/builder/src/templates/BaseStructure.js create mode 100644 packages/builder/src/templates/BaseStructure.ts rename packages/builder/src/templates/{Component.js => Component.ts} (69%) rename packages/builder/src/templates/screenTemplating/{Screen.js => Screen.ts} (78%) diff --git a/packages/builder/src/helpers/components.ts b/packages/builder/src/helpers/components.ts index 074f74f06d..3ee2565c04 100644 --- a/packages/builder/src/helpers/components.ts +++ b/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) { diff --git a/packages/builder/src/templates/BaseStructure.js b/packages/builder/src/templates/BaseStructure.js deleted file mode 100644 index 0398b1f268..0000000000 --- a/packages/builder/src/templates/BaseStructure.js +++ /dev/null @@ -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 - } -} diff --git a/packages/builder/src/templates/BaseStructure.ts b/packages/builder/src/templates/BaseStructure.ts new file mode 100644 index 0000000000..32f2457b99 --- /dev/null +++ b/packages/builder/src/templates/BaseStructure.ts @@ -0,0 +1,40 @@ +import { Document } from "@budibase/types" +import { cloneDeep } from "lodash/fp" + +export class BaseStructure { + private _isScreen: boolean + private _children: BaseStructure[] + _json: T + + constructor(isScreen: boolean, initialDoc: T) { + this._isScreen = isScreen + this._children = [] + this._json = initialDoc + } + + addChild(child: BaseStructure) { + this._children.push(child) + return this + } + + customProps(props: Record) { + 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 + } +} diff --git a/packages/builder/src/templates/Component.js b/packages/builder/src/templates/Component.ts similarity index 69% rename from packages/builder/src/templates/Component.js rename to packages/builder/src/templates/Component.ts index 8f70cbe92b..5ef484da8d 100644 --- a/packages/builder/src/templates/Component.js +++ b/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 { + 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 diff --git a/packages/builder/src/templates/screenTemplating/Screen.js b/packages/builder/src/templates/screenTemplating/Screen.ts similarity index 78% rename from packages/builder/src/templates/screenTemplating/Screen.js rename to packages/builder/src/templates/screenTemplating/Screen.ts index 4eb0e7a098..e416de2661 100644 --- a/packages/builder/src/templates/screenTemplating/Screen.js +++ b/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 { 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] }