react-themeable - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -20,3 +22,10 @@
 
-exports['default'] = function (theme) {
+exports['default'] = function (input) {
+  var _ref = Array.isArray(input) && input.length === 2 ? input : [input, null];
+
+  var _ref2 = _slicedToArray(_ref, 2);
+
+  var theme = _ref2[0];
+  var classNameDecorator = _ref2[1];
+
   return function (key) {
@@ -31,3 +40,3 @@ for (var _len = arguments.length, names = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
 
-    return typeof styles[0] === 'string' ? { key: key, className: styles.join(' ') } : { key: key, style: _objectAssign2['default'].apply(undefined, [{}].concat(_toConsumableArray(styles))) };
+    return typeof styles[0] === 'string' || typeof classNameDecorator === 'function' ? { key: key, className: classNameDecorator ? classNameDecorator.apply(undefined, _toConsumableArray(styles)) : styles.join(' ') } : { key: key, style: _objectAssign2['default'].apply(undefined, [{}].concat(_toConsumableArray(styles))) };
   };
@@ -34,0 +43,0 @@ };

package.json

 {
   "name": "react-themeable",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Utility for making React components easily themeable",
   "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "babel-istanbul cover _mocha -- --compilers js:babel/register && babel-istanbul check-coverage --branches 100",
+    "coverage": "cat ./coverage/coverage.json | ./node_modules/codecov.io/bin/codecov.io.js",
     "build": "babel src -d dist",
@@ -25,4 +26,8 @@ "prepublish": "npm run build"
   "devDependencies": {
-    "babel": "^5.6.14"
+    "babel": "^5.6.14",
+    "babel-istanbul": "^0.2.10",
+    "chai": "^3.0.0",
+    "codecov.io": "^0.1.5",
+    "mocha": "^2.2.5"
   }
 }

README.md

@@ -0,1 +1,3 @@
+[![Build Status](https://img.shields.io/travis/markdalgleish/react-themeable/master.svg?style=flat-square)](http://travis-ci.org/markdalgleish/react-themeable) [![Coverage](https://img.shields.io/codecov/c/github/markdalgleish/react-themeable/master.svg?style=flat-square)](https://codecov.io/github/markdalgleish/react-themeable) [![npm](https://img.shields.io/npm/v/react-themeable.svg?style=flat-square)](https://www.npmjs.com/package/react-themeable)
+
 # react-themeable
@@ -11,3 +13,3 @@
 
-With react-themeable, you can support custom themes provided by [CSS Modules](https://github.com/css-modules/css-modules), [Radium](http://projects.formidablelabs.com/radium/), [React Style](https://github.com/js-next/react-style), or even plain old style objects as easily as this:
+With react-themeable, you can support custom themes provided by [CSS Modules](https://github.com/css-modules/css-modules), [Radium](http://projects.formidablelabs.com/radium/), [Aphrodite](https://github.com/Khan/aphrodite), [React Style](https://github.com/js-next/react-style), [JSS](https://github.com/jsstyles/jss), global CSS or inline styles as easily as this:
 
@@ -26,4 +28,12 @@ ```js
 
-This function is designed to accept a `theme` prop inside of your `render` method. This then returns a small helper function that accepts a key and a series of classes/style names.
+This function is designed to accept a `theme` prop inside of your `render` method. This then returns a small helper function that accepts a key and a series of style names.
 
+```js
+const theme = themeable(this.props.theme);
+...
+<div {...theme(key, ...styleNames)} />
+```
+
+*Note: A unique key for each themed element is required for [Radium](http://projects.formidablelabs.com/radium/) to work correctly.*
+
 This helper function detects whether a theme is class or style based, and creates the appropriate attributes for you.
@@ -89,2 +99,22 @@
 
+### Aphrodite
+
+```js
+import { StyleSheet, css } from 'aphrodite';
+
+const theme = StyleSheet.create({
+  foo: {
+    color: 'red',
+    ':hover': {
+      color: 'green'
+    }
+  },
+  bar: {
+    color: 'blue'
+  }
+});
+...
+<MyComponent theme={[ theme, css ]} />
+```
+
 ### React Style
@@ -107,6 +137,40 @@
 
-### Plain style objects
+### JSS
 
 ```js
+import jss from 'jss';
+
+const sheet = jss.createStyleSheet({
+  foo: {
+    color: 'red'
+  },
+  bar: {
+    color: 'blue'
+  }
+}).attach();
+...
+<MyComponent theme={sheet.classes} />
+```
+
+### Global CSS
+
+```css
+.MyComponent__foo { color: red; }
+.MyComponent__foo:hover { color: green; }
+.MyComponent__bar { color: blue; }
+```
+
+```js
 const theme = {
+  foo: 'MyComponent__foo',
+  bar: 'MyComponent__bar'
+};
+...
+<MyComponent theme={theme} />
+```
+
+### Inline styles
+
+```js
+const theme = {
   foo: {
@@ -113,0 +177,0 @@ color: 'red'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50486

increased by1044.03%

Number of package files

15

increased by200%

Lines of code

510

increased by2218.18%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

186

increased by52.46%

Worsened metrics

Dev dependency count

5

increased by400%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes