Merge pull request #584 from Budibase/removing-uikit-06

Removing UI kit uk-input, uk-toggle, uk-spinner

packages/builder/package.json

@@ -78,9 +78,9 @@
     "mustache": "^4.0.1",
     "posthog-js": "1.3.1",
     "shortid": "^2.2.15",
+    "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",
-    "uikit": "^3.1.7",
     "yup": "^0.29.2"
   },
   "devDependencies": {

packages/builder/src/budibase.css

@@ -85,11 +85,6 @@
      box-sizing: border-box; 
 }
 
-.uk-text-right {
-    display: flex;
-    justify-content: flex-start;
-}
-
 .preview-pane {
     grid-column: 2;
     margin: 80px 60px;
@@ -154,3 +149,13 @@
 
 .bb-table td > :last-child { margin-bottom: 0; }
 
+.bb__alert {
+    position: relative;
+    margin-bottom: var(--spacing-m);
+    padding: var(--spacing-l);
+}
+
+.bb__alert--danger {
+    background: #fef4f6;
+    color: #f0506e;
+}

packages/builder/src/components/common/ConfirmDialog.svelte

@@ -1,5 +1,4 @@
 <script>
-  import UIkit from "uikit"
   import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
 
   export let title = ""

packages/builder/src/components/common/ErrorsBox.svelte

@@ -5,7 +5,7 @@
 </script>
 
 {#if hasErrors}
-  <div uk-alert class="uk-alert-danger">
+  <div class="bb__alert bb__alert--danger">
     {#each errors as error}
       <div>{error.dataPath} {error.message}</div>
     {/each}

packages/builder/src/components/common/IconButton.svelte

@@ -1,59 +0,0 @@
-<script>
-  import getIcon from "./icon"
-
-  export let size = 18
-  export let icon = ""
-  export let style = ""
-  export let color = "var(--ink)"
-  export let hoverColor = "var(--secondary75)"
-  export let attributes = {}
-
-  let currentAttributes = []
-  const addAttributes = (node, attributes) => {
-    const add = _attributes => {
-      const attrs = []
-      for (let attr in _attributes) {
-        node.setAttribute(attr, _attributes[attr])
-        attrs.push("uk-toggle")
-      }
-      currentAttributes = attrs
-    }
-
-    add(attributes)
-
-    return {
-      // should implement update method
-      update(attributes) {
-        for (let attr of currentAttributes) {
-          node.removeAttribute(attr)
-        }
-        add(attributes)
-      },
-      destroy() {},
-    }
-  }
-</script>
-
-<button
-  style="{style}{style ? ';' : ''} color:{color}; --hovercolor:{hoverColor}"
-  on:click
-  use:addAttributes={attributes}>
-  {@html getIcon(icon, size)}
-</button>
-
-<style>
-  button {
-    border-style: none;
-    background-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    outline: none;
-  }
-
-  button:hover {
-    color: var(--hovercolor);
-  }
-
-  button:active {
-    outline: none;
-  }
-</style>

packages/builder/src/components/common/Spinner.svelte

@@ -1,5 +1,5 @@
 <script>
-  export let ratio = "4.5"
+  import { Circle } from "svelte-loading-spinners"
 </script>
 
-<span uk-spinner={`ratio: ${ratio}`} />
+<Circle size="60" color="#000000" unit="px" />

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

@@ -4,7 +4,6 @@
   import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last, cloneDeep } from "lodash/fp"
-  import UIkit from "uikit"
   import {
     selectComponent,
     getParent,
@@ -13,20 +12,14 @@
     regenerateCssForCurrentScreen,
   } from "builderStore/storeUtils"
   import { uuid } from "builderStore/uuid"
+  import { DropdownMenu } from "@budibase/bbui"
 
   export let component
 
   let confirmDeleteDialog
-  let dropdownEl
+  let dropdown
+  let anchor
 
-  $: 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
   $: noPaste = !$store.componentToPaste
@@ -115,11 +108,19 @@
   }
 </script>
 
-<div class="root boundary" on:click|stopPropagation={() => {}}>
+<div bind:this={anchor} on:click|stopPropagation={() => {}}>
-  <button>
+  <button on:click={dropdown.show}>
     <MoreIcon />
   </button>
-  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
+</div>
+<DropdownMenu
+  class="menu"
+  bind:this={dropdown}
+  on:click={hideDropdown}
+  width="170px"
+  {anchor}
+  align="left">
+  <ul>
     <li class="item" on:click={() => confirmDeleteDialog.show()}>
       <i class="icon ri-delete-bin-2-line" />
       Delete
@@ -167,7 +168,7 @@
       Paste inside
     </li>
   </ul>
-</div>
+</DropdownMenu>
 
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -177,36 +178,29 @@
   onOk={deleteComponent} />
 
 <style>
-  .root {
+  ul {
-    overflow: hidden;
+    list-style: none;
-    z-index: 9;
+    padding: 0;
-  }
-
-  .root button {
-    border-style: none;
-    border-radius: 2px;
-    padding: 5px;
-    background: transparent;
-    cursor: pointer;
-    color: var(--ink);
-    outline: none;
-  }
-
-  .menu {
-    z-index: 100000;
-    overflow: visible;
-    padding: 12px 0px;
-    border-radius: 5px;
-  }
-
-  .menu li {
-    border-style: none;
-    background-color: transparent;
-    list-style-type: none;
-    padding: 4px 16px;
     margin: 0;
-    width: 100%;
+  }
-    box-sizing: border-box;
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  li:hover {
+    background-color: var(--grey-2);
+  }
+
+  li:active {
+    color: var(--blue);
   }
 
   .item {
@@ -219,16 +213,6 @@
     margin-right: 8px;
   }
 
-  .menu li:not(.disabled) {
-    cursor: pointer;
-    color: var(--grey-7);
-  }
-
-  .menu li:not(.disabled):hover {
-    color: var(--ink);
-    background-color: var(--grey-1);
-  }
-
   .disabled {
     color: var(--grey-4);
     cursor: default;

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

@@ -2,7 +2,6 @@
   import { setContext, onMount } from "svelte"
 
   import { store } from "builderStore"
-  import IconButton from "components/common/IconButton.svelte"
   import {
     LayoutIcon,
     PaintIcon,

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

@@ -2,7 +2,6 @@
   import { store } from "builderStore"
   import { Button, Select } from "@budibase/bbui"
   import HandlerSelector from "./HandlerSelector.svelte"
-  import IconButton from "../../common/IconButton.svelte"
   import ActionButton from "../../common/ActionButton.svelte"
   import getIcon from "../../common/icon"
   import { CloseIcon } from "components/common/Icons/"

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

@@ -13,7 +13,6 @@
   } from "lodash/fp"
   import { pipe } from "components/common/core"
   import Checkbox from "components/common/Checkbox.svelte"
-  import IconButton from "components/common/IconButton.svelte"
   import EventEditorModal from "./EventEditorModal.svelte"
 
   import { PencilIcon } from "components/common/Icons"

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

@@ -1,6 +1,5 @@
 <script>
   import { Button, Select } from "@budibase/bbui"
-  import IconButton from "components/common/IconButton.svelte"
   import StateBindingCascader from "./StateBindingCascader.svelte"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"

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

@@ -1,6 +1,5 @@
 <script>
   import { Input, Select } from "@budibase/bbui"
-  import IconButton from "components/common/IconButton.svelte"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"
   import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"

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

@@ -2,7 +2,6 @@
   import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import UIkit from "uikit"
   import api from "builderStore/api"
   import Portal from "svelte-portal"
   import { DropdownMenu } from "@budibase/bbui"

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

@@ -4,7 +4,6 @@
   import PageLayout from "./PageLayout.svelte"
   import PagesList from "./PagesList.svelte"
   import { store } from "builderStore"
-  import IconButton from "components/common/IconButton.svelte"
   import NewScreen from "./NewScreen.svelte"
   import CurrentItemPreview from "./CurrentItemPreview.svelte"
   import SettingsView from "./SettingsView.svelte"

packages/builder/src/index.html

@@ -15,7 +15,6 @@
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/bbui.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>
-	<link rel='stylesheet' href="/_builder/uikit.min.css">
 
 </head>
 

packages/builder/src/pages/[application]/_reset.svelte

@@ -8,7 +8,6 @@
   import { isActive, goto, layout, url } from "@sveltech/routify"
 
   import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
-  import IconButton from "components/common/IconButton.svelte"
 
   // Get Package and set store
   export let application
@@ -69,9 +68,6 @@
             {title}
           </span>
         {/each}
-        <!-- <IconButton icon="home"
-                      color="var(--grey-2)"
-                      hoverColor="var(--secondary75)"/> -->
       </div>
       <div class="toprightnav">
         <SettingsLink />

packages/builder/src/pages/[application]/frontend/_layout.svelte

@@ -3,7 +3,6 @@
   import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
   import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
-  import IconButton from "components/common/IconButton.svelte"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"

packages/builder/src/pages/index.svelte

@@ -5,7 +5,6 @@
   import AppList from "components/start/AppList.svelte"
   import { onMount } from "svelte"
   import ActionButton from "components/common/ActionButton.svelte"
-  import IconButton from "components/common/IconButton.svelte"
   import { get } from "builderStore/api"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"

packages/builder/yarn.lock

@@ -688,9 +688,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.29.1":
+"@budibase/bbui@^1.29.3":
-  version "1.29.1"
+  version "1.29.3"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.1.tgz#edaa6c7ce43a71d94460f7a3669ade1d4523333e"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.3.tgz#02d84d5e0f9ca936d62b1e0e9bc943711d124f7a"
+  integrity sha512-X5QBZX2CNccRiW6fbj6/fnUYhlilc6I6ae0QT8oIuv9DozDnUUbdd6j4RMxW1DQBZuvWH54OGq4nwkq9f37hKg==
   dependencies:
     sirv-cli "^0.4.6"
 
@@ -2857,6 +2858,7 @@ for-in@^1.0.2:
 foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
 
 forever-agent@~0.6.1:
   version "0.6.1"
@@ -5439,6 +5441,7 @@ shellwords@^0.1.1:
 shortid@^2.2.15:
   version "2.2.15"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
   dependencies:
     nanoid "^2.1.0"
 
@@ -5784,6 +5787,11 @@ svelte-jester@^1.0.6:
   dependencies:
     cosmiconfig "^6.0.0"
 
+svelte-loading-spinners@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/svelte-loading-spinners/-/svelte-loading-spinners-0.1.1.tgz#a35a811b7db0389ec2a5de6904c718c58c36e1f9"
+  integrity sha512-or4zs10VOdczOJo3u25IINXQOkZbLNAxMrXK0PRbzVoJtPQq/QZPNxI32383bpe+soYcEKmESbmW+JlW3MbUKQ==
+
 svelte-portal@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
@@ -5942,10 +5950,6 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-uikit@^3.1.7:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/uikit/-/uikit-3.4.6.tgz#39d59620aeb42d53ba905a67e99e2015d4aaaf9c"
-
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"