Add proper names for all components and use these names when adding components

packages/builder/src/builderStore/getNewComponentName.js

@@ -2,7 +2,9 @@ import { walkProps } from "./storeUtils"
 import { get_capitalised_name } from "../helpers"
 
 export default function(component, state) {
-  const capitalised = get_capitalised_name(component)
+  const capitalised = get_capitalised_name(
+    component.name || component._component
+  )
 
   const matchingComponents = []
 

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

@@ -371,7 +371,7 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
     const component = getComponentDefinition(state, componentToAdd)
 
     const instanceId = get(backendUiStore).selectedDatabase._id
-    const instanceName = getNewComponentName(componentToAdd, state)
+    const instanceName = getNewComponentName(component, state)
 
     const newComponent = createProps(
       component,

packages/standard-components/components.json

@@ -92,7 +92,7 @@
 		]
 	},
 	"input": {
-		"name": "Input",
+		"name": "Textfield",
 		"bindable": "value",
 		"description": "An HTML input",
 		"props": {
@@ -222,6 +222,7 @@
 		}
 	},
 	"datagrid": {
+		"name": "Grid",
 		"description": "a datagrid component with functionality to add, remove and edit rows.",
 		"data": true,
 		"props": {
@@ -250,11 +251,13 @@
 		}
 	},
 	"dataform": {
+		"name": "Form",
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {}
 	},
 	"dataformwide": {
+		"name": "Form Wide",
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {}
@@ -275,6 +278,7 @@
 		}
 	},
 	"list": {
+		"name": "Repeater",
 		"description": "A configurable data list that attaches to your backend tables.",
 		"context": "datasource",
 		"children": true,
@@ -296,6 +300,7 @@
 		}
 	},
 	"rowdetail": {
+		"name": "Row Detail",
 		"description": "Loads a row, using an ID in the url",
 		"context": "table",
 		"children": true,
@@ -306,6 +311,7 @@
 		}
 	},
 	"newrow": {
+		"name": "New Row",
 		"description": "Prepares a new row for creation",
 		"context": "table",
 		"children": true,
@@ -673,6 +679,7 @@
 		}
 	},
 	"datepicker": {
+		"name": "Date Picker",
 		"description": "Date Picker",
 		"bindable": "value",
 		"props": {
@@ -704,6 +711,7 @@
 		}
 	},
 	"link": {
+		"name": "Link",
 		"description": "an HTML anchor <a> tag",
 		"props": {
 			"url": "string",
@@ -796,14 +804,14 @@
 		"tags": []
 	},
 	"thead": {
-		"name": "TableHead",
+		"name": "Table Head",
 		"description": "an HTML <thead> tab",
 		"props": {
 			"className": "string"
 		}
 	},
 	"tbody": {
-		"name": "TableBody",
+		"name": "Table Body",
 		"description": "an HTML <tbody> tab",
 		"props": {
 			"className": "string"