started implementing state management designs

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

@@ -4,5 +4,6 @@
   width="24"
   height="24">
   <path fill="none" d="M0 0h24v24H0z" />
-  <path d="M13 10h7l-9 13v-9H4l9-13z" />
+  <path
+    d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z" />
 </svg>

packages/builder/src/common/Select.svelte

@@ -0,0 +1,54 @@
+<script>
+  import getIcon from "./icon";
+  export let value;
+</script>
+
+<style>
+  .select-container {
+    padding-bottom: 10px;
+    font-size: 0.9rem;
+    color: var(--secondary50);
+    font-weight: bold;
+    position: relative;
+  }
+
+  select {
+    display: block;
+    font-size: 16px;
+    font-family: sans-serif;
+    font-weight: 700;
+    color: #444;
+    line-height: 1.3;
+    padding: 1em 2.6em 0.9em 1.4em;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border-radius: 0.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fafafa;
+  }
+
+  .arrow {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    width: 30px;
+    height: 30px;
+    pointer-events: none;
+    color: var(--primary100);
+  }
+</style>
+
+<div class="select-container">
+  <select on:change {value}>
+    <slot />
+  </select>
+  <span class="arrow">
+    {@html getIcon('chevron-down', '24')}
+  </span>
+</div>

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

@@ -1,49 +1,95 @@
 <script>
   import Modal from "../../common/Modal.svelte";
   import EventSelector from "../EventSelector.svelte";
+  import HandlerSelector from "./HandlerSelector.svelte";
+  import IconButton from "../../common/IconButton.svelte";
+  import Select from "../../common/Select.svelte";
 
   export let event;
+  export let events;
   export let open;
   export let closeModal;
+  export let changeEventHandler;
+  export let removeEventHandler;
+  export let addEventHandler;
 
-  $: action = open && event ? "Edit" : "Create";
-
+  let newEventType = "onClick";
 </script>
 
-<Modal isOpen={open} onClosed={closeModal}>
-  <h2>{action} Event</h2>
-  <EventSelector 
-    onChanged={console.log}
-    onRemoved={console.log}
-    {event} 
-  />
-</Modal>
-
 <style>
-  h3 {
-    text-transform: uppercase;
+  h2 {
+    color: var(--primary100);
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  h4 {
+    font-size: 0.7em;
+  }
+
+  /* TODO: Should be it's own component */
+  input {
     font-size: 12px;
     font-weight: 700;
-    color: #8997ab;
-    margin-bottom: 10px;
+    color: #163057;
+    opacity: 0.7;
+    padding: 5px 10px;
+    box-sizing: border-box;
+    border: 1px solid #dbdbdb;
+    border-radius: 2px;
+    outline: none;
   }
 
-  .root {
-    font-size: 10pt;
-    width: 100%;
+  .event-action {
+    background: #fafafa;
   }
 
-  .form-root {
+  .event-options {
     display: flex;
-    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
   }
+</style>
 
-  .prop-container {
-    flex: 1 1 auto;
-    min-width: 250px;
-  }
-  
-  .edit-icon:hover {
-    cursor: pointer;
-  }
-</style>
+<Modal bind:isOpen={open} onClosed={closeModal}>
+  {#if event}
+    <h2>{event.name}</h2>
+  {:else}
+    <h2>Create a New Component Event</h2>
+  {/if}
+  <span>Click here to learn more about component events</span>
+
+  <div class="event-options">
+    <div>
+      <h5>Event Name</h5>
+      <input type="text" />
+    </div>
+
+    <div>
+      <h5>Event Type</h5>
+      <Select bind:value={newEventType}>
+        {#each events as [name]}
+          <option value={name}>{name}</option>
+        {/each}
+      </Select>
+    </div>
+  </div>
+
+  <h5>Event Action(s)</h5>
+  {#if event.handlers}
+    {#each event.handlers as handler, index}
+      <HandlerSelector
+        {index}
+        onChanged={changeEventHandler}
+        onRemoved={() => removeEventHandler(index)}
+        {handler} />
+      <hr />
+    {/each}
+  {/if}
+  <div
+    class="addelement-container"
+    on:click={() => addEventHandler(newEventType)}>
+    <IconButton icon="plus" size="12" />
+    Add Handler
+  </div>
+</Modal>

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

@@ -17,6 +17,7 @@
   import PlusButton from "../../common/PlusButton.svelte";
   import IconButton from "../../common/IconButton.svelte";
   import Modal from "../../common/Modal.svelte";
+  import EventEditorModal from "./EventEditorModal.svelte";
   import HandlerSelector from "./HandlerSelector.svelte";
 
   import { PencilIcon } from "../../common/Icons";
@@ -28,12 +29,6 @@
   export let onPropChanged = () => {};
   export let components;
 
-  // Structure
-  // {
-  //    [eventName]: [{eventHandler}, {eventHandler1}],
-  //    [eventName1]: [{eventHandler}, {eventHandler1}],
-  // }
-
   let modalOpen = false;
   let events = [];
   let selectedEvent = {};
@@ -41,15 +36,6 @@
 
   // TODO: only show events that have handlers
 
-  // $: {
-  //   let componentEvents = {};
-  //   for (let propName in componentInfo) {
-  //     const isEventProp = findType(propName) === EVENT_TYPE;
-  //     if (isEventProp) componentEvents[propName] = componentInfo[propName];
-  //   }
-  //   events = componentEvents;
-  // }
-
   $: events =
     componentInfo &&
     Object.entries(componentInfo).filter(
@@ -64,8 +50,6 @@
       .props[propName];
   }
 
-  console.log({ componentInfo, events, components });
-
   const openModal = event => {
     selectedEvent = event;
     modalOpen = true;
@@ -111,8 +95,6 @@
     handlers.splice(index, 1);
     onPropChanged(newEventType, handlers);
   };
-
-  console.log("DA HANDLERS", selectedEvent.handlers);
 </script>
 
 <style>
@@ -134,11 +116,6 @@
     flex-wrap: wrap;
   }
 
-  .prop-container {
-    flex: 1 1 auto;
-    min-width: 250px;
-  }
-
   .heading {
     display: flex;
     align-items: center;
@@ -175,28 +152,6 @@
     font-size: 1.5em;
   }
 
-  h2 {
-    color: var(--primary100);
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  /* TODO: Should be it's own component */
-  input {
-    font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.7;
-    padding: 5px 10px;
-    box-sizing: border-box;
-    border: 1px solid #dbdbdb;
-    border-radius: 2px;
-    outline: none;
-  }
-
-  .event-action {
-    background: #fafafa;
-  }
 </style>
 
 <div class="heading">
@@ -210,7 +165,7 @@
     {#each events as [name, handlers], index}
       {#if handlers.length > 0}
         <div
-          class="handler-container hierarchy-item"
+          class="handler-container hierarchy-item {selectedEvent.index === index ? 'selected' : ''}"
           on:click={() => openModal({ name, handlers, index })}>
           <span class="event-name">{name}</span>
           <span class="edit-text">EDIT</span>
@@ -220,37 +175,11 @@
     {/each}
   </form>
 </div>
-<Modal bind:isOpen={modalOpen} onClosed={closeModal}>
-  <h2>Create a New Component Event</h2>
-  <span>Click here to learn more about component events</span>
-
-  <h4>Event Name</h4>
-  <input type="text" />
-
-  <h4>Event Type</h4>
-  <select
-    class="type-selector uk-select uk-form-small"
-    bind:value={newEventType}>
-    {#each events as [name]}
-      <option value={name}>{name}</option>
-    {/each}
-  </select>
-
-  <h4>Event Action(s)</h4>
-  {#if selectedEvent.handlers}
-    {#each selectedEvent.handlers as handler, index}
-      <HandlerSelector
-        {index}
-        onChanged={changeEventHandler}
-        onRemoved={removeEventHandler}
-        {handler} />
-      <hr />
-    {/each}
-  {/if}
-  <div
-    class="addelement-container"
-    on:click={() => addEventHandler(newEventType)}>
-    <IconButton icon="plus" size="12" />
-    Add Handler
-  </div>
-</Modal>
+<EventEditorModal
+  open={modalOpen}
+  onClose={closeModal}
+  event={selectedEvent}
+  {events}
+  {addEventHandler}
+  {changeEventHandler}
+  {removeEventHandler} />

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

@@ -1,5 +1,6 @@
 <script>
   import IconButton from "../../common/IconButton.svelte";
+  import Select from "../../common/Select.svelte";
   import StateBindingControl from "./StateBindingControl.svelte";
   import { find, map, keys, reduce, keyBy } from "lodash/fp";
   import { pipe, userWithFullAccess } from "../../common/core";
@@ -76,7 +77,8 @@
 <style>
   .type-selector-container {
     display: grid;
-    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
     background: #fafafa;
     padding: 22px;
     border: 1px solid var(--primary75);
@@ -85,28 +87,33 @@
   .type-selector {
     border-color: var(--primary50);
     border-radius: 2px;
-    width: 50px;
     flex: 1 0 auto;
   }
+
+  .handler-option {
+    display: flex;
+    flex-direction: column;
+  }
 </style>
 
 <div class="type-selector-container">
-  Action
-  <select
-    class="type-selector uk-select uk-form-small "
-    value={handlerType}
-    on:change={handlerTypeChanged}>
-    <option />
-    {#each eventOptions as option}
-      <option value={option.name}>{option.name}</option>
-    {/each}
-  </select>
+  <div class="handler-option">
+    Action
+    <Select value={handlerType} on:change={handlerTypeChanged}>
+      <option />
+      {#each eventOptions as option}
+        <option value={option.name}>{option.name}</option>
+      {/each}
+    </Select>
+  </div>
   {#if parameters}
-    {#each parameters as param, index}
-      <div>{param.name}</div>
-      <StateBindingControl
-        onChanged={onParameterChanged(index)}
-        value={param.value} />
+    {#each parameters as param, idx}
+      <div class="handler-option">
+        <div>{param.name}</div>
+        <StateBindingControl
+          onChanged={onParameterChanged(idx)}
+          value={param.value} />
+      </div>
     {/each}
   {/if}
 </div>