nuka-carousel - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

index.js

@@ -1,5 +0,2 @@
-'use strict';
-
-var Carousel = require('./lib/carousel');
-
-module.exports = Carousel;
+module.exports = require('./lib').default;
+module.exports.default = module.exports;

package.json

 {
   "name": "nuka-carousel",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Pure React Carousel",
   "main": "index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
   "dependencies": {
-    "create-react-class": "^15.6.2",
+    "d3-ease": "^1.0.3",
     "exenv": "^1.2.0",
-    "react-tween-state": "^0.1.5",
-    "object-assign": "^4.1.0",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react-move": "^2.7.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.26.0",
+    "@babel/cli": "^7.0.0-beta.40",
+    "@babel/core": "^7.0.0-beta.40",
+    "@babel/polyfill": "^7.0.0-beta.40",
+    "@babel/preset-env": "^7.0.0-beta.40",
+    "@babel/preset-react": "^7.0.0-beta.40",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.1",
+    "babel-loader": "8.0.0-beta.2",
+    "builder": "^4.0.0",
     "chai": "^3.3.0",
-    "css-loader": "^0.19.0",
+    "css-loader": "^0.28.10",
     "del": "^2.0.2",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.8.0",
-    "eslint-loader": "^1.0.0",
+    "eslint-config-formidable": "^3.0.0",
+    "eslint-config-jest-enzyme": "^6.0.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-loader": "^2.0.0",
     "eslint-plugin-babel": "^4.1.2",
+    "eslint-plugin-filenames": "^1.2.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.4.0",
-    "gulp": "^3.9.0",
-    "gulp-babel": "^7.0.0",
-    "gulp-eslint": "^4.0.0",
-    "gulp-if": "^2.0.2",
-    "gulp-karma": "0.0.5",
-    "gulp-open": "^1.0.0",
-    "gulp-util": "^3.0.6",
-    "gulp-webpack": "^1.5.0",
-    "istanbul": "^0.3.22",
-    "istanbul-instrumenter-loader": "^0.1.3",
-    "karma": "^0.13.10",
-    "karma-chrome-launcher": "^0.2.1",
-    "karma-coverage": "^0.5.2",
-    "karma-firefox-launcher": "^0.1.6",
-    "karma-mocha": "^0.2.0",
-    "karma-mocha-reporter": "^1.1.1",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-script-launcher": "~0.1.0",
-    "karma-sinon-chai": "^1.1.0",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.3.3",
-    "phantomjs": "^2.1.7",
-    "prop-types": "^15.6.0",
+    "jest": "^22.4.2",
+    "jest-environment-enzyme": "^6.0.0",
+    "jest-enzyme": "^6.0.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-hot-loader": "^1.3.0",
-    "sinon": "^1.17.1",
-    "sinon-chai": "^2.8.0",
-    "style-loader": "^0.12.4",
-    "url-loader": "^0.5.6",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.0"
+    "react-test-renderer": "^16.2.0",
+    "sinon": "^4.4.2",
+    "style-loader": "^0.20.2",
+    "url-loader": "^0.6.2",
+    "webpack": "^4.0.1",
+    "webpack-cli": "^2.0.9",
+    "webpack-dev-server": "^3.0.0"
   },
@@ -68,4 +59,14 @@ "peerDependencies": {
   "scripts": {
-    "test": "gulp test",
-    "dist": "webpack --config webpack.dist.config.js"
+    "preversion": "npm run check",
+    "version": "npm run build",
+    "start": "webpack-dev-server --mode development",
+    "build-babel": "babel src",
+    "build-es": "builder run  --env \"{\\\"BABEL_ENV\\\":\\\"esm\\\"}\" build-babel -- -d es",
+    "build-lib": "builder run build-babel -- -d lib",
+    "build-dist": "webpack --config webpack.dist.config.js --mode production",
+    "build": "builder concurrent --buffer build-lib build-es",
+    "build-watch": "builder concurrent build-lib build-es -- --watch",
+    "lint": "eslint .",
+    "test": "jest test",
+    "check": "npm run lint && npm run test"
   },
@@ -84,6 +85,10 @@ "repository": {
   "bugs": {
-    "url": "https://github.com/kenwheeler/nuka-carousel/issues"
+    "url": "https://github.com/FormidableLabs/nuka-carousel/issues"
   },
-  "homepage": "https://github.com/kenwheeler/nuka-carousel",
-  "sideEffects": false
+  "homepage": "https://github.com/FormidableLabs/nuka-carousel",
+  "sideEffects": false,
+  "jest": {
+    "testEnvironment": "enzyme",
+    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
+  }
 }

README.md

@@ -5,36 +5,30 @@ # nuka-carousel
 
-![http://i.imgur.com/UwP5gle.gif](http://i.imgur.com/UwP5gle.gif)
+![Nuka Carousel Animated Example](https://i.imgur.com/UwP5gle.gif)
 
 ### Install
 
+```bash
+$ yarn add nuka-carousel
 ```
-npm install nuka-carousel
-```
 
 ### Example
-```javascript
-'use strict';
 
-var React = require('react');
-var createReactClass = require('create-react-class');
+```jsx
+import React from 'react';
+import Carousel from 'nuka-carousel';
 
-var Carousel = require('nuka-carousel');
-
-const App = createReactClass({
-  mixins: [Carousel.ControllerMixin],
+export default class extends React.Component {
   render() {
     return (
       <Carousel>
-        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide1"/>
-        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"/>
-        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3"/>
-        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4"/>
-        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5"/>
-        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"/>
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide1" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6" />
       </Carousel>
-    )
+    );
   }
-});
-
-module.exports = App;
+}
 ```
@@ -46,12 +40,12 @@
 
-```javascript
-// if webpack-dev-server is not installed globally
-./node_modules/.bin/webpack-dev-server
-
+```bash
+yarn start
 ```
-Now, you can access the application on  your localhost at following url: <a href="http://localhost:8080/demo" target="_blank">Demo</a>
 
+Now, you can access the application on your localhost at following url: <a href="http://localhost:8080/demo" target="_blank">Demo</a>
+
 ### Props
 
 #### afterSlide
+
 `React.PropTypes.func`
@@ -62,2 +56,3 @@
 #### autoplay
+
 `React.PropTypes.bool`
@@ -68,2 +63,3 @@
 #### autoplayInterval
+
 `React.PropTypes.number`
@@ -74,2 +70,3 @@
 #### beforeSlide
+
 `React.PropTypes.func`
@@ -80,2 +77,3 @@
 #### cellAlign
+
 `React.PropTypes.oneOf(['left', 'center', 'right'])`
@@ -86,2 +84,3 @@
 #### cellSpacing
+
 `React.PropTypes.number`
@@ -91,37 +90,4 @@
 
-#### data
-`React.PropTypes.func`
+#### dragging
 
-Used with the ControllerMixin to add carousel data to parent state.
-
-#### decorators
-`React.PropTypes.array`
-
-An array of objects that supply internal carousel controls.
-Decorator objects have `component`, `position` & `style` properties. `component` takes a React component, `position` takes a predefined position string and `style` takes an object of styles to be applied to the decorator. See an example below:
-
-```javascript
-var Decorators = [{
-  component: createReactClass({
-    render() {
-      return (
-        <button
-          onClick={this.props.previousSlide}>
-          Previous Slide
-        </button>
-      )
-    }
-  }),
-  position: 'CenterLeft',
-  style: {
-    padding: 20
-  }
-}];
-
-// Valid position properties are TopLeft, TopCenter, TopRight
-// CenterLeft, CenterCenter, CenterRight, BottomLeft, BottomCenter
-// and BottomRight
-```
-
-#### dragging
 `React.PropTypes.bool`
@@ -132,7 +98,9 @@
 #### easing
+
 `React.PropTypes.string`
 
-Animation easing function. See valid easings here: [https://github.com/chenglou/tween-functions](https://github.com/chenglou/tween-functions)
+Animation easing function. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease).
 
 #### framePadding
+
 `React.PropTypes.string`
@@ -143,2 +111,3 @@
 #### frameOverflow
+
 `React.PropTypes.string`
@@ -149,7 +118,9 @@
 #### edgeEasing
+
 `React.PropTypes.string`
 
-Animation easing function when swipe exceeds edge. See valid easings here: [https://github.com/chenglou/tween-functions](https://github.com/chenglou/tween-functions)
+Animation easing function when swipe exceeds edge. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease).
 
 #### initialSlideHeight
+
 `React.PropTypes.number`
@@ -160,2 +131,3 @@
 #### initialSlideWidth
+
 `React.PropTypes.number`
@@ -165,16 +137,30 @@
 
-#### heightMode
-`React.PropTypes.oneOf('first', 'max', 'current')`
+#### render\*Controls
 
-How the carousel should calculate its height.
-  `first` - Take the height of the first slide (default)
-  `max` - find the max height of a slide in the carousel and apply that
-  `current` - use the height of the current active slide
+`React.PropTypes.func`
 
-#### shouldRecalculateHeight
-`React.PropTypes.bool`
+A set of eight render props for rendering controls in different positions around the carousel.
 
-Whether or not carousel should recalculate its height when updating. Default is `false`
+* Valid render props for the eight positions are `renderTopLeftControls`, `renderTopCenterControls`, `renderTopRightControls`, `renderCenterLeftControls`, `renderCenterCenterControls`, `renderCenterRightControls`, `renderBottomLeftControls`, `renderBottomCenterControls`, and `renderBottomRightControls`.
 
+```jsx
+<Carousel
+  renderTopCenterControls={({ currentSlide }) => (
+    <div>Slide: {currentSlide}</div>
+  )}
+  renderCenterLeftControls={({ previousSlide }) => (
+    <button onClick={previousSlide}>Previous</button>
+  )}
+  renderCenterRightControls={({ nextSlide }) => (
+    <button onClick={nextSlide}>Next</button>
+  )}
+>
+  {/* Carousel Content */}
+</Carousel>
+```
+
+* The function returns the props for `goToSlide`, `nextSlide` and `previousSlide` functions in addition to `slideCount` and `currentSlide` values.
+
 #### slideIndex
+
 `React.PropTypes.number`
@@ -185,2 +171,3 @@
 #### slidesToShow
+
 `React.PropTypes.number`
@@ -191,2 +178,3 @@
 #### slidesToScroll
+
 ```
@@ -208,2 +196,3 @@ slidesToScroll: React.PropTypes.oneOfType([
 #### speed
+
 `React.PropTypes.number`
@@ -214,2 +203,3 @@
 #### swiping
+
 `React.PropTypes.bool`
@@ -220,2 +210,3 @@
 #### vertical
+
 `React.PropTypes.bool`
@@ -226,2 +217,3 @@
 #### width
+
 `React.PropTypes.string`
@@ -232,2 +224,3 @@
 #### wrapAround
+
 `React.PropTypes.bool`
@@ -237,42 +230,35 @@
 
-### ControllerMixin
+### External Control of Carousel State
 
-The ControllerMixin provides a way to add external controllers for a carousel. To use the controller mixin, add it to your parent component as shown below:
+You can control the state of the carousel from your parent component as shown below:
 
-```javascript
-const App = createReactClass({
-  mixins: [Carousel.ControllerMixin],
-  render() {
-    return (
-      <Carousel ref="carousel" data={this.setCarouselData.bind(this, 'carousel')}>
-        ...
-      </Carousel>
-    )
-  }
-});
-```
+```jsx
+import React from 'react';
+import Carousel from 'nuka-carousel';
 
-It is required to give your component a ref value, and to pass the setCarouselData method to the data prop with the same ref as an argument.
+export default class extends React.Component {
+  state = {
+    slideIndex: 0
+  };
 
-After setting this up, your parent component has a carousels object in it's state. You can now control your carousels from other child components:
-
-```javascript
-const App = createReactClass({
-  mixins: [Carousel.ControllerMixin],
   render() {
     return (
-      <Carousel ref="carousel" data={this.setCarouselData.bind(this, 'carousel')}>
-        ...
+      <Carousel
+        slideIndex={this.state.slideIndex}
+        afterSlide={slideIndex => this.setState({ slideIndex })}
+      >
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide1" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5" />
+        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6" />
       </Carousel>
-      {this.state.carousels.carousel ? <button type="button" onClick={this.state.carousels.carousel.goToSlide.bind(null,4)}>
-        Go to slide 5
-      </button> : null}
-    )
+    );
   }
-});
-
+}
 ```
 
-###  Contributing
+### Contributing
 
 See the [Contribution Docs](CONTRIBUTING.md).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dependency count

6

decreased by-14.29%

Dev dependency count

38

decreased by-20.83%

Worsened metrics

Total package byte prevSize

100953

decreased by-8.8%

Number of package files

8

decreased by-61.9%

Lines of code

2418

decreased by-21.44%

Number of lines in readme file

244

decreased by-5.43%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedd3-ease@^1.0.3

• + Addedreact-move@^2.7.0

• + Added@babel/runtime@7.26.0(transitive)

• + Addedd3-color@1.4.1(transitive)

• + Addedd3-ease@1.0.7(transitive)

• + Addedd3-interpolate@1.4.0(transitive)

• + Addedd3-timer@1.0.10(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedreact-move@2.9.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removedcreate-react-class@^15.6.2

• - Removedobject-assign@^4.1.0

• - Removedreact-tween-state@^0.1.5

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedperformance-now@2.1.0(transitive)

• - Removedraf@3.4.1(transitive)

• - Removedreact-tween-state@0.1.5(transitive)

• - Removedtween-functions@1.2.0(transitive)