[PropTypes] Exclude deprecated values from checker (#249)

* Exclude deprecated values from prop-checking, which triggers deprecation warnings * Fix comment, DRY up code, why not * fix story Co-authored-by: Diego Fortes <[email protected]>
curology · Jun 26, 2020 · ffa06cf · ffa06cf
1 parent ffeab4a
commit ffa06cf
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 13 deletions.
diff --git a/src/constants/colors/index.ts b/src/constants/colors/index.ts
@@ -2,6 +2,9 @@
  * Note: Each config is exported separately to be rendered in storybook:
  * https://github.com/PocketDerm/PocketDerm/blob/master/resources/assets/component-library/stories/colors/index.js#L5
  */
+
+import PropTypes from 'prop-types';
+
 import { withDeprecationWarning } from '../../utils';
 
 const DEFAULT = '#706D87';
@@ -149,17 +152,34 @@ export const guideColors = {
   recommendedCleansersGuide: '#cad1b5',
 };
 
-const colorsCompilation = {
+const sharedColors = {
   ...brandColors,
-  ...legacyColors,
   ...colorAliases,
   ...postcardColors,
   ...guideColors,
 };
 
+const colorsCompilation = {
+  ...sharedColors,
+  ...legacyColors,
+};
+
 const deprecatedProperties = {
   purple80: 'purple80 is deprecated. Use purple85 instead',
   purple60: 'purple60 is deprecated. Use purple70 instead',
 };
 
+// Do not include deprecated properties in PropTypes or it will trigger warning
+// eslint-disable-next-line
+const { purple80, purple60, ...allOtherLegacyColors } = legacyColors;
+
+const NON_DEPRECATED_COLORS = {
+  ...sharedColors,
+  ...allOtherLegacyColors,
+};
+
+export const COLORS_PROP_TYPES = PropTypes.oneOf(
+  Object.values(NON_DEPRECATED_COLORS),
+);
+
 export default withDeprecationWarning(colorsCompilation, deprecatedProperties);
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,7 +1,7 @@
 export { default as ANIMATION } from './animation';
 export { default as BOX_SHADOWS } from './boxShadows';
 export { default as BREAKPOINTS } from './breakpoints';
-export { default as COLORS } from './colors';
+export { default as COLORS, COLORS_PROP_TYPES } from './colors';
 export { default as FONTS } from './fonts';
 export { default as GRID } from './grid';
 export { default as LAYOUT } from './layout';

diff --git a/src/shared-components/button/components/linkButton/index.js b/src/shared-components/button/components/linkButton/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { COLORS } from '../../../../constants';
+import { COLORS, COLORS_PROP_TYPES } from '../../../../constants';
 import Container from '../../shared-components/container';
 import { ButtonContents, ButtonText } from '../../style';
 import { linkButtonStyles } from './style';
@@ -15,7 +15,7 @@ const propTypes = {
     'tertiary',
     'quaternary',
   ]),
-  buttonColor: PropTypes.oneOf(Object.values(COLORS)),
+  buttonColor: COLORS_PROP_TYPES,
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   onClick: PropTypes.func,
   textColor: PropTypes.string,

diff --git a/src/shared-components/button/components/roundButton/index.js b/src/shared-components/button/components/roundButton/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { COLORS } from '../../../../constants';
+import { COLORS, COLORS_PROP_TYPES } from '../../../../constants';
 import Loader from '../../shared-components/loader';
 import {
   RoundButtonWrapper,
@@ -35,7 +35,7 @@ const propTypes = {
     'quaternary',
     'action',
   ]),
-  buttonColor: PropTypes.oneOf(Object.values(COLORS)),
+  buttonColor: COLORS_PROP_TYPES,
   loading: isLoadingPropFunction,
   isLoading: PropTypes.bool,
   icon: PropTypes.node.isRequired,

diff --git a/src/shared-components/button/index.js b/src/shared-components/button/index.js
@@ -9,7 +9,7 @@ import withDeprecationWarning from '../../utils/withDeprecationWarning';
 import LinkButton from './components/linkButton';
 import RoundButton from './components/roundButton';
 import TextButton from './components/textButton';
-import { COLORS } from '../../constants';
+import { COLORS, COLORS_PROP_TYPES } from '../../constants';
 
 const deprecatedProperties = {
   loading: "The 'loading' prop is deprecated. Use 'isLoading' instead.",
@@ -38,7 +38,7 @@ class Button extends React.Component {
       'tertiary',
       'quaternary',
     ]),
-    buttonColor: PropTypes.oneOf(Object.values(COLORS)),
+    buttonColor: COLORS_PROP_TYPES,
     loading: isLoadingPropFunction,
     isLoading: PropTypes.bool,
     icon: PropTypes.node,

diff --git a/src/shared-components/button/shared-components/loader/index.js b/src/shared-components/button/shared-components/loader/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { COLORS } from '../../../../constants';
+import { COLORS, COLORS_PROP_TYPES } from '../../../../constants';
 import ButtonLoader from './style';
 
 const Loader = ({
@@ -38,7 +38,7 @@ Loader.propTypes = {
     'quaternary',
     'action',
   ]),
-  buttonColor: PropTypes.oneOf(Object.values(COLORS)),
+  buttonColor: COLORS_PROP_TYPES,
   className: PropTypes.string,
   disabled: PropTypes.bool,
   isFullWidth: PropTypes.bool,

diff --git a/stories/constants/colorsStory.js b/stories/constants/colorsStory.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
 import { SPACER } from 'src/constants';
 import { Typography } from 'src/shared-components';
 import * as COLORS from 'src/constants/colors';
@@ -22,7 +21,7 @@ const ColorsContainer = styled.div`
 const colorsStory = () => (
   <MainContainer>
     {Object.keys(COLORS).map(category => {
-      if (category === 'default') {
+      if (category === 'default' || category === 'COLORS_PROP_TYPES') {
         return null;
       }