chore(deps): update styled-component & react-pose to the latest versi…

…on (#517) * chore(deps): update styled-component & react-pose to the latest version * fix: fix deprecation warning
tillersystems · May 6, 2019 · 31910ab · 31910ab
1 parent 18e4655
commit 31910ab
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 78 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -7,7 +7,7 @@ import { create } from '@storybook/theming';
 import { ThemeProvider } from 'styled-components';
 import { withDocs } from 'storybook-readme';
 
-import styles from './styles';
+import GlobalStyles from './styles';
 import { Theme } from '../src';
 
 // Option defaults:
@@ -41,14 +41,14 @@ addDecorator((story, context) => {
 
 addDecorator(story => (
   <div style={{ padding: '5rem 5rem 0 5rem' }}>
+    <GlobalStyles />
     <ThemeProvider theme={Theme}>{story()}</ThemeProvider>
   </div>
 ));
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../src', true, /.stories.js$/);
 function loadStories() {
-  styles();
   req.keys().forEach(filename => req(filename));
 }
 

diff --git a/.storybook/styles.js b/.storybook/styles.js
@@ -1,7 +1,7 @@
-import styled, { injectGlobal } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import Theme from '../src/Theme';
 
-const globalStyles = () => injectGlobal`
+const GlobalStyles = createGlobalStyle`
   * {
     border: 0;
     box-sizing: inherit;
@@ -98,4 +98,4 @@ const globalStyles = () => injectGlobal`
   }
 `;
 
-export default globalStyles;
+export default GlobalStyles;
diff --git a/package.json b/package.json
@@ -113,10 +113,10 @@
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "react-pose": "3.4.0",
+    "react-pose": "4.0.8",
     "react-testing-library": "6.1.2",
     "storybook-readme": "4.0.5",
-    "styled-components": "3.4.10"
+    "styled-components": "4.2.0"
   },
   "jest": {
     "collectCoverageFrom": [

diff --git a/src/Avatar/__stories__/Avatar.stories.js b/src/Avatar/__stories__/Avatar.stories.js
@@ -27,10 +27,10 @@ storiesOf('Avatar', module)
       'image',
     );
     const options = {
-      '1.5': 'medium',
-      '3.1': 'big',
-      '4.1': 'huge',
+      medium: 1.5,
+      big: 3.1,
+      huge: 4.1,
     };
-    const size = select('Size', options, '3.1', 'size');
+    const size = select('Size', options, 3.1, 'size');
     return <Avatar name={name} src={imageUrl} size={size} />;
   });
diff --git a/src/Avatar/index.js b/src/Avatar/index.js
@@ -78,15 +78,13 @@ class Avatar extends PureComponent {
   }
 }
 
-export default styled(Avatar).attrs({
-  colors: ({ name }) => defaultColors[sumChars(name) % defaultColors.length],
-})`
+export default styled(Avatar)`
   display: flex;
   justify-content: center;
   align-items: center;
   width: ${({ size }) => size || Theme.dimensions.bigInt}rem;
   height: ${({ size }) => size || Theme.dimensions.bigInt}rem;
   border-radius: 50%;
-  background: ${({ colors }) => colors};
+  background: ${({ name }) => defaultColors[sumChars(name) % defaultColors.length]};
   color: white;
 `;
diff --git a/src/Button/__tests__/__snapshots__/Button.test.js.snap b/src/Button/__tests__/__snapshots__/Button.test.js.snap
@@ -57,7 +57,6 @@ exports[`<Button /> should render a left icon 1`] = `
 
 <button
   class="c0"
-  icon="[object Object]"
   type="button"
 >
   <span
@@ -147,7 +146,6 @@ exports[`<Button /> should render a right icon 1`] = `
 
 <button
   class="c0"
-  icon="[object Object]"
   type="button"
 >
   <span

diff --git a/src/Dropdown/index.js b/src/Dropdown/index.js
@@ -135,7 +135,7 @@ class Dropdown extends PureComponent {
         >
           {title}
         </Header>
-        <PoseGroup>
+        <PoseGroup flipMove={false}>
           {displayMenu && (
             <MenuAnimation key="Menu" role="menu">
               {searchable && (

diff --git a/src/Input/DatePickerInput/index.js b/src/Input/DatePickerInput/index.js
@@ -137,7 +137,7 @@ class DatePickerInput extends PureComponent {
     const { isDatePickerOpen, error, textValue, dateValue } = this.state;
 
     return (
-      <Container innerRef={node => (this.ref = node)}>
+      <Container ref={node => (this.ref = node)}>
         <TextInput
           fluid={fluid}
           value={textValue ? textValue.toLocaleString(DateTime.DATE_SHORT) : ''}

diff --git a/src/Input/TextInput/index.js b/src/Input/TextInput/index.js
@@ -256,7 +256,7 @@ class TextInput extends PureComponent {
         {label && labelPosition === 'left' && <Label label={label} position="left" />}
         <InputElement
           data-testid="input"
-          innerRef={ref => (this.inputRef = ref)}
+          ref={ref => (this.inputRef = ref)}
           type={type}
           id={id}
           tabIndex={tabIndex}

diff --git a/src/Popover/index.js b/src/Popover/index.js
@@ -18,7 +18,7 @@ import { PopOver } from './elements';
  */
 
 const Popover = ({ active, arrowPositionX, children, width }) => (
-  <PoseGroup>
+  <PoseGroup flipMove={false}>
     {active && (
       <PopOverAnimation
         width={width}

diff --git a/yarn.lock b/yarn.lock
@@ -1763,18 +1763,12 @@
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
 
-"@emotion/is-prop-valid@0.7.3":
+"@emotion/is-prop-valid@0.7.3", "@emotion/is-prop-valid@^0.7.3":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
   dependencies:
     "@emotion/memoize" "0.7.1"
 
-"@emotion/is-prop-valid@^0.6.5":
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.5.tgz#25071b70957f250e7a8a543a9a187b09161f4d1c"
-  dependencies:
-    "@emotion/memoize" "^0.6.5"
-
 "@emotion/memoize@0.7.1":
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
@@ -1783,10 +1777,6 @@
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
 
-"@emotion/memoize@^0.6.5":
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.5.tgz#f868c314b889e7c3d84868a1d1cc323fbb40ca86"
-
 "@emotion/serialize@^0.11.4":
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.4.tgz#691e615184a23cd3b9ae9b1eaa79eb8798e52379"
@@ -1834,7 +1824,7 @@
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
 
-"@emotion/unitless@0.7.3":
+"@emotion/unitless@0.7.3", "@emotion/unitless@^0.7.0":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
 
@@ -3439,7 +3429,7 @@ babel-plugin-react-docgen@^2.0.2:
     react-docgen "^3.0.0"
     recast "^0.14.7"
 
-babel-plugin-styled-components@1.10.0:
+babel-plugin-styled-components@1.10.0, "babel-plugin-styled-components@>= 1":
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
   dependencies:
@@ -4154,13 +4144,6 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.0.3:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.1.0.tgz#c913e43678c7cb7c8bd16afbcddb6c5505e8f9fe"
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
 builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -4268,6 +4251,11 @@ camelcase@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.2.0.tgz#e7522abda5ed94cc0489e1b8466610e88404cf45"
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-lite@^1.0.30000844:
   version "1.0.30000903"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000903.tgz#86d46227759279b3db345ddbe778335dbba9e858"
@@ -5016,12 +5004,13 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
-css-to-react-native@^2.0.3:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.1.tgz#7f3f4c95de65501b8720c87bf0caf1f39073b88e"
+css-to-react-native@^2.2.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.0.tgz#bf80d24ec4a08e430306ef429c0586e6ed5485f7"
+  integrity sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw==
   dependencies:
+    camelize "^1.0.0"
     css-color-keywords "^1.0.0"
-    fbjs "^0.8.5"
     postcss-value-parser "^3.3.0"
 
 css-tree@1.0.0-alpha.28:
@@ -6115,7 +6104,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.5:
+fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.4:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -6624,10 +6613,6 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-has-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -6748,7 +6733,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
+hoist-non-react-statics@^2.3.1:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
 
@@ -9877,13 +9862,10 @@ react-inspector@^2.3.1:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@^16.3.1:
-  version "16.4.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
-
-react-is@^16.5.1:
-  version "16.5.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.1.tgz#c6e8734fd548a22e1cef4fd0833afbeb433b85ee"
+react-is@^16.6.0:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
 react-is@^16.8.1:
   version "16.8.1"
@@ -9951,14 +9933,14 @@ react-portal@^4.1.5:
   dependencies:
     prop-types "^15.5.8"
 
-react-pose@3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/react-pose/-/react-pose-3.4.0.tgz#4adc829b47bffecf43b2082bd8bc3b0ac77d6b66"
+react-pose@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/react-pose/-/react-pose-4.0.8.tgz#91bdfafde60e4096e7878a35dcc77715bed68f24"
+  integrity sha512-WN/583nKJZkKmKg5ha+eErOGWF9GV6A5EngC7WHQX5b910X9rTlOlxzdKlUy/dDcsTRMZEtHV0Sy2gLPYsVQCQ==
   dependencies:
-    "@emotion/is-prop-valid" "^0.6.5"
+    "@emotion/is-prop-valid" "^0.7.3"
     hey-listen "^1.0.5"
     popmotion-pose "^3.4.0"
-    react-is "^16.5.1"
     tslib "^1.9.1"
 
 react-resize-detector@^3.2.1:
@@ -11204,19 +11186,22 @@ styled-components-breakpoint@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/styled-components-breakpoint/-/styled-components-breakpoint-2.1.0.tgz#839370362c1e084a23d1155286c9a8a1f2af853f"
 
-styled-components@3.4.10:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.10.tgz#9a654c50ea2b516c36ade57ddcfa296bf85c96e1"
+styled-components@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.2.0.tgz#811fbbec4d64c7189f6c7482b9eb6fefa7fefef7"
+  integrity sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==
   dependencies:
-    buffer "^5.0.3"
-    css-to-react-native "^2.0.3"
-    fbjs "^0.8.16"
-    hoist-non-react-statics "^2.5.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.7.3"
+    "@emotion/unitless" "^0.7.0"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^2.2.2"
+    memoize-one "^5.0.0"
     prop-types "^15.5.4"
-    react-is "^16.3.1"
+    react-is "^16.6.0"
     stylis "^3.5.0"
     stylis-rule-sheet "^0.0.10"
-    supports-color "^3.2.3"
+    supports-color "^5.5.0"
 
 stylefire@^2.0.7:
   version "2.0.7"
@@ -11248,12 +11233,6 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  dependencies:
-    has-flag "^1.0.0"
-
 supports-color@^5.3.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"