@anmiles/theme-switcher 1.0.0

package/dist/theme-switcher-0.1.0.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see theme-switcher-0.1.0.min.js.LICENSE.txt */
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("React"),require("ReactDOM"));else if("function"==typeof define&&define.amd)define(["React","ReactDOM"],t);else{var r="object"==typeof exports?t(require("React"),require("ReactDOM")):t(e.React,e.ReactDOM);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,((e,t)=>(()=>{"use strict";var r={919:(e,t,r)=>{r.d(t,{A:()=>i});var n=r(601),o=r.n(n),s=r(314),a=r.n(s)()(o());a.push([e.id,'.themeSwitcher {\n\tcursor: pointer;\n\tposition: relative;\n}\n\n.themeSwitcher > svg:hover,\n.themeSwitcher li:hover {\n\tfilter: brightness(1.5);\n}\n\n.themeSwitcher svg {\n\twidth: 2em;\n\theight: 2em;\n\tstroke: currentColor;\n\tdisplay: block;\n}\n\n.themeSwitcher ul {\n\tlist-style-type: none;\n\tposition: absolute;\n\tleft: 0;\n\tmargin: 0.5em 0;\n\tpadding: 0;\n\tgap: 0;\n\toverflow-y: visible;\n\tz-index: 1;\n}\n\n.themeSwitcher li {\n\tpadding: 0.5em 1em;\n}\n\n.themeSwitcher[data-float="right"] ul {\n\tleft: auto;\n\tright: 0;\n}\n\n.themeSwitcher li {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5em;\n}\n\n.themeSwitcher li svg {\n\twidth: 1.5em;\n\theight: 1.5em;\n}\n\n.themeSwitcher svg.checked {\n\twidth: 16px;\n\theight: 13.5px;\n}\n',""]);const i=a},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,n,o,s){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(n)for(var i=0;i<this.length;i++){var c=this[i][0];null!=c&&(a[c]=!0)}for(var l=0;l<e.length;l++){var u=[].concat(e[l]);n&&a[u[0]]||(void 0!==s&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=s),r&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=r):u[2]=r),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),t.push(u))}},t}},601:e=>{e.exports=function(e){return e[1]}},338:(e,t,r)=>{var n=r(845);t.createRoot=n.createRoot,t.hydrateRoot=n.hydrateRoot},20:(e,t,r)=>{var n=r(883),o=Symbol.for("react.element"),s=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,r){var n,s={},l=null,u=null;for(n in void 0!==r&&(l=""+r),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)a.call(t,n)&&!c.hasOwnProperty(n)&&(s[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===s[n]&&(s[n]=t[n]);return{$$typeof:o,type:e,key:l,ref:u,props:s,_owner:i.current}}t.Fragment=s,t.jsx=l,t.jsxs=l},848:(e,t,r)=>{e.exports=r(20)},966:(e,t,r)=>{r.r(t),r.d(t,{default:()=>y});var n=r(72),o=r.n(n),s=r(825),a=r.n(s),i=r(659),c=r.n(i),l=r(56),u=r.n(l),d=r(540),f=r.n(d),h=r(113),m=r.n(h),p=r(919),v={};v.styleTagTransform=m(),v.setAttributes=u(),v.insert=c().bind(null,"head"),v.domAPI=a(),v.insertStyleElement=f(),o()(p.A,v);const y=p.A&&p.A.locals?p.A.locals:void 0},72:e=>{var t=[];function r(e){for(var r=-1,n=0;n<t.length;n++)if(t[n].identifier===e){r=n;break}return r}function n(e,n){for(var s={},a=[],i=0;i<e.length;i++){var c=e[i],l=n.base?c[0]+n.base:c[0],u=s[l]||0,d="".concat(l," ").concat(u);s[l]=u+1;var f=r(d),h={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==f)t[f].references++,t[f].updater(h);else{var m=o(h,n);n.byIndex=i,t.splice(i,0,{identifier:d,updater:m,references:1})}a.push(d)}return a}function o(e,t){var r=t.domAPI(t);return r.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;r.update(e=t)}else r.remove()}}e.exports=function(e,o){var s=n(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<s.length;a++){var i=r(s[a]);t[i].references--}for(var c=n(e,o),l=0;l<s.length;l++){var u=r(s[l]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}s=c}}},659:e=>{var t={};e.exports=function(e,r){var n=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,r)=>{e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var o=void 0!==r.layer;o&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,o&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var s=r.sourceMap;s&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(s))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},759:function(e,t,r){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const o=r(848),s=r(883),a=r(12),i=r(6);r(966);const c=n(r(771)),l=n(r(210));t.default=function({float:e}){const t=(0,s.useMemo)((()=>new a.UserProvider),[]),r=(0,s.useMemo)((()=>new i.SystemProvider),[]),[n,u]=(0,s.useState)(t.get()),[d,f]=(0,s.useState)(r.get()),[h,m]=(0,s.useState)(!1),p=n??d;return(0,s.useEffect)((()=>{document.body.setAttribute("data-theme",p),t.on("change",u),r.on("change",f),r.watch()}),[p,t,r]),(0,o.jsxs)("div",{className:"themeSwitcher","data-testid":"theme-switcher","data-float":e,onClick:()=>{m(!h)},children:[(0,o.jsx)(c.default,{theme:p}),h?(0,o.jsx)(l.default,{currentUserTheme:n,onListItemClick:e=>{t.set(e),m(!1)}}):null]})}},771:function(e,t,r){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const o=r(848),s=n(r(77)),a=n(r(277)),i=n(r(950));t.default=function({theme:e}){switch(e){case"light":return(0,o.jsx)(a.default,{});case"dark":return(0,o.jsx)(s.default,{});default:return(0,o.jsx)(i.default,{})}}},210:function(e,t,r){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const o=r(848),s=r(48),a=n(r(771)),i=n(r(625));t.default=function({currentUserTheme:e,onListItemClick:t}){return(0,o.jsx)("ul",{"data-testid":"theme-selector",children:[...s.themes,void 0].map((r=>{const n=(0,s.getThemeName)(r);return(0,o.jsxs)("li",{"data-testid":`theme-item-${n.toLowerCase()}`,onClick:()=>{t(r)},children:[(0,o.jsx)(a.default,{theme:r}),(0,o.jsx)("span",{children:n}),e===r&&(0,o.jsx)(i.default,{})]},n)}))})}},625:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(848);t.default=function(){return(0,n.jsx)("svg",{viewBox:"0 0 640 540",xmlns:"http://www.w3.org/2000/svg",className:"checked",children:(0,n.jsx)("path",{fill:"currentColor",d:"\n\t\t\t\t\tM 12,370\n\t\t\t\t\t\ta 40,40,0,0,1,56.56,-56.56\n\t\t\t\t\t\tl 130,130\n\t\t\t\t\t\tl 370,-430\n\t\t\t\t\t\ta 40,40,0,0,1,56.56,56.56\n\t\t\t\t\t\tl -398.28,458.28\n\t\t\t\t\t\ta 40,40,0,0,1,-56.56,0\n\t\t\t\t\t\tl -140,-140\n\t\t\t\t\tZ"})})}},77:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(848);t.default=function(){return(0,n.jsxs)("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"dark",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[(0,n.jsx)("circle",{cx:"50",cy:"50",r:"46",strokeDasharray:"180",transform:"rotate(22.5 50 50)"}),(0,n.jsx)("circle",{cx:"75",cy:"25",r:"46",strokeDasharray:"108 200",transform:"rotate(67.5 75 25)"})]})}},277:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(848);t.default=function(){return(0,n.jsxs)("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"light",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[(0,n.jsx)("circle",{cx:"50",cy:"50",r:"20"}),(0,n.jsx)("path",{d:"M 50 86 v 10",transform:"rotate(0 50 50)"}),(0,n.jsx)("path",{d:"M 50 86 v 10",transform:"rotate(90 50 50)"}),(0,n.jsx)("path",{d:"M 50 86 v 10",transform:"rotate(180 50 50)"}),(0,n.jsx)("path",{d:"M 50 86 v 10",transform:"rotate(270 50 50)"}),(0,n.jsx)("path",{d:"M 50 86 v 15",transform:"rotate(45 50 50)"}),(0,n.jsx)("path",{d:"M 50 86 v 15",transform:"rotate(135 50 50)"}),(0,n.jsx)("path",{d:"M 50 86 v 15",transform:"rotate(225 50 50)"}),(0,n.jsx)("path",{d:"M 50 86 v 15",transform:"rotate(315 50 50)"})]})}},950:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(848);t.default=function(){return(0,n.jsxs)("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"system",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[(0,n.jsx)("circle",{cx:"50",cy:"50",r:"46"}),(0,n.jsx)("path",{strokeWidth:"0",fill:"currentColor",d:"\n\t\t\t\t\tM 50,0\n\t\t\t\t\t\ta 50,50,0,1,1,0,100\n\t\t\t\t\tZ"})]})}},443:function(e,t,r){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ThemeSwitcher=t.ThemeSwitcherElement=void 0;const o=r(848),s=r(883),a=r(338),i=n(r(759));t.ThemeSwitcher=i.default,t.ThemeSwitcherElement=class{props;constructor(e){this.props=e}render(e){(0,a.createRoot)(e).render((0,o.jsx)(s.StrictMode,{children:(0,o.jsx)(i.default,{...this.props})}))}}},875:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.EventEmitter=void 0,t.EventEmitter=class{listeners={};on(e,t){(this.listeners[e]??=[]).push(t)}off(e,t){const r=this.listeners[e]??=[];r.splice(r.indexOf(t),1)}emit(e,...t){this.listeners[e]?.forEach((e=>{e(...t)}))}}},48:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.getThemeName=t.isTheme=t.defaultTheme=t.themes=void 0;const r=["light","dark"];t.themes=r,t.defaultTheme="light",t.isTheme=function(e){return"string"==typeof e&&r.includes(e)},t.getThemeName=function(e){switch(e){case"light":return"Light";case"dark":return"Dark";default:return"System"}}},6:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SystemProvider=void 0;const n=r(875),o=r(48);class s extends n.EventEmitter{get(){if(!("matchMedia"in window))return o.defaultTheme;for(const e of o.themes)if(window.matchMedia(`(prefers-color-scheme: ${e})`).matches)return e;return o.defaultTheme}watch(){if("matchMedia"in window)for(const e of o.themes)window.matchMedia(`(prefers-color-scheme: ${e})`).addEventListener("change",(t=>{t.matches&&this.emit("change",e)}))}}t.SystemProvider=s},12:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.UserProvider=void 0;const n=r(875),o=r(48);class s extends n.EventEmitter{storageKey="theme";get(){const e=localStorage.getItem(this.storageKey);return(0,o.isTheme)(e)?e:void 0}set(e){e?localStorage.setItem(this.storageKey,e):localStorage.removeItem(this.storageKey),this.emit("change",e)}}t.UserProvider=s},883:t=>{t.exports=e},845:e=>{e.exports=t}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var s=n[e]={id:e,exports:{}};return r[e].call(s.exports,s,s.exports,o),s.exports}return o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.nc=void 0,o(443)})()));

package/dist/theme-switcher-0.1.0.min.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+	preset    : 'ts-jest',
+	transform : {
+		'^.+\\.tsx?$' : [
+			'ts-jest',
+			{
+				tsconfig : '<rootDir>/tsconfig.test.json',
+			},
+		],
+	},
+
+	clearMocks      : true,
+	testEnvironment : 'jsdom',
+
+	roots     : [ '<rootDir>/src' ],
+	testMatch : [ '<rootDir>/src/**/__tests__/*.test.{ts,tsx}' ],
+
+	collectCoverageFrom : [
+		'<rootDir>/src/**/*.{ts,tsx}',
+		'!<rootDir>/src/**/__tests__/**',
+	],
+
+	moduleNameMapper : {
+		'\\.(css|less)$' : '<rootDir>/src/__mocks__/css.ts',
+	},
+};

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@anmiles/theme-switcher",
+	"version": "1.0.0",
+	"description": "Theme switcher for websites",
+	"keywords": [
+		"theme",
+		"switcher",
+		"websites"
+	],
+	"author": "Anatoliy Oblaukhov",
+	"homepage": "https://github.com/anmiles/theme-switcher",
+	"repository": "github:anmiles/theme-switcher",
+	"license": "MIT",
+	"engines": {
+		"node": ">=18.18.0"
+	},
+	"main": "src/index.tsx",
+	"scripts": {
+		"build": "rimraf dist && tsc -p ./tsconfig.build.json --noEmit && webpack --env mode=development && webpack --env mode=production",
+		"lint": "eslint .",
+		"lint:fix": "npm run lint -- --fix",
+		"test": "jest --verbose",
+		"test:coverage": "npm test -- --coverage",
+		"test:ci": "npm test -- --ci --coverage",
+		"test:watch": "npm test -- --watch",
+		"test:watch:coverage": "npm test -- --watch --coverage",
+		"test:report:coverage": "nyc report --nycrc-path ./coverage.config.js -t ./coverage --report-dir ./coverage",
+		"dev": "webpack serve --env mode=development --hot --open"
+	},
+	"dependencies": {
+		"@anmiles/logger": "^7.0.2",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
+	},
+	"devDependencies": {
+		"@anmiles/eslint-config": "^7.1.1",
+		"@anmiles/tsconfig": "^3.0.1",
+		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+		"@stylistic/eslint-plugin": "^1.7.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.0.1",
+		"@types/jest": "^29.5.12",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
+		"@typescript-eslint/eslint-plugin": "^7.3.1",
+		"@typescript-eslint/parser": "^7.3.1",
+		"css-loader": "^7.1.2",
+		"eslint": "^8.57.0",
+		"eslint-import-resolver-typescript": "^3.6.1",
+		"eslint-plugin-align-assignments": "^1.1.2",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-jest": "^27.9.0",
+		"eslint-plugin-jsonc": "^2.14.1",
+		"eslint-plugin-n": "^16.6.2",
+		"eslint-plugin-promise": "^6.1.1",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"nyc": "^15.1.0",
+		"react-refresh": "^0.14.2",
+		"react-refresh-typescript": "^2.0.9",
+		"rimraf": "^5.0.5",
+		"style-loader": "^4.0.0",
+		"ts-jest": "^29.1.2",
+		"ts-loader": "^9.5.1",
+		"typescript": "^5.4.2",
+		"webpack": "^5.96.1",
+		"webpack-cli": "^5.1.4",
+		"webpack-dev-server": "^5.1.0",
+		"webpack-merge": "^6.0.1"
+	}
+}

package/src/__mocks__/css.ts

@@ -0,0 +1 @@
+module.exports = {};

package/src/__tests__/index.test.tsx

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import { act } from '@testing-library/react';
+import type App from '../components/App';
+import { ThemeSwitcherElement } from '../index';
+
+const testId = 'app-test-id';
+
+jest.mock<typeof App>('../components/App', () => function App() {
+	return <div>{ testId }</div>;
+});
+
+describe('src/index', () => {
+	describe('ThemeSwitcher', () => {
+		it('should render App and pass float prop', () => {
+			const parentNode = document.createElement('div');
+			document.body.appendChild(parentNode);
+
+			act(() => {
+				new ThemeSwitcherElement({ float : 'left' }).render(parentNode);
+			});
+
+			expect(parentNode.innerHTML).toEqual(`<div>${testId}</div>`);
+		});
+	});
+});

package/src/__tests__/theme.test.ts

@@ -0,0 +1,23 @@
+import { isTheme, getThemeName } from '../lib/theme';
+
+describe('src/lib/theme', () => {
+	describe('isTheme', () => {
+		it('should return true if argument is theme', () => {
+			expect(isTheme('light')).toBe(true);
+			expect(isTheme('dark')).toBe(true);
+		});
+
+		it('should return false if argument is not a theme', () => {
+			expect(isTheme('unknown')).toBe(false);
+			expect(isTheme(undefined)).toBe(false);
+		});
+	});
+
+	describe('getThemeName', () => {
+		it('should match theme names', () => {
+			expect(getThemeName('light')).toEqual('Light');
+			expect(getThemeName('dark')).toEqual('Dark');
+			expect(getThemeName(undefined)).toEqual('System');
+		});
+	});
+});

package/src/components/App.tsx

@@ -0,0 +1,55 @@
+import type { CSSProperties } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+
+import { UserProvider } from '../providers/userProvider';
+import { SystemProvider } from '../providers/systemProvider';
+import '../styles/style.css';
+import Icon from './Icon';
+import ThemeSelector from './ThemeSelector';
+
+export interface AppProps {
+	readonly float? : CSSProperties['float'];
+}
+
+export default function App({ float }: AppProps) {
+	const userProvider   = useMemo(() => new UserProvider(), []);
+	const systemProvider = useMemo(() => new SystemProvider(), []);
+
+	const [ userTheme, setUserTheme ]     = useState(userProvider.get());
+	const [ systemTheme, setSystemTheme ] = useState(systemProvider.get());
+	const [ showList, setShowList ]       = useState(false);
+
+	const theme = userTheme ?? systemTheme;
+
+	useEffect(() => {
+		document.body.setAttribute('data-theme', theme);
+		userProvider.on('change', setUserTheme);
+		systemProvider.on('change', setSystemTheme);
+		systemProvider.watch();
+	}, [ theme, userProvider, systemProvider ]);
+
+	return (
+		<div
+			className="themeSwitcher"
+			data-testid="theme-switcher"
+			data-float={ float }
+			onClick={ () => {
+				setShowList(!showList);
+			} }
+		>
+			<Icon theme={ theme } />
+
+			{ !showList
+				? null
+				: (
+					<ThemeSelector
+						currentUserTheme={ userTheme }
+						onListItemClick={ (theme) => {
+							userProvider.set(theme);
+							setShowList(false);
+						} }
+					/>
+				) }
+		</div>
+	);
+}

package/src/components/Icon.tsx

@@ -0,0 +1,19 @@
+import type { Theme } from '../lib/theme';
+import Dark from './icons/Dark';
+import Light from './icons/Light';
+import System from './icons/System';
+
+interface IconProps {
+	readonly theme : Theme | undefined;
+}
+
+export default function Icon({ theme }: IconProps) {
+	switch (theme) {
+		case 'light':
+			return <Light />;
+		case 'dark':
+			return <Dark />;
+		default:
+			return <System />;
+	}
+}

package/src/components/ThemeSelector.tsx

@@ -0,0 +1,34 @@
+import type { Theme } from '../lib/theme';
+import { getThemeName, themes } from '../lib/theme';
+import Icon from './Icon';
+import Checked from './icons/Checked';
+
+interface ThemeSelectorProps {
+	readonly currentUserTheme : Theme | undefined;
+	readonly onListItemClick  : (theme: Theme | undefined) => void;
+}
+
+export default function ThemeSelector({ currentUserTheme, onListItemClick }: ThemeSelectorProps) {
+
+	return (
+		<ul data-testid="theme-selector">
+			{ [ ...themes, undefined ].map((theme) => {
+				const themeName = getThemeName(theme);
+
+				return (
+					<li
+						key={ themeName }
+						data-testid={ `theme-item-${themeName.toLowerCase()}` }
+						onClick={ () => {
+							onListItemClick(theme);
+						} }
+					>
+						<Icon theme={ theme } />
+						<span>{ themeName }</span>
+						{ currentUserTheme === theme && <Checked /> }
+					</li>
+				);
+			}) }
+		</ul>
+	);
+}

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

@@ -0,0 +1,350 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import type { UserProvider } from '../../providers/userProvider';
+import type { SystemProvider } from '../../providers/systemProvider';
+import type { AppProps } from '../App';
+import App from '../App';
+import { EventEmitter } from '../../lib/eventEmitter';
+import type { Theme } from '../../lib/theme';
+import '@testing-library/jest-dom';
+
+jest.mock('../icons/Checked.tsx', () => function Checked() {
+	return '{checked}';
+});
+
+jest.mock('../icons/Dark.tsx', () => function Dark() {
+	return '{dark}';
+});
+
+jest.mock('../icons/Light.tsx', () => function Light() {
+	return '{light}';
+});
+
+jest.mock('../icons/System.tsx', () => function System() {
+	return '{system}';
+});
+
+let userTheme: Theme | undefined;
+let systemTheme: Theme;
+
+const userEventEmitter   = new EventEmitter<{ change : [Theme | undefined] }>();
+const systemEventEmitter = new EventEmitter<{ change : [Theme | undefined] }>();
+
+const userProvider: Partial<InstanceType<typeof UserProvider>> = {
+	get : jest.fn().mockImplementation(() => userTheme),
+
+	set : jest.fn().mockImplementation((theme: Theme | undefined) => {
+		userEventEmitter['emit']('change', theme);
+	}),
+
+	on  : jest.fn().mockImplementation(userEventEmitter.on.bind(userEventEmitter)),
+	off : jest.fn().mockImplementation(userEventEmitter.off.bind(userEventEmitter)),
+};
+
+const systemProvider: Partial<InstanceType<typeof SystemProvider>> = {
+	get   : jest.fn().mockImplementation(() => systemTheme),
+	watch : jest.fn(),
+	on    : jest.fn().mockImplementation(systemEventEmitter.on.bind(systemEventEmitter)),
+	off   : jest.fn().mockImplementation(systemEventEmitter.on.bind(systemEventEmitter)),
+};
+
+jest.mock<{ UserProvider : typeof UserProvider }>('../../providers/userProvider', () => ({
+	UserProvider : jest.fn().mockImplementation(() => userProvider),
+}));
+
+jest.mock<{ SystemProvider : typeof SystemProvider }>('../../providers/systemProvider', () => ({
+	SystemProvider : jest.fn().mockImplementation(() => systemProvider),
+}));
+
+function renderApp({ float }: AppProps) {
+	render(
+		<App float={ float } />,
+	);
+}
+
+afterEach(() => {
+	document.body.removeAttribute('data-theme');
+});
+
+describe('src/App', () => {
+	describe('theme', () => {
+		function clickDropdownItem(theme: Theme | 'system'): void {
+			renderApp({});
+
+			const themeSwitcher = screen.getByTestId('theme-switcher');
+
+			act(() => {
+				fireEvent.click(themeSwitcher);
+			});
+
+			const dropdownItemTestId = `theme-item-${theme}`;
+			const dropdownItem       = screen.queryByTestId(dropdownItemTestId);
+
+			if (!dropdownItem) {
+				throw new Error(`Dropdown does not have an item with test id ${dropdownItemTestId}`);
+			}
+
+			act(() => {
+				fireEvent.click(dropdownItem);
+			});
+		}
+
+		it('should be forced to user theme (light)', () => {
+			systemTheme = 'dark';
+			userTheme   = 'light';
+
+			renderApp({});
+
+			expect(document.body.getAttribute('data-theme')).toBe('light');
+		});
+
+		it('should be forced to user theme (dark)', () => {
+			systemTheme = 'light';
+			userTheme   = 'dark';
+
+			renderApp({});
+
+			expect(document.body.getAttribute('data-theme')).toBe('dark');
+		});
+
+		it('should fallback to system theme(light) if user theme is not set', () => {
+			userTheme   = undefined;
+			systemTheme = 'light';
+
+			renderApp({});
+
+			expect(document.body.getAttribute('data-theme')).toBe('light');
+		});
+
+		it('should fallback to system theme(dark) if user theme is not set', () => {
+			userTheme   = undefined;
+			systemTheme = 'dark';
+
+			renderApp({});
+
+			expect(document.body.getAttribute('data-theme')).toBe('dark');
+		});
+
+		it('should be changed on change user provider', () => {
+			userTheme = 'light';
+
+			renderApp({});
+
+			expect(document.body.getAttribute('data-theme')).toBe('light');
+
+			act(() => {
+				userEventEmitter['emit']('change', 'dark');
+			});
+
+			expect(document.body.getAttribute('data-theme')).toBe('dark');
+		});
+
+		it('should be changed on change system provider if user theme is not defined', () => {
+			userTheme   = undefined;
+			systemTheme = 'light';
+
+			renderApp({});
+
+			expect(document.body.getAttribute('data-theme')).toBe('light');
+
+			act(() => {
+				systemEventEmitter['emit']('change', 'dark');
+			});
+
+			expect(document.body.getAttribute('data-theme')).toBe('dark');
+		});
+
+		it('should change to dark if dark item chosen', () => {
+			systemTheme = 'light';
+			userTheme   = 'light';
+
+			clickDropdownItem('dark');
+
+			expect(document.body.getAttribute('data-theme')).toBe('dark');
+		});
+
+		it('should change to light if light item chosen', () => {
+			systemTheme = 'dark';
+			userTheme   = 'dark';
+
+			clickDropdownItem('light');
+
+			expect(document.body.getAttribute('data-theme')).toBe('light');
+		});
+
+		it('should change to system dark if system item chosen', () => {
+			systemTheme = 'dark';
+			userTheme   = 'light';
+
+			clickDropdownItem('system');
+
+			expect(document.body.getAttribute('data-theme')).toBe('dark');
+		});
+
+		it('should change to system light if system item chosen', () => {
+			systemTheme = 'light';
+			userTheme   = 'dark';
+
+			clickDropdownItem('system');
+
+			expect(document.body.getAttribute('data-theme')).toBe('light');
+		});
+	});
+
+	describe('icon', () => {
+		it('should match light system theme if user theme is not defined', () => {
+			userTheme   = undefined;
+			systemTheme = 'light';
+
+			renderApp({});
+
+			const themeSwitcher = screen.getByTestId('theme-switcher');
+			expect(themeSwitcher.innerHTML).toEqual('{light}');
+		});
+
+		it('should match dark system theme if user theme is not defined', () => {
+			userTheme   = undefined;
+			systemTheme = 'dark';
+
+			renderApp({});
+
+			const themeSwitcher = screen.getByTestId('theme-switcher');
+			expect(themeSwitcher.innerHTML).toEqual('{dark}');
+		});
+
+		it('should match light user theme despite of system theme', () => {
+			userTheme   = 'light';
+			systemTheme = 'dark';
+
+			renderApp({});
+
+			const themeSwitcher = screen.getByTestId('theme-switcher');
+			expect(themeSwitcher.innerHTML).toEqual('{light}');
+		});
+
+		it('should match dark user theme despite of system theme', () => {
+			userTheme   = 'dark';
+			systemTheme = 'light';
+
+			renderApp({});
+
+			const themeSwitcher = screen.getByTestId('theme-switcher');
+			expect(themeSwitcher.innerHTML).toEqual('{dark}');
+		});
+	});
+
+	describe('switcher', () => {
+		describe('html', () => {
+
+			function actOnThemeSwitcher(): HTMLElement {
+				renderApp({});
+
+				const themeSwitcher = screen.getByTestId('theme-switcher');
+
+				act(() => {
+					fireEvent.click(themeSwitcher);
+				});
+
+				return themeSwitcher;
+			}
+
+			it('should match snapshot on light system theme', () => {
+				userTheme   = undefined;
+				systemTheme = 'light';
+
+				expect(actOnThemeSwitcher()).toMatchSnapshot();
+			});
+
+			it('should match snapshot on dark system theme', () => {
+				userTheme   = undefined;
+				systemTheme = 'light';
+
+				expect(actOnThemeSwitcher()).toMatchSnapshot();
+			});
+
+			it('should match snapshot on light user theme', () => {
+				userTheme   = 'light';
+				systemTheme = 'dark';
+
+				expect(actOnThemeSwitcher()).toMatchSnapshot();
+			});
+
+			it('should match snapshot on dark user theme', () => {
+				userTheme   = 'dark';
+				systemTheme = 'light';
+
+				expect(actOnThemeSwitcher()).toMatchSnapshot();
+			});
+		});
+
+		describe('data-float', () => {
+			it('should be set left from float prop', () => {
+				renderApp({ float : 'left' });
+
+				const themeSwitcher = screen.getByTestId('theme-switcher');
+				expect(themeSwitcher.getAttribute('data-float')).toEqual('left');
+			});
+
+			it('should be set right from float prop', () => {
+				renderApp({ float : 'right' });
+
+				const themeSwitcher = screen.getByTestId('theme-switcher');
+				expect(themeSwitcher.getAttribute('data-float')).toEqual('right');
+			});
+
+			it('should be empty if float prop is not set', () => {
+				renderApp({});
+
+				const themeSwitcher = screen.getByTestId('theme-switcher');
+				expect(themeSwitcher.getAttribute('data-float')).toEqual(null);
+			});
+		});
+
+		describe('interaction', () => {
+			it('should toggle on themeSwitcher click', () => {
+				systemTheme = 'light';
+				userTheme   = 'dark';
+
+				renderApp({});
+
+				const themeSwitcher = screen.getByTestId('theme-switcher');
+
+				act(() => {
+					fireEvent.click(themeSwitcher);
+				});
+
+				expect(screen.queryByTestId('theme-selector')).toBeInTheDocument();
+
+				act(() => {
+					fireEvent.click(themeSwitcher);
+				});
+
+				expect(screen.queryByTestId('theme-selector')).not.toBeInTheDocument();
+			});
+
+			it('should hide on dropdown item click', () => {
+				systemTheme = 'light';
+				userTheme   = 'dark';
+
+				renderApp({});
+
+				const themeSwitcher = screen.getByTestId('theme-switcher');
+
+				act(() => {
+					fireEvent.click(themeSwitcher);
+				});
+
+				const dropdownItem = themeSwitcher.querySelector('li');
+
+				if (!dropdownItem) {
+					throw new Error('Dropdown does not have items');
+				}
+
+				act(() => {
+					fireEvent.click(dropdownItem);
+				});
+
+				expect(screen.queryByTestId('theme-selector')).not.toBeInTheDocument();
+			});
+		});
+	});
+});