chore(deps): update to storybook 6.4

.babelrc.js

@@ -1,19 +1,19 @@
 module.exports = {
-  presets: [
-    "@babel/preset-env",
-    "@babel/preset-typescript",
-    "@babel/preset-react",
-  ],
-  env: {
-    esm: {
-      presets: [
-        [
-          "@babel/preset-env",
-          {
-            modules: false,
-          },
-        ],
-      ],
+    presets: [
+        '@babel/preset-env',
+        '@babel/preset-typescript',
+        '@babel/preset-react',
+    ],
+    env: {
+        esm: {
+            presets: [
+                [
+                    '@babel/preset-env',
+                    {
+                        modules: false,
+                    },
+                ],
+            ],
+        },
     },
-  },
 };

.gitignore

@@ -5,3 +5,4 @@ build-storybook.log
 .DS_Store
 .env
 .idea
+

.prettierrc

@@ -1 +1,5 @@
-{}
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "tabWidth": 4
+}

.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  addons: ["../preset.js", "@storybook/addon-essentials"],
+    stories: [
+        '../stories/**/*.stories.mdx',
+        '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    ],
+    addons: ['../preset.js', '@storybook/addon-essentials'],
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-react-intl",
-  "version": "0.9.2",
+  "version": "1.0.0",
   "description": "Add react-intl support to Storybook",
   "keywords": [
     "storybook-addons",
@@ -43,29 +43,29 @@
     "eject-ts": "zx scripts/eject-typescript.mjs"
   },
   "dependencies": {
-    "react-intl": "^5.20.4",
-    "storybook-i18n": "^1.0.3"
+    "react-intl": "^5.24.0",
+    "storybook-i18n": "^1.0.7"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.13.0",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "auto": "^10.3.0",
-    "babel-loader": "^8.1.0",
-    "boxen": "^5.0.1",
-    "concurrently": "^6.2.0",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/react": "^6.4.9",
+    "auto": "^10.32.5",
+    "babel-loader": "^8.2.3",
+    "boxen": "^5.1.2",
+    "concurrently": "^6.5.1",
     "dedent": "^0.7.0",
-    "prettier": "^2.3.1",
+    "prettier": "^2.5.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "typescript": "^4.2.4",
-    "zx": "^1.14.1"
+    "typescript": "^4.5.4",
+    "zx": "1.14.1"
   },
   "peerDependencies": {
     "@storybook/addons": "^6.2.9",

preset.js

@@ -1,16 +1,16 @@
 function config(entry = []) {
-  return [
-    ...entry,
-    require.resolve('storybook-i18n/preview'),
-    require.resolve('./dist/esm/preset/preview'),
-  ];
+    return [
+        ...entry,
+        require.resolve('storybook-i18n/preview'),
+        require.resolve('./dist/esm/preset/preview'),
+    ];
 }
 
 function managerEntries(entry = []) {
-  return [...entry, require.resolve('storybook-i18n/manager')];
+    return [...entry, require.resolve('storybook-i18n/manager')];
 }
 
 module.exports = {
-  config,
-  managerEntries,
+    config,
+    managerEntries,
 };

src/index.ts

@@ -1,5 +1,5 @@
 if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
+    module.hot.decline();
 }
 
 // make it work with --isolatedModules

src/preset/preview.ts

@@ -0,0 +1,3 @@
+import {withReactIntl} from '../withReactIntl';
+
+export const decorators = [withReactIntl];

src/typings.d.ts

@@ -1 +1 @@
-declare module "global";
+declare module 'global';

src/withReactIntl.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+    AnyFramework,
+    PartialStoryFn as StoryFunction,
+    StoryContext,
+} from '@storybook/csf';
+import {IntlProvider} from 'react-intl';
+import {useGlobals} from '@storybook/client-api';
+
+export const withReactIntl = (
+    story: StoryFunction<AnyFramework>,
+    context: StoryContext
+) => {
+    const [{locale}] = useGlobals();
+    const {
+        parameters: {reactIntl, locale: defaultLocale},
+    } = context;
+    const currentLocale = locale || defaultLocale;
+
+    if (currentLocale && reactIntl) {
+        const {formats, messages} = reactIntl;
+        const safeFormats = formats ? formats[currentLocale] : undefined;
+        if (messages) {
+            return (
+                <IntlProvider
+                    key={locale}
+                    formats={safeFormats}
+                    messages={messages[currentLocale]}
+                    locale={currentLocale}
+                    defaultLocale={defaultLocale}
+                >
+                    {story(context)}
+                </IntlProvider>
+            );
+        }
+    }
+    return story(context);
+};

tsconfig.json

@@ -18,4 +18,4 @@
   "include": [
     "src/**/*"
   ],
-}
+}