feat: gets BulkGiftTotal story to render

- updates BulkGiftTotal stories to CSF3
- integrates i18next translations in storybook
- installs support packages for i18next/storybook integration
- updates types for BulkGiftTotalProps

.storybook/i18n.js

@@ -0,0 +1,18 @@
+import i18n from 'i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    debug: true,
+    backend: {
+      loadPath: '/static/locales/{{lng}}/{{ns}}.json',
+    },
+  });
+
+export default i18n;

.storybook/main.js

@@ -1,10 +1,14 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
 
   framework: {
     name: '@storybook/nextjs',
-    options: {}
+    options: {},
   },
 
   webpackFinal: async (config, { configType }) => {
@@ -13,6 +17,7 @@ module.exports = {
       fallback: {
         ...(config.resolve || {}).fallback,
         fs: false,
+        path: require.resolve('path-browserify'),
       },
     };
 
@@ -27,6 +32,6 @@ module.exports = {
   staticDirs: ['../public'],
 
   docs: {
-    autodocs: true
-  }
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -3,6 +3,10 @@ import './storybook.scss';
 import { ThemeProvider as MUIThemeProvider } from '@mui/material';
 import materialTheme from '../src/theme/themeStyles';
 import { ThemeProvider } from '@storybook/theming';
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n';
+import { useEffect } from 'react';
+
 // import { ThemeProvider } from 'emotion-theming';
 
 /*
@@ -11,13 +15,23 @@ import { ThemeProvider } from '@storybook/theming';
  * https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators
  */
 export const decorators = [
-  (Story) => (
-    <MUIThemeProvider theme={materialTheme}>
-      <ThemeProvider theme={materialTheme}>
-        <Story />
-      </ThemeProvider>
-    </MUIThemeProvider>
-  ),
+  (Story, context) => {
+    const { locale } = context.globals;
+
+    useEffect(() => {
+      i18n.changeLanguage(locale);
+    }, [locale]);
+
+    return (
+      <I18nextProvider i18n={i18n}>
+        <MUIThemeProvider theme={materialTheme}>
+          <ThemeProvider theme={materialTheme}>
+            <Story />
+          </ThemeProvider>
+        </MUIThemeProvider>
+      </I18nextProvider>
+    );
+  },
 ];
 
 export const parameters = {
@@ -29,3 +43,18 @@ export const parameters = {
     },
   },
 };
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', title: 'English' },
+        { value: 'de', title: 'Deutsch' },
+      ],
+      showName: true,
+    },
+  },
+};