feat: attempt setting up Storybook, i18n-next and webpack@5

Author: natterstefan

.storybook/i18n.js

@@ -1,42 +1,59 @@
 import { initReactI18next } from 'react-i18next'
-import i18n from 'i18next';
-
-import Backend from 'i18next-xhr-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
+import i18n from 'i18next'
+// import Backend from 'i18next-xhr-backend'
+import LanguageDetector from 'i18next-browser-languagedetector'
 
+const ns = ['common']
+const supportedLngs = ['en', 'de']
 
 /**
- * Example
+ * Examples
+ * - @see https://github.com/i18next/react-i18next/blob/c383abdb8d0f874a64bea3147a3dd3b9e1853f5e/example/storybook/src/i18n.js#L6-L24
  * - @see https://github.com/i18next/react-i18next/blob/7cfab9746b3ccc6f833cd9c892e7c3c804944a5e/example/react-typescript4.1/namespaces/src/i18n/config.ts#L13
+ * - @see https://github.com/stevensacks/storybook-react-i18next
  */
 i18n
-.use(Backend)
-.use(LanguageDetector)
-.use(initReactI18next)
-.init({
-  lng: 'en',
-  fallbackLng: 'en',
-  // have a common namespace used around the full app
-  ns: ['common'],
-  defaultNS: 'common',
-  debug: true,
-  interpolation: {
-    escapeValue: false, // not needed for react!!
-  },
-  // resources: {
-  //   en: {
-  //     'common': {
-  //       "home": "Home GERMAN",
-  //       "home_EN": "Home English"
-  //     }
-  //   },
-  //   de: {
-  //     'common': {
-  //       "home": "Home DEUTSCH",
-  //       "home_EN": "Home ENGLISCH"
-  //     }
-  //   }
-  // },
+  // load translation using http -> see /public/locales
+  // learn more: https://github.com/i18next/i18next-http-backend
+  // .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    lng: 'en',
+    fallbackLng: 'en',
+    // have a common namespace used around the full app
+    ns,
+    defaultNS: ns[0],
+    debug: true,
+    interpolation: {
+      escapeValue: false, // not needed for react!!
+    },
+    supportedLngs,
+    // resources: {
+    //   en: {
+    //     'common': {
+    //       "home": "Home GERMAN",
+    //       "home_EN": "Home English"
+    //     }
+    //   },
+    //   de: {
+    //     'common': {
+    //       "home": "Home DEUTSCH",
+    //       "home_EN": "Home ENGLISCH"
+    //     }
+    //   }
+    // },
+  })
+
+supportedLngs.forEach(lang => {
+  ns.forEach(n => {
+    i18n.addResources(lang, n, require(`../public/locales/${lang}/${n}.json`))
+  })
 })
 
-export default i18n
+export default i18n

.storybook/main.js

@@ -14,7 +14,6 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-addon-next-router',
-    'storybook-addon-i18next/register',
     {
       /**
        * NOTE: fix Storybook issue with PostCSS@8
@@ -27,6 +26,7 @@ module.exports = {
         },
       },
     },
+    'storybook-react-i18next',
   ],
   webpackFinal: config => {
     /**
@@ -52,7 +52,7 @@ module.exports = {
      * @see https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-792697008
      * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-758272734
      * @see https://webpack.js.org/migrate/5/
-     * 
+     *
      * source: https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-818042184
      */
     config.resolve.fallback = {

.storybook/preview.js

@@ -1,7 +1,5 @@
-import React, { Suspense } from 'react';
-import { RouterContext } from "next/dist/next-server/lib/router-context";
-// import { I18nextProvider } from 'react-i18next';
-import { withI18next } from 'storybook-addon-i18next';
+import { Suspense } from 'react'
+import { RouterContext } from 'next/dist/next-server/lib/router-context'
 
 import '../src/styles/index.scss'
 
@@ -22,11 +20,20 @@ export const parameters = {
     asPath: '/', // defaults to `/`
     query: {}, // defaults to `{}`
     push() {}, // defaults to using addon actions integration, can override any method in the router
-  }
+  },
+  // @see https://github.com/stevensacks/storybook-react-i18next
+  i18n,
+  locale: 'en',
+  locales: {
+    en: 'English',
+    de: 'Deutsch',
+  },
 }
 
 export const decorators = [
-  // Story => <I18nextProvider i18n={i18n}><Story /></I18nextProvider>,
-  withI18next({ i18n, languages: { en: 'English', de: 'Deutsch' }}),
-  Story => <Suspense fallback='loading...'><Story /></Suspense>
+  Story => (
+    <Suspense fallback={<div>loading...</div>}>
+      <Story />
+    </Suspense>
+  ),
 ]

package.json

@@ -31,7 +31,6 @@
     "date-fns": "^2.23.0",
     "i18next": "^20.3.5",
     "i18next-browser-languagedetector": "^6.1.2",
-    "i18next-xhr-backend": "^3.2.2",
     "next": "^11.0.1",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^8.5.5",
@@ -99,6 +98,7 @@
     "start-server-and-test": "^1.13.1",
     "storybook-addon-i18next": "^1.3.0",
     "storybook-addon-next-router": "^3.0.5",
+    "storybook-react-i18next": "^1.0.3",
     "style-loader": "^3.2.1",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",

src/__stories__/pages-index.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import IndexPage from '@/pages/index'
+
+export default {
+  title: 'Pages',
+  component: IndexPage,
+} as Meta
+
+const Template: Story = args => <IndexPage {...args} />
+
+export const Home: Story = Template.bind({})
+Home.args = {}