From 70347722fa1f959a5b224ed43b6b64bf289f36cf Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 2 Oct 2022 17:35:06 +0800
Subject: feat/refactor: Initial surroundings for (app) and normalise icon
 names

---
 apps/kit/src/lib/components/alert.svelte | 96 ++++++++------------------------
 1 file changed, 22 insertions(+), 74 deletions(-)

(limited to 'apps/kit/src/lib/components/alert.svelte')

diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index fa36a63..31e7357 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -3,13 +3,7 @@
     import { createEventDispatcher } from "svelte";
     import { onMount } from "svelte";
     import { Temporal } from "temporal-polyfill";
-    import {
-        ExclamationTriangle,
-        CheckCircle,
-        InformationCircle,
-        XCircle,
-        XMark,
-    } from "./icons";
+    import { ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XCircleIcon, XMarkIcon } from "./icons";
 
     const dispatch = createEventDispatcher();
     const noCooldownSetting = "no-cooldown";
@@ -58,46 +52,40 @@
      * Text is the button text
      * Color is the optional tailwind color to used, the value is used in classes like bg-$color-50.
      */
-    export let actions: Array<{ id: string; text: string; color?: string }> =
-        [];
+    export let actions: Array<{ id: string; text: string; color?: string }> = [];
     /**
      * This value is set on a plain anchor tag without any svelte routing,
      * listen to the on:rightLinkClick if you want to intercept the click without navigating
      */
     export let rightLinkHref = "javascript:void(0)";
     $: cooldownEnabled =
-        id.indexOf(noCooldownSetting) === -1 &&
-        closeable &&
-        (closeableCooldown === "~" || parseInt(closeableCooldown) > 0);
+        id.indexOf(noCooldownSetting) === -1 && closeable && (closeableCooldown === "~" || parseInt(closeableCooldown) > 0);
     /**
      * Sets this alerts visibility state, when this is false it is removed from the dom using svelte a {#if} block.
      */
-    export let visible =
-        closeableCooldown === "~" || parseInt(closeableCooldown) > 0
-            ? false
-            : true;
+    export let visible = closeableCooldown === "~" || parseInt(closeableCooldown) > 0 ? false : true;
 
     const cooldownStorageKey = "lastseen--" + id;
 
     $: switch (type) {
         case "info": {
             colorClassPart = "blue";
-            iconComponent = InformationCircle;
+            iconComponent = InformationCircleIcon;
             break;
         }
         case "warning": {
             colorClassPart = "yellow";
-            iconComponent = ExclamationTriangle;
+            iconComponent = ExclamationTriangleIcon;
             break;
         }
         case "error": {
             colorClassPart = "red";
-            iconComponent = XCircle;
+            iconComponent = XCircleIcon;
             break;
         }
         case "success": {
             colorClassPart = "green";
-            iconComponent = CheckCircle;
+            iconComponent = CheckCircleIcon;
             break;
         }
     }
@@ -105,15 +93,8 @@
     function close() {
         visible = false;
         if (cooldownEnabled) {
-            console.log(
-                "Cooldown enabled for " + id + ", " + closeableCooldown === "~"
-                    ? "with an endless cooldown"
-                    : ""
-            );
-            localStorage.setItem(
-                cooldownStorageKey,
-                String(Temporal.Now.instant().epochSeconds)
-            );
+            console.log("Cooldown enabled for " + id + ", " + closeableCooldown === "~" ? "with an endless cooldown" : "");
+            localStorage.setItem(cooldownStorageKey, String(Temporal.Now.instant().epochSeconds));
         }
     }
 
@@ -148,15 +129,8 @@
             return;
         }
 
-        const lastSeen = Temporal.Instant.fromEpochSeconds(
-            parseInt(localStorage.getItem(cooldownStorageKey) ?? "-1")
-        );
-        if (
-            Temporal.Instant.compare(
-                Temporal.Now.instant(),
-                lastSeen.add({ seconds: parseInt(closeableCooldown) })
-            ) === 1
-        ) {
+        const lastSeen = Temporal.Instant.fromEpochSeconds(parseInt(localStorage.getItem(cooldownStorageKey) ?? "-1"));
+        if (Temporal.Instant.compare(Temporal.Now.instant(), lastSeen.add({ seconds: parseInt(closeableCooldown) })) === 1) {
             console.log(
                 "Alert " +
                     id +
@@ -177,31 +151,19 @@
             run_cooldown();
         }
 
-        if (
-            closeable &&
-            closeableCooldown &&
-            id.indexOf(noCooldownSetting) !== -1
-        ) {
+        if (closeable && closeableCooldown && id.indexOf(noCooldownSetting) !== -1) {
             // TODO: This prints twice before shutting up as it should, in this example look at the only alert with closeableCooldown in alertsbook.
             // Looks like svelte mounts three times and that my id is only set on the third. Not sure it does at all after logging the id onMount.
-            console.error(
-                "Alert cooldown does not work without specifying a unique id, related id: " +
-                    id
-            );
+            console.error("Alert cooldown does not work without specifying a unique id, related id: " + id);
         }
     });
 </script>
 
 {#if visible}
-    <div
-        class="rounded-md bg-{colorClassPart}-50 p-4 {$$restProps.class ?? ''}"
-    >
+    <div class="rounded-md bg-{colorClassPart}-50 p-4 {$$restProps.class ?? ''}">
         <div class="flex">
             <div class="flex-shrink-0">
-                <svelte:component
-                    this={iconComponent}
-                    class="text-{colorClassPart}-400"
-                />
+                <svelte:component this={iconComponent} class="text-{colorClassPart}-400" />
             </div>
             <div class="ml-3 text-sm w-full">
                 {#if !rightLinkText}
@@ -211,20 +173,14 @@
                         </h3>
                     {/if}
                     {#if message}
-                        <div
-                            class="{title
-                                ? 'mt-2'
-                                : ''} text-{colorClassPart}-700 justify-start"
-                        >
+                        <div class="{title ? 'mt-2' : ''} text-{colorClassPart}-700 justify-start">
                             <p>
                                 {@html message}
                             </p>
                         </div>
                     {/if}
                     {#if listItems?.length ?? 0}
-                        <ul
-                            class="list-disc space-y-1 pl-5 text-{colorClassPart}-700"
-                        >
+                        <ul class="list-disc space-y-1 pl-5 text-{colorClassPart}-700">
                             {#each listItems as listItem}
                                 <li>{listItem}</li>
                             {/each}
@@ -234,27 +190,19 @@
                     <div class="flex-1 md:flex md:justify-between">
                         <div>
                             {#if title}
-                                <h3
-                                    class="font-medium text-{colorClassPart}-800"
-                                >
+                                <h3 class="font-medium text-{colorClassPart}-800">
                                     {title}
                                 </h3>
                             {/if}
                             {#if message}
-                                <div
-                                    class="{title
-                                        ? 'mt-2'
-                                        : ''} text-{colorClassPart}-700 justify-start"
-                                >
+                                <div class="{title ? 'mt-2' : ''} text-{colorClassPart}-700 justify-start">
                                     <p>
                                         {@html message}
                                     </p>
                                 </div>
                             {/if}
                             {#if listItems?.length ?? 0}
-                                <ul
-                                    class="list-disc space-y-1 pl-5 text-{colorClassPart}-700"
-                                >
+                                <ul class="list-disc space-y-1 pl-5 text-{colorClassPart}-700">
                                     {#each listItems as listItem}
                                         <li>{listItem}</li>
                                     {/each}
@@ -307,7 +255,7 @@
                             class="inline-flex rounded-md bg-{colorClassPart}-50 p-1.5 text-{colorClassPart}-500 hover:bg-{colorClassPart}-100 focus:outline-none focus:ring-2 focus:ring-{colorClassPart}-600 focus:ring-offset-2 focus:ring-offset-{colorClassPart}-50"
                         >
                             <span class="sr-only">Dismiss</span>
-                            <XMark />
+                            <XMarkIcon />
                         </button>
                     </div>
                 </div>
-- 
cgit v1.3