{"_id":"@croquiscom/storybook-addon-centered","_rev":"38-d3d6f55d1a0d78221593e88b45519159","name":"@croquiscom/storybook-addon-centered","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@croquiscom/storybook-addon-centered","version":"0.0.1","author":{"name":"Muhammed Thanish","email":"mnmtanish@gmail.com"},"license":"MIT","_id":"@croquiscom/storybook-addon-centered@0.0.1","maintainers":[{"name":"croquiscom","email":"admin@croquis.com"}],"dist":{"shasum":"afab8124234664c5ad39f1013066f6112096ccd0","tarball":"https://registry.npmjs.org/@croquiscom/storybook-addon-centered/-/storybook-addon-centered-0.0.1.tgz","fileCount":15,"integrity":"sha512-tb7Igs/pt2NF5Jdg5sH7FJBxKmgq2N1q7JZCfnHl9viRBOjKOvUGkQXDfbTE+/4AP/q4e2+kxSfuSAfy6tqUIQ==","signatures":[{"sig":"MEUCIQDxCy/PoIMU45QMOpQy2b3lXSB0Sx7TrXO62sYpyOSoqgIgAnFFihLVhSDnRBV8tT+JMHOf3U2eqdJw7hInQM99YO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9794},"main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"croquiscom","email":"admin@croquis.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"5.5.1","description":"Storybook decorator to center components","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"react-dom":"^16.2.0"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/storybook-addon-centered_0.0.1_1521423555030_0.7221830615445364","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@croquiscom/storybook-addon-centered","version":"0.1.0","author":{"name":"Muhammed Thanish","email":"mnmtanish@gmail.com"},"license":"MIT","_id":"@croquiscom/storybook-addon-centered@0.1.0","maintainers":[{"name":"croquiscom","email":"admin@croquis.com"}],"dist":{"shasum":"616db390f9ad49eb938bfa45ba5323766c18fc10","tarball":"https://registry.npmjs.org/@croquiscom/storybook-addon-centered/-/storybook-addon-centered-0.1.0.tgz","fileCount":15,"integrity":"sha512-1NrwI+sip004jV/t44Fc88Xqtv//H/w56oc6nr9t83HSdBPs/r8ebN3C2OKdlMvhT+ZWKgULnG4P0+GxlKJqEQ==","signatures":[{"sig":"MEQCIB+BEsLa3g2gyeSVp+RCe7dQzOizMjH31wle91hBUWFOAiAsztku9bUWNft1rEwK7850JGkLTnyurk76enYQpL9/Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzeN7CRA9TVsSAnZWagAAln8P/3p1YcEwyW363KF28/z3\naxotwzSifbrIQpSe+wZNbJtvIt6mSd1pXDClj1A0sOIg7ANXUHaksvkcWf5/\neweB0mAO0/5cLNDhxLtMRdKO6H564UcL4o17/wqjkvhuEZSU1f4D9SDUSSVw\nevffNnuIDzr4HPxJpktGgS2j94+eMTw3ML+kXPl0Aw/o3P1jkH9Ow2mf7e1H\nHE2YJXBAjjx/eOyZohf49lEMYxoID2WjvioOpy+1wOqBAwmXqAS7ST0aw2Ph\naLtSVVRTn4ZZ9E0MpMuuzXDfP5I+JCJ2AHOEBFGpb1HaaXOGSSEq0Gs24LjG\nyzAmhpVVR0e417i+un0Kq/fC+Y2tND9lNSLIXDrWuZEviKgw4GASNkaETvqs\nVlBLB1SQ6Dv8KPaAhE1/s/+K5E5I5sij+ruc3eqPrpIXoNEGJPvEqaQmU8oN\na6kdEnPdpVtpHI8JHVJ8PpSMOS+l3CHISMsy5dY7vB4oF5XSy+IRsmjgLls7\n3Q+7ElbIPSn8XriTyan52k6v5E+lp9h6VTahi/t++ifyeRuP9Q/j0znj8s7e\n7Hl93Lk0OmFYUqao7nbk/e1LMcWEhSZgPkSNJmKmQogj/r31UhuejJoNTnIl\nboAMFJLyyWxN9Tb6F2eR0Xa4n2M6r5qK4q3oJ/inYU+nhA1B9VGNFBIBpmBo\nX7iO\r\n=+TRn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"croquiscom","email":"admin@croquis.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"5.5.1","description":"Storybook decorator to center components","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"react-dom":"^16.2.0"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/storybook-addon-centered_0.1.0_1522119268502_0.8928308566412342","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-03-19T01:39:14.974Z","modified":"2026-08-06T05:50:11.072Z","0.0.1":"2018-03-19T01:39:15.070Z","0.1.0":"2018-03-27T02:54:28.631Z"},"author":{"name":"Muhammed Thanish","email":"mnmtanish@gmail.com"},"license":"MIT","description":"Storybook decorator to center components","maintainers":[{"email":"joo.inthezoo@kakaostyle.com","name":"joointhezoo"},{"email":"admin.dev@kakaostyle.com","name":"croquiscom-admin"},{"email":"sixmen@gmail.com","name":"sixmen"},{"email":"hexa1214@gmail.com","name":"zao1214"},{"email":"hbh2692@naver.com","name":"nabigraphics"},{"email":"colin.kwon@kakaostyle.com","name":"colin.kwon"},{"email":"pepper.ha@kakaostyle.com","name":"pepper.ha"},{"email":"sally.914@kakaostyle.com","name":"olive-sally"},{"email":"yoo2001818@gmail.com","name":"yoo2001818"},{"email":"tim.jlee@kakaostyle.com","name":"tim.jlee"},{"email":"dark.0@kakaostyle.com","name":"dark.0"},{"email":"gommpo111@gmail.com","name":"sungin"},{"email":"joe.725@kakaostyle.com","name":"joe.725"},{"email":"day.0709@kakaostyle.com","name":"day.0709"},{"email":"dan.psk@kakaostyle.com","name":"dan.psk"},{"email":"evan.oh@kakaostyle.com","name":"minhyung"}],"readme":"# Storybook Centered Decorator\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)\n\n* * *\n\nStorybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybook.js.org).\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n### Usage\n\n```sh\nnpm install @storybook/addon-centered --save-dev\n```\n\n#### As a decorator\n\nYou can set the decorator locally.\n\nexample for React:\n\n```js\nimport { storiesOf } from '@storybook/react';\nimport centered from '@storybook/addon-centered';\n\nimport MyComponent from '../Component';\n\nstoriesOf('MyComponent', module)\n  .addDecorator(centered)\n  .add('without props', () => (<MyComponent />))\n  .add('with some props', () => (<MyComponent text=\"The Comp\"/>));\n```\n\nexample for Vue:\n\n```js\nimport { storiesOf } from '@storybook/vue';\nimport centered from '@storybook/addon-centered';\n\nimport MyComponent from '../Component.vue';\nstoriesOf('MyComponent', module)\n  .addDecorator(centered)\n  .add('without props', () => ({\n    components: { MyComponent },\n    template: '<my-component />'\n  }))\n  .add('with some props', () => ({\n    components: { MyComponent },\n    template: '<my-component text=\"The Comp\"/>'\n  }));\n```\n\nexample for Mithril:\n\n```js\nimport { storiesOf } from '@storybook/mithril';\nimport centered from '@storybook/addon-centered/mithril';\n\nimport MyComponent from '../Component';\n\nstoriesOf('MyComponent', module)\n  .addDecorator(centered)\n  .add('without props', () => ({\n    view: () => <MyComponent />\n  }))\n  .add('with some props', () => ({\n    view: () => <MyComponent text=\"The Comp\"/>\n  }));\n```\n\nAlso, you can also add this decorator globally\n\nexample for React:\n\n```js\nimport { configure, addDecorator } from '@storybook/react';\nimport centered from '@storybook/addon-centered';\n\naddDecorator(centered);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nexample for Vue:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport centered from '@storybook/addon-centered';\n\naddDecorator(centered);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nexample for Mithril:\n\n```js\nimport { configure, addDecorator } from '@storybook/mithril';\nimport centered from '@storybook/addon-centered/mithril';\n\naddDecorator(centered);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\n#### As an extension\n\n##### 1 - Configure the extension\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport centered from '@storybook/addon-centered';\n\nsetAddon({\n  addCentered(storyName, storyFn) {\n    this.add(storyName, (context) => (\n      centered.call(context, storyFn)\n    ));\n  },\n});\n\nconfigure(function () {\n  //...\n}, module);\n```\n\n##### 2 - Use it in your story\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from '../Component';\n\nstoriesOf('Component', module)\n  .addCentered('without props', () => (<Component />))\n```\n","readmeFilename":"README.md"}