Split docs into pages, update examples and other details

.eslintignore

@@ -0,0 +1,3 @@
+**/node_modules
+www/.cache/
+www/public/

.gitignore

@@ -37,3 +37,6 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+# Visual Studio Code configuration
+.vscode

package.json

@@ -74,10 +74,13 @@
     "enzyme-adapter-react-16": "^1.0.0",
     "eslint": "^3.17.1",
     "eslint-config-jason": "^4.0.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^6.10.3",
     "jest": "^20.0.4",
+    "prettier": "^1.11.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",

src/CSSTransition.js

@@ -109,7 +109,9 @@ const propTypes = {
  * the `example-enter` CSS class and the `example-enter-active` CSS class
  * added in the next tick. This is a convention based on the `classNames` prop.
  *
- * <iframe src="https://codesandbox.io/embed/kw8z6pp9zo?autoresize=1&fontsize=12&hidenavigation=1&moduleview=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+ * ## Example
+ *
+ * <iframe src="https://codesandbox.io/embed/m77l2vp00x?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"></iframe>
  */
 class CSSTransition extends React.Component {
   onEnter = (node, appearing) => {

src/Transition.js

@@ -55,10 +55,10 @@ export const EXITING = 'exiting';
  * component (such as by adding styles or classes) when it changes states.
  *
  * There are 4 main states a Transition can be in:
- *  - `ENTERING`
- *  - `ENTERED`
- *  - `EXITING`
- *  - `EXITED`
+ *  - `entering`
+ *  - `entered`
+ *  - `exiting`
+ *  - `exited`
  *
  * Transition state is toggled via the `in` prop. When `true` the component begins the
  * "Enter" stage. During this stage, the component will shift from its current transition state,
@@ -87,9 +87,19 @@ export const EXITING = 'exiting';
  *
  * When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`.
  *
- * ### Example
+ * > **Note**: For simpler transitions the `Transition` component might be enough, but
+ * > take into account that it's platform-agnostic, while the `CSSTransition` component
+ * > [forces reflows](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
+ * > in order to make more complex transitions more predictable. For example, even though
+ * > classes `example-enter` and `example-enter-active` are applied immediately one after
+ * > another, you can still transition from one to the other because of the forced reflow
+ * > (read [this issue](https://github.com/reactjs/react-transition-group/issues/159#issuecomment-322761171)
+ * > for more info). Take this into account when choosing between `Transition` and
+ * > `CSSTransition`.
  *
- * <iframe src="https://codesandbox.io/embed/y26rj99yov?autoresize=1&fontsize=12&hidenavigation=1&moduleview=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+ * ## Example
+ *
+ * <iframe src="https://codesandbox.io/embed/741op4mmj0?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"></iframe>
  *
  */
 class Transition extends React.Component {

src/TransitionGroup.js

@@ -70,7 +70,9 @@ const defaultProps = {
  * automatically by the `<TransitionGroup>`. You can use _any_ `<Transition>`
  * component in a `<TransitionGroup>`, not just css.
  *
- * <iframe src="https://codesandbox.io/embed/43v5wj62q9?autoresize=1&fontsize=12&hidenavigation=1&moduleview=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+ * ## Example
+ *
+ * <iframe src="https://codesandbox.io/embed/00rqyo26kn?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"></iframe>
  *
  * Note that `<TransitionGroup>`  does not define any animation behavior!
  * Exactly _how_ a list item animates is up to the individual `<Transition>`

www/.eslintrc.yml

@@ -0,0 +1,10 @@
+
+globals:
+  graphql: false
+extends:
+  - prettier
+  - prettier/react
+plugins:
+  - prettier
+rules:
+  prettier/prettier: error

www/.prettierrc.yml

@@ -0,0 +1,3 @@
+
+singleQuote: true
+trailingComma: es5

www/gatsby-config.js

@@ -5,6 +5,11 @@ module.exports = {
   siteMetadata: {
     title: 'React Transition Group Documentation',
     author: 'Jason Quense',
+    componentPages: [
+      { path: '/transition', displayName: 'Transition' },
+      { path: '/css-transition', displayName: 'CSSTransition' },
+      { path: '/transition-group', displayName: 'TransitionGroup' },
+    ],
   },
   plugins: [
     {
@@ -24,12 +29,10 @@ module.exports = {
     {
       resolve: 'gatsby-transformer-remark',
       options: {
-        plugins: [
-          'gatsby-remark-prismjs',
-        ],
+        plugins: ['gatsby-remark-prismjs'],
       },
     },
     'gatsby-transformer-react-docgen',
-    'gatsby-plugin-sass'
+    'gatsby-plugin-sass',
   ],
-}
+};

www/gatsby-node.js

@@ -0,0 +1,47 @@
+const path = require('path');
+const config = require('./gatsby-config');
+
+exports.createPages = ({ boundActionCreators, graphql }) => {
+  const { createPage } = boundActionCreators;
+  const componentTemplate = path.join(
+    __dirname,
+    'src',
+    'templates',
+    'component.js'
+  );
+  return new Promise((resolve, reject) => {
+    resolve(
+      graphql(`
+        {
+          allComponentMetadata {
+            edges {
+              node {
+                displayName
+              }
+            }
+          }
+        }
+      `).then(result => {
+        if (result.errors) {
+          reject(result.errors);
+        }
+        const { componentPages } = config.siteMetadata;
+        result.data.allComponentMetadata.edges
+          .filter(({ node: { displayName } }) =>
+            componentPages.some(page => page.displayName === displayName)
+          )
+          .forEach(({ node: { displayName } }) => {
+            createPage({
+              path: componentPages.find(
+                page => page.displayName === displayName
+              ).path,
+              component: componentTemplate,
+              context: {
+                displayName,
+              },
+            });
+          });
+      })
+    );
+  });
+};

www/package.json

@@ -12,15 +12,16 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "bootstrap": "^4.0.0-alpha.6",
+    "bootstrap": "^3.3.7",
     "gatsby": "^1.0.0",
     "gatsby-link": "^1.0.0",
     "gatsby-plugin-sass": "^1.0.0",
     "gatsby-remark-prismjs": "^1.0.0",
     "gatsby-source-filesystem": "^1.0.0",
     "gatsby-transformer-react-docgen": "^1.0.0",
     "gatsby-transformer-remark": "^1.0.0",
-    "lodash": "^4.17.4"
+    "lodash": "^4.17.4",
+    "react-bootstrap": "^0.32.1"
   },
   "devDependencies": {
     "gh-pages": "^1.0.0"

www/src/css/bootstrap.scss

@@ -1,21 +1,41 @@
-
+@import '~bootstrap/dist/css/bootstrap.css';
 @import 'variables.scss';
 
-$body-bg: $syntax-bg;
-$code-bg: $syntax-bg;
-$code-color: $hue-3;
-$headings-margin-bottom: 2rem;
+html {
+  font-size: 16px;
+}
 
-@import '~bootstrap/scss/bootstrap.scss';
+body {
+  background: $syntax-bg;
+  font-size: 1rem;
+}
 
+pre {
+  border: 0;
+  background: transparent;
+}
+
+code {
+  background: transparent;
+  color: $hue-3;
+  a & {
+    padding: 0;
+  }
+}
 
 section {
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
 h1, h2, h3, h4, h5 {
+  margin-bottom: 2rem;
+
   & > a,
   & > a:hover {
-    color: $headings-color;
+    color: inherit;
   }
-}
+}
+
+iframe[src*=codesandbox] + p {
+  margin-top: 1rem;
+}

www/src/html.js

@@ -1,11 +1,13 @@
-import React from "react"
-import PropTypes from "prop-types"
+import React from 'react';
+import PropTypes from 'prop-types';
 
 let inlinedStyles = '';
 if (process.env.NODE_ENV === 'production') {
   try {
+    // eslint-disable-next-line global-require
     inlinedStyles = require('!raw-loader!../public/styles.css');
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.log(e);
   }
 }
@@ -21,13 +23,19 @@ const Html = ({ headComponents, body, postBodyComponents }) => {
     );
   }
   return (
-    <html>
+    <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta httpEquiv="x-ua-compatible" content="ie=edge"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
         {headComponents}
-        <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+        <script
+          async
+          src="https://production-assets.codepen.io/assets/embed/ei.js"
+        />
         <title>React Transition Group</title>
         {css}
       </head>
@@ -43,6 +51,6 @@ Html.propTypes = {
   headComponents: PropTypes.node.isRequired,
   body: PropTypes.node.isRequired,
   postBodyComponents: PropTypes.node.isRequired,
-}
+};
 
-export default Html
+export default Html;

www/src/layouts/index.js

@@ -0,0 +1,95 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Link from 'gatsby-link';
+import { Grid, Navbar, Nav } from 'react-bootstrap';
+
+import '../css/bootstrap.scss';
+import '../css/prism-theme.scss';
+
+const propTypes = {
+  data: PropTypes.shape({
+    site: PropTypes.shape({
+      siteMetadata: PropTypes.shape({
+        componentPages: PropTypes.arrayOf(
+          PropTypes.shape({
+            path: PropTypes.string.isRequired,
+            displayName: PropTypes.string.isRequired,
+          })
+        ).isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+  location: PropTypes.object.isRequired,
+};
+
+const NavItem = ({ active, to, children }) => (
+  <li role="presentation" className={active ? 'active' : null}>
+    <Link aria-selected={active} to={to}>
+      {children}
+    </Link>
+  </li>
+);
+
+NavItem.propTypes = {
+  active: PropTypes.bool,
+  to: PropTypes.string.isRequired,
+};
+
+class BaseLayout extends React.Component {
+  render() {
+    const { data, location, children } = this.props;
+    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 pullRight>
+              {data.site.siteMetadata.componentPages.map(
+                ({ path, displayName }) => (
+                  <NavItem
+                    key={path}
+                    active={path === location.pathname}
+                    to={path}
+                  >
+                    {displayName}
+                  </NavItem>
+                )
+              )}
+            </Nav>
+          </Navbar.Collapse>
+        </Navbar>
+        <Grid style={{ paddingTop: '4rem', paddingBottom: '1rem' }}>
+          {children()}
+        </Grid>
+      </div>
+    );
+  }
+}
+
+BaseLayout.propTypes = propTypes;
+
+export default BaseLayout;
+
+export const exposedComponentsFragment = graphql`
+  fragment ComponentPages on RootQueryType {
+    site {
+      siteMetadata {
+        componentPages {
+          path
+          displayName
+        }
+      }
+    }
+  }
+`;
+
+export const query = graphql`
+  query BaseLayout {
+    ...ComponentPages
+  }
+`;