feat(utils): Add deprecation helpers (#443)

* feat(utils): add deprecation helper

* feat(utils): add deprecated prop type

* feat(configs): remove deprecation warnings in production

* fix(components): use tiny-warning

* refactor(utils): move copyright notice above imports

Author: connor-baer

.babelrc

@@ -16,7 +16,8 @@
       "plugins": [
         "@babel/plugin-proposal-class-properties",
         "lodash",
-        "inline-react-svg"
+        "inline-react-svg",
+        "dev-expression"
       ],
       "presets": [
         ["@babel/preset-env", { "loose": true }],
@@ -34,7 +35,8 @@
       "plugins": [
         "@babel/plugin-proposal-class-properties",
         "lodash",
-        "inline-react-svg"
+        "inline-react-svg",
+        "dev-expression"
       ],
       "presets": [
         ["@babel/preset-env", { "loose": true, "modules": false }],

package.json

@@ -82,6 +82,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-dev-expression": "^0.2.2",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-lodash": "^3.3.2",
     "babel-plugin-module-resolver": "^3.2.0",
@@ -123,8 +124,8 @@
     "@emotion/styled": "^10.0.10",
     "@svgr/webpack": "^4.1.0",
     "babel-plugin-inline-react-svg": "^1.1.0",
-    "css-loader": "^2.1.1",
     "commitizen": "^3.0.5",
+    "css-loader": "^2.1.1",
     "cz-customizable": "^5.3.0",
     "cz-customizable-ghooks": "^1.5.0",
     "dom-helpers": "^3.4.0",
@@ -153,7 +154,7 @@
     "react-with-styles": "^3.2.1",
     "recompose": "^0.30.0",
     "text-mask-addons": "^3.8.0",
-    "warning": "^4.0.3"
+    "tiny-warning": "^1.0.3"
   },
   "husky": {
     "hooks": {

src/components/SideNav/components/Modal/Modal.js

@@ -19,7 +19,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
-import warning from 'warning';
+import warning from 'tiny-warning';
 import keycode from 'keycode';
 import ownerDocument from '../../../../util/ownerDocument';
 import RootRef from '../RootRef';

src/components/SideNav/transitions.js

@@ -16,7 +16,7 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-restricted-globals */
 
-import warning from 'warning';
+import warning from 'tiny-warning';
 
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.

src/util/deprecate.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import warning from 'tiny-warning';
+
+const warned = {};
+
+export default function deprecate(explanation = '') {
+  if (__DEV__) {
+    const { stack } = new Error();
+    const message = `DEPRECATION: ${explanation}\n ${stack}`;
+
+    if (!warned[message]) {
+      warning(false, message);
+      warned[message] = true;
+    }
+  }
+}

src/util/helpers.js

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import warning from 'warning';
+import warning from 'tiny-warning';
 
 /**
  * Safe chained function

src/util/shared-prop-types.js

@@ -14,12 +14,33 @@
  */
 
 import PropTypes from 'prop-types';
+import deprecate from './deprecate';
 import { TOP, BOTTOM, LEFT, RIGHT, START, END, CENTER } from './constants';
 
 // TODO: figure out if we can still get these props in react-docgen
 //       when they are imported and merged into a component's
 //       propTypes.
 
+export const deprecatedPropType = (propType, explanation = '') => (
+  props,
+  propName,
+  componentName
+) => {
+  if (props[propName] !== null) {
+    deprecate(
+      // eslint-disable-next-line max-len
+      `"${propName}" prop of "${componentName}" has been deprecated.\n${explanation}`
+    );
+  }
+
+  return PropTypes.checkPropTypes(
+    { propName: propType },
+    props,
+    propName,
+    componentName
+  );
+};
+
 export const eitherOrPropType = (
   firstProp,
   secondProp,

yarn.lock

@@ -3278,6 +3278,11 @@ babel-plugin-add-react-displayname@^0.0.5:
   resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
   integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=
 
+babel-plugin-dev-expression@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dev-expression/-/babel-plugin-dev-expression-0.2.2.tgz#c18de18a06150f9480edd151acbb01d2e65e999b"
+  integrity sha512-y32lfBif+c2FIh5dwGfcc/IfX5aw/Bru7Du7W2n17sJE/GJGAsmIk5DPW/8JOoeKpXW5evJfJOvRq5xkiS6vng==
+
 [email protected]:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.2.0.tgz#c0adfb07d95f4a4495e9aaac6ec386c4d7c2524e"
@@ -17148,6 +17153,11 @@ tiny-relative-date@^1.3.0:
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
@@ -18007,7 +18017,7 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
-warning@^4.0.1, warning@^4.0.2, warning@^4.0.3:
+warning@^4.0.1, warning@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==