@anmiles/theme-switcher 1.0.0

package/.eslintignore

@@ -0,0 +1,2 @@
+coverage
+dist

package/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+	root : true,
+
+	extends : [
+		'./node_modules/@anmiles/eslint-config/src/base.preset.js',
+		'./node_modules/@anmiles/eslint-config/src/ts.preset.js',
+		'./node_modules/@anmiles/eslint-config/src/jest.preset.js',
+		'./node_modules/@anmiles/eslint-config/src/react.preset.js',
+	],
+};

package/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"cSpell.words": [
+		"anmiles",
+		"nycrc"
+	]
+}

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0](../../tags/v1.0.0) - 2024-12-15
+### Changed
+- First official release
+
+## [0.1.0] - 2024-11-30
+### Added
+- First version (not covered by unit tests; not released on NPM for now)

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) {YEAR} Anatoliy Oblaukhov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,88 @@
+# @anmiles/theme-switcher
+
+Theme switcher for websites
+
+----
+
+## Installation
+
+### For React+TS project
+
+1. Install package:
+    ```bash
+    npm install @anmiles/theme-switcher
+    ```
+
+2. Import component:
+    ```ts
+    import { ThemeSwitcher } from '@anmiles/theme-switcher';
+    ```
+
+3. Use component:
+    ```ts
+    <ThemeSwitcher float="right" />
+    ```
+    where
+    - `float` _(optional)_ - position of icon and dropdown box
+
+### For static HTML website
+
+1. Clone repository:
+    ```bash
+    git clone https://github.com/anmiles/theme-switcher.git
+    ```
+
+2. Copy all files from `dist` into the target website.
+
+4. Create HTML container for theme switcher:
+
+    ```html
+    <div class="my-selector"></div>
+    ```
+
+5. Include React library and theme switcher:
+
+    ### Development
+
+    ```html
+    <script type="text/javascript" src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+    <script type="text/javascript" src="./theme-switcher-1.0.0.js"></script>
+    ```
+
+    ### Production
+
+    ```html
+    <script type="text/javascript" src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+    <script type="text/javascript" src="./theme-switcher-1.0.0.min.js"></script>
+    ```
+
+6. Place theme switcher into container:
+
+    ```html
+    <script type="text/javascript">
+        new ThemeSwitcher({ float: 'right' })
+            .render(document.querySelector('.my-selector'));
+    </script>
+    ```
+    where
+    - `float` _(optional)_ - position of icon and dropdown box
+
+## Usage
+
+Use selectors to write theme-specific styles:
+
+```css
+    body[data-theme="light"] .selector {
+        /* css rules */
+    }
+```
+
+```css
+    body[data-theme="dark"] .selector {
+        /* css rules */
+    }
+```
+
+Or you can just write default styles for light theme and override them for dark theme using `body[data-theme="dark"]`.

package/coverage.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	'check-coverage' : true,
+	'statements'     : 100,
+	'branches'       : 100,
+	'lines'          : 100,
+	'functions'      : 100,
+	'reporter'       : [ 'html', 'text' ],
+};

package/dev/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Debug</title>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="https://dev.anmiles.net/index.css" type="text/css">
+	<link rel="icon" href="https://dev.anmiles.net/favicon.ico" type="image/x-icon">
+	<style type="text/css">
+		.theme {
+			cursor: pointer;
+			float: right;
+		}
+	</style>
+</head>
+<body>
+
+<div class="top">
+	<div class="theme"></div>
+</div>
+
+<div class="box">
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper pretium nunc vel fermentum. Morbi egestas dictum maximus. Sed convallis vulputate nibh nec elementum. Nunc maximus posuere ipsum sit amet sollicitudin. In ullamcorper sagittis neque non tristique. Phasellus ac purus sit amet enim cursus aliquet et quis enim. Suspendisse sit amet tincidunt ante, at interdum tellus. Proin mauris nulla, porttitor a neque nec, lacinia tristique turpis. Aenean ac commodo turpis.</p>
+
+	<p>Nulla consectetur magna eget felis dignissim, ut pellentesque libero venenatis. Suspendisse tempus blandit dui, ut volutpat nisl. Nam laoreet sit amet dui eu pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi blandit, volutpat sem sed, placerat eros. Duis dignissim id velit eu placerat. Sed a magna efficitur diam ultrices pulvinar. Suspendisse placerat massa orci. Ut a facilisis nisi. Morbi imperdiet neque id orci luctus facilisis. Suspendisse sit amet consectetur tortor, a elementum ipsum.</p>
+
+</div>
+
+<script type="text/javascript" src="https://dev.anmiles.net/libs/react-18.3.1.js"></script>
+<script type="text/javascript" src="https://dev.anmiles.net/libs/react-dom-18.3.1.js"></script>
+<script type="text/javascript" src="./theme-switcher-1.0.0.js"></script>
+<script type="text/javascript">new ThemeSwitcherElement({ float: 'right' }).render(document.querySelector('.theme'));</script>
+
+</body>
+</html>