cf-style-container - npm Package Compare versions

Comparing version 7.0.0 to 8.0.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+       <a name="8.0.0"></a>
+# [8.0.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@7.0.0...cf-style-container@8.0.0) (2018-03-13)
+
+
+### Bug Fixes
+
+* **cf-style-container:** UI-434 updated HOCs to use displayName ([de1a95d](http://stash.cfops.it:7999/www/cf-ux/commits/de1a95d))
+
+
+### BREAKING CHANGES
+
+* **cf-style-container:** new displayName
+
+
+
+
        <a name="7.0.0"></a>
@@ -49,3 +65,3 @@ # [7.0.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@6.0.2...cf-style-container@7.0.0) (2018-03-12)
 
-       <a name="6.0.2"></a>
+      <a name="6.0.2"></a>
 ## [6.0.2](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@6.0.1...cf-style-container@6.0.2) (2018-01-18)
@@ -61,3 +77,3 @@
 
-      <a name="6.0.1"></a>
+     <a name="6.0.1"></a>
 ## [6.0.1](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@6.0.0...cf-style-container@6.0.1) (2017-11-22)
@@ -74,3 +90,3 @@
 
-     <a name="6.0.0"></a>
+    <a name="6.0.0"></a>
 # [6.0.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@5.3.2...cf-style-container@6.0.0) (2017-11-14)
@@ -95,3 +111,3 @@
 
-    <a name="5.3.2"></a>
+   <a name="5.3.2"></a>
 ## [5.3.2](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@5.3.1...cf-style-container@5.3.2) (2017-11-08)
@@ -98,0 +114,0 @@

es/applyStaticStyles.js

@@ -13,3 +13,6 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import { withTheme } from 'react-fela'; // eslint-disable-line behance/no-deprecated
+import { hocDisplayName, addDisplayName } from './displayName';
 
+export var getDisplayName = hocDisplayName('WithStaticStyles');
+
 var applyStaticStyles = function applyStaticStyles(staticStyles, ComponentToWrap) {
@@ -50,5 +53,8 @@ var CompWithStaticStyles = function (_PureComponent) {
 
-  return withTheme(CompWithStaticStyles);
+  var WithThemeHOC = withTheme(CompWithStaticStyles);
+  addDisplayName(WithThemeHOC, ComponentToWrap, getDisplayName);
+
+  return WithThemeHOC;
 };
 
 export default applyStaticStyles;

es/applyTheme.js

@@ -14,3 +14,6 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import mergeThemes from './mergeThemes';
+import { hocDisplayName, addDisplayName } from './displayName';
 
+export var getDisplayName = hocDisplayName('Themed');
+
 var applyTheme = function applyTheme(ComponentToWrap) {
@@ -45,9 +48,12 @@ for (var _len = arguments.length, themes = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
   ThemedComponent._isFelaComponent = true;
-  ThemedComponent.displayName = 'Themed' + ComponentToWrap.displayName;
   ThemedComponent.propTypes = {
     theme: PropTypes.object
   };
-  return withTheme(ThemedComponent);
+
+  var WithThemeHOC = withTheme(ThemedComponent);
+  addDisplayName(WithThemeHOC, ComponentToWrap, getDisplayName);
+
+  return WithThemeHOC;
 };
 
 export default applyTheme;

es/createComponent.js

 import { createComponent as createFelaComponent } from 'react-fela'; // eslint-disable-line behance/no-deprecated
+import { hocDisplayName, addDisplayName } from './displayName';
+export var getDisplayName = hocDisplayName('FelaComponent');
 
+//similar to react-fela's createComponent. However, it automatically adds PropTypes from `[type]`
+//in case that it is a React Component.
+//Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
+//You should use this HOC every time when you want to use Fela in your component.
 var createComponent = function createComponent(rule) {
   var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
   var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return createFelaComponent(rule, type, type.propTypes ? passThroughProps.concat(Object.keys(type.propTypes)) : passThroughProps);
+
+  var Component = createFelaComponent(rule, type, type.propTypes ? passThroughProps.concat(Object.keys(type.propTypes)) : passThroughProps);
+
+  addDisplayName(Component, type, getDisplayName);
+  return Component;
 };
 
 export default createComponent;

es/createComponentStyles.js

 import { connect } from 'react-fela'; // eslint-disable-line behance/no-deprecated
+import { hocDisplayName, addDisplayName } from './displayName';
 
+export var getDisplayName = hocDisplayName('ConnectedFelaComponent');
+
 var createComponentStyles = function createComponentStyles(styleFunctions, component) {
-  return connect(styleFunctions)(component);
+  var ConnectedComponent = connect(styleFunctions)(component);
+  addDisplayName(ConnectedComponent, component, getDisplayName);
+  return ConnectedComponent;
 };
 
 export default createComponentStyles;

es/index.js

@@ -5,9 +5,9 @@ import { combineRules } from 'fela'; // eslint-disable-line behance/no-deprecated
 
-import applyStaticStyles from './applyStaticStyles';
-import applyTheme from './applyTheme';
-import createComponent from './createComponent';
-import createComponentStyles from './createComponentStyles';
+import applyStaticStyles, { getDisplayName as getApplyStatisticStylesDisplayName } from './applyStaticStyles';
+import applyTheme, { getDisplayName as getApplyThemeDisplayName } from './applyTheme';
+import createComponent, { getDisplayName as getCreateComponentDisplayName } from './createComponent';
+import createComponentStyles, { getDisplayName as getCreateComponentStylesDisplayName } from './createComponentStyles';
 import createStyledComponent from './createStyledComponent';
-import withRenderer from './withRenderer';
+import withRenderer, { getDisplayName as getWithRendererDisplayName } from './withRenderer';
 
-export { createComponent, applyTheme, ThemeProvider, connect, combineRules, createComponentStyles, capitalize, withTheme, withRenderer, applyStaticStyles, createStyledComponent };
+export { createComponent, getCreateComponentDisplayName, applyTheme, getApplyThemeDisplayName, ThemeProvider, connect, combineRules, createComponentStyles, getCreateComponentStylesDisplayName, capitalize, withTheme, withRenderer, getWithRendererDisplayName, applyStaticStyles, getApplyStatisticStylesDisplayName, createStyledComponent };

es/withRenderer.js

@@ -14,3 +14,6 @@ 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 PropTypes from 'prop-types';
+import { hocDisplayName, addDisplayName } from './displayName';
 
+export var getDisplayName = hocDisplayName('withRenderer');
+
 var withRenderer = function withRenderer(ComponentToWrap) {
@@ -36,4 +39,5 @@ var WithRendererComponent = function (_Component) {
 
-  WithRendererComponent.displayName = 'WithRenderer' + ComponentToWrap.displayName;
   WithRendererComponent.contextTypes = { renderer: PropTypes.object };
+  addDisplayName(WithRendererComponent, ComponentToWrap, getDisplayName);
+
   return WithRendererComponent;
@@ -40,0 +44,0 @@ };

lib/applyStaticStyles.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.getDisplayName = undefined;
 
@@ -18,6 +19,10 @@ var _react = require('react');
 
+var _displayName = require('./displayName');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// eslint-disable-line behance/no-deprecated
+/* eslint-disable behance/no-deprecated */
+const getDisplayName = exports.getDisplayName = (0, _displayName.hocDisplayName)('WithStaticStyles'); // eslint-disable-line behance/no-deprecated
 
+
 const applyStaticStyles = (staticStyles, ComponentToWrap) => {
@@ -44,4 +49,8 @@ class CompWithStaticStyles extends _react.PureComponent {
 
-  return (0, _reactFela.withTheme)(CompWithStaticStyles);
-}; /* eslint-disable behance/no-deprecated */
+  const WithThemeHOC = (0, _reactFela.withTheme)(CompWithStaticStyles);
+  (0, _displayName.addDisplayName)(WithThemeHOC, ComponentToWrap, getDisplayName);
+
+  return WithThemeHOC;
+};
+
 exports.default = applyStaticStyles;

lib/applyTheme.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.getDisplayName = undefined;
 
@@ -22,5 +23,10 @@ var _react = require('react');
 
+var _displayName = require('./displayName');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable behance/no-deprecated */
+// eslint-disable-line behance/no-deprecated
+const getDisplayName = exports.getDisplayName = (0, _displayName.hocDisplayName)('Themed'); /* eslint-disable behance/no-deprecated */
+
+
 const applyTheme = (ComponentToWrap, ...themes) => {
@@ -38,8 +44,12 @@ class ThemedComponent extends _react.Component {
   ThemedComponent._isFelaComponent = true;
-  ThemedComponent.displayName = `Themed${ComponentToWrap.displayName}`;
   ThemedComponent.propTypes = {
     theme: _propTypes2.default.object
   };
-  return (0, _reactFela.withTheme)(ThemedComponent);
-}; // eslint-disable-line behance/no-deprecated
+
+  const WithThemeHOC = (0, _reactFela.withTheme)(ThemedComponent);
+  (0, _displayName.addDisplayName)(WithThemeHOC, ComponentToWrap, getDisplayName);
+
+  return WithThemeHOC;
+};
+
 exports.default = applyTheme;

lib/createComponent.js

@@ -6,9 +6,23 @@ 'use strict';
 });
+exports.getDisplayName = undefined;
 
 var _reactFela = require('react-fela');
 
+var _displayName = require('./displayName');
+
+const getDisplayName = exports.getDisplayName = (0, _displayName.hocDisplayName)('FelaComponent');
+
+//similar to react-fela's createComponent. However, it automatically adds PropTypes from `[type]`
+//in case that it is a React Component.
+//Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
+//You should use this HOC every time when you want to use Fela in your component.
 // eslint-disable-line behance/no-deprecated
+const createComponent = (rule, type = 'div', passThroughProps = []) => {
+  const Component = (0, _reactFela.createComponent)(rule, type, type.propTypes ? passThroughProps.concat(Object.keys(type.propTypes)) : passThroughProps);
 
-const createComponent = (rule, type = 'div', passThroughProps = []) => (0, _reactFela.createComponent)(rule, type, type.propTypes ? passThroughProps.concat(Object.keys(type.propTypes)) : passThroughProps);
+  (0, _displayName.addDisplayName)(Component, type, getDisplayName);
+  return Component;
+};
 
 exports.default = createComponent;

lib/createComponentStyles.js

@@ -6,9 +6,17 @@ 'use strict';
 });
+exports.getDisplayName = undefined;
 
 var _reactFela = require('react-fela');
 
-// eslint-disable-line behance/no-deprecated
+var _displayName = require('./displayName');
 
-const createComponentStyles = (styleFunctions, component) => (0, _reactFela.connect)(styleFunctions)(component);
+const getDisplayName = exports.getDisplayName = (0, _displayName.hocDisplayName)('ConnectedFelaComponent'); // eslint-disable-line behance/no-deprecated
 
+
+const createComponentStyles = (styleFunctions, component) => {
+  const ConnectedComponent = (0, _reactFela.connect)(styleFunctions)(component);
+  (0, _displayName.addDisplayName)(ConnectedComponent, component, getDisplayName);
+  return ConnectedComponent;
+};
+
 exports.default = createComponentStyles;

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.createStyledComponent = exports.applyStaticStyles = exports.withRenderer = exports.withTheme = exports.capitalize = exports.createComponentStyles = exports.combineRules = exports.connect = exports.ThemeProvider = exports.applyTheme = exports.createComponent = undefined;
+exports.createStyledComponent = exports.getApplyStatisticStylesDisplayName = exports.applyStaticStyles = exports.getWithRendererDisplayName = exports.withRenderer = exports.withTheme = exports.capitalize = exports.getCreateComponentStylesDisplayName = exports.createComponentStyles = exports.combineRules = exports.connect = exports.ThemeProvider = exports.getApplyThemeDisplayName = exports.applyTheme = exports.getCreateComponentDisplayName = exports.createComponent = undefined;
 
@@ -43,3 +43,5 @@ var _fela = require('fela');
 exports.createComponent = _createComponent2.default;
+exports.getCreateComponentDisplayName = _createComponent.getDisplayName;
 exports.applyTheme = _applyTheme2.default;
+exports.getApplyThemeDisplayName = _applyTheme.getDisplayName;
 exports.ThemeProvider = _reactFela.ThemeProvider;
@@ -49,6 +51,9 @@ exports.connect = _reactFela.connect;
 exports.createComponentStyles = _createComponentStyles2.default;
+exports.getCreateComponentStylesDisplayName = _createComponentStyles.getDisplayName;
 exports.capitalize = _underscore.capitalize;
 exports.withTheme = _reactFela.withTheme;
 exports.withRenderer = _withRenderer2.default;
+exports.getWithRendererDisplayName = _withRenderer.getDisplayName;
 exports.applyStaticStyles = _applyStaticStyles2.default;
+exports.getApplyStatisticStylesDisplayName = _applyStaticStyles.getDisplayName;
 exports.createStyledComponent = _createStyledComponent2.default; // eslint-disable-line behance/no-deprecated

lib/withRenderer.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.getDisplayName = undefined;
 
@@ -19,4 +20,8 @@ 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; }; /* eslint-disable behance/no-deprecated */
 
+var _displayName = require('./displayName');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const getDisplayName = exports.getDisplayName = (0, _displayName.hocDisplayName)('withRenderer');
+
 const withRenderer = ComponentToWrap => {
@@ -28,4 +33,5 @@ class WithRendererComponent extends _react.Component {
   }
-  WithRendererComponent.displayName = `WithRenderer${ComponentToWrap.displayName}`;
   WithRendererComponent.contextTypes = { renderer: _propTypes2.default.object };
+  (0, _displayName.addDisplayName)(WithRendererComponent, ComponentToWrap, getDisplayName);
+
   return WithRendererComponent;
@@ -32,0 +38,0 @@ };

package.json

 {
   "name": "cf-style-container",
   "description": "Cloudflare Style Container",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "main": "lib/index.js",
@@ -18,2 +18,3 @@ "module": "es/index.js",
     "prop-types": "^15.6.0",
+    "react-display-name": "^0.2.3",
     "react-fela": "^6.1.0",
@@ -20,0 +21,0 @@ "seamless-immutable": "^7.1.2",

README.md

@@ -25,2 +25,4 @@ # cf-style-container
 
+Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
 You should use this HOC every time when you want to use Fela in your component. **This is a primary way how to style React components**.
@@ -56,4 +58,6 @@
 
-Creates a new component that implements the [component styling API](https://wiki.cfops.it/pages/viewpage.action?pageId=126075383) and maps style rules to design system primitives. 
+Creates a new component that implements the [component styling API](https://wiki.cfops.it/pages/viewpage.action?pageId=126075383) and maps style rules to design system primitives.
 
+Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
 Style rules can be defined in a similar fashion to `createComponent` during initialisation, but can also be overridden on an instance-by-instance basis using props on the component itself.
@@ -63,3 +67,3 @@
 const Box = createStyledComponent(() => {});
-
+Box.setDisplayName('Box');
 <Box backgroundColor="marine" px={3} py={2}>
@@ -74,2 +78,4 @@ What a lovely blue box!
 
+Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
 ```jsx
@@ -116,2 +122,4 @@ import React from 'react';
 
+Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
 ```jsx
@@ -138,6 +146,8 @@ import HeadingUnstyled from './Heading';
 
+Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
 ```jsx
 import { withTheme } from 'cf-style-container';
 
-const MyComponent = ({ theme }) => <div>Color: {theme.colors.hail}</div> 
+const MyComponent = ({ theme }) => <div>Color: {theme.colors.hail}</div>
 
@@ -153,2 +163,4 @@ export default withTheme(MyComponent);
 
+Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
 ```jsx
@@ -164,3 +176,3 @@ import { withRenderer } from 'cf-style-container';
   return (<div>Class name: {className}</div>);
-} 
+}
 
@@ -177,2 +189,4 @@ export default withRenderer(MyComponent);
 
+Adds a displayName to the created component and provides a way to setDisplayName again outside of the call
+
 ```jsx
@@ -179,0 +193,0 @@ import { applyStaticStyles } from 'cf-style-container';

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59845

increased by13.26%

Number of downloads

264

increased by450%

Number of package files

22

increased by10%

Lines of code

775

increased by13.64%

Number of lines in readme file

194

increased by7.78%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Addedreact-display-name@^0.2.3

• + Addedreact-display-name@0.2.5(transitive)