lint:fix & forman

packages/builder/src/components/common/Icons/More.svelte

@@ -4,5 +4,9 @@
   width="24"
   height="24">
   <path fill="none" d="M0 0h24v24H0z" />
-  <path d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"/>
+  <path
+    d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6
+    12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21
+    12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5
+    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z" />
 </svg>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte

@@ -13,7 +13,10 @@
 
   const FIELD_TYPES = ["string", "number", "boolean"]
 
-  export let field = { type: "string", constraints: { type: "string", presence: false } }
+  export let field = {
+    type: "string",
+    constraints: { type: "string", presence: false },
+  }
   export let schema
   export let goBack
 
@@ -22,7 +25,8 @@
 
   let type = field.type
   let constraints = field.constraints
-  let required = field.constraints.presence && !field.constraints.presence.allowEmpty
+  let required =
+    field.constraints.presence && !field.constraints.presence.allowEmpty
 
   const save = () => {
     constraints.presence = required ? { allowEmpty: false } : false
@@ -33,13 +37,17 @@
   }
 
   $: constraints =
-      type === "string" ? { type: "string", length: {}, presence: false }
-      : type === "number" ? { type: "number", presence: false, numericality: {} }
-      : type === "boolean" ? { type: "boolean", presence: false }
-      : type === "datetime" ? { type: "date", datetime: {}, presence: false }
-      : type.startsWith('array') ? { type: "array", presence: false }
+    type === "string"
+      ? { type: "string", length: {}, presence: false }
+      : type === "number"
+      ? { type: "number", presence: false, numericality: {} }
+      : type === "boolean"
+      ? { type: "boolean", presence: false }
+      : type === "datetime"
+      ? { type: "date", datetime: {}, presence: false }
+      : type.startsWith("array")
+      ? { type: "array", presence: false }
       : { type: "string", presence: false }
-      
 </script>
 
 <div class="root">
@@ -48,24 +56,26 @@
 
   <form on:submit|preventDefault class="uk-form-stacked">
     <Textbox label="Name" bind:text={field.name} />
-    <Dropdown
-      label="Type"
-      bind:selected={type}
-      options={FIELD_TYPES} />
+    <Dropdown label="Type" bind:selected={type} options={FIELD_TYPES} />
 
     <Checkbox label="Required" bind:checked={required} />
 
-
     {#if type === 'string'}
       <NumberBox label="Max Length" bind:value={constraints.length.maximum} />
       <ValuesList label="Categories" bind:values={constraints.inclusion} />
     {:else if type === 'datetime'}
       <!-- TODO: revisit and fix with JSON schema -->
-      <DatePicker label="Min Value" bind:value={constraints.datetime.earliest} />
+      <DatePicker
+        label="Min Value"
+        bind:value={constraints.datetime.earliest} />
       <DatePicker label="Max Value" bind:value={constraints.datetime.latest} />
     {:else if type === 'number'}
-      <NumberBox label="Min Value" bind:value={constraints.numericality.greaterThanOrEqualTo} />
-      <NumberBox label="Max Value" bind:value={constraints.numericality.lessThanOrEqualTo} />
+      <NumberBox
+        label="Min Value"
+        bind:value={constraints.numericality.greaterThanOrEqualTo} />
+      <NumberBox
+        label="Max Value"
+        bind:value={constraints.numericality.lessThanOrEqualTo} />
     {/if}
   </form>
 </div>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -25,10 +25,10 @@
   }
 
   const isSelect = meta =>
-    meta.type === "string" 
-    && meta.constraints 
-    && meta.constraints.inclusion 
-    && meta.constraints.inclusion.length > 0
+    meta.type === "string" &&
+    meta.constraints &&
+    meta.constraints.inclusion &&
+    meta.constraints.inclusion.length > 0
 
   function determineInputType(meta) {
     if (meta.type === "datetime") return "date"

packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte

@@ -30,10 +30,10 @@
 
 <label>{label}</label>
 
-{#if type === "select"}
+{#if type === 'select'}
   <select
     class={determineClassName(type)}
-  bind:value={value}
+    bind:value
     class:uk-form-danger={errors.length > 0}>
     {#each options as opt}
       <option value={opt}>{opt}</option>

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -5,7 +5,12 @@ import { getComponentDefinition } from "builderStore/store"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last, cloneDeep } from "lodash/fp"
   import UIkit from "uikit"
-import { selectComponent, getParent, walkProps, saveCurrentPreviewItem } from "builderStore/storeUtils"
+  import {
+    selectComponent,
+    getParent,
+    walkProps,
+    saveCurrentPreviewItem,
+  } from "builderStore/storeUtils"
   import { uuid } from "builderStore/uuid"
 
   export let component
@@ -13,10 +18,19 @@ export let component
   let confirmDeleteDialog
   let dropdownEl
 
-$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right", "delay-hide": 0, animation: false });
-$: dropdown && UIkit.util.on(dropdown, "shown", () => hidden = false)
-$: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false
-$: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id
+  $: dropdown = UIkit.dropdown(dropdownEl, {
+    mode: "click",
+    offset: 0,
+    pos: "bottom-right",
+    "delay-hide": 0,
+    animation: false,
+  })
+  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
+  $: noChildrenAllowed =
+    !component ||
+    getComponentDefinition($store, component._component).children === false
+  $: noPaste =
+    !$store.componentToPaste || $store.componentToPaste._id === component._id
 
   const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
 
@@ -81,9 +95,7 @@ const deleteComponent = () => {
       const parent = getParent(state.currentPreviewItem.props, component)
 
       if (parent) {
-      parent._children = parent._children.filter(
-        c => c !== component
-      )
+        parent._children = parent._children.filter(c => c !== component)
       }
 
       saveCurrentPreviewItem(state)
@@ -136,7 +148,6 @@ const pasteComponent = mode => {
       return s
     })
   }
-
 </script>
 
 <div class="root" on:click|stopPropagation={() => {}}>
@@ -151,14 +162,20 @@ const pasteComponent = mode => {
     <li on:click={() => storeComponentForCopy(true)}>Cut</li>
     <li on:click={() => storeComponentForCopy(false)}>Copy</li>
     <hr />
-    <li class:disabled={noPaste} on:click={() => pasteComponent("above")}>Paste above</li>
-    <li class:disabled={noPaste} on:click={() => pasteComponent("below")}>Paste below</li>
-    <li class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent("inside")}>Paste inside</li>    
+    <li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
+      Paste above
+    </li>
+    <li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
+      Paste below
+    </li>
+    <li
+      class:disabled={noPaste || noChildrenAllowed}
+      on:click={() => pasteComponent('inside')}>
+      Paste inside
+    </li>
   </ul>
 </div>
 
-
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
@@ -167,7 +184,6 @@ const pasteComponent = mode => {
   onOk={deleteComponent} />
 
 <style>
-
   .root {
     overflow: hidden;
     z-index: 9;
@@ -186,7 +202,7 @@ const pasteComponent = mode => {
   .menu {
     z-index: 100000;
     overflow: visible;
-  padding: 10px 0
+    padding: 10px 0;
   }
 
   .menu li {
@@ -199,7 +215,6 @@ const pasteComponent = mode => {
     box-sizing: border-box;
   }
 
-
   .menu li:not(.disabled) {
     cursor: pointer;
     color: var(--ink);
@@ -214,5 +229,4 @@ const pasteComponent = mode => {
     color: var(--grey-dark);
     cursor: default;
   }
-
 </style>

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -16,7 +16,6 @@
   export let onSelect = () => {}
   export let level = 0
 
-
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
@@ -43,7 +42,7 @@
         style="padding-left: {level * 20 + 53}px">
         <div>{get_capitalised_name(component._component)}</div>
         <div class="actions">
-          <ComponentDropdownMenu component={component}/>
+          <ComponentDropdownMenu {component} />
         </div>
       </div>
 
@@ -96,5 +95,4 @@
   .item:hover .actions {
     display: block;
   }
-
 </style>

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -45,5 +45,4 @@
   .newscreen:hover {
     background: var(--grey-light);
   }
-
 </style>