chore: fix Gatsby build (#465)

* Prevent publishing the docs as a package * Use iframe element directly instead of innerHTML * Bump all dependencies in docs - get out of Gatsby beta - use official Gatsby Babel preset instead of our library's to prevent build failure - upgrade to latest React Bootstrap - bump other inconsequential dependencies
reactjs · Mar 14, 2019 · 61d8d09 · 61d8d09
1 parent c73de46
commit 61d8d09
Show file tree

Hide file tree

Showing 9 changed files with 3,814 additions and 3,227 deletions.
diff --git a/www/.babelrc.js b/www/.babelrc.js
@@ -1 +1,5 @@
-module.exports = require('../.babelrc');
+module.exports = {
+  presets: [
+    'babel-preset-gatsby',
+  ],
+};
diff --git a/www/package.json b/www/package.json
@@ -1,4 +1,5 @@
 {
+  "private": true,
   "name": "react-transition-group-docs",
   "version": "1.0.0",
   "description": "",
@@ -12,20 +13,23 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "bootstrap": "^3.3.7",
-    "gatsby": "^2.0.0-beta.12",
-    "gatsby-plugin-sass": "^2.0.0-beta.3",
-    "gatsby-remark-prismjs": "^1.0.0",
-    "gatsby-source-filesystem": "^2.0.1-beta.3",
-    "gatsby-transformer-react-docgen": "^2.1.1-beta.3",
-    "gatsby-transformer-remark": "^1.0.0",
-    "lodash": "^4.17.4",
-    "react": "^16.4.1",
-    "react-bootstrap": "^0.32.1",
-    "react-dom": "^16.4.1"
+    "@babel/core": "^7.3.4",
+    "babel-preset-gatsby": "^0.1.8",
+    "bootstrap": "^4.3.1",
+    "gatsby": "^2.1.22",
+    "gatsby-plugin-sass": "^2.0.10",
+    "gatsby-remark-prismjs": "^3.2.4",
+    "gatsby-source-filesystem": "^2.0.23",
+    "gatsby-transformer-react-docgen": "^3.0.5",
+    "gatsby-transformer-remark": "^2.3.0",
+    "lodash": "^4.17.11",
+    "prismjs": "^1.15.0",
+    "react": "^16.8.3",
+    "react-bootstrap": "^1.0.0-beta.5",
+    "react-dom": "^16.8.3"
   },
   "devDependencies": {
-    "gh-pages": "^1.0.0",
-    "node-sass": "^4.9.0"
+    "gh-pages": "^2.0.1",
+    "node-sass": "^4.11.0"
   }
 }
diff --git a/www/src/components/Example.js b/www/src/components/Example.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 
 const propTypes = {
   codeSandbox: PropTypes.shape({
@@ -10,20 +10,22 @@ const propTypes = {
 };
 
 const Example = ({ codeSandbox }) => (
-  <div>
-    <Grid>
+  <div style={{ marginBottom: '1.5rem' }}>
+    <Container>
       <h2>Example</h2>
-    </Grid>
-    <div
-      dangerouslySetInnerHTML={{
-        __html: `
-          <iframe
-            title="${codeSandbox.title}"
-            src="https://codesandbox.io/embed/${codeSandbox.id}?fontsize=14"
-            style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-            sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-          />`,
+    </Container>
+    <iframe
+      title={codeSandbox.title}
+      src={`https://codesandbox.io/embed/${codeSandbox.id}?fontsize=14`}
+      style={{
+        display: 'block',
+        width: '100%',
+        height: '500px',
+        border: 0,
+        borderRadius: 4,
+        overflow: 'hidden',
       }}
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
     />
   </div>
 );

diff --git a/www/src/components/Layout.js b/www/src/components/Layout.js
@@ -1,4 +1,4 @@
-import { graphql, Link, withPrefix } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -25,74 +25,34 @@ const propTypes = {
   }).isRequired,
 };
 
-const NavItem = ({ to, location, children }) => (
-  <li role="presentation">
-    <Link
-      to={to}
-      location={location}
-      activeStyle={{
-        color: '#fff',
-        backgroundColor: '#080808',
-      }}
-    >
-      {children}
-    </Link>
-  </li>
+const Layout = ({ data, children }) => (
+  <>
+    <Navbar fixed="top" bg="dark" variant="dark" expand="md" collapseOnSelect>
+      <Navbar.Brand as={Link} to="/">
+        React Transition Group
+      </Navbar.Brand>
+      <Navbar.Toggle />
+      <Navbar.Collapse>
+        <Nav className="mr-auto">
+          {data.site.siteMetadata.componentPages.map(
+            ({ path, displayName }) => (
+              <Nav.Link key={path} as={Link} to={path} activeClassName="active">
+                {displayName}
+              </Nav.Link>
+            )
+          )}
+        </Nav>
+        <Nav>
+          <Nav.Link as={Link} to="/with-react-router" activeClassName="active">
+            With React Router
+          </Nav.Link>
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+    <div style={{ paddingTop: '5rem' }}>{children}</div>
+  </>
 );
 
-NavItem.propTypes = {
-  to: PropTypes.string.isRequired,
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired,
-  }).isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-class Layout extends React.Component {
-  isActive(path, location) {
-    return withPrefix(path) === withPrefix(location.pathname);
-  }
-
-  render() {
-    const { data, children } = this.props;
-    const location = {
-      ...this.props.location,
-      pathname: withPrefix(this.props.location.pathname),
-    };
-    return (
-      <div>
-        <Navbar fixedTop inverse collapseOnSelect>
-          <Navbar.Header>
-            <Navbar.Brand>
-              <Link to="/">React Transition Group</Link>
-            </Navbar.Brand>
-            <Navbar.Toggle />
-          </Navbar.Header>
-          <Navbar.Collapse>
-            <Nav pullLeft>
-              {data.site.siteMetadata.componentPages.map(
-                ({ path, displayName }) => (
-                  <NavItem key={path} to={path} location={location}>
-                    {displayName}
-                  </NavItem>
-                )
-              )}
-            </Nav>
-            <Nav pullRight>
-              <NavItem to="/with-react-router" location={location}>
-                With React Router
-              </NavItem>
-            </Nav>
-          </Navbar.Collapse>
-        </Navbar>
-        <div style={{ paddingTop: '4rem', paddingBottom: '1.5rem' }}>
-          {children}
-        </div>
-      </div>
-    );
-  }
-}
-
 Layout.propTypes = propTypes;
 
 export default Layout;

diff --git a/www/src/css/bootstrap.scss b/www/src/css/bootstrap.scss
@@ -36,7 +36,3 @@ h1, h2, h3, h4, h5 {
     color: inherit;
   }
 }
-
-iframe[src*=codesandbox] + p {
-  margin-top: 1rem;
-}
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
@@ -1,7 +1,7 @@
 import { graphql, Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import Layout from '../components/Layout';
 
 const propTypes = {
@@ -26,7 +26,7 @@ class Index extends React.Component {
 
     return (
       <Layout data={data} location={location}>
-        <Grid>
+        <Container>
           <h1>React Transition Group</h1>
           <blockquote>
             <p>
@@ -35,7 +35,8 @@ class Index extends React.Component {
               like{' '}
               <a href="https://github.com/chenglou/react-motion">
                 React-Motion
-              </a>, it does not animate styles by itself. Instead it exposes
+              </a>
+              , it does not animate styles by itself. Instead it exposes
               transition stages, manages classes and group elements and
               manipulates the DOM in useful ways, making the implementation of
               actual visual transitions much easier.
@@ -78,7 +79,7 @@ yarn add react-transition-group
               )
             )}
           </ul>
-        </Grid>
+        </Container>
       </Layout>
     );
   }

diff --git a/www/src/pages/with-react-router.js b/www/src/pages/with-react-router.js
@@ -1,7 +1,7 @@
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import Layout from '../components/Layout';
 import Example from '../components/Example';
 
@@ -23,7 +23,7 @@ const propTypes = {
 
 const WithReactRouter = ({ data, location }) => (
   <Layout data={data} location={location}>
-    <Grid>
+    <Container>
       <h1>Usage with React Router</h1>
       <p>
         People often want to animate route transitions, which can result in
@@ -38,14 +38,15 @@ const WithReactRouter = ({ data, location }) => (
         The main challenge is the <strong>exit</strong> transition because React
         Router changes to a new route instantly, so we need to keep the old
         route around long enough to transition out of it. Fortunately,{' '}
-        <code>Route</code>'s <code>children</code> prop also accepts a{' '}
-        <em>function</em>, which should not be confused with the{' '}
-        <code>render</code> prop! Unlike the <code>render</code> prop,{' '}
-        <code>children</code> function runs whether the route is matched or not.
-        React Router passes the object containing a <code>match</code> object,
-        which exists if the route matches, otherwise it's <code>null</code>.
-        This enables us to manage the <code>in</code> prop of{' '}
-        <code>CSSTransition</code> based on the presence of <code>match</code>.
+        <code>Route</code>
+        's <code>children</code> prop also accepts a <em>function</em>, which
+        should not be confused with the <code>render</code> prop! Unlike the{' '}
+        <code>render</code> prop, <code>children</code> function runs whether
+        the route is matched or not. React Router passes the object containing a{' '}
+        <code>match</code> object, which exists if the route matches, otherwise
+        it's <code>null</code>. This enables us to manage the <code>in</code>{' '}
+        prop of <code>CSSTransition</code> based on the presence of{' '}
+        <code>match</code>.
       </p>
       <p>
         Exit transitions will cause the content of routes to linger until they
@@ -63,7 +64,7 @@ const WithReactRouter = ({ data, location }) => (
           won't execute.
         </p>
       </blockquote>
-    </Grid>
+    </Container>
     <Example
       codeSandbox={{
         title: 'CSSTransition + React Router',

diff --git a/www/src/templates/component.js b/www/src/templates/component.js
@@ -1,7 +1,7 @@
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import transform from 'lodash/transform';
 
 import Layout from '../components/Layout';
@@ -53,12 +53,12 @@ class ComponentTemplate extends React.Component {
     return (
       <Layout data={data} location={location}>
         <div>
-          <Grid>
+          <Container>
             <h1 id={metadata.displayName}>{metadata.displayName}</h1>
             <p
               dangerouslySetInnerHTML={{ __html: extractMarkdown(metadata) }}
             />
-          </Grid>
+          </Container>
 
           <Example
             codeSandbox={{
@@ -69,7 +69,7 @@ class ComponentTemplate extends React.Component {
             }}
           />
 
-          <Grid>
+          <Container>
             <h2>
               <div>Props</div>
               {metadata.composes && (
@@ -83,7 +83,7 @@ class ComponentTemplate extends React.Component {
               )}
             </h2>
             {metadata.props.map(p => this.renderProp(p, metadata.displayName))}
-          </Grid>
+          </Container>
         </div>
       </Layout>
     );