Replace all usages of simple-modal with new modal

packages/builder/package.json

@@ -79,7 +79,6 @@
     "shortid": "^2.2.15",
     "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "^0.1.0",
-    "svelte-simple-modal": "^0.4.2",
     "yup": "^0.29.2"
   },
   "devDependencies": {

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

@@ -11,11 +11,12 @@
    */
   import { createEventDispatcher, setContext } from "svelte"
   import { fade, fly } from "svelte/transition"
-  import { portal } from "./portal"
+  import Portal from "svelte-portal"
   import { ContextKey } from "./context"
   const dispatch = createEventDispatcher()
 
-  export let wide
+  export let wide = false
+  export let padded = true
 
   let visible
 
@@ -39,7 +40,7 @@
 </script>
 
 {#if visible}
-  <div class="portal-wrapper" use:portal={'#modal-container'}>
+  <Portal target="#modal-container">
     <div
       class="overlay"
       on:click|self={hide}
@@ -49,14 +50,14 @@
         on:click|self={hide}
         transition:fly={{ y: 50 }}>
         <div class="content-wrapper" on:click|self={hide}>
-          <div class="content" class:wide>
+          <div class="content" class:wide class:padded>
             <slot />
             <i class="ri-close-line" on:click={hide} />
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </Portal>
 {/if}
 
 <style>
@@ -109,11 +110,13 @@
     margin: 2rem 0;
     border-radius: var(--border-radius-m);
     gap: var(--spacing-xl);
-    padding: var(--spacing-xl);
   }
   .content.wide {
     flex: 0 0 600px;
   }
+  .content.padded {
+    padding: var(--spacing-xl);
+  }
 
   i {
     position: absolute;

packages/builder/src/components/start/CreateAppModal.svelte

@@ -11,12 +11,10 @@
   import { Input, TextArea, Button } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
-  import { getContext } from "svelte"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
 
-  const { open, close } = getContext("simple-modal")
   //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
   const createAppStore = writable({ currentStep: 0, values: {} })
 
@@ -169,7 +167,7 @@
       }
       const userResp = await api.post(`/api/users`, user)
       const json = await userResp.json()
-      $goto(`./${appJson._id}`)
+      $goto(`/${appJson._id}`)
     } catch (error) {
       console.error(error)
     }
@@ -194,10 +192,6 @@
 
   let onChange = () => {}
 
-  function _onCancel() {
-    close()
-  }
-
   async function _onOkay() {
     await createNewApp()
   }
@@ -249,9 +243,6 @@
       {/if}
     </div>
   </div>
-  <div class="close-button" on:click={_onCancel}>
-    <CloseIcon />
-  </div>
   <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
   {#if submitting}
     <div in:fade class="spinner-container">
@@ -276,16 +267,6 @@
     align-content: center;
     background: #f5f5f5;
   }
-  .close-button {
-    cursor: pointer;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-  }
-  .close-button :global(svg) {
-    width: 24px;
-    height: 24px;
-  }
   .heading {
     display: flex;
     flex-direction: row;

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

@@ -1,29 +1,14 @@
 <script>
-  import { getContext } from "svelte"
-  import {
-    keys,
-    map,
-    some,
-    includes,
-    cloneDeep,
-    isEqual,
-    sortBy,
-    filter,
-    difference,
-  } from "lodash/fp"
-  import { pipe } from "components/common/core"
-  import Checkbox from "components/common/Checkbox.svelte"
+  import { keys, map, includes, filter } from "lodash/fp"
   import EventEditorModal from "./EventEditorModal.svelte"
-
-  import { PencilIcon } from "components/common/Icons"
-  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
+  import { Modal } from "components/common/Modal"
 
   export const EVENT_TYPE = "event"
-
   export let component
 
   let events = []
   let selectedEvent = null
+  let modal
 
   $: {
     events = Object.keys(component)
@@ -35,28 +20,9 @@
       }))
   }
 
-  // Handle create app modal
-  const { open, close } = getContext("simple-modal")
-
   const openModal = event => {
     selectedEvent = event
-    open(
-      EventEditorModal,
-      {
-        eventOptions: events,
-        event: selectedEvent,
-        onClose: () => {
-          close()
-          selectedEvent = null
-        },
-      },
-      {
-        closeButton: false,
-        closeOnEsc: false,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
+    modal.show()
   }
 </script>
 
@@ -81,6 +47,13 @@
   </form>
 </div>
 
+<Modal bind:this={modal}>
+  <EventEditorModal
+    eventOptions={events}
+    event={selectedEvent}
+    on:hide={() => (selectedEvent = null)} />
+</Modal>
+
 <style>
   .root {
     font-size: 10pt;

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

@@ -1,13 +1,9 @@
 <script>
-  import Modal from "svelte-simple-modal"
   import { store, automationStore, backendUiStore } from "builderStore"
   import SettingsLink from "components/settings/Link.svelte"
   import { get } from "builderStore/api"
-
-  import { fade } from "svelte/transition"
-  import { isActive, goto, layout, url } from "@sveltech/routify"
-
-  import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
+  import { isActive, goto, layout } from "@sveltech/routify"
+  import { PreviewIcon } from "components/common/Icons/"
 
   // Get Package and set store
   export let application
@@ -47,50 +43,46 @@
   }
 </script>
 
-<Modal>
-  <div class="root">
+<div class="root">
+  <div class="top-nav">
+    <div class="topleftnav">
+      <button class="home-logo">
+        <img
+          src="/_builder/assets/bb-logo.svg"
+          alt="budibase icon"
+          on:click={() => $goto(`/`)} />
+      </button>
 
-    <div class="top-nav">
-      <div class="topleftnav">
-        <button class="home-logo">
-          <img
-            src="/_builder/assets/bb-logo.svg"
-            alt="budibase icon"
-            on:click={() => $goto(`/`)} />
-        </button>
-
-        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        {#each $layout.children as { path, title }}
-          <span
-            class:active={$isActive(path)}
-            class="topnavitem"
-            on:click={topItemNavigate(path)}>
-            {title}
-          </span>
-        {/each}
-      </div>
-      <div class="toprightnav">
-        <SettingsLink />
+      <!-- This gets all indexable subroutes and sticks them in the top nav. -->
+      {#each $layout.children as { path, title }}
         <span
-          class:active={false}
-          class="topnavitemright"
-          on:click={() => window.open(`/${application}`)}>
-          <PreviewIcon />
+          class:active={$isActive(path)}
+          class="topnavitem"
+          on:click={topItemNavigate(path)}>
+          {title}
         </span>
-      </div>
+      {/each}
+    </div>
+    <div class="toprightnav">
+      <SettingsLink />
+      <span
+        class:active={false}
+        class="topnavitemright"
+        on:click={() => window.open(`/${application}`)}>
+        <PreviewIcon />
+      </span>
     </div>
-
-    {#await promise}
-      <!-- This should probably be some kind of loading state? -->
-      <div />
-    {:then}
-      <slot />
-    {:catch error}
-      <p>Something went wrong: {error.message}</p>
-    {/await}
-
   </div>
-</Modal>
+
+  {#await promise}
+    <!-- This should probably be some kind of loading state? -->
+    <div />
+  {:then _}
+    <slot />
+  {:catch error}
+    <p>Something went wrong: {error.message}</p>
+  {/await}
+</div>
 
 <style>
   .root {
@@ -138,7 +130,7 @@
     margin: 0px 00px 0px 20px;
     padding-top: 4px;
     font-weight: 500;
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-m);
     height: 100%;
     align-items: center;
     box-sizing: border-box;
@@ -183,10 +175,6 @@
     align-items: center;
   }
 
-  .home-logo:hover {
-    color: var(--hovercolor);
-  }
-
   .home-logo:active {
     outline: none;
   }

packages/builder/src/pages/_layout.svelte

@@ -1,5 +1,4 @@
 <script>
-  import Modal from "svelte-simple-modal"
   import { Home as Link } from "@budibase/bbui"
   import {
     AppsIcon,
@@ -7,43 +6,41 @@
     DocumentationIcon,
     CommunityIcon,
     BugIcon,
-  } from "components/common/Icons/"
+  } from "components/common/Icons"
 </script>
 
-<Modal>
-  <div class="root">
-    <div class="ui-nav">
-      <div class="home-logo">
-        <img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
-      </div>
-
-      <div class="nav-section">
-        <Link icon={AppsIcon} title="Apps" href="/" active />
-        <Link
-          icon={HostingIcon}
-          title="Hosting"
-          href="https://portal.budi.live/" />
-        <Link
-          icon={DocumentationIcon}
-          title="Documentation"
-          href="https://docs.budibase.com/" />
-        <Link
-          icon={CommunityIcon}
-          title="Community"
-          href="https://forum.budibase.com/" />
-
-        <Link
-          icon={BugIcon}
-          title="Raise an issue"
-          href="https://github.com/Budibase/budibase" />
-      </div>
+<div class="root">
+  <div class="ui-nav">
+    <div class="home-logo">
+      <img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
     </div>
 
-    <div class="main">
-      <slot />
+    <div class="nav-section">
+      <Link icon={AppsIcon} title="Apps" href="/" active />
+      <Link
+        icon={HostingIcon}
+        title="Hosting"
+        href="https://portal.budi.live/" />
+      <Link
+        icon={DocumentationIcon}
+        title="Documentation"
+        href="https://docs.budibase.com/" />
+      <Link
+        icon={CommunityIcon}
+        title="Community"
+        href="https://forum.budibase.com/" />
+
+      <Link
+        icon={BugIcon}
+        title="Raise an issue"
+        href="https://github.com/Budibase/budibase" />
     </div>
   </div>
-</Modal>
+
+  <div class="main">
+    <slot />
+  </div>
+</div>
 
 <style>
   .root {

packages/builder/src/pages/index.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { getContext } from "svelte"
   import { store } from "builderStore"
   import api from "builderStore/api"
   import AppList from "components/start/AppList.svelte"
@@ -10,8 +9,11 @@
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { Button, Heading } from "@budibase/bbui"
   import analytics from "analytics"
+  import { Modal } from "components/common/Modal"
 
   let promise = getApps()
+  let hasKey
+  let modal
 
   async function getApps() {
     const res = await get("/api/applications")
@@ -24,8 +26,6 @@
     }
   }
 
-  let hasKey
-
   async function fetchKeys() {
     const response = await api.get(`/api/keys/`)
     return await response.json()
@@ -40,37 +40,16 @@
     }
 
     if (!keys.budibase) {
-      showCreateAppModal()
+      modal.show()
     }
   }
 
-  // Handle create app modal
-  const { open } = getContext("simple-modal")
-
-  const showCreateAppModal = () => {
-    open(
-      CreateAppModal,
-      {
-        hasKey,
-      },
-      {
-        closeButton: false,
-        closeOnEsc: false,
-        closeOnOuterClick: false,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
-  }
-
   checkIfKeysAndApps()
 </script>
 
 <div class="header">
   <Heading medium black>Welcome to the Budibase Beta</Heading>
-  <Button primary black on:click={showCreateAppModal}>
-    Create New Web App
-  </Button>
+  <Button primary black on:click={modal.show}>Create New Web App</Button>
 </div>
 
 <div class="banner">
@@ -80,6 +59,10 @@
   </div>
 </div>
 
+<Modal bind:this={modal} wide padded={false}>
+  <CreateAppModal {hasKey} />
+</Modal>
+
 {#await promise}
   <div class="spinner-container">
     <Spinner />