Fix component navigation, fix settings editing, fix design editing

packages/builder/src/builderStore/store/frontend.js

@@ -11,12 +11,13 @@ import {
 } from "builderStore"
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
-import { FrontendTypes } from "../../constants"
+import { FrontendTypes } from "constants"
 import analytics from "analytics"
 import {
   findComponentType,
   findComponentParent,
   findComponentPath,
+  findComponent,
 } from "../storeUtils"
 import { uuid } from "../uuid"
 
@@ -44,21 +45,21 @@ export const getFrontendStore = () => {
   store.actions = {
     initialise: async pkg => {
       const { layouts, screens, application } = pkg
-      const components = await fetchComponentLibDefinitions(pkg.application._id)
+      const components = await fetchComponentLibDefinitions(application._id)
       store.update(state => ({
         ...state,
-        libraries: pkg.application.componentLibraries,
+        libraries: application.componentLibraries,
         components,
-        name: pkg.application.name,
-        description: pkg.application.description,
-        appId: pkg.application._id,
+        name: application.name,
+        description: application.description,
+        appId: application._id,
         layouts,
         screens,
         hasAppPackage: true,
-        appInstance: pkg.application.instance,
+        appInstance: application.instance,
       }))
       await hostingStore.actions.fetch()
-      await backendUiStore.actions.database.select(pkg.application.instance)
+      await backendUiStore.actions.database.select(application.instance)
     },
     routing: {
       fetch: async () => {
@@ -226,6 +227,25 @@ export const getFrontendStore = () => {
     },
     components: {
       select: component => {
+        if (!component) {
+          return
+        }
+
+        // If this is the root component, select the asset instead
+        const asset = get(currentAsset)
+        const parent = findComponentParent(asset.props, component._id)
+        if (parent == null) {
+          const state = get(store)
+          const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT
+          if (isLayout) {
+            store.actions.layouts.select(asset._id)
+          } else {
+            store.actions.screens.select(asset._id)
+          }
+          return
+        }
+
+        // Otherwise select the component
         store.update(state => {
           state.selectedComponentId = component._id
           state.currentView = "component"
@@ -236,10 +256,10 @@ export const getFrontendStore = () => {
         if (!componentName) {
           return null
         }
-        const name = componentName.startsWith("@budibase")
-          ? componentName
-          : `@budibase/standard-components/${componentName}`
-        return get(store).components[name]
+        if (!componentName.startsWith("@budibase")) {
+          componentName = `@budibase/standard-components/${componentName}`
+        }
+        return get(store).components[componentName]
       },
       createInstance: (componentName, presetProps) => {
         const definition = store.actions.components.getDefinition(componentName)
@@ -273,6 +293,19 @@ export const getFrontendStore = () => {
         }
       },
       create: (componentName, presetProps) => {
+        const selected = get(selectedComponent)
+        const asset = get(currentAsset)
+        const state = get(store)
+
+        // Only allow one screen slot, and in the layout
+        if (componentName.endsWith("screenslot")) {
+          const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT
+          const slot = findComponentType(asset.props, componentName)
+          if (!isLayout || slot != null) {
+            return
+          }
+        }
+
         // Create new component
         const componentInstance = store.actions.components.createInstance(
           componentName,
@@ -284,8 +317,7 @@ export const getFrontendStore = () => {
 
         // Find parent node to attach this component to
         let parentComponent
-        const selected = get(selectedComponent)
-        const asset = get(currentAsset)
+
         if (!asset) {
           return
         }

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -32,43 +32,35 @@
   }
 
   const moveUpComponent = () => {
-    store.update(state => {
-      const asset = get(currentAsset)
-      const parent = findComponentParent(asset.props, component)
-
-      if (parent) {
-        const currentIndex = parent._children.indexOf(component)
-        if (currentIndex === 0) return state
-
-        const newChildren = parent._children.filter(c => c !== component)
-        newChildren.splice(currentIndex - 1, 0, component)
-        parent._children = newChildren
-      }
-      state.selectedComponentId = component._id
-      store.actions.preview.saveSelected()
-
-      return state
-    })
+    const asset = get(currentAsset)
+    const parent = findComponentParent(asset.props, component._id)
+    if (!parent) {
+      return
+    }
+    const currentIndex = parent._children.indexOf(component)
+    if (currentIndex === 0) {
+      return
+    }
+    const newChildren = parent._children.filter(c => c !== component)
+    newChildren.splice(currentIndex - 1, 0, component)
+    parent._children = newChildren
+    store.actions.preview.saveSelected()
   }
 
   const moveDownComponent = () => {
-    store.update(state => {
-      const asset = get(currentAsset)
-      const parent = findComponentParent(asset.props, component)
-
-      if (parent) {
-        const currentIndex = parent._children.indexOf(component)
-        if (currentIndex === parent._children.length - 1) return state
-
-        const newChildren = parent._children.filter(c => c !== component)
-        newChildren.splice(currentIndex + 1, 0, component)
-        parent._children = newChildren
-      }
-      state.selectedComponentId = component._id
-      store.actions.preview.saveSelected()
-
-      return state
-    })
+    const asset = get(currentAsset)
+    const parent = findComponentParent(asset.props, component._id)
+    if (!parent) {
+      return
+    }
+    const currentIndex = parent._children.indexOf(component)
+    if (currentIndex === parent._children.length - 1) {
+      return
+    }
+    const newChildren = parent._children.filter(c => c !== component)
+    newChildren.splice(currentIndex + 1, 0, component)
+    parent._children = newChildren
+    store.actions.preview.saveSelected()
   }
 
   const duplicateComponent = () => {

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -2,47 +2,29 @@
   import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
   import { FrontendTypes } from "constants"
-  import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
   import SettingsView from "./SettingsView.svelte"
   import { setWith } from "lodash"
 
-  let flattenedPanel = flattenComponents(panelStructure.categories)
-  let categories = [
+  const categories = [
     { value: "settings", name: "Settings" },
     { value: "design", name: "Design" },
   ]
   let selectedCategory = categories[0]
 
-  $: componentInstance =
-    $store.currentView !== "component"
-      ? { ...$currentAsset, ...$selectedComponent }
-      : $selectedComponent
-  $: componentDefinition = store.actions.components.getDefinition(
-    componentInstance._component
+  $: definition = store.actions.components.getDefinition(
+    $selectedComponent._component
   )
-  $: componentPropDefinition =
-    flattenedPanel.find(
-      // use for getting controls for each component property
-      c => c._component === componentInstance._component
-    ) || {}
-
-  $: panelDefinition =
-    componentPropDefinition.properties &&
-    componentPropDefinition.properties[selectedCategory.value]
-
-  const onStyleChanged = store.actions.components.updateStyle
-  const onCustomStyleChanged = store.actions.components.updateCustomStyle
-  const onResetStyles = store.actions.components.resetStyles
-
   $: isComponentOrScreen =
     $store.currentView === "component" ||
     $store.currentFrontEndType === FrontendTypes.SCREEN
-  $: isNotScreenslot = !componentInstance._component.endsWith("screenslot")
+  $: isNotScreenslot = !$selectedComponent._component.endsWith("screenslot")
+  $: showDisplayName = isComponentOrScreen && isNotScreenslot
 
-  $: displayName =
-    isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
+  const onStyleChanged = store.actions.components.updateStyle
+  const onCustomStyleChanged = store.actions.components.updateCustomStyle
+  const onResetStyles = store.actions.components.resetStyles
 
   function walkProps(component, action) {
     action(component)
@@ -91,24 +73,23 @@
   {categories}
   {selectedCategory} />
 
-{#if displayName}
-  <div class="instance-name">{componentInstance._instanceName}</div>
+{#if showDisplayName}
+  <div class="instance-name">{$selectedComponent._instanceName}</div>
 {/if}
 
 <div class="component-props-container">
   {#if selectedCategory.value === 'design'}
     <DesignView
-      {panelDefinition}
-      {componentInstance}
+      componentInstance={$selectedComponent}
+      componentDefinition={definition}
       {onStyleChanged}
       {onCustomStyleChanged}
       {onResetStyles} />
   {:else if selectedCategory.value === 'settings'}
     <SettingsView
-      {componentInstance}
-      {componentDefinition}
-      {panelDefinition}
-      displayNameField={displayName}
+      componentInstance={$selectedComponent}
+      componentDefinition={definition}
+      {showDisplayName}
       onChange={store.actions.components.updateProp}
       onScreenPropChange={setAssetProps}
       assetInstance={$store.currentView !== 'component' && $currentAsset} />

packages/builder/src/components/userInterface/DesignView.svelte

@@ -1,16 +1,16 @@
 <script>
   import { TextArea, DetailSummary, Button } from "@budibase/bbui"
   import PropertyGroup from "./PropertyGroup.svelte"
-  import FlatButtonGroup from "./FlatButtonGroup.svelte"
+  import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup"
+  import { allStyles } from "./componentStyles"
 
-  export let panelDefinition = {}
+  export let componentDefinition = {}
   export let componentInstance = {}
   export let onStyleChanged = () => {}
   export let onCustomStyleChanged = () => {}
   export let onResetStyles = () => {}
 
   let selectedCategory = "normal"
-  let propGroup = null
   let currentGroup
 
   function onChange(category) {
@@ -23,7 +23,7 @@
     { value: "active", text: "Active" },
   ]
 
-  $: propertyGroupNames = panelDefinition ? Object.keys(panelDefinition) : []
+  $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
 </script>
 
 <div class="design-view-container">
@@ -32,12 +32,12 @@
   </div>
 
   <div class="positioned-wrapper">
-    <div bind:this={propGroup} class="design-view-property-groups">
-      {#if propertyGroupNames.length > 0}
-        {#each propertyGroupNames as groupName}
+    <div class="design-view-property-groups">
+      {#if groups.length > 0}
+        {#each groups as groupName}
           <PropertyGroup
             name={groupName}
-            properties={panelDefinition[groupName]}
+            properties={allStyles[groupName]}
             styleCategory={selectedCategory}
             {onStyleChanged}
             {componentInstance}

packages/builder/src/components/userInterface/IconSelect/index.js

@@ -1,3 +0,0 @@
-import "@fortawesome/fontawesome-free/js/all.js"
-
-export { default as IconSelect } from "./IconSelect.svelte"

packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import TableViewFieldSelect from "./TableViewFieldSelect.svelte"
+  import TableViewFieldSelect from "./PropertyPanelControls/TableViewFieldSelect.svelte"
 </script>
 
 <TableViewFieldSelect {...$$props} multiselect />

packages/builder/src/components/userInterface/PropertyGroup.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { excludeProps } from "./propertyCategories.js"
-  import PropertyControl from "./PropertyControl.svelte"
+  import PropertyControl from "./PropertyPanelControls/PropertyControl.svelte"
   import { DetailSummary } from "@budibase/bbui"
 
   export let name = ""
@@ -36,7 +35,7 @@
           key={prop.key}
           value={style[prop.key]}
           onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-          props={{ ...excludeProps(prop, ['control', 'label']) }} />
+          props={{ options: prop.options, placeholder: prop.placeholder }} />
       {/each}
     </div>
   {/if}

packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/index.js

@@ -0,0 +1,2 @@
+import EventsEditor from "./EventPropertyControl.svelte"
+export default EventsEditor

packages/builder/src/components/userInterface/PropertyPanelControls/FlatButtonGroup/index.js

@@ -0,0 +1,2 @@
+import FlatButtonGroup from "./FlatButtonGroup.svelte"
+export default FlatButtonGroup

packages/builder/src/components/userInterface/PropertyPanelControls/IconSelect/index.js

@@ -0,0 +1,4 @@
+import "@fortawesome/fontawesome-free/js/all.js"
+import IconSelect from "./IconSelect.svelte"
+
+export default IconSelect

packages/builder/src/components/userInterface/LayoutSelect.svelte → packages/builder/src/components/userInterface/PropertyPanelControls/LayoutSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { store, currentAsset } from "builderStore"
+  import { store } from "builderStore"
   import { Select } from "@budibase/bbui"
 
   export let value

packages/builder/src/components/userInterface/OptionSelect.svelte → packages/builder/src/components/userInterface/PropertyPanelControls/OptionSelect.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import Portal from "svelte-portal"
-  import { buildStyle } from "../../helpers.js"
+  import { buildStyle } from "../../../helpers.js"
 
   export let options = []
   export let value = ""

packages/builder/src/components/userInterface/PropertyControl.svelte → packages/builder/src/components/userInterface/PropertyPanelControls/PropertyControl.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import Input from "./PropertyPanelControls/Input.svelte"
+  import Input from "./Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import {

packages/builder/src/components/userInterface/TableViewSelect.svelte → packages/builder/src/components/userInterface/PropertyPanelControls/TableViewSelect.svelte

@@ -2,7 +2,7 @@
   import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
+  import fetchBindableProperties from "../../../builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
   let anchorRight, dropdownRight
@@ -56,7 +56,7 @@
   class="dropdownbutton"
   bind:this={anchorRight}
   on:click={dropdownRight.show}>
-  <span>{value.label ? value.label : 'Table / View'}</span>
+  <span>{value && value.label ? value.label : 'Table / View'}</span>
   <Icon name="arrowdown" />
 </div>
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -1,32 +1,57 @@
 <script>
   import { get } from "lodash"
   import { isEmpty } from "lodash/fp"
-  import PropertyControl from "./PropertyControl.svelte"
-  import LayoutSelect from "./LayoutSelect.svelte"
-  import RoleSelect from "./RoleSelect.svelte"
+  import PropertyControl from "./PropertyPanelControls/PropertyControl.svelte"
+
   import Input from "./PropertyPanelControls/Input.svelte"
-  import { excludeProps } from "./propertyCategories.js"
 
-  export let panelDefinition = []
+  import LayoutSelect from "./PropertyPanelControls/LayoutSelect.svelte"
+  import RoleSelect from "./PropertyPanelControls/RoleSelect.svelte"
+  import OptionSelect from "./PropertyPanelControls/OptionSelect.svelte"
+  import MultiTableViewFieldSelect from "./MultiTableViewFieldSelect.svelte"
+  import Checkbox from "../common/Checkbox.svelte"
+  import TableSelect from "components/userInterface/PropertyPanelControls/TableSelect.svelte"
+  import TableViewSelect from "components/userInterface/PropertyPanelControls/TableViewSelect.svelte"
+  import TableViewFieldSelect from "components/userInterface/PropertyPanelControls/TableViewFieldSelect.svelte"
+  import EventsEditor from "components/userInterface/PropertyPanelControls/EventsEditor"
+  import ScreenSelect from "components/userInterface/PropertyPanelControls/ScreenSelect.svelte"
+  import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
+  import IconSelect from "components/userInterface/PropertyPanelControls/IconSelect"
+  import Colorpicker from "@budibase/colorpicker"
+
   export let componentDefinition = {}
   export let componentInstance = {}
+  export let assetInstance
   export let onChange = () => {}
   export let onScreenPropChange = () => {}
-  export let displayNameField = false
-  export let assetInstance
+  export let showDisplayName = false
 
-  let assetProps = [
+  const assetProps = [
     "title",
     "description",
     "routing.route",
     "layoutId",
     "routing.roleId",
   ]
-  let duplicateName = false
+
+  $: settings = componentDefinition?.settings ?? []
+
+  const controlMap = {
+    text: Input,
+    select: OptionSelect,
+    datasource: TableViewSelect,
+    detailURL: DetailScreenSelect,
+    boolean: Checkbox,
+    number: Input,
+  }
+  const getControl = type => {
+    return controlMap[type]
+  }
 
   const propExistsOnComponentDef = prop =>
     assetProps.includes(prop) || prop in (componentDefinition?.props ?? {})
 
+  const layoutDefinition = []
   const screenDefinition = [
     { key: "description", label: "Description", control: Input },
     { key: "routing.route", label: "Route", control: Input },
@@ -34,13 +59,15 @@
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
 
-  const layoutDefinition = []
-
-  const canRenderControl = (key, dependsOn) => {
-    return (
-      propExistsOnComponentDef(key) &&
-      (!dependsOn || !isEmpty(componentInstance[dependsOn]))
-    )
+  const canRenderControl = setting => {
+    const control = getControl(setting?.type)
+    if (!control) {
+      return false
+    }
+    if (setting.dependsOn && isEmpty(componentInstance[setting.dependsOn])) {
+      return false
+    }
+    return true
   }
 
   $: isLayout = assetInstance && assetInstance.favicon
@@ -60,34 +87,30 @@
         label={def.label}
         key={def.key}
         value={get(assetInstance, def.key)}
-        onChange={onScreenPropChange}
-        props={{ ...excludeProps(def, ['control', 'label']) }} />
+        onChange={onScreenPropChange} />
     {/each}
   {/if}
 
-  {#if displayNameField}
+  {#if showDisplayName}
     <PropertyControl
       control={Input}
       label="Name"
       key="_instanceName"
       value={componentInstance._instanceName}
       onChange={onInstanceNameChange} />
-    {#if duplicateName}
-      <span class="duplicate-name">Name must be unique</span>
-    {/if}
   {/if}
 
-  {#if !isLayout && panelDefinition && panelDefinition.length > 0}
-    {#each panelDefinition as definition}
-      {#if canRenderControl(definition.key, definition.dependsOn)}
+  {#if settings && settings.length > 0}
+    {#each settings as setting}
+      {#if canRenderControl(setting)}
         <PropertyControl
-          control={definition.control}
-          label={definition.label}
-          key={definition.key}
-          value={componentInstance[definition.key] ?? componentInstance[definition.key]?.defaultValue}
+          control={getControl(setting.type)}
+          label={setting.label}
+          key={setting.key}
+          value={componentInstance[setting.key] ?? componentInstance[setting.key]?.defaultValue}
           {componentInstance}
           {onChange}
-          props={{ ...excludeProps(definition, ['control', 'label']) }} />
+          props={{ options: setting.options }} />
       {/if}
     {/each}
   {:else}
@@ -105,17 +128,9 @@
     height: 100%;
     gap: var(--spacing-s);
   }
-
   .empty {
     font-size: var(--font-size-xs);
     margin-top: var(--spacing-m);
     color: var(--grey-5);
   }
-
-  .duplicate-name {
-    color: var(--red);
-    font-size: var(--font-size-xs);
-    position: relative;
-    top: -10px;
-  }
 </style>

packages/builder/src/components/userInterface/assetParsing/getRootComponent.js

@@ -1,10 +0,0 @@
-import { isRootComponent } from "./searchComponents"
-import { find } from "lodash/fp"
-
-export const getRootComponent = (componentName, components) => {
-  const component = find(c => c.name === componentName)(components)
-
-  if (isRootComponent(component)) return component
-
-  return getRootComponent(component.props._component, components)
-}

packages/builder/src/components/userInterface/assetParsing/searchComponents.js

@@ -1,46 +0,0 @@
-import { isUndefined, filter, some, includes } from "lodash/fp"
-import { pipe } from "../../../helpers"
-
-const normalString = s => (s || "").trim().toLowerCase()
-
-export const isRootComponent = c =>
-  isComponent(c) && isUndefined(c.props._component)
-
-export const isComponent = c => {
-  const hasProp = n => !isUndefined(c[n])
-  return hasProp("name") && hasProp("props")
-}
-
-export const searchAllComponents = (components, phrase) => {
-  const hasPhrase = (...vals) =>
-    pipe(vals, [some(v => includes(normalString(phrase))(normalString(v)))])
-
-  const componentMatches = c => {
-    if (hasPhrase(c._instanceName, ...(c.tags || []))) return true
-
-    if (isRootComponent(c)) return false
-
-    const parent = getExactComponent(components, c.props._component)
-
-    return componentMatches(parent)
-  }
-
-  return filter(componentMatches)(components)
-}
-
-export const getExactComponent = (components, name, isScreen = false) => {
-  return components.find(comp =>
-    isScreen ? comp.props._instanceName === name : comp._instanceName === name
-  )
-}
-
-export const getAncestorProps = (components, name, found = []) => {
-  const thisComponent = getExactComponent(components, name)
-
-  if (isRootComponent(thisComponent)) return [thisComponent.props, ...found]
-
-  return getAncestorProps(components, thisComponent.props._component, [
-    { ...thisComponent.props },
-    ...found,
-  ])
-}

packages/builder/src/components/userInterface/assetParsing/splitRootComponentName.js

@@ -1,13 +0,0 @@
-import { split, last } from "lodash/fp"
-import { pipe } from "../../../helpers"
-
-export const splitName = fullname => {
-  const componentName = pipe(fullname, [split("/"), last])
-
-  const libName = fullname.substring(
-    0,
-    fullname.length - componentName.length - 1
-  )
-
-  return { libName, componentName }
-}

packages/builder/src/components/userInterface/assetParsing/types.js

@@ -1,25 +0,0 @@
-export const TYPE_MAP = {
-  string: {
-    default: "",
-  },
-  bool: {
-    default: false,
-  },
-  number: {
-    default: 0,
-  },
-  options: {
-    default: [],
-  },
-  event: {
-    default: [],
-  },
-  state: {
-    default: {
-      "##bbstate": "",
-    },
-  },
-  tables: {
-    default: {},
-  },
-}

packages/builder/src/components/userInterface/propertyCategories.js → packages/builder/src/components/userInterface/componentStyles.js

@@ -1,6 +1,6 @@
 import Input from "./PropertyPanelControls/Input.svelte"
-import OptionSelect from "./OptionSelect.svelte"
-import FlatButtonGroup from "./FlatButtonGroup.svelte"
+import OptionSelect from "./PropertyPanelControls/OptionSelect.svelte"
+import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup"
 import Colorpicker from "@budibase/colorpicker"
 
 export const layout = [
@@ -299,42 +299,36 @@ export const size = [
     key: "width",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Height",
     key: "height",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Min Width",
     key: "min-width",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Max Width",
     key: "max-width",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Min Height",
     key: "min-height",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Max Height",
     key: "max-height",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
 ]
 
@@ -357,28 +351,24 @@ export const position = [
     key: "top",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Right",
     key: "right",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Bottom",
     key: "bottom",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Left",
     key: "left",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Z-index",
@@ -458,7 +448,6 @@ export const typography = [
       { label: "60px", value: "60px" },
       { label: "72px", value: "72px" },
     ],
-    textAlign: "center",
   },
   {
     label: "Line H",
@@ -672,7 +661,6 @@ export const effects = [
     label: "Opacity",
     key: "opacity",
     control: OptionSelect,
-    textAlign: "center",
     options: [
       { label: "Choose option", value: "" },
       { label: "0", value: "0" },
@@ -758,7 +746,6 @@ export const transitions = [
     label: "Duration",
     key: "transition-duration",
     control: OptionSelect,
-    textAlign: "center",
     placeholder: "sec",
     options: [
       { label: "Choose option", value: "" },
@@ -785,7 +772,7 @@ export const transitions = [
   },
 ]
 
-export const all = {
+export const allStyles = {
   layout,
   margin,
   padding,
@@ -797,13 +784,3 @@ export const all = {
   effects,
   transitions,
 }
-
-export function excludeProps(props, propsToExclude) {
-  const modifiedProps = {}
-  for (const prop in props) {
-    if (!propsToExclude.includes(prop)) {
-      modifiedProps[prop] = props[prop]
-    }
-  }
-  return modifiedProps
-}

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -1,14 +1,14 @@
 import Input from "./PropertyPanelControls/Input.svelte"
-import OptionSelect from "./OptionSelect.svelte"
+import OptionSelect from "./PropertyPanelControls/OptionSelect.svelte"
 import MultiTableViewFieldSelect from "./MultiTableViewFieldSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
-import TableSelect from "components/userInterface/TableSelect.svelte"
-import TableViewSelect from "components/userInterface/TableViewSelect.svelte"
-import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte"
-import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
-import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
+import TableSelect from "components/userInterface/PropertyPanelControls/TableSelect.svelte"
+import TableViewSelect from "components/userInterface/PropertyPanelControls/TableViewSelect.svelte"
+import TableViewFieldSelect from "components/userInterface/PropertyPanelControls/TableViewFieldSelect.svelte"
+import Event from "components/userInterface/PropertyPanelControls/EventsEditor/EventPropertyControl.svelte"
+import ScreenSelect from "components/userInterface/PropertyPanelControls/ScreenSelect.svelte"
 import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
-import { IconSelect } from "components/userInterface/IconSelect"
+import { IconSelect } from "components/userInterface/PropertyPanelControls/IconSelect"
 import Colorpicker from "@budibase/colorpicker"
 
 import { all } from "./propertyCategories.js"

packages/standard-components/src/ScreenSlot.svelte

@@ -1,9 +1,13 @@
 <script>
   // This component is overridden when running in a real app.
-  // This simply serves as a placeholder component for the real screen router.
+  // This simply serves as a placeholder component for the real screen router
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
 </script>
 
-<div>
+<div use:styleable={$component.styles}>
   <h1>Screen Slot</h1>
   <span>
     The screens that you create will be displayed inside this box.
@@ -14,16 +18,15 @@
 
 <style>
   div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    text-align: center;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 20px !important;
+    text-align: center !important;
     border-style: dashed !important;
-    border-width: 1px;
-    color: #000000;
-    background-color: rgba(0, 0, 0, 0.05);
-    flex: 1 1 auto;
+    border-width: 1px !important;
+    color: #000000 !important;
+    background-color: rgba(0, 0, 0, 0.05) !important;
   }
 </style>