Upgrade to styled-components v4.2.0

.storybook/config.js

@@ -5,9 +5,14 @@ import { configure, addDecorator } from '@storybook/react';
 import { COLORS } from '../src/constants';
 import Wrapper from './components/Wrapper';
 
-import '../src/global-styles';
+import GlobalStyles from '../src/components/GlobalStyles';
 
-const WrapperDecorator = storyFn => <Wrapper>{storyFn()}</Wrapper>;
+const WrapperDecorator = storyFn => (
+  <Fragment>
+    <GlobalStyles />
+    <Wrapper>{storyFn()}</Wrapper>
+  </Fragment>
+);
 
 addDecorator(WrapperDecorator);
 

package.json

@@ -104,7 +104,7 @@
     "eslint-plugin-react": "7.11.1",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.6",
-    "flow-bin": "0.83.0",
+    "flow-bin": "0.95.1",
     "foreman": "2.0.0",
     "fs-extra": "5.0.0",
     "graphql": "0.12.3",
@@ -158,7 +158,7 @@
     "sass-loader": "7.0.0",
     "slug": "0.9.1",
     "style-loader": "0.19.1",
-    "styled-components": "3.2.6",
+    "styled-components": "4.2.0",
     "svgr": "1.8.1",
     "sw-precache-webpack-plugin": "0.11.4",
     "thread-loader": "1.1.2",

src/components/CreateNewProjectWizard/Gatsby/SelectStarterList.js

@@ -73,7 +73,7 @@ class SelectStarterList extends PureComponent<Props> {
 
     return (
       <MainContent isVisible={isVisible}>
-        <ScrollContainer innerRef={node => (this.node = node)}>
+        <ScrollContainer ref={node => (this.node = node)}>
           <StarterList>
             {starters.map((starter, index) => (
               <StarterItem key={index}>

src/components/CreateNewProjectWizard/Gatsby/SelectStarterList.test.js

@@ -40,7 +40,7 @@ describe('ProjectStarterSelection component', () => {
   });
 
   it('should add node reference to ScrollContainer', () => {
-    // Mount required so innerRef will be set
+    // Mount required so ref will be set
     const mountedWrapper = mount(
       <SelectStarterList
         starters={starters}

src/components/CreateNewProjectWizard/MainPane.js

@@ -191,11 +191,11 @@ class MainPane extends PureComponent<Props> {
   }
 }
 
-const Wrapper = animated(styled.div.attrs({
-  style: props => ({
+const Wrapper = animated(styled.div.attrs(props => ({
+  style: {
     transform: `translateY(${props.translateY}px)`,
-  }),
-})`
+  },
+}))`
   height: 75vh;
   will-change: transform;
 `);

src/components/CreateNewProjectWizard/ProjectName.js

@@ -37,11 +37,13 @@ class ProjectName extends PureComponent<Props, State> {
     showRandomizeTooltip: false,
   };
 
-  node: HTMLElement;
+  node: ?HTMLElement;
   timeoutId: number;
 
   componentDidMount() {
-    this.node.focus();
+    if (this.node) {
+      this.node.focus();
+    }
 
     this.timeoutId = window.setTimeout(() => {
       this.setState({ showRandomizeTooltip: true });
@@ -157,8 +159,6 @@ class ProjectName extends PureComponent<Props, State> {
     }
   };
 
-  setRef = (node: HTMLElement) => (this.node = node);
-
   render() {
     const {
       name,
@@ -178,7 +178,7 @@ class ProjectName extends PureComponent<Props, State> {
         spacing={15}
       >
         <TextInput
-          innerRef={this.setRef}
+          ref={node => (this.node = node)}
           type="text"
           value={randomizedOverrideName || name}
           isFocused={isFocused}

src/components/DependencyManagementPane/AddDependencyInitialScreen.js

@@ -33,7 +33,7 @@ class AddDependencyInitialScreen extends Component<Props> {
   }
 }
 
-export const InstructionsParagraph = Paragraph.extend`
+export const InstructionsParagraph = styled(Paragraph)`
   font-size: 1.4rem;
   color: ${COLORS.gray[600]};
 `;

src/components/DependencyManagementPane/AddDependencySearchBox.js

@@ -5,7 +5,7 @@
  * with styled-components. Just gonna override the provided global styles.
  */
 import React, { Component } from 'react';
-import styled, { injectGlobal } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import { SearchBox } from 'react-instantsearch/dom';
 
 import { COLORS } from '../../constants';
@@ -18,6 +18,7 @@ class AddDependencySearchBox extends Component<Props> {
   render() {
     return (
       <Wrapper>
+        <SearchBoxGlobalStyle />
         <SearchBox
           onChange={this.props.onChange}
           autoFocus={true}
@@ -33,7 +34,7 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 
-injectGlobal`
+const SearchBoxGlobalStyle = createGlobalStyle`
   .ais-SearchBox {
     /* width: 100%; */
   }

src/components/DependencyManagementPane/AddDependencySearchResult.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import styled, { injectGlobal } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import moment from 'moment';
 import IconBase from 'react-icons-kit';
 import { u1F4C8 as barGraphIcon } from 'react-icons-kit/noto_emoji_regular/u1F4C8';
@@ -137,6 +137,7 @@ export class AddDependencySearchResult extends PureComponent<Props> {
 
     return (
       <Wrapper>
+        <SearchResultGlobalStyle />
         <Header>
           <Title>
             <ExternalLink display="inline" href={npmLink}>
@@ -235,7 +236,7 @@ const NoActionAvailable = styled.div`
 
 // TODO: I should be able to reuse the existing button component with
 // `connectInfiniteHits`
-injectGlobal`
+const SearchResultGlobalStyle = createGlobalStyle`
   .ais-InfiniteHits-loadMore {
     padding: 10px 30px;
     margin-top: 45px;

src/components/DependencyManagementPane/DependencyDetailsTable.js

@@ -148,10 +148,11 @@ const DependencyLocationLabel = styled.span`
 
 // TODO: Feels gross to be doing this manually when `tr:first-child td`
 // would work.
-const FirstCell = Cell.extend`
+const FirstCell = styled(Cell)`
   padding-top: 0;
 `;
-const LastCell = Cell.extend`
+
+const LastCell = styled(Cell)`
   padding-bottom: 0;
   border-bottom: none;
 `;

src/components/DependencyManagementPane/DependencyManagementPane.js

@@ -236,7 +236,7 @@ const Wrapper = styled.div`
   max-height: 475px;
 `;
 
-export const DependencyList = Card.extend`
+export const DependencyList = styled(Card)`
   flex: 6;
   display: flex;
   flex-direction: column;
@@ -339,7 +339,7 @@ const DependencyVersion = styled.span`
       : COLORS.transparentBlack[400]}};
 `;
 
-export const MainContent = Card.extend`
+export const MainContent = styled(Card)`
   flex: 12;
   margin-left: 15px;
   padding: 0;

src/components/DevelopmentServerPane/DevelopmentServerPane.js

@@ -117,7 +117,7 @@ export class DevelopmentServerPane extends PureComponent<Props> {
   }
 }
 
-const Wrapper = Card.extend`
+const Wrapper = styled(Card)`
   display: flex;
 
   @media ${BREAKPOINTS.sm} {

src/components/ExternalLink/ExternalLink.js

@@ -12,6 +12,7 @@ type Props = {
   hoverColor?: string,
   showUnderline?: boolean,
   display: string,
+  className?: string,
 };
 
 class ExternalLink extends Component<Props> {
@@ -29,11 +30,19 @@ class ExternalLink extends Component<Props> {
   };
 
   render() {
-    const { href, color, hoverColor, children, display } = this.props;
+    const {
+      href,
+      color,
+      hoverColor,
+      children,
+      display,
+      className,
+    } = this.props;
 
     return (
       <Anchor
         style={{ display }}
+        className={className}
         href={href}
         color={color}
         hoverColor={hoverColor}

src/global-styles.js → src/components/GlobalStyles/GlobalStyles.js

@@ -1,11 +1,11 @@
 // @flow
-import { injectGlobal } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 import 'react-tippy/dist/tippy.css';
-import { COLORS } from './constants';
-import './fonts.css';
-import './base.css';
+import { COLORS } from '../../constants';
+import '../../fonts.css';
+import '../../base.css';
 
-injectGlobal`
+const GlobalStyles = createGlobalStyle`
   html,
   body,
   input,
@@ -20,3 +20,5 @@ injectGlobal`
     background: ${COLORS.gray[50]};
   }
 `;
+
+export default GlobalStyles;

src/components/GlobalStyles/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './GlobalStyles';

src/components/Heading/Heading.js

@@ -20,14 +20,14 @@ class Heading extends Component<Props> {
       case 'xsmall':
         return <HeadingXSmall {...delegated} />;
       case 'small':
-        return <HeadingSmall {...delegated} />;
+        return <HeadingSmall as="h3" {...delegated} />;
       case 'medium':
       default:
-        return <HeadingMedium {...delegated} />;
+        return <HeadingMedium as="h3" {...delegated} />;
       case 'large':
-        return <HeadingLarge {...delegated} />;
+        return <HeadingLarge as="h1" {...delegated} />;
       case 'xlarge':
-        return <HeadingXLarge {...delegated} />;
+        return <HeadingXLarge as="h1" {...delegated} />;
     }
   }
 }
@@ -40,21 +40,21 @@ const HeadingXSmall = styled.h6`
   color: ${COLORS.gray[800]};
 `;
 
-const HeadingSmall = HeadingXSmall.withComponent('h3').extend`
+const HeadingSmall = styled(HeadingXSmall)`
   font-size: 26px;
 `;
 
-const HeadingMedium = HeadingSmall.withComponent('h3').extend`
+const HeadingMedium = styled(HeadingSmall)`
   font-size: 32px;
   letter-spacing: -0.5px;
 `;
 
-const HeadingLarge = HeadingSmall.withComponent('h1').extend`
+const HeadingLarge = styled(HeadingSmall)`
   font-size: 42px;
   letter-spacing: -1px;
 `;
 
-const HeadingXLarge = HeadingSmall.withComponent('h1').extend`
+const HeadingXLarge = styled(HeadingSmall)`
   font-size: 60px;
   letter-spacing: -2px;
 `;

src/components/LargeLED/LargeLED.js

@@ -90,8 +90,8 @@ const fadeInOut = keyframes`
   100% { opacity: 0.25 }
 `;
 
-const LED = styled.div.attrs({
-  style: props => ({
+const LED = styled.div.attrs(props => ({
+  style: {
     backgroundImage: `
       radial-gradient(
         farthest-corner at 10px 5px,
@@ -103,8 +103,8 @@ const LED = styled.div.attrs({
       inset 1px 1px 5px ${props.colors.shadowLight},
       inset -3px -3px 10px -2px ${props.colors.shadowDark}
     `,
-  }),
-})`
+  },
+}))`
   display: inline-block;
   position: relative;
   width: ${props => props.size}px;
@@ -124,17 +124,17 @@ const OutlineSvg = styled.svg`
   overflow: visible;
 `;
 
-const Pulser = styled.div.attrs({
-  style: props => ({
+const Pulser = styled.div.attrs(props => ({
+  style: {
     backgroundImage: `
       radial-gradient(
         farthest-corner at 10px 5px,
         ${props.colors.pulseHighlight} 0%,
         ${props.colors.pulseBase} 100%
       )
     `,
-  }),
-})`
+  },
+}))`
   position: absolute;
   z-index: 1;
   top: 0;

src/components/Modal/Modal.js

@@ -129,12 +129,12 @@ class Modal extends PureComponent<Props, State> {
   }
 }
 
-const Wrapper = animated(styled.div.attrs({
-  style: props => ({
+const Wrapper = animated(styled.div.attrs(props => ({
+  style: {
     opacity: props.opacity,
     pointerEvents: props.clickable ? 'auto' : 'none',
-  }),
-})`
+  },
+}))`
   position: fixed;
   z-index: ${Z_INDICES.modal};
   top: 0;
@@ -162,13 +162,13 @@ const Backdrop = styled.div`
   background: rgba(230, 230, 230, 0.8);
 `;
 
-const PaneWrapper = animated(styled.div.attrs({
-  style: props => ({
+const PaneWrapper = animated(styled.div.attrs(props => ({
+  style: {
     width: props.width,
     height: props.height,
     transform: `translateY(${props.translateY}px)`,
-  }),
-})`
+  },
+}))`
   position: relative;
   z-index: 2;
   max-width: 100%;

src/components/Planet/Orbit.js

@@ -45,7 +45,7 @@ class PlanetCloud extends Component<Props> {
     const { duration, delay, planetSize, children, ...delegated } = this.props;
 
     return (
-      <Orbiter innerRef={node => (this.node = node)} {...delegated}>
+      <Orbiter ref={node => (this.node = node)} {...delegated}>
         {children}
       </Orbiter>
     );