Skip to content

Commit 61d8d09

Browse files
silvenonsilvenon
authored
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
1 parent c73de46 commit 61d8d09

File tree

9 files changed

+3814
-3227
lines changed

9 files changed

+3814
-3227
lines changed

‎www/.babelrc.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
module.exports = require('../.babelrc');
1+
module.exports = {
2+
presets: [
3+
'babel-preset-gatsby',
4+
],
5+
};

‎www/package.json‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"private": true,
23
"name": "react-transition-group-docs",
34
"version": "1.0.0",
45
"description": "",
@@ -12,20 +13,23 @@
1213
"author": "",
1314
"license": "MIT",
1415
"dependencies": {
15-
"bootstrap": "^3.3.7",
16-
"gatsby": "^2.0.0-beta.12",
17-
"gatsby-plugin-sass": "^2.0.0-beta.3",
18-
"gatsby-remark-prismjs": "^1.0.0",
19-
"gatsby-source-filesystem": "^2.0.1-beta.3",
20-
"gatsby-transformer-react-docgen": "^2.1.1-beta.3",
21-
"gatsby-transformer-remark": "^1.0.0",
22-
"lodash": "^4.17.4",
23-
"react": "^16.4.1",
24-
"react-bootstrap": "^0.32.1",
25-
"react-dom": "^16.4.1"
16+
"@babel/core": "^7.3.4",
17+
"babel-preset-gatsby": "^0.1.8",
18+
"bootstrap": "^4.3.1",
19+
"gatsby": "^2.1.22",
20+
"gatsby-plugin-sass": "^2.0.10",
21+
"gatsby-remark-prismjs": "^3.2.4",
22+
"gatsby-source-filesystem": "^2.0.23",
23+
"gatsby-transformer-react-docgen": "^3.0.5",
24+
"gatsby-transformer-remark": "^2.3.0",
25+
"lodash": "^4.17.11",
26+
"prismjs": "^1.15.0",
27+
"react": "^16.8.3",
28+
"react-bootstrap": "^1.0.0-beta.5",
29+
"react-dom": "^16.8.3"
2630
},
2731
"devDependencies": {
28-
"gh-pages": "^1.0.0",
29-
"node-sass": "^4.9.0"
32+
"gh-pages": "^2.0.1",
33+
"node-sass": "^4.11.0"
3034
}
3135
}

‎www/src/components/Example.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Grid } from 'react-bootstrap';
3+
import { Container } from 'react-bootstrap';
44

55
const propTypes = {
66
codeSandbox: PropTypes.shape({
@@ -10,20 +10,22 @@ const propTypes = {
1010
};
1111

1212
const Example = ({ codeSandbox }) => (
13-
<div>
14-
<Grid>
13+
<div style={{ marginBottom: '1.5rem' }}>
14+
<Container>
1515
<h2>Example</h2>
16-
</Grid>
17-
<div
18-
dangerouslySetInnerHTML={{
19-
__html: `
20-
<iframe
21-
title="${codeSandbox.title}"
22-
src="https://codesandbox.io/embed/${codeSandbox.id}?fontsize=14"
23-
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
24-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
25-
/>`,
16+
</Container>
17+
<iframe
18+
title={codeSandbox.title}
19+
src={`https://codesandbox.io/embed/${codeSandbox.id}?fontsize=14`}
20+
style={{
21+
display: 'block',
22+
width: '100%',
23+
height: '500px',
24+
border: 0,
25+
borderRadius: 4,
26+
overflow: 'hidden',
2627
}}
28+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
2729
/>
2830
</div>
2931
);

‎www/src/components/Layout.js‎

Lines changed: 27 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { graphql, Link, withPrefix } from 'gatsby';
1+
import { graphql, Link } from 'gatsby';
22
import PropTypes from 'prop-types';
33
import React from 'react';
44

@@ -25,74 +25,34 @@ const propTypes = {
2525
}).isRequired,
2626
};
2727

28-
const NavItem = ({ to, location, children }) => (
29-
<li role="presentation">
30-
<Link
31-
to={to}
32-
location={location}
33-
activeStyle={{
34-
color: '#fff',
35-
backgroundColor: '#080808',
36-
}}
37-
>
38-
{children}
39-
</Link>
40-
</li>
28+
const Layout = ({ data, children }) => (
29+
<>
30+
<Navbar fixed="top" bg="dark" variant="dark" expand="md" collapseOnSelect>
31+
<Navbar.Brand as={Link} to="/">
32+
React Transition Group
33+
</Navbar.Brand>
34+
<Navbar.Toggle />
35+
<Navbar.Collapse>
36+
<Nav className="mr-auto">
37+
{data.site.siteMetadata.componentPages.map(
38+
({ path, displayName }) => (
39+
<Nav.Link key={path} as={Link} to={path} activeClassName="active">
40+
{displayName}
41+
</Nav.Link>
42+
)
43+
)}
44+
</Nav>
45+
<Nav>
46+
<Nav.Link as={Link} to="/with-react-router" activeClassName="active">
47+
With React Router
48+
</Nav.Link>
49+
</Nav>
50+
</Navbar.Collapse>
51+
</Navbar>
52+
<div style={{ paddingTop: '5rem' }}>{children}</div>
53+
</>
4154
);
4255

43-
NavItem.propTypes = {
44-
to: PropTypes.string.isRequired,
45-
location: PropTypes.shape({
46-
pathname: PropTypes.string.isRequired,
47-
}).isRequired,
48-
children: PropTypes.node.isRequired,
49-
};
50-
51-
class Layout extends React.Component {
52-
isActive(path, location) {
53-
return withPrefix(path) === withPrefix(location.pathname);
54-
}
55-
56-
render() {
57-
const { data, children } = this.props;
58-
const location = {
59-
...this.props.location,
60-
pathname: withPrefix(this.props.location.pathname),
61-
};
62-
return (
63-
<div>
64-
<Navbar fixedTop inverse collapseOnSelect>
65-
<Navbar.Header>
66-
<Navbar.Brand>
67-
<Link to="/">React Transition Group</Link>
68-
</Navbar.Brand>
69-
<Navbar.Toggle />
70-
</Navbar.Header>
71-
<Navbar.Collapse>
72-
<Nav pullLeft>
73-
{data.site.siteMetadata.componentPages.map(
74-
({ path, displayName }) => (
75-
<NavItem key={path} to={path} location={location}>
76-
{displayName}
77-
</NavItem>
78-
)
79-
)}
80-
</Nav>
81-
<Nav pullRight>
82-
<NavItem to="/with-react-router" location={location}>
83-
With React Router
84-
</NavItem>
85-
</Nav>
86-
</Navbar.Collapse>
87-
</Navbar>
88-
<div style={{ paddingTop: '4rem', paddingBottom: '1.5rem' }}>
89-
{children}
90-
</div>
91-
</div>
92-
);
93-
}
94-
}
95-
9656
Layout.propTypes = propTypes;
9757

9858
export default Layout;

‎www/src/css/bootstrap.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,3 @@ h1, h2, h3, h4, h5 {
3636
color: inherit;
3737
}
3838
}
39-
40-
iframe[src*=codesandbox] + p {
41-
margin-top: 1rem;
42-
}

‎www/src/pages/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { graphql, Link } from 'gatsby';
22
import PropTypes from 'prop-types';
33
import React from 'react';
4-
import { Grid } from 'react-bootstrap';
4+
import { Container } from 'react-bootstrap';
55
import Layout from '../components/Layout';
66

77
const propTypes = {
@@ -26,7 +26,7 @@ class Index extends React.Component {
2626

2727
return (
2828
<Layout data={data} location={location}>
29-
<Grid>
29+
<Container>
3030
<h1>React Transition Group</h1>
3131
<blockquote>
3232
<p>
@@ -35,7 +35,8 @@ class Index extends React.Component {
3535
like{' '}
3636
<a href="https://github.com/chenglou/react-motion">
3737
React-Motion
38-
</a>, it does not animate styles by itself. Instead it exposes
38+
</a>
39+
, it does not animate styles by itself. Instead it exposes
3940
transition stages, manages classes and group elements and
4041
manipulates the DOM in useful ways, making the implementation of
4142
actual visual transitions much easier.
@@ -78,7 +79,7 @@ yarn add react-transition-group
7879
)
7980
)}
8081
</ul>
81-
</Grid>
82+
</Container>
8283
</Layout>
8384
);
8485
}

‎www/src/pages/with-react-router.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { graphql } from 'gatsby';
22
import PropTypes from 'prop-types';
33
import React from 'react';
4-
import { Grid } from 'react-bootstrap';
4+
import { Container } from 'react-bootstrap';
55
import Layout from '../components/Layout';
66
import Example from '../components/Example';
77

@@ -23,7 +23,7 @@ const propTypes = {
2323

2424
const WithReactRouter = ({ data, location }) => (
2525
<Layout data={data} location={location}>
26-
<Grid>
26+
<Container>
2727
<h1>Usage with React Router</h1>
2828
<p>
2929
People often want to animate route transitions, which can result in
@@ -38,14 +38,15 @@ const WithReactRouter = ({ data, location }) => (
3838
The main challenge is the <strong>exit</strong> transition because React
3939
Router changes to a new route instantly, so we need to keep the old
4040
route around long enough to transition out of it. Fortunately,{' '}
41-
<code>Route</code>'s <code>children</code> prop also accepts a{' '}
42-
<em>function</em>, which should not be confused with the{' '}
43-
<code>render</code> prop! Unlike the <code>render</code> prop,{' '}
44-
<code>children</code> function runs whether the route is matched or not.
45-
React Router passes the object containing a <code>match</code> object,
46-
which exists if the route matches, otherwise it's <code>null</code>.
47-
This enables us to manage the <code>in</code> prop of{' '}
48-
<code>CSSTransition</code> based on the presence of <code>match</code>.
41+
<code>Route</code>
42+
's <code>children</code> prop also accepts a <em>function</em>, which
43+
should not be confused with the <code>render</code> prop! Unlike the{' '}
44+
<code>render</code> prop, <code>children</code> function runs whether
45+
the route is matched or not. React Router passes the object containing a{' '}
46+
<code>match</code> object, which exists if the route matches, otherwise
47+
it's <code>null</code>. This enables us to manage the <code>in</code>{' '}
48+
prop of <code>CSSTransition</code> based on the presence of{' '}
49+
<code>match</code>.
4950
</p>
5051
<p>
5152
Exit transitions will cause the content of routes to linger until they
@@ -63,7 +64,7 @@ const WithReactRouter = ({ data, location }) => (
6364
won't execute.
6465
</p>
6566
</blockquote>
66-
</Grid>
67+
</Container>
6768
<Example
6869
codeSandbox={{
6970
title: 'CSSTransition + React Router',

‎www/src/templates/component.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { graphql } from 'gatsby';
22
import PropTypes from 'prop-types';
33
import React from 'react';
4-
import { Grid } from 'react-bootstrap';
4+
import { Container } from 'react-bootstrap';
55
import transform from 'lodash/transform';
66

77
import Layout from '../components/Layout';
@@ -53,12 +53,12 @@ class ComponentTemplate extends React.Component {
5353
return (
5454
<Layout data={data} location={location}>
5555
<div>
56-
<Grid>
56+
<Container>
5757
<h1 id={metadata.displayName}>{metadata.displayName}</h1>
5858
<p
5959
dangerouslySetInnerHTML={{ __html: extractMarkdown(metadata) }}
6060
/>
61-
</Grid>
61+
</Container>
6262

6363
<Example
6464
codeSandbox={{
@@ -69,7 +69,7 @@ class ComponentTemplate extends React.Component {
6969
}}
7070
/>
7171

72-
<Grid>
72+
<Container>
7373
<h2>
7474
<div>Props</div>
7575
{metadata.composes && (
@@ -83,7 +83,7 @@ class ComponentTemplate extends React.Component {
8383
)}
8484
</h2>
8585
{metadata.props.map(p => this.renderProp(p, metadata.displayName))}
86-
</Grid>
86+
</Container>
8787
</div>
8888
</Layout>
8989
);

0 commit comments

Comments
 (0)