kempo-ui 0.0.2 → 0.0.3

package/src/components/ThemeSwitcher.js

@@ -0,0 +1,108 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
+import './Icon.js';
+
+export default class ThemeSwitcher extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		currentTheme: { type: String, reflect: true, attribute: 'current-theme' }
+	};
+
+	constructor() {
+		super();
+		this.currentTheme = ThemeSwitcher.getCurrentTheme();
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleClick = () => {
+		const current = ThemeSwitcher.getCurrentTheme();
+		if(current === 'auto') ThemeSwitcher.setTheme('light');
+		if(current === 'light') ThemeSwitcher.setTheme('dark');
+		if(current === 'dark') ThemeSwitcher.setTheme('auto');
+	}
+
+	handleStorageChange = () => {
+		this.currentTheme = ThemeSwitcher.getCurrentTheme();
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		window.addEventListener('storage', this.handleStorageChange);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener('storage', this.handleStorageChange);
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			--padding: var(--spacer);
+			display: flex;
+		}
+		button {
+			padding: var(--padding);
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		const iconName = this.currentTheme === 'auto' ? 'mode-auto' :
+						this.currentTheme === 'light' ? 'mode-light' : 'mode-dark';
+
+		return html`
+			<button
+				class="no-btn"
+				@click=${this.handleClick}
+			>
+				<k-icon name=${iconName}></k-icon>
+			</button>
+		`;
+	}
+	static styles = css`
+		:host {
+			--padding: var(--spacer, 1rem);
+		}
+		button.no-btn {
+			padding: var(--padding);
+		}
+	`;
+
+	/*
+		Static Methods
+	*/
+	static setTheme(theme) {
+		localStorage.setItem('theme', theme);
+		document.documentElement.setAttribute('theme', theme);
+		window.dispatchEvent(new StorageEvent('storage', { key: 'theme', newValue: theme }));
+	}
+
+	static getCurrentTheme() {
+		let theme = document.documentElement.getAttribute('theme');
+		if(!theme) theme = localStorage.getItem('theme');
+		return theme || 'auto';
+	}
+}
+
+/*
+	Auto Theme Detection
+*/
+const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const colorSchemeChangeHandler = event => document.documentElement.setAttribute('auto-theme', event.matches ? 'dark' : 'light');
+colorSchemeQuery.addEventListener('change', colorSchemeChangeHandler);
+colorSchemeChangeHandler(colorSchemeQuery);
+
+ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme());
+customElements.define('k-theme-switcher', ThemeSwitcher);

package/src/kempo-hljs.css

@@ -0,0 +1,146 @@
+:root,
+[theme="light"] {
+  --c_text: #000000;
+  --c_keyword: #0000ff;
+  --c_builtin: #00b0e8;
+  --c_number: #709756;
+  --c_string: #a31515;
+  --c_regex: #914525;
+  --c_function: inherit;
+  --c_comment: #008000;
+  --c_doc: #808080;
+  --c_tag: #7d7d7d;
+  --c_var: #b436bf;
+  --c_attr: #ff0000;
+  --c_section: #a31515;
+  --c_selector: #0000ff;
+  --c_addition: #a31515;
+  --c_deletion: #2b91af;
+  --c_caret: black;
+}
+[auto-theme="dark"]:not([theme="light"]),
+[theme="dark"] {
+  --c_text: #DCDCDC;
+  --c_keyword: #569CD6;
+  --c_builtin: #4EC9B0;
+  --c_number: #B8D7A3;
+  --c_string: #D69D85;
+  --c_regex: #9A5334;
+  --c_function: inehrit;
+  --c_comment: #57A64A;
+  --c_doc: #608B4E;
+  --c_tag: #9B9B9B;
+  --c_var: #BD63C5;
+  --c_attr: #9CDCFE;
+  --c_section: #ffd700;
+  --c_selector: #569CD6;
+  --c_addition: #144212;
+  --c_deletion: #600;
+  --c_caret: white;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  color: var(--c_text);
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name,
+.hljs-link {
+  color: var(--c_keyword);
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: var(--c_builtin);
+}
+
+.hljs-number,
+.hljs-class {
+  color: var(--c_number);
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: var(--c_string);
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: var(--c_regex);
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: var(--c_function);
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--c_comment);
+  font-style: italic
+}
+
+.hljs-doctag {
+  color: var(--c_doc);
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: var(--c_tag);
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: var(--c_var);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: var(--c_attr);
+}
+
+.hljs-section {
+  color: var(--c_section);
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: bold
+}
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: var(--c_selector);
+}
+
+.hljs-addition {
+  background-color: var(--c_addition);
+  display: inline-block;
+  width: 100%
+}
+
+.hljs-deletion {
+  background-color: var(--c_deletion);
+  display: inline-block;
+  width: 100%
+}

package/src/utils/cli.js

@@ -1,43 +1,43 @@
-import { spawn } from 'child_process';
-
-export const getArgs = mapping => {
-  const args = {};
-  const argv = process.argv.slice(2);
-  
-  for(let i = 0; i < argv.length; i++) {
-    const arg = argv[i];
-    if(arg.startsWith('-')) {
-      const key = arg.replace(/^-+/, '');
-      const mappedKey = mapping[key] || key;
-      const nextArg = argv[i + 1];
-      
-      if(nextArg && !nextArg.startsWith('-')) {
-        args[mappedKey] = nextArg;
-        i++;
-      } else {
-        args[mappedKey] = true;
-      }
-    }
-  }
-  
-  return args;
-};
-
-export const runChildNodeProcess = scriptPath => {
-  const child = spawn('node', [scriptPath], {
-    stdio: 'inherit',
-    shell: true
-  });
-  
-  return new Promise((resolve, reject) => {
-    child.on('close', code => {
-      if(code === 0) {
-        resolve();
-      } else {
-        reject(new Error(`Process exited with code ${code}`));
-      }
-    });
-    
-    child.on('error', reject);
-  });
-};
+import { spawn } from 'child_process';
+
+export const getArgs = mapping => {
+  const args = {};
+  const argv = process.argv.slice(2);
+  
+  for(let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if(arg.startsWith('-')) {
+      const key = arg.replace(/^-+/, '');
+      const mappedKey = mapping[key] || key;
+      const nextArg = argv[i + 1];
+      
+      if(nextArg && !nextArg.startsWith('-')) {
+        args[mappedKey] = nextArg;
+        i++;
+      } else {
+        args[mappedKey] = true;
+      }
+    }
+  }
+  
+  return args;
+};
+
+export const runChildNodeProcess = scriptPath => {
+  const child = spawn('node', [scriptPath], {
+    stdio: 'inherit',
+    shell: true
+  });
+  
+  return new Promise((resolve, reject) => {
+    child.on('close', code => {
+      if(code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Process exited with code ${code}`));
+      }
+    });
+    
+    child.on('error', reject);
+  });
+};

package/src/utils/fs-utils.js

@@ -1,41 +1,41 @@
-import fs from 'fs/promises';
-import path from 'path';
-
-export const ensureDir = async dirPath => {
-  try {
-    await fs.mkdir(dirPath, { recursive: true });
-  } catch (error) {
-    if(error.code !== 'EEXIST') {
-      throw error;
-    }
-  }
-};
-
-export const copyDir = async (src, dest) => {
-  await ensureDir(dest);
-  const entries = await fs.readdir(src, { withFileTypes: true });
-  
-  for(const entry of entries) {
-    const srcPath = path.join(src, entry.name);
-    const destPath = path.join(dest, entry.name);
-    
-    if(entry.isDirectory()) {
-      await copyDir(srcPath, destPath);
-    } else {
-      await fs.copyFile(srcPath, destPath);
-    }
-  }
-};
-
-export const emptyDir = async dirPath => {
-  try {
-    const entries = await fs.readdir(dirPath);
-    await Promise.all(entries.map(entry => 
-      fs.rm(path.join(dirPath, entry), { recursive: true, force: true })
-    ));
-  } catch (error) {
-    if(error.code !== 'ENOENT') {
-      throw error;
-    }
-  }
-};
+import fs from 'fs/promises';
+import path from 'path';
+
+export const ensureDir = async dirPath => {
+  try {
+    await fs.mkdir(dirPath, { recursive: true });
+  } catch (error) {
+    if(error.code !== 'EEXIST') {
+      throw error;
+    }
+  }
+};
+
+export const copyDir = async (src, dest) => {
+  await ensureDir(dest);
+  const entries = await fs.readdir(src, { withFileTypes: true });
+  
+  for(const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    
+    if(entry.isDirectory()) {
+      await copyDir(srcPath, destPath);
+    } else {
+      await fs.copyFile(srcPath, destPath);
+    }
+  }
+};
+
+export const emptyDir = async dirPath => {
+  try {
+    const entries = await fs.readdir(dirPath);
+    await Promise.all(entries.map(entry => 
+      fs.rm(path.join(dirPath, entry), { recursive: true, force: true })
+    ));
+  } catch (error) {
+    if(error.code !== 'ENOENT') {
+      throw error;
+    }
+  }
+};

package/src/utils/propConverters.js

@@ -0,0 +1,11 @@
+// Boolean converter that uses explicit "true"/"false" string values
+export const boolTrueFalse = {
+	fromAttribute: v => v === null ? undefined : v.toLowerCase() === 'true',
+	toAttribute: v => v ? 'true' : 'false'
+};
+
+// Boolean converter that uses attribute presence/absence
+export const boolExists = {
+	fromAttribute: v => v !== null,
+	toAttribute: v => v ? '' : null
+};