diff --git a/.storybook/i18next.js b/.storybook/i18next.js new file mode 100644 index 00000000..2c5bce8c --- /dev/null +++ b/.storybook/i18next.js @@ -0,0 +1,29 @@ +import { initReactI18next } from 'react-i18next'; +import i18n from 'i18next'; + +const ns = ['common']; +const supportedLngs = ['en']; +const resources = ns.reduce((acc, n) => { + supportedLngs.forEach((lng) => { + if (!acc[lng]) acc[lng] = {}; + acc[lng] = { + ...acc[lng], + [n]: require(`../translations/${lng}.json`), + }; + }); + return acc; +}, {}); + +i18n.use(initReactI18next).init({ + //debug: true, + lng: 'en', + fallbackLng: 'en', + defaultNS: 'common', + ns, + interpolation: { escapeValue: false }, + react: { useSuspense: false }, + supportedLngs, + resources, +}); + +export default i18n; diff --git a/.storybook/main.js b/.storybook/main.js index f4acc807..87e32bb7 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -5,6 +5,7 @@ module.exports = { '@storybook/addon-essentials', '@storybook/addon-interactions', '@chakra-ui/storybook-addon', + 'storybook-react-i18next', ], framework: '@storybook/react', core: { diff --git a/.storybook/preview.js b/.storybook/preview.js index 1eee454d..3d586922 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,12 @@ import { stakingTheme } from '../content/theme'; +import i18n from './i18next.js'; export const parameters = { + i18n, + locale: 'en', + locales: { + en: 'English', + }, chakra: { theme: stakingTheme, }, diff --git a/package.json b/package.json index b6e701f3..ec02f821 100644 --- a/package.json +++ b/package.json @@ -137,6 +137,7 @@ "lint-staged": "^13.0.2", "prettier": "^2.7.1", "remarkable-external-link": "^1.1.0", + "storybook-react-i18next": "^1.1.2", "typescript": "^4.7.4" }, "resolutions": { diff --git a/yarn.lock b/yarn.lock index 1d86b654..3e027383 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22848,6 +22848,7 @@ __metadata: remarkable: ^2.0.1 remarkable-external-link: ^1.1.0 storybook: ^6.5.10 + storybook-react-i18next: ^1.1.2 styled-components: ^5.3.5 styled-media-query: ^2.1.2 synthetix: ^2.0.0 @@ -22888,6 +22889,52 @@ __metadata: languageName: node linkType: hard +"storybook-i18n@npm:^1.1.2": + version: 1.1.4 + resolution: "storybook-i18n@npm:1.1.4" + peerDependencies: + "@storybook/addons": ">=6.5.0" + "@storybook/api": ">=6.5.0" + "@storybook/components": ">=6.5.0" + "@storybook/core-events": ">=6.5.0" + "@storybook/theming": ">=6.5.0" + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + checksum: bcc79a35677936ff3ab9545ea0ef348e025c37fa5bb4e7a60a8560144969c21ebd5472857265e175a1b049b1462e90c1b4dfde645b2cca419c43e97cdbd8e4d0 + languageName: node + linkType: hard + +"storybook-react-i18next@npm:^1.1.2": + version: 1.1.2 + resolution: "storybook-react-i18next@npm:1.1.2" + dependencies: + storybook-i18n: ^1.1.2 + peerDependencies: + "@storybook/addons": ">=6.5.0" + "@storybook/api": ">=6.5.0" + "@storybook/components": ">=6.5.0" + "@storybook/core-events": ">=6.5.0" + "@storybook/theming": ">=6.5.0" + i18next: ">=21.0.0" + i18next-browser-languagedetector: ^6.1.4 + i18next-http-backend: ^1.4.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-i18next: ^11.17.1 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + checksum: 05688901b5af0fed702ca4b80422f5e1d91beb334c562a0bbe7fccb5f16447ebca328b64a8f3deaee69e19bc0873769a4ea5e7429e6832d8a6fa434986d4f4b8 + languageName: node + linkType: hard + "storybook@npm:^6.5.10": version: 6.5.10 resolution: "storybook@npm:6.5.10"