@hig/theme-context - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0

build/index.es.js

@@ -0,31 +1,33 @@
+import createReactContext from 'create-react-context';
+import defaultTheme from '@hig/theme-data/build/json/lightGrayMediumDensityTheme/theme.json';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Component } from 'react';
-import defaultTheme from '@hig/theme-data/build/json/lightGrayMediumDensityTheme/theme.json';
 
-var themeContextShape = {
-  /** Data about the theme */
-  metadata: PropTypes.shape({
-    /** Uniquely identifies a theme */
-    id: PropTypes.string.isRequired,
-    /** A theme's human-readable name */
-    name: PropTypes.string.isRequired,
-    /** A class available to identify the color scheme */
-    className: PropTypes.string.isRequired,
-    /** A color scheme's human-readable name */
-    colorSchemeName: PropTypes.string.isRequired,
-    /** Uniquely identifies color scheme of the theme */
-    colorSchemeId: PropTypes.string.isRequired,
-    /** Data describing density level of the theme */
-    density: PropTypes.string.isRequired,
-    /** A human-readable label for the theme's density */
-    densityName: PropTypes.string.isRequired
-  }),
-  /** Data describing presentation of the theme */
-  resolvedRoles: PropTypes.object.isRequired,
-  /** Data describing configuration of the theme */
-  unresolvedRoles: PropTypes.object.isRequired
-};
+var _createReactContext = createReactContext(defaultTheme),
+    Provider = _createReactContext.Provider,
+    Consumer = _createReactContext.Consumer;
 
-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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
+function createThemeProxy(theme) {
+  return new Proxy(theme, {
+    get: function get(obj, propertyName) {
+      var value = obj[propertyName];
+      var isValidProperty = Object.prototype.hasOwnProperty.call(obj, propertyName);
+
+      if (!isValidProperty) {
+        /* eslint-disable-next-line no-console */
+        console.error("Role " + propertyName.toString() + " does not exist");
+        return null;
+      }
+
+      if ((typeof value === "undefined" ? "undefined" : _typeof(value)) === "object" && value !== null) {
+        return createThemeProxy(value);
+      }
+
+      return value;
+    }
+  });
+}
+
 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; }; }();
@@ -39,116 +41,38 @@
 
-var Provider = function (_Component) {
-  _inherits(Provider, _Component);
+var Consumer$1 = function (_Component) {
+  _inherits(Consumer$$1, _Component);
 
-  function Provider() {
-    _classCallCheck(this, Provider);
+  function Consumer$$1() {
+    _classCallCheck(this, Consumer$$1);
 
-    return _possibleConstructorReturn(this, (Provider.__proto__ || Object.getPrototypeOf(Provider)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Consumer$$1.__proto__ || Object.getPrototypeOf(Consumer$$1)).apply(this, arguments));
   }
 
-  _createClass(Provider, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return _extends({}, this.props.value);
-    }
-  }, {
+  _createClass(Consumer$$1, [{
     key: "render",
     value: function render() {
-      return this.props.children;
-    }
-  }]);
+      var _this2 = this;
 
-  return Provider;
-}(Component);
+      return React.createElement(
+        Consumer,
+        null,
+        function (value) {
+          var theme = value.resolvedRoles ? value : defaultTheme;
+          var isDebugging = process.env.NODE_ENV !== "production";
+          var result = isDebugging ? createThemeProxy(theme) : theme;
 
-Provider.propTypes = {
-  /** A theme provided to the consumer within */
-  value: PropTypes.shape(themeContextShape),
-  /** Content within will be provided with the passed theme */
-  children: PropTypes.node.isRequired
-};
-Provider.childContextTypes = themeContextShape;
-Provider.defaultProps = {
-  value: defaultTheme
-};
-Provider.__docgenInfo = {
-  "description": "",
-  "displayName": "Provider",
-  "props": {
-    "value": {
-      "type": {
-        "name": "shape",
-        "value": "import themeContextShape from \"./shape\";",
-        "computed": true
-      },
-      "required": false,
-      "description": "A theme provided to the consumer within",
-      "defaultValue": {
-        "value": "defaultTheme",
-        "computed": true
-      }
-    },
-    "children": {
-      "type": {
-        "name": "node"
-      },
-      "required": true,
-      "description": "Content within will be provided with the passed theme"
+          return _this2.props.children(result);
+        }
+      );
     }
-  }
-};
-
-var _createClass$1 = 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; }; }();
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var themeDataProxyHandler = {
-  get: function get(theme, name) {
-    var stringName = name.toString();
-    if (name in theme) {
-      if (_typeof(theme[name]) === "object" && theme[name] !== null) {
-        return new Proxy(theme[name], themeDataProxyHandler);
-      }
-      return theme[name];
-    }
-    console.error("Role " + stringName + " does not exist");
-    return null;
-  }
-};
-
-var Consumer = function (_Component) {
-  _inherits$1(Consumer, _Component);
-
-  function Consumer() {
-    _classCallCheck$1(this, Consumer);
-
-    return _possibleConstructorReturn$1(this, (Consumer.__proto__ || Object.getPrototypeOf(Consumer)).apply(this, arguments));
-  }
-
-  _createClass$1(Consumer, [{
-    key: "render",
-    value: function render() {
-      var theme = this.context.resolvedRoles ? this.context : defaultTheme;
-      var proxy = new Proxy(theme, themeDataProxyHandler);
-      var themeArgument = process.env.NODE_ENV !== "production" ? proxy : theme;
-
-      return this.props.children(themeArgument);
-    }
   }]);
 
-  return Consumer;
+  return Consumer$$1;
 }(Component);
 
-Consumer.propTypes = {
+Consumer$1.propTypes = {
   /** A theme provided to the consumer within */
   children: PropTypes.func
 };
-Consumer.contextTypes = themeContextShape;
-Consumer.__docgenInfo = {
+Consumer$1.__docgenInfo = {
   "description": "",
@@ -167,5 +91,5 @@ "displayName": "Consumer",
 
-var index = { Provider: Provider, Consumer: Consumer };
+var index = { Provider: Provider, Consumer: Consumer$1 };
 
 export default index;
 export { index as ThemeContext };

build/index.js

@@ -7,32 +7,35 @@ 'use strict';
 
+var createReactContext = _interopDefault(require('create-react-context'));
+var defaultTheme = _interopDefault(require('@hig/theme-data/build/json/lightGrayMediumDensityTheme/theme.json'));
+var React = require('react');
+var React__default = _interopDefault(React);
 var PropTypes = _interopDefault(require('prop-types'));
-var react = require('react');
-var defaultTheme = _interopDefault(require('@hig/theme-data/build/json/lightGrayMediumDensityTheme/theme.json'));
 
-var themeContextShape = {
-  /** Data about the theme */
-  metadata: PropTypes.shape({
-    /** Uniquely identifies a theme */
-    id: PropTypes.string.isRequired,
-    /** A theme's human-readable name */
-    name: PropTypes.string.isRequired,
-    /** A class available to identify the color scheme */
-    className: PropTypes.string.isRequired,
-    /** A color scheme's human-readable name */
-    colorSchemeName: PropTypes.string.isRequired,
-    /** Uniquely identifies color scheme of the theme */
-    colorSchemeId: PropTypes.string.isRequired,
-    /** Data describing density level of the theme */
-    density: PropTypes.string.isRequired,
-    /** A human-readable label for the theme's density */
-    densityName: PropTypes.string.isRequired
-  }),
-  /** Data describing presentation of the theme */
-  resolvedRoles: PropTypes.object.isRequired,
-  /** Data describing configuration of the theme */
-  unresolvedRoles: PropTypes.object.isRequired
-};
+var _createReactContext = createReactContext(defaultTheme),
+    Provider = _createReactContext.Provider,
+    Consumer = _createReactContext.Consumer;
 
-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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
+function createThemeProxy(theme) {
+  return new Proxy(theme, {
+    get: function get(obj, propertyName) {
+      var value = obj[propertyName];
+      var isValidProperty = Object.prototype.hasOwnProperty.call(obj, propertyName);
+
+      if (!isValidProperty) {
+        /* eslint-disable-next-line no-console */
+        console.error("Role " + propertyName.toString() + " does not exist");
+        return null;
+      }
+
+      if ((typeof value === "undefined" ? "undefined" : _typeof(value)) === "object" && value !== null) {
+        return createThemeProxy(value);
+      }
+
+      return value;
+    }
+  });
+}
+
 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; }; }();
@@ -46,116 +49,38 @@
 
-var Provider = function (_Component) {
-  _inherits(Provider, _Component);
+var Consumer$1 = function (_Component) {
+  _inherits(Consumer$$1, _Component);
 
-  function Provider() {
-    _classCallCheck(this, Provider);
+  function Consumer$$1() {
+    _classCallCheck(this, Consumer$$1);
 
-    return _possibleConstructorReturn(this, (Provider.__proto__ || Object.getPrototypeOf(Provider)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Consumer$$1.__proto__ || Object.getPrototypeOf(Consumer$$1)).apply(this, arguments));
   }
 
-  _createClass(Provider, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return _extends({}, this.props.value);
-    }
-  }, {
+  _createClass(Consumer$$1, [{
     key: "render",
     value: function render() {
-      return this.props.children;
-    }
-  }]);
+      var _this2 = this;
 
-  return Provider;
-}(react.Component);
+      return React__default.createElement(
+        Consumer,
+        null,
+        function (value) {
+          var theme = value.resolvedRoles ? value : defaultTheme;
+          var isDebugging = process.env.NODE_ENV !== "production";
+          var result = isDebugging ? createThemeProxy(theme) : theme;
 
-Provider.propTypes = {
-  /** A theme provided to the consumer within */
-  value: PropTypes.shape(themeContextShape),
-  /** Content within will be provided with the passed theme */
-  children: PropTypes.node.isRequired
-};
-Provider.childContextTypes = themeContextShape;
-Provider.defaultProps = {
-  value: defaultTheme
-};
-Provider.__docgenInfo = {
-  "description": "",
-  "displayName": "Provider",
-  "props": {
-    "value": {
-      "type": {
-        "name": "shape",
-        "value": "import themeContextShape from \"./shape\";",
-        "computed": true
-      },
-      "required": false,
-      "description": "A theme provided to the consumer within",
-      "defaultValue": {
-        "value": "defaultTheme",
-        "computed": true
-      }
-    },
-    "children": {
-      "type": {
-        "name": "node"
-      },
-      "required": true,
-      "description": "Content within will be provided with the passed theme"
+          return _this2.props.children(result);
+        }
+      );
     }
-  }
-};
-
-var _createClass$1 = 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; }; }();
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var themeDataProxyHandler = {
-  get: function get(theme, name) {
-    var stringName = name.toString();
-    if (name in theme) {
-      if (_typeof(theme[name]) === "object" && theme[name] !== null) {
-        return new Proxy(theme[name], themeDataProxyHandler);
-      }
-      return theme[name];
-    }
-    console.error("Role " + stringName + " does not exist");
-    return null;
-  }
-};
-
-var Consumer = function (_Component) {
-  _inherits$1(Consumer, _Component);
-
-  function Consumer() {
-    _classCallCheck$1(this, Consumer);
-
-    return _possibleConstructorReturn$1(this, (Consumer.__proto__ || Object.getPrototypeOf(Consumer)).apply(this, arguments));
-  }
-
-  _createClass$1(Consumer, [{
-    key: "render",
-    value: function render() {
-      var theme = this.context.resolvedRoles ? this.context : defaultTheme;
-      var proxy = new Proxy(theme, themeDataProxyHandler);
-      var themeArgument = process.env.NODE_ENV !== "production" ? proxy : theme;
-
-      return this.props.children(themeArgument);
-    }
   }]);
 
-  return Consumer;
-}(react.Component);
+  return Consumer$$1;
+}(React.Component);
 
-Consumer.propTypes = {
+Consumer$1.propTypes = {
   /** A theme provided to the consumer within */
   children: PropTypes.func
 };
-Consumer.contextTypes = themeContextShape;
-Consumer.__docgenInfo = {
+Consumer$1.__docgenInfo = {
   "description": "",
@@ -174,5 +99,5 @@ "displayName": "Consumer",
 
-var index = { Provider: Provider, Consumer: Consumer };
+var index = { Provider: Provider, Consumer: Consumer$1 };
 
 exports.ThemeContext = index;
 exports.default = index;

CHANGELOG.md

@@ -0,1 +1,8 @@
+# @hig/theme-context-v1.0.0 (2018-10-30)
+
+
+### Bug Fixes
+
+* **behavior:** refactor context to eliminate `childContextTypes` errors ([fcffd31](https://github.com/Autodesk/hig/commit/fcffd31))
+
 # [@hig/themes-v0.4.0](https://github.com/Autodesk/hig/compare/@hig/themes@0.3.0...@hig/themes@0.4.0) (2018-09-26)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/theme-context",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0",
   "description": "ThemeContext components to ease adoption of theme data from React components",
@@ -21,3 +21,4 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/theme-data": "^1.0.0-alpha.1",
+    "@hig/theme-data": "^1.0.0",
+    "create-react-context": "^0.2.3",
     "prop-types": "^15.6.1"
@@ -24,0 +25,0 @@ },

README.md

@@ -30,3 +30,3 @@ # ThemeContext component
     <div style={{
-      backgroundColor: resolvedRoles["colorScheme.surfaceLevel20Color"],
+      backgroundColor: resolvedRoles["colorScheme.surfaceLevel200Color"],
       borderRadius: resolvedRoles["basics.borderRadii.small"],
@@ -33,0 +33,0 @@ color: resolvedRoles["colorScheme.textColor"],

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

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

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

12712

decreased by-35.43%

Dependency count

4

increased by33.33%

Lines of code

154

decreased by-47.8%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedcreate-react-context@^0.2.3

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-context@0.2.3(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedgud@1.0.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• Updated@hig/theme-data@^1.0.0