Initial commit 💥

Author: javivelasco

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["react", "es2015", "stage-0"],
+  "plugins": [
+    "transform-decorators-legacy"
+  ]
+}

.gitignore

@@ -0,0 +1,4 @@
+build
+lib
+node_modules
+npm-debug.log

.travis

@@ -0,0 +1,10 @@
+language: node_js
+sudo: false
+cache:
+  directories:
+    - node_modules
+node_js:
+  - "4"
+  - "5"
+before_install:
+  - npm install -g babel-cli

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Javier Velasco
+
+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.

README.md

@@ -0,0 +1 @@
+# React CSS Themr

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "react-css-themr",
+  "version": "0.0.1",
+  "description": "React CSS Themr",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "babel src --out-dir lib",
+    "prepublish": "rimraf lib && npm run build",
+    "test": "mocha --compilers js:babel-core/register --recursive --reporter spec --require ./test/setup.js",
+    "test:watch": "npm test -- --watch"
+  },
+  "author": "Javi Velasco <[email protected]> (http://javivelasco.com/)",
+  "license": "MIT",
+  "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-cli": "^6.7.7",
+    "babel-core": "^6.7.7",
+    "babel-eslint": "^6.0.3",
+    "babel-plugin-add-module-exports": "^0.1.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "chai": "^3.5.0",
+    "eslint": "^2.8.0",
+    "expect": "^1.18.0",
+    "jsdom": "^8.4.0",
+    "mocha": "^2.4.5",
+    "react": "^15.0.1",
+    "react-addons-test-utils": "^15.0.1",
+    "rimraf": "^2.5.2"
+  },
+  "peerDependencies": {
+    "react": "^0.14.0 || ^15.0.0-0"
+  }
+}

src/components/ThemeProvider.js

@@ -0,0 +1,29 @@
+import { Children, Component, PropTypes } from 'react';
+import themrShape from '../utils/themr-shape';
+
+export default class ThemeProvider extends Component {
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+    theme: PropTypes.object.isRequired
+  };
+
+  static defaultProps = {
+    theme: {}
+  };
+
+  static childContextTypes = {
+    themr: themrShape.isRequired
+  };
+
+  getChildContext () {
+    return {
+      themr: {
+        theme: this.props.theme
+      }
+    };
+  }
+
+  render () {
+    return Children.only(this.props.children);
+  }
+}

src/components/themr.js

@@ -0,0 +1,49 @@
+import React, { Component, PropTypes } from 'react';
+
+const DEFAULT_OPTIONS = {
+  composeTheme: true
+};
+
+export default (componentName, localTheme, options = DEFAULT_OPTIONS) => (ThemedComponent) => {
+  const { composeTheme: optionComposeTheme } = options;
+  return class Themed extends Component {
+    static contextTypes = {
+      themr: PropTypes.object
+    };
+
+    static propTypes = {
+      composeTheme: PropTypes.bool,
+      theme: PropTypes.object
+    };
+
+    static defaultProps = {
+      composeTheme: optionComposeTheme
+    };
+
+    getTheme() {
+      if (!this.props.composeTheme && this.props.theme) return this.props.theme;
+      if (!this.props.composeTheme && localTheme) return localTheme;
+      const contextTheme = localTheme
+        ? themeable(this.context.themr.theme[componentName], localTheme)
+        : this.context.themr.theme[componentName];
+      return themeable(contextTheme, this.props.theme);
+    }
+
+    render () {
+      return React.createElement(ThemedComponent, {
+        ...this.props,
+        theme: this.getTheme()
+      });
+    }
+  }
+};
+
+
+function themeable(style = {}, theme) {
+  if (!theme) return style;
+  return [...Object.keys(theme), ...Object.keys(style)].reduce((result, key) => (
+    theme[key] && style[key] && theme[key].indexOf(style[key]) === -1
+      ? { ...result, [key]: `${style[key]} ${theme[key]}` }
+      : { ...result, [key]: theme[key] || style[key] }
+  ), {});
+}

src/index.js

@@ -0,0 +1,2 @@
+export { default as ThemeProvider } from './components/ThemeProvider';
+export { default as themr } from './components/themr';

src/utils/themr-shape.js

@@ -0,0 +1,5 @@
+import { PropTypes } from 'react'
+
+export default PropTypes.shape({
+  theme: PropTypes.object.isRequired
+})

test/components/ThemeProvider.spec.js

@@ -0,0 +1,68 @@
+import expect from 'expect'
+import React, { PropTypes, Component } from 'react'
+import TestUtils from 'react-addons-test-utils'
+import { ThemeProvider } from '../../src/index'
+
+describe('ThemeProvider', () => {
+  class Child extends Component {
+    render() {
+      return <div />
+    }
+  }
+
+  Child.contextTypes = {
+    themr: PropTypes.object.isRequired
+  }
+
+  it('enforces a single child', () => {
+    const theme = {}
+
+    // Ignore propTypes warnings
+    const propTypes = ThemeProvider.propTypes
+    ThemeProvider.propTypes = {}
+
+    try {
+      expect(() => TestUtils.renderIntoDocument(
+        <ThemeProvider theme={theme}>
+          <div />
+        </ThemeProvider>
+      )).toNotThrow()
+
+      expect(() => TestUtils.renderIntoDocument(
+        <ThemeProvider theme={theme}>
+        </ThemeProvider>
+      )).toThrow(/exactly one child/)
+
+      expect(() => TestUtils.renderIntoDocument(
+        <ThemeProvider theme={theme}>
+          <div />
+          <div />
+        </ThemeProvider>
+      )).toThrow(/exactly one child/)
+    } finally {
+      ThemeProvider.propTypes = propTypes
+    }
+  })
+
+  it('should add the theme to the child context', () => {
+    const theme = {}
+
+    TestUtils.renderIntoDocument(
+      <ThemeProvider theme={theme}>
+        <Child />
+      </ThemeProvider>
+    )
+
+    const spy = expect.spyOn(console, 'error')
+    const tree = TestUtils.renderIntoDocument(
+      <ThemeProvider theme={theme}>
+        <Child />
+      </ThemeProvider>
+    )
+    spy.destroy()
+    expect(spy.calls.length).toBe(0)
+
+    const child = TestUtils.findRenderedComponentWithType(tree, Child)
+    expect(child.context.themr.theme).toBe(theme)
+  })
+})