From b68d3fca75c68165c8e6e682127aa7b295f9ef63 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sat, 24 Sep 2022 15:36:27 +0800
Subject: feat: Migrate alert to tailwind markup

---
 apps/kit/src/lib/components/alert.svelte           | 188 ++++++++++++++-------
 .../src/lib/components/icons/adjustments.svelte    |  19 ++-
 .../src/lib/components/icons/check-circle.svelte   |  13 ++
 apps/kit/src/lib/components/icons/database.svelte  |  17 +-
 .../components/icons/exclamation-triangle.svelte   |  13 ++
 apps/kit/src/lib/components/icons/home.svelte      |  19 ++-
 apps/kit/src/lib/components/icons/index.ts         |  13 +-
 .../lib/components/icons/information-circle.svelte |  13 ++
 apps/kit/src/lib/components/icons/menu.svelte      |  16 +-
 apps/kit/src/lib/components/icons/x-circle.svelte  |  13 ++
 apps/kit/src/lib/components/icons/x-mark.svelte    |  11 ++
 apps/kit/src/lib/components/icons/x.svelte         |  18 +-
 12 files changed, 274 insertions(+), 79 deletions(-)
 create mode 100644 apps/kit/src/lib/components/icons/check-circle.svelte
 create mode 100644 apps/kit/src/lib/components/icons/exclamation-triangle.svelte
 create mode 100644 apps/kit/src/lib/components/icons/information-circle.svelte
 create mode 100644 apps/kit/src/lib/components/icons/x-circle.svelte
 create mode 100644 apps/kit/src/lib/components/icons/x-mark.svelte

(limited to 'apps')

diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index 4a5c7ea..87962cf 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
-    import { random_string } from "$shared/lib/helpers";
-    import { afterUpdate, onMount } from "svelte";
+    import { random_string } from "$lib/helpers";
+    import { createEventDispatcher } from "svelte";
+    import { onMount } from "svelte";
     import { Temporal } from "temporal-polyfill";
+    import {
+        ExclamationTriangle,
+        CheckCircle,
+        InformationCircle,
+        XCircle,
+        XMark,
+    } from "./icons";
 
     const noCooldownSetting = "no-cooldown";
     // if no unique id is supplied, cooldown will not work between page loads.
@@ -9,12 +17,48 @@
     export let id = "alert--" + noCooldownSetting + "--" + random_string(4);
     export let title = "";
     export let message = "";
-    export let type = "info";
+    export let type: "info" | "success" | "warning" | "error" = "info";
     export let closeable = false;
     export let closeableCooldown = "-1";
+    export let rightLinkText = "";
+    export let listItems: Array<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 right-link-click if you want to intercept the click without navigating
+    export let rightLinkHref = "javascript:void(0)";
     export let visible = true;
 
+    const dispatch = createEventDispatcher();
+
     const cooldownStorageKey = "lastseen--" + id;
+
+    let iconComponent: any;
+    let colorClassPart = "";
+
+    $: switch (type) {
+        case "info": {
+            colorClassPart = "blue";
+            iconComponent = InformationCircle;
+            break;
+        }
+        case "warning": {
+            colorClassPart = "yellow";
+            iconComponent = ExclamationTriangle;
+            break;
+        }
+        case "error": {
+            colorClassPart = "red";
+            iconComponent = XCircle;
+            break;
+        }
+        case "success": {
+            colorClassPart = "green";
+            iconComponent = CheckCircle;
+            break;
+        }
+    }
+
     $: cooldownEnabled =
         id.indexOf(noCooldownSetting) === -1 &&
         closeable &&
@@ -59,7 +103,7 @@
         }
 
         const lastSeen = Temporal.Instant.fromEpochSeconds(
-            localStorage.getItem(cooldownStorageKey) as number
+            parseInt(localStorage.getItem(cooldownStorageKey) ?? "-1")
         );
         if (
             Temporal.Instant.compare(
@@ -87,63 +131,93 @@
             run_cooldown();
         }
     });
-
-    afterUpdate(() => {
-        if (type === "default") {
-            type = "primary";
-        }
-    });
 </script>
 
-<div
-    class="alert alert--{type} padding-sm radius-md"
-    {id}
-    class:alert--is-visible={visible}
-    role="alert"
->
-    <div class="flex justify-between">
-        <div class="flex flex-row items-center">
-            <svg
-                class="icon icon--sm alert__icon margin-right-xxs"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-            >
-                <path
-                    d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M14.658,18.284 c-0.661,0.26-2.952,1.354-4.272,0.191c-0.394-0.346-0.59-0.785-0.59-1.318c0-0.998,0.328-1.868,0.919-3.957 c0.104-0.395,0.231-0.907,0.231-1.313c0-0.701-0.266-0.887-0.987-0.887c-0.352,0-0.742,0.125-1.095,0.257l0.195-0.799 c0.787-0.32,1.775-0.71,2.621-0.71c1.269,0,2.203,0.633,2.203,1.837c0,0.347-0.06,0.955-0.186,1.375l-0.73,2.582 c-0.151,0.522-0.424,1.673-0.001,2.014c0.416,0.337,1.401,0.158,1.887-0.071L14.658,18.284z M13.452,8c-0.828,0-1.5-0.672-1.5-1.5 s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S14.28,8,13.452,8z"
+{#if visible}
+    <div class="rounded-md bg-{colorClassPart}-50 p-4 ">
+        <div class="flex">
+            <div class="flex-shrink-0">
+                <svelte:component
+                    this={iconComponent}
+                    class="text-{colorClassPart}-400"
                 />
-            </svg>
-            {#if title}
-                <p class="text-sm">
-                    <strong class="error-title">{title}</strong>
-                </p>
-            {:else if message}
-                <div class="text-component text-sm break-word">
-                    {@html message}
+            </div>
+            <div class="ml-3">
+                {#if title}
+                    <h3 class="text-sm font-medium text-{colorClassPart}-800">
+                        {title}
+                    </h3>
+                {/if}
+                {#if message}
+                    <div
+                        class="{title
+                            ? 'mt-2 text-sm'
+                            : ''} text-{colorClassPart}-700"
+                    >
+                        <p>
+                            {@html message}
+                            {#if rightLinkText}
+                                <p class="mt-3 text-sm md:mt-0 md:ml-6">
+                                    <a
+                                        href={rightLinkHref}
+                                        on:click={() =>
+                                            dispatch("right-link-click")}
+                                        class="whitespace-nowrap font-medium text-{colorClassPart}-700 hover:text-{colorClassPart}-600"
+                                    >
+                                        {rightLinkText}
+                                        <span aria-hidden="true"> &rarr;</span>
+                                    </a>
+                                </p>
+                            {/if}
+                        </p>
+                        {#if listItems?.length ?? 0}
+                            <ul class="list-disc space-y-1 pl-5">
+                                {#each listItems as listItem}
+                                    <li>{listItem}</li>
+                                {/each}
+                            </ul>
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+            {#if actions?.length ?? 0}
+                <div class="mt-4">
+                    <div class="-mx-2 -my-1.5 flex">
+                        {#each actions as action}
+                            {@const color = action?.color ?? colorClassPart}
+                            <button
+                                type="button"
+                                on:click={() => dispatch("act-" + action.id)}
+                                class="rounded-md
+                            bg-{color}-50
+                            px-2 py-1.5 text-sm font-medium
+                            text-{color}-800
+                            hover:bg-{color}-100
+                            focus:outline-none focus:ring-2
+                            focus:ring-{color}-600
+                            focus:ring-offset-2
+                            focus:ring-offset-{color}-50"
+                            >
+                                {action.text}
+                            </button>
+                        {/each}
+                    </div>
+                </div>
+            {/if}
+            {#if closeable}
+                <div class="ml-auto pl-3">
+                    <div class="-mx-1.5 -my-1.5">
+                        <button
+                            type="button"
+                            on:click={() => close()}
+                            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 />
+                        </button>
+                    </div>
                 </div>
             {/if}
         </div>
-        {#if closeable}
-            <button class="reset alert__close-btn" on:click={close}>
-                <svg
-                    class="icon"
-                    viewBox="0 0 20 20"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                >
-                    <title>Close alert</title>
-                    <line x1="3" y1="3" x2="17" y2="17" />
-                    <line x1="17" y1="3" x2="3" y2="17" />
-                </svg>
-            </button>
-        {/if}
     </div>
-
-    {#if message && title}
-        <div class="text-component text-sm break-word padding-top-xs">
-            {@html message}
-        </div>
-    {/if}
-</div>
+{/if}
diff --git a/apps/kit/src/lib/components/icons/adjustments.svelte b/apps/kit/src/lib/components/icons/adjustments.svelte
index b6d3f4d..83bda27 100644
--- a/apps/kit/src/lib/components/icons/adjustments.svelte
+++ b/apps/kit/src/lib/components/icons/adjustments.svelte
@@ -1,5 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class??''}" fill="none" viewBox="0 0 24 24"
-     stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round"
-          d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
-</svg>
\ No newline at end of file
+<svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6 {$$restProps.class ?? ''}"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+>
+      <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+      />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/check-circle.svelte b/apps/kit/src/lib/components/icons/check-circle.svelte
new file mode 100644
index 0000000..e30778e
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/check-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/database.svelte b/apps/kit/src/lib/components/icons/database.svelte
index 05c70ed..6ffdadb 100644
--- a/apps/kit/src/lib/components/icons/database.svelte
+++ b/apps/kit/src/lib/components/icons/database.svelte
@@ -1,3 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class ?? ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-</svg>
\ No newline at end of file
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6 {$$restProps.class ?? ''}"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
+    />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/exclamation-triangle.svelte b/apps/kit/src/lib/components/icons/exclamation-triangle.svelte
new file mode 100644
index 0000000..8d807db
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/exclamation-triangle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M8.485 3.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 3.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/home.svelte b/apps/kit/src/lib/components/icons/home.svelte
index cc49c4d..ee8305d 100644
--- a/apps/kit/src/lib/components/icons/home.svelte
+++ b/apps/kit/src/lib/components/icons/home.svelte
@@ -1,5 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class ?? ''}" fill="none" viewBox="0 0 24 24"
-     stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round"
-          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
-</svg>
\ No newline at end of file
+<svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6 {$$restProps.class ?? ''}"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+>
+      <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+      />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/index.ts b/apps/kit/src/lib/components/icons/index.ts
index d3abf24..9b0fb7e 100644
--- a/apps/kit/src/lib/components/icons/index.ts
+++ b/apps/kit/src/lib/components/icons/index.ts
@@ -3,11 +3,20 @@ import MenuIcon from "./menu.svelte";
 import AdjustmentsIcon from "./adjustments.svelte";
 import DatabaseIcon from "./database.svelte";
 import HomeIcon from "./home.svelte";
-
+import InformationCircle from "./information-circle.svelte";
+import ExclamationTriangle from "./exclamation-triangle.svelte";
+import XCircle from "./x-circle.svelte";
+import CheckCircle from "./check-circle.svelte";
+import XMark from "./x-mark.svelte";
 export {
     XIcon,
     MenuIcon,
     HomeIcon,
     DatabaseIcon,
-    AdjustmentsIcon
+    AdjustmentsIcon,
+    InformationCircle,
+    ExclamationTriangle,
+    XCircle,
+    CheckCircle,
+    XMark
 }
\ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/information-circle.svelte b/apps/kit/src/lib/components/icons/information-circle.svelte
new file mode 100644
index 0000000..68dbc60
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/information-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/menu.svelte b/apps/kit/src/lib/components/icons/menu.svelte
index 12a68a5..471d85f 100644
--- a/apps/kit/src/lib/components/icons/menu.svelte
+++ b/apps/kit/src/lib/components/icons/menu.svelte
@@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class ?? ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-     stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6 {$$restProps.class ?? ''}"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4 6h16M4 12h16M4 18h16"
+    />
 </svg>
diff --git a/apps/kit/src/lib/components/icons/x-circle.svelte b/apps/kit/src/lib/components/icons/x-circle.svelte
new file mode 100644
index 0000000..3793b5a
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/x-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/x-mark.svelte b/apps/kit/src/lib/components/icons/x-mark.svelte
new file mode 100644
index 0000000..fd1c6a1
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/x-mark.svelte
@@ -0,0 +1,11 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+    />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/x.svelte b/apps/kit/src/lib/components/icons/x.svelte
index c7e05a8..6125ab8 100644
--- a/apps/kit/src/lib/components/icons/x.svelte
+++ b/apps/kit/src/lib/components/icons/x.svelte
@@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class ?? ''}" fill="none" viewBox="0 0 24 24"
-     stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
-</svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="h-6 w-6 {$$restProps.class ?? ''}"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+  stroke-width="2"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M6 18L18 6M6 6l12 12"
+  />
+</svg>
-- 
cgit v1.3