Add types to components and remove unused components

src/components/Modal.svelte

@@ -1,19 +1,24 @@
-<script>
-    import {setContext as baseSetContext, createEventDispatcher} from 'svelte';
-    import {fade} from 'svelte/transition';
+<script lang="ts">
+    //@ts-nocheck
+    import {
+        setContext as baseSetContext,
+        createEventDispatcher,
+    } from "svelte";
+    import { fade } from "svelte/transition";
 
-    export let key = 'simple-modal';
+    export let key = "simple-modal";
     export let closeButton = true;
     export let closeOnEsc = true;
     export let closeOnOuterClick = true;
     export let transitionBg = fade;
-    export let transitionBgProps = {duration: 250};
+    export let transitionBgProps = { duration: 250 };
     export let transitionWindow = transitionBg;
     export let transitionWindowProps = transitionBgProps;
-    export let styleBg = {top: 0, left: 0};
+    export let styleBg = { top: 0, left: 0 };
     export let styleWindow = {};
     export let styleContent = {};
     export let setContext = baseSetContext;
+    export let show: boolean = false;
 
     let Component = null;
     let props = null;
@@ -24,23 +29,38 @@
     let customStyleWindow = {};
     let customStyleContent = {};
 
-    let Callback = (props) => {
-    };
+    let Callback = (props) => {};
+
+    $: Component,
+        () => {
+            show = !!Component;
+        };
 
     const dispatch = createEventDispatcher();
 
-    const camelCaseToDash = str => str
-        .replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
+    const camelCaseToDash = (str) =>
+        str.replace(/([a-zA-Z])(?=[A-Z])/g, "$1-").toLowerCase();
 
-    const toCssString = (props) => Object.keys(props)
-        .reduce((str, key) => `${str}; ${camelCaseToDash(key)}: ${props[key]}`, '');
+    const toCssString = (props) =>
+        Object.keys(props).reduce(
+            (str, key) => `${str}; ${camelCaseToDash(key)}: ${props[key]}`,
+            ""
+        );
 
     $: cssBg = toCssString(Object.assign({}, styleBg, customStyleBg));
-    $: cssWindow = toCssString(Object.assign({}, styleWindow, customStyleWindow));
-    $: cssContent = toCssString(Object.assign({}, styleContent, customStyleContent));
+    $: cssWindow = toCssString(
+        Object.assign({}, styleWindow, customStyleWindow)
+    );
+    $: cssContent = toCssString(
+        Object.assign({}, styleContent, customStyleContent)
+    );
 
-    const open = (NewComponent, newProps = {}, style = {bg: {}, window: {}, content: {}}, newCallback = () => {
-    }) => {
+    const open = (
+        NewComponent,
+        newProps = {},
+        style = { bg: {}, window: {}, content: {} },
+        newCallback = () => {}
+    ) => {
         Component = NewComponent;
         props = newProps;
         Callback = newCallback;
@@ -58,8 +78,8 @@
         customStyleContent = {};
     };
 
-    const handleKeyup = ({key}) => {
-        if (closeOnEsc && Component && key === 'Escape') {
+    const handleKeyup = ({ key }) => {
+        if (closeOnEsc && Component && key === "Escape") {
             event.preventDefault();
             close();
         }
@@ -67,18 +87,47 @@
 
     const handleOuterClick = (event) => {
         if (
-            closeOnOuterClick && (
-                event.target === background || event.target === wrap
-            )
+            closeOnOuterClick &&
+            (event.target === background || event.target === wrap)
         ) {
             event.preventDefault();
             close();
         }
     };
 
-    setContext(key, {open, close});
+    setContext(key, { open: show, close });
 </script>
 
+<svelte:window on:keyup={handleKeyup} />
+
+<div>
+    {#if Component}
+        <div
+            class="bg"
+            on:click={handleOuterClick}
+            bind:this={background}
+            transition:transitionBg={transitionBgProps}
+            style={cssBg}
+        >
+            <div class="window-wrap" bind:this={wrap}>
+                <div
+                    class="window"
+                    transition:transitionWindow={transitionWindowProps}
+                    style={cssWindow}
+                >
+                    {#if closeButton}
+                        <button on:click={close} class="close" />
+                    {/if}
+                    <div class="content" style={cssContent}>
+                        <Component {...props} {close} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    {/if}
+    <slot />
+</div>
+
 <!--
 
 ** LICENSE **
@@ -165,12 +214,13 @@ https://github.com/flekschas/svelte-simple-moda
         background: white;
         box-shadow: 0 0 0 1px black;
         transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-        background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+            background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
         -webkit-appearance: none;
     }
 
-    .close:before, .close:after {
-        content: '';
+    .close:before,
+    .close:after {
+        content: "";
         display: block;
         box-sizing: border-box;
         position: absolute;
@@ -180,7 +230,7 @@ https://github.com/flekschas/svelte-simple-moda
         background: black;
         transform-origin: center;
         transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-        background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+            background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
     }
 
     .close:before {
@@ -201,7 +251,8 @@ https://github.com/flekschas/svelte-simple-moda
         background: black;
     }
 
-    .close:hover:before, .close:hover:after {
+    .close:hover:before,
+    .close:hover:after {
         height: 2px;
         background: white;
     }
@@ -215,35 +266,9 @@ https://github.com/flekschas/svelte-simple-moda
         transform: scale(0.9);
     }
 
-    .close:hover, .close:focus, .close:active {
+    .close:hover,
+    .close:focus,
+    .close:active {
         outline: none;
     }
 </style>
-
-<svelte:window on:keyup={handleKeyup}/>
-
-<div>
-    {#if Component}
-        <div
-                class="bg"
-                on:click={handleOuterClick}
-                bind:this={background}
-                transition:transitionBg={transitionBgProps}
-                style={cssBg}>
-            <div class="window-wrap" bind:this={wrap}>
-                <div
-                        class="window"
-                        transition:transitionWindow={transitionWindowProps}
-                        style={cssWindow}>
-                    {#if closeButton}
-                        <button on:click={close} class="close"></button>
-                    {/if}
-                    <div class="content" style={cssContent}>
-                        <Component {...props} {close}/>
-                    </div>
-                </div>
-            </div>
-        </div>
-    {/if}
-    <slot></slot>
-</div>