react-responsive-carousel - npm Package Compare versions

Comparing version 3.1.51 to 3.1.52

CHANGELOG.md

@@ -10,4 +10,12 @@ # Changelog
 
-## [Unreleased](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.50...HEAD)
+## [Unreleased](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.51...HEAD)
 
+## [v3.1.51](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.50...v3.1.51) - 2019-10-23
+
+### Commits
+
+- Refactor labels to obj prop. Aria label all buttons. [`c5320e6`](https://github.com/leandrowd/react-responsive-carousel/commit/c5320e6317e3f6996f820ecfed12ea83e09cc25f)
+- Add tests for swipe gesture callbacks and update documentation [`fe8b433`](https://github.com/leandrowd/react-responsive-carousel/commit/fe8b43396228612d5427d036816b80085bd1a624)
+- Add callbacks for swipe gestures [`297037e`](https://github.com/leandrowd/react-responsive-carousel/commit/297037ecad61d42421407d3b8bb50f1f12722f06)
+
 ## [v3.1.50](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.49...v3.1.50) - 2019-08-11
@@ -17,2 +25,4 @@
 
+- issue-266: [`e932d21`](https://github.com/leandrowd/react-responsive-carousel/commit/e932d2181d009f02baf31f67bcdd5ce5e2811f07)
+- issue-266: Add the build directori lib updated [`96bf36d`](https://github.com/leandrowd/react-responsive-carousel/commit/96bf36d3aa2232f5de31c23dba6004d6d4c4b0f4)
 - fix(onClickItem): cancelClick should be true when onSwipeEnd [`6e8dbbf`](https://github.com/leandrowd/react-responsive-carousel/commit/6e8dbbf9c3cf8d0ea94f48a8a641d19cc9727075)
@@ -19,0 +29,0 @@

CONTRIBUTING.md

@@ -5,30 +5,39 @@ # Contributing
 
+## Raising issues
+When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting.
 
+* A new option is to create a code pen with the code that causes the bug. Fork this [example](https://www.webpackbin.com/bins/-Kxr6IEf5zXSQvGCgKBR) and add your code there, then fork and add the new link to the issue.
+
+
 ## Creating Pull Requests
+Pull requests are always welcome. To speed up the review process, please ensure that your pull request have:
 
-Pull requests are always welcome. In order to send a Pull Request, you will need to setup your environment;
+- A good title and description message;
+- Recommended that each commit follows the commit message format #{issueId}: {commitDescriptionj}
+- Tests covering the changes;
+- Story (storybook) if it's a new feature;
+- Green builds;
 
+In order to send a Pull Request, you will need to setup your environment - check instructions below;
+
+## How to setup the development environment
 Fork and clone the repo:
 - `git clone [e-mail]:leandrowd/react-responsive-carousel.git`
 
+Ensure you have the right node version:
+- `nvm use` # or `nvm install` in case the right version is not installed. Find the right version looking at the `.nvmrc` file.
+
 Install dependencies:
-- `npm install`
+- `yarn install`
 
 Start the dev server:
-- `npm start`
+- `yarn start`
 
-Open your favourite browser on `localhost:8000` - livereload will be enabled and tests will run on each change.
+Run the tests: 
+- `yarn test`
 
-### Guidelines
-- Make sure your editor supports [editorConfig](http://editorconfig.org/) so the code formatting is consistent;
-- Add a descriptive commit message;
-- Add tests to cover your changes;
-- If needed, add a story (storybook);
-- DO NOT change files in the /lib folder;
+Format the files: 
+- `yarn format:write` # this will also run as part of the pre-commit hook. CI will fail the build if unformatted files are pushed.
 
-
-## Raising issues
-When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting.
-
-* A new option is to create a code pen with the code that causes the bug. Fork this [example](https://www.webpackbin.com/bins/-Kxr6IEf5zXSQvGCgKBR) and add your code there, then fork and add the new link to the issue.
-
+Develop on storybooks (optional):
+- `yarn storybook`

lib/components/Carousel.js

@@ -431,24 +431,2 @@ 'use strict';
     }, {
-        key: 'componentWillReceiveProps',
-        value: function componentWillReceiveProps(nextProps) {
-            var _this2 = this;
-
-            if (nextProps.selectedItem !== this.state.selectedItem) {
-                this.updateSizes();
-                this.moveTo(nextProps.selectedItem);
-            }
-
-            if (nextProps.autoPlay !== this.state.autoPlay) {
-                this.setState({
-                    autoPlay: nextProps.autoPlay
-                }, function () {
-                    if (_this2.state.autoPlay) {
-                        _this2.setupAutoPlay();
-                    } else {
-                        _this2.destroyAutoPlay();
-                    }
-                });
-            }
-        }
-    }, {
         key: 'componentDidUpdate',
@@ -459,2 +437,3 @@ value: function componentDidUpdate(prevProps, prevState) {
             }
+
             if (prevState.swiping && !this.state.swiping) {
@@ -464,2 +443,17 @@ // We stopped swiping, ensure we are heading to the new/current slide and not stuck
             }
+
+            if (prevProps.selectedItem !== this.props.selectedItem) {
+                this.updateSizes();
+                this.moveTo(this.props.selectedItem);
+            }
+
+            if (prevProps.autoPlay !== this.props.autoPlay) {
+                if (this.props.autoPlay) {
+                    this.setupAutoPlay();
+                } else {
+                    this.destroyAutoPlay();
+                }
+
+                this.setState({ autoPlay: this.props.autoPlay });
+            }
         }
@@ -527,8 +521,8 @@ }, {
             // the carousel when the window is resized
-            window.addEventListener("resize", this.updateSizes);
+            window.addEventListener('resize', this.updateSizes);
             // issue #2 - image loading smaller
-            window.addEventListener("DOMContentLoaded", this.updateSizes);
+            window.addEventListener('DOMContentLoaded', this.updateSizes);
 
             if (this.props.useKeyboardArrows) {
-                document.addEventListener("keydown", this.navigateWithKeyboard);
+                document.addEventListener('keydown', this.navigateWithKeyboard);
             }
@@ -540,12 +534,12 @@ }
             // removing listeners
-            window.removeEventListener("resize", this.updateSizes);
-            window.removeEventListener("DOMContentLoaded", this.updateSizes);
+            window.removeEventListener('resize', this.updateSizes);
+            window.removeEventListener('DOMContentLoaded', this.updateSizes);
 
             var initialImage = this.getInitialImage();
             if (initialImage) {
-                initialImage.removeEventListener("load", this.setMountState);
+                initialImage.removeEventListener('load', this.setMountState);
             }
 
             if (this.props.useKeyboardArrows) {
-                document.removeEventListener("keydown", this.navigateWithKeyboard);
+                document.removeEventListener('keydown', this.navigateWithKeyboard);
             }
@@ -579,3 +573,3 @@ }
         value: function renderItems(isClone) {
-            var _this3 = this;
+            var _this2 = this;
 
@@ -585,12 +579,12 @@ return _react.Children.map(this.props.children, function (item, index) {
                     ref: function ref(e) {
-                        return _this3.setItemsRef(e, index);
+                        return _this2.setItemsRef(e, index);
                     },
                     key: 'itemKey' + index + (isClone ? 'clone' : ''),
-                    className: _cssClasses2.default.ITEM(true, index === _this3.state.selectedItem),
-                    onClick: _this3.handleClickItem.bind(_this3, index, item)
+                    className: _cssClasses2.default.ITEM(true, index === _this2.state.selectedItem),
+                    onClick: _this2.handleClickItem.bind(_this2, index, item)
                 };
 
-                if (_this3.props.centerMode && _this3.props.axis === 'horizontal') {
+                if (_this2.props.centerMode && _this2.props.axis === 'horizontal') {
                     slideProps.style = {
-                        minWidth: _this3.props.centerSlidePercentage + '%'
+                        minWidth: _this2.props.centerSlidePercentage + '%'
                     };
@@ -609,3 +603,3 @@ }
         value: function renderControls() {
-            var _this4 = this;
+            var _this3 = this;
 
@@ -620,3 +614,12 @@ if (!this.props.showIndicators) {
                 _react.Children.map(this.props.children, function (item, index) {
-                    return _react2.default.createElement('li', { className: _cssClasses2.default.DOT(index === _this4.state.selectedItem), onClick: _this4.changeItem, onKeyDown: _this4.changeItem, value: index, key: index, role: 'button', tabIndex: 0, 'aria-label': _this4.props.labels.item + ' ' + (index + 1) });
+                    return _react2.default.createElement('li', {
+                        className: _cssClasses2.default.DOT(index === _this3.state.selectedItem),
+                        onClick: _this3.changeItem,
+                        onKeyDown: _this3.changeItem,
+                        value: index,
+                        key: index,
+                        role: 'button',
+                        tabIndex: 0,
+                        'aria-label': _this3.props.labels.item + ' ' + (index + 1)
+                    });
                 })
@@ -647,3 +650,10 @@ );
                 _Thumbs2.default,
-                { ref: this.setThumbsRef, onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem, transitionTime: this.props.transitionTime, thumbWidth: this.props.thumbWidth, labels: this.props.labels },
+                {
+                    ref: this.setThumbsRef,
+                    onSelectItem: this.handleClickThumb,
+                    selectedItem: this.state.selectedItem,
+                    transitionTime: this.props.transitionTime,
+                    thumbWidth: this.props.thumbWidth,
+                    labels: this.props.labels
+                },
                 this.props.children
@@ -678,8 +688,8 @@ );
             itemListStyles = {
-                'WebkitTransform': transformProp,
-                'MozTransform': transformProp,
-                'MsTransform': transformProp,
-                'OTransform': transformProp,
-                'transform': transformProp,
-                'msTransform': transformProp
+                WebkitTransform: transformProp,
+                MozTransform: transformProp,
+                MsTransform: transformProp,
+                OTransform: transformProp,
+                transform: transformProp,
+                msTransform: transformProp
             };
@@ -689,8 +699,8 @@
                 itemListStyles = _extends({}, itemListStyles, {
-                    'WebkitTransitionDuration': transitionTime,
-                    'MozTransitionDuration': transitionTime,
-                    'MsTransitionDuration': transitionTime,
-                    'OTransitionDuration': transitionTime,
-                    'transitionDuration': transitionTime,
-                    'msTransitionDuration': transitionTime
+                    WebkitTransitionDuration: transitionTime,
+                    MozTransitionDuration: transitionTime,
+                    MsTransitionDuration: transitionTime,
+                    OTransitionDuration: transitionTime,
+                    transitionDuration: transitionTime,
+                    msTransitionDuration: transitionTime
                 });
@@ -704,3 +714,2 @@ }
             var swiperProps = {
-                selectedItem: this.state.selectedItem,
                 className: _cssClasses2.default.SLIDER(true, this.state.swiping),
@@ -737,6 +746,15 @@ onSwipeMove: this.onSwipeMove,
                     { className: _cssClasses2.default.CAROUSEL(true), style: { width: this.props.width } },
-                    _react2.default.createElement('button', { type: 'button', 'aria-label': this.props.labels.leftArrow, className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.onClickPrev }),
+                    _react2.default.createElement('button', {
+                        type: 'button',
+                        'aria-label': this.props.labels.leftArrow,
+                        className: _cssClasses2.default.ARROW_PREV(!hasPrev),
+                        onClick: this.onClickPrev
+                    }),
                     _react2.default.createElement(
                         'div',
-                        { className: _cssClasses2.default.WRAPPER(true, this.props.axis), style: containerStyles, ref: this.setItemsWrapperRef },
+                        {
+                            className: _cssClasses2.default.WRAPPER(true, this.props.axis),
+                            style: containerStyles,
+                            ref: this.setItemsWrapperRef
+                        },
                         this.props.swipeable ? _react2.default.createElement(
@@ -748,3 +766,4 @@ _reactEasySwipe2.default,
                             }, swiperProps, {
-                                allowMouseEvents: this.props.emulateTouch }),
+                                allowMouseEvents: this.props.emulateTouch
+                            }),
                             this.props.infiniteLoop && lastClone,
@@ -758,3 +777,4 @@ this.renderItems(),
                                 ref: this.setListRef,
-                                style: itemListStyles },
+                                style: itemListStyles
+                            },
                             this.props.infiniteLoop && lastClone,
@@ -765,3 +785,8 @@ this.renderItems(),
                     ),
-                    _react2.default.createElement('button', { type: 'button', 'aria-label': this.props.labels.rightArrow, className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.onClickNext }),
+                    _react2.default.createElement('button', {
+                        type: 'button',
+                        'aria-label': this.props.labels.rightArrow,
+                        className: _cssClasses2.default.ARROW_NEXT(!hasNext),
+                        onClick: this.onClickNext
+                    }),
                     this.renderControls(),
@@ -768,0 +793,0 @@ this.renderStatus()

lib/components/Thumbs.js

@@ -105,5 +105,5 @@ 'use strict';
             // the carousel when the window is resized
-            window.addEventListener("resize", this.updateSizes);
+            window.addEventListener('resize', this.updateSizes);
             // issue #2 - image loading smaller
-            window.addEventListener("DOMContentLoaded", this.updateSizes);
+            window.addEventListener('DOMContentLoaded', this.updateSizes);
 
@@ -118,4 +118,4 @@ // when the component is rendered we need to calculate
             // removing listeners
-            window.removeEventListener("resize", this.updateSizes);
-            window.removeEventListener("DOMContentLoaded", this.updateSizes);
+            window.removeEventListener('resize', this.updateSizes);
+            window.removeEventListener('DOMContentLoaded', this.updateSizes);
         }
@@ -129,5 +129,5 @@ }, {
                 // if the item is not an image, try to find the first image in the item's children.
-                if (item.type !== "img") {
+                if (item.type !== 'img') {
                     img = _react.Children.toArray(item.props.children).filter(function (children) {
-                        return children.type === "img";
+                        return children.type === 'img';
                     })[0];
@@ -225,14 +225,14 @@ }
             itemListStyles = {
-                'WebkitTransform': transformProp,
-                'MozTransform': transformProp,
-                'MsTransform': transformProp,
-                'OTransform': transformProp,
-                'transform': transformProp,
-                'msTransform': transformProp,
-                'WebkitTransitionDuration': transitionTime,
-                'MozTransitionDuration': transitionTime,
-                'MsTransitionDuration': transitionTime,
-                'OTransitionDuration': transitionTime,
-                'transitionDuration': transitionTime,
-                'msTransitionDuration': transitionTime
+                WebkitTransform: transformProp,
+                MozTransform: transformProp,
+                MsTransform: transformProp,
+                OTransform: transformProp,
+                transform: transformProp,
+                msTransform: transformProp,
+                WebkitTransitionDuration: transitionTime,
+                MozTransitionDuration: transitionTime,
+                MsTransitionDuration: transitionTime,
+                OTransitionDuration: transitionTime,
+                transitionDuration: transitionTime,
+                msTransitionDuration: transitionTime
             };
@@ -246,7 +246,12 @@
                     { className: _cssClasses2.default.WRAPPER(false), ref: this.setItemsWrapperRef },
-                    _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.slideRight, 'aria-label': this.props.labels.leftArrow }),
+                    _react2.default.createElement('button', {
+                        type: 'button',
+                        className: _cssClasses2.default.ARROW_PREV(!hasPrev),
+                        onClick: this.slideRight,
+                        'aria-label': this.props.labels.leftArrow
+                    }),
                     _react2.default.createElement(
                         _reactEasySwipe2.default,
-                        { tagName: 'ul',
-                            selectedItem: this.state.selectedItem,
+                        {
+                            tagName: 'ul',
                             className: _cssClasses2.default.SLIDER(false, this.state.swiping),
@@ -259,6 +264,12 @@ onSwipeLeft: this.slideLeft,
                             style: itemListStyles,
-                            ref: this.setItemsListRef },
+                            innerRef: this.setItemsListRef
+                        },
                         this.renderItems()
                     ),
-                    _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.slideLeft, 'aria-label': this.props.labels.rightArrow })
+                    _react2.default.createElement('button', {
+                        type: 'button',
+                        className: _cssClasses2.default.ARROW_NEXT(!hasNext),
+                        onClick: this.slideLeft,
+                        'aria-label': this.props.labels.rightArrow
+                    })
                 )
@@ -375,3 +386,2 @@ );
         var position = currentPosition + 100 / (wrapperSize / deltaX) + '%';
-
         // if 3d isn't available we will use left to move
@@ -378,0 +388,0 @@ if (_this3.itemsListRef) {

lib/cssClasses.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _classnames = require("classnames");
+var _classnames = require('classnames');
 
@@ -17,4 +17,4 @@ var _classnames2 = _interopRequireDefault(_classnames);
         return (0, _classnames2.default)({
-            "carousel": true,
-            "carousel-slider": isSlider
+            carousel: true,
+            'carousel-slider': isSlider
         });
@@ -25,6 +25,6 @@ },
         return (0, _classnames2.default)({
-            "thumbs-wrapper": !isSlider,
-            "slider-wrapper": isSlider,
-            "axis-horizontal": axis === "horizontal",
-            "axis-vertical": axis !== "horizontal"
+            'thumbs-wrapper': !isSlider,
+            'slider-wrapper': isSlider,
+            'axis-horizontal': axis === 'horizontal',
+            'axis-vertical': axis !== 'horizontal'
         });
@@ -35,5 +35,5 @@ },
         return (0, _classnames2.default)({
-            "thumbs": !isSlider,
-            "slider": isSlider,
-            "animated": !isSwiping
+            thumbs: !isSlider,
+            slider: isSlider,
+            animated: !isSwiping
         });
@@ -44,5 +44,5 @@ },
         return (0, _classnames2.default)({
-            "thumb": !isSlider,
-            "slide": isSlider,
-            "selected": selected
+            thumb: !isSlider,
+            slide: isSlider,
+            selected: selected
         });
@@ -53,4 +53,4 @@ },
         return (0, _classnames2.default)({
-            "control-arrow control-prev": true,
-            "control-disabled": disabled
+            'control-arrow control-prev': true,
+            'control-disabled': disabled
         });
@@ -61,4 +61,4 @@ },
         return (0, _classnames2.default)({
-            "control-arrow control-next": true,
-            "control-disabled": disabled
+            'control-arrow control-next': true,
+            'control-disabled': disabled
         });
@@ -69,6 +69,6 @@ },
         return (0, _classnames2.default)({
-            "dot": true,
-            'selected': selected
+            dot: true,
+            selected: selected
         });
     }
 };

lib/dimensions.js

 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
 var outerWidth = exports.outerWidth = function outerWidth(el) {
-	var width = el.offsetWidth;
-	var style = getComputedStyle(el);
+    var width = el.offsetWidth;
+    var style = getComputedStyle(el);
 
-	width += parseInt(style.marginLeft) + parseInt(style.marginRight);
-	return width;
+    width += parseInt(style.marginLeft) + parseInt(style.marginRight);
+    return width;
 };

package.json

 {
-  "name": "react-responsive-carousel",
-  "version": "3.1.51",
-  "description": "React Responsive Carousel",
-  "author": {
-    "name": "Leandro Augusto Lemos",
-    "url": "http://leandrowd.github.io/"
-  },
-  "main": "./lib/index.js",
-  "license": "MIT",
-  "keywords": [
-    "react",
-    "carousel",
-    "gallery",
-    "image-gallery",
-    "slider",
-    "responsive",
-    "swipe",
-    "mobile-friendly",
-    "react-component",
-    "view"
-  ],
-  "engines": {
-    "node": ">=4"
-  },
-  "types": "./index.d.ts",
-  "scripts": {
-    "start": "node --harmony ./node_modules/gulp/bin/gulp",
-    "test": "jest",
-    "update-snapshots": "jest --updateSnapshot",
-    "prebuild": "npm test",
-    "build": "babel ./src -d lib --ignore '__tests__' && gulp styles:package copy:package",
-    "prepublish-to-npm": "git pull && npm run build && git add . && git commit -m 'Prepare for publishing'",
-    "publish-to-npm": "(git pull origin master && npm version patch && git push origin master && npm publish && git push --tags)",
-    "postpublish-to-npm": "npm run changelog && git add . && git commit -m 'Updating changelog' && git push origin master",
-    "prepublish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp prepublish && npm run build-storybook",
-    "publish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp publish",
-    "storybook": "start-storybook -p 9001 -s ./src -c .storybook",
-    "build-storybook": "build-storybook -s ./src -o ./dist/storybook",
-    "changelog": "auto-changelog --ignore-commit-pattern=\"(Merge pull request|Merge branch|Updating changelog|Prepare for publishing)\""
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/leandrowd/react-responsive-carousel.git"
-  },
-  "bugs": {
-    "url": "https://github.com/leandrowd/react-responsive-carousel/issues"
-  },
-  "homepage": "http://leandrowd.github.io/react-responsive-carousel/",
-  "devDependencies": {
-    "@kadira/react-storybook-addon-info": "^3.4.0",
-    "@kadira/storybook": "^2.35.3",
-    "auto-changelog": "^1.10.2",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-jest": "^19.0.0",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babelify": "^7.3.0",
-    "browserify": "^14.3.0",
-    "connect-modrewrite": "^0.9.0",
-    "css-loader": "^0.28.0",
-    "enzyme": "^2.8.2",
-    "gh-pages": "^0.11.0",
-    "gulp": "^3.8.9",
-    "gulp-clean-css": "^2.0.12",
-    "gulp-concat": "^2.3.4",
-    "gulp-connect": "^5.0.0",
-    "gulp-copy": "0.0.2",
-    "gulp-if": "^2.0.1",
-    "gulp-notify": "^2.2.0",
-    "gulp-rename": "^1.2.0",
-    "gulp-sass": "^2.2.0",
-    "gulp-shell": "^0.2.10",
-    "gulp-streamify": "1.0.2",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.0",
-    "jest-cli": "^19.0.2",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4",
-    "sass-loader": "^4.0.2",
-    "style-loader": "^0.13.1",
-    "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.11.1"
-  },
-  "jest": {
-    "unmockedModulePathPatterns": [
-      "node_modules"
+    "name": "react-responsive-carousel",
+    "version": "3.1.52",
+    "description": "React Responsive Carousel",
+    "author": {
+        "name": "Leandro Augusto Lemos",
+        "url": "http://leandrowd.github.io/"
+    },
+    "main": "./lib/index.js",
+    "license": "MIT",
+    "keywords": [
+        "react",
+        "carousel",
+        "gallery",
+        "image-gallery",
+        "slider",
+        "responsive",
+        "swipe",
+        "mobile-friendly",
+        "react-component",
+        "view"
     ],
-    "rootDir": "src"
-  },
-  "auto-changelog": {
-    "output": "CHANGELOG.md",
-    "template": "keepachangelog",
-    "unreleased": true,
-    "commitLimit": true
-  },
-  "dependencies": {
-    "classnames": "^2.2.5",
-    "prop-types": "^15.5.8",
-    "react-easy-swipe": "^0.0.16"
-  }
+    "types": "./index.d.ts",
+    "scripts": {
+        "start": "node --harmony ./node_modules/gulp/bin/gulp",
+        "test": "yarn format:check && yarn jest",
+        "jest": "jest",
+        "format": "prettier '**/*.{js,json}'",
+        "format:check": "yarn format --check",
+        "format:write": "yarn format --write",
+        "update-snapshots": "jest --updateSnapshot",
+        "prebuild": "npm test",
+        "build": "babel ./src -d lib --ignore '__tests__' && gulp styles:package copy:package",
+        "prepublish-to-npm": "git pull && npm run build && git add . && git commit -m 'Prepare for publishing'",
+        "publish-to-npm": "(git pull origin master && npm version patch && git push origin master && npm publish && git push --tags)",
+        "postpublish-to-npm": "npm run changelog && git add . && git commit -m 'Updating changelog' && git push origin master",
+        "prepublish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp prepublish && npm run build-storybook",
+        "publish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp publish",
+        "storybook": "start-storybook -p 9001 -s ./src -c .storybook",
+        "build-storybook": "build-storybook -s ./src -o ./dist/storybook",
+        "changelog": "auto-changelog --ignore-commit-pattern=\"(Merge pull request|Merge branch|Updating changelog|Prepare for publishing)\""
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/leandrowd/react-responsive-carousel.git"
+    },
+    "bugs": {
+        "url": "https://github.com/leandrowd/react-responsive-carousel/issues"
+    },
+    "homepage": "http://leandrowd.github.io/react-responsive-carousel/",
+    "devDependencies": {
+        "@kadira/react-storybook-addon-info": "^3.4.0",
+        "@kadira/storybook": "^2.35.3",
+        "auto-changelog": "^1.10.2",
+        "babel-cli": "^6.24.1",
+        "babel-core": "^6.24.1",
+        "babel-jest": "^19.0.0",
+        "babel-loader": "^7.0.0",
+        "babel-plugin-transform-class-properties": "^6.24.1",
+        "babel-plugin-transform-object-rest-spread": "^6.23.0",
+        "babel-preset-es2015": "^6.24.1",
+        "babel-preset-react": "^6.24.1",
+        "babelify": "^7.3.0",
+        "browserify": "^14.3.0",
+        "connect-modrewrite": "^0.9.0",
+        "css-loader": "^0.28.0",
+        "enzyme": "^2.8.2",
+        "gh-pages": "^0.11.0",
+        "gulp": "^3.8.9",
+        "gulp-clean-css": "^2.0.12",
+        "gulp-concat": "^2.3.4",
+        "gulp-connect": "^5.0.0",
+        "gulp-copy": "0.0.2",
+        "gulp-if": "^2.0.1",
+        "gulp-notify": "^2.2.0",
+        "gulp-rename": "^1.2.0",
+        "gulp-sass": "^2.2.0",
+        "gulp-shell": "^0.2.10",
+        "gulp-streamify": "1.0.2",
+        "gulp-uglify": "^2.0.0",
+        "gulp-util": "^3.0.0",
+        "husky": "^3.0.9",
+        "jest-cli": "^19.0.2",
+        "prettier": "^1.18.2",
+        "pretty-quick": "^2.0.0",
+        "react": "^15.5.4",
+        "react-dom": "^15.5.4",
+        "react-test-renderer": "^15.5.4",
+        "sass-loader": "^4.0.2",
+        "style-loader": "^0.13.1",
+        "vinyl-source-stream": "^1.1.0",
+        "watchify": "^3.11.1"
+    },
+    "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.18"
+    },
+    "jest": {
+        "unmockedModulePathPatterns": [
+            "node_modules"
+        ],
+        "rootDir": "src"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "pretty-quick --staged --pattern '**/*.(js|json)'"
+        }
+    },
+    "auto-changelog": {
+        "output": "CHANGELOG.md",
+        "template": "keepachangelog",
+        "unreleased": true,
+        "commitLimit": true
+    }
 }

README.md

@@ -47,3 +47,3 @@ # React Responsive Carousel
 ### Installing as a package
-`npm install react-responsive-carousel`
+`yarn add react-responsive-carousel`
 
@@ -127,3 +127,3 @@ ### Usage
 ### Contributing
-Check the [contributing guide](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md)
+The [contributing guide](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md) contains details on how to create pull requests and setup your dev environment. Please read it before contributing!
 
@@ -139,28 +139,2 @@ =======================
 
-### Setting up development environment
-- `git clone [e-mail]:leandrowd/react-responsive-carousel.git`
-- `npm install`
-- `npm start`
-- Open your favourite browser on `localhost:8000` - livereload will be enabled and tests will run on each change
-
-> The fastest dev environment is on node 6. If you have `nvm` installed, just run `nvm use 6`. Tests in travis will run on node 4 and 6
-
-#### Running only tests
-- `npm test`
-
-#### Running storybook
-- `npm run storybook`
-
-=======================
-
-### Only after merged back to master
-
-#### Publish to npm
-- `npm run publish-to-npm`
-
-#### Pubish to gh-pages
-- `npm run publish-to-gh-pages`
-
-=======================
-
 ### Examples
@@ -167,0 +141,0 @@ #### webpack + es6 setup

No alert changes

Improved metrics

Total package byte prevSize

973356

increased by0.24%

Number of package files

39

increased by5.41%

Lines of code

1667

increased by2.52%

Worsened metrics

Dev dependency count

41

increased by7.89%

Number of lines in readme file

151

decreased by-14.69%

Dependency changes

• + Addedreact-easy-swipe@0.0.18(transitive)

• - Removedreact-easy-swipe@0.0.16(transitive)

• Updatedreact-easy-swipe@^0.0.18