Improve docs

Author: cvle

.eslintignore

@@ -0,0 +1 @@
+/docs/src/examples/**

docs/src/app.tsx

@@ -6,6 +6,7 @@ import { CSSTransition, CSSTransitionProps, transit } from "react-css-transition
 import { Demo, Logo, SyntaxHighlighter, Button, Quote } from "./components";
 
 import {
+  IntroExample,
   InlineExample, inlineExampleSource,
   ClassExample, classExampleSource,
   CompletionExample, completionExampleSource,
@@ -25,10 +26,11 @@ import {
   initStyleSnippet,
   groupTreeSnippet,
   groupTranistionSnippet,
+  groupSnippet,
+  groupExampleSnippet,
   cssSnippet,
   componentSnippet,
   introSnippet,
-  groupSnippet,
   delaySnippet,
   delayObjectSnippet,
 } from "./snippets";
@@ -133,6 +135,7 @@ const App: StatelessComponent<void> = () => (
 
         <section className={classes.mainSection}>
           <h3>How It Looks Like</h3>
+          <IntroExample />
           <SyntaxHighlighter language="javascript">
             {introSnippet}
           </SyntaxHighlighter>
@@ -320,21 +323,27 @@ const App: StatelessComponent<void> = () => (
           <SyntaxHighlighter language="bash">
             {groupTreeSnippet}
           </SyntaxHighlighter>
-          <div className={classes.block}>
-            <Demo title="Transition Group Example" component={GroupExample} source={groupExampleSource} />
-          </div>
           <p>
             Let's predefine a <code>CSSTransition</code>:
           </p>
           <SyntaxHighlighter language="javascript">
             {groupTranistionSnippet}
           </SyntaxHighlighter>
           <p>
-            Finally create a component that fades in and out its children:
+            Then create a component that fades in and out its children:
           </p>
           <SyntaxHighlighter language="javascript">
             {groupSnippet}
           </SyntaxHighlighter>
+          <p>
+            Finally we put it into use:
+          </p>
+          <SyntaxHighlighter language="javascript">
+            {groupExampleSnippet}
+          </SyntaxHighlighter>
+          <div className={classes.block}>
+            <Demo title="Transition Group Example" component={GroupExample} source={groupExampleSource} />
+          </div>
 
           <section className={classes.mainSection}>
             <h4>Appear on Initial Mount</h4>

docs/src/components/syntaxHighlighter.ts

@@ -11,7 +11,7 @@ registerLanguage("bash", bash);
 
 const customStyle = {
   padding: "16px",
-  fontSize: "14px",
+  fontSize: "13px",
 };
 
 const codeTagProps = {

docs/src/examples/appearExample.jsx

@@ -1,60 +1,57 @@
-import * as React from "react";
-import { CSSTransition, transit } from "react-css-transition";
+import * as React from 'react';
+import { CSSTransition, transit } from 'react-css-transition';
 
-import { prefix } from "../theme";
-import { Button } from "../components";
+import { prefix } from '../theme';
+import { Button } from '../components';
+import Circle from "./circle";
 
 const styles = prefix({
-  style: {
-    display: "inline-box",
-    boxShadow: "1px 1px 5px 0px rgba(0,0,0,0.25)",
-    borderRadius: "50%",
-    background: "#dc7d16",
-    height: "20px",
-    width: "20px",
-    marginRight: "8px",
-  },
   defaultStyle: {
     opacity: 0,
   },
   enterStyle: {
-    opacity: transit(1.0, 500, "ease-in-out"),
+    opacity: transit(1.0, 500, 'ease-in-out'),
   },
   leaveStyle: {
-    opacity: transit(0, 500, "ease-in-out"),
+    opacity: transit(0, 500, 'ease-in-out'),
   },
   activeStyle: {
     opacity: 1,
   },
 });
 
 class AppearExample extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {mounted: 1};
+    this.handleClickMount = this.handleClickMount.bind(this);
+    this.handleClickUnmount = this.handleClickUnmount.bind(this);
   }
 
-  onClickMount = () => this.setState({mounted: this.state.mounted < 6 ? this.state.mounted + 1 : 6});
-  onClickUnmount = () => this.setState({mounted: this.state.mounted > 0 ? this.state.mounted - 1 : 0});
+  handleClickMount() {
+    const mounted = this.state.mounted;
+    this.setState({mounted: mounted < 6 ? mounted + 1 : 6});
+  }
+
+  handleClickUnmount() {
+    const mounted = this.state.mounted;
+    this.setState({mounted: mounted > 0 ? mounted - 1 : 0});
+  }
 
   render() {
     return (
     <div>
-      <div style={prefix({ display: "flex", marginBottom: "32px", height: "20px" })}>
+      <div style={prefix({ display: 'flex', marginBottom: '32px', height: '20px' })}>
         {
-          Array(this.state.mounted).fill("").map((_, idx) =>
-            <CSSTransition
-              {...styles}
-              key={idx}
-              active={true}
-              transitionAppear
-              />,
+          Array(this.state.mounted).fill('').map((_, idx) =>
+            <CSSTransition {...styles} key={idx} active={true} transitionAppear>
+              <Circle />
+            </CSSTransition>
           )
         }
       </div>
-      <Button style={{ marginRight: "16px" }} onClick={this.onClickMount}>Mount</Button>
-      <Button onClick={this.onClickUnmount}>Unmount</Button>
+      <Button style={{ marginRight: '16px' }} onClick={this.handleClickMount}>Mount</Button>
+      <Button onClick={this.handleClickUnmount}>Unmount</Button>
     </div>
     );
   }

docs/src/examples/circle.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { prefix } from "../theme";
+
+const style = prefix({
+  boxShadow: "1px 1px 5px 0px rgba(0,0,0,0.25)",
+  borderRadius: "50%",
+  marginBottom: "32px",
+  background: "#dc7d16",
+  height: "20px",
+  width: "20px",
+  marginRight: "8px",
+});
+
+const Circle = () => <div style={ style } />;
+
+export default Circle;

docs/src/examples/classExample.css.ts

@@ -1,14 +1,6 @@
-import { createClassRules, accentColor } from "../theme";
+import { createClassRules } from "../theme";
 
 export default createClassRules({
-  className: {
-    boxShadow: "1px 1px 5px 0px rgba(0,0,0,0.25)",
-    borderRadius: "50%",
-    marginBottom: "32px",
-    background: accentColor.default,
-    height: "20px",
-    width: "20px",
-  },
   defaultClassName: {
     transform: "translate(0, 0)",
   },

docs/src/examples/classExample.jsx

@@ -2,18 +2,11 @@ import * as React from "react";
 import { CSSTransition } from "react-css-transition";
 
 import { Button } from "../components";
+import Circle from "./circle";
 
 /*
   CSS defined using CSS-Modules.
 
-  .className: {
-    boxShadow: "1px 1px 5px 0px rgba(0,0,0,0.25)",
-    borderRadius: "50%",
-    marginBottom: "32px",
-    background: "#dc7d16",
-    height: "20px",
-    width: "20px",
-  },
   .defaultClassName: {
     transform: "translate(0, 0)",
   },
@@ -33,22 +26,23 @@ import { Button } from "../components";
 import classes from "./classExample.css";
 
 class ClassExample extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {active: false};
+    this.handleClick = this.handleClick.bind(this);
   }
 
-  onClick = () => this.setState({active: !this.state.active});
+  handleClick() {
+    this.setState({active: !this.state.active});
+  }
 
   render() {
     return (
       <div>
-        <CSSTransition
-          {...classes}
-          active={this.state.active}
-          />
-        <Button onClick={this.onClick}>Trigger</Button>
+        <CSSTransition {...classes} active={this.state.active}>
+          <Circle />
+        </CSSTransition>
+        <Button onClick={this.handleClick}>Trigger</Button>
       </div>
     );
   }

docs/src/examples/completionExample.jsx

@@ -3,15 +3,9 @@ import { CSSTransition, transit } from "react-css-transition";
 
 import { prefix } from "../theme";
 import { Button } from "../components";
+import Circle from "./circle";
 
 const styles = prefix({
-  style: {
-    boxShadow: "1px 1px 5px 0px rgba(0,0,0,0.25)",
-    borderRadius: "50%",
-    background: "#dc7d16",
-    height: "20px",
-    width: "20px",
-  },
   defaultStyle: {
     transform: "translate(0, 0)",
   },
@@ -26,29 +20,37 @@ const styles = prefix({
   },
 });
 
-class InlineExample extends React.Component {
-
+class CompletionExample extends React.Component {
   constructor(props) {
     super(props);
     this.state = {active: false, count: 0};
+    this.handleClick = this.handleClick.bind(this);
+    this.handleTransitionComplete = this.handleTransitionComplete.bind(this);
   }
 
-  onClick = () => this.setState({active: !this.state.active});
-  onTransitionComplete = () => this.setState({count: this.state.count + 1});
+  handleClick() {
+    this.setState({active: !this.state.active});
+  }
+
+  handleTransitionComplete() {
+    this.setState({count: this.state.count + 1});
+  }
 
   render() {
     return (
       <div>
         <CSSTransition
           {...styles}
-          onTransitionComplete={this.onTransitionComplete}
+          onTransitionComplete={this.handleTransitionComplete}
           active={this.state.active}
-          />
+          >
+          <Circle />
+        </CSSTransition>
         <p><code>onTransitionComplete calls: {this.state.count}</code></p>
-        <Button onClick={this.onClick}>Trigger</Button>
+        <Button onClick={this.handleClick}>Trigger</Button>
       </div>
     );
   }
 }
 
-export default InlineExample;
+export default CompletionExample;

docs/src/examples/groupExample.css.ts

@@ -0,0 +1,35 @@
+import { createClassRules, accentColor, timing } from "../theme";
+
+export default createClassRules({
+  container: {
+    width: "100%",
+    maxWidth: "240px",
+    marginBottom: "32px",
+  },
+
+  item: {
+    padding: "8px 16px",
+    borderBottom: 0,
+    cursor: "pointer",
+    boxShadow: "1px 1px 5px #ccc",
+    borderLeft: `4px solid ${accentColor.default}`,
+    background: "#fff",
+    position: "relative",
+    fontSize: "15px",
+    lineHeight: "1.5",
+    color: "#666",
+    marginBottom: "16px",
+    userSelect: "none",
+    touchAction: "manipulation",
+    WebkitTapHighlightColor: "rgba(0, 0, 0, 0) !important",
+    transition: `background 400ms ${timing.easeInOut}`,
+
+    "&:hover": {
+      background: "#eee",
+    },
+    "&:active": {
+      transition: 0,
+      background: "#ddd",
+    },
+  },
+});