Upgrade guppy to styled components v4

.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/global-styles';
 
-const WrapperDecorator = storyFn => <Wrapper>{storyFn()}</Wrapper>;
+const WrapperDecorator = storyFn => (
+  <>
+    <GlobalStyles />
+    <Wrapper>{storyFn()}</Wrapper>
+  </>
+);
 
 addDecorator(WrapperDecorator);
 

package.json

@@ -132,7 +132,7 @@
     "sass-loader": "7.0.0",
     "slug": "0.9.1",
     "style-loader": "0.19.1",
-    "styled-components": "3.2.6",
+    "styled-components": "^4.0.0-beta.9",
     "svgr": "1.8.1",
     "sw-precache-webpack-plugin": "0.11.4",
     "thread-loader": "1.1.2",

src/components/AddDependencyInitialScreen/AddDependencyInitialScreen.js

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

src/components/AddDependencySearchBox/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/AddDependencySearchResult/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';
@@ -134,6 +134,7 @@ class AddDependencySearchResult extends PureComponent<Props> {
 
     return (
       <Wrapper>
+        <SearchResultGlobalStyle />
         <Header>
           <Title>
             <ExternalLink display="inline" href={npmLink}>
@@ -238,7 +239,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/CircularOutline/CircularOutline.js

@@ -58,7 +58,7 @@ class RoundedOutline extends Component<Props, State> {
     finishedAllMountingSteps: false,
   };
 
-  wrapperNode: HTMLElement;
+  wrapperNode: ?HTMLElement;
   shapeNode: any; // "SVGPathElement" (which cannot be resolved), we need "getTotalLength()"
 
   static defaultProps = {
@@ -71,9 +71,11 @@ class RoundedOutline extends Component<Props, State> {
   componentDidMount() {
     // On first mount, we need to figure out how big the available area is.
     // This will affect how large the outline is.
-    const { width, height } = this.wrapperNode.getBoundingClientRect();
+    if (this.wrapperNode) {
+      const { width, height } = this.wrapperNode.getBoundingClientRect();
 
-    this.setState({ width, height });
+      this.setState({ width, height });
+    }
   }
 
   componentDidUpdate(_: Props, prevState: State) {
@@ -83,10 +85,12 @@ class RoundedOutline extends Component<Props, State> {
 
         this.setState({ pathLength });
       } else {
-        const { width, height } = this.wrapperNode.getBoundingClientRect();
+        if (this.wrapperNode) {
+          const { width, height } = this.wrapperNode.getBoundingClientRect();
 
-        if (this.state.width !== width || this.state.height !== height) {
-          this.setState({ width, height });
+          if (this.state.width !== width || this.state.height !== height) {
+            this.setState({ width, height });
+          }
         }
       }
     }
@@ -123,7 +127,7 @@ class RoundedOutline extends Component<Props, State> {
       >
         {({ interpolatedDashOffset }) => (
           <Svg
-            innerRef={node => (this.wrapperNode = node)}
+            ref={node => (this.wrapperNode = node)}
             width="100%"
             height="100%"
           >
@@ -148,7 +152,7 @@ class RoundedOutline extends Component<Props, State> {
             {typeof width === 'number' &&
               typeof height === 'number' && (
                 <Rect
-                  innerRef={node => (this.shapeNode = node)}
+                  ref={node => (this.shapeNode = node)}
                   x={0}
                   y={0}
                   width={width}

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 });
@@ -175,7 +177,7 @@ class ProjectName extends PureComponent<Props, State> {
         hasError={isProjectNameTaken}
       >
         <TextInput
-          innerRef={node => (this.node = node)}
+          ref={node => (this.node = node)}
           type="text"
           value={randomizedOverrideName || name}
           isFocused={isFocused}

src/components/DependencyDetailsTable/DependencyDetailsTable.js

@@ -143,10 +143,10 @@ 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

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

src/components/DevelopmentServerPane/DevelopmentServerPane.js

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

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/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>
     );

src/components/Planet/PlanetMoon.js

@@ -60,7 +60,7 @@ class PlanetMoon extends Component<Props> {
 
     return (
       <Wrapper planetSize={planetSize} tilt={tilt} offset={offset} size={size}>
-        <Orbit innerRef={node => (this.node = node)}>
+        <Orbit ref={node => (this.node = node)}>
           <Moon size={size}>
             <Top color={colorObj.string()} radius={size / 2} />
             <Back color={colorObj.darken(0.5).string()} radius={size / 2} />

src/components/TaskRunnerPaneRow/TaskRunnerPaneRow.js

@@ -113,7 +113,7 @@ const getIconForStatus = (status: TaskStatus) => {
   }
 };
 
-const TaskCard = Card.extend`
+const TaskCard = styled(Card)`
   display: flex;
   margin-bottom: 10px;
   padding: 12px 24px;
@@ -130,7 +130,7 @@ const Column = styled.div`
   }
 `;
 
-const NameColumn = Column.extend`
+const NameColumn = styled(Column)`
   flex: 1;
   font-size: 20px;
   -webkit-font-smoothing: antialiased;
@@ -152,7 +152,7 @@ const TaskDescription = styled.span`
   }
 `;
 
-const StatusColumn = Column.extend`
+const StatusColumn = styled(Column)`
   width: 150px;
   display: flex;
   align-items: center;
@@ -164,14 +164,14 @@ const TaskStatusLabel = styled.span`
   margin-left: 8px;
 `;
 
-const LinkColumn = Column.extend`
+const LinkColumn = styled(Column)`
   width: 115px;
   padding-left: 2px;
   display: flex;
   align-items: center;
 `;
 
-const ActionsColumn = Column.extend`
+const ActionsColumn = styled(Column)`
   width: 70px;
   display: flex;
   justify-content: flex-end;

src/components/TerminalOutput/TerminalOutput.js

@@ -86,11 +86,7 @@ class TerminalOutput extends PureComponent<Props> {
             </FillButton>
           </PixelShifter>
         </Header>
-        <Wrapper
-          width={width}
-          height={height}
-          innerRef={node => (this.node = node)}
-        >
+        <Wrapper width={width} height={height} ref={node => (this.node = node)}>
           <TableWrapper height={height}>
             <LogWrapper>
               {task.logs.map(log => (

src/components/TextInput/TextInput.js

@@ -10,11 +10,17 @@ type Props = {
   children: React$Node,
 };
 
-const TextInput = ({ isFocused, hasError, children, ...delegated }: Props) => (
-  <Wrapper isFocused={isFocused} hasError={hasError}>
-    <InputElem {...delegated} />
-    {children}
-  </Wrapper>
+// $FlowFixMe https://github.com/facebook/react/issues/12553
+const TextInput = React.forwardRef(
+  (
+    { isFocused, hasError, children, ...delegated }: Props,
+    ref: React.RefObject
+  ) => (
+    <Wrapper ref={ref} isFocused={isFocused} hasError={hasError}>
+      <InputElem {...delegated} />
+      {children}
+    </Wrapper>
+  )
 );
 
 const getBorderColor = (props: Props) => {

src/components/WhimsicalInstaller/WhimsicalInstaller.js

@@ -39,7 +39,7 @@ type State = {
 class WhimsicalInstaller extends PureComponent<Props, State> {
   tickId: ?number;
   generationLoopId: ?number;
-  wrapperNode: HTMLElement;
+  wrapperNode: ?HTMLElement;
   wrapperBoundingBox: ClientRect;
   lastCoordinate: Point;
 
@@ -68,10 +68,12 @@ class WhimsicalInstaller extends PureComponent<Props, State> {
 
   toggleRunning = () => {
     if (this.props.isRunning) {
-      this.wrapperBoundingBox = this.wrapperNode.getBoundingClientRect();
+      if (this.wrapperNode) {
+        this.wrapperBoundingBox = this.wrapperNode.getBoundingClientRect();
 
-      this.fileGenerationLoop();
-      this.tick();
+        this.fileGenerationLoop();
+        this.tick();
+      }
     } else if (!this.props.isRunning) {
       window.clearTimeout(this.generationLoopId);
       window.cancelAnimationFrame(this.tickId);
@@ -586,7 +588,7 @@ class WhimsicalInstaller extends PureComponent<Props, State> {
     const filesArray = Object.keys(files).map(fileId => files[fileId]);
 
     return (
-      <Wrapper width={width} innerRef={node => (this.wrapperNode = node)}>
+      <Wrapper width={width} ref={node => (this.wrapperNode = node)}>
         <PlanetContainer size={height}>
           <Earth size={height * 0.4} />
         </PlanetContainer>