cf-style-container - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

es/index.js

@@ -13,3 +13,4 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 import cssColorFunction from 'css-color-function';
-import { createComponent as createFelaComponent, ThemeProvider } from 'react-fela';
+import { combineRules } from 'fela';
+import { createComponent as createFelaComponent, ThemeProvider, connect } from 'react-fela';
 
@@ -58,2 +59,15 @@ var color = function color(input) {
 
-export { createComponent, applyTheme, ThemeProvider, color };
+var createComponentStyles = function createComponentStyles(styleFunctions, component) {
+  var mapStylesToProps = function mapStylesToProps(props) {
+    return function (renderer) {
+      var toRender = {};
+      for (var style in styleFunctions) {
+        toRender[style] = renderer.renderRule(styleFunctions[style], props);
+      }
+      return toRender;
+    };
+  };
+  return connect(mapStylesToProps)(component);
+};
+
+export { createComponent, applyTheme, ThemeProvider, color, connect, combineRules, createComponentStyles };

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.color = exports.ThemeProvider = exports.applyTheme = exports.createComponent = undefined;
+exports.createComponentStyles = exports.combineRules = exports.connect = exports.color = exports.ThemeProvider = exports.applyTheme = exports.createComponent = undefined;
 
@@ -21,2 +21,4 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _fela = require('fela');
+
 var _reactFela = require('react-fela');
@@ -74,5 +76,21 @@
 
+var createComponentStyles = function createComponentStyles(styleFunctions, component) {
+  var mapStylesToProps = function mapStylesToProps(props) {
+    return function (renderer) {
+      var toRender = {};
+      for (var style in styleFunctions) {
+        toRender[style] = renderer.renderRule(styleFunctions[style], props);
+      }
+      return toRender;
+    };
+  };
+  return (0, _reactFela.connect)(mapStylesToProps)(component);
+};
+
 exports.createComponent = createComponent;
 exports.applyTheme = applyTheme;
 exports.ThemeProvider = _reactFela.ThemeProvider;
-exports.color = color;
+exports.color = color;
+exports.connect = _reactFela.connect;
+exports.combineRules = _fela.combineRules;
+exports.createComponentStyles = createComponentStyles;

package.json

 {
   "name": "cf-style-container",
   "description": "Cloudflare Style Container",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

README.md

@@ -5,3 +5,3 @@ # cf-style-container
 
-Set of high order components for fela based applications.
+Set of high order components and other helpers for fela based applications.
 
@@ -13,1 +13,96 @@ ## Installation
 ```
+
+### Aliased functions from fela and react-fela
+
+We proxy/alias some useful functions from fela without changing their behaviour. See the original documentation for more details. We wrap all Fela APIs so we can eventually switch Fela to a different CSS in JS lib if ever needed.
+
+- [combineRules](https://github.com/rofrischmann/fela/blob/master/docs/api/fela/combineRules.md)
+- [connect](https://github.com/rofrischmann/fela/blob/master/packages/react-fela/docs/connect.md)
+- [ThemeProvider](https://github.com/rofrischmann/fela/blob/master/packages/react-fela/docs/ThemeProvider.md)
+
+### createComponent(rule, [type])
+
+Very similar to [createComponent](https://github.com/rofrischmann/fela/blob/master/packages/react-fela/docs/createComponent.md) from react-fela. However, it automatically adds PropTypes from `[type]` in case that it is a React Component.
+
+You should use this HOC every time when you want to use Fela in your component and you need only one className (one rule function).
+
+```jsx
+import React, { PropTypes } from 'react';
+import { createComponent } from 'cf-style-container';
+
+const styles = ({ theme, size }) => ({
+  fontWeight: theme[`fontWeight${size}`],
+  fontSize: theme[`fontSize${size}`],
+  lineHeight: theme[`lineHeight${size}`],
+  marginTop: theme[`marginTop${size}`]
+});
+
+const Heading = ({ size, className, children }) => {
+  const tagName = 'h' + size;
+  return React.createElement(tagName, { className }, children);
+};
+
+Heading.propTypes = {
+  size: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
+  className: PropTypes.string.isRequired,
+  children: PropTypes.node
+};
+
+export default createComponent(styles, Heading);
+```
+
+### createComponentStyles(rules, Component)
+
+Useful when you need multiple classNames (and rules) in one component.
+
+```jsx
+import React, { PropTypes } from 'react';
+import { createComponentStyles } from 'cf-style-container';
+
+const mainStyles = ({ theme }) => ({
+  margin: theme.main.margin,
+  padding: theme.main.padding,
+});
+
+const legendStyles = ({ theme }) => ({
+  padding: theme.legend.padding,
+  marginBottom: theme.legend.marginBottom,
+  borderBottom: theme.legend.borderBottom,
+});
+
+const FormFieldset = ({ legend, styles }) => (
+  <fieldset className={styles.mainStyles}>
+    {' '}
+    <legend className={styles.legendStyles}>
+      {legend}
+    </legend>
+  </fieldset>
+);
+
+FormFieldset.propTypes = {
+  styles: PropTypes.object.isRequired,
+  legend: PropTypes.string.isRequired
+};
+
+export default createComponentStyles({ mainStyles, legendStyles }, FormFieldset);
+```
+
+Notice that rules are now an object. The names you chose will be used for classNames
+accessible as `styles.mainStyles` and `styles.legendStyles` in this case.
+
+### applyTheme(Component, theme)
+
+And HOC that ties a Fela component with the theme (adds the theme to its context).
+
+```jsx
+import HeadingUnstyled from './Heading';
+import HeadingTheme from './HeadingTheme';
+
+import { applyTheme } from 'cf-style-container';
+
+const Heading = applyTheme(HeadingUnstyled, HeadingTheme);
+
+// themed component
+<Heading />
+```
+

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

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

Improved metrics

Total package byte prevSize

220039

increased by1.97%

Lines of code

4851

increased by0.6%

Number of lines in readme file

107

increased by791.67%

No dependency changes