@lukso/core 1.1.0-dev.f500300 → 1.1.0

package/src/mixins/__tests__/theme.spec.ts

@@ -1,478 +0,0 @@
-import { html, LitElement } from 'lit'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { withTheme } from '../theme'
-
-describe('withTheme Mixin', () => {
-  let element: any
-  let TestComponent: any
-  let tagName: string
-
-  beforeEach(() => {
-    // Create a unique tag name for each test to avoid registration conflicts
-    tagName = `test-theme-${Math.random().toString(36).slice(2)}`
-
-    // Create a test component using the mixin
-    TestComponent = class extends withTheme(LitElement) {
-      render() {
-        return html`
-          <div class="test-content bg-neutral-100 dark:bg-neutral-10">
-            Theme: ${this.theme}
-          </div>
-        `
-      }
-    }
-
-    // Register the component before instantiation
-    if (!customElements.get(tagName)) {
-      customElements.define(tagName, TestComponent)
-    }
-
-    element = new TestComponent()
-  })
-
-  afterEach(() => {
-    if (element?.parentElement) {
-      element.remove()
-    }
-  })
-
-  describe('Initialization', () => {
-    it('should have default theme property set to "light"', () => {
-      expect(element.theme).toBe('light')
-    })
-
-    it('should have isDark property set to false by default', () => {
-      expect(element.isDark).toBe(false)
-    })
-
-    it('should have theme property reflected to attribute', async () => {
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.hasAttribute('theme')).toBe(true)
-      expect(element.getAttribute('theme')).toBe('light')
-    })
-  })
-
-  describe('Theme Root Creation', () => {
-    it('should create a theme root div', async () => {
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      const shadowRoot = element.shadowRoot
-      expect(shadowRoot).toBeDefined()
-
-      const themeRoot = shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot).toBeDefined()
-      expect(themeRoot?.tagName).toBe('DIV')
-    })
-
-    it('should have data-theme-root attribute', async () => {
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.hasAttribute('data-theme-root')).toBe(true)
-    })
-
-    it('should render content inside theme root', async () => {
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      const content = themeRoot?.querySelector('.test-content')
-      expect(content).toBeDefined()
-    })
-  })
-
-  describe('Light Theme', () => {
-    it('should not have dark class when theme is light', async () => {
-      element.theme = 'light'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(false)
-    })
-
-    it('should set isDark to false when theme is light', async () => {
-      element.theme = 'light'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.isDark).toBe(false)
-    })
-
-    it('should update attribute when theme is set to light', async () => {
-      element.theme = 'light'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.getAttribute('theme')).toBe('light')
-    })
-  })
-
-  describe('Dark Theme', () => {
-    it('should have dark class when theme is dark', async () => {
-      element.theme = 'dark'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(true)
-    })
-
-    it('should set isDark to true when theme is dark', async () => {
-      element.theme = 'dark'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.isDark).toBe(true)
-    })
-
-    it('should update attribute when theme is set to dark', async () => {
-      element.theme = 'dark'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.getAttribute('theme')).toBe('dark')
-    })
-  })
-
-  describe('Auto Theme', () => {
-    it('should set theme to auto', () => {
-      element.theme = 'auto'
-      expect(element.theme).toBe('auto')
-    })
-
-    it('should detect system preference when theme is auto', async () => {
-      // Mock matchMedia to return dark mode
-      const matchMediaMock = vi.fn((query) => ({
-        matches: query === '(prefers-color-scheme: dark)',
-        media: query,
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-      }))
-      vi.stubGlobal('matchMedia', matchMediaMock)
-
-      element.theme = 'auto'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.isDark).toBe(true)
-
-      vi.unstubAllGlobals()
-    })
-
-    it('should listen for system theme changes when theme is auto', async () => {
-      const addEventListenerSpy = vi.fn()
-      const matchMediaMock = vi.fn(() => ({
-        matches: false,
-        media: '(prefers-color-scheme: dark)',
-        addEventListener: addEventListenerSpy,
-        removeEventListener: vi.fn(),
-      }))
-      vi.stubGlobal('matchMedia', matchMediaMock)
-
-      element.theme = 'auto'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(addEventListenerSpy).toHaveBeenCalledWith(
-        'change',
-        expect.any(Function)
-      )
-
-      vi.unstubAllGlobals()
-    })
-
-    it('should remove event listener when theme changes from auto', async () => {
-      const removeEventListenerSpy = vi.fn()
-      const addEventListenerSpy = vi.fn()
-      const matchMediaMock = vi.fn(() => ({
-        matches: false,
-        media: '(prefers-color-scheme: dark)',
-        addEventListener: addEventListenerSpy,
-        removeEventListener: removeEventListenerSpy,
-      }))
-      vi.stubGlobal('matchMedia', matchMediaMock)
-
-      element.theme = 'auto'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      // Change theme from auto to light
-      element.theme = 'light'
-      await element.updateComplete
-
-      expect(removeEventListenerSpy).toHaveBeenCalled()
-
-      vi.unstubAllGlobals()
-    })
-  })
-
-  describe('Theme Switching', () => {
-    it('should switch from light to dark', async () => {
-      document.body.appendChild(element)
-      element.theme = 'light'
-      await element.updateComplete
-      await element.updateComplete // Wait for property change update
-
-      let themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(false)
-
-      element.theme = 'dark'
-      await element.updateComplete
-      await element.updateComplete // Wait for property change update
-
-      themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(true)
-    })
-
-    it('should switch from dark to light', async () => {
-      document.body.appendChild(element)
-      element.theme = 'dark'
-      await element.updateComplete
-      await element.updateComplete // Wait for property change update
-
-      let themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(true)
-
-      element.theme = 'light'
-      await element.updateComplete
-      await element.updateComplete // Wait for property change update
-
-      themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(false)
-    })
-
-    it('should update isDark when switching themes', async () => {
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      element.theme = 'dark'
-      await element.updateComplete
-      expect(element.isDark).toBe(true)
-
-      element.theme = 'light'
-      await element.updateComplete
-      expect(element.isDark).toBe(false)
-    })
-  })
-
-  describe('Multiple Instances', () => {
-    it('should work with multiple component instances', async () => {
-      const element2 = new TestComponent()
-
-      element.theme = 'dark'
-      element2.theme = 'light'
-
-      document.body.appendChild(element)
-      document.body.appendChild(element2)
-      await element.updateComplete
-      await element2.updateComplete
-
-      expect(element.isDark).toBe(true)
-      expect(element2.isDark).toBe(false)
-
-      const themeRoot1 = element.shadowRoot?.querySelector('[data-theme-root]')
-      const themeRoot2 = element2.shadowRoot?.querySelector('[data-theme-root]')
-
-      expect(themeRoot1?.classList.contains('dark')).toBe(true)
-      expect(themeRoot2?.classList.contains('dark')).toBe(false)
-
-      element2.remove()
-    })
-
-    it('should not affect other instances when changing theme', async () => {
-      const element2 = new TestComponent()
-
-      document.body.appendChild(element)
-      document.body.appendChild(element2)
-      await element.updateComplete
-      await element2.updateComplete
-
-      element.theme = 'dark'
-      await element.updateComplete
-
-      expect(element.isDark).toBe(true)
-      expect(element2.isDark).toBe(false)
-
-      element2.remove()
-    })
-  })
-
-  describe('Lifecycle', () => {
-    it('should cleanup event listener on disconnect when theme is auto', async () => {
-      const removeEventListenerSpy = vi.fn()
-      const matchMediaMock = vi.fn(() => ({
-        matches: false,
-        media: '(prefers-color-scheme: dark)',
-        addEventListener: vi.fn(),
-        removeEventListener: removeEventListenerSpy,
-      }))
-      vi.stubGlobal('matchMedia', matchMediaMock)
-
-      element.theme = 'auto'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      element.remove()
-
-      expect(removeEventListenerSpy).toHaveBeenCalled()
-
-      vi.unstubAllGlobals()
-    })
-
-    it('should maintain theme property after disconnection', async () => {
-      element.theme = 'dark'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      const themeBefore = element.theme
-      const isDarkBefore = element.isDark
-
-      element.remove()
-
-      expect(element.theme).toBe(themeBefore)
-      expect(element.isDark).toBe(isDarkBefore)
-    })
-  })
-
-  describe('Mixin Composition', () => {
-    it('should work when composed with other mixins', async () => {
-      // Simple test mixin
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const withTestFeature = <T extends typeof LitElement>(Base: T): any => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return class extends (Base as any) {
-          testProperty = 'test'
-        }
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const ComposedComponent: any = class extends withTheme(
-        withTestFeature(LitElement)
-      ) {
-        render() {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          return html`<div>${(this as any).testProperty}</div>`
-        }
-      }
-
-      const composedTagName = `test-composed-${Math.random().toString(36).slice(2)}`
-      customElements.define(composedTagName, ComposedComponent)
-
-      const composedElement = new ComposedComponent()
-      document.body.appendChild(composedElement)
-      await composedElement.updateComplete
-
-      // Should have both theme and test properties
-      expect(composedElement.theme).toBeDefined()
-      expect(composedElement.isDark).toBeDefined()
-      expect(composedElement.testProperty).toBe('test')
-
-      // Should have theme root
-      const themeRoot =
-        composedElement.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot).toBeDefined()
-
-      composedElement.remove()
-    })
-  })
-
-  describe('System Preference Changes', () => {
-    it('should update isDark when system preference changes in auto mode', async () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const handlers: any[] = []
-      const matchMediaMock = vi.fn(() => ({
-        matches: false,
-        media: '(prefers-color-scheme: dark)',
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        addEventListener: (_: string, handler: any) => {
-          handlers.push(handler)
-        },
-        removeEventListener: vi.fn(),
-      }))
-      vi.stubGlobal('matchMedia', matchMediaMock)
-
-      element.theme = 'auto'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.isDark).toBe(false)
-
-      // Simulate system preference change to dark
-      expect(handlers.length).toBeGreaterThan(0)
-      handlers[0]({ matches: true })
-      await element.updateComplete
-
-      expect(element.isDark).toBe(true)
-
-      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(true)
-
-      vi.unstubAllGlobals()
-    })
-
-    it('should update isDark when system preference changes to light in auto mode', async () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const handlers: any[] = []
-      const matchMediaMock = vi.fn(() => ({
-        matches: true, // Start with dark
-        media: '(prefers-color-scheme: dark)',
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        addEventListener: (_: string, handler: any) => {
-          handlers.push(handler)
-        },
-        removeEventListener: vi.fn(),
-      }))
-      vi.stubGlobal('matchMedia', matchMediaMock)
-
-      element.theme = 'auto'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.isDark).toBe(true)
-
-      // Simulate system preference change to light
-      expect(handlers.length).toBeGreaterThan(0)
-      handlers[0]({ matches: false })
-      await element.updateComplete
-
-      expect(element.isDark).toBe(false)
-
-      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(false)
-
-      vi.unstubAllGlobals()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle rapid theme changes', () => {
-      element.theme = 'dark'
-      element.theme = 'light'
-      element.theme = 'dark'
-      element.theme = 'auto'
-
-      expect(element.theme).toBe('auto')
-      expect(element.isDark).toBeDefined()
-    })
-
-    it('should handle theme changes before connection', () => {
-      element.theme = 'dark'
-      expect(element.theme).toBe('dark')
-    })
-
-    it('should properly initialize when connected with pre-set theme', async () => {
-      element.theme = 'dark'
-      document.body.appendChild(element)
-      await element.updateComplete
-
-      expect(element.isDark).toBe(true)
-      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
-      expect(themeRoot?.classList.contains('dark')).toBe(true)
-    })
-  })
-})

package/src/mixins/theme.ts

@@ -1,172 +0,0 @@
-/**
- * Theme Mixin
- *
- * Mixin to add theme detection and management to a Lit component
- */
-
-import type { LitElement } from 'lit'
-import { property, state } from 'lit/decorators.js'
-
-export type Theme = 'light' | 'dark' | 'auto'
-
-/**
- * Mixin to add theme management to a Lit component
- *
- * Provides a `theme` property and `isDark` state that automatically handles:
- * - Manual theme selection ('light' or 'dark')
- * - Auto theme detection based on system preferences
- * - Reactive updates when system theme changes
- * - Automatically wraps all rendered content in a themed div with 'dark' class when dark mode is active
- *
- * All content rendered by the component will be inside a theme-root div that receives the dark class.
- * Components can use render() normally - no changes needed.
- *
- * @typeParam T - The Lit component class being extended
- * @returns Extended class with theme management capabilities
- *
- * @example
- * ```typescript
- * import { LitElement, html } from 'lit';
- * import { customElement } from 'lit/decorators.js';
- * import { withTheme } from '@lukso/core/mixins';
- *
- * @customElement('my-component')
- * export class MyComponent extends withTheme(LitElement) {
- *   render() {
- *     return html`
- *       <div class="text-neutral-20 dark:text-neutral-100">
- *         Current theme: ${this.theme}
- *       </div>
- *     `;
- *   }
- * }
- * ```
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function withTheme<T extends typeof LitElement>(Base: T): any {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  class Mixin extends (Base as any) {
-    /**
-     * Theme mode: 'light', 'dark', or 'auto' (follows system preference)
-     */
-    @property({ type: String, reflect: true })
-    theme: Theme = 'light'
-
-    /**
-     * Computed state indicating if dark mode is active
-     */
-    @state()
-    protected isDark = false
-
-    /**
-     * The theme root element that wraps all rendered content and receives the dark class
-     */
-    private themeRoot!: HTMLDivElement
-
-    private mediaQueryList: MediaQueryList | null = null
-
-    connectedCallback(): void {
-      super.connectedCallback()
-      this.updateTheme()
-      this.updateHostClass()
-
-      // Listen for system theme changes when in 'auto' mode
-      if (this.theme === 'auto') {
-        this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
-        this.mediaQueryList.addEventListener(
-          'change',
-          this.handleMediaQueryChange
-        )
-      }
-    }
-
-    disconnectedCallback(): void {
-      super.disconnectedCallback()
-
-      if (this.mediaQueryList) {
-        this.mediaQueryList.removeEventListener(
-          'change',
-          this.handleMediaQueryChange
-        )
-      }
-    }
-
-    updated(changedProperties: Map<string, any>): void {
-      super.updated(changedProperties)
-
-      // Handle theme changes
-      if (changedProperties.has('theme')) {
-        this.updateTheme()
-
-        // Update media query listener when theme mode changes
-        if (this.theme === 'auto' && !this.mediaQueryList) {
-          this.mediaQueryList = window.matchMedia(
-            '(prefers-color-scheme: dark)'
-          )
-          this.mediaQueryList.addEventListener(
-            'change',
-            this.handleMediaQueryChange
-          )
-        } else if (this.theme !== 'auto' && this.mediaQueryList) {
-          this.mediaQueryList.removeEventListener(
-            'change',
-            this.handleMediaQueryChange
-          )
-          this.mediaQueryList = null
-        }
-      }
-
-      // Update host class when isDark changes
-      if (changedProperties.has('isDark')) {
-        this.updateHostClass()
-      }
-    }
-
-    /**
-     * Handle system theme changes
-     *
-     * @param event - Media query list event
-     */
-    private handleMediaQueryChange = (event: MediaQueryListEvent): void => {
-      this.isDark = event.matches
-    }
-
-    /**
-     * Update isDark state based on theme property
-     */
-    protected updateTheme(): void {
-      if (this.theme === 'auto') {
-        this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-      } else {
-        this.isDark = this.theme === 'dark'
-      }
-    }
-
-    /**
-     * Create the render root with a themed wrapper div
-     */
-    createRenderRoot(): Element | ShadowRoot {
-      const root = super.createRenderRoot()
-
-      this.themeRoot = document.createElement('div')
-      this.themeRoot.setAttribute('data-theme-root', '')
-
-      root.appendChild(this.themeRoot)
-      return this.themeRoot
-    }
-
-    /**
-     * Update the host element's class based on isDark state
-     */
-    private updateHostClass(): void {
-      if (this.isDark) {
-        this.themeRoot.classList.add('dark')
-      } else {
-        this.themeRoot.classList.remove('dark')
-      }
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return Mixin as any
-}