Storybook v7 compatibility - and dependency updates

.github/workflows/release.yml

@@ -3,26 +3,26 @@ name: Release
 on: [push]
 
 jobs:
-  release:
-    runs-on: ubuntu-latest
-    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
-    steps:
-      - uses: actions/checkout@v2
+    release:
+        runs-on: ubuntu-latest
+        if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+        steps:
+            - uses: actions/checkout@v2
 
-      - name: Prepare repository
-        run: git fetch --unshallow --tags
+            - name: Prepare repository
+              run: git fetch --unshallow --tags
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
+            - name: Use Node.js 14.x
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 14.x
 
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+            - name: Install dependencies
+              uses: bahmutov/npm-install@v1
 
-      - name: Create Release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: |
-          yarn release
+            - name: Create Release
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+              run: |
+                  yarn release

.gitignore

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

.prettierrc

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

README.md

@@ -3,11 +3,12 @@
 Easy react-i18next Storybook integration.
 
 Required Peer Dependencies:
-* storybook - `>=6.5.0`
-* i18next - `>=21.0.0`
-* i18next-browser-languagedetector - `^6.1.4`
-* i18next-http-backend: `^1.4.0`
-* react-i18next - `>=11.17.0`
+
+-   storybook - `>=6.5.0`
+-   i18next - `>=21.0.0`
+-   i18next-browser-languagedetector - `^6.1.4`
+-   i18next-http-backend: `^1.4.0`
+-   react-i18next - `>=11.17.0`
 
 This Storybook addon assumes your project is already set up with [i18next](https://www.i18next.com/overview/getting-started) and [react-i18next](https://react.i18next.com/getting-started), with all the required packages installed, and that it is properly configured and working.
 
@@ -24,6 +25,7 @@ yarn add -D storybook-react-i18next
 ```
 
 You will need to install `i18next` and `react-i18next` as dependencies to your project if they are not already installed.
+
 ```bash
 npm i -S i18next react-i18next i18next-browser-languagedetector i18next-http-backend
 ```
@@ -37,21 +39,26 @@ yarn add i18next react-i18next i18next-browser-languagedetector i18next-http-bac
 After installing, follow these 3 steps to enable this addon in Storybook.
 
 ### main.js
+
 Insert this addon into your addons array:
+
 ```javascript
 {
-  addons: [
-    // other addons...
-    'storybook-react-i18next',
-  ]
+    addons: [
+        // other addons...
+        'storybook-react-i18next',
+    ];
 }
 ```
+
 ---
 
 ### i18next.js
-Create a file in your `.storybook` folder called `i18next.js` (or whatever you like). 
+
+Create a file in your `.storybook` folder called `i18next.js` (or whatever you like).
 
 In this file, copy and paste the below code and make whatever modifications you need (paths to resource files, languages, etc.).
+
 ```javascript
 import {initReactI18next} from 'react-i18next';
 import i18n from 'i18next';
@@ -62,7 +69,7 @@ const ns = ['common'];
 const supportedLngs = ['en', 'fr', 'ja'];
 const resources = ns.reduce((acc, n) => {
     supportedLngs.forEach((lng) => {
-    if (!acc[lng]) acc[lng] = {};
+        if (!acc[lng]) acc[lng] = {};
         acc[lng] = {
             ...acc[lng],
             [n]: require(`../public/locales/${lng}/${n}.json`),
@@ -94,6 +101,7 @@ Refer to the [i18next Configuration Options](https://www.i18next.com/overview/co
 ---
 
 ### preview.js
+
 In your `preview.js`, you need to add the `locales` and `locale` parameters, as well as the `i18n` that you exported from the above file.
 
 `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.
@@ -104,13 +112,13 @@ In your `preview.js`, you need to add the `locales` and `locale` parameters, as
 import i18n from './i18next.js';
 
 export const parameters = {
-  i18n,
-  locale: 'en',
-  locales: {
-    en: 'English',
-    fr: 'Français',
-    ja: '日本語',    
-  },
+    i18n,
+    locale: 'en',
+    locales: {
+        en: 'English',
+        fr: 'Français',
+        ja: '日本語',
+    },
 };
 ```
 
@@ -120,55 +128,58 @@ You can also use full locale strings as keys. It depends on your i18next configu
 import i18n from './i18next.js';
 
 export const parameters = {
-  i18n,
-  locale: 'en_US',
-  locales: {
-    en_US: 'English (US)',
-    en_GB: 'English (GB)',
-    fr_FR: 'Français',
-    ja_JP: '日本語',    
-  },
+    i18n,
+    locale: 'en_US',
+    locales: {
+        en_US: 'English (US)',
+        en_GB: 'English (GB)',
+        fr_FR: 'Français',
+        ja_JP: '日本語',
+    },
 };
 ```
 
-
 The `locales` object can also have values as an object with keys of `title`, `left`, or `right`.
 
 This is useful if you want to include an emoji flag or some other string to the left or right side.
 
 For example:
+
 ```javascript
 import i18n from './i18next.js';
 
 export const parameters = {
-  i18n,
-  locale: "en",
-  locales: {
-    en: {title: "English", left: '🇺🇸'},
-    fr: {title: "Français", left: '🇫🇷'},
-    ja: {title: "日本語", left: '🇯🇵'},
-  },
+    i18n,
+    locale: 'en',
+    locales: {
+        en: {title: 'English', left: '🇺🇸'},
+        fr: {title: 'Français', left: '🇫🇷'},
+        ja: {title: '日本語', left: '🇯🇵'},
+    },
 };
 ```
 
 Or something like this:
+
 ```javascript
 import i18n from './i18next.js';
 
 export const parameters = {
-  i18n,
-  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'},
-  },
+    i18n,
+    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'},
+    },
 };
 ```
+
 ---
+
 Once you have finished these steps and launch storybook, you should see a globe icon in the toolbar.
 
-Clicking this globe icon will show a dropdown with the locales you defined in `parameters`. 
+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.