react-base16-styling - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

lib/index.js

@@ -43,5 +43,2 @@ 'use strict';
 };
-var returnEmptyObject = function returnEmptyObject() {
-  return {};
-};
 var DEFAULT_BASE16 = base16.default;
@@ -90,3 +87,3 @@
 
-var createStyling = (0, _lodash2.default)(function (options) {
+var createStyling = exports.createStyling = (0, _lodash2.default)(function (getStylingFromBase16, options) {
   for (var _len2 = arguments.length, args = Array(_len2 > 4 ? _len2 - 4 : 0), _key2 = 4; _key2 < _len2; _key2++) {
@@ -96,9 +93,8 @@ args[_key2 - 4] = arguments[_key2];
 
-  var themeOrStyling = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
-  var base16Themes = arguments[2];
+  var themeOrStyling = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
   var isLightTheme = arguments[3];
-  var _options$getStylingFr = options.getStylingFromBase16;
-  var getStylingFromBase16 = _options$getStylingFr === undefined ? returnEmptyObject : _options$getStylingFr;
   var _options$defaultBase = options.defaultBase16;
   var defaultBase16 = _options$defaultBase === undefined ? DEFAULT_BASE16 : _options$defaultBase;
+  var _options$base16Themes = options.base16Themes;
+  var base16Themes = _options$base16Themes === undefined ? null : _options$base16Themes;
 
@@ -124,3 +120,3 @@
 
-var getBase16Theme = function getBase16Theme(theme, base16Themes) {
+var getBase16Theme = exports.getBase16Theme = function getBase16Theme(theme, base16Themes) {
   if (theme && theme.extend) {
@@ -135,5 +131,2 @@ theme = theme.extend;
   return theme && theme.hasOwnProperty('base00') ? theme : undefined;
-};
-
-exports.createStyling = createStyling;
-exports.getBase16Theme = getBase16Theme;
+};

package.json

 {
   "name": "react-base16-styling",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "React styling with base16 color scheme support",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -14,2 +14,72 @@ # react-base16-styling
 
-[TBD]
+```jsx
+import { createStyling } from 'react-base16-styling';
+import base16Themes from './base16Themes';
+
+function getStylingFromBase16(base16Theme) {
+  return {
+    myComponent: {
+      backgroundColor: base16Theme.base00
+    },
+
+    myComponentToggleColor({ style, className }, clickCount) {
+      return {
+        style: {
+          ...style,
+          backgroundColor: clickCount % 2 ? 'red' : 'blue'
+        }
+      }
+    }
+  };
+}
+
+const createStylingFromTheme = createStyling(getStylingFromBase16, {
+  defaultBase16: base16Themes.solarized,
+  base16Themes
+});
+
+class MyComponent extends Component {
+  state = { clickCount: 0 }
+  render() {
+    const { theme, isLightTheme } = this.props;
+    const { clickCount } = this.state;
+    
+    const styling = createStylingFromTheme(theme, isLightTheme);
+    
+    return (
+      <div {...styling('myComponent')}>
+        <a onClick={() => this.setState({ clickCount: clickCount + 1 })}>Click Me</a>
+        <div {...styling('myComponentToggleColor', clickCount)}>
+          {clickCount}
+        </div>
+      </div>
+    )
+  }
+}
+```
+
+## `createStyling`
+
+```js
+function(getStylingFromBase16, defaultStylingOptions, themeOrStyling, isLightTheme)
+```
+
+Argument | Signature | Description
+----|-----|-----
+`getStylingFromBase16` | `function(base16Theme)` | creates object with default stylings for your component, using provided base16 theme.
+`defaultStylingOptions` | `{ defaultBase16, base16Themes }` | optional parameters, allow to set default `base16` theme and additional `base16` themes for component
+`themeOrStyling` | `string` or `object` | `base16` theme name, `base16` theme object or styling object
+`isLightTheme` | `boolean` | if `true`, theme colors are inverted, creating light version of the theme
+
+
+Styling object values could be:
+    - objects (treated as style definitions)
+    - strings (class names)
+    - functions (they may be provided with additional parameters and should return object { style, className })
+
+## `getBase16Theme`
+```js
+function(themeOrStyling, base16Themes)
+```
+
+Helper method that returns `base16` theme object if `themeOrStyling` is `base16` theme name or theme object.

No alert changes

Improved metrics

Number of lines in readme file

85

increased by466.67%

Worsened metrics

Total package byte prevSize

9381

decreased by-16.81%

Number of package files

4

decreased by-50%

Lines of code

90

decreased by-43.4%

No dependency changes