Update code style

.yarnclean

@@ -0,0 +1,42 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.*.yml
+*.yml
+
+# misc
+*.gz
+*.md

package.json

@@ -9,6 +9,7 @@
     "react-flip-move": "2.9.14",
     "react-motion": "^0.5.0",
     "react-redux": "^5.0.5",
+    "react-router": "^4.1.2",
     "react-router-dom": "4.1.1",
     "redux": "^3.7.1",
     "redux-actions": "^2.0.3",

src/__test__/Menu.test.js

@@ -1,19 +1,31 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 
 import BurgerMenu from '../components/BurgerMenu/BurgerMenu';
-import { HBar, NavWrapper } from '../components/BurgerMenu/style';
+import { HBar, HBar1, HBar3, NavWrapper } from '../components/BurgerMenu/style';
 
-it('should render three horizontal bars', () => {
-  const MenuWindow = shallow(<BurgerMenu />);
-  expect(MenuWindow.find(HBar).length).toBe(3);
+describe('should render three horizontal bars', () => {
+  it('contains HBar1, HBar, and HBar3', () => {
+    const MenuWindow = shallow(<BurgerMenu />);
+    expect(MenuWindow.contains(<HBar1 />)).toBeTrue;
+    expect(MenuWindow.contains(<HBar />)).toBeTrue;
+    expect(MenuWindow.contains(<HBar3 />)).toBeTrue;
+  });
 });
 
 describe('should correctly set styles of each bar', () => {
   it('second bar disappears after clicking', () => {
     const MenuWindow = shallow(<BurgerMenu />);
     MenuWindow.find(NavWrapper).simulate('click');
-    const Bar2 = MenuWindow.find(HBar).at(1);
-    expect(Bar2.prop('style')).toEqual('opacity: 0;');
+    const Bar2 = MenuWindow.find(HBar);
+    expect(Bar2.prop('style').opacity).toBe(0);
+  });
+
+  it('snapshot test', () => {
+    const MenuWindow = shallow(<BurgerMenu />);
+    expect(toJson(MenuWindow)).toMatchSnapshot();
+    MenuWindow.find(NavWrapper).simulate('click');
+    expect(toJson(MenuWindow)).toMatchSnapshot();
   });
 });

src/__test__/__snapshots__/Menu.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should correctly set styles of each bar snapshot test 1`] = `
+<styled.div
+  onClick={[Function]}
+>
+  <styled.div
+    isNavOpen={false}
+  />
+  <styled.div
+    style={
+      Object {
+        "opacity": 1,
+        "transition": "opacity 0.25s ease-in-out",
+      }
+    }
+  />
+  <styled.div
+    isNavOpen={false}
+  />
+</styled.div>
+`;
+
+exports[`should correctly set styles of each bar snapshot test 2`] = `
+<styled.div
+  onClick={[Function]}
+>
+  <styled.div
+    isNavOpen={true}
+  />
+  <styled.div
+    style={
+      Object {
+        "opacity": 0,
+        "transition": "opacity 0.25s ease-in-out",
+      }
+    }
+  />
+  <styled.div
+    isNavOpen={true}
+  />
+</styled.div>
+`;

src/components/BurgerMenu/Bar3.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+import { HBar } from './style';
+
+export default HBar3;

src/components/BurgerMenu/BurgerMenu.js

@@ -1,18 +1,27 @@
 import React from 'react';
 
-import { HBar, NavWrapper } from './style';
+import { HBar, HBar1, HBar3, NavWrapper } from './style';
 
 class BurgerMenu extends React.Component {
   state = {
     isNavOpen: false
   };
 
+  handleClick = () => {
+    this.setState({ isNavOpen: !this.state.isNavOpen });
+  };
+
   render() {
     return (
-      <NavWrapper>
-        <HBar />
-        <HBar />
-        <HBar />
+      <NavWrapper onClick={this.handleClick}>
+        <HBar1 isNavOpen={this.state.isNavOpen} />
+        <HBar
+          style={{
+            opacity: this.state.isNavOpen ? 0 : 1,
+            transition: 'opacity 0.25s ease-in-out'
+          }}
+        />
+        <HBar3 isNavOpen={this.state.isNavOpen} />
       </NavWrapper>
     );
   }

src/components/BurgerMenu/style.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 const width = 200;
 const heightInPercent = 0.15;
+const translateHeight = width * (1 + heightInPercent) / 4;
 
 const HBar = styled.div`
   width: ${width}px;
@@ -9,6 +10,21 @@ const HBar = styled.div`
   background-color: white;
   margin: ${width * (1 - heightInPercent * 3) / 4}px auto;
 `;
+
+const HBar1 = HBar.extend`
+  transform: ${props =>
+    `translateY(${props.isNavOpen ? translateHeight : 0}px)
+rotate(${props.isNavOpen ? 45 : 0}deg)`};
+  transition: transform 0.25s ease-in-out;
+`;
+
+const HBar3 = HBar.extend`
+  transform: ${props =>
+    `translateY(${props.isNavOpen ? -translateHeight : 0}px)
+rotate(${props.isNavOpen ? -45 : 0}deg)`};
+  transition: transform 0.25s ease-in-out;
+`;
+
 const NavWrapper = styled.div`
   display: block;
   padding: 20px;
@@ -18,4 +34,4 @@ const NavWrapper = styled.div`
   text-align: center;
 `;
 
-export { HBar, NavWrapper };
+export { HBar, HBar1, HBar3, NavWrapper };

src/components/Form/Form.js

@@ -209,25 +209,17 @@ export default class Form extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit} action={<Link to="/tabss" />}>
-        <label htmlFor="name">
-          Name:
-        </label>
+        <label htmlFor="name">Name:</label>
         {this.renderInput('text', 'name')}
         {this.state.name.warnings}
-        <label htmlFor="password">
-          Password:
-        </label>
+        <label htmlFor="password">Password:</label>
         {this.renderInput('password', 'password')}
         {this.state.password.warnings}
-        <label htmlFor="password2">
-          Password:
-        </label>
+        <label htmlFor="password2">Password:</label>
         {this.renderInput('password', 'password2')}
         {this.state.password2.warnings}
 
-        <label htmlFor="comments">
-          Comments:
-        </label>
+        <label htmlFor="comments">Comments:</label>
         {this.renderInput('textarea', 'comments')}
         {this.state.comments.warnings}
         <input type="submit" value="Submit" />

src/components/Modal/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Modal from './Modal';
-import SharedTitle from '../Utils/SharedTitle.jsx';
+import SharedTitle from '../Utils/SharedTitle';
 
 // import './style.css';
 

src/components/Nav/NavLink.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-export default class MyNav extends React.Component {
+export default class MyNav extends React.PureComponent {
   render() {
     return (
       <NavLink

src/components/SlideShow/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import SlideShow from './SlideShow';
-import SharedTitle from '../Utils/SharedTitle.jsx';
+import SharedTitle from '../Utils/SharedTitle';
 
 const ModalDemo = () =>
   <div>

src/components/Tabs/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import TabView from './TabView';
-import SharedTitle from '../Utils/SharedTitle.jsx';
+import SharedTitle from '../Utils/SharedTitle';
 
 import './style.css';
 
@@ -8,9 +8,9 @@ const TabViewDemo = () =>
   <div>
     <SharedTitle />
     <p>
-      The navigation bar is itself a tab view, althoug it is constructed
-      with react-route to update URL. The following is a pure tab view that
-      does not interfere with URL.
+      The navigation bar is itself a tab view, althoug it is constructed with
+      react-route to update URL. The following is a pure tab view that does not
+      interfere with URL.
     </p>
     <hr />
     <TabView />

src/components/Toggle/Toggle.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Motion, spring } from 'react-motion';
+import FadeInOut from '../Utils/FadeInOut';
+
+export default class Toggle extends React.Component {
+  state = {
+    open: false
+  };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const animatedContent = this.state.open
+      ? [{ key: 'FadeInOut', data: 'FadeInOut', opacity: spring(1) }]
+      : null;
+    return (
+      <div>
+        <button onClick={this.handleClick}>Toggle</button>
+        <h3>
+          Status: {this.state.open ? 'open' : 'closed'}
+        </h3>
+        <Motion style={{ x: spring(this.state.open ? 200 : 0) }}>
+          {({ x }) =>
+            <div className="toggle-bg">
+              <div
+                className="toggle-block"
+                onClick={this.handleClick}
+                style={{
+                  transform: `translate3d(${x}px, 0, 0)`
+                }}
+              />
+            </div>}
+        </Motion>
+        <FadeInOut content={animatedContent} />
+      </div>
+    );
+  }
+}

src/components/Utils/SharedTitle.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const SharedTile = () => <h2>Comments</h2>;
+
+export default SharedTile;

yarn.lock

@@ -5344,6 +5344,18 @@ react-router@^4.1.1:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
+react-router@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.2.tgz#7ae027341abc42eb08ad9f7a8cac08d0563672ce"
+  dependencies:
+    history "^4.6.0"
+    hoist-non-react-statics "^1.2.0"
+    invariant "^2.2.2"
+    loose-envify "^1.3.1"
+    path-to-regexp "^1.5.3"
+    prop-types "^15.5.4"
+    warning "^3.0.0"
+
 [email protected]:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.7.tgz#fe1436dda03bb45465c76d097cfea4f32eb7cbbb"