{"bugs":{"url":"https://github.com/catamphetamine/react-responsive-ui/issues"},"dist":{"shasum":"effec65d931d8b26d7124ca3341378cf50c22fc8","tarball":"https://registry.npmjs.org/react-responsive-ui/-/react-responsive-ui-0.10.44.tgz","fileCount":110,"integrity":"sha512-jAbNM5ns5uY0S66xGHMgRz7WBgAcxIFn+rKSWAo6ltkKXvDZuiGiPvhzOCYT2AyyeBhb1Euza48oKHcxbk83tQ==","signatures":[{"sig":"MEUCIE7jRlC/5mIOz0QJeWI3EIaUXa6DaBtltdq/sODDC20VAiEAxwGVWTPTFYlwpsMICQEcwItMdojIJe6imkEq6JUx09g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1113309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbatqxCRA9TVsSAnZWagAAveAP/3Vf622gvAxpE3RSWoux\nAoCTef5bhI8JK/7Wh4E3ntC5vul6VlXYfDsriN8VWOs4Qx/oP2JHd8VqT/OC\n1pOV70kun/7a2Xwbf3KNTJRC5s4x+ZnP74I0lpwTtfGpOT847Mb1b/M4ZjWv\n6130pS8Sq1uwmcEQXGyRhS5UyWTRuD6acPskrLXOZIS8khutTQufakd4eFWJ\nVSTYMzEuLz7sdY+eSz91dNxdjiTGMYpUsnOgpO8l70cYDH7g8WzOfend5jHl\nhxQKE54oODwDScnJZX3DFUWZq6+w8p+NwGAYrnvJ6ols5xUFt1XFhrKPeiXe\ngHYyDVjeEjugyMyiavOr8UGpsozIf3+73fU+IGJOzg1pjmea5QiI31USxusm\ndp4G5rvztRaUFE3gWp57HKR+3v+/KT1P5qVvv9U8a+CTr5phWCY5hqeqFbRN\nbV3WLwgjMw8PVpLLz8pFPa2OQQ5CrqhAyNAGfiub99jVhVnP78eDow8JsxUc\nhE4g7GUaX0iNPgzpRZbXS6z9wgk0IlZDCuxHdQt4Jh31SgpmIdmc3z2J+DzF\nv3/OJjos7bc72r6QiUIRD8Far/e+SgGwyn+t7cIE4HyaehkkbTMscLJk5oV4\n24Dh5dRpiMD5CJ68SZSGtzdA7egTP/gn4eOsJdsYfyZrJ4jkUOIvcFcLTH9s\nUbrP\r\n=moyQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.common.js","name":"react-responsive-ui","author":{"name":"catamphetamine","email":"purecatamphetamine@gmail.com"},"module":"index.js","readme":"# react-responsive-ui\r\n\r\n[![npm version](https://img.shields.io/npm/v/react-responsive-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-responsive-ui)\r\n\r\nResponsive React UI components. Work both on client side and server side, with javascript enabled and with javascript disabled (e.g. DarkNet).\r\n\r\n[See Demo](https://catamphetamine.github.io/react-responsive-ui/)\r\n\r\n## Installation\r\n\r\n```\r\nnpm install react-responsive-ui --save\r\n```\r\n\r\n## Usage\r\n\r\nSee the [demo page](https://catamphetamine.github.io/react-responsive-ui/). It has code examples for every component.\r\n\r\n## Reducing footprint\r\n\r\nWebpack 4 still can't \"tree-shake\" simple cases like\r\n\r\n```js\r\nimport { Modal, Button, TextInput } from 'react-responsive-ui'\r\n```\r\n\r\nSo if one's using only a small subset of this library it could be imported like so\r\n\r\n```js\r\nimport Modal     from 'react-responsive-ui/commonjs/Modal'\r\nimport Button    from 'react-responsive-ui/commonjs/Button'\r\nimport TextInput from 'react-responsive-ui/commonjs/TextInput'\r\n```\r\n\r\nWhich results in a much smaller bundle size.\r\n\r\n## Validation\r\n\r\nEach form component receives two validation-specific properties\r\n\r\n* `error : String` – error message\r\n* `indicateInvalid : boolean` – whether the field should be displayed as an invalid one (including showing the `error` message)\r\n\r\nWhen both of these properties are set the form component appends `--invalid` postfixes to its CSS `className`s.\r\n\r\n## CSS\r\n\r\nThe CSS for this library must be included on a page too.\r\n\r\n#### When using Webpack\r\n\r\n```js\r\nimport rrui from 'react-responsive-ui/style.css'\r\n```\r\n\r\nAnd set up a [`postcss-loader`](https://github.com/postcss/postcss-loader) with a [CSS autoprefixer](https://github.com/postcss/autoprefixer) for supporting old web browsers (e.g. `last 4 versions`, `iOS >= 7`, `Android >= 4`).\r\n\r\n#### When not using Webpack\r\n\r\nGet the `style.css` file from this package, process it with a [CSS autoprefixer](https://github.com/postcss/autoprefixer) for supporting old web browsers (e.g. `last 4 versions`, `iOS >= 7`, `Android >= 4`), and then include it on a page.\r\n\r\n```html\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"/css/react-responsive-ui/style.css\"/>\r\n</head>\r\n```\r\n\r\n## Grid\r\n\r\nWhen using modular grid element sizes are multiples of a modular grid unit\r\n\r\n```css\r\n/* Sets `react-responsive-ui` controls' height */\r\n.rrui__input,\r\n.rrui__input-label {\r\n  height: calc(var(--unit) * 5);\r\n}\r\n\r\n/* Set the default height of multiline `<TextInput/>`s */\r\n.rrui__input--multiline {\r\n  height: calc(var(--unit) * 15);\r\n}\r\n\r\n/* Multiline `<TextInput/>`'s vertical padding */\r\n.rrui__input-field--multiline {\r\n  padding-top: var(--textarea-padding);\r\n  padding-bottom: var(--textarea-padding);\r\n}\r\n\r\n/* Multiline `<TextInput/>`'s label positioning */\r\n.rrui__text-input__label--multiline {\r\n  top: var(--textarea-padding);\r\n}\r\n\r\n/* `<Button/>`s are sized to match the height of all other controls. */\r\n.rrui__button__button {\r\n  height: 100%;\r\n}\r\n\r\n/* Styling `<Button/>`s */\r\n.rrui__button {\r\n  font-family: ...\r\n  font-size: ...\r\n  border: 2px solid black;\r\n  border-radius: 5px;\r\n}\r\n\r\n/* `<Button/>`s' side padding */\r\n/* (only when not sizing buttons as grid columns) */\r\n.rrui__button__button {\r\n  padding-left: calc(var(--unit) * 4);\r\n  padding-right: calc(var(--unit) * 4);\r\n}\r\n\r\n/* `<Button/>`'s busy indicator styling */\r\n.rrui__button__activity-indicator {\r\n  left: calc(50% - var(--unit));\r\n  top: calc(50% - var(--unit));\r\n  width: calc(var(--unit) * 2);\r\n  height: calc(var(--unit) * 2);\r\n}\r\n\r\n/* `<Select/>`'s options vertical padding. */\r\n.rrui__select__options {\r\n  padding-top: var(--unit);\r\n  padding-bottom: var(--unit);\r\n}\r\n\r\n/* `<Select/>`'s options expand to full (grid) column width. */\r\n.rrui__select__options:not(.rrui__select__options--menu) {\r\n  width: 100%;\r\n}\r\n\r\n/* `<Select/>`'s options are aligned with the `<Select/>` itself. */\r\n.rrui__select__options--left-aligned {\r\n  left: 0;\r\n}\r\n\r\n/* `<Select/>`'s options are aligned with the `<Select/>` itself. */\r\n.rrui__select__options--right-aligned {\r\n  right: 0;\r\n}\r\n```\r\n\r\n## Responsive\r\n\r\nThe included [`react-responsive-ui/small-screen.css`](https://github.com/catamphetamine/react-responsive-ui/blob/master/small-screen.css) stylesheet makes `<Select/>`s, `<DatePicker/>`s and `<Modal/>`s open in fullscreen on small screens (mobile devices).\r\n\r\nNative CSS [`@import`](https://developer.mozilla.org/docs/Web/CSS/@import) example:\r\n\r\n```css\r\n@import url(~react-responsive-ui/small-screen.css) (max-width: 720px)\r\n```\r\n\r\nSCSS `@import` example:\r\n\r\n```css\r\n@media (max-width: 720px) {\r\n  @import \"~react-responsive-ui/small-screen\";\r\n}\r\n```\r\n\r\nAnd then some refinements:\r\n\r\n```css\r\n@media (max-width: 720px) {\r\n  /* Fullscreen `<DatePicker/>` \"Close\" button */\r\n  .rrui__date-picker__close {\r\n    font-size: 14px;\r\n    font-weight: lighter;\r\n    color: var(--accent-color);\r\n  }\r\n\r\n  /* Fullscreen `<Select/>` options */\r\n  .rrui__select__options:not(.rrui__select__options--autocomplete) {\r\n    font-size: 22px;\r\n  }\r\n\r\n  /* Fullscreen `<Select/>`s and `<DatePicker/>`s `z-index`es */\r\n  .rrui__select__options:not(.rrui__select__options--autocomplete),\r\n  .rrui__date-picker__collapsible {\r\n    z-index: var(--expandable-z-index);\r\n  }\r\n\r\n  /* Fullscreen `<Select/>` \"Close\" button */\r\n  .rrui__select__close {\r\n    z-index: var(--expandable-z-index);\r\n  }\r\n\r\n  /* Fullscreen `<Modal/>` content padding */\r\n  .rrui__modal__content-body {\r\n    margin-top: calc(var(--unit) * 2);\r\n    margin-bottom: calc(var(--unit) * 2);\r\n    margin-left: var(--column-padding);\r\n    margin-right: var(--column-padding);\r\n  }\r\n}\r\n```\r\n\r\n## Drag'n'drop\r\n\r\nDrag'n'drop is implemented internally using [`react-dnd`](https://github.com/gaearon/react-dnd) providing a much simpler-to-use API. Currently only file upload is supported but new features could be added upon request.\r\n\r\n```js\r\nimport { DragAndDrop } from 'react-responsive-ui'\r\n\r\n@DragAndDrop()\r\nclass Application extends Component {\r\n  render() {\r\n    const { isDragging, children } = this.props\r\n    return <div>{ children }</div>\r\n  }\r\n}\r\n```\r\n\r\n```js\r\nimport { CanDrop, FILE, FILES, FileUpload } from 'react-responsive-ui'\r\n\r\nclass FileUploadPage extends Component {\r\n  onUpload = (file, action) => {\r\n    alert(`File ${action}: ${file.name}`)\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <h1> File upload </h1>\r\n\r\n        <FileUploadArea\r\n          onUpload={ this.onUpload }\r\n          className=\"file-upload\"/>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\n// `FILE` is for single-file upload.\r\n// `FILES` is for multiple files upload.\r\n@CanDrop(FILE, (props, file) => {\r\n  props.onUpload(file, 'dropped')\r\n})\r\nclass FileUploadArea extends Component {\r\n  render() {\r\n    const {\r\n      dropTarget,\r\n      draggedOver,\r\n      onUpload,\r\n      className\r\n    } = this.props\r\n\r\n    return dropTarget(\r\n      <div>\r\n        <FileUpload\r\n          action={(file) => onUpload(file, 'chosen')}\r\n          className={`${className} ${draggedOver ? 'rrui__file-upload--dragged-over' : ''}`}>\r\n          Click here to choose a file\r\n          or drop a file here\r\n        </FileUpload>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n```\r\n\r\nUse [babel-plugin-transform-decorators-legacy](https://babeljs.io/docs/plugins/transform-decorators/) for decorators syntax support.\r\n\r\n## Contributing\r\n\r\nAfter cloning this repo, ensure dependencies are installed by running:\r\n\r\n```sh\r\nnpm install\r\n```\r\n\r\nThis module is written in ES6 and uses [Babel](http://babeljs.io/) for ES5\r\ntranspilation. Widely consumable JavaScript can be produced by running:\r\n\r\n```sh\r\nnpm run build\r\n```\r\n\r\nOnce `npm run build` has run, you may `import` or `require()` directly from\r\nnode.\r\n\r\nAfter developing, the full test suite can be evaluated by running:\r\n\r\n```sh\r\nnpm test\r\n```\r\n\r\nWhen you're ready to test your new functionality on a real project, you can run\r\n\r\n```sh\r\nnpm pack\r\n```\r\n\r\nIt will `build`, `test` and then create a `.tgz` archive which you can then install in your project folder\r\n\r\n```sh\r\nnpm install [module name with version].tar.gz\r\n```\r\n\r\n## License\r\n\r\n[MIT](LICENSE)","gitHead":"677ede3f2f3625d89413059e91559a749cd5c5dd","license":"MIT","scripts":{"test":"mocha --require babel-core/register --colors --bail --reporter spec test/ --recursive","build":"npm-run-all clean-for-build build-commonjs-modules build-modules build-styles browser-build","prepublish":"npm-run-all build test copy-styles","copy-styles":"copyfiles --flat source/*.css styles","test-travis":"istanbul cover -x \"commonjs/**\" node_modules/mocha/bin/_mocha --report lcovonly -- --require babel-core/register --colors --reporter spec test/ --recursive","build-styles":"node-sass style.scss style.css","browser-build":"npm run build-modules && npm run build-styles && better-npm-run browser-build-webpack","build-modules":"better-npm-run build-modules","test-coverage":"istanbul cover -x \"commonjs/**\" node_modules/mocha/bin/_mocha -- --require babel-core/register --colors --reporter dot test/ --recursive","clean-for-build":"rimraf ./commonjs/**/* ./modules/**/*","browser-build-dev":"npm run build-modules && better-npm-run browser-build-dev-webpack","build-commonjs-modules":"better-npm-run build-commonjs-modules"},"_npmUser":{"name":"catamphetamine","email":"purecatamphetamine@gmail.com"},"homepage":"https://github.com/catamphetamine/react-responsive-ui#readme","keywords":["react","ui","components","responsive","material","design"],"repository":{"url":"git+https://github.com/catamphetamine/react-responsive-ui.git","type":"git"},"_npmVersion":"6.2.0","description":"Responsive React UI components","directories":{},"maintainers":[{"name":"catamphetamine","email":"purecatamphetamine@gmail.com"}],"_nodeVersion":"9.11.1","dependencies":{"lodash":"^4.17.4","react-dnd":"^2.1.4","classnames":"^2.2.5","prop-types":"^15.5.6","react-modal":"^3.0.0","react-day-picker":"^7.0.7","react-dnd-html5-backend":"^2.1.2","scroll-into-view-if-needed":"^1.1.0"},"betterScripts":{"build-modules":{"env":{"BABEL_ENV":"es6"},"command":"babel ./source --out-dir ./modules --source-maps"},"browser-build-webpack":{"env":{"WEBPACK_ENV":"build"},"command":"webpack"},"build-commonjs-modules":{"env":{"BABEL_ENV":"commonjs"},"command":"babel ./source --out-dir ./commonjs --source-maps"},"browser-build-dev-webpack":{"env":{"WEBPACK_ENV":"dev"},"command":"webpack --progress --colors --watch"}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^3.5.0","mocha":"^5.0.5","react":"^15.4.1","rimraf":"^2.5.0","webpack":"^3.5.5","bluebird":"^3.4.6","istanbul":"^1.0.0-alpha.2","babel-cli":"^6.6.5","copyfiles":"^1.2.0","node-sass":"^4.7.2","react-dom":"^15.4.1","babel-core":"^6.7.2","npm-run-all":"^1.4.0","babel-loader":"^7.1.2","react-router":"^3.0.0","better-npm-run":"0.0.14","babel-preset-env":"^1.6.1","babel-preset-react":"^6.5.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-display-name":"^6.5.0"},"peerDependencies":{"react":"0.14 - 16","react-dom":"0.14 - 16"},"_npmOperationalInternal":{"tmp":"tmp/react-responsive-ui_0.10.44_1533729457581_0.0785158820658729","host":"s3://npm-registry-packages"},"_id":"react-responsive-ui@0.10.44","version":"0.10.44"}