add docz and babel 7

.babelrc

@@ -1,9 +1,9 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "modules": false
     }],
-    "stage-0",
-    "react"
-  ]
+    "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.docz/app/db.json

@@ -0,0 +1,34 @@
+{
+  "config": {
+    "title": "React Elastic Carousel",
+    "description": "A flexible and responsive carousel component for react",
+    "themeConfig": {},
+    "ordering": "descending",
+    "version": "1.0.0",
+    "repository": "https://github.com/sag1v/react-elastic-carousel"
+  },
+  "entries": {
+    "src/docs/doc.mdx": {
+      "name": "Button",
+      "id": "d833493703c0d5bbdb027c6c3f07c2ad",
+      "filepath": "src/docs/doc.mdx",
+      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src/docs/doc.mdx",
+      "slug": "src-docs-doc",
+      "route": "/src-docs-doc",
+      "order": 0,
+      "menu": null,
+      "headings": [
+        {
+          "depth": 1,
+          "slug": "button",
+          "value": "Button"
+        },
+        {
+          "depth": 2,
+          "slug": "basic-usage",
+          "value": "Basic usage"
+        }
+      ]
+    }
+  }
+}

.docz/app/imports.js

@@ -0,0 +1,4 @@
+export const imports = {
+  'src/docs/doc.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "src-docs-doc" */ 'src/docs/doc.mdx'),
+}

.docz/app/index.jsx

@@ -0,0 +1,18 @@
+import 'webpack-serve-overlay'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Root from './root'
+
+const _onPreRenders = []
+const _onPostRenders = []
+
+const onPreRender = () => _onPreRenders.forEach(f => f && f())
+const onPostRender = () => _onPostRenders.forEach(f => f && f())
+
+const root = document.querySelector('#root')
+const render = (Component = Root) => {
+  onPreRender()
+  ReactDOM.render(<Component />, root, onPostRender)
+}
+
+render(Root)

.docz/app/root.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { hot } from 'react-hot-loader'
+import Theme from 'docz-theme-default'
+
+import { imports } from './imports'
+import db from './db.json'
+
+const Root = () => (
+  <Theme
+    db={db}
+    imports={imports}
+    hashRouter={false}
+    websocketUrl="ws://127.0.0.1:60505"
+  />
+)
+
+export default hot(module)(Root)

.docz/cache/082b3c70fda6b9b30e349764a621610f.json

@@ -0,0 +1 @@
+{"remainingRequest":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\babel-loader\\lib\\index.js?{\"presets\":[[\"@babel/preset-env\",{\"modules\":false}],\"@babel/preset-react\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\node_modules\\\\babel-preset-docz\\\\dist\\\\index.js\",{\"flow\":true,\"typescript\":false,\"parseProps\":true}]],\"plugins\":[\"@babel/plugin-proposal-class-properties\",\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\node_modules\\\\react-hot-loader\\\\babel.js\"],\"cacheDirectory\":true,\"babelrc\":false}!C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\Pagination\\Pagination.js","dependencies":[{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\Pagination\\Pagination.js","mtime":1536150888928},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1536153526282},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["var _jsxFileName = \"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\src\\\\react-elastic-carousel\\\\components\\\\Pagination\\\\Pagination.js\";\n\n(function () {\n  var enterModule = require('react-hot-loader').enterModule;\n\n  enterModule && enterModule(module);\n})();\n\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _templateObject() {\n  var data = _taggedTemplateLiteral([\"\\n  display: flex;\\n  flex-wrap: wrap;\\n  margin-top: 15px;\\n\"]);\n\n  _templateObject = function _templateObject() {\n    return data;\n  };\n\n  return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport Dot from \"./Dot\";\nimport { numberToArray, cssPrefix } from \"../../utils/helpers\";\nvar Indicators = styled.div(_templateObject());\n\nvar Pagination =\n/*#__PURE__*/\nfunction (_React$Component) {\n  _inherits(Pagination, _React$Component);\n\n  function Pagination() {\n    _classCallCheck(this, Pagination);\n\n    return _possibleConstructorReturn(this, _getPrototypeOf(Pagination).apply(this, arguments));\n  }\n\n  _createClass(Pagination, [{\n    key: \"render\",\n    value: function render() {\n      var _this$props = this.props,\n          numOfPages = _this$props.numOfPages,\n          activePage = _this$props.activePage,\n          onClick = _this$props.onClick;\n      var pages = numberToArray(numOfPages);\n      return React.createElement(Indicators, {\n        className: cssPrefix(\"pagination\"),\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 18\n        },\n        __self: this\n      }, pages.map(function (item, i) {\n        return React.createElement(Dot, {\n          key: i,\n          id: i,\n          active: i === activePage,\n          onClick: onClick,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 20\n          },\n          __self: this\n        });\n      }));\n    }\n  }, {\n    key: \"__reactstandin__regenerateByEval\",\n    // @ts-ignore\n    value: function __reactstandin__regenerateByEval(key, code) {\n      // @ts-ignore\n      this[key] = eval(code);\n    }\n  }]);\n\n  return Pagination;\n}(React.Component);\n\nPagination.propTypes = {\n  numOfPages: PropTypes.number.isRequired,\n  activePage: PropTypes.number.isRequired,\n  onClick: PropTypes.func\n};\nvar _default = Pagination;\nexport default _default;\n;\n\n(function () {\n  var reactHotLoader = require('react-hot-loader').default;\n\n  var leaveModule = require('react-hot-loader').leaveModule;\n\n  if (!reactHotLoader) {\n    return;\n  }\n\n  reactHotLoader.register(Indicators, \"Indicators\", \"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\src\\\\react-elastic-carousel\\\\components\\\\Pagination\\\\Pagination.js\");\n  reactHotLoader.register(Pagination, \"Pagination\", \"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\src\\\\react-elastic-carousel\\\\components\\\\Pagination\\\\Pagination.js\");\n  reactHotLoader.register(_default, \"default\", \"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\src\\\\react-elastic-carousel\\\\components\\\\Pagination\\\\Pagination.js\");\n  leaveModule(module);\n})();\n\n;\nPagination.__docgenInfo = {\n  \"description\": \"\",\n  \"methods\": [],\n  \"displayName\": \"Pagination\",\n  \"props\": {\n    \"numOfPages\": {\n      \"type\": {\n        \"name\": \"number\"\n      },\n      \"required\": true,\n      \"description\": \"\"\n    },\n    \"activePage\": {\n      \"type\": {\n        \"name\": \"number\"\n      },\n      \"required\": true,\n      \"description\": \"\"\n    },\n    \"onClick\": {\n      \"type\": {\n        \"name\": \"func\"\n      },\n      \"required\": false,\n      \"description\": \"\"\n    }\n  }\n};",{"version":3,"sources":["C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\Pagination\\Pagination.js"],"names":["React","PropTypes","styled","Dot","numberToArray","cssPrefix","Indicators","div","Pagination","props","numOfPages","activePage","onClick","pages","map","item","i","Component","propTypes","number","isRequired","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,GAAP,MAAgB,OAAhB;AACA,SAASC,aAAT,EAAwBC,SAAxB,QAAyC,qBAAzC;AAEA,IAAMC,UAAU,GAAGJ,MAAM,CAACK,GAAV,mBAAhB;;IAMMC,U;;;;;;;;;;;;;6BACK;AAAA,wBACqC,KAAKC,KAD1C;AAAA,UACCC,UADD,eACCA,UADD;AAAA,UACaC,UADb,eACaA,UADb;AAAA,UACyBC,OADzB,eACyBA,OADzB;AAEP,UAAMC,KAAK,GAAGT,aAAa,CAACM,UAAD,CAA3B;AACA,aACE,oBAAC,UAAD;AAAY,QAAA,SAAS,EAAEL,SAAS,CAAC,YAAD,CAAhC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACGQ,KAAK,CAACC,GAAN,CAAU,UAACC,IAAD,EAAOC,CAAP;AAAA,eACT,oBAAC,GAAD;AAAK,UAAA,GAAG,EAAEA,CAAV;AAAa,UAAA,EAAE,EAAEA,CAAjB;AAAoB,UAAA,MAAM,EAAEA,CAAC,KAAKL,UAAlC;AAA8C,UAAA,OAAO,EAAEC,OAAvD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UADS;AAAA,OAAV,CADH,CADF;AAOD;;;;;;;;;;;EAXsBZ,KAAK,CAACiB,S;;AAc/BT,UAAU,CAACU,SAAX,GAAuB;AACrBR,EAAAA,UAAU,EAAET,SAAS,CAACkB,MAAV,CAAiBC,UADR;AAErBT,EAAAA,UAAU,EAAEV,SAAS,CAACkB,MAAV,CAAiBC,UAFR;AAGrBR,EAAAA,OAAO,EAAEX,SAAS,CAACoB;AAHE,CAAvB;eAMeb,U;AAAf;;;;;;;;;;;;0BA1BMF,U;0BAMAE,U","sourcesContent":["import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport styled from \"styled-components\";\r\nimport Dot from \"./Dot\";\r\nimport { numberToArray, cssPrefix } from \"../../utils/helpers\";\r\n\r\nconst Indicators = styled.div`\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  margin-top: 15px;\r\n`;\r\n\r\nclass Pagination extends React.Component {\r\n  render() {\r\n    const { numOfPages, activePage, onClick } = this.props;\r\n    const pages = numberToArray(numOfPages);\r\n    return (\r\n      <Indicators className={cssPrefix(\"pagination\")}>\r\n        {pages.map((item, i) => (\r\n          <Dot key={i} id={i} active={i === activePage} onClick={onClick} />\r\n        ))}\r\n      </Indicators>\r\n    );\r\n  }\r\n}\r\n\r\nPagination.propTypes = {\r\n  numOfPages: PropTypes.number.isRequired,\r\n  activePage: PropTypes.number.isRequired,\r\n  onClick: PropTypes.func\r\n};\r\n\r\nexport default Pagination;\r\n"]}]}

.docz/cache/0e8ba58a82c9351ab5be687e9cc4ff77.json

@@ -0,0 +1 @@
+{"remainingRequest":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\babel-loader\\lib\\index.js?{\"presets\":[[\"@babel/preset-env\",{\"modules\":false}],\"@babel/preset-react\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\node_modules\\\\babel-preset-docz\\\\dist\\\\index.js\",{\"flow\":true,\"typescript\":false,\"parseProps\":true}]],\"plugins\":[\"@babel/plugin-proposal-class-properties\",\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\node_modules\\\\react-hot-loader\\\\babel.js\"],\"cacheDirectory\":true,\"babelrc\":false}!C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\Pagination\\index.js","dependencies":[{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\Pagination\\index.js","mtime":1535368201053},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1536153526282},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["export { default as Pagination } from \"./Pagination\";",{"version":3,"sources":["C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\Pagination\\index.js"],"names":["default","Pagination"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as Pagination } from \"./Pagination\";\r\n"]}]}

.docz/cache/35856bdd8b87248ba7109f706286896f.json

@@ -0,0 +1 @@
+{"remainingRequest":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\babel-loader\\lib\\index.js?{\"presets\":[[\"@babel/preset-env\",{\"modules\":false}],\"@babel/preset-react\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\node_modules\\\\babel-preset-docz\\\\dist\\\\index.js\",{\"flow\":true,\"typescript\":false,\"parseProps\":true}]],\"plugins\":[\"@babel/plugin-proposal-class-properties\",\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\node_modules\\\\react-hot-loader\\\\babel.js\"],\"cacheDirectory\":true,\"babelrc\":false}!C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\styled\\Button.js","dependencies":[{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\styled\\Button.js","mtime":1536150888931},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1536153526282},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["(function () {\n  var enterModule = require('react-hot-loader').enterModule;\n\n  enterModule && enterModule(module);\n})();\n\nfunction _templateObject() {\n  var data = _taggedTemplateLiteral([\"\\n  transition: all 0.3s ease;\\n  font-size: 1.6em;\\n  background-color: rgba(103, 58, 183, 0.1);\\n  color: #333;\\n  box-shadow: 0 0 2px 0px #333;\\n  border-radius: 50%;\\n  border: none;\\n  width: 50px;\\n  height: 50px;\\n  align-self: center;\\n  cursor: pointer;\\n  outline: none;\\n  &:hover {\\n    color: #fff;\\n    background-color: rgba(103, 58, 183, 1);\\n    box-shadow: 0 0 2px 0px #333;\\n  }\\n\"]);\n\n  _templateObject = function _templateObject() {\n    return data;\n  };\n\n  return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nimport styled from \"styled-components\";\n\nvar _default = styled.button(_templateObject());\n\nexport default _default;\n;\n\n(function () {\n  var reactHotLoader = require('react-hot-loader').default;\n\n  var leaveModule = require('react-hot-loader').leaveModule;\n\n  if (!reactHotLoader) {\n    return;\n  }\n\n  reactHotLoader.register(_default, \"default\", \"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-elastic-carousel\\\\src\\\\react-elastic-carousel\\\\components\\\\styled\\\\Button.js\");\n  leaveModule(module);\n})();\n\n;",{"version":3,"sources":["C:\\Users\\sagiv\\github_cloned_projects\\react-elastic-carousel\\src\\react-elastic-carousel\\components\\styled\\Button.js"],"names":["styled","button"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;;eAEeA,MAAM,CAACC,M;;AAAtB","sourcesContent":["import styled from \"styled-components\";\r\n\r\nexport default styled.button`\r\n  transition: all 0.3s ease;\r\n  font-size: 1.6em;\r\n  background-color: rgba(103, 58, 183, 0.1);\r\n  color: #333;\r\n  box-shadow: 0 0 2px 0px #333;\r\n  border-radius: 50%;\r\n  border: none;\r\n  width: 50px;\r\n  height: 50px;\r\n  align-self: center;\r\n  cursor: pointer;\r\n  outline: none;\r\n  &:hover {\r\n    color: #fff;\r\n    background-color: rgba(103, 58, 183, 1);\r\n    box-shadow: 0 0 2px 0px #333;\r\n  }\r\n`;\r\n"]}]}