Merge pull request #15281 from Budibase/builder-store-conversions-pc

Flags / Layout / Preview stores to TS

packages/builder/src/stores/builder/flags.js

@@ -1,27 +0,0 @@
-import { writable } from "svelte/store"
-import { API } from "@/api"
-
-export function createFlagsStore() {
-  const { subscribe, set } = writable({})
-
-  const actions = {
-    fetch: async () => {
-      const flags = await API.getFlags()
-      set(flags)
-    },
-    updateFlag: async (flag, value) => {
-      await API.updateFlag(flag, value)
-      await actions.fetch()
-    },
-    toggleUiFeature: async feature => {
-      await API.toggleUiFeature(feature)
-    },
-  }
-
-  return {
-    subscribe,
-    ...actions,
-  }
-}
-
-export const flags = createFlagsStore()

packages/builder/src/stores/builder/flags.ts

@@ -0,0 +1,40 @@
+import { API } from "@/api"
+import { GetUserFlagsResponse } from "@budibase/types"
+import { BudiStore } from "../BudiStore"
+
+interface FlagsState {
+  flags: GetUserFlagsResponse
+}
+
+const INITIAL_FLAGS_STATE: FlagsState = {
+  flags: {},
+}
+
+export class FlagsStore extends BudiStore<FlagsState> {
+  constructor() {
+    super(INITIAL_FLAGS_STATE)
+
+    this.fetch = this.fetch.bind(this)
+    this.updateFlag = this.updateFlag.bind(this)
+    this.toggleUiFeature = this.toggleUiFeature.bind(this)
+  }
+
+  async fetch() {
+    const flags = await API.getFlags()
+    this.update(state => ({
+      ...state,
+      flags,
+    }))
+  }
+
+  async updateFlag(flag: string, value: any) {
+    await API.updateFlag(flag, value)
+    await this.fetch()
+  }
+
+  async toggleUiFeature(feature: string) {
+    await API.toggleUiFeature(feature)
+  }
+}
+
+export const flags = new FlagsStore()

packages/builder/src/stores/builder/layouts.ts

@@ -2,13 +2,19 @@ import { derived, get } from "svelte/store"
 import { componentStore } from "@/stores/builder"
 import { API } from "@/api"
 import { BudiStore } from "../BudiStore"
+import { Layout } from "@budibase/types"
 
-export const INITIAL_LAYOUT_STATE = {
+interface LayoutState {
+  layouts: Layout[]
+  selectedLayoutId: string | null
+}
+
+export const INITIAL_LAYOUT_STATE: LayoutState = {
   layouts: [],
   selectedLayoutId: null,
 }
 
-export class LayoutStore extends BudiStore {
+export class LayoutStore extends BudiStore<LayoutState> {
   constructor() {
     super(INITIAL_LAYOUT_STATE)
 
@@ -22,14 +28,14 @@ export class LayoutStore extends BudiStore {
     this.store.set({ ...INITIAL_LAYOUT_STATE })
   }
 
-  syncAppLayouts(pkg) {
+  syncAppLayouts(pkg: { layouts: Layout[] }) {
     this.update(state => ({
       ...state,
       layouts: [...pkg.layouts],
     }))
   }
 
-  select(layoutId) {
+  select(layoutId: string) {
     // Check this layout exists
     const state = get(this.store)
     const componentState = get(componentStore)
@@ -48,15 +54,15 @@ export class LayoutStore extends BudiStore {
 
     // Select new layout
     this.update(state => {
-      state.selectedLayoutId = layout._id
+      state.selectedLayoutId = layout._id!
       return state
     })
 
     componentStore.select(layout.props?._id)
   }
 
-  async deleteLayout(layout) {
-    if (!layout?._id) {
+  async deleteLayout(layout: Layout) {
+    if (!layout?._id || !layout?._rev) {
       return
     }
     await API.deleteLayout(layout._id, layout._rev)

packages/builder/src/stores/builder/preview.js

@@ -1,80 +0,0 @@
-import { writable, get } from "svelte/store"
-
-const INITIAL_PREVIEW_STATE = {
-  previewDevice: "desktop",
-  previewEventHandler: null,
-  showPreview: false,
-  selectedComponentContext: null,
-}
-
-export const createPreviewStore = () => {
-  const store = writable({
-    ...INITIAL_PREVIEW_STATE,
-  })
-
-  const setDevice = device => {
-    store.update(state => {
-      state.previewDevice = device
-      return state
-    })
-  }
-
-  // Potential evt names "eject-block", "dragging-new-component"
-  const sendEvent = (name, payload) => {
-    const { previewEventHandler } = get(store)
-    previewEventHandler?.(name, payload)
-  }
-
-  const registerEventHandler = handler => {
-    store.update(state => {
-      state.previewEventHandler = handler
-      return state
-    })
-  }
-
-  const startDrag = component => {
-    sendEvent("dragging-new-component", {
-      dragging: true,
-      component,
-    })
-  }
-
-  const stopDrag = () => {
-    sendEvent("dragging-new-component", {
-      dragging: false,
-    })
-  }
-
-  //load preview?
-  const showPreview = isVisible => {
-    store.update(state => {
-      state.showPreview = isVisible
-      return state
-    })
-  }
-
-  const setSelectedComponentContext = context => {
-    store.update(state => {
-      state.selectedComponentContext = context
-      return state
-    })
-  }
-
-  const requestComponentContext = () => {
-    sendEvent("request-context")
-  }
-
-  return {
-    subscribe: store.subscribe,
-    setDevice,
-    sendEvent, //may not be required
-    registerEventHandler,
-    startDrag,
-    stopDrag,
-    showPreview,
-    setSelectedComponentContext,
-    requestComponentContext,
-  }
-}
-
-export const previewStore = createPreviewStore()

packages/builder/src/stores/builder/preview.ts

@@ -0,0 +1,90 @@
+import { get } from "svelte/store"
+import { BudiStore } from "../BudiStore"
+
+type PreviewDevice = "desktop" | "tablet" | "mobile"
+type PreviewEventHandler = (name: string, payload?: any) => void
+type ComponentContext = Record<string, any>
+
+interface PreviewState {
+  previewDevice: PreviewDevice
+  previewEventHandler: PreviewEventHandler | null
+  showPreview: boolean
+  selectedComponentContext: ComponentContext | null
+}
+
+const INITIAL_PREVIEW_STATE: PreviewState = {
+  previewDevice: "desktop",
+  previewEventHandler: null,
+  showPreview: false,
+  selectedComponentContext: null,
+}
+
+export class PreviewStore extends BudiStore<PreviewState> {
+  constructor() {
+    super(INITIAL_PREVIEW_STATE)
+
+    this.setDevice = this.setDevice.bind(this)
+    this.sendEvent = this.sendEvent.bind(this)
+    this.registerEventHandler = this.registerEventHandler.bind(this)
+    this.startDrag = this.startDrag.bind(this)
+    this.stopDrag = this.stopDrag.bind(this)
+    this.showPreview = this.showPreview.bind(this)
+    this.setSelectedComponentContext =
+      this.setSelectedComponentContext.bind(this)
+    this.requestComponentContext = this.requestComponentContext.bind(this)
+  }
+
+  setDevice(device: PreviewDevice) {
+    this.update(state => ({
+      ...state,
+      previewDevice: device,
+    }))
+  }
+
+  // Potential evt names "eject-block", "dragging-new-component"
+  sendEvent(name: string, payload?: any) {
+    const { previewEventHandler } = get(this.store)
+    previewEventHandler?.(name, payload)
+  }
+
+  registerEventHandler(handler: PreviewEventHandler) {
+    this.update(state => ({
+      ...state,
+      previewEventHandler: handler,
+    }))
+  }
+
+  startDrag(component: any) {
+    this.sendEvent("dragging-new-component", {
+      dragging: true,
+      component,
+    })
+  }
+
+  stopDrag() {
+    this.sendEvent("dragging-new-component", {
+      dragging: false,
+    })
+  }
+
+  //load preview?
+  showPreview(isVisible: boolean) {
+    this.update(state => ({
+      ...state,
+      showPreview: isVisible,
+    }))
+  }
+
+  setSelectedComponentContext(context: ComponentContext) {
+    this.update(state => ({
+      ...state,
+      selectedComponentContext: context,
+    }))
+  }
+
+  requestComponentContext() {
+    this.sendEvent("request-context")
+  }
+}
+
+export const previewStore = new PreviewStore()

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

@@ -1,3 +1,4 @@
 export * from "./integration"
 export * from "./automations"
 export * from "./grid"
+export * from "./preview"

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

@@ -0,0 +1 @@
+export type PreviewDevice = "desktop" | "tablet" | "mobile"