@getmicdrop/svelte-components 1.0.2 → 1.0.4

package/dist/components/DarkModeToggle.spec.js

@@ -0,0 +1,357 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi, beforeEach, afterEach } from "vitest";
+import DarkModeToggle from "./DarkModeToggle.svelte";
+
+// Mock localStorage
+const localStorageMock = {
+  store: {},
+  getItem: vi.fn((key) => localStorageMock.store[key] || null),
+  setItem: vi.fn((key, value) => {
+    localStorageMock.store[key] = value;
+  }),
+  removeItem: vi.fn((key) => {
+    delete localStorageMock.store[key];
+  }),
+  clear: vi.fn(() => {
+    localStorageMock.store = {};
+  }),
+};
+
+// Mock matchMedia
+const matchMediaMock = vi.fn((query) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+}));
+
+function setupTest() {
+  const user = userEvent.setup();
+  const { component, container } = render(DarkModeToggle);
+  return { user, component, container };
+}
+
+describe("DarkModeToggle Component Tests", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
+    // Reset any dark class
+    document.documentElement.classList.remove("dark");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("Renders toggle button", () => {
+    setupTest();
+    const button = screen.getByRole("button", { name: /toggle theme/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  test("Has aria-label for accessibility", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("aria-label", "Toggle theme");
+  });
+
+  test("Has title attribute for tooltip", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("title");
+  });
+
+  test("Contains sun icon SVG", () => {
+    const { container } = setupTest();
+    const sunIcon = container.querySelector(".sun-icon");
+    expect(sunIcon).toBeInTheDocument();
+  });
+
+  test("Contains moon icon SVG", () => {
+    const { container } = setupTest();
+    const moonIcon = container.querySelector(".moon-icon");
+    expect(moonIcon).toBeInTheDocument();
+  });
+
+  test("Contains auto icon container", () => {
+    const { container } = setupTest();
+    const autoIcon = container.querySelector(".auto-icon-container");
+    expect(autoIcon).toBeInTheDocument();
+  });
+
+  test("Auto icon is visible in auto mode (default)", () => {
+    const { container } = setupTest();
+    const autoIcon = container.querySelector(".auto-icon-container");
+    expect(autoIcon).toBeInTheDocument();
+  });
+
+  test("Sun and moon icons are hidden in auto mode", () => {
+    const { container } = setupTest();
+    const sunIcon = container.querySelector(".sun-icon");
+    const moonIcon = container.querySelector(".moon-icon");
+    expect(sunIcon).toHaveClass("hidden");
+    expect(moonIcon).toHaveClass("hidden");
+  });
+
+  test("Button has theme-toggle-btn class", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("theme-toggle-btn");
+  });
+
+  test("Button has focus outline removed", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("focus:outline-none");
+  });
+
+  test("Button blurs after touch to remove focus state", async () => {
+    setupTest();
+    const button = screen.getByRole("button");
+
+    // Simulate touchend
+    const blurSpy = vi.spyOn(button, "blur");
+    fireEvent.touchEnd(button);
+
+    expect(blurSpy).toHaveBeenCalled();
+  });
+
+  test("SVG icons have correct dimensions", () => {
+    const { container } = setupTest();
+    const sunIconSvg = container.querySelector(".sun-icon svg");
+    const moonIconSvg = container.querySelector(".moon-icon svg");
+
+    expect(sunIconSvg).toHaveAttribute("width", "20");
+    expect(sunIconSvg).toHaveAttribute("height", "20");
+    expect(moonIconSvg).toHaveAttribute("width", "20");
+    expect(moonIconSvg).toHaveAttribute("height", "20");
+  });
+
+  test("Sun icon has correct class for color", () => {
+    const { container } = setupTest();
+    const sunIcon = container.querySelector(".sun-icon");
+    expect(sunIcon).toHaveClass("sun-icon");
+  });
+
+  test("Moon icon has correct class for color", () => {
+    const { container } = setupTest();
+    const moonIcon = container.querySelector(".moon-icon");
+    expect(moonIcon).toHaveClass("moon-icon");
+  });
+
+  test("Auto icon container has correct class", () => {
+    const { container } = setupTest();
+    const autoIcon = container.querySelector(".auto-icon-container");
+    expect(autoIcon).toHaveClass("auto-icon-container");
+  });
+});
+
+describe("DarkModeToggle 3-State Cycle", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
+    document.documentElement.classList.remove("dark");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("First click: auto -> light, saves 'light' to localStorage", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    await user.click(button);
+
+    expect(localStorageMock.setItem).toHaveBeenCalledWith("theme", "light");
+  });
+
+  test("Second click: light -> dark, saves 'dark' to localStorage", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // First click: auto -> light
+    await user.click(button);
+    // Second click: light -> dark
+    await user.click(button);
+
+    expect(localStorageMock.setItem).toHaveBeenLastCalledWith("theme", "dark");
+  });
+
+  test("Third click: dark -> auto, removes theme from localStorage", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // First click: auto -> light
+    await user.click(button);
+    // Second click: light -> dark
+    await user.click(button);
+    // Third click: dark -> auto
+    await user.click(button);
+
+    expect(localStorageMock.removeItem).toHaveBeenCalledWith("theme");
+  });
+
+  test("Full cycle: auto -> light -> dark -> auto", async () => {
+    const { user, container } = setupTest();
+    const button = screen.getByRole("button");
+
+    // Initially auto - auto icon container should exist
+    expect(container.querySelector(".auto-icon-container")).toBeInTheDocument();
+
+    // Click 1: auto -> light
+    await user.click(button);
+    expect(container.querySelector(".sun-icon")).not.toHaveClass("hidden");
+    expect(container.querySelector(".auto-icon-container")).not.toBeInTheDocument();
+
+    // Click 2: light -> dark
+    await user.click(button);
+    expect(container.querySelector(".moon-icon")).not.toHaveClass("hidden");
+    expect(container.querySelector(".sun-icon")).toHaveClass("hidden");
+
+    // Click 3: dark -> auto
+    await user.click(button);
+    expect(container.querySelector(".auto-icon-container")).toBeInTheDocument();
+    expect(container.querySelector(".moon-icon")).toHaveClass("hidden");
+  });
+
+  test("Dark class applied when switching to dark mode", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // auto -> light
+    await user.click(button);
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+
+    // light -> dark
+    await user.click(button);
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+
+  test("Dark class removed when switching back to light", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // auto -> light -> dark
+    await user.click(button);
+    await user.click(button);
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+    // dark -> auto (system is light by default in mock)
+    await user.click(button);
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+});
+
+describe("DarkModeToggle Initial State", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
+    document.documentElement.classList.remove("dark");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("Initializes to auto mode when no localStorage value", () => {
+    const { container } = setupTest();
+    const autoIcon = container.querySelector(".auto-icon-container");
+    expect(autoIcon).toBeInTheDocument();
+  });
+
+  test("Initializes to dark mode when localStorage has 'dark'", () => {
+    localStorageMock.store.theme = "dark";
+    const { container } = setupTest();
+    const moonIcon = container.querySelector(".moon-icon");
+    expect(moonIcon).not.toHaveClass("hidden");
+  });
+
+  test("Initializes to light mode when localStorage has 'light'", () => {
+    localStorageMock.store.theme = "light";
+    const { container } = setupTest();
+    const sunIcon = container.querySelector(".sun-icon");
+    expect(sunIcon).not.toHaveClass("hidden");
+  });
+
+  test("Reads from localStorage on mount", () => {
+    localStorageMock.store.theme = "dark";
+    setupTest();
+    expect(localStorageMock.getItem).toHaveBeenCalledWith("theme");
+  });
+
+  test("Checks system preference for auto mode", () => {
+    setupTest();
+    expect(matchMediaMock).toHaveBeenCalledWith("(prefers-color-scheme: dark)");
+  });
+
+  test("Auto mode follows system dark preference", () => {
+    matchMediaMock.mockReturnValue({
+      matches: true, // System prefers dark
+      media: "(prefers-color-scheme: dark)",
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    setupTest();
+    // In auto mode with system dark preference, dark class should be applied
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+
+  test("Auto mode follows system light preference", () => {
+    matchMediaMock.mockReturnValue({
+      matches: false, // System prefers light
+      media: "(prefers-color-scheme: dark)",
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    setupTest();
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+});
+
+describe("DarkModeToggle Title/Tooltip", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
+    document.documentElement.classList.remove("dark");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("Shows correct title in auto mode", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button.title).toContain("Auto");
+    expect(button.title).toContain("light mode");
+  });
+
+  test("Shows correct title in light mode", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    await user.click(button); // auto -> light
+    expect(button.title).toContain("Light mode");
+    expect(button.title).toContain("dark mode");
+  });
+
+  test("Shows correct title in dark mode", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    await user.click(button); // auto -> light
+    await user.click(button); // light -> dark
+    expect(button.title).toContain("Dark mode");
+    expect(button.title).toContain("auto");
+  });
+});

package/dist/components/DarkModeToggle.stories.svelte

@@ -0,0 +1,55 @@
+<script context="module">
+  import DarkModeToggle from './DarkModeToggle.svelte';
+
+  export const meta = {
+    title: 'Components/DarkModeToggle',
+    component: DarkModeToggle,
+    tags: ['autodocs'],
+  };
+</script>
+
+<script>
+  import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="Default">
+  <div class="flex flex-col gap-4 p-4">
+    <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
+    <p class="text-sm text-gray-600 dark:text-gray-400">
+      Cycles through: Auto → Light → Dark → Auto
+    </p>
+    <DarkModeToggle />
+    <p class="text-xs text-gray-500">
+      Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
+    </p>
+  </div>
+</Story>
+
+<Story name="In Header">
+  <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
+    <div class="flex items-center justify-between">
+      <h2 class="text-xl font-bold text-gray-900 dark:text-white">Application Header</h2>
+      <DarkModeToggle />
+    </div>
+  </div>
+</Story>
+
+<Story name="Theme States Demo">
+  <div class="space-y-4 p-4">
+    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+        Current Theme Demo
+      </h3>
+      <p class="text-gray-600 dark:text-gray-300 mb-4">
+        This content changes appearance based on the selected theme mode.
+      </p>
+      <DarkModeToggle />
+    </div>
+
+    <div class="text-sm text-gray-500 dark:text-gray-400">
+      <p><strong>Auto Mode:</strong> Follows system preferences</p>
+      <p><strong>Light Mode:</strong> Forces light theme</p>
+      <p><strong>Dark Mode:</strong> Forces dark theme</p>
+    </div>
+  </div>
+</Story>

package/dist/components/DarkModeToggle.stories.svelte.d.ts

@@ -0,0 +1,32 @@
+export namespace meta {
+    export let title: string;
+    export { DarkModeToggle as component };
+    export let tags: string[];
+}
+/** @typedef {typeof __propDef.props}  DarkModeToggleProps */
+/** @typedef {typeof __propDef.events}  DarkModeToggleEvents */
+/** @typedef {typeof __propDef.slots}  DarkModeToggleSlots */
+export default class DarkModeToggle extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DarkModeToggleProps = typeof __propDef.props;
+export type DarkModeToggleEvents = typeof __propDef.events;
+export type DarkModeToggleSlots = typeof __propDef.slots;
+import DarkModeToggle from './DarkModeToggle.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=DarkModeToggle.stories.svelte.d.ts.map

package/dist/components/DarkModeToggle.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkModeToggle.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DarkModeToggle.stories.svelte.js"],"names":[],"mappings":";;;;;AAiEA,6DAA6D;AAC7D,+DAA+D;AAC/D,6DAA6D;AAE7D;;;;;CACC;kCALa,OAAO,SAAS,CAAC,KAAK;mCACtB,OAAO,SAAS,CAAC,MAAM;kCACvB,OAAO,SAAS,CAAC,KAAK;2BAhEP,yBAAyB;gCAHtB,QAAQ;AAgExC;;;;;;;;;;EAAgF"}

package/dist/components/DarkModeToggle.svelte

@@ -0,0 +1,245 @@
+<script>
+  import { onMount } from 'svelte';
+  import SunIcon from './Icons/SunIcon.svelte';
+  import MoonIcon from './Icons/MoonIcon.svelte';
+
+  // Theme mode: 'auto' | 'light' | 'dark'
+  let themeMode = 'auto';
+  let isDark = false; // Current display state (for applying classes)
+
+  function setMicdropDarkClass(enable) {
+    // In performers portal, we target .performer-portal and html
+    const container = document.querySelector('.performer-portal');
+    if (enable) {
+      if (container) container.classList.add('dark');
+      document.documentElement.classList.add('dark');
+    } else {
+      if (container) container.classList.remove('dark');
+      document.documentElement.classList.remove('dark');
+    }
+  }
+
+  function getSystemPreference() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  function applyTheme() {
+    if (themeMode === 'auto') {
+      isDark = getSystemPreference();
+    } else {
+      isDark = themeMode === 'dark';
+    }
+    setMicdropDarkClass(isDark);
+  }
+
+  onMount(() => {
+    // Check localStorage for saved theme
+    const savedTheme = localStorage.getItem('theme');
+
+    if (savedTheme === 'dark' || savedTheme === 'light') {
+      themeMode = savedTheme;
+    } else {
+      // No saved preference or 'auto' = auto mode
+      themeMode = 'auto';
+    }
+
+    applyTheme();
+
+    // Listen for system preference changes (only matters in auto mode)
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (themeMode === 'auto') {
+        applyTheme();
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  });
+
+  function toggleTheme(event) {
+    // Cycle: auto -> light -> dark -> auto
+    if (themeMode === 'auto') {
+      themeMode = 'light';
+      localStorage.setItem('theme', 'light');
+    } else if (themeMode === 'light') {
+      themeMode = 'dark';
+      localStorage.setItem('theme', 'dark');
+    } else {
+      themeMode = 'auto';
+      localStorage.removeItem('theme');
+    }
+
+    applyTheme();
+
+    // Immediately blur the button to remove focus state on mobile
+    if (event && event.currentTarget) {
+      event.currentTarget.blur();
+    }
+  }
+
+  // Tooltip text based on current mode
+  $: titleText = themeMode === 'auto'
+    ? 'Auto theme (following device) - click for light mode'
+    : themeMode === 'light'
+    ? 'Light mode - click for dark mode'
+    : 'Dark mode - click for auto';
+</script>
+
+<button
+  on:click={toggleTheme}
+  on:touchend={(e) => e.currentTarget.blur()}
+  class="theme-toggle-btn focus:outline-none"
+  aria-label="Toggle theme"
+  title={titleText}
+>
+  <!-- Sun icon - shown when mode is 'light' -->
+  <span class="theme-icon sun-icon" class:hidden={themeMode !== 'light'}>
+    <SunIcon size="20" color="currentColor" />
+  </span>
+
+  <!-- Moon icon - shown when mode is 'dark' -->
+  <span class="theme-icon moon-icon" class:hidden={themeMode !== 'dark'}>
+    <MoonIcon size="20" color="currentColor" />
+  </span>
+
+  <!-- Auto icon container - shown when mode is 'auto' -->
+  {#if themeMode === 'auto'}
+    <div class="auto-icon-container">
+      <!-- Light half (top-left) with sun -->
+      <div class="auto-half auto-light-half">
+        <SunIcon size="12" color="#f59e0b" />
+      </div>
+      <!-- Dark half (bottom-right) with moon -->
+      <div class="auto-half auto-dark-half">
+        <MoonIcon size="12" color="white" />
+      </div>
+    </div>
+  {/if}
+</button>
+
+<style>
+  .theme-toggle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    border: 1.5px solid rgb(229 231 235);
+    background-color: white;
+    color: rgb(17 24 39);
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    position: relative;
+    overflow: hidden;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+         user-select: none;
+  }
+
+  .theme-toggle-btn:focus,
+  .theme-toggle-btn:focus-visible,
+  .theme-toggle-btn:active {
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: rgb(229 231 235) !important;
+    ring: none !important;
+    --tw-ring-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+  }
+
+  :global(.dark) .theme-toggle-btn:focus,
+  :global(.dark) .theme-toggle-btn:focus-visible,
+  :global(.dark) .theme-toggle-btn:active {
+    border-color: rgb(55 65 81) !important;
+    ring: none !important;
+    --tw-ring-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+  }
+
+  :global(.dark) .theme-toggle-btn {
+    border-color: rgb(55 65 81);
+    background-color: rgb(31 41 55);
+    color: rgb(243 244 246);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .theme-toggle-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
+      border-color: #0284FE;
+    }
+
+    :global(.dark) .theme-toggle-btn:hover {
+      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
+    }
+
+    .theme-toggle-btn:active {
+      transform: translateY(0);
+    }
+  }
+
+  .theme-icon {
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .sun-icon {
+    color: #f59e0b;
+  }
+
+  .moon-icon {
+    color: white;
+  }
+
+  /* Auto mode - diagonal split button */
+  .auto-icon-container {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: 8px;
+  }
+
+  .auto-half {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .auto-light-half {
+    background-color: white;
+    clip-path: polygon(0 0, 100% 0, 0 100%);
+  }
+
+  .auto-light-half :global(svg) {
+    transform: translate(-4px, -4px);
+  }
+
+  .auto-dark-half {
+    background-color: rgb(31 41 55);
+    clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  }
+
+  .auto-dark-half :global(svg) {
+    transform: translate(4px, 4px);
+  }
+
+  .hidden {
+    opacity: 0;
+    transform: rotate(180deg) scale(0);
+    position: absolute;
+  }
+
+  .theme-icon:not(.hidden) {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+</style>