{"_id":"@alexseitsinger/react-presentation-components","_rev":"2-cf2a3454fc0f3dce6665899648c188e0","name":"@alexseitsinger/react-presentation-components","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@alexseitsinger/react-presentation-components","version":"0.1.0","description":"Some presentation components to make building layouts easier","main":"index.js","types":"types/index.d.ts","scripts":{"build":"yarn webpack && yarn run build:dev","build:dev":"yarn webpack --config=webpack.config.dev.js","test":"yarn jest"},"repository":{"type":"git","url":"https://github.com/alexseitsinger/react-presentation-components.git"},"keywords":["react","components"],"author":{"name":"Alex Seitsinger","email":"software@alexseitsinger.com"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/alexseitsinger/react-presentation-components/issues"},"homepage":"https://github.com/alexseitsinger/react-presentation-components","dependencies":{"@alexseitsinger/react-text-components":"^0.1.0","@babel/runtime-corejs3":"7.8.4","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","core-js":"3.6.4","underscore":"^1.9.2"},"devDependencies":{"@alexseitsinger/eslint-config":"^2.18.0","@babel/core":"7.8.4","@babel/plugin-proposal-export-namespace-from":"7.8.3","@babel/plugin-syntax-export-namespace-from":"7.8.3","@babel/plugin-transform-runtime":"7.8.3","@babel/preset-env":"7.8.4","@babel/preset-react":"7.8.3","@babel/preset-typescript":"^7.8.3","@emotion/babel-preset-css-prop":"^10.0.27","@types/enzyme":"^3.10.5","@types/enzyme-adapter-react-16":"^1.0.6","@types/jest":"^25.1.3","@types/react":"^16.9.21","@types/react-dom":"^16.9.5","@types/underscore":"^1.9.4","@typescript-eslint/eslint-plugin":"^2.20.0","@typescript-eslint/parser":"^2.20.0","babel-core":"7.0.0-bridge.0","babel-jest":"25.1.0","babel-loader":"8.0.6","babel-plugin-emotion":"10.0.27","clean-webpack-plugin":"^3.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-import-resolver-jest":"^3.0.0","eslint-import-resolver-typescript":"^2.0.0","eslint-import-resolver-webpack":"^0.12.1","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.7.0","eslint-plugin-jest-formatting":"^1.2.0","eslint-plugin-node":"^11.0.0","eslint-plugin-package-json":"^0.1.4","eslint-plugin-simple-import-sort":"^5.0.1","jest":"25.1.0","jest-emotion":"10.0.27","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.12.0","react-dom":"^16.12.0","terser-webpack-plugin":"^2.3.5","ts-jest":"^25.2.1","ts-loader":"^6.2.1","typescript":"^3.8.2","wait-for-expect":"^3.0.2","webpack":"4.41.6","webpack-cli":"3.3.11","webpack-node-externals":"1.7.2"},"peerDependencies":{"react":"^16"},"_id":"@alexseitsinger/react-presentation-components@0.1.0","dist":{"shasum":"c5f17c12a25f0b454870fc94f859c00d779f2841","integrity":"sha512-xfiKhzrIoqGHxQpa9NDK/MkLVytVboDM7k6g9a6cyfcRxKVOsKXUF/eB5sGIRite9KjfpnTsiCWm99U+o6Z6BQ==","tarball":"https://registry.npmjs.org/@alexseitsinger/react-presentation-components/-/react-presentation-components-0.1.0.tgz","fileCount":124,"unpackedSize":1031035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUP6gCRA9TVsSAnZWagAAAAAP/jKm8nmloG6hFFACnBWr\nsGtoDa1NBmN695WQ9MP6TRgoxpRauVUueSN7glr4HP9YVnVmhqnneU/NklCa\nMtz4iFahomE4iFwg1d6a7OiSBY0XMdejdM27fGE0LJImWiy3GwMYl/bb62HD\nEIs0ne6E6bdAlV70+7WaNIbVcW6MP5zlc/1IVCHVVQVgray+jvRQVFhBNVE6\nueURq0d/bhAlfSGnMHtsVM1z/K/qU06C0dVUJgzHD3rUvjavXi2a9cVLfQ+p\nzDhkscTLd0WkVPBtWQLxxLY0pDxTBAUDilWQO0kcD3bJ+shwEeL/u5DNw2Kc\niqHyQows2F/6Vja2QLTmmzdGQmcd8GCm0XU9g+IB559QjxJ7nTLl+h14QNU9\nUqIJ3VFP2niS2mBVTwbQlkSg5Xnna/80jlqLKCjgMlF7NYiQasnUzmDGMeK+\ndVn2JIzrY4ZRLWRLa9hx6liFyZDEXkLb1iom8PY5cSluQ36A+icQyCLrYOar\n+q3MOAVIq79LuC34Y3O0AMAtgTQiHkMFVEKaLgL/f2QDZdWuNLYnf0HoM/W1\nGtb1xBNCV5sNvn2qC7V49nT1pRfzEk8GjQdDkUI7j2/FqYjUZU5tRIgi6f4K\nbTevdQLeNmWAW58ZAd6lDxPlrdXb1FJROJ3eBMPG3Xh2KIX9rvCkeXIX26yU\n6MPj\r\n=dr8v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVwzZ7UGL6U+Sv8bQsFFWFjH6jYkQQqDxYLFon1cZROAIgA59r/Pjwwpssfl7IuW4PIS0bmd9k+5EOJc12yF5c6SU="}]},"maintainers":[{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"}],"_npmUser":{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-presentation-components_0.1.0_1582366368164_0.6133700804391584"},"_hasShrinkwrap":false},"0.2.0":{"name":"@alexseitsinger/react-presentation-components","version":"0.2.0","description":"Some presentation components to make building layouts easier","main":"index.js","types":"types/index.d.ts","scripts":{"build":"yarn webpack && yarn run build:dev","build:dev":"yarn webpack --config=webpack.config.dev.js","test":"yarn jest"},"repository":{"type":"git","url":"https://github.com/alexseitsinger/react-presentation-components.git"},"keywords":["react","components"],"author":{"name":"Alex Seitsinger","email":"software@alexseitsinger.com"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/alexseitsinger/react-presentation-components/issues"},"homepage":"https://github.com/alexseitsinger/react-presentation-components","dependencies":{"@alexseitsinger/react-text-components":"^0.1.0","@babel/runtime-corejs3":"7.8.4","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","core-js":"3.6.4","underscore":"^1.9.2"},"devDependencies":{"@alexseitsinger/eslint-config":"^6.0.0","@babel/core":"7.8.4","@babel/plugin-proposal-export-namespace-from":"7.8.3","@babel/plugin-syntax-export-namespace-from":"7.8.3","@babel/plugin-transform-runtime":"7.8.3","@babel/preset-env":"7.8.4","@babel/preset-react":"7.8.3","@babel/preset-typescript":"^7.8.3","@emotion/babel-preset-css-prop":"^10.0.27","@types/enzyme":"^3.10.5","@types/enzyme-adapter-react-16":"^1.0.6","@types/jest":"^25.1.3","@types/react":"^16.9.21","@types/react-dom":"^16.9.5","@types/underscore":"^1.9.4","@typescript-eslint/eslint-plugin":"^2.20.0","@typescript-eslint/parser":"^2.20.0","babel-core":"7.0.0-bridge.0","babel-jest":"25.1.0","babel-loader":"8.0.6","babel-plugin-emotion":"10.0.27","clean-webpack-plugin":"^3.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","eslint":"^6.8.0","eslint-import-resolver-jest":"^3.0.0","eslint-import-resolver-typescript":"^2.0.0","eslint-import-resolver-webpack":"^0.12.1","eslint-plugin-better-styled-components":"^1.1.2","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.7.0","eslint-plugin-jest-formatting":"^1.2.0","eslint-plugin-jsdoc":"^22.0.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-node":"^11.0.0","eslint-plugin-package-json":"^0.1.4","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","eslint-plugin-sort-destructure-keys":"^1.3.3","eslint-plugin-tsdoc":"^0.2.3","jest":"25.1.0","jest-emotion":"10.0.27","react":"^16.12.0","react-dom":"^16.12.0","terser-webpack-plugin":"^2.3.5","ts-jest":"^25.2.1","ts-loader":"^6.2.1","typescript":"^3.8.2","wait-for-expect":"^3.0.2","webpack":"4.41.6","webpack-cli":"3.3.11","webpack-node-externals":"1.7.2"},"peerDependencies":{"react":"^16"},"_id":"@alexseitsinger/react-presentation-components@0.2.0","dist":{"shasum":"c2e8407f88cf9d75360ffadaf6e48c0bd1f8d83d","integrity":"sha512-qMltlHFXZ+ibd1z0Z48/crA0h1ptxQZed9bNmzmiMUh+M0n4En3PnyeMlShvzTH6TI0i0lX/vBVyT7yxpxdw4g==","tarball":"https://registry.npmjs.org/@alexseitsinger/react-presentation-components/-/react-presentation-components-0.2.0.tgz","fileCount":124,"unpackedSize":1033201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYs05CRA9TVsSAnZWagAA4vIP+wYNTy80HCSQq5VGzz/U\nlNTnue0s0O61cI+JEcSTdA+xnO8H468UOExD2NDEe7IL2WTiAGhAHXB/ofyM\nTIJ8U/kQbf8ZZM5VMCm2a0uEVkyDn8PLLQG2q3vF5i2oa3ufcxObmOowfJ28\nkyec1nWu7cTlcpx0tor6dNHTQ/Bxp8lWw54xBKA+iCmDAYIPRRFB2X3Yd3cU\n0kHYwrWyb2+GoiGTSxliP0BZWca4hMaMmNcLMTAxK/sCXLz+WvncAfBas0aM\nupTK2bj/TuovTN1JmrVow3cgCI5obHDPPYUDlEeWtrX4nznrMs9cdl+8rSsQ\nUKsVkTLd9K902L01VUzB+asX0D8n6k5m7/DxqaloSuydeU8Cab5+aJouNk4v\njJwmXv9skQUM5V7ZB05qyIut8Q9vO7i2dtxPegemlSmDvYaEIq/mOP5qJ3/q\niYZfLV+WDEMIJn+AoIDAjJudNqMqFEHSr1uREezwpsCjuhDGoo4bJ+TmzOOr\n6GK/Inlel8EU7grkbwwUurU/qRUxHzOKyffvIJTYv7q2thhpGaX9vZlFa80N\nvhf2AnisYB+KqMFLM7sDtVYHUUAiaZw0gKhHScFDMfcfTVwfXKN03FgoclGe\n2LcwbQJjjVNNc7Eu/GC9TCgPCYjut3q7DmAsIKt+hPv5wIk+TM5fropaeXcI\nzVqg\r\n=6gld\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2V/K7F1KIqthV/vKOaf4ANC5TOquKtLP6sqO6MfiNFQIgXpazbJAJ3GUAlwGGW74clggcDnkzZwflRm9incsx05g="}]},"maintainers":[{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"}],"_npmUser":{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-presentation-components_0.2.0_1583533368950_0.10896967279262215"},"_hasShrinkwrap":false}},"time":{"created":"2020-02-22T10:12:48.129Z","0.1.0":"2020-02-22T10:12:48.314Z","modified":"2022-04-04T12:41:37.171Z","0.2.0":"2020-03-06T22:22:49.098Z"},"maintainers":[{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"}],"description":"Some presentation components to make building layouts easier","homepage":"https://github.com/alexseitsinger/react-presentation-components","keywords":["react","components"],"repository":{"type":"git","url":"https://github.com/alexseitsinger/react-presentation-components.git"},"author":{"name":"Alex Seitsinger","email":"software@alexseitsinger.com"},"bugs":{"url":"https://github.com/alexseitsinger/react-presentation-components/issues"},"license":"BSD-2-Clause","readme":"# Presentation Components\n\nSome presentation components to make building layouts easier.\n\n## Installation\n\n```bash\nyarn add @alexseitsinger/react-presentation-components\n```\n\n## Oritentations\n\n#### Column\n\nAn element which shares the parent element's width, but occupies 100% of the parent's height.\n\n###### Props\n\nName                 | Description                                | Default | Required?\n---                  | ---                                        | ---     | ---\nisMaximized          | Should the column use 100% height?         | false   | no\nisVerticallyCentered | Should the content be vertically centered? | false   | no\ndirection            | Flexbox direction for children to use.     | row     | no\n\n#### Row\n\nAn element which shares the parent element's height, but occupies 100% of the parent's width.\n\n###### Props\n\nName        | Description                                                      | Default | Required?\n---         | ---                                                              | ---     | ---\ndirection   | The direction that children should use.                          | row     | no\nisMaximized | Should the row fill 100% width?                                  | true    | no\nspacing     | Space within the element.                                        | 0px     | no\nends        | Should the two contained elements grip the left and right sides? | false   | no\n\n---\n\n## Positions\n\nAll grips take the following props:\n\nName           | Description                                 | Default   | Required?\n---            | ---                                         | ---       | ---\nchildren       | Elements to render within                   | undefined | yes\ncontainerStyle | Extra css to apply to the container element | undefined | no\nisMaximized    | Maximize the primary direction              | undefined | no\n\n#### GripBottom\n\nPositions itself to the bottom edge of the parent element.\n\n#### GripRight\n\nPositions itself to the right edge of the parent element.\n\n---\n\n## Alignments\n\n#### Center\n\nElements within are both vertically and horizontally centered.\n\n#### Wrapper\n\nA container width a `max-width: 1200px`, and `margin: 0 auto`.\n\n###### Props\n\nName      | Description                        | Default | Required?\n---       | ---                                | ---     | ---\nmaxWidth  | Alternative value for `max-width`  | 1200px  | no\nminHeight | Alternative value for `min-height` | auto    | no\n\n#### VerticalAlign\n\nUses the flexbox model to vertically align children.\n\n#### VerticallyCenter\n\nUses the inline-block model to vertically align children.\n\n---\n\n## Lists\n\nAll lists use the following props:\n\nName        | Description                                                                      | Default   | Required?\n---         | ---                                                                              | ---       | ---\nchildren    | The elements to render within list items                                         | undefined | if items, no, otherwise yes\nspacing     | The padding to apply evenly between list items                                   | undefined | no\nrenderEach  | Invoked to render each list item with either children or items                   | undefined | if items, yes, else no\nrenderFirst | Invoked to render a list item before all others                                  | undefined | no\nrenderLast  | Invoked to render a list item after all others                                   | undefined | no\nrenderNone  | Invoked to render a list item when no items or children produced any output.     | undefined | no\nlistStyle   | Extra css to apply to the list element.                                          | undefined | no\nitemStyle   | Extra css to apply to each list item element                                     | undefined | no\nitems       | An optional list of data objects to use with renderEach to render each list item | undefined | If items, yes, else no\nisMaximized | Should the list height fill the parent element?                                  | false     | no\n\n#### FlexList\n\nA list of items that span across a single line using all available space.\n\n#### InlineList\n\nA list of items with equal width, that will continue to occupy space on current line, then continue onto the next.\n\n#### VerticalList\n\nA list of items, separated one per line, with each using 100% width of the parent element.\n\n---\n\n## Dividers\n\n#### HorizontalDivider\n\nDisplays text in the center, with a pair of horizontal lines on the left and right side which run across the center of the remaining width equally.\n\n###### Props\n\nName             | Description                                                                 | Default   | Required?\n---              | ---                                                                         | ---       | ---\ntext             | The text to display between the two horizontal lines.                       | undefined | yes\ntextColor        | The color to display the text in.                                           | undefined | no\ntextSpacing      | The spacing to apply to the left and right of the text.                     | undefined | no\nlineSize         | The height of each left and right line.                                     | 1px       | no\nlineColor        | The color of each left and right line.                                      | black     | no\ncontainerSpacing | Additional spacing to apply to the top and bottom of the container element. | undefined | no\n\n#### HorizontalRule\n\nA single horizontal line across the width of the parent element.\n\n###### Props\n\nName  | Description               | Default | Required?\n---   | ---                       | ---     | ---\ncolor | The color of the line.    | black   | no\ninset | Should the line be inset? | false   | no\nsize  | The height of the line.   | 1px     | no\n\n#### RightRule\n\nRenders text followed by a horizontal line across the center of the remaining width.\n\n###### Props\n\nName       | Description                                | Default   | Required?\n---        | ---                                        | ---       | ---\nouterStyle | Extra css to apply to the outer container. | {}        | no\ninnerStyle | Extra css to apply to the inner container. | {}        | no\nchildren   | Elements to render before the line.        | undefined | yes\nruleColor  | Color of the line.                         | black     | no\nruleSize   | The height of the line.                    | 1px no\n\n#### VerticalBuffer\n\nA DOM element, which allows for vertical spacing in multiple of the root font-size.\n\n###### Props\n\nName | Description                        | Default | Required?\n---  | ---                                | ---     | ---\nsize | The height of the vertical buffer. | 1rem    | no\n\n---\n\n## Misc\n\n#### Menu\n\nA container with button to toggle the menu's list item visibility.\n\n###### Props\n\nName     | Description                                      | Default   | Required?\nonClick  | Toggles the visibility of the menu's list items. | undefined | yes\nchildren | The elements to render within the menu's list.   | undefined | yes\n\n#### Box\n\nAn element with equal width and height.\n\n###### Props\n\nName          | Description                                  | Default   | Required?\n---           | ---                                          | ---       | ---\nsize          | The size(px) to use for the width and height | undefined | yes\nchildren      | Elements to render                           | undefined | yes\nisCentered    | Should the box be centered within its parent | undefined | no\ncontainerSyle | Extra css to apply to the container element. | undefined | no\nbodyStyle     | Extra css to apply to the body element.      | undefined | no\n\n","readmeFilename":"README.md"}