From c459b20c33b4268d7cc4f2fa0240b31cf27ed805 Mon Sep 17 00:00:00 2001 From: Mathias Desloges Date: Fri, 27 Oct 2017 16:54:53 +0200 Subject: [PATCH] re-arrange files in order make a npm package --- .gitignore | 3 +- .npmignore | 21 + README.md | 12 +- build/examples/index.html | 14 + build/examples/index.js | 24672 +++++++++++++++++++++++++++++ build/lib/.gitkeep | 0 package.json | 37 +- public/favicon.ico | Bin 3870 -> 0 bytes public/index.html | 40 - public/manifest.json | 15 - src/{ => examples}/index.css | 0 src/{ => examples}/index.js | 6 +- src/{ => lib}/ForbiddenScreen.js | 0 src/{ => lib}/NavigationBar.css | 0 src/{ => lib}/NavigationBar.js | 0 src/{ => lib}/Screen.js | 0 src/{ => lib}/ScreenManager.css | 0 src/{ => lib}/ScreenManager.js | 0 src/{ => lib}/SplashScreen.js | 0 src/lib/index.js | 5 + 20 files changed, 24750 insertions(+), 75 deletions(-) create mode 100644 .npmignore create mode 100644 build/examples/index.html create mode 100644 build/examples/index.js create mode 100644 build/lib/.gitkeep delete mode 100644 public/favicon.ico delete mode 100644 public/index.html delete mode 100644 public/manifest.json rename src/{ => examples}/index.css (100%) rename src/{ => examples}/index.js (85%) rename src/{ => lib}/ForbiddenScreen.js (100%) rename src/{ => lib}/NavigationBar.css (100%) rename src/{ => lib}/NavigationBar.js (100%) rename src/{ => lib}/Screen.js (100%) rename src/{ => lib}/ScreenManager.css (100%) rename src/{ => lib}/ScreenManager.js (100%) rename src/{ => lib}/SplashScreen.js (100%) create mode 100644 src/lib/index.js diff --git a/.gitignore b/.gitignore index d30f40e..abc487b 100644 --- a/.gitignore +++ b/.gitignore @@ -7,7 +7,8 @@ /coverage # production -/build +/build/lib/* +!/build/lib/.gitkeep # misc .DS_Store diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..2e6b1e7 --- /dev/null +++ b/.npmignore @@ -0,0 +1,21 @@ +# See https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build/lib/.gitkeep + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/README.md b/README.md index d948604..dbf8007 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,10 @@ -REACT PWA PAGE -============== +REACT PWA SCREEN MANAGER +======================== -UI component to handle PWA pages display. +Almost each time I make a progressive web app, it has to look'n'feel as a "native app". -Page should change with an animation (either comming from left or right, pushing or coming over the previous one). +One of the main feature that make your (web)app feels like "native" is the screen change transition : each screen change should completely reload the page and re-render everything ? or the old screen should smoothly go away from the viewport in a nice translation animation while the next one is coming from the other side ? -Page change should be associated with a change in the router system (shipped in router is "react router"). \ No newline at end of file +This repository brings a set of React component in order to help you manage those screens transitions + +Note : And because, we are on the web, each page change should be associated with a change in the page url, so be aware that this component set is shipped with "react router" (built-in). \ No newline at end of file diff --git a/build/examples/index.html b/build/examples/index.html new file mode 100644 index 0000000..f68c4fe --- /dev/null +++ b/build/examples/index.html @@ -0,0 +1,14 @@ + + + + + React PWA Screen Manager + + + +
+ + + diff --git a/build/examples/index.js b/build/examples/index.js new file mode 100644 index 0000000..df9554d --- /dev/null +++ b/build/examples/index.js @@ -0,0 +1,24672 @@ +(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i]; + }return target; +} + +exports.default = function (_ref) { + var children = _ref.children, + props = _objectWithoutProperties(_ref, ["children"]); + + return _react2.default.createElement("div", { style: props.style, className: "screen forbidden" }, children); +}; + +},{"react":73}],2:[function(require,module,exports){ +var css = "nav {\n position: fixed;\n width: 100%;\n}\nnav.bottom {\n bottom: 0;\n}\nnav.top {\n top: 0;\n}\n"; (require("browserify-css").createStyle(css, { "href": "build\\lib\\NavigationBar.css" }, { "insertAt": "bottom" })); module.exports = css; +},{"browserify-css":7}],3:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactRouterDom = require('react-router-dom'); + +require('./NavigationBar.css'); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +function _objectWithoutProperties(obj, keys) { + var target = {};for (var i in obj) { + if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i]; + }return target; +} + +exports.default = function (_ref) { + var pages = _ref.pages, + position = _ref.position, + props = _objectWithoutProperties(_ref, ['pages', 'position']); + + return _react2.default.createElement('nav', { className: 'navbar ' + position }, props.render ? props.render(pages) : _react2.default.createElement('ul', null, Array.isArray(pages) && pages.map(function (page, k) { + return _react2.default.createElement('li', { key: k }, _react2.default.createElement(_reactRouterDom.Link, { to: page.path }, props.link ? props.link(page) : page.name)); + }))); +}; + +},{"./NavigationBar.css":2,"react":73,"react-router-dom":59}],4:[function(require,module,exports){ +"use strict"; + +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Screen = undefined; + +var _createClass = function () { + function 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); + } + }return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; + }; +}(); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +function _possibleConstructorReturn(self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + }return call && ((typeof call === "undefined" ? "undefined" : _typeof(call)) === "object" || typeof call === "function") ? call : self; +} + +function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : _typeof(superClass))); + }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +} + +var Screen = exports.Screen = function (_Component) { + _inherits(Screen, _Component); + + function Screen() { + _classCallCheck(this, Screen); + + return _possibleConstructorReturn(this, (Screen.__proto__ || Object.getPrototypeOf(Screen)).apply(this, arguments)); + } + + _createClass(Screen, [{ + key: "render", + value: function render() { + var props = this.props; + return _react2.default.createElement("div", { style: props.style, className: "screen" }, props.children); + } + }]); + + return Screen; +}(_react.Component); + +exports.default = Screen; + +},{"react":73}],5:[function(require,module,exports){ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +function _objectWithoutProperties(obj, keys) { + var target = {};for (var i in obj) { + if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i]; + }return target; +} + +exports.default = function (_ref) { + var children = _ref.children, + props = _objectWithoutProperties(_ref, ["children"]); + + return _react2.default.createElement("div", { style: props.style, className: "screen splash" }, children); +}; + +},{"react":73}],6:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _lib = require('../lib'); + +Object.defineProperty(exports, 'ScreenManager', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_lib).default; + } +}); + +var _Screen = require('./Screen'); + +Object.defineProperty(exports, 'Screen', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_Screen).default; + } +}); + +var _NavigationBar = require('./NavigationBar'); + +Object.defineProperty(exports, 'NavigationBar', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_NavigationBar).default; + } +}); + +var _ForbiddenScreen = require('./ForbiddenScreen'); + +Object.defineProperty(exports, 'ForbiddenScreen', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_ForbiddenScreen).default; + } +}); + +var _SplashScreen = require('./SplashScreen'); + +Object.defineProperty(exports, 'SplashScreen', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_SplashScreen).default; + } +}); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +},{"../lib":6,"./ForbiddenScreen":1,"./NavigationBar":3,"./Screen":4,"./SplashScreen":5}],7:[function(require,module,exports){ +'use strict'; +// For more information about browser field, check out the browser field at https://github.com/substack/browserify-handbook#browser-field. + +var styleElementsInsertedAtTop = []; + +var insertStyleElement = function(styleElement, options) { + var head = document.head || document.getElementsByTagName('head')[0]; + var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1]; + + options = options || {}; + options.insertAt = options.insertAt || 'bottom'; + + if (options.insertAt === 'top') { + if (!lastStyleElementInsertedAtTop) { + head.insertBefore(styleElement, head.firstChild); + } else if (lastStyleElementInsertedAtTop.nextSibling) { + head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling); + } else { + head.appendChild(styleElement); + } + styleElementsInsertedAtTop.push(styleElement); + } else if (options.insertAt === 'bottom') { + head.appendChild(styleElement); + } else { + throw new Error('Invalid value for parameter \'insertAt\'. Must be \'top\' or \'bottom\'.'); + } +}; + +module.exports = { + // Create a tag with optional data attributes + createLink: function(href, attributes) { + var head = document.head || document.getElementsByTagName('head')[0]; + var link = document.createElement('link'); + + link.href = href; + link.rel = 'stylesheet'; + + for (var key in attributes) { + if ( ! attributes.hasOwnProperty(key)) { + continue; + } + var value = attributes[key]; + link.setAttribute('data-' + key, value); + } + + head.appendChild(link); + }, + // Create a