{"_id":"@brightlayer-ui/storybook-rtl-addon","_rev":"4-5323b73f46d86a4c2294567ebdfa930f","name":"@brightlayer-ui/storybook-rtl-addon","dist-tags":{"beta":"1.1.0-beta.0","latest":"1.1.0"},"versions":{"1.1.0-beta.0":{"name":"@brightlayer-ui/storybook-rtl-addon","version":"1.1.0-beta.0","description":"RTL Toggle for Storybook","main":"dist/index.js","types":"dist/index.d.ts","source":"index.ts","repository":{"type":"git","url":"git+https://github.com/brightlayer-ui/storybook-addons.git"},"keywords":["brightlayer-ui","storybook","addon","addons","rtl","i18n","bidirection","storybook-addon","style"],"storybook":{"displayName":"@brightlayer-ui/storybook-rtl-addon","unsupportedFrameworks":["vue","web-components","ember","html","riot","mithril","marko","svelte","rax","preact","auerlia","marionette","react-native"],"supportedFrameworks":["react, angular"],"icon":"https://brightlayer-ui.github.io/brightlayer-ui.png"},"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"license":"BSD-3-Clause","bugs":{"url":"https://github.com/brightlayer-ui/storybook-addons/issues"},"homepage":"https://github.com/brightlayer-ui/storybook-addons#readme","scripts":{"build":"tsc","watch":"tsc --watch","prettier":"prettier \"src/**/**.{ts,json,css,scss,html,tsx}\" --write","prettier:check":"prettier \"src/**/**.{ts,json,css,scss,html}\" --check","publish:package":"set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish","tag:package":"npx -p @brightlayer-ui/tag blui-tag","lint":"eslint \"src/**/**.tsx\"","lint:fix":"eslint \"src/**/**.tsx\" --fix"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/api":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x"},"devDependencies":{"@babel/preset-env":"^7.10.3","@babel/preset-react":"^7.10.1","@babel/preset-typescript":"^7.10.1","@brightlayer-ui/eslint-config":"^2.0.1","@brightlayer-ui/prettier-config":"^1.0.2","@storybook/addons":"5.3.19","@storybook/api":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"^5.3.19","@types/react":"16.9.43","@typescript-eslint/eslint-plugin":"^3.7.0","@typescript-eslint/parser":"^3.7.0","eslint":"^7.5.0","eslint-config-prettier":"^6.11.0","prettier":"^2.0.5","react":"16.13.1","react-dom":"16.13.1","typescript":"^3.6.3"},"_id":"@brightlayer-ui/storybook-rtl-addon@1.1.0-beta.0","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-LY2Br1dPsTVrFyjKfbgIFIvGnflOsoCCozpPnyFUhFK2WP9A5TvsgzYFWCuW01XMm+HafT4LCmJbgSnTyt1o+g==","shasum":"1ca61fc38e2d5be994f6b21e2619d5cd7b7fecca","tarball":"https://registry.npmjs.org/@brightlayer-ui/storybook-rtl-addon/-/storybook-rtl-addon-1.1.0-beta.0.tgz","fileCount":23,"unpackedSize":19220,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6wczfiCpO1c7HFp3e3ZXszbmBwVKJn9QCcy9a6d115AiEAv+5fF0jcUO+LeF4Xb8dxF/W26+USPRBglyRMcwrd3rY="}]},"_npmUser":{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"},"directories":{},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-rtl-addon_1.1.0-beta.0_1634833525695_0.15507467898310123"},"_hasShrinkwrap":false},"1.1.0":{"name":"@brightlayer-ui/storybook-rtl-addon","version":"1.1.0","description":"RTL Toggle for Storybook","main":"dist/index.js","types":"dist/index.d.ts","source":"index.ts","repository":{"type":"git","url":"git+https://github.com/brightlayer-ui/storybook-addons.git"},"keywords":["brightlayer-ui","storybook","addon","addons","rtl","i18n","bidirection","storybook-addon","style"],"storybook":{"displayName":"@brightlayer-ui/storybook-rtl-addon","unsupportedFrameworks":["vue","web-components","ember","html","riot","mithril","marko","svelte","rax","preact","auerlia","marionette","react-native"],"supportedFrameworks":["react, angular"],"icon":"https://brightlayer-ui.github.io/brightlayer-ui.png"},"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"license":"BSD-3-Clause","bugs":{"url":"https://github.com/brightlayer-ui/storybook-addons/issues"},"homepage":"https://github.com/brightlayer-ui/storybook-addons#readme","scripts":{"build":"tsc","watch":"tsc --watch","prettier":"prettier \"src/**/**.{ts,json,css,scss,html,tsx}\" --write","prettier:check":"prettier \"src/**/**.{ts,json,css,scss,html}\" --check","publish:package":"set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish","tag:package":"npx -p @brightlayer-ui/tag blui-tag","lint":"eslint \"src/**/**.tsx\"","lint:fix":"eslint \"src/**/**.tsx\" --fix"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/api":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x"},"devDependencies":{"@babel/preset-env":"^7.10.3","@babel/preset-react":"^7.10.1","@babel/preset-typescript":"^7.10.1","@brightlayer-ui/eslint-config":"^2.0.1","@brightlayer-ui/prettier-config":"^1.0.2","@storybook/addons":"5.3.19","@storybook/api":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"^5.3.19","@types/react":"16.9.43","@typescript-eslint/eslint-plugin":"^3.7.0","@typescript-eslint/parser":"^3.7.0","eslint":"^7.5.0","eslint-config-prettier":"^6.11.0","prettier":"^2.0.5","react":"16.13.1","react-dom":"16.13.1","typescript":"^3.6.3"},"_id":"@brightlayer-ui/storybook-rtl-addon@1.1.0","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-aXJBPrBw0El7u/v1VYvyyXYtqMu1+Ou58uXM4TviTMTH5oVuzGFmB+Ln1QKCrTfCZU99afNWCFdjJh/zQGI3og==","shasum":"d57847485b27ec5f4f4c96672cf8211c09d309e3","tarball":"https://registry.npmjs.org/@brightlayer-ui/storybook-rtl-addon/-/storybook-rtl-addon-1.1.0.tgz","fileCount":23,"unpackedSize":19194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzaBFCRA9TVsSAnZWagAA1WYP/R4nJg+N7IvL+m11FQar\nqF0Y/pRIBznvioIKJq6xt57WjCJ+FaOnAAFLfOmRFJY2yLFXEccJ++5BNPtx\nYc/gqs8zi74g8eYoKZzEUgyijMhquRlOEyw4opjaQVbalp5qLCz2vXyDQBKy\nXjZ1Jzc+Al1CjoNBUd5F+aKHp5otd8/FhIWjVFWhxydlh9+R7CRGBiuF9/yb\ndBtdHojLlqKaqDBPwwM8C1gyVf8IUy+h4yTxE12jdEBnd7WDE3SjDn48vM82\nQfoltM3a0uQv2q2gI16tfSzffzJ87rEKmWq5tu44lYYQFX83ym/4pDHjQ8te\no25mYIjPlfMuNQ2//3Q+px1nd8Rd7r6qjVdwxmRK6SkhYDL+3BpN5658GqYn\nvSrCxO8+Jx3gyjWwXk8WiibeXBJBhu+qJdAIImVOf59hV6p2LWNhePQXQjiI\nk5b7skGLxU4i7+cInjznv70AN/jNUdRHYFuAIXsk6plVQxH3j+cr8LQX38hN\nX/QChLJwFRdvPyPWtplXCdUI9VtzvV3Eote70iz/XSG4vUUptYI0RW/f/lBV\n+41RYrIznMf7ExPinF+FfS6pipJsn3C3TaaNgVuOqGmC+03gL8threhBZayH\nE4hZOfNJvG9kGP+JZ8r+QPjvOb5RAVhmzN1yhqVLciXhI3NFgI7OTMv9Ylc/\nZjHW\r\n=ZbQh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZQi97OUiuYl6SEWuG1q1S69CBmd2ompHOvQ3erho5mAIhANHPPrEzgPcyU0AFmTuYt/CCalacy/RWhu6MNjsegPdV"}]},"_npmUser":{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"},"directories":{},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-rtl-addon_1.1.0_1635250534117_0.12600404771086549"},"_hasShrinkwrap":false,"deprecated":"This package has been deprecated."}},"time":{"created":"2021-10-21T16:25:25.629Z","1.1.0-beta.0":"2021-10-21T16:25:25.849Z","modified":"2022-12-14T12:43:21.240Z","1.1.0":"2021-10-26T12:15:34.243Z"},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"description":"RTL Toggle for Storybook","homepage":"https://github.com/brightlayer-ui/storybook-addons#readme","keywords":["brightlayer-ui","storybook","addon","addons","rtl","i18n","bidirection","storybook-addon","style"],"repository":{"type":"git","url":"git+https://github.com/brightlayer-ui/storybook-addons.git"},"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"bugs":{"url":"https://github.com/brightlayer-ui/storybook-addons/issues"},"license":"BSD-3-Clause","readme":"\n\n\n# @brightlayer-ui/storybook-rtl-addon\n\nThis storybook addon provides a Right-to-Left toggle used to test your component's bidirectionality support. \nWhen this addon is active, it sets the current story body's `dir` attribute to `rtl`.\n\nThis addon assumes the default text orientation of the parent storybook app is Left-to-Right.\n\n\n## Installation\n\nTo install the `@brightlayer-ui/storybook-rtl-addon` run:\n\n```\nyarn add @brightlayer-ui/storybook-rtl-addon\n```\n\nIn your `main.js` file, register this addon:\n\n```\naddons: ['@brightlayer-ui/storybook-rtl-addon/register']\n``` \n\n## Usage\n\nThis package exports two functions `getDirection` & `useDirection` that returns the current `Direction` ('rtl' or 'ltr').\n\n### getDirection\n`getDirection` is used within Stories to access the current `Direction`. In React, this is value is only set during the initial component mount. \n\n\nBrightlayer UI uses this addon extensively in our storybook documentation to guarantee bidirectional support of our components and examples.\n\nTo see live-example usage of this addon, click on the \"Story\" tab of each linked example.\n\n### Angular Usage\n\n```ts\nimport { getDirection } from '@brightlayer-ui/storybook-rtl-addon';\n\nexport const angularExampleStory = () => ({\n template: `\n {{direction}}
\n `,\n props: {\n direction: getDirection\n }\n});\n\n```\n\n> **Angular Components**: If your component uses the Direction service, use the exported function `getDirection()` to supply the `[dir]` directive with the appropriate direction.\n\n[Live Example](https://brightlayer-ui-components.github.io/angular/?path=/story/components-score-card--with-full-config)\n\n\n### React Usage\n\n```ts\nimport { getDirection } from '@brightlayer-ui/storybook-rtl-addon';\n\nexport const reactExampleStory = () => {\n const direction = getDirection();\n return {direction}
;\n}\n\n```\n[Live Example](https://brightlayer-ui-components.github.io/react/?path=/story/components-user-menu--within-toolbar)\n\n\n\n### useDirection\n`useDirection` is a React hook that returns the current `Direction` and re-emits on every `Direction` change (when toggling the RTL sidebar button). It can be used to set values for Providers in a Decorators or Stories.\n\n\n```ts\nimport useDirection from \"@brightlayer-ui/storybook-rtl-addon/useDirection\";\n\nexport const decorators = [\n (Story) => {\n const direction = useDirection();\n return (\n <>\n {direction}\n \n \n );\n },\n];\n```\n\n## Tested Frameworks\n- Angular (^8.0.0)\n- React (^17.0.0)\n\n## Local Testing\n\nThis addon can be tested locally by using `npm link` or `yarn link` commands.\n\nFrom the addon's root folder, run the following to rebuild the addon when changes occur:\n\n```yarn watch```\n\nFrom another terminal, run:\n\n```yarn link```\n\nFrom your storybook app's root folder, run:\n\n```yarn link @brightlayer-ui/storybook-rtl-addon```\n\nWhen finished testing the local version of this addon, run:\n\n```yarn unlink @brightlayer-ui/storybook-rtl-addon```\n\n\n\n","readmeFilename":"README.md"}