{"_id":"z-box","_rev":"3-612876aba620663cabf4bc2cbc755037","name":"z-box","description":"A padded box for your web application","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"z-box","version":"1.0.0","description":"A padded box for your web application","main":"dist/index.js","minified:main":"dist/index.min.js","jsnext:main":"dist/module.js","module":"dist/module.js","scripts":{"lint":"eslint webpack.config.babel.js .storybook src stories test/regression test/unit/suite && stylelint src/style.css","test":"npm run lint && npm run unit-test && npm run regression-test","unit-test":"webpack --config test/unit/webpack.config.babel.js && ava test/unit/testBundle.js","regression-test":"npm run test-build && node test/regression/nightwatch/run.js --config test/regression/nightwatch/local.conf.js --env chrome","build-module":"mkdirp dist && babel --source-maps -o dist/module.js src/component.js","package":"webpack","min-package":"cross-env MIN=true webpack -p","test-build":"npm run package && npm run build-storybook","release-build":"npm run test-build && npm run min-package && npm run build-module","build":"npm run release-build","start":"npm run storybook","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","prepublish":"npm run build"},"ava":{"require":["babel-register"],"babel":"inherit"},"babel":{"presets":["es2015","react"],"ignore":["src/webcomponent"]},"eslintConfig":{"env":{"browser":true},"extends":["airbnb"],"rules":{"new-cap":"off","import/no-extraneous-dependencies":"off","react/prop-types":"off","react/jsx-filename-extension":"off","global-require":"off"},"settings":{"import/resolver":{"webpack":{"config":".storybook/webpack.config.js"}}}},"postcss":{"plugins":{"autoprefixer":{"browsers":"last 2 versions"},"cssnano":{"discardUnused":false}}},"stylelint":{"extends":"stylelint-config-standard","plugins":["stylelint-selector-bem-pattern"],"rules":{"comment-whitespace-inside":null,"plugin/selector-bem-pattern":{"componentName":"[A-Z]+","componentSelectors":{"initial":"^\\.{componentName}(?:-[a-z]+)?$","combined":"^\\.combined-{componentName}-[a-z]+$"},"utilitySelectors":"^\\.util-[a-z]+$"}}},"repository":{"type":"git","url":"git+https://github.com/z-kit/z-box.git"},"keywords":["z-kit","component","browser","box"],"author":{"name":"Matheus Kautzmann"},"license":"MIT","bugs":{"url":"https://github.com/z-kit/z-box/issues"},"homepage":"https://github.com/z-kit/z-box","devDependencies":{"@kadira/storybook":"^2.21.0","ava":"^0.17.0","babel-cli":"^6.18.0","babel-core":"^6.18.2","babel-loader":"^6.2.8","babel-preset-es2015":"^6.18.0","babel-preset-react":"^6.16.0","babel-register":"^6.18.0","cross-env":"^3.1.3","css-loader":"^0.26.0","eslint":"^3.8.0","eslint-config-airbnb":"^12.0.0","eslint-import-resolver-webpack":"^0.8.1","eslint-plugin-import":"^1.16.0","eslint-plugin-jsx-a11y":"^2.2.3","eslint-plugin-react":"^6.3.0","extract-text-webpack-plugin":"2.0.0-beta.4","file-loader":"^0.9.0","finalhandler":"^0.5.1","jsx-test-helpers":"^1.1.0","mkdirp":"^0.5.1","ncp":"^2.0.0","nightwatch":"^0.9.12","null-loader":"^0.1.1","postcss-loader":"^1.2.0","react":"^15.4.1","react-dom":"^15.4.1","rimraf":"^2.5.4","selenium-standalone":"^6.0.1","serve-static":"^1.11.1","style-loader":"^0.13.1","stylelint":"^7.6.0","stylelint-config-standard":"^15.0.0","stylelint-selector-bem-pattern":"^1.0.0","webpack":"^2.2.1","webpack-node-externals":"^1.5.4"},"gitHead":"52ff486fd9c906d36b90be966bf464c2fec0ecf8","_id":"z-box@1.0.0","_shasum":"dca43137ea8fe474dab6fc4c4105e0c21dc16a6d","_from":".","_npmVersion":"3.10.9","_nodeVersion":"7.2.0","_npmUser":{"name":"mkxml","email":"mkvchain@gmail.com"},"dist":{"shasum":"dca43137ea8fe474dab6fc4c4105e0c21dc16a6d","tarball":"https://registry.npmjs.org/z-box/-/z-box-1.0.0.tgz","integrity":"sha512-Jq3dulvGRnC6hKKUQODFC1MaoHtHr140ryVPX+X70fW2G6Mm+xDGlk6C4HPCEwHksstsdGXoZr/iMEMvEbAtdA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqTvH1TrqgeUuCG9Sd13tLS9l6Y2NY1UdAd9AXArLEUAiEAr7eZfy6T3hLYnuzYrJha4/xQCOE8i11jf930k5T8OEE="}]},"maintainers":[{"name":"mkxml","email":"mkvchain@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/z-box-1.0.0.tgz_1485990148159_0.9389132503420115"}},"1.0.1":{"name":"z-box","version":"1.0.1","description":"A padded box for your web application","main":"dist/index.js","minified:main":"dist/index.min.js","jsnext:main":"dist/module.js","module":"dist/module.js","scripts":{"lint":"eslint webpack.config.babel.js .storybook src stories test/regression test/unit/suite && stylelint src/style.css","test":"npm run lint && npm run unit-test && npm run regression-test","kill":"fkill node","clean":"rimraf dist","unit-test":"webpack --config test/unit/webpack.config.babel.js && ava test/unit/testBundle.js","regression-test":"node test/regression/server.js && ava test/regression/suite","regression-test-kill":"npm run regression-test && npm run kill","build-module":"mkdirp dist && babel --source-maps -o dist/module.js src/component.js","package":"webpack","min-package":"cross-env MIN=true webpack -p","build":"npm run package && npm run min-package && npm run build-module","start":"npm run storybook","storybook":"start-storybook -p 6006","prepublish":"npm run build"},"ava":{"require":["babel-register"],"babel":"inherit"},"babel":{"presets":["es2015","react"],"ignore":["src/webcomponent"]},"eslintConfig":{"env":{"browser":true},"extends":["airbnb"],"rules":{"new-cap":"off","import/no-extraneous-dependencies":"off","react/prop-types":"off","react/jsx-filename-extension":"off","global-require":"off"},"settings":{"import/resolver":{"webpack":{"config":".storybook/webpack.config.js"}}}},"postcss":{"plugins":{"autoprefixer":{"browsers":"last 2 versions"},"cssnano":{"discardUnused":false}}},"stylelint":{"extends":"stylelint-config-standard","plugins":["stylelint-selector-bem-pattern"],"rules":{"comment-whitespace-inside":null,"plugin/selector-bem-pattern":{"componentName":"[A-Z]+","componentSelectors":{"initial":"^\\.{componentName}(?:-[a-z]+)?$","combined":"^\\.combined-{componentName}-[a-z]+$"},"utilitySelectors":"^\\.util-[a-z]+$"}}},"repository":{"type":"git","url":"git+https://github.com/z-kit/z-box.git"},"keywords":["z-kit","component","browser","box"],"greenkeeper":{"ignore":["eslint-config-airbnb","eslint-plugin-import","eslint-plugin-jsx-a11y"]},"author":{"name":"Matheus Kautzmann"},"license":"MIT","bugs":{"url":"https://github.com/z-kit/z-box/issues"},"homepage":"https://github.com/z-kit/z-box","devDependencies":{"@kadira/storybook":"^2.35.3","ava":"^0.18.2","babel-cli":"^6.23.0","babel-core":"^6.23.1","babel-loader":"^6.3.2","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","babel-register":"^6.23.0","cross-env":"^3.1.4","cross-spawn":"^5.1.0","css-loader":"^0.26.2","eslint":"^3.16.1","eslint-config-airbnb":"^12.0.0","eslint-import-resolver-webpack":"^0.8.1","eslint-plugin-import":"^1.16.0","eslint-plugin-jsx-a11y":"^2.2.3","eslint-plugin-react":"^6.10.0","extract-text-webpack-plugin":"2.0.0","fkill-cli":"^3.4.0","jsx-test-helpers":"^1.1.0","mkdirp":"^0.5.1","nightmare":"^2.10.0","null-loader":"^0.1.1","postcss-loader":"^1.3.3","react":"^15.4.2","react-dom":"^15.4.2","rimraf":"^2.6.1","style-loader":"^0.13.2","stylelint":"^7.9.0","stylelint-config-standard":"^16.0.0","stylelint-selector-bem-pattern":"^1.0.0","webpack":"^2.2.1","webpack-node-externals":"^1.5.4"},"gitHead":"186157f006bdc50b286b4e61398f0561c1e4340b","_id":"z-box@1.0.1","_shasum":"6942abe3051eaaf59b1d24254afbfc84bf2126db","_from":".","_npmVersion":"3.10.9","_nodeVersion":"7.2.0","_npmUser":{"name":"mkxml","email":"mkvchain@gmail.com"},"dist":{"shasum":"6942abe3051eaaf59b1d24254afbfc84bf2126db","tarball":"https://registry.npmjs.org/z-box/-/z-box-1.0.1.tgz","integrity":"sha512-h1c/SexjYCqy2Fn+8a+cCwePnTTLb2ijUFBqMykYJl7rSfCTeQ6jNPax1vpmYSSD1IybfrGHzR+q1J+iIazfvw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVrLQ/mCSzdpESJZRTp1k+Hkvo5KyAYQIuDi+iilJFNAIhAOjBG30hBOzUFOKHs03VP0Jalnb9bNH7t2hSjufUf0Os"}]},"maintainers":[{"name":"mkxml","email":"mkvchain@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/z-box-1.0.1.tgz_1488462027753_0.2147996975108981"}}},"readme":"# <a name=\"z-box\"></a> z-box\n\n[![Build]](https://travis-ci.org/z-kit/z-box) [![SemVer]](http://semver.org/) [![License]](LICENSE)\n\nThe z-kit component template, starter point to create [z-kit compliant components](https://github.com/z-kit/guide). The package is intended to be used in a web page.\n\n## <a name=\"toc\"></a> Table of contents\n\n- [z-box](#z-box)\n- [Table of contents](#toc)\n- [Install](#install)\n  - [Import as HTML/CSS component](#import-css)\n  - [Import as Stateless Functional Component (SFC)](#import-sfc)\n- [How to use](#howto)\n  - [CSS component](#css)\n  - [Stateless Functional Component](#sfc)\n- [License](#license)\n\n## <a name=\"install\"></a> Install\n\nThe package is available to download through [npm](https://npmjs.com):\n\n```bash\nnpm install z-box --save\n```\n\n### <a name=\"import-css\"></a> Import as HTML/CSS component\n\n### The simple case\n\nThe package will be located inside the `node_modules` folder, you can import it into the HTML document as follows:\n\n```html\n<link rel=\"stylesheet\" href=\"node_modules/z-box/dist/style.css\">\n```\n\n### When bundling an web app\n\n**For bundlers that support CSS, like [Webpack](https://webpack.github.io/), you can use it like this:**\n\n```javascript\nrequire('z-box/dist/style.css');\n```\n\n### <a name=\"import-sfc\"></a> Import as a Stateless Functional Component (SFC)\n\nThe package does not include the renderer, you can use any renderer that supports SFCs. You could use React, Preact, Inferno, etc.\n\n**Notice: This package contains CSS styling, you may need a bundler that's capable of requiring CSS files like Webpack with [css-loader](https://github.com/webpack/css-loader).**\n\nOnce you have chosen the renderer you can include the package in your project as follows:\n\n```jsx\n// Assuming the React renderer is being used\nconst React = require('react');\nconst render = require('react-dom').render;\n\n// Passing the render function when importing\nconst ZBox = require('z-box')(React.createElement);\n\n// Render it on page, using JSX here :)\nrender(<ZBox>Content to render inside the box</ZBox>, document.body);\n```\n\n## <a name=\"howto\"></a> How to use\n\n### <a name=\"css\"></a> CSS component\n\nJust add the HTML structure and CSS classes to reproduce the UI component.\n\n### Class hierarchy\n\n| Recommended HTML tags                      | Parent | Class    | Description                                       | Type  |\n| ------------------------------------------ | ------ | -------- | ------------------------------------------------- | ----- |\n| `div`, `nav`, `section`, `main`, `article` | `root` | `.z-box` | Root container that will have the contents padded | Block |\n\n#### Full working example:\n\n```html\n<div class=\"z-box\">\n  <h1>Hello!</h1>\n</div>\n```\n\n### <a name=\"sfc\"></a> Stateless Functional Component\n\nRender the HTML by using the SFC and passing props.\n\n### Supported Props\n\n| Prop name  | Expected Type                           | Description             |\n| ---------- | --------------------------------------- | ----------------------- |\n| `children` | One or more `HTMLElement` or `TextNode` | The contents of the box |\n\n#### Full example (JSX):\n\n```jsx\n<ZBox>Hello!</ZBox>\n```\n\n## <a name=\"license\"></a> LICENSE\n\n[MIT](LICENSE)\n\n[Build]: https://img.shields.io/travis/z-kit/z-box.svg\n[SemVer]: https://img.shields.io/:semver-%E2%9C%93-brightgreen.svg\n[License]: https://img.shields.io/npm/l/z-box.svg","maintainers":[{"name":"mkxml","email":"mkvchain@gmail.com"}],"time":{"modified":"2022-06-29T08:44:03.803Z","created":"2017-02-01T23:02:28.378Z","1.0.0":"2017-02-01T23:02:28.378Z","1.0.1":"2017-03-02T13:40:27.973Z"},"homepage":"https://github.com/z-kit/z-box","keywords":["z-kit","component","browser","box"],"repository":{"type":"git","url":"git+https://github.com/z-kit/z-box.git"},"author":{"name":"Matheus Kautzmann"},"bugs":{"url":"https://github.com/z-kit/z-box/issues"},"license":"MIT","readmeFilename":"README.md"}