@anmiles/theme-switcher 1.0.0

package/src/components/__tests__/__snapshots__/App.test.tsx.snap

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`src/App switcher html should match snapshot on dark system theme 1`] = `
+<div
+  class="themeSwitcher"
+  data-testid="theme-switcher"
+>
+  {light}
+  <ul
+    data-testid="theme-selector"
+  >
+    <li
+      data-testid="theme-item-light"
+    >
+      {light}
+      <span>
+        Light
+      </span>
+    </li>
+    <li
+      data-testid="theme-item-dark"
+    >
+      {dark}
+      <span>
+        Dark
+      </span>
+    </li>
+    <li
+      data-testid="theme-item-system"
+    >
+      {system}
+      <span>
+        System
+      </span>
+      {checked}
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`src/App switcher html should match snapshot on dark user theme 1`] = `
+<div
+  class="themeSwitcher"
+  data-testid="theme-switcher"
+>
+  {dark}
+  <ul
+    data-testid="theme-selector"
+  >
+    <li
+      data-testid="theme-item-light"
+    >
+      {light}
+      <span>
+        Light
+      </span>
+    </li>
+    <li
+      data-testid="theme-item-dark"
+    >
+      {dark}
+      <span>
+        Dark
+      </span>
+      {checked}
+    </li>
+    <li
+      data-testid="theme-item-system"
+    >
+      {system}
+      <span>
+        System
+      </span>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`src/App switcher html should match snapshot on light system theme 1`] = `
+<div
+  class="themeSwitcher"
+  data-testid="theme-switcher"
+>
+  {light}
+  <ul
+    data-testid="theme-selector"
+  >
+    <li
+      data-testid="theme-item-light"
+    >
+      {light}
+      <span>
+        Light
+      </span>
+    </li>
+    <li
+      data-testid="theme-item-dark"
+    >
+      {dark}
+      <span>
+        Dark
+      </span>
+    </li>
+    <li
+      data-testid="theme-item-system"
+    >
+      {system}
+      <span>
+        System
+      </span>
+      {checked}
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`src/App switcher html should match snapshot on light user theme 1`] = `
+<div
+  class="themeSwitcher"
+  data-testid="theme-switcher"
+>
+  {light}
+  <ul
+    data-testid="theme-selector"
+  >
+    <li
+      data-testid="theme-item-light"
+    >
+      {light}
+      <span>
+        Light
+      </span>
+      {checked}
+    </li>
+    <li
+      data-testid="theme-item-dark"
+    >
+      {dark}
+      <span>
+        Dark
+      </span>
+    </li>
+    <li
+      data-testid="theme-item-system"
+    >
+      {system}
+      <span>
+        System
+      </span>
+    </li>
+  </ul>
+</div>
+`;

package/src/components/icons/Checked.tsx

@@ -0,0 +1,24 @@
+/* istanbul ignore file */
+export default function Checked() {
+	return (
+		<svg
+			viewBox="0 0 640 540" xmlns="http://www.w3.org/2000/svg"
+			className="checked"
+		>
+			<path
+				fill="currentColor"
+				d="
+					M 12,370
+						a 40,40,0,0,1,56.56,-56.56
+						l 130,130
+						l 370,-430
+						a 40,40,0,0,1,56.56,56.56
+						l -398.28,458.28
+						a 40,40,0,0,1,-56.56,0
+						l -140,-140
+					Z"
+			/>
+		</svg>
+
+	);
+}

package/src/components/icons/Dark.tsx

@@ -0,0 +1,13 @@
+/* istanbul ignore file */
+export default function Dark() {
+	return (
+		<svg
+			viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
+			className="dark" strokeWidth="8" strokeLinecap="round" fill="none"
+		>
+			<circle cx="50" cy="50" r="46" strokeDasharray="180" transform="rotate(22.5 50 50)" />
+			<circle cx="75" cy="25" r="46" strokeDasharray="108 200" transform="rotate(67.5 75 25)" />
+		</svg>
+
+	);
+}

package/src/components/icons/Light.tsx

@@ -0,0 +1,21 @@
+/* istanbul ignore file */
+export default function Light() {
+	return (
+		<svg
+			viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
+			className="light" strokeWidth="8" strokeLinecap="round" fill="none"
+		>
+			<circle cx="50" cy="50" r="20" />
+
+			<path d="M 50 86 v 10" transform="rotate(0 50 50)" />
+			<path d="M 50 86 v 10" transform="rotate(90 50 50)" />
+			<path d="M 50 86 v 10" transform="rotate(180 50 50)" />
+			<path d="M 50 86 v 10" transform="rotate(270 50 50)" />
+
+			<path d="M 50 86 v 15" transform="rotate(45 50 50)" />
+			<path d="M 50 86 v 15" transform="rotate(135 50 50)" />
+			<path d="M 50 86 v 15" transform="rotate(225 50 50)" />
+			<path d="M 50 86 v 15" transform="rotate(315 50 50)" />
+		</svg>
+	);
+}

package/src/components/icons/System.tsx

@@ -0,0 +1,18 @@
+/* istanbul ignore file */
+export default function System() {
+	return (
+		<svg
+			viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
+			className="system" strokeWidth="8" strokeLinecap="round" fill="none"
+		>
+			<circle cx="50" cy="50" r="46" />
+
+			<path
+				strokeWidth="0" fill="currentColor" d="
+					M 50,0
+						a 50,50,0,1,1,0,100
+					Z"
+			/>
+		</svg>
+	);
+}

package/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode  } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { AppProps } from './components/App';
+import App from './components/App';
+
+class ThemeSwitcherElement {
+	constructor(private readonly props: AppProps) {}
+
+	public render(parentNode: HTMLElement) {
+		const root = createRoot(parentNode);
+
+		root.render(
+			<StrictMode>
+				<App { ...this.props } />
+			</StrictMode>,
+		);
+	}
+}
+
+export { ThemeSwitcherElement, App as ThemeSwitcher };

package/src/lib/__tests__/eventEmitter.test.ts

@@ -0,0 +1,109 @@
+import { EventEmitter } from '../eventEmitter';
+
+describe('src/lib/eventEmitter', () => {
+	const data = { key : 'value' };
+
+	const changeListener1 = jest.fn();
+	const changeListener2 = jest.fn();
+
+	const deleteListener1 = jest.fn();
+	const deleteListener2 = jest.fn();
+
+	let eventEmitter: InstanceType<typeof EventEmitter>;
+
+	beforeEach(() => {
+		eventEmitter = new EventEmitter();
+
+		eventEmitter.on('change', changeListener1);
+		eventEmitter.on('change', changeListener2);
+
+		eventEmitter.on('delete', deleteListener1);
+		eventEmitter.on('delete', deleteListener2);
+	});
+
+	it('should register added listeners', () => {
+		const expectedListeners = {
+			change : [ changeListener1, changeListener2 ],
+			delete : [ deleteListener1, deleteListener2 ],
+		};
+
+		expect(eventEmitter['listeners']).toEqual(expectedListeners);
+	});
+
+	it('should call listeners when emitting event', () => {
+		eventEmitter['emit']('change', data);
+
+		expect(changeListener1).toHaveBeenCalledWith(data);
+		expect(changeListener2).toHaveBeenCalledWith(data);
+
+		expect(deleteListener1).not.toHaveBeenCalled();
+		expect(deleteListener2).not.toHaveBeenCalled();
+	});
+
+	it('should not call listeners onw unknown event', () => {
+		eventEmitter['emit']('unknown', data);
+
+		expect(changeListener1).not.toHaveBeenCalled();
+		expect(changeListener2).not.toHaveBeenCalled();
+
+		expect(deleteListener1).not.toHaveBeenCalled();
+		expect(deleteListener2).not.toHaveBeenCalled();
+	});
+
+	it('should properly call listeners when emitting event without data', () => {
+		eventEmitter['emit']('delete');
+
+		expect(deleteListener1).toHaveBeenCalledWith();
+		expect(deleteListener2).toHaveBeenCalledWith();
+	});
+
+	it('should call listener the number of times that it was registered', () => {
+		eventEmitter['emit']('change', data);
+
+		expect(changeListener1).toHaveBeenCalledTimes(1);
+		changeListener1.mockClear();
+
+		eventEmitter.on('change', changeListener1);
+		eventEmitter.on('change', changeListener1);
+
+		eventEmitter['emit']('change', data);
+
+		expect(changeListener1).toHaveBeenCalledTimes(3);
+	});
+
+	it('should not call unsubscribed listener', () => {
+		eventEmitter.off('change', changeListener1);
+		eventEmitter['emit']('change', data);
+
+		expect(changeListener1).not.toHaveBeenCalled();
+		expect(changeListener2).toHaveBeenCalledWith(data);
+	});
+
+	it('should change nothing on unsubscribing from non-existing events', () => {
+		eventEmitter.off('unknown', changeListener1);
+		eventEmitter['emit']('change', data);
+
+		expect(changeListener1).toHaveBeenCalledWith(data);
+		expect(changeListener2).toHaveBeenCalledWith(data);
+
+		expect(deleteListener1).not.toHaveBeenCalled();
+		expect(deleteListener2).not.toHaveBeenCalled();
+	});
+
+	it('should work correctly in derived class', () => {
+		const spy = jest.fn();
+
+		class EventEmitterChild extends EventEmitter<{ myEvent : [{ id : number }, string] }> {
+		}
+
+		const instance = new EventEmitterChild();
+
+		instance.on('myEvent', (...data) => {
+			spy(...data);
+		});
+
+		instance['emit']('myEvent', { id : 1 }, 'something');
+
+		expect(spy).toHaveBeenCalledWith({ id : 1 }, 'something');
+	});
+});

package/src/lib/eventEmitter.ts

@@ -0,0 +1,32 @@
+class EventEmitter<TEventMap extends Record<string, Array<unknown>>> {
+	private readonly listeners : {
+		[TEvent in keyof TEventMap]?: Array<(...data: TEventMap[TEvent]) => void>
+	} = {};
+
+	public on<TEvent extends keyof TEventMap>(
+		event: TEvent,
+		listener: (...data: TEventMap[TEvent]) => void,
+	): void {
+		const listeners = this.listeners[event] ??= [];
+		listeners.push(listener);
+	}
+
+	public off<TEvent extends keyof TEventMap>(
+		event: TEvent,
+		listener: (...data: TEventMap[TEvent]) => void,
+	): void {
+		const listeners = this.listeners[event] ??= [];
+		listeners.splice(listeners.indexOf(listener), 1);
+	}
+
+	protected emit<TEvent extends keyof TEventMap>(
+		event: TEvent,
+		...data: TEventMap[TEvent]
+	): void {
+		this.listeners[event]?.forEach((listener) => {
+			listener(...data);
+		});
+	}
+}
+
+export { EventEmitter };

package/src/lib/theme.ts

@@ -0,0 +1,21 @@
+const themes = [ 'light', 'dark' ] as const;
+type Theme = typeof themes[number];
+const defaultTheme: Theme = 'light';
+
+function isTheme(arg: unknown): arg is Theme {
+	return typeof arg === 'string' && themes.includes(arg as Theme);
+}
+
+function getThemeName(theme: Theme | undefined): string {
+	switch (theme) {
+		case 'light':
+			return 'Light';
+		case 'dark':
+			return 'Dark';
+		default:
+			return 'System';
+	}
+}
+
+export type { Theme };
+export { themes, defaultTheme, isTheme, getThemeName };

package/src/providers/__tests__/systemProvider.test.ts

@@ -0,0 +1,102 @@
+import { EventEmitter } from '../../lib/eventEmitter';
+import type { Theme } from '../../lib/theme';
+import { defaultTheme } from '../../lib/theme';
+import { SystemProvider } from '../systemProvider';
+
+let systemProvider: SystemProvider;
+const changeSpy = jest.fn();
+
+class MediaQueryListEvents extends EventEmitter<{ change : [Partial<MediaQueryListEvent>] }> {}
+
+const mediaQueryListEvents: Record<Theme, InstanceType<typeof MediaQueryListEvents>> = {
+	light : new MediaQueryListEvents(),
+	dark  : new MediaQueryListEvents(),
+};
+
+let systemPreference: Theme | undefined;
+
+beforeEach(() => {
+	window.localStorage.clear();
+	systemProvider = new SystemProvider();
+	systemProvider.on('change', changeSpy);
+	systemPreference = undefined;
+
+	window.matchMedia = jest.fn().mockImplementation((query: string): Partial<MediaQueryList> => {
+		const parsedTheme = /\(prefers-color-scheme: (.*)\)/.exec(query)?.[1] as Theme;
+
+		return {
+			matches          : parsedTheme === systemPreference,
+			addEventListener : (
+				event: keyof MediaQueryListEventMap,
+				listener: (ev: Partial<MediaQueryListEvent>) => void,
+			) => {
+				mediaQueryListEvents[parsedTheme].on(event, listener);
+			},
+		};
+	});
+});
+
+describe('src/providers/systemProvider', () => {
+	describe('get', () => {
+		it('should return defaultTheme if window.matchMedia is not defined', () => {
+			// @ts-expect-error window always has matchMedia
+			delete window.matchMedia;
+			expect(systemProvider.get()).toEqual(defaultTheme);
+		});
+
+		it('should return defaultTheme if nothing preferred', () => {
+			expect(systemProvider.get()).toEqual(defaultTheme);
+		});
+
+		it('should return light theme if preferred', () => {
+			systemPreference = 'light';
+			expect(systemProvider.get()).toEqual('light');
+		});
+
+		it('should return dark theme if preferred', () => {
+			systemPreference = 'dark';
+			expect(systemProvider.get()).toEqual('dark');
+		});
+	});
+
+	describe('watch', () => {
+		it('should never emit change events if window.matchMedia is not defined', () => {
+			// @ts-expect-error window always has matchMedia
+			delete window.matchMedia;
+			systemProvider.watch();
+			mediaQueryListEvents.light['emit']('change', { matches : true });
+			mediaQueryListEvents.dark['emit']('change', { matches : true });
+
+			expect(changeSpy).not.toHaveBeenCalled();
+		});
+
+		it('should never emit change events if not called', () => {
+			mediaQueryListEvents.light['emit']('change', { matches : true });
+			mediaQueryListEvents.dark['emit']('change', { matches : true });
+
+			expect(changeSpy).not.toHaveBeenCalled();
+		});
+
+		it('should emit change event on mediaQueryList change for light theme with match', () => {
+			systemProvider.watch();
+			mediaQueryListEvents.light['emit']('change', { matches : true });
+
+			expect(changeSpy).toHaveBeenCalledWith('light');
+		});
+
+		it('should emit change event on mediaQueryList change for dark theme with match', () => {
+			systemProvider.watch();
+			mediaQueryListEvents.dark['emit']('change', { matches : true });
+
+			expect(changeSpy).toHaveBeenCalledWith('dark');
+		});
+
+		it('should not emit change event on mediaQueryList changes with no match', () => {
+			systemProvider.watch();
+			mediaQueryListEvents.light['emit']('change', { matches : false });
+			mediaQueryListEvents.dark['emit']('change', { matches : false });
+
+			expect(changeSpy).not.toHaveBeenCalled();
+		});
+	});
+});

package/src/providers/__tests__/userProvider.test.ts

@@ -0,0 +1,60 @@
+import { UserProvider } from '../userProvider';
+
+const storageKey = 'theme';
+const changeSpy  = jest.fn();
+let userProvider: UserProvider;
+
+beforeEach(() => {
+	window.localStorage.clear();
+	userProvider = new UserProvider();
+	userProvider.on('change', changeSpy);
+});
+
+describe('src/providers/userProvider', () => {
+	describe('get', () => {
+		it('should return light theme if set in localStorage', () => {
+			window.localStorage.setItem(storageKey, 'light');
+
+			expect(userProvider.get()).toEqual('light');
+		});
+
+		it('should return dark theme if set in localStorage', () => {
+			window.localStorage.setItem(storageKey, 'dark');
+
+			expect(userProvider.get()).toEqual('dark');
+		});
+
+		it('should return undefined if unknown string set in localStorage', () => {
+			window.localStorage.setItem(storageKey, 'unknown');
+
+			expect(userProvider.get()).toEqual(undefined);
+		});
+
+		it('should return undefined if not set in localStorage', () => {
+			expect(userProvider.get()).toEqual(undefined);
+		});
+	});
+
+	describe('set', () => {
+		it('should remove theme from localStorage and emit event if undefined passed', () => {
+			userProvider.set(undefined);
+
+			expect(changeSpy).toHaveBeenCalledWith(undefined);
+			expect(localStorage.getItem(storageKey)).toEqual(null);
+		});
+
+		it('should save light theme to localStorage and emit event if light passed', () => {
+			userProvider.set('light');
+
+			expect(changeSpy).toHaveBeenCalledWith('light');
+			expect(localStorage.getItem(storageKey)).toEqual('light');
+		});
+
+		it('should save dark theme to localStorage and emit event if dark passed', () => {
+			userProvider.set('dark');
+
+			expect(changeSpy).toHaveBeenCalledWith('dark');
+			expect(localStorage.getItem(storageKey)).toEqual('dark');
+		});
+	});
+});

package/src/providers/systemProvider.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../lib/eventEmitter';
+import { defaultTheme, themes } from '../lib/theme';
+import type { Theme } from '../lib/theme';
+
+class SystemProvider extends EventEmitter<{ change : [Theme] }> {
+
+	public get(): Theme {
+		if (!('matchMedia' in window)) {
+			return defaultTheme;
+		}
+
+		for (const theme of themes) {
+			const mediaQueryList = window.matchMedia(`(prefers-color-scheme: ${theme})`);
+
+			if (mediaQueryList.matches) {
+				return theme;
+			}
+		}
+
+		return defaultTheme;
+	}
+
+	public watch(): void {
+		if (!('matchMedia' in window)) {
+			return;
+		}
+
+		for (const theme of themes) {
+			const mediaQueryList = window.matchMedia(`(prefers-color-scheme: ${theme})`);
+
+			mediaQueryList.addEventListener('change', (ev) => {
+				if (ev.matches) {
+					this.emit('change', theme);
+				}
+			});
+		}
+	}
+}
+
+export { SystemProvider };

package/src/providers/userProvider.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../lib/eventEmitter';
+import { isTheme  } from '../lib/theme';
+import type { Theme } from '../lib/theme';
+
+class UserProvider extends EventEmitter<{ change : [Theme | undefined] }> {
+	private readonly storageKey = 'theme';
+
+	public get(): Theme | undefined {
+		const theme = localStorage.getItem(this.storageKey);
+		return isTheme(theme) ? theme : undefined;
+	}
+
+	public set(theme: Theme | undefined): void {
+		if (theme) {
+			localStorage.setItem(this.storageKey, theme);
+		} else {
+			localStorage.removeItem(this.storageKey);
+		}
+
+		this.emit('change', theme);
+	}
+}
+
+export { UserProvider };

package/src/styles/style.css

@@ -0,0 +1,52 @@
+.themeSwitcher {
+	cursor: pointer;
+	position: relative;
+}
+
+.themeSwitcher > svg:hover,
+.themeSwitcher li:hover {
+	filter: brightness(1.5);
+}
+
+.themeSwitcher svg {
+	width: 2em;
+	height: 2em;
+	stroke: currentColor;
+	display: block;
+}
+
+.themeSwitcher ul {
+	list-style-type: none;
+	position: absolute;
+	left: 0;
+	margin: 0.5em 0;
+	padding: 0;
+	gap: 0;
+	overflow-y: visible;
+	z-index: 1;
+}
+
+.themeSwitcher li {
+	padding: 0.5em 1em;
+}
+
+.themeSwitcher[data-float="right"] ul {
+	left: auto;
+	right: 0;
+}
+
+.themeSwitcher li {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+}
+
+.themeSwitcher li svg {
+	width: 1.5em;
+	height: 1.5em;
+}
+
+.themeSwitcher svg.checked {
+	width: 16px;
+	height: 13.5px;
+}