Remove deprecated props, fix warnings, remove old code

packages/builder/src/builderStore/store/screenTemplates/utils/Component.js

@@ -15,8 +15,6 @@ export class Component extends BaseStructure {
         selected: {},
       },
       _code: "",
-      className: "",
-      onLoad: [],
       type: "",
       _instanceName: "",
       _children: [],

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

@@ -1,127 +0,0 @@
-<script>
-  import { keys, map, includes, filter } from "lodash/fp"
-  import EventEditorModal from "./EventEditorModal.svelte"
-  import { Modal } from "@budibase/bbui"
-
-  export const EVENT_TYPE = "event"
-  export let component
-
-  let events = []
-  let selectedEvent = null
-  let modal
-
-  $: {
-    events = Object.keys(component)
-      // TODO: use real events
-      .filter(propName => ["onChange", "onClick", "onLoad"].includes(propName))
-      .map(propName => ({
-        name: propName,
-        handlers: component[propName] || [],
-      }))
-  }
-
-  const openModal = event => {
-    selectedEvent = event
-    modal.show()
-  }
-</script>
-
-<button class="newevent" on:click={() => openModal()}>
-  <i class="icon ri-add-circle-fill" />
-  Create New Event
-</button>
-
-<div class="root">
-  <form on:submit|preventDefault class="form-root">
-    {#each events as event, index}
-      {#if event.handlers.length > 0}
-        <div
-          class:selected={selectedEvent && selectedEvent.index === index}
-          class="handler-container budibase__nav-item"
-          on:click={() => openModal({ ...event, index })}>
-          <span class="event-name">{event.name}</span>
-          <span class="edit-text">EDIT</span>
-        </div>
-      {/if}
-    {/each}
-  </form>
-</div>
-
-<Modal bind:this={modal} width="600px">
-  <EventEditorModal eventOptions={events} event={selectedEvent} />
-</Modal>
-
-<style>
-  .root {
-    font-size: 10pt;
-    width: 100%;
-  }
-
-  .newevent {
-    cursor: pointer;
-    border: 1px solid var(--grey-4);
-    border-radius: 3px;
-    width: 100%;
-    padding: 8px 16px;
-    margin: 0px 0px 12px 0px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--background);
-    color: var(--ink);
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 2ms;
-  }
-
-  .newevent:hover {
-    background: var(--grey-1);
-  }
-
-  .icon {
-    color: var(--ink);
-    font-size: 16px;
-    margin-right: 4px;
-  }
-
-  .form-root {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .handler-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    border: 2px solid var(--grey-1);
-    height: 80px;
-    width: 100%;
-  }
-
-  .event-name {
-    margin-top: 5px;
-    font-weight: bold;
-    font-size: 16px;
-    color: rgba(22, 48, 87, 0.6);
-    align-self: end;
-  }
-
-  .edit-text {
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: bold;
-    align-self: end;
-    justify-self: end;
-    font-size: 10px;
-    color: rgba(35, 65, 105, 0.4);
-  }
-
-  .selected {
-    color: var(--blue);
-    background: var(--grey-1) !important;
-  }
-</style>

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -1,53 +0,0 @@
-<script>
-  import { Input, DataList, Select } from "@budibase/bbui"
-  import { automationStore, allScreens } from "builderStore"
-
-  export let parameter
-
-  let isOpen = false
-
-  const capitalize = s => {
-    if (typeof s !== "string") return ""
-    return s.charAt(0).toUpperCase() + s.slice(1)
-  }
-</script>
-
-<div class="handler-option">
-  {#if parameter.name === 'automation'}<span>{parameter.name}</span>{/if}
-  {#if parameter.name === 'automation'}
-    <Select on:change bind:value={parameter.value}>
-      <option value="" />
-      {#each $automationStore.automations.filter(wf => wf.live) as automation}
-        <option value={automation._id}>{automation.name}</option>
-      {/each}
-    </Select>
-  {:else if parameter.name === 'url'}
-    <DataList on:change bind:value={parameter.value}>
-      <option value="" />
-      {#each $allScreens as screen}
-        <option value={screen.routing.route}>
-          {screen.props._instanceName}
-        </option>
-      {/each}
-    </DataList>
-  {:else}
-    <Input
-      name={parameter.name}
-      label={capitalize(parameter.name)}
-      on:change
-      value={parameter.value} />
-  {/if}
-</div>
-
-<style>
-  .handler-option {
-    display: flex;
-    flex-direction: column;
-  }
-
-  span {
-    font-size: 18px;
-    margin-bottom: 10px;
-    font-weight: 500;
-  }
-</style>

packages/client/src/components/Screen.svelte

@@ -4,7 +4,7 @@
   import Component from "./Component.svelte"
 
   // Keep route params up to date
-  export let params
+  export let params = {}
   $: routeStore.actions.setRouteParams(params || {})
 
   // Get the screen definition for the current route

packages/server/src/constants/pages.js

@@ -31,8 +31,6 @@ const MAIN = {
           selected: {},
         },
         _code: "",
-        className: "",
-        onLoad: [],
         type: "div",
         _appId: "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
         _instanceName: "Header",
@@ -58,12 +56,6 @@ const MAIN = {
             _code: "",
             logoUrl:
               "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
-            title: "",
-            backgroundColor: "",
-            color: "",
-            borderWidth: "",
-            borderColor: "",
-            borderStyle: "",
             _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
             _instanceName: "Navigation",
             _children: [
@@ -88,11 +80,6 @@ const MAIN = {
                 url: "/",
                 openInNewTab: false,
                 text: "Home",
-                color: "",
-                hoverColor: "",
-                underline: false,
-                fontSize: "",
-                fontFamily: "initial",
                 _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
                 _instanceName: "Home Link",
                 _children: [],
@@ -143,8 +130,6 @@ const MAIN = {
       selected: {},
     },
     _code: "",
-    className: "",
-    onLoad: [],
   },
 }
 
@@ -181,13 +166,7 @@ const UNAUTHENTICATED = {
           selected: {},
         },
         _code: "",
-        loginRedirect: "",
-        usernameLabel: "Username",
-        passwordLabel: "Password",
-        loginButtonLabel: "Login",
-        buttonClass: "",
         _instanceName: "Login",
-        inputClass: "",
         _children: [],
         title: "Log in to {{ name }}",
         buttonText: "Log In",
@@ -213,8 +192,6 @@ const UNAUTHENTICATED = {
       selected: {},
     },
     _code: "",
-    className: "",
-    onLoad: [],
   },
 }
 

packages/server/src/constants/screens.js

@@ -19,8 +19,6 @@ exports.HOME_SCREEN = {
       selected: {},
     },
     _code: "",
-    className: "",
-    onLoad: [],
     type: "div",
     _children: [
       {
@@ -35,7 +33,6 @@ exports.HOME_SCREEN = {
           selected: {},
         },
         _code: "",
-        className: "",
         text: "Welcome to your Budibase App 👋",
         type: "h2",
         _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
@@ -61,8 +58,6 @@ exports.HOME_SCREEN = {
           selected: {},
         },
         _code: "",
-        className: "",
-        onLoad: [],
         type: "div",
         _appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
         _instanceName: "Video Container",

packages/standard-components/components.json

@@ -18,13 +18,7 @@
 		"description": "A basic header navigation component",
 		"children": true,
 		"props": {
-			"logoUrl": "string",
+			"logoUrl": "string"
-			"title": "string",
-			"backgroundColor": "string",
-			"color": "string",
-			"borderWidth": "string",
-			"borderColor": "string",
-			"borderStyle": "string"
 		}
 	},
 	"button": {
@@ -32,7 +26,6 @@
 		"description": "an html <button />",
 		"props": {
 			"text": "string",
-			"className": "string",
 			"disabled": "bool",
 			"onClick": "event"
 		},
@@ -65,23 +58,8 @@
 		"name": "Login Control",
 		"description": "A control that accepts username, password an also handles password resets",
 		"props": {
-			"logo": "asset",
+			"logo": "string",
-			"loginRedirect": "string",
 			"title": "string",
-			"usernameLabel": {
-				"type": "string",
-				"default": "Username"
-			},
-			"passwordLabel": {
-				"type": "string",
-				"default": "Password"
-			},
-			"loginButtonLabel": {
-				"type": "string",
-				"default": "Login"
-			},
-			"buttonClass": "string",
-			"inputClass": "string",
 			"buttonText": "string"
 		},
 		"tags": [
@@ -96,7 +74,6 @@
 		"bindable": "value",
 		"description": "An HTML input",
 		"props": {
-			"value": "string",
 			"type": {
 				"type": "options",
 				"options": [
@@ -122,27 +99,15 @@
 					"week"
 				],
 				"default": "text"
-			},
+			}
-			"onChange": "event",
-			"className": "string"
 		},
 		"tags": [
 			"form"
 		]
 	},
-	"option": {
-		"name": "Option",
-		"description": "An HTML <option>, to be used with <select>",
-		"children": false,
-		"props": {
-			"value": "string",
-			"text": "string"
-		}
-	},
 	"text": {
 		"name": "Text",
 		"description": "stylable block of text",
-		"children": false,
 		"props": {
 			"text": "string",
 			"type": {
@@ -155,16 +120,6 @@
 			"container"
 		]
 	},
-	"textfield": {
-		"name": "Textfield",
-		"description": "A component that allows the user to input text.",
-		"props": {
-			"label": "string",
-			"type": "string",
-			"value": "string",
-			"onchange": "event"
-		}
-	},
 	"richtext": {
 		"name": "Rich Text",
 		"description": "A component that allows the user to enter long form text.",
@@ -186,17 +141,6 @@
 			}
 		}
 	},
-	"datatable": {
-		"description": "an HTML table that fetches data from a table or view and displays it.",
-		"data": true,
-		"props": {
-			"datasource": "tables",
-			"stripeColor": "string",
-			"borderColor": "string",
-			"backgroundColor": "string",
-			"color": "string"
-		}
-	},
 	"datagrid": {
 		"name": "Grid",
 		"description": "a datagrid component with functionality to add, remove and edit rows.",
@@ -238,21 +182,6 @@
 		"data": true,
 		"props": {}
 	},
-	"datalist": {
-		"description": "A configurable data list that attaches to your backend tables.",
-		"data": true,
-		"props": {
-			"table": "tables",
-			"layout": {
-				"type": "options",
-				"default": "list",
-				"options": [
-					"list",
-					"grid"
-				]
-			}
-		}
-	},
 	"list": {
 		"name": "Repeater",
 		"description": "A configurable data list that attaches to your backend tables.",
@@ -656,8 +585,7 @@
 		"description": "Date Picker",
 		"bindable": "value",
 		"props": {
-			"placeholder": "string",
+			"placeholder": "string"
-			"value": "string"
 		}
 	},
 	"link": {
@@ -666,36 +594,13 @@
 		"props": {
 			"url": "string",
 			"openInNewTab": "bool",
-			"text": "string",
+			"text": "string"
-			"color": "string",
-			"hoverColor": "string",
-			"underline": "bool",
-			"fontSize": "string",
-			"fontFamily": {
-				"type": "options",
-				"default": "initial",
-				"styleBindingProperty": "font-family",
-				"options": [
-					"initial",
-					"Times New Roman",
-					"Georgia",
-					"Arial",
-					"Arial Black",
-					"Comic Sans MS",
-					"Impact",
-					"Lucida Sans Unicode"
-				]
-			}
 		}
 	},
 	"image": {
 		"description": "an HTML <img> tag",
 		"props": {
-			"url": "string",
+			"url": "string"
-			"className": "string",
-			"description": "string",
-			"height": "string",
-			"width": "string"
 		}
 	},
 	"container": {
@@ -703,8 +608,6 @@
 		"children": true,
 		"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
 		"props": {
-			"className": "string",
-			"onLoad": "event",
 			"type": {
 				"type": "options",
 				"options": [
@@ -736,7 +639,6 @@
 		"name": "Heading",
 		"description": "An HTML H1 - H6 tag",
 		"props": {
-			"className": "string",
 			"text": "string",
 			"type": {
 				"type": "options",
@@ -752,19 +654,5 @@
 			}
 		},
 		"tags": []
-	},
-	"thead": {
-		"name": "Table Head",
-		"description": "an HTML <thead> tab",
-		"props": {
-			"className": "string"
-		}
-	},
-	"tbody": {
-		"name": "Table Body",
-		"description": "an HTML <tbody> tab",
-		"props": {
-			"className": "string"
-		}
 	}
 }

packages/standard-components/src/Container.svelte

@@ -4,7 +4,6 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  export let className = ""
   export let type = "div"
 </script>
 

packages/standard-components/src/Navigation.svelte

@@ -5,7 +5,6 @@
   const component = getContext("component")
 
   export let logoUrl
-  export let title
 
   const logOut = () => {
     authStore.actions.logOut()
@@ -18,7 +17,6 @@
       {#if logoUrl}
         <img class="logo" alt="logo" src={logoUrl} height="48" />
       {/if}
-      {#if title}<span>{title}</span>{/if}
     </a>
     <div class="nav__controls">
       <div on:click={logOut}>Log out</div>

packages/standard-components/src/Textfield.svelte

@@ -1,10 +0,0 @@
-<script>
-  import Input from "./Input.svelte"
-  export let _bb
-
-  export let label = ""
-  export let value = ""
-  export let onchange = () => {}
-</script>
-
-<Input type="text" {_bb} {label} {value} {onchange} />

packages/standard-components/src/index.js

@@ -5,7 +5,6 @@ export { default as container } from "./Container.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 textfield } from "./Textfield.svelte"
 export { default as richtext } from "./RichText.svelte"
 export { default as button } from "./Button.svelte"
 export { default as login } from "./Login.svelte"