Merge branch 'release/0.1.0'

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+es
+node_modules
+umd
+/*.js
+npm-debug.log
+yarn-error.log
+*.sublime-project
+*.sublime-workspace
+!rollup.config.js

.npmignore

@@ -0,0 +1,4 @@
+tools
+rollup.config.js
+*.sublime-project
+*.sublime-workspace

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Ryan Hefner <[email protected]> (https://www.ryanhefner.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,124 @@
+# 🎠 react-rotator
+
+Flexible React component for composing rotators, carousels, slideshows and more.
+
+## Install
+
+Via [npm](https://npmjs.com/package/react-rotator):
+```
+npm install --save react-rotator
+```
+
+Via [Yarn](https://yarn.fyi/react-rotator):
+```
+yarn add react-rotator
+```
+
+## How to use
+
+The `Rotator` is built with the intention of offering a truly flexible system for
+building rotators, carousels, slideshows, etc. with a simplified interface for
+managing various ways that these components can exist.
+
+### Properties
+
+* `index:Number` - Index of the currently active child.
+* `onChange:Function` - Callback for when the index is changed internally, either
+via a child or indicator.
+
+### Children & Indicators
+
+Each child within a `<Rotator />` instance has properties applied that allow
+them to manage their own behavior based on those props. Along with callbacks that
+can be passed in to control the rotator’s behavior.
+
+In addition to the `[children]`, an optional `indicator` component can be passed
+in via props that will be rendered alongside the `<Rotator />`’s children, which
+allows for displaying indicators on progress, or building pagination controls for
+the `<Rotator />`.
+
+Here’s a breakdown of how `[children]` and an `indicator` is managed by the
+component.
+
+#### Children
+
+The goal is to allow for maximum flexibility through composition. Feel free to
+set whatever props your components need, but the following properties will be
+applied/overwritten by the `<Rotator />` when rendered to the page.
+
+##### Properties
+
+* `index:Number` - Index of the child amongst the other children they are rendered with.
+* `numChildren:Number` - Number of relative children that are being rendered with this child.
+* `position:Number` - Position of the child in relation the the current `index` set on the `<Rotator />`.
+
+>* If the `position` is `0`, it could be assumed that this is the “active” child.
+>* If the `position` is `<0`, the child is positioned before the current “active” child.
+>* If the `position` is `>0`, the child is positioned after the current “active” child.
+
+* `onActive:Function` - Callback that could be triggered by the child when the child becomes "active".
+This could have different meanings depending on the child, but `onActive` will
+update the `<Rotator />` to set that child at position `0`.
+* `onFinish:Function` - Callback that could be triggered by the child, in the event that the child is
+managing it’s status or responsible for initiating progression within the `<Rotator />`.
+
+##### Example
+
+```
+import Rotator from 'react-rotator';
+
+...
+
+  render() {
+    return (
+      <Rotator>
+
+      </Rotator>
+    );
+  }
+
+...
+
+```
+
+#### Indicator
+
+An indicator component can be composed within the `<Rotator />` via the `indicator` prop.
+This makes it really easy to pass in a component that will reflect the current status
+of the rotator, while also allowing for callbacks to be called to control the
+state of the rotator.
+
+You can make your own paging indicators, or I’ve created a companion package that contains
+some common paging indicator components that you can use, [react-paging-indicators](https://github.com/ryanhefner/react-paging-indicators).
+
+##### Properties
+
+* `index:Number` - Index of the currently selected child.
+* `onChange:Function` - Callback for when the indicator changes, passing its
+`index` to set the new `index` state in the `<Rotator />`.
+
+##### Example
+
+```
+import Rotator from 'react-rotator';
+import {DotsIndicator} from 'react-paging-indicators';
+
+...
+
+  render() {
+    return (
+      <Rotator
+        indicator={<DotsIndicator />}
+      >
+
+      </Rotator>
+    );
+  }
+
+...
+
+```
+
+## License
+
+[MIT](LICENSE)

package.json

@@ -0,0 +1,69 @@
+{
+  "name": "react-rotator",
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "Flexible React component for composing rotators, carousels, slideshows and more.",
+  "repository": "ryanhefner/react-rotator",
+  "author": "Ryan Hefner <[email protected]> (https://www.ryanhefner.com)",
+  "files": [
+    "index.js",
+    "es",
+    "umd"
+  ],
+  "directories": {
+    "lib": "/src"
+  },
+  "main": "index.js",
+  "module": "es/index.js",
+  "jsnext:main": "src/index.js",
+  "scripts": {
+    "clean": "rm -f index.js && rm -rf es && rm -rf umd",
+    "prebuild": "npm run clean",
+    "build": "node ./tools/build.js",
+    "watch": "babel ./src -d . --ignore __tests__ --watch",
+    "prepare": "npm run build",
+    "prepublishOnly": "node ./tools/build.js",
+    "push-release": "git push origin master && git push --tags",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": ">=15"
+  },
+  "dependencies": {
+    "clean-react-props": "^0.1.1",
+    "prop-types": "^15.5.10"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-plugin-dev-expression": "^0.2.1",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.6",
+    "babel-preset-latest": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "gzip-size": "^3.0.0",
+    "jest": "^20.0.4",
+    "pretty-bytes": "^4.0.2",
+    "react": "^15.6.1",
+    "rimraf": "^2.6.1",
+    "rollup": "^0.45.2",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-json": "^2.3.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-uglify": "^2.0.1",
+    "rollup-watch": "^4.3.1"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "rotator",
+    "carousel",
+    "slideshow",
+    "composition"
+  ]
+}

rollup.config.js

@@ -0,0 +1,37 @@
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import json from 'rollup-plugin-json';
+import resolve from 'rollup-plugin-node-resolve';
+import uglify from 'rollup-plugin-uglify';
+import pkg from './package.json';
+
+const config = {
+  entry: 'src/index.js',
+  format: 'umd',
+  moduleName: 'react-rotator',
+  plugins: [
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    resolve(),
+    commonjs({
+      include: /node_modules/,
+    }),
+    json(),
+  ],
+  external: [
+    'react',
+  ],
+  globals: {
+    'react': 'React',
+  },
+  dest: './index.js',
+  banner: `/*! ${pkg.name} v${pkg.version} | (c) ${new Date().getFullYear()} Ryan Hefner | ${pkg.license} License | https://github.com/${pkg.repository} !*/`,
+  footer: '/* follow me on Twitter! @ryanhefner */',
+};
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.push(uglify());
+}
+
+export default config;

src/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "../tools/babel-preset" ]
+}