Implement updating of individual component props

packages/builder/src/builderStore/store.js

@@ -17,7 +17,7 @@ import api from "./api";
 import { isRootComponent, getExactComponent } from "../userInterface/pagesParsing/searchComponents";
 import { rename } from "../userInterface/pagesParsing/renameScreen";
 import {
-    getNewComponentInfo, getScreenInfo
+    getNewComponentInfo, getScreenInfo, getComponentInfo
 } from "../userInterface/pagesParsing/createProps";
 import {
     loadLibs, loadLibUrls, loadGeneratorLibs
@@ -91,6 +91,9 @@ export const getStore = () => {
     store.showSettings = showSettings(store);
     store.useAnalytics = useAnalytics(store);
     store.createGeneratedComponents = createGeneratedComponents(store);
+    store.addChildComponent = addChildComponent(store);
+    store.selectComponent = selectComponent(store);
+    store.saveComponent = saveComponent(store);
     return store;
 }
 
@@ -689,3 +692,44 @@ const setCurrentPage = store => pageName => {
         return s;
     })
 }
+
+const addChildComponent = store => component => {
+
+    store.update(s => {
+        const newComponent = getNewComponentInfo(
+            s.components, component);
+
+        const children = s.currentFrontEndItem.props._children;
+
+        const component_definition = {
+            ...newComponent.fullProps,
+            _component: component,
+            name: component,
+            description: '',
+            location: (s.currentFrontEndItem.location ? s.currentFrontEndItem.location : [])
+                .concat(children && children.length || 0)
+        }
+
+        s.currentFrontEndItem.props._children =
+            children ?
+                children.concat(component_definition) :
+                [component_definition];
+
+        return s;
+    })
+}
+
+const selectComponent = store => component => {
+    store.update(s => {
+        s.currentComponentInfo = getComponentInfo(s.components, component);
+        return s;
+    })
+}
+
+const saveComponent = store => component => {
+    store.update(s => {
+        s.currentComponentInfo = getComponentInfo(s.components, component);
+        console.log(s.currentFrontEndItem, s.screens)
+        return _saveScreen(store, s, s.currentFrontEndItem);
+    })
+}

packages/builder/src/common/Icons/Image.svelte

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="currentColor" d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
+</svg>

packages/builder/src/common/Icons/Input.svelte

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="currentColor" d="M5 5v14h14V5H5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5.869 12l-.82 2H6.833L11 7h2l4.167 10H14.95l-.82-2H9.87zm.82-2h2.622L12 9.8 10.689 13z"/>
+</svg>

packages/builder/src/common/Icons/index.js

@@ -1,3 +1,5 @@
 export { default as LayoutIcon } from './Layout.svelte';
 export { default as PaintIcon } from './Paint.svelte';
 export { default as TerminalIcon } from './Terminal.svelte';
+export { default as InputIcon } from './Input.svelte';
+export { default as ImageIcon } from './Image.svelte';

packages/builder/src/userInterface/ComponentHierarchyChildren.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { last } from "lodash/fp";
+  import { pipe } from "../common/core";
+
+  export let components = [];
+  export let onSelect = () => {};
+
+  const capitalise = s => s.substring(0,1).toUpperCase() + s.substring(1);
+  const get_name = s => last(s.split('/'));
+  const get_capitalised_name = name => pipe(name, [get_name,capitalise]);
+</script>
+
+{#each components as component}
+  <ul>
+    <li on:click|stopPropagation={() => onSelect(component)}>
+      {get_capitalised_name(component.name)}
+
+      {#if component._children}
+        <svelte:self components={component._children}/>
+      {/if}
+    </li>
+
+  </ul>
+{/each}

packages/builder/src/userInterface/ComponentPanel.svelte

@@ -43,7 +43,7 @@ $: shortName = last(name.split("/"));
 
 store.subscribe(s => {
     if(ignoreStore) return;
-    component = s.currentFrontEndItem;
+    component = s.currentComponentInfo.component;
     if(!component) return;
     originalName = component.name;
     name = component.name;
@@ -68,7 +68,7 @@ const save = () => {
         map(s => s.trim())
     ]);
 
-    store.saveScreen(component);
+    store.saveComponent(component);
 
     ignoreStore = false;
     // now do the rename
@@ -92,14 +92,15 @@ const onPropsValidate = result => {
 
 const updateComponent = doChange => {
     const newComponent = cloneDeep(component);
-    doChange(newComponent);
+
-    component = newComponent;
+    component = doChange(newComponent);
+    console.log(component, $store.screens[0].props._children[1])
     componentInfo = getScreenInfo(components, newComponent);
 }
 
 const onPropsChanged = newProps => {
     updateComponent(newComponent =>
-        assign(newComponent.props, newProps));
+        assign(newComponent, newProps))
     save();
 
 }

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -1,4 +1,5 @@
 <script>
+import ComponentHierarchyChildren from './ComponentHierarchyChildren.svelte';
 
 import {
     last,
@@ -22,6 +23,7 @@ export let thisLevel = "";
 
 let pathPartsThisLevel;
 let componentsThisLevel;
+let _components;
 let subfolders;
 
 let expandedFolders = [];
@@ -52,7 +54,7 @@ const isOnNextLevel = (c) =>
     normalizedName(c.name).split("/").length === pathPartsThisLevel + 1
 
 const lastPartOfName = (c) =>
-    last(c.name.split("/"))
+    last(c.name ? c.name.split("/") : c._component.split("/"))
 
 const subFolder = (c) => {
     const cname = normalizedName(c.name);
@@ -102,27 +104,27 @@ $: {
                             ? 1
                             : normalizedName(thisLevel).split("/").length + 1;
 
-    componentsThisLevel =
+    _components =
         pipe(components, [
-            filter(isOnThisLevel),
+            // filter(isOnThisLevel),
             map(c => ({component: c, title:lastPartOfName(c)})),
             sortBy("title")
         ]);
 
-    subfolders =
+    // subfolders =
-        pipe(components, [
+    //     pipe(components, [
-            filter(notOnThisLevel),
+    //         filter(notOnThisLevel),
-            sortBy("name"),
+    //         sortBy("name"),
-            map(subFolder),
+    //         map(subFolder),
-            uniqWith((f1,f2) => f1.path === f2.path)
+    //         uniqWith((f1,f2) => f1.path === f2.path)
-        ]);
+    //     ]);
 }
 
 </script>
 
 <div class="root">
 
-    {#each subfolders as folder}
+    <!-- {#each subfolders as folder}
     <div class="hierarchy-item folder"
          on:click|stopPropagation={() => expandFolder(folder)}>
         <span>{@html getIcon(folder.isExpanded ? "chevron-down" : "chevron-right", "16")}</span>
@@ -132,14 +134,18 @@ $: {
                      thisLevel={folder.path} />
         {/if}
     </div>
-    {/each}
+    {/each} -->
 
-    {#each componentsThisLevel as component}
+    {#each _components as component}
-    <div class="hierarchy-item component" class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
+    <div class="hierarchy-item component"
+         class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
          on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
-        <!-- <span>{@html getIcon("circle", "7")}</span> -->
+
         <span class="title">{component.title}</span>
     </div>
+        {#if component.component.props && component.component.props._children}
+            <ComponentHierarchyChildren components={component.component.props._children} onSelect={store.selectComponent}/>
+        {/if}
     {/each}
 
 </div>

packages/builder/src/userInterface/ComponentsList.svelte

@@ -8,6 +8,7 @@ import {
     groupBy, keys, find, sortBy
 } from "lodash/fp";
 import { pipe } from "../common/core";
+import { ImageIcon, InputIcon, LayoutIcon } from '../common/Icons/';
 
 let componentLibraries=[];
 
@@ -29,9 +30,7 @@ const addRootComponent = (c, all) => {
 
 };
 
-const onComponentChosen = (component) => {
+const onComponentChosen = store.addChildComponent;
-
-};
 
 store.subscribe(s => {
 
@@ -46,6 +45,8 @@ store.subscribe(s => {
     componentLibraries = newComponentLibraries;
 });
 
+let current_view = 'text';
+
 </script>
 
 <div class="root">
@@ -55,22 +56,34 @@ store.subscribe(s => {
     </div>
 
     <div class="library-container">
+        <ul>
+            <li>
+            <button class:selected={current_view === 'text'} on:click={() => current_view = 'text'}>
+                <InputIcon />
+            </button>
+            </li>
+            <li>
+                <button class:selected={current_view === 'layout'} on:click={() => current_view = 'layout'}>
+                    <LayoutIcon />
+                </button>
+            </li>
+            <li>
+                <button class:selected={current_view === 'media'} on:click={() => current_view = 'media'}>
+                    <ImageIcon />
+                </button>
+            </li>
+        </ul>
 
-
+        {#each lib.components.filter(_ => true) as component}
-        <div class="inner-header">
-            Components
-        </div>
-
-        {#each lib.components as component}
 
         <div class="component"
-            on:click={() => onComponentChosen(component)}>
+            on:click={() =>  onComponentChosen(component.name)}>
             <div class="name">
                 {splitName(component.name).componentName}
             </div>
-            <div class="description">
+            <!-- <div class="description">
                 {component.description}
-            </div>
+            </div> -->
         </div>
 
         {/each}
@@ -113,8 +126,16 @@ store.subscribe(s => {
 }
 
 .component {
-    padding: 2px 0px;
+    padding: 0 15px;
     cursor: pointer;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    margin: 10px 0;
+    height: 40px;
+    box-sizing: border-box;
+    color: #163057;
+    display: flex;
+    align-items: center;
 }
 
 .component:hover {
@@ -122,8 +143,11 @@ store.subscribe(s => {
 }
 
 .component > .name {
-    color: var(--secondary100);
+    color: #163057;
     display: inline-block;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 0.6;
 }
 
 .component > .description {
@@ -133,6 +157,34 @@ store.subscribe(s => {
     margin-left: 10px;
 }
 
+ul {
+    list-style: none;
+    display: flex;
+    padding: 0;
+}
 
+li {
+    margin-right: 20px;
+    background: none;
+    border-radius: 5px;
+    width: 48px;
+    height: 48px;
+}
+
+li button {
+    width: 100%;
+    height: 100%;
+    background: none;
+    border: none;
+    border-radius: 5px;
+    padding: 12px;
+    outline: none;
+    cursor: pointer;
+}
+
+.selected {
+    color: var(--button-text);
+    background: var(--background-button)!important;
+}
 
 </style>

packages/builder/src/userInterface/NewComponent.svelte

@@ -29,7 +29,6 @@ let name="";
 let saveAttempted=false;
 
 store.subscribe(s => {
-    console.log(s)
     layoutComponents = pipe(s.components, [
         filter(c => c.container),
         map(c => ({name:c.name, ...splitName(c.name)}))

packages/builder/src/userInterface/PropsView.svelte

@@ -25,7 +25,6 @@ let props = {};
 let propsDefinitions = [];
 let isInstance = false;
 
-
 $: {
     if(componentInfo)
     {
@@ -46,7 +45,7 @@ $: {
 let setProp = (name, value) => {
     const newProps = cloneDeep(props);
 
-    let finalProps = isInstance ? newProps : cloneDeep(componentInfo.component.props);
+    let finalProps = isInstance ? newProps : cloneDeep(componentInfo.component.props ? componentInfo.component.props : componentInfo.component);
 
     if(!isInstance) {
         const nowSet = [];
@@ -98,9 +97,6 @@ const fieldHasError = (propName) =>
 
     </form>
 
-
-
-
 </div>
 
 

packages/builder/src/userInterface/pagesParsing/createProps.js

@@ -48,7 +48,7 @@ export const getComponentInfo = (components, comp) => {
         component = targetComponent;
     } else {
         subComponent = targetComponent;
-        component = find(c => c.name === subComponent.props._component)(
+        component = find(c => c.name === (subComponent.props ? subComponent.props._component : subComponent._component))(
             components);
     }
 

packages/builder/src/userInterface/pagesParsing/validateProps.js

@@ -19,7 +19,8 @@ const makeError = (errors, propName, stack) => (message) =>
     errors.push({
         stack,
         propName,
-        error:message});
+        error: message
+    });
 
 export const recursivelyValidate = (rootProps, getComponent, stack = []) => {
 
@@ -77,9 +78,9 @@ export const validateProps = (componentDefinition, props, stack=[], isFinal=true
 
     for (let propDefName in props) {
 
-        if(propDefName === "_component") continue;
+        const ignore = ['_component', "_children", '_layout', 'name', 'description', 'location'];
-        if(propDefName === "_children") continue;
+
-        if(propDefName === "_layout") continue;
+        if (ignore.includes(propDefName)) continue;
 
         const propDef = expandPropDef(propsDefinition[propDefName]);
 
@@ -140,4 +141,3 @@ export const validateComponentDefinition = (componentDefinition) => {
     return errors;
 
 }
-

packages/standard-components/src/Div.svelte

@@ -8,7 +8,7 @@ export let _bb;
 let rootDiv;
 $:{
 	if(_bb && rootDiv && _children && _children.length)
-		_bb.hydrateChildren(_children, theButton);
+		_bb.hydrateChildren(_children, rootDiv);
 }
 
 
@@ -16,4 +16,3 @@ $:{
 
 <div class="{className}" bind:this={rootDiv}>
 </div>
-