@getmicdrop/svelte-components 5.4.2 → 5.5.0

package/dist/recipes/modals/StatusModal.svelte

@@ -1,206 +1,206 @@
-<script>
-  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from "../../primitives/Icons";
-  import Button from "../../primitives/Button/Button.svelte";
-  import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import { typography } from '../../tokens/typography';
-
-  let {
-    show = $bindable(false),
-    size = "small",
-    title = "",
-    subtitle = "",
-    description = "",
-    buttonText = "Ok",
-    iconType = "success",
-    customIcon = null,
-    image = null,
-    disabled = false,
-    loading = false,
-    variant = null,
-    actions = [],
-    closeBtn = false,
-    onconfirm,
-    onclose,
-    ...restProps
-  } = $props();
-
-  let effectiveVariant = $derived(variant || iconType);
-  let isProfileMode = $derived(!!image);
-
-  const handleButtonClick = () => {
-    if (!disabled && !loading) {
-      onconfirm?.();
-      closeModal();
-    }
-  };
-
-  const handleAction = (action) => {
-    if (!disabled && !loading) {
-      action.onClick?.();
-      if (!action.keepOpen) {
-        closeModal();
-      }
-    }
-  };
-
-  const closeModal = () => {
-    show = false;
-    onclose?.();
-  };
-
-  const handleClose = () => {
-    if (disabled || loading) return;
-    closeModal();
-  };
-
-  const getActionVariant = (action) => {
-    if (action.variant) return action.variant;
-    const label = action.label.toLowerCase();
-    if (label.startsWith('delete') || label.startsWith('archive') || action.danger) {
-      return 'red';
-    }
-    if (label === 'continue' || label === 'finish' || label === 'done' || label === 'save & notify') {
-      return 'default';
-    }
-    return 'alternative';
-  };
-
-  const getIconColors = (type) => {
-    switch (type) {
-      case "success":
-        return {
-          bg: "bg-green-100 dark:bg-green-900/30",
-          icon: "text-green-600 dark:text-green-400",
-        };
-      case "error":
-        return {
-          bg: "bg-red-100 dark:bg-red-900/30",
-          icon: "text-red-600 dark:text-red-400",
-        };
-      case "warning":
-        return {
-          bg: "bg-amber-100 dark:bg-amber-900/30",
-          icon: "text-amber-600 dark:text-amber-400",
-        };
-      case "info":
-        return {
-          bg: "bg-blue-100 dark:bg-blue-900/30",
-          icon: "text-blue-600 dark:text-blue-400",
-        };
-      default:
-        return {
-          bg: "bg-green-100 dark:bg-green-900/30",
-          icon: "text-green-600 dark:text-green-400",
-        };
-    }
-  };
-
-  const getButtonVariant = (type) => {
-    switch (type) {
-      case "error":
-        return "red";
-      case "warning":
-        return "default";
-      default:
-        return "default";
-    }
-  };
-
-  let colors = $derived(getIconColors(effectiveVariant));
-  let buttonVariant = $derived(getButtonVariant(effectiveVariant));
-</script>
-
-<Modal bind:show {size} oncancel={handleClose} {...restProps}>
-  {#snippet header()}
-    <div class="text-center">
-      {#if closeBtn}
-        <div class="flex justify-end -mt-2 -mr-2 mb-2">
-          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
-            <img src={Cancel} alt="Close" class="w-5 h-5" />
-          </Button>
-        </div>
-      {/if}
-      {#if isProfileMode}
-        <div class="flex justify-center">
-          <img
-            src={image}
-            alt={title}
-            class="w-16 h-16 rounded-lg object-cover"
-          />
-        </div>
-        <div class="mt-4">
-          {#if title}
-            <h2 class={typography.h2}>{title}</h2>
-          {/if}
-          {#if subtitle}
-            <p class={`${typography.smMuted} mt-1`}>{subtitle}</p>
-          {/if}
-        </div>
-      {:else}
-        <div class="flex justify-center items-center">
-          {#if customIcon}
-            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
-              <img src={customIcon} alt="Status icon" class="w-8 h-8" />
-            </div>
-          {:else}
-            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
-              {#if effectiveVariant === "success"}
-                <CheckOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "error"}
-                <CloseOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "warning"}
-                <ExclamationTriangleOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "info"}
-                <InfoCircleOutline class="w-7 h-7 {colors.icon}" />
-              {/if}
-            </div>
-          {/if}
-        </div>
-        {#if title}
-          <h2 class={`${typography.h2} mt-4`}>{title}</h2>
-        {/if}
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="text-center mt-4">
-      {#if description}
-        <p class={`leading-relaxed ${isProfileMode ? `${typography.label}` : `${typography.smMuted}`}`}>
-          {description}
-        </p>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="w-full">
-      {#if actions.length > 0}
-        <div class="flex gap-3">
-          {#each actions as action}
-            <Button
-              size="full"
-              variant={getActionVariant(action)}
-              disabled={action.disabled || disabled}
-              loading={action.loading || (loading && action.primary)}
-              onclick={() => handleAction(action)}
-            >
-              {action.label}
-            </Button>
-          {/each}
-        </div>
-      {:else}
-        <Button
-          size="full"
-          variant={buttonVariant}
-          {disabled}
-          {loading}
-          onclick={handleButtonClick}
-        >
-          {buttonText}
-        </Button>
-      {/if}
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from "../../primitives/Icons";
+  import Button from "../../primitives/Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
+
+  let {
+    show = $bindable(false),
+    size = "small",
+    title = "",
+    subtitle = "",
+    description = "",
+    buttonText = "Ok",
+    iconType = "success",
+    customIcon = null,
+    image = null,
+    disabled = false,
+    loading = false,
+    variant = null,
+    actions = [],
+    closeBtn = false,
+    onconfirm,
+    onclose,
+    ...restProps
+  } = $props();
+
+  let effectiveVariant = $derived(variant || iconType);
+  let isProfileMode = $derived(!!image);
+
+  const handleButtonClick = () => {
+    if (!disabled && !loading) {
+      onconfirm?.();
+      closeModal();
+    }
+  };
+
+  const handleAction = (action) => {
+    if (!disabled && !loading) {
+      action.onClick?.();
+      if (!action.keepOpen) {
+        closeModal();
+      }
+    }
+  };
+
+  const closeModal = () => {
+    show = false;
+    onclose?.();
+  };
+
+  const handleClose = () => {
+    if (disabled || loading) return;
+    closeModal();
+  };
+
+  const getActionVariant = (action) => {
+    if (action.variant) return action.variant;
+    const label = action.label.toLowerCase();
+    if (label.startsWith('delete') || label.startsWith('archive') || action.danger) {
+      return 'red';
+    }
+    if (label === 'continue' || label === 'finish' || label === 'done' || label === 'save & notify') {
+      return 'default';
+    }
+    return 'alternative';
+  };
+
+  const getIconColors = (type) => {
+    switch (type) {
+      case "success":
+        return {
+          bg: "bg-green-100 dark:bg-green-900/30",
+          icon: "text-green-600 dark:text-green-400",
+        };
+      case "error":
+        return {
+          bg: "bg-red-100 dark:bg-red-900/30",
+          icon: "text-red-600 dark:text-red-400",
+        };
+      case "warning":
+        return {
+          bg: "bg-amber-100 dark:bg-amber-900/30",
+          icon: "text-amber-600 dark:text-amber-400",
+        };
+      case "info":
+        return {
+          bg: "bg-blue-100 dark:bg-blue-900/30",
+          icon: "text-blue-600 dark:text-blue-400",
+        };
+      default:
+        return {
+          bg: "bg-green-100 dark:bg-green-900/30",
+          icon: "text-green-600 dark:text-green-400",
+        };
+    }
+  };
+
+  const getButtonVariant = (type) => {
+    switch (type) {
+      case "error":
+        return "red";
+      case "warning":
+        return "default";
+      default:
+        return "default";
+    }
+  };
+
+  let colors = $derived(getIconColors(effectiveVariant));
+  let buttonVariant = $derived(getButtonVariant(effectiveVariant));
+</script>
+
+<Modal bind:show {size} oncancel={handleClose} {...restProps}>
+  {#snippet header()}
+    <div class="text-center">
+      {#if closeBtn}
+        <div class="flex justify-end -mt-2 -mr-2 mb-2">
+          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
+            <img src={Cancel} alt="Close" class="w-5 h-5" />
+          </Button>
+        </div>
+      {/if}
+      {#if isProfileMode}
+        <div class="flex justify-center">
+          <img
+            src={image}
+            alt={title}
+            class="w-16 h-16 rounded-lg object-cover"
+          />
+        </div>
+        <div class="mt-4">
+          {#if title}
+            <h2 class={typography.h2}>{title}</h2>
+          {/if}
+          {#if subtitle}
+            <p class={`${typography.smMuted} mt-1`}>{subtitle}</p>
+          {/if}
+        </div>
+      {:else}
+        <div class="flex justify-center items-center">
+          {#if customIcon}
+            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
+              <img src={customIcon} alt="Status icon" class="w-8 h-8" />
+            </div>
+          {:else}
+            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
+              {#if effectiveVariant === "success"}
+                <CheckOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "error"}
+                <CloseOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "warning"}
+                <ExclamationTriangleOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "info"}
+                <InfoCircleOutline class="w-7 h-7 {colors.icon}" />
+              {/if}
+            </div>
+          {/if}
+        </div>
+        {#if title}
+          <h2 class={`${typography.h2} mt-4`}>{title}</h2>
+        {/if}
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if description}
+        <p class={`leading-relaxed ${isProfileMode ? `${typography.label}` : `${typography.smMuted}`}`}>
+          {description}
+        </p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="w-full">
+      {#if actions.length > 0}
+        <div class="flex gap-3">
+          {#each actions as action}
+            <Button
+              size="full"
+              variant={getActionVariant(action)}
+              disabled={action.disabled || disabled}
+              loading={action.loading || (loading && action.primary)}
+              onclick={() => handleAction(action)}
+            >
+              {action.label}
+            </Button>
+          {/each}
+        </div>
+      {:else}
+        <Button
+          size="full"
+          variant={buttonVariant}
+          {disabled}
+          {loading}
+          onclick={handleButtonClick}
+        >
+          {buttonText}
+        </Button>
+      {/if}
+    </div>
+  {/snippet}
+</Modal>

package/dist/services/EventService.js

@@ -1,75 +1,75 @@
-import { addDays, startOfWeek } from "date-fns";
-
-let mockEvents = [];
-
-export async function fetchEventsFromAPI() {
-  try {
-    const response = await fetch("https://get-micdrop.com/api/public/getEventsForVenue");
-    if (response.ok) {
-      const events = await response.json();
-      return events.map((event) => ({
-        id: event.ID,
-        date: event.startDateTime,
-        title: event.title,
-      }));
-    } else {
-      console.error("Failed to load events:", response.status);
-      return [];
-    }
-  } catch (error) {
-    console.error("Error fetching events:", error);
-    return [];
-  }
-}
-
-export async function fetchEventsForMonth(year, month) {
-  mockEvents = await fetchEventsFromAPI();
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(
-        mockEvents.filter((event) =>
-          event.date.startsWith(`${year}-${String(month).padStart(2, "0")}`)
-        )
-      );
-    }, 500);
-  });
-}
-
-export async function fetchEventsForWeek(date) {
-  mockEvents = await fetchEventsFromAPI();
-
-  const startOfWeekDate = startOfWeek(date, { weekStartsOn: 1 });
-  const endOfWeekDate = addDays(startOfWeekDate, 6);
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const filteredEvents = mockEvents.filter((event) => {
-        const eventDate = new Date(event.date).getTime();
-        return (
-          eventDate >= startOfWeekDate.getTime() &&
-          eventDate <= endOfWeekDate.getTime()
-        );
-      });
-      resolve(filteredEvents);
-    }, 500);
-  });
-}
-
-export async function fetchEventsForDay(date) {
-  mockEvents = await fetchEventsFromAPI();
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const filteredEvents = mockEvents.filter((event) => {
-        const eventDate = new Date(event.date);
-        return (
-          eventDate.getUTCDate() === date.getUTCDate() &&
-          eventDate.getUTCMonth() === date.getUTCMonth() &&
-          eventDate.getUTCFullYear() === date.getUTCFullYear()
-        );
-      });
-      resolve(filteredEvents);
-    }, 500);
-  });
-}
+import { addDays, startOfWeek } from "date-fns";
+
+let mockEvents = [];
+
+export async function fetchEventsFromAPI() {
+  try {
+    const response = await fetch("https://get-micdrop.com/api/public/getEventsForVenue");
+    if (response.ok) {
+      const events = await response.json();
+      return events.map((event) => ({
+        id: event.ID,
+        date: event.startDateTime,
+        title: event.title,
+      }));
+    } else {
+      console.error("Failed to load events:", response.status);
+      return [];
+    }
+  } catch (error) {
+    console.error("Error fetching events:", error);
+    return [];
+  }
+}
+
+export async function fetchEventsForMonth(year, month) {
+  mockEvents = await fetchEventsFromAPI();
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(
+        mockEvents.filter((event) =>
+          event.date.startsWith(`${year}-${String(month).padStart(2, "0")}`)
+        )
+      );
+    }, 500);
+  });
+}
+
+export async function fetchEventsForWeek(date) {
+  mockEvents = await fetchEventsFromAPI();
+
+  const startOfWeekDate = startOfWeek(date, { weekStartsOn: 1 });
+  const endOfWeekDate = addDays(startOfWeekDate, 6);
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const filteredEvents = mockEvents.filter((event) => {
+        const eventDate = new Date(event.date).getTime();
+        return (
+          eventDate >= startOfWeekDate.getTime() &&
+          eventDate <= endOfWeekDate.getTime()
+        );
+      });
+      resolve(filteredEvents);
+    }, 500);
+  });
+}
+
+export async function fetchEventsForDay(date) {
+  mockEvents = await fetchEventsFromAPI();
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const filteredEvents = mockEvents.filter((event) => {
+        const eventDate = new Date(event.date);
+        return (
+          eventDate.getUTCDate() === date.getUTCDate() &&
+          eventDate.getUTCMonth() === date.getUTCMonth() &&
+          eventDate.getUTCFullYear() === date.getUTCFullYear()
+        );
+      });
+      resolve(filteredEvents);
+    }, 500);
+  });
+}