feat: use storybook-i18n 2.1.x

.storybook/preview.ts

@@ -6,9 +6,9 @@ const preview: Preview = {
     globals: {
         locale: 'en',
         locales: {
-            en: {title: 'English', left: '🇺🇸', right: 'EN'},
-            fr: {title: 'French', left: '🇫🇷', right: 'FR'},
-            ja: {title: '日本語', left: '🇯🇵', right: 'JA'},
+            en: {icon: '🇺🇸', title: 'English', right: 'EN'},
+            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},
+            ja: {icon: '🇯🇵', title: '日本語', right: 'JP'},
         },
     },
     parameters: {

README.md

@@ -3,7 +3,7 @@
 Easy react-i18next Storybook integration.
 
 Required Peer Dependencies:
-* storybook - `^7.0.0`
+* storybook - `^8.0.0`
 * i18next - `^22.0.0`
 * i18next-browser-languagedetector - `^7.0.0`
 * i18next-http-backend: `^2.0.0`
@@ -156,9 +156,9 @@ const preview: Preview = {
     globals: {
         locale: "en",
         locales: {
-            en: {title: "English", left: '🇺🇸'},
-            fr: {title: "Français", left: '🇫🇷'},
-            ja: {title: "日本語", left: '🇯🇵'},
+            en: {icon: '🇺🇸', title: 'English', right: 'EN'},
+            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},
+            ja: {icon: '🇯🇵', title: '日本語', right: 'JP'},
         },
     },
     parameters: {
@@ -175,12 +175,12 @@ import i18n from './i18next';
 
 const preview: Preview = {
     globals: {
-        locale: "en_US",
+        locale: 'en_US',
         locales: {
-            en_US: {title: "English", right: 'US'},
-            en_GB: {title: "English", right: 'GB'},
-            fr_FR: {title: "Français", right: 'FR'},
-            ja_JP: {title: "日本語", right: 'JP'},
+            en_US: {title: 'English', right: 'US'},
+            en_GB: {title: 'English', right: 'GB'},
+            fr_FR: {title: 'Français', right: 'FR'},
+            ja_JP: {title: '日本語', right: 'JP'},
         },
     },
     parameters: {
@@ -217,7 +217,3 @@ Once you have finished these steps and launch storybook, you should see a globe
 Clicking this globe icon will show a dropdown with the locales you defined in `parameters`. 
 
 Switching locales will use the strings defined in your locale json files.
-
-## Migrating to Storybook 7
-
-In `.storybook/preview.ts`, move the locale/locales to be under `globals` instead of `parameters`.

package.json

@@ -52,7 +52,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "storybook-i18n": "../storybook-i18n"
+    "storybook-i18n": "^2.1.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "8.0.0-beta.2",