AP-97 Add i18n support

.storybook/main.ts

@@ -26,7 +26,7 @@ const config: StorybookConfig = {
   webpackFinal: async (config) => {
     config.resolve!.alias = {
       ...config.resolve!.alias,
-      "@Pimcore": path.resolve(__dirname, "../assets/js"),
+      "@Pimcore": path.resolve(__dirname, "../assets/js/src"),
     };
 
     return config;

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
-import { ThemeProvider } from "../assets/js/modules/theme/components/ThemeProvider"
+import { GlobalProvider } from "../assets/js/src/modules/app/components/global-provider";
 
 const preview: Preview = {
   parameters: {
@@ -15,9 +15,9 @@ const preview: Preview = {
 
   decorators: [
     (Story) => (
-      <ThemeProvider>
+      <GlobalProvider>
         <Story />
-      </ThemeProvider>
+      </GlobalProvider>
     ),
   ],
 };

assets/js/src/app/i18n/index.ts

@@ -0,0 +1,23 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+i18n
+  .use(initReactI18next)
+
+  .init({
+    fallbackLng: 'en',
+    partialBundledLanguages: true,
+    ns: [],
+    resources: {},
+    saveMissing: true
+  })
+
+  .catch((error) => {
+    console.error(error)
+  })
+
+i18n.on('missingKey', (lngs, namespace, key, res) => {
+  // @todo implement handling of missing keys after endpoints are available
+})
+
+export default i18n

assets/js/src/components/example/example.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd'
+import { Button, Space } from 'antd'
 import React from 'react'
 import { useStyle } from './example.styles'
 
@@ -12,9 +12,11 @@ export const Example = ({ value, prefix }: ExampleProps): React.JSX.Element => {
 
   return (
     <div>
-      <label className={styles.example}>{prefix}</label>
+      <Space>
+        <label className={styles.example}>{prefix}</label>
 
-      <Button type="primary">{value}</Button>
+        <Button type="primary">{value}</Button>
+      </Space>
     </div>
   )
 }

assets/js/src/main.ts

@@ -1,3 +1,4 @@
+import '@Pimcore/app/i18n'
 import { runApp } from './modules/app/utils/app-runner'
 
 if (module.hot !== undefined) {

assets/js/src/modules/example/containers/example.tsx

@@ -2,17 +2,20 @@ import React, { useEffect } from 'react'
 import { selectValue, setValue } from '../store/example-slice'
 import { useAppDispatch, useAppSelector } from '@Pimcore/app/store/index'
 import { Example as ExampleView } from '@Pimcore/components/example/example'
+import { useTranslation } from 'react-i18next'
 
 const Example = (): React.JSX.Element => {
   const value = useAppSelector(selectValue)
   const dispatch = useAppDispatch()
+  const { t, i18n } = useTranslation()
+  const currentDate = i18n.format(new Date(), 'DateTime', i18n.language)
 
   useEffect(() => {
-    dispatch(setValue('test32'))
+    dispatch(setValue('test'))
   }, [])
 
   return (
-    <ExampleView prefix='custom prefix: ' value={value} />
+    <ExampleView prefix={currentDate + ' - ' + t('example-prefix')} value={t(`example-value.${value}`)} />
   )
 }
 

package.json

@@ -61,8 +61,10 @@
     "@types/react-dom": "^18.2.18",
     "antd": "^5.13.2",
     "antd-style": "^3.6.1",
+    "i18next": "^23.7.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.1",
     "react-redux": "^9.1.0"
   }
 }

public/build/entrypoints.json

@@ -2,8 +2,8 @@
   "entrypoints": {
     "main": {
       "js": [
-        "/bundles/pimcorestudioui/build/472.7f3504bd.js",
-        "/bundles/pimcorestudioui/build/main.34d599c6.js"
+        "/bundles/pimcorestudioui/build/619.8af3df81.js",
+        "/bundles/pimcorestudioui/build/main.4604c388.js"
       ]
     }
   }

public/build/manifest.json

@@ -1,4 +1,4 @@
 {
-  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.34d599c6.js",
-  "bundles/pimcorestudioui/build/472.7f3504bd.js": "/bundles/pimcorestudioui/build/472.7f3504bd.js"
+  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.4604c388.js",
+  "bundles/pimcorestudioui/build/619.8af3df81.js": "/bundles/pimcorestudioui/build/619.8af3df81.js"
 }