Implement code editor panel.

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16zM11 5H5v14h6V5zm8 8h-6v6h6v-6zm0-8h-6v6h6V5z"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M19.228 18.732l1.768-1.768 1.767 1.768a2.5 2.5 0 1 1-3.535 0zM8.878 1.08l11.314 11.313a1 1 0 0 1 0 1.415l-8.485 8.485a1 1 0 0 1-1.414 0l-8.485-8.485a1 1 0 0 1 0-1.415l7.778-7.778-2.122-2.121L8.88 1.08zM11 6.03L3.929 13.1 11 20.173l7.071-7.071L11 6.029z"/>
+</svg>

packages/builder/src/common/Icons/Terminal.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 d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h16V5H4zm8 10h6v2h-6v-2zm-3.333-3L5.838 9.172l1.415-1.415L11.495 12l-4.242 4.243-1.415-1.415L8.667 12z"/>
+</svg>

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

@@ -0,0 +1,3 @@
+export { default as LayoutIcon } from './Layout.svelte';
+export { default as PaintIcon } from './Paint.svelte';
+export { default as TerminalIcon } from './Terminal.svelte';

packages/builder/src/userInterface/CodeEditor.svelte

@@ -0,0 +1,127 @@
+<script>
+  let snippets = [];
+  let current_snippet = 0;
+  let snippet_text = ''
+  let id = 0;
+
+  function save_snippet() {
+    if (!snippet_text) return;
+
+    const index = snippets.findIndex(({ id }) => current_snippet === id);
+
+    if (index > -1) {
+      snippets[index].snippet = snippet_text;
+    } else {
+      snippets = snippets.concat({ snippet: snippet_text , id: id });
+    }
+    snippet_text = '';
+    current_snippet = ++id;
+  }
+
+  function edit_snippet(id) {
+    const { snippet, id: _id } = snippets.find(({ id:_id }) => _id === id);
+    current_snippet = id
+    snippet_text = snippet;
+  }
+</script>
+
+<h3>Code</h3>
+
+<p>Use the code box below to add snippets of javascript to enhance your webapp</p>
+
+<div class="editor">
+  <textarea bind:value={snippet_text} />
+  <button on:click={save_snippet}>Save</button>
+</div>
+
+<div class="snippets">
+  <h3>Snippets added</h3>
+  {#each snippets as { id, snippet } }
+  <div class="snippet">
+    <pre>{snippet}</pre>
+    <button on:click={() => edit_snippet(id)}>Edit</button>
+  </div>
+  {/each}
+</div>
+
+<style>
+  h3 {
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: 700;
+    color: #8997ab;
+    margin-bottom: 10px;
+  }
+
+  p {
+    font-size: 12px;
+    color: #333;
+    margin-top: 0;
+  }
+
+  .editor {
+    position: relative;
+  }
+
+  .editor textarea {
+    width: 100%;
+    outline: none;
+    height: 150px;
+    border: none;
+    background: #173157;
+    border-radius: 5px;
+    box-sizing: border-box;
+    white-space: pre;
+    color: #eee;
+    padding: 10px;
+    font-family: monospace;
+    resize: none;
+    overflow-y: scroll;
+  }
+
+  button {
+    position: absolute;
+    box-shadow: 0 0 black;
+    color: #eee;
+    right: 5px;
+    bottom: 10px;
+    background: none;
+    border: none;
+    text-transform: uppercase;
+    font-size: 9px;
+    font-weight: 600;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .snippets {
+    margin-top: 20px;
+  }
+
+  .snippet {
+    position: relative;
+    margin-top: 5px;
+  }
+
+  .snippet pre {
+    width: 100%;
+    outline: none;
+    max-height: 150px;
+    border: none;
+    background: #f9f9f9;
+    border-radius: 5px;
+    box-sizing: border-box;
+    white-space: pre;
+    color: #333;
+    padding: 10px;
+    font-family: monospace;
+    resize: none;
+    overflow-y: scroll;
+    margin: 10px;
+  }
+
+  .snippet button {
+    color: #ccc;
+  }
+
+</style>

packages/builder/src/userInterface/ComponentPanel.svelte

@@ -0,0 +1,265 @@
+<script>
+
+import PropsView from "./PropsView.svelte";
+import { store } from "../builderStore";
+import { isRootComponent } from "./pagesParsing/searchComponents";
+import IconButton from "../common/IconButton.svelte";
+import Textbox from "../common/Textbox.svelte";
+// import UIkit from "uikit";
+import { pipe } from "../common/core";
+import {
+    getScreenInfo
+} from "./pagesParsing/createProps";
+// import Button from "../common/Button.svelte";
+// import ButtonGroup from "../common/ButtonGroup.svelte";
+import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
+import CodeEditor from './CodeEditor.svelte';
+
+import {
+    cloneDeep,
+    join,
+    split,
+    map,
+    keys,
+    isUndefined,
+    last
+} from "lodash/fp";
+import { assign } from "lodash";
+
+let component;
+let name = "";
+let description = "";
+let tagsString = "";
+let nameInvalid = "";
+let componentInfo;
+let modalElement
+let propsValidationErrors = [];
+let originalName="";
+let components;
+let ignoreStore = false;
+
+$: shortName = last(name.split("/"));
+
+store.subscribe(s => {
+    if(ignoreStore) return;
+    component = s.currentFrontEndItem;
+    if(!component) return;
+    originalName = component.name;
+    name = component.name;
+    description = component.description;
+    tagsString = join(", ")(component.tags);
+    componentInfo = s.currentComponentInfo;
+    components = s.components;
+});
+
+// const save = () => {
+
+//     ignoreStore = true;
+//     if(!validate()) {
+//         ignoreStore = false;
+//         return;
+//     }
+
+//     component.name = originalName || name;
+//     component.description = description;
+//     component.tags = pipe(tagsString, [
+//         split(","),
+//         map(s => s.trim())
+//     ]);
+
+//     store.saveScreen(component);
+
+//     ignoreStore = false;
+//     // now do the rename
+//     if(name !== originalName) {
+//         store.renameScreen(originalName, name);
+//     }
+// }
+
+// const deleteComponent = () => {
+//     showDialog();
+// }
+
+// const confirmDeleteComponent = () => {
+//     store.deleteScreen(component.name);
+//     hideDialog();
+// }
+
+const onPropsValidate = result => {
+    propsValidationErrors = result;
+}
+
+const updateComponent = doChange => {
+    const newComponent = cloneDeep(component);
+    doChange(newComponent);
+    component = newComponent;
+    componentInfo = getScreenInfo(components, newComponent);
+}
+
+const onPropsChanged = newProps => {
+    updateComponent(newComponent =>
+        assign(newComponent.props, newProps));
+
+}
+
+const validate = () => {
+    const fieldInvalid = (field, err) =>
+        errors[field] = err;
+    const fieldValid = field =>
+        errors[field] && delete errors[field];
+
+    if(!name) nameInvalid = "component name i not supplied";
+    else nameInvalid = "";
+
+    return (!nameInvalid && propsValidationErrors.length === 0);
+}
+
+// const hideDialog = () => {
+//     UIkit.modal(modalElement).hide();
+// }
+
+// const showDialog = () => {
+//     UIkit.modal(modalElement).show();
+// }
+
+let current_view = 'props';
+
+
+
+</script>
+
+<div class="root">
+
+    <!-- <div class="title">
+        <div>{shortName}</div>
+        <div>
+            <IconButton icon="save"
+                        on:click={save}
+                        color="var(--secondary100)"
+                        hoverColor="var(--primary100)"/>
+            <IconButton icon="trash"
+                        on:click={deleteComponent}
+                        color="var(--secondary100)"
+                        hoverColor="var(--primary100)"/>
+        </div>
+    </div> -->
+
+    <ul>
+        <li>
+          <button class:selected={current_view === 'props'} on:click={() => current_view = 'props'}>
+            <PaintIcon />
+          </button>
+        </li>
+        <li>
+          <button class:selected={current_view === 'layout'} on:click={() => current_view = 'layout'}>
+            <LayoutIcon />
+          </button>
+        </li>
+        <li>
+          <button class:selected={current_view === 'code'} on:click={() => current_view = 'code'}>
+            <TerminalIcon />
+          </button>
+        </li>
+    </ul>
+
+    <div class="component-props-container">
+
+      {#if current_view === 'props'}
+        <PropsView onValidate={onPropsValidate}
+                  {componentInfo}
+                  {onPropsChanged} />
+      {:else if current_view === 'layout'}
+        <p>Layout</p>
+      {:else}
+        <CodeEditor />
+      {/if}
+
+    </div>
+
+</div>
+
+
+<!-- <div bind:this={modalElement} uk-modal>
+    <div class="uk-modal-dialog">
+
+        <div class="uk-modal-header">
+            Delete {name} ?
+        </div>
+
+        <div class="uk-modal-body">
+            Are you sure you want to delete this component ?
+        </div>
+
+        <div class="uk-modal-footer">
+            <ButtonGroup>
+                <Button grouped
+                        on:click={confirmDeleteComponent}>
+                        OK
+                </Button>
+                <Button grouped
+                        on:click={hideDialog}
+                        color="secondary" >
+                        Cancel
+                </Button>
+            </ButtonGroup>
+        </div>
+
+    </div>
+
+</div> -->
+
+<style>
+
+.root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+}
+
+.title > div:nth-child(1) {
+    grid-column-start: name;
+    color: var(--secondary100);
+}
+
+.title > div:nth-child(2) {
+    grid-column-start: actions;
+}
+
+.component-props-container {
+  margin-top: 10px;
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
+ul {
+    list-style: none;
+    display: flex;
+    padding: 0;
+}
+
+li {
+    margin-right: 20px;
+    background: none;
+    border-radius: 5px;
+    width: 45px;
+    height: 45px;
+}
+
+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/ComponentsPaneSwitcher.svelte

@@ -1,5 +1,5 @@
 <script>
-import EditComponentProps from "./EditComponentProps.svelte";
+import ComponentPanel from "./ComponentPanel.svelte";
 import ComponentsList from "./ComponentsList.svelte";
 
 let selected="properties";
@@ -33,11 +33,11 @@ const selectTab = tab =>
 
     <div class="panel">
         {#if selected==="properties"}
-        <EditComponentProps />
+            <ComponentPanel />
         {/if}
 
         {#if selected==="components"}
-        <ComponentsList />
+            <ComponentsList />
         {/if}
     </div>
 
@@ -56,13 +56,14 @@ const selectTab = tab =>
 .switcher {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 25px;
 }
 
 .switcher > button {
     display: inline-block;
     border: none;
-    margin: 5px;
+    margin: 0;
-    padding: 5px;
+    padding: 0;
     cursor: pointer;
     font-weight: 600;
     font-size: 0.85rem;

packages/builder/src/userInterface/EditComponentProps.svelte

@@ -12,6 +12,7 @@ import {
 } from "./pagesParsing/createProps";
 import Button from "../common/Button.svelte";
 import ButtonGroup from "../common/ButtonGroup.svelte";
+import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
 
 import {
     cloneDeep,
@@ -124,7 +125,7 @@ const showDialog = () => {
 
 <div class="root">
 
-    <div class="title">
+    <!-- <div class="title">
         <div>{shortName}</div>
         <div>
             <IconButton icon="save"
@@ -136,7 +137,13 @@ const showDialog = () => {
                         color="var(--secondary100)"
                         hoverColor="var(--primary100)"/>
         </div>
-    </div>
+    </div> -->
+
+    <ul>
+        <li><button><PaintIcon /></button></li>
+        <li><button><LayoutIcon /></button></li>
+        <li><button><TerminalIcon /></button></li>
+    </ul>
 
     <div class="component-props-container">
 
@@ -211,4 +218,32 @@ const showDialog = () => {
     flex: 1 1 auto;
     overflow-y: auto;
 }
+
+ul {
+    list-style: none;
+    display: flex;
+    padding: 0;
+}
+
+li {
+    margin-right: 20px;
+    background: none;
+    border-radius: 5px;
+    width: 45px;
+    height: 45px;
+}
+
+li button {
+    width: 100%;
+    height: 100%;
+    background: none;
+    border: none;
+    border-radius: 5px;
+    padding: 12px;
+}
+
+.selected {
+    background: lightblue;
+}
+
 </style>

packages/builder/src/userInterface/PropControl.svelte

@@ -40,14 +40,14 @@ const setComponentProp = (props) => {
                          options={propDef.options}
                          onChanged={v => setProp(propDef.____name, v)}/>
 
-    {/if} 
+    {/if}
 
 </div>
 
 <style>
 
 .root {
-    padding: 1rem 1rem 0rem 1rem;
+    padding: 1rem 0 0rem 0;
 }
 
 .prop-label {
@@ -56,4 +56,4 @@ const setComponentProp = (props) => {
     font-weight: bold;
 }
 
-</style>
+</style>