few bug fixes

packages/builder/src/builderStore/store.js

@@ -4,7 +4,7 @@ import {
 import {
     filter, cloneDeep, sortBy, 
     map, last, keys, concat,
-    find, isEmpty, reduce
+    find, isEmpty, reduce, values
 } from "lodash/fp";
 import {
     pipe, getNode, validate,
@@ -120,7 +120,7 @@ const initialise = (store, initial) => async () => {
     initial.hasAppPackage = true;
     initial.hierarchy = pkg.appDefinition.hierarchy;
     initial.accessLevels = pkg.accessLevels;
-    initial.derivedComponents = pkg.derivedComponents;
+    initial.derivedComponents = values(pkg.derivedComponents);
     initial.generators = generatorsArray(pkg.rootComponents.generators);
     initial.allComponents = combineComponents(
         pkg.derivedComponents, pkg.rootComponents.components);
@@ -453,7 +453,7 @@ const saveDerivedComponent = store => (derivedComponent) => {
         s.allComponents = components;
         s.derivedComponents = derivedComponents;
         s.currentFrontEndItem = derivedComponent;
-        s.currentComponentInfo = getNewComponentInfo(
+        s.currentComponentInfo = getComponentInfo(
             s.allComponents, derivedComponent.name);
         s.currentComponentIsNew = false;
         
@@ -480,6 +480,7 @@ const createDerivedComponent = store => componentName => {
 const createGeneratedComponents = store => components => {
     store.update(s => {
         s.allComponents = [...s.allComponents, ...components];
+        s.derivedComponents = [...s.derivedComponents, ...components];
 
         const doCreate = async () => {
             for(let c of components) {

packages/builder/src/userInterface/ComponentPropSelector.svelte

@@ -3,7 +3,7 @@ import {
     last
 } from "lodash/fp";
 import IconButton from "../common/IconButton.svelte";
-import ComponentSearch from "./ComponentSearch.svelte";
+import ComponentSelector from "./ComponentSelector.svelte";
 import Button from "../common/Button.svelte";
 import ButtonGroup from "../common/ButtonGroup.svelte";
 import UIkit from "uikit";
@@ -89,11 +89,12 @@ const confirmClearComponent = () => {
 </div>
 
 <div bind:this={modalElement} uk-modal>
-    <div class="uk-modal-dialog">
+    <div class="uk-modal-dialog" uk-overflow-auto>
 
         {#if modalAction === CHOOSE_COMPONENT}
         <div class="uk-modal-body">
-            <ComponentSearch onComponentChosen={componentChosen} />
+            <ComponentSelector onComponentChosen={componentChosen}
+                               allowGenerators={false} />
         </div>
         {:else if modalAction === CLEAR_COMPONENT}
         <div class="uk-modal-body">

packages/builder/src/userInterface/ComponentSelector.svelte

@@ -11,6 +11,7 @@ import { pipe } from "../common/core";
 
 export let onComponentChosen;
 export let onGeneratorChosen;
+export let allowGenerators;
 
 let derivedComponents=[];
 let componentLibraries=[];
@@ -77,6 +78,7 @@ store.subscribe(s => {
 
 <div class="library-container">
 
+    {#if allowGenerators}
     <div class="inner-header">
         Generators
     </div>
@@ -94,6 +96,7 @@ store.subscribe(s => {
     </div>
 
     {/each}
+    {/if}
 
     <div class="inner-header">
         Components

packages/builder/src/userInterface/NewComponent.svelte

@@ -58,6 +58,7 @@ const onGeneratorChosen = (g) => {
 
 const onConfirmGenerate = (components) => {
     store.createGeneratedComponents(components);
+    UIkit.modal(generatorOptionsModal).hide();
     generator = null;
 }
 
@@ -72,7 +73,8 @@ const onConfirmGenerate = (components) => {
 
         <div class="uk-modal-body">
             <ComponentSelector onComponentChosen={onComponentChosen}
-                               onGeneratorChosen={onGeneratorChosen} />
+                               onGeneratorChosen={onGeneratorChosen}
+                               allowGenerators={true} />
         </div>
     </div>
 </div>

packages/server/appPackages/testApp2/components/Yeo button.json

@@ -0,0 +1,16 @@
+{
+  "name": "Yeo button",
+  "description": "aye so it it",
+  "inherits": "@budibase/standard-components/button",
+  "props": {
+    "background": "red",
+    "hoverBackground": "blue",
+    "color": "white",
+    "border": "solid 5px green",
+    "hoverBorder": "solid 10px yellow",
+    "hoverColor": "purple"
+  },
+  "tags": [
+    "button"
+  ]
+}

packages/server/appPackages/testApp2/components/common/H1.json

@@ -3,9 +3,6 @@
   "description": "Header 1",
   "inherits": "@budibase/standard-components/text",
   "props": {
-    "font": "29pt"
+    "font": "20pt"
-  },
+  }
-  "tags": [
-    ""
-  ]
 }

packages/server/appPackages/testApp2/components/common/Prim Button.json

@@ -1,13 +0,0 @@
-{
-  "name": "common/Prim Button",
-  "description": "a styled button",
-  "inherits": "@budibase/standard-components/button",
-  "props": {
-    "padding": "5px 7px",
-    "border": "1px solid #EEE",
-    "color": "#5F6368",
-    "background": "##f2f2f2",
-    "hoverColor": "black",
-    "hoverBackground": "#cccccc"
-  }
-}

packages/server/appPackages/testApp2/components/common/Primary Button.json

@@ -1,13 +0,0 @@
-{
-  "name": "common/Primary Button",
-  "description": "a styled button",
-  "inherits": "@budibase/standard-components/button",
-  "props": {
-    "padding": "5px 7px",
-    "border": "1px solid #EEE",
-    "color": "#5F6368",
-    "background": "##f2f2f2",
-    "hoverColor": "black",
-    "hoverBackground": "#cccccc"
-  }
-}

packages/server/appPackages/testApp2/components/common/Secondary Button.json

@@ -1,13 +0,0 @@
-{
-  "name": "common/Secondary Button",
-  "description": "a styled button",
-  "inherits": "@budibase/standard-components/button",
-  "props": {
-    "padding": "5px 7px",
-    "border": "1px solid #EEE",
-    "color": "#5F6368",
-    "background": "##f2f2f2",
-    "hoverColor": "black",
-    "hoverBackground": "#cccccc"
-  }
-}

packages/server/appPackages/testApp2/components/customer Form.json

@@ -21,11 +21,8 @@
                 "_component": "@budibase/standard-components/textbox",
                 "value": {
                   "##bbstate": "currentcustomer.name",
-                  "##bbstatefallback": "mike",
                   "##bbsource": "store"
-                },
+                }
-                "hideValue": false,
-                "className": "default"
               }
             }
           ]
@@ -76,8 +73,5 @@
         }
       }
     ]
-  },
+  }
-  "tags": [
-    ""
-  ]
 }

packages/standard-components/src/button.svelte

@@ -23,22 +23,38 @@ let customHoverColorClass;
 let customHoverBorderClass;
 let customHoverBackClass;
 
+let customClasses = "";
+
+const createClasses = (classes) => {
+	let all = "";
+	for(let cls in classes) {
+		if(classes[cls]) {
+			all = all + " " + cls;
+		}
+	}
+	return all;
+}
+	
+
 $:{
 	if(_bb && contentComponentContainer && contentComponent._component)
 		_bb.initialiseComponent(contentComponent, contentComponentContainer);
 
 	cssVariables = {
 		hoverColor, hoverBorder,
-		hoverBackground
+		hoverBackground,
+		background, color, border,
 	};
 
 	buttonStyles = buildStyle({
-		background, color, border, padding
+		padding
-	})
+	});	
+	
+	customClasses = createClasses({
+		hoverColor, hoverBorder, hoverBackground,
+		background, border, color
+	});
 	
-	customHoverColorClass = hoverColor ? "customHoverColor" : "";
-	customHoverBorderClass = hoverBorder ? "customHoverBorder" : "";
-	customHoverBackClass = hoverBackground ? "customHoverBack" : "";
 }
 
 
@@ -52,7 +68,7 @@ const clickHandler = () => {
 
 
 <button use:cssVars={cssVariables} 
-		class="{className} {customHoverColorClass} {customHoverBorderClass} {customHoverBackClass}" 
+		class="{className} {customClasses}" 
 		disabled={disabled || false} 
 		on:click={clickHandler} 
 		style={buttonStyles}>
@@ -90,15 +106,29 @@ const clickHandler = () => {
 	border-color: #666;
 }
 
-.customHoverBorder:hover {
+.border {
+	border: var(--border);
+}
+
+.color {
+	color: var(--color);
+}
+
+.background {
+	background: var(--background);
+}
+
+.hoverBorder:hover {
 	border: var(--hoverBorder);
 }
 
-.customHoverColor:hover {
+.hoverColor:hover {
 	color: var(--hoverColor);
 }
 
-.customHoverBack:hover {
+.hoverBack:hover {
 	background: var(--hoverBackground);
 }
+
+
 </style>