upgrade to sb7 WIP

.github/workflows/release.yml

@@ -12,13 +12,13 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: yarn install --ignore-scripts
 
       - name: Create Release
         env:

.gitignore

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

.storybook/i18next.ts

@@ -0,0 +1,39 @@
+import {initReactI18next} from 'react-i18next';
+import i18n from 'i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import en from '../src/stories/locales/en';
+import fr from '../src/stories/locales/fr';
+import ja from '../src/stories/locales/ja';
+
+const languages: Record<string, any> = {en, fr, ja};
+
+const ns = ['common'];
+const supportedLngs = ['en', 'fr', 'ja'];
+const resources = ns.reduce((acc, n) => {
+    supportedLngs.forEach((lng) => {
+        if (!acc[lng]) acc[lng] = {};
+        acc[lng] = {
+            ...acc[lng],
+            [n]: languages[lng],
+        };
+    });
+    return acc;
+}, {} as Record<string, any>);
+
+i18n.use(initReactI18next)
+    .use(LanguageDetector)
+    .use(Backend)
+    .init({
+        //debug: true,
+        lng: 'en',
+        fallbackLng: 'en',
+        defaultNS: 'common',
+        ns,
+        interpolation: {escapeValue: false},
+        react: {useSuspense: false},
+        supportedLngs,
+        resources,
+    });
+
+export default i18n;

.storybook/local-preset.js

@@ -0,0 +1,15 @@
+/**
+ * to load the built addon in this test Storybook
+ */
+function previewAnnotations(entry = []) {
+    return [...entry, require.resolve("../dist/preview.mjs")];
+}
+
+function managerEntries(entry = []) {
+    return [...entry, require.resolve("../dist/manager.mjs")];
+}
+
+module.exports = {
+    managerEntries,
+    previewAnnotations,
+};

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type {StorybookConfig} from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        'storybook-i18n',
+        './local-preset.js',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+};
+
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+    window.global = window;
+</script>

.storybook/preview.ts

@@ -0,0 +1,29 @@
+import type {Preview} from '@storybook/react';
+// @ts-ignore
+import i18n from './i18next';
+
+const preview: Preview = {
+    globals: {
+        locale: 'en',
+        locales: {
+            en: {title: 'English', left: '🇺🇸', right: 'EN'},
+            fr: {title: 'French', left: '🇫🇷', right: 'FR'},
+            ja: {title: '日本語', left: '🇯🇵', right: 'JA'},
+        },
+    },
+    parameters: {
+        actions: {argTypesRegex: '^on[A-Z].*'},
+        backgrounds: {
+            default: 'light',
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+        i18n,
+    },
+};
+
+export default preview;

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -39,7 +39,7 @@
 #### ⚠️ Pushed to `main`
 
 - Merge branch 'main' of github.com:stevensacks/storybook-react-i18next ([@stevensacks](https://github.com/stevensacks))
-- docs(readme): change export and import of i18next.js ([@stevensacks](https://github.com/stevensacks))
+- docs(readme): change export and import of i18next.ts ([@stevensacks](https://github.com/stevensacks))
 
 #### Authors: 1
 

README.md

@@ -3,11 +3,11 @@
 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 - `^7.0.0`
+* i18next - `^22.0.0`
+* i18next-browser-languagedetector - `^7.0.0`
+* i18next-http-backend: `^2.0.0`
+* react-i18next - `^12.0.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.
 
@@ -36,9 +36,9 @@ 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
+### main.ts
 Insert this addon into your addons array:
-```javascript
+```typescript
 {
   addons: [
     // other addons...
@@ -48,11 +48,11 @@ Insert this addon into your addons array:
 ```
 ---
 
-### i18next.js
-Create a file in your `.storybook` folder called `i18next.js` (or whatever you like). 
+### i18next.ts
+Create a file in your `.storybook` folder called `i18next.ts` (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
+```typescript
 import {initReactI18next} from 'react-i18next';
 import i18n from 'i18next';
 import Backend from 'i18next-http-backend';
@@ -93,41 +93,49 @@ 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.
+### preview.ts
+In your `preview.ts`, you need to add the `locales` and `locale` globals, as well as adding `i18n` that you exported from the above file to parameters.
 
-`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.
+\`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.
 
 `locale` is what you want the default locale to be.
 
-```javascript
-import i18n from './i18next.js';
-
-export const parameters = {
-  i18n,
-  locale: 'en',
-  locales: {
-    en: 'English',
-    fr: 'Français',
-    ja: '日本語',    
-  },
+```typescript
+import i18n from './i18next';
+
+const preview: Preview = {
+    globals: {
+        locale: 'en',
+        locales: {
+            en: 'English',
+            fr: 'Français',
+            ja: '日本語',
+        },
+    },
+    parameters: {
+        i18n,
+    },
 };
 ```
 
 You can also use full locale strings as keys. It depends on your i18next configuration.
 
-```javascript
-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: '日本語',    
-  },
+```typescript
+import i18n from './i18next';
+
+const preview: Preview = {
+    globals: {
+        locale: 'en_US',
+        locales: {
+            en_US: 'English (US)',
+            en_GB: 'English (GB)',
+            fr_FR: 'Français',
+            ja_JP: '日本語',
+        },
+    },
+    parameters: {
+        i18n,
+    },
 };
 ```
 
@@ -137,35 +145,64 @@ The `locales` object can also have values as an object with keys of `title`, `le
 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: '🇯🇵'},
-  },
+```typescript
+import i18n from './i18next';
+
+const preview: Preview = {
+    globals: {
+        locale: "en",
+        locales: {
+            en: {title: "English", left: '🇺🇸'},
+            fr: {title: "Français", left: '🇫🇷'},
+            ja: {title: "日本語", left: '🇯🇵'},
+        },
+    },
+    parameters: {
+        i18n,
+    },
 };
 ```
 
 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'},
-  },
+```typescript
+import i18n from './i18next';
+
+const preview: Preview = {
+    globals: {
+        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'},
+        },
+    },
+    parameters: {
+        i18n,
+    },
 };
 ```
+
+## Story Parameters Locale
+
+If you want to have a story use a specific locale, set it in that Story's parameters.
+
+```typescript jsx
+export const Default: StoryObj = {
+    render: () => <YourComponent/>,
+};
+
+export const Japanese: StoryObj = {
+    parameters: {
+        locale: 'ja',
+    },
+    render: () => <YourComponent/>,
+};
+```
+Note 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.
+
+In the above example, if you view the Japanese story and then click back on the Default story, the locale will stay `ja`.
+
 ---
 Once you have finished these steps and launch storybook, you should see a globe icon in the toolbar.
 

manager.js

@@ -0,0 +1 @@
+export * from './dist/manager';