Update file structure to be sensible for design section

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -5,7 +5,7 @@
   import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import BindableInput from "components/userInterface/BindableInput.svelte"
+  import BindableInput from "./BindableInput.svelte"
 
   export let block
   export let webhookModal

packages/builder/src/components/automation/SetupPanel/BindableInput.svelte

@@ -1,5 +1,5 @@
 <script>
-  import GenericBindingPopover from "./GenericBindingPopover.svelte"
+  import GenericBindingPopover from "../../userInterface/PropertiesPanel/GenericBindingPopover.svelte"
   import { Input, Icon } from "@budibase/bbui"
 
   export let bindings = []

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -1,7 +1,7 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { Input, Select, Label } from "@budibase/bbui"
-  import BindableInput from "../../userInterface/BindableInput.svelte"
+  import { Select } from "@budibase/bbui"
+  import BindableInput from "./BindableInput.svelte"
 
   export let value
   export let bindings

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -7,5 +7,6 @@
     ]
   },
   "grid",
-  "screenslot"
+  "screenslot",
+  "button"
 ]

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -9,10 +9,10 @@
     selectedAccessRole,
   } from "builderStore"
   import { FrontendTypes } from "constants"
-  import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
-  import Layout from "components/userInterface/Layout.svelte"
-  import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import NewLayoutModal from "components/userInterface/NewLayoutModal.svelte"
+  import ComponentNavigationTree from "components/userInterface/NavigationPanel/ComponentNavigationTree/index.svelte"
+  import Layout from "components/userInterface/NavigationPanel/Layout.svelte"
+  import NewScreenModal from "components/userInterface/NavigationPanel/NewScreenModal.svelte"
+  import NewLayoutModal from "components/userInterface/NavigationPanel/NewLayoutModal.svelte"
   import { Modal, Switcher, Select } from "@budibase/bbui"
 
   const tabs = [

packages/builder/src/components/design/PropertiesPanel/DesignView.svelte

@@ -1,6 +1,6 @@
 <script>
   import { TextArea, DetailSummary, Button } from "@budibase/bbui"
-  import PropertyGroup from "./PropertyGroup.svelte"
+  import PropertyGroup from "./PropertyPanelControls/PropertyGroup.svelte"
   import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup"
   import { allStyles } from "./componentStyles"
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Checkbox from "components/common/Checkbox.svelte"
+
+  export let value
+</script>
+
+<Checkbox checked={value} on:change />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Colorpicker from "@budibase/colorpicker"
+
+  export let value
+</script>
+
+<Colorpicker value={value || '#000'} on:change />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte

@@ -41,53 +41,53 @@
     newOrExisting = "existing"
     parameters.newAutomationName = ""
   }
-
 </script>
 
 <div class="root">
-
   <div class="radio-container" on:click={setNew}>
-    <input 
-      type="radio" 
-      value="new" 
+    <input
+      type="radio"
+      value="new"
       bind:group={newOrExisting}
-      disabled={!hasAutomations}> 
-      
-    <Label disabled={!hasAutomations}>Create a new automation </Label>
+      disabled={!hasAutomations} />
 
+    <Label disabled={!hasAutomations}>Create a new automation</Label>
   </div>
 
   <div class="radio-container" on:click={setExisting}>
-
-    <input 
-      type="radio" 
-      value="existing" 
+    <input
+      type="radio"
+      value="existing"
       bind:group={newOrExisting}
-      disabled={!hasAutomations}> 
-      
-    <Label disabled={!hasAutomations}>Use an existing automation </Label>
+      disabled={!hasAutomations} />
 
+    <Label disabled={!hasAutomations}>Use an existing automation</Label>
   </div>
 
   <Label size="m" color="dark">Automation</Label>
 
-  {#if newOrExisting=== "existing"}
-    <Select secondary bind:value={parameters.automationId} placeholder="Choose automation">
+  {#if newOrExisting === 'existing'}
+    <Select
+      secondary
+      bind:value={parameters.automationId}
+      placeholder="Choose automation">
       <option value="" />
       {#each automations as automation}
         <option value={automation._id}>{automation.name}</option>
       {/each}
     </Select>
   {:else}
-    <Input secondary bind:value={parameters.newAutomationName} placeholder="Enter automation name" />
+    <Input
+      secondary
+      bind:value={parameters.newAutomationName}
+      placeholder="Enter automation name" />
   {/if}
 
   <SaveFields
     parameterFields={parameters.fields}
-    schemaFields={newOrExisting === "existing" && selectedAutomation && selectedAutomation.schema}
+    schemaFields={newOrExisting === 'existing' && selectedAutomation && selectedAutomation.schema}
     fieldLabel="Field"
     on:fieldschanged={onFieldsChanged} />
-
 </div>
 
 <style>
@@ -127,5 +127,4 @@
   .radio-container > input:focus {
     outline: none;
   }
-
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte

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

packages/builder/src/components/design/PropertiesPanel/PropertyControls/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/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -8,7 +8,7 @@
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
   import { DropdownMenu } from "@budibase/bbui"
-  import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
+  import BindingDropdown from "components/userInterface/PropertiesPanel/BindingDropdown.svelte"
 
   export let label = ""
   export let bindable = true

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte

@@ -1,5 +1,5 @@
 <script>
-  import PropertyControl from "./PropertyPanelControls/PropertyControl.svelte"
+  import PropertyControl from "./PropertyControl.svelte"
   import { DetailSummary } from "@budibase/bbui"
 
   export let name = ""
@@ -10,14 +10,6 @@
   export let open = false
 
   const hasPropChanged = (style, prop) => {
-    // TODO: replace color picker with one that works better.
-    // Currently it cannot support null values, so this is a hack which
-    // prevents the color fields from always being marked as changed
-    if (!["color", "background", "border-color"].includes(prop.key)) {
-      if (prop.initialValue !== undefined) {
-        return style[prop.key] !== prop.initialValue
-      }
-    }
     return style[prop.key] != null && style[prop.key] !== ""
   }
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
+  import { Icon, DropdownMenu, 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

packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte

@@ -8,16 +8,16 @@
   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 MultiTableViewFieldSelect from "./PropertyPanelControls/MultiTableViewFieldSelect.svelte"
+  import Checkbox from "./PropertyPanelControls/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 DetailScreenSelect from "components/userInterface/PropertyPanelControls/DetailScreenSelect.svelte"
   import IconSelect from "components/userInterface/PropertyPanelControls/IconSelect"
-  import Colorpicker from "@budibase/colorpicker"
+  import ColorPicker from "./ComponentPropertiesPanel.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -43,6 +43,7 @@
     detailURL: DetailScreenSelect,
     boolean: Checkbox,
     number: Input,
+    event: EventsEditor,
   }
   const getControl = type => {
     return controlMap[type]

packages/builder/src/components/design/PropertiesPanel/componentStyles.js

@@ -1,7 +1,7 @@
 import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./PropertyPanelControls/OptionSelect.svelte"
 import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup"
-import Colorpicker from "@budibase/colorpicker"
+import Colorpicker from "./PropertyPanelControls/ColorPicker.svelte"
 
 export const layout = [
   {
@@ -467,7 +467,6 @@ export const typography = [
     label: "Color",
     key: "color",
     control: Colorpicker,
-    initialValue: "#000",
   },
   {
     label: "align",
@@ -511,7 +510,6 @@ export const background = [
     label: "Color",
     key: "background",
     control: Colorpicker,
-    initialValue: "#000",
   },
   {
     label: "Gradient",
@@ -634,7 +632,6 @@ export const border = [
     label: "Color",
     key: "border-color",
     control: Colorpicker,
-    initialValue: "#000",
   },
   {
     label: "Style",

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

@@ -1,13 +1,13 @@
-import Input from "./PropertyPanelControls/Input.svelte"
-import OptionSelect from "./PropertyPanelControls/OptionSelect.svelte"
-import MultiTableViewFieldSelect from "./MultiTableViewFieldSelect.svelte"
+import Input from "./PropertiesPanel/PropertyPanelControls/Input.svelte"
+import OptionSelect from "./PropertiesPanel/PropertyPanelControls/OptionSelect.svelte"
+import MultiTableViewFieldSelect from "./PropertiesPanel/PropertyPanelControls/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 Event from "components/userInterface/PropertyPanelControls/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/PropertyPanelControls/ScreenSelect.svelte"
-import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
+import DetailScreenSelect from "components/userInterface/PropertyPanelControls/DetailScreenSelect.svelte"
 import { IconSelect } from "components/userInterface/PropertyPanelControls/IconSelect"
 import Colorpicker from "@budibase/colorpicker"
 
@@ -37,28 +37,7 @@ export default {
       },
       children: [],
     },
-    {
-      _component: "@budibase/standard-components/button",
-      name: "Button",
-      description: "A basic html button that is ready for styling",
-      icon: "ri-share-box-line",
-      children: [],
-      properties: {
-        design: {
-          ...all,
-        },
-        settings: [
-          { label: "Text", key: "text", control: Input },
-          {
-            label: "Disabled",
-            key: "disabled",
-            valueKey: "checked",
-            control: Checkbox,
-          },
-          { label: "On Click", key: "onClick", control: Event },
-        ],
-      },
-    },
+
     {
       name: "Form",
       icon: "ri-file-edit-line",

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

@@ -1,78 +0,0 @@
-<script>
-  export let meta = []
-  export let size = ""
-  export let values = []
-  export let propertyName
-  export let onStyleChanged = () => {}
-
-  let selectedLayoutValues = values.map(v => v)
-
-  $: onStyleChanged(selectedLayoutValues)
-
-  const PROPERTY_OPTIONS = {
-    Direction: {
-      vertical: ["column", "ri-arrow-up-down-line"],
-      horizontal: ["row", "ri-arrow-left-right-line"],
-    },
-    Align: {
-      left: ["flex-start", "ri-layout-bottom-line"],
-      center: ["center", "ri-layout-row-line"],
-      right: ["flex-end", "ri-layout-top-line"],
-      space: ["space-between", "ri-space"],
-    },
-    Justify: {
-      left: ["flex-start", "ri-layout-left-line"],
-      center: ["center", "ri-layout-column-line"],
-      right: ["flex-end", "ri-layout-right-line"],
-      space: ["space-between", "ri-space"],
-    },
-  }
-
-  $: propertyChoices = Object.entries(PROPERTY_OPTIONS[propertyName])
-</script>
-
-<div class="inputs {size}">
-  {#each meta as { placeholder }, i}
-    {#each propertyChoices as [displayName, [cssPropValue, icon]]}
-      <button
-        class:selected={cssPropValue === selectedLayoutValues[i]}
-        on:click={() => {
-          const newPropertyValue = cssPropValue === selectedLayoutValues[i] ? '' : cssPropValue
-          selectedLayoutValues[i] = newPropertyValue
-        }}>
-        <i class={icon} />
-      </button>
-    {/each}
-  {/each}
-</div>
-
-<style>
-  .selected {
-    color: var(--blue);
-    background: var(--grey-1);
-    opacity: 1;
-  }
-
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 3px;
-
-    min-width: 1.6rem;
-    min-height: 1.6rem;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: var(--ink);
-  }
-
-  .inputs {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>

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

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

packages/builder/src/pages/[application]/_reset.svelte

@@ -3,7 +3,7 @@
   import { Button } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
   import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
-  import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
+  import FeedbackNavLink from "components/Feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
   import { isActive, goto, layout } from "@sveltech/routify"
 

packages/builder/src/pages/[application]/deploy/index.svelte

@@ -7,7 +7,7 @@
   import Spinner from "components/common/Spinner.svelte"
   import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
   import analytics from "analytics"
-  import FeedbackIframe from "components/userInterface/Feedback/FeedbackIframe.svelte"
+  import FeedbackIframe from "components/Feedback/FeedbackIframe.svelte"
 
   let loading = false
   let deployments = []

packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte

@@ -7,9 +7,9 @@
   } from "builderStore"
   import { onMount } from "svelte"
   import CurrentItemPreview from "components/userInterface/AppPreview"
-  import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
-  import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
-  import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
+  import ComponentPropertiesPanel from "components/userInterface/PropertiesPanel/ComponentPropertiesPanel.svelte"
+  import ComponentSelectionList from "components/userInterface/AppPreview/ComponentSelectionList.svelte"
+  import FrontendNavigatePane from "components/userInterface/NavigationPanel/FrontendNavigatePane.svelte"
 
   $: instance = $store.appInstance
 

packages/standard-components/components.json

@@ -21,39 +21,6 @@
 			"logoUrl": "string"
 		}
 	},
-	"button": {
-		"name": "Button",
-		"description": "an html <button />",
-		"props": {
-			"text": "string",
-			"disabled": "bool",
-			"onClick": "event"
-		},
-		"tags": [
-			"layout"
-		],
-		"presets": {
-			"primary": {
-				"contentText": "Primary Button Preset",
-				"color": "papayawhip",
-				"padding": "20px",
-				"background": "blue"
-			},
-			"secondary": {
-				"contentText": "Secondary Button Preset",
-				"color": "rebeccapurple",
-				"padding": "10px",
-				"background": "#fff",
-				"border": "1px solid red"
-			},
-			"error": {
-				"contentText": "ERROR",
-				"color": "red",
-				"padding": "10px",
-				"border": "1px solid red"
-			}
-		}
-	},
 	"login": {
 		"name": "Login Control",
 		"description": "A control that accepts email, password an also handles password resets",

packages/standard-components/manifest.json

@@ -75,5 +75,29 @@
     "name": "Screenslot",
     "description": "Contains your app screens",
     "styleable": true
+  },
+  "button": {
+    "name": "Button",
+    "description": "A basic html button that is ready for styling",
+    "icon": "ri-share-box-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Text",
+        "key": "text"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "valueKey": "checked"
+      },
+      {
+        "type": "event",
+        "label": "On Click",
+        "key": "onClick"
+      }
+    ]
   }
 }

packages/standard-components/src/Button.svelte

@@ -6,7 +6,7 @@
 
   export let className = "default"
   export let disabled = false
-  export let text
+  export let text = ""
   export let onClick
 </script>
 

packages/standard-components/src/index.js

@@ -8,12 +8,12 @@ import "@spectrum-css/vars/dist/spectrum-light.css"
 export { default as container } from "./Container.svelte"
 export { default as grid } from "./grid/Component.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
+export { default as button } from "./Button.svelte"
 
 // export { default as text } from "./Text.svelte"
 // export { default as heading } from "./Heading.svelte"
 // export { default as input } from "./Input.svelte"
 // export { default as richtext } from "./RichText.svelte"
-// export { default as button } from "./Button.svelte"
 // export { default as login } from "./Login.svelte"
 // export { default as link } from "./Link.svelte"
 // export { default as image } from "./Image.svelte"