Merge pull request #5 from akiokio/react-16

React 16

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure } from '@kadira/storybook';
+import { configure } from '@storybook/react';
 
 function loadStories() {
   require('../src/stories');

README.md

@@ -7,6 +7,7 @@
 Check out the [examples](https://akiokio.github.io/ReactSignupLoginComponent/) to learn how to use it.
 
 ## Features
+- Updated to React 16 🎉
 - Login
 - Signup
 - Recover Password
@@ -64,7 +65,7 @@ export default LoginPage;
 ### `handleSignup(object)`
 Called when the users clicks on the signup button and the form is valid
 **return**: An object with the attributes: **username**, **password** and **passwordConfirmation**
-**example**: 
+**example**:
 ```js
 {
   username: 'johndoe',
@@ -75,7 +76,7 @@ Called when the users clicks on the signup button and the form is valid
 ### `handleLogin(object)`
 Called when the users clicks on the login button and the form is valid
 **return**: An object with the attributes: **username** and **password**
-**example**: 
+**example**:
 ```js
 {
   username: 'johndoe',
@@ -86,7 +87,7 @@ Called when the users clicks on the login button and the form is valid
 ### `handleRecoverPassword(object)`
 Called when the users clicks on the recover password button and the form is valid
 **return**: An object with the attributes: **username**
-**example**: 
+**example**:
 ```js
 {
   username: 'johndoe'
@@ -96,7 +97,7 @@ Called when the users clicks on the recover password button and the form is vali
 ### Optional props
 ### `title`
 Sets the h1 title on the login box
-**example**: 
+**example**:
 ```js
 <Wrapper
   title="My awesome company"
@@ -106,7 +107,7 @@ Sets the h1 title on the login box
 
 ### `styles`
 You can overhide the component style passing an object to the styles prop. Here's an example with all the possible keys. The values can be any valid css property.
-**example**: 
+**example**:
 ```js
 <ReactSignupLoginComponent
   styles={{

dist/ReactSignupLoginComponent.test.js

@@ -132,38 +132,38 @@ describe('the main wrapper', function () {
   it('should attach the login inputs to the state', function () {
     var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_ReactSignupLoginComponent2.default, requiredMockProps));
     var usernameInput = wrapper.find('#login-form input[name="username"]');
-    usernameInput.node.value = 'john123';
+    usernameInput.instance().value = 'john123';
     usernameInput.simulate('change', usernameInput);
     expect(wrapper.state().username).toEqual('john123');
 
     var passwordInput = wrapper.find('#login-form input[name="password"]');
-    passwordInput.node.value = 'themonkeyatethebanana';
+    passwordInput.instance().value = 'themonkeyatethebanana';
     passwordInput.simulate('change', passwordInput);
     expect(wrapper.state().password).toEqual('themonkeyatethebanana');
   });
 
   it('should attach the signup inputs to the state', function () {
     var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_ReactSignupLoginComponent2.default, Object.assign({ isLogin: false }, requiredMockProps)));
     var usernameInput = wrapper.find('#signup-form input[name="username"]');
-    usernameInput.node.value = 'johnSignup123';
+    usernameInput.instance().value = 'johnSignup123';
     usernameInput.simulate('change', usernameInput);
     expect(wrapper.state().username).toEqual('johnSignup123');
 
     var passwordInput = wrapper.find('#signup-form input[name="password"]');
-    passwordInput.node.value = 'themonkeyatethebananaonsignup';
+    passwordInput.instance().value = 'themonkeyatethebananaonsignup';
     passwordInput.simulate('change', passwordInput);
     expect(wrapper.state().password).toEqual('themonkeyatethebananaonsignup');
 
     var passConfirmInput = wrapper.find('#signup-form input[name="passwordConfirmation"]');
-    passConfirmInput.node.value = 'themonkeyatethebananaonsignup';
+    passConfirmInput.instance().value = 'themonkeyatethebananaonsignup';
     passConfirmInput.simulate('change', passConfirmInput);
     expect(wrapper.state().password).toEqual('themonkeyatethebananaonsignup');
   });
 
   it('should attach the recorver password input to the state', function () {
     var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_ReactSignupLoginComponent2.default, Object.assign({ isRecoveringPassword: true }, requiredMockProps)));
     var usernameInput = wrapper.find('#recover-password-form input[name="username"]');
-    usernameInput.node.value = 'john123';
+    usernameInput.instance().value = 'john123';
     usernameInput.simulate('change', usernameInput);
     expect(wrapper.state().username).toEqual('john123');
   });

package.json

@@ -1,41 +1,47 @@
 {
   "name": "react-signup-login-component",
-  "version": "0.1.6",
+  "version": "1.0.0",
   "main": "dist/ReactSignupLoginComponent.js",
   "engines": {
     "node": ">=6.0.0"
   },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "build:module": "NODE_ENV=production babel src/components --presets react-app --out-dir dist --copy-files",
+    "test": "react-scripts test --env=jsdom",
+    "coverage": "react-scripts test --env=jsdom --coverage --collectCoverageFrom=src/components/*.js",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public",
+    "predeploy": "npm run build-storybook",
+    "deploy": "gh-pages -d build"
+  },
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
     "babel-preset-react-app": "^3.0.3",
     "coveralls": "^3.0.0",
-    "enzyme": "3.1.0",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.1",
     "eslint": "4.8.0",
     "eslint-config-airbnb": "16.0.0",
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-jsx-a11y": "6.0.2",
     "eslint-plugin-react": "7.4.0",
     "gh-pages": "^1.0.0",
     "react-addons-test-utils": "15.6.2",
-    "react-scripts": "1.0.14"
+    "react-scripts": "1.0.14",
+    "react-test-renderer": "16",
+    "@storybook/react": "^3.2.12",
+    "@storybook/addon-actions": "^3.2.12",
+    "@storybook/addon-links": "^3.2.12"
   },
   "dependencies": {
-    "normalize.css": "^7.0.0",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
-    "react-signup-login-component": "^0.1.5"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "build:module": "NODE_ENV=production babel src/components --presets react-app --out-dir dist --copy-files",
-    "test": "react-scripts test --env=jsdom",
-    "coverage": "react-scripts test --env=jsdom --coverage --collectCoverageFrom=src/components/*.js",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public -o build",
-    "predeploy": "npm run build-storybook",
-    "deploy": "gh-pages -d build"
+    "core-js": "^2.5.1",
+    "normalize.css": "^5.0.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-signup-login-component": "^0.1.6"
   },
   "homepage": "https://github.com/akiokio/ReactSignupLoginComponent"
 }

src/components/Login.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 const localStyles = {
@@ -47,80 +48,85 @@ const localStyles = {
 };
 
 const Login = ({
-    handleShowSignup,
-    handleShowRecover,
-    styles,
-    handleLogin,
-    handleChange,
-    username,
-    password,
-  }) => (
-    <section id="login-form" style={Object.assign({}, localStyles.wrapper, styles.wrapper)}>
-      <div id="fields" style={Object.assign({}, localStyles.inputWrapper, styles.inputWrapper)}>
-        <input
-          style={Object.assign({}, localStyles.input, styles.input)}
-          type="text"
-          id="username"
-          name="username"
-          placeholder="Username"
-          onChange={e => handleChange(e.target.name, e.target.value)}
-          value={username}
-        />
-        <input
-          style={Object.assign({}, localStyles.input, styles.input)}
-          type="password"
-          id="password"
-          name="password"
-          placeholder="Password"
-          onChange={e => handleChange(e.target.name, e.target.value)}
-          value={password}
-        />
-      </div>
-      <div style={Object.assign({}, localStyles.buttonsWrapper, styles.buttonsWrapper)}>
-        <div
-          style={Object.assign(
-            {},
-            localStyles.recoverPasswordWrapper,
-            styles.recoverPasswordWrapper)}
-        >
-          <button
-            id="recorver-password"
-            style={Object.assign({}, localStyles.recoverPassword, styles.recoverPasswordButton)}
-            onClick={() => { handleShowRecover('isRecoveringPassword', true); }}
-          >Recover Password</button>
-        </div>
+  handleShowSignup,
+  handleShowRecover,
+  styles,
+  handleLogin,
+  handleChange,
+  username,
+  password,
+}) => (
+  <section id="login-form" style={Object.assign({}, localStyles.wrapper, styles.wrapper)}>
+    <div id="fields" style={Object.assign({}, localStyles.inputWrapper, styles.inputWrapper)}>
+      <input
+        style={Object.assign({}, localStyles.input, styles.input)}
+        type="text"
+        id="username"
+        name="username"
+        placeholder="Username"
+        onChange={e => handleChange(e.target.name, e.target.value)}
+        value={username}
+      />
+      <input
+        style={Object.assign({}, localStyles.input, styles.input)}
+        type="password"
+        id="password"
+        name="password"
+        placeholder="Password"
+        onChange={e => handleChange(e.target.name, e.target.value)}
+        value={password}
+      />
+    </div>
+    <div style={Object.assign({}, localStyles.buttonsWrapper, styles.buttonsWrapper)}>
+      <div
+        style={Object.assign({}, localStyles.recoverPasswordWrapper, styles.recoverPasswordWrapper)}
+      >
         <button
-          id="signup-button"
-          style={Object.assign({}, localStyles.button, styles.button)}
-          onClick={() => { handleShowSignup('isLogin', false); }}
-        >Signup</button>
-        <input
-          id="submit-login"
-          name="submit-login"
-          type="submit"
-          value="Login"
-          style={Object.assign({}, localStyles.button, styles.button)}
-          onClick={handleLogin}
-        />
+          id="recorver-password"
+          style={Object.assign({}, localStyles.recoverPassword, styles.recoverPasswordButton)}
+          onClick={() => {
+            handleShowRecover('isRecoveringPassword', true);
+          }}
+        >
+          Recover Password
+        </button>
       </div>
-    </section>
+      <button
+        id="signup-button"
+        style={Object.assign({}, localStyles.button, styles.button)}
+        onClick={() => {
+          handleShowSignup('isLogin', false);
+        }}
+      >
+        Signup
+      </button>
+      <input
+        id="submit-login"
+        name="submit-login"
+        type="submit"
+        value="Login"
+        style={Object.assign({}, localStyles.button, styles.button)}
+        onClick={handleLogin}
+      />
+    </div>
+  </section>
 );
 
 Login.propTypes = {
-  handleShowSignup: React.PropTypes.func.isRequired,
-  handleShowRecover: React.PropTypes.func.isRequired,
-  handleLogin: React.PropTypes.func.isRequired,
-  handleChange: React.PropTypes.func.isRequired,
-  username: React.PropTypes.string.isRequired,
-  password: React.PropTypes.string.isRequired,
-  styles: React.PropTypes.shape({
-    wrapper: React.PropTypes.object,
-    inputWrapper: React.PropTypes.object,
-    buttonsWrapper: React.PropTypes.object,
-    input: React.PropTypes.object,
-    recoverPasswordWrapper: React.PropTypes.object,
-    recoverPasswordButton: React.PropTypes.object,
-    button: React.PropTypes.object,
+  handleShowSignup: PropTypes.func.isRequired,
+  handleShowRecover: PropTypes.func.isRequired,
+  handleLogin: PropTypes.func.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  username: PropTypes.string.isRequired,
+  password: PropTypes.string.isRequired,
+  styles: PropTypes.shape({
+    wrapper: PropTypes.object,
+    inputWrapper: PropTypes.object,
+    buttonsWrapper: PropTypes.object,
+    input: PropTypes.object,
+    recoverPasswordWrapper: PropTypes.object,
+    recoverPasswordButton: PropTypes.object,
+    button: PropTypes.object,
   }),
 };
 

src/components/Login.test.js

@@ -35,14 +35,16 @@ describe('the login form', () => {
 
   it('should call handle login when submit-login clicked', () => {
     const loginCallback = jest.fn();
-    const wrapper = shallow(<Login
-      handleShowSignup={jest.fn()}
-      handleLogin={loginCallback}
-      handleShowRecover={jest.fn()}
-      handleChange={jest.fn()}
-      username=""
-      password=""
-    />);
+    const wrapper = shallow(
+      <Login
+        handleShowSignup={jest.fn()}
+        handleLogin={loginCallback}
+        handleShowRecover={jest.fn()}
+        handleChange={jest.fn()}
+        username=""
+        password=""
+      />,
+    );
     wrapper.find('#submit-login').simulate('click');
     expect(loginCallback.mock.calls.length).toEqual(1);
   });