From 0e1c24bfead5d49d0a61a5333c535429c51da7b2 Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Mon, 6 Nov 2017 21:39:25 -0600
Subject: [PATCH] Introduce Styletron for component styles

---
 packages/gallery/package.json             |  2 +
 packages/gallery/src/interface/gallery.js | 26 ++++++++----
 packages/gallery/src/utils/styletron.js   | 49 +++++++++++++++++++++++
 3 files changed, 70 insertions(+), 7 deletions(-)
 create mode 100644 packages/gallery/src/utils/styletron.js

diff --git a/packages/gallery/package.json b/packages/gallery/package.json
index 7b71c0f..6424627 100644
--- a/packages/gallery/package.json
+++ b/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"
 	},
diff --git a/packages/gallery/src/interface/gallery.js b/packages/gallery/src/interface/gallery.js
index 41abfcf..0f3f8b4 100644
--- a/packages/gallery/src/interface/gallery.js
+++ b/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', [
-			el('input#fInput', {
-				type: 'file',
-				multiple: true,
-				accept: 'image/jpeg',
-				onchange: uploadImages
-			}),
+			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'
+});
diff --git a/packages/gallery/src/utils/styletron.js b/packages/gallery/src/utils/styletron.js
new file mode 100644
index 0000000..f56ca01
--- /dev/null
+++ b/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);
+	};
+}