{"_id":"@danielhep/storybook-react-intl","name":"@danielhep/storybook-react-intl","dist-tags":{"latest":"3.0.1"},"versions":{"3.0.1":{"name":"@danielhep/storybook-react-intl","version":"3.0.1","description":"Add react-intl support to Storybook","keywords":["storybook-addons","storybook-i18n","react-intl","i18n","localization","internationalization"],"repository":{"type":"git","url":"git+https://github.com/stevensacks/storybook-react-intl.git"},"author":{"name":"Steven Sacks"},"type":"module","license":"MIT","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.js"},"./preview":{"types":"./dist/index.d.ts","import":"./dist/preview.js","require":"./dist/preview.js"},"./manager":"./dist/manager.js","./package.json":"./package.json"},"scripts":{"clean":"rimraf ./dist","prebuild":"npm run clean","build":"tsup","build:watch":"npm run build -- --watch","test":"echo \"Error: no test specified\" && exit 1","start":"run-p build:watch 'storybook --quiet'","prerelease":"zx scripts/prepublish-checks.js","release":"npm run build && auto shipit","eject-ts":"zx scripts/eject-typescript.js","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"storybook-i18n":"^3.0.1"},"devDependencies":{"@storybook/addon-essentials":"^8.0.0","@storybook/addon-interactions":"^8.0.0","@storybook/addon-links":"^8.0.0","@storybook/blocks":"^8.0.0","@storybook/components":"^8.0.0","@storybook/core-events":"^8.0.0","@storybook/manager":"^8.0.0","@storybook/manager-api":"^8.0.0","@storybook/preview":"^8.0.0","@storybook/preview-api":"^8.0.0","@storybook/react":"^8.0.0","@storybook/react-vite":"^8.0.0","@storybook/testing-library":"^0.2.2","@storybook/theming":"^8.0.0","@storybook/types":"^8.0.0","@types/node":"^18.15.0","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","@vitejs/plugin-react":"^4.2.1","auto":"^11.0.4","boxen":"^7.1.1","dedent":"^1.5.1","i18next":"23.4.6","i18next-browser-languagedetector":"^7.1.0","i18next-http-backend":"^2.2.1","npm-run-all":"^4.1.5","prettier":"^3.2.5","prompts":"^2.4.2","react":"^18.2.0","react-dom":"^18.2.0","react-intl":"6.5.5","rimraf":"^5.0.5","storybook":"^8.0.0","tsup":"^8.0.2","typescript":"^5.3.3","vite":"^5.1.2","zx":"^7.2.3"},"peerDependencies":{"react-intl":"^5.24.0 || ^6.0.0"},"publishConfig":{"access":"public"},"bundler":{"exportEntries":["src/index.ts"],"managerEntries":["src/manager.ts"],"previewEntries":["src/preview.ts"]},"storybook":{"displayName":"Storybook react-intl addon","supportedFrameworks":["react"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"packageManager":"yarn@1.22.19+sha256.732620bac8b1690d507274f025f3c6cfdc3627a84d9642e38a07452cc00e0f2e","_id":"@danielhep/storybook-react-intl@3.0.1","gitHead":"1fa31c5d06c0e52e21ef3495e8686d027eeded7e","bugs":{"url":"https://github.com/stevensacks/storybook-react-intl/issues"},"homepage":"https://github.com/stevensacks/storybook-react-intl#readme","_nodeVersion":"21.7.3","_npmVersion":"10.5.0","dist":{"integrity":"sha512-OTwG+B9Bz7gOSP8R8jD/YfiCcIkJG784N2x+kWLtJjYHoYkwDnn88ri1vCi2QQ6d2hMQ6paGiS1meOJNGZxwcA==","shasum":"d979c0a2d3920c95d759829724461dda75638094","tarball":"https://registry.npmjs.org/@danielhep/storybook-react-intl/-/storybook-react-intl-3.0.1.tgz","fileCount":17,"unpackedSize":35879,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1+XdZ+X7t5oIjekVVOFdA1gBmbdNQzgoPb4YsNW7ZRwIhAJLlD9aBLaxL5QNq8ZKDKkjxhvAWcGzarJOQ0TGWvzib"}]},"_npmUser":{"name":"danielhep","email":"npm@sl.danielhep.me"},"directories":{},"maintainers":[{"name":"danielhep","email":"npm@sl.danielhep.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-react-intl_3.0.1_1713754678673_0.71007801013054"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-22T02:57:58.618Z","3.0.1":"2024-04-22T02:57:58.827Z","modified":"2024-04-22T02:57:59.063Z"},"maintainers":[{"name":"danielhep","email":"npm@sl.danielhep.me"}],"description":"Add react-intl support to Storybook","homepage":"https://github.com/stevensacks/storybook-react-intl#readme","keywords":["storybook-addons","storybook-i18n","react-intl","i18n","localization","internationalization"],"repository":{"type":"git","url":"git+https://github.com/stevensacks/storybook-react-intl.git"},"author":{"name":"Steven Sacks"},"bugs":{"url":"https://github.com/stevensacks/storybook-react-intl/issues"},"license":"MIT","readme":"# Storybook react-intl addon\n\nAdd react-intl support to Storybook.\n\nRequired Versions:\n* storybook - `^8.0.0`\n* react-intl - `^5.24.0 || ^6.0.0`\n\nThis Storybook addon assumes your project is already set up with [react-intl](https://formatjs.io/docs/react-intl/), and that it is properly configured and working.\n\n## Installation\n\nThis addon should be added as a dev dependency.\n\n```bash\nnpm i -D storybook-react-intl\n```\n\n```bash\nyarn add -D storybook-react-intl\n```\n\nYou will need to install `react-intl` as a dependency of your project if it is not already installed.\n```bash\nnpm i -S react-intl\n```\n\n```bash\nyarn add react-intl\n```\n\n## Usage\n\nAfter installing, follow these steps to enable this addon in Storybook.\n\n### main.ts\nInsert this addon into your addons array:\n```typescript\n{\n  addons: [\n    // other addons...\n    'storybook-react-intl',\n  ]\n}\n```\n---\n\n### reactIntl.ts\nCreate a file in your `.storybook` folder called `reactIntl.ts` (or whatever you like). This is where you will set up your react-intl configuration.\n\nIn this file, copy and paste the below code and make whatever modifications you need.\n```typescript\nconst locales = ['en', 'de'];\n\nconst messages = locales.reduce((acc, lang) => ({\n  ...acc,\n  [lang]: require(`../locale/${lang}.json`), // whatever the relative path to your messages json is\n}), {});\n\nconst formats = {}; // optional, if you have any formats\n\nexport const reactIntl = {\n  defaultLocale: 'en',\n  locales,\n  messages,\n  formats,\n};\n```\n---\n\n### preview.ts\nIn your `preview.ts`, you need to add the `locales` and `locale` to globals, as well as add `reactIntl` that you exported from the above file to parameters.\n\n`locales` is an object where the keys are the \"ids\" of the locales/languages and the values are the names you want to display in the dropdown.\n\n`locale` is the default locale, which can be read from `reactIntl` or set manually if you choose.\n\n```typescript\nimport {reactIntl} from './reactIntl';\n\nconst preview: Preview = {\n    globals: {\n        locale: reactIntl.defaultLocale,\n        locales: {\n            en: 'English',\n            de: 'Deutsche',  \n        },\n    },\n    parameters: {\n        reactIntl,\n    }\n};\n\nexport default preview;\n```\n\nYou can also set locales to Storybook compatible objects as [documented in the storybook-i18n](https://github.com/stevensacks/storybook-i18n#end-users) addon (which is included as part of this addon).\n\n```javascript\nimport {reactIntl} from './reactIntl';\n\nconst preview: Preview = {\n    globals: {\n        locale: reactIntl.defaultLocale,\n        locales: {\n            en: {icon: '🇺🇸', title: 'English', right: 'EN'},\n            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},\n            ja: {icon: '🇯🇵', title: '日本語', right: 'JP'},\n        },\n    },\n    parameters: {\n        reactIntl,\n    }\n};\n\nexport default preview;\n```\n\n## Story Parameters Locale\n\nIf you want to have a story use a specific locale, set it in that Story's parameters.\n\n```typescript jsx\nexport const Default: StoryObj = {\n    render: () => <YourComponent/>,\n};\n\nexport const Japanese: StoryObj = {\n    parameters: {\n        locale: 'ja',\n    },\n    render: () => <YourComponent/>,\n};\n```\nNote that doing this switches the current locale to the parameter one, so when you change to a story without a parameter, it will stay at the last selected locale.\n\nIn the above example, if you view the Japanese story and then click back on the Default story, the locale will stay `ja`.\n\n---\nOnce you have finished these steps and launch storybook, you should see a globe icon in the toolbar.\n\nClicking this globe icon will show a dropdown with the locales you defined.\n\nSwitching locales will use the strings defined in your messages.\n","readmeFilename":"README.md"}