Typescript hover + navigation stores

packages/builder/src/stores/builder/hover.js → packages/builder/src/stores/builder/hover.ts

@@ -2,19 +2,24 @@ import { get } from "svelte/store"
 import { previewStore } from "stores/builder"
 import { BudiStore } from "../BudiStore"
 
+interface BuilderHoverStore {
+  hoverTimeout?: NodeJS.Timeout
+  componentId: string | null
+}
+
 export const INITIAL_HOVER_STATE = {
   componentId: null,
 }
 
-export class HoverStore extends BudiStore {
-  hoverTimeout
+export class HoverStore extends BudiStore<BuilderHoverStore> {
+  hoverTimeout?: NodeJS.Timeout
 
   constructor() {
     super({ ...INITIAL_HOVER_STATE })
     this.hover = this.hover.bind(this)
   }
 
-  hover(componentId, notifyClient = true) {
+  hover(componentId: string, notifyClient = true) {
     clearTimeout(this.hoverTimeout)
     if (componentId) {
       this.processHover(componentId, notifyClient)
@@ -25,7 +30,7 @@ export class HoverStore extends BudiStore {
     }
   }
 
-  processHover(componentId, notifyClient) {
+  processHover(componentId: string, notifyClient?: boolean) {
     if (componentId === get(this.store).componentId) {
       return
     }

packages/builder/src/stores/builder/navigation.js → packages/builder/src/stores/builder/navigation.ts

@@ -2,27 +2,22 @@ import { get } from "svelte/store"
 import { API } from "api"
 import { appStore } from "stores/builder"
 import { BudiStore } from "../BudiStore"
+import { AppNavigation, AppNavigationLink, UIObject } from "@budibase/types"
+
+interface BuilderNavigationStore extends AppNavigation {}
 
 export const INITIAL_NAVIGATION_STATE = {
   navigation: "Top",
   links: [],
-  title: null,
-  sticky: null,
-  hideLogo: null,
-  logoUrl: null,
-  hideTitle: null,
   textAlign: "Left",
-  navBackground: null,
-  navWidth: null,
-  navTextColor: null,
 }
 
-export class NavigationStore extends BudiStore {
+export class NavigationStore extends BudiStore<BuilderNavigationStore> {
   constructor() {
     super(INITIAL_NAVIGATION_STATE)
   }
 
-  syncAppNavigation(nav) {
+  syncAppNavigation(nav: AppNavigation) {
     this.update(state => ({
       ...state,
       ...nav,
@@ -33,15 +28,17 @@ export class NavigationStore extends BudiStore {
     this.store.set({ ...INITIAL_NAVIGATION_STATE })
   }
 
-  async save(navigation) {
+  async save(navigation: AppNavigation) {
     const appId = get(appStore).appId
     const app = await API.saveAppMetadata(appId, { navigation })
-    this.syncAppNavigation(app.navigation)
+    if (app.navigation) {
+      this.syncAppNavigation(app.navigation)
+    }
   }
 
-  async saveLink(url, title, roleId) {
+  async saveLink(url: string, title: string, roleId: string) {
     const navigation = get(this.store)
-    let links = [...(navigation?.links ?? [])]
+    let links: AppNavigationLink[] = [...(navigation?.links ?? [])]
 
     // Skip if we have an identical link
     if (links.find(link => link.url === url && link.text === title)) {
@@ -60,7 +57,7 @@ export class NavigationStore extends BudiStore {
     })
   }
 
-  async deleteLink(urls) {
+  async deleteLink(urls: string[] | string) {
     const navigation = get(this.store)
     let links = navigation?.links
     if (!links?.length) {
@@ -86,7 +83,7 @@ export class NavigationStore extends BudiStore {
     })
   }
 
-  syncMetadata(metadata) {
+  syncMetadata(metadata: UIObject) {
     const { navigation } = metadata
     this.syncAppNavigation(navigation)
   }

packages/types/src/documents/app/app.ts

@@ -37,22 +37,25 @@ export interface AppInstance {
 
 export interface AppNavigation {
   navigation: string
-  title: string
-  navWidth: string
+  title?: string
+  navWidth?: string
   sticky?: boolean
   hideLogo?: boolean
   logoUrl?: string
   hideTitle?: boolean
   navBackground?: string
   navTextColor?: string
   links?: AppNavigationLink[]
+  textAlign?: string
 }
 
 export interface AppNavigationLink {
   text: string
   url: string
   id?: string
   roleId?: string
+  type?: string
+  subLinks?: AppNavigationLink[]
 }
 
 export interface AppCustomTheme {

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

@@ -1 +1,2 @@
 export * from "./integration"
+export * from "./misc"

packages/types/src/ui/stores/misc.ts

@@ -0,0 +1,2 @@
+// type purely to capture structures that the type is unknown, but maybe known later
+export type UIObject = Record<string, any>