Introduce Styletron for component styles

packages/gallery/package.json

@@ -23,6 +23,8 @@
 		"pouchdb-core": "~6.3.4",
 		"pouchdb-replication": "~6.3.4",
 		"router": "2.0.0",
+		"styletron": "^2.5.1",
+		"styletron-utils": "^2.5.4",
 		"webpack": "~3.8.1",
 		"webpack-dev-server": "~2.9.2"
 	},

packages/gallery/src/interface/gallery.js

@@ -1,4 +1,4 @@
-import { defineView, defineElement as el } from 'domvm';
+import { defineView } from 'domvm';
 import * as image from '../data/image.js';
 import * as index from '../data/indexType.js';
 import * as imageTag from '../context/manageImageTags.js';
@@ -7,6 +7,7 @@ import { AlbumView } from './album.js';
 import { router, routeChanged } from '../services/router.js';
 import { LiveArray } from '../utils/livearray.js';
 import { Watcher } from '../utils/watcher.js';
+import { styled, el } from '../utils/styletron.js';
 
 function uploadImages(evt) {
 	image.add(evt.currentTarget.files);
@@ -48,12 +49,15 @@ export function GalleryView(vm, model) {
 		const members = data();
 
 		return el('.gallery', [
+			header([
+				el('div', { css: { fontSize: '20pt' } }, 'Gallery'),
 				el('input#fInput', {
 					type: 'file',
 					multiple: true,
 					accept: 'image/jpeg',
 					onchange: uploadImages
-			}),
+				})
+			]),
 			el('a', { href: router.href('images') }, 'Images'),
 			el('a', { href: router.href('albums') }, 'Albums'),
 			el('h1', title),
@@ -86,3 +90,11 @@ export function GalleryView(vm, model) {
 		]);
 	};
 }
+
+const header = styled({
+	justifyContent: 'space-between',
+	padding: '1em',
+	zIndex: 1,
+	display: 'flex',
+	alignItems: 'center'
+});

packages/gallery/src/utils/styletron.js

@@ -0,0 +1,49 @@
+import Styletron from 'styletron';
+import { injectStyle as _injectStyle } from 'styletron-utils';
+import { defineElement } from 'domvm';
+
+const styletronSingleton = new Styletron();
+
+export function injectStyle(styles) {
+	return _injectStyle(styletronSingleton, styles);
+}
+
+function isObject(obj) {
+	return typeof obj === 'object' && !Array.isArray(obj);
+}
+
+export function el(sig, ...attrsOrChildren) {
+	let attrs = {};
+	let children = attrsOrChildren;
+	if (attrsOrChildren.length && isObject(attrsOrChildren[0])) {
+		attrs = attrsOrChildren[0];
+		children = attrsOrChildren.slice(1);
+		if (isObject(attrs.css)) {
+			const className = injectStyle(Object.assign(attrs.css, attrs.styles || {}));
+			attrs.className = `${className} ${attrs.className || ''}`.trim();
+			delete attrs.css;
+			delete attrs.styles;
+		}
+	}
+	return defineElement(sig, attrs, ...children);
+}
+
+export function styled(styles, tagName = 'div') {
+	const className = injectStyle(styles);
+
+	return (...props) => {
+		const attrIndex = props.length && isObject(props[0]) ? 0 : -1;
+		const attrs =
+			attrIndex === -1
+				? { class: className }
+				: Object.assign({}, props[0], { className: `${className} ${props[0].className || ''}`.trim() });
+
+		if (isObject(attrs.css)) {
+			attrs.styles = styles;
+			attrs.class = props[0].class || '';
+		}
+
+		const children = props.slice(attrIndex + 1);
+		return el(tagName, attrs, children);
+	};
+}