docs(README): update usage instructions

stevensacks · Dec 22, 2021 · 5a936d8 · 5a936d8
2 parents 7fdfcaa + f898b0f
commit 5a936d8
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,23 +1,15 @@
-# v0.9.2 (Mon Jul 12 2021)
+# v0.9.2 (Sun Sep 12 2021)
 
-#### ⚠️ Pushed to `main`
-
-- initial commit and README ([@stevensacks](https://github.com/stevensacks))
-- Initial commit ([@stevensacks](https://github.com/stevensacks))
-
-#### Authors: 1
-
-- Steven Sacks ([@stevensacks](https://github.com/stevensacks))
-
----
+#### 🐛 Bug Fix
 
-# v0.9.1 (Mon Jul 12 2021)
+- fix IntlProvider initialize [#4](https://github.com/stevensacks/storybook-react-intl/pull/4) ([@kongkx](https://github.com/kongkx))
 
 #### ⚠️ Pushed to `main`
 
 - initial commit and README ([@stevensacks](https://github.com/stevensacks))
 - Initial commit ([@stevensacks](https://github.com/stevensacks))
 
-#### Authors: 1
+#### Authors: 2
 
+- [@kongkx](https://github.com/kongkx)
 - Steven Sacks ([@stevensacks](https://github.com/stevensacks))
diff --git a/README.md b/README.md
@@ -44,21 +44,14 @@ Create a file in your `.storybook` folder called `reactIntl.js` (or whatever you
 
 In this file, copy and paste the below code and make whatever modifications you need.
 ```javascript
-import {addLocaleData} from 'react-intl';
-import enLocaleData from 'react-intl/locale-data/en';
-import deLocaleData from 'react-intl/locale-data/de';
-
-addLocaleData(enLocaleData);
-addLocaleData(deLocaleData);
-
 const locales = ['en', 'de'];
 
 const messages = locales.reduce((acc, lang) => ({
   ...acc,
   [lang]: require(`../locale/${lang}.json`), // whatever the relative path to your messages json is
 }), {});
 
-const formats = {}; // if you have any formats
+const formats = {}; // optional, if you have any formats
 
 export const reactIntl = {
   defaultLocale: 'en',
@@ -88,6 +81,19 @@ export const parameters = {
   },
 };
 ```
+
+You 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).
+
+```javascript
+export const parameters = {
+    locales: {
+        en: {title: "English", left: '🇺🇸'},
+        fr: {title: "Français", left: '🇫🇷'},
+        ja: {title: "日本語", left: '🇯🇵'},
+    },
+};
+```
+
 ---
 Once you have finished these steps and launch storybook, you should see a globe icon in the toolbar.
 

diff --git a/package.json b/package.json
@@ -43,7 +43,8 @@
     "eject-ts": "zx scripts/eject-typescript.mjs"
   },
   "dependencies": {
-    "react-intl": "^5.20.4"
+    "react-intl": "^5.20.4",
+    "storybook-i18n": "^1.0.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
@@ -74,7 +75,8 @@
     "@storybook/theming": "^6.2.9",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "react-intl": "^5.20.4"
+    "react-intl": "^5.20.4",
+    "storybook-i18n": "^1.0.3"
   },
   "peerDependenciesMeta": {
     "react": {

diff --git a/src/preset/preview.tsx b/src/preset/preview.tsx
@@ -7,20 +7,21 @@ import {useGlobals} from '@storybook/client-api';
 const withReactIntl = (story: StoryGetter, context: StoryContext) => {
   const [{locale}] = useGlobals();
   const {
-    parameters: {reactIntl},
+    parameters: {reactIntl, locale: defaultLocale },
   } = context;
+  const currentLocale = locale || defaultLocale;
 
-  if (locale && reactIntl) {
+  if (currentLocale && reactIntl) {
     const {formats, messages} = reactIntl;
-    const safeFormats = formats ? formats[locale] : undefined;
+    const safeFormats = formats ? formats[currentLocale] : undefined;
     if (messages) {
       return (
         <IntlProvider
           key={locale}
           formats={safeFormats}
-          messages={messages[locale]}
-          locale={locale}
-          defaultLocale={context.parameters.locale}
+          messages={messages[currentLocale]}
+          locale={currentLocale}
+          defaultLocale={defaultLocale}
         >
           {story(context)}
         </IntlProvider>

diff --git a/yarn.lock b/yarn.lock
@@ -9506,6 +9506,11 @@ store2@^2.12.0:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
   integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
 
+storybook-i18n@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/storybook-i18n/-/storybook-i18n-1.0.3.tgz#b5b1d5106aab067dfe7e76c4af1d50fd335330b2"
+  integrity sha512-dMIZf+4uoFMpn6GLWnh0428MVGsDJYXa1NtBPE6hs/R95LYY19l8HszgMq6wYcrKe1L6vdQiV0Vu9J9gz4ZR4w==
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"