translations setup v1

Author: Georgi2704

frontend/apps/example/src/app/page.tsx

@@ -91,6 +91,7 @@ export default function Home() {
                     labelProvider: pydanticLabelProvider,
                     customDataProvider: pydanticCustomDataProvider,
                     componentMatcher: componentMatcher,
+                    translations :  {} // key-value thing this will override the messages
                 }}
             />
         </div>

frontend/package-lock.json

@@ -15,6 +15,7 @@
     },
     "devDependencies": {
         "@changesets/cli": "^2.27.1",
+        "@types/lodash": "^4.17.16",
         "turbo": "^2.3.3"
     },
     "engines": {
@@ -27,6 +28,7 @@
         "packages/*"
     ],
     "dependencies": {
+        "lodash.merge": "^4.6.2",
         "typescript": "^5.8.2"
     }
 }

frontend/package.json

@@ -58,6 +58,8 @@
         "@hookform/resolvers": "^3.9.1",
         "dayjs": "^1.11.13",
         "i18next": "^24.1.2",
+        "lodash": "^4.17.21",
+        "next-intl": "^4.0.2",
         "react-hook-form": "^7.54.1",
         "swr": "^2.3.0",
         "zod": "^3.24.1",

frontend/packages/pydantic-forms/package.json

@@ -20,6 +20,8 @@ const Footer = () => {
         allowUntouchedSubmit,
     } = usePydanticFormContext();
 
+    // const t = useTranslations('nms.services.ports');
+
     return (
         <div style={{ height: '200px' }}>
             {footerComponent && <div>{footerComponent}</div>}{' '}

frontend/packages/pydantic-forms/src/components/form/Footer.tsx

@@ -34,8 +34,11 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         componentMatcher: customComponentMatcher,
     } = config || {};
 
+    // const t = useTranslations('newTranslations')
+
     const LoadingComponent = loadingComponent ?? (
-        <div>Formulier aan het ophalen...</div>
+        // <div>{t('loading')}</div>
+        <div></div>
     );
 
     if (isLoading && !isSending) {
@@ -66,6 +69,10 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         customComponentMatcher,
     );
 
+    console.log('pydanticFormComponents', pydanticFormComponents);
+    console.log("pydanticFormSchema", pydanticFormSchema)
+    console.log("customComponentMatcher", customComponentMatcher)
+
     return (
         <form action={''} onSubmit={submitForm}>
             {title !== false &&

frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx

@@ -42,6 +42,7 @@ import {
 import { getHashForArray } from '@/utils';
 
 import translation from './translations/nl.json';
+import {TranslationsProvider} from "@/core/translations/translationsProvider";
 
 // lng and resources key depend on your locale.
 i18next.init({
@@ -148,7 +149,10 @@ function PydanticFormContextProvider({
     const [rawSchema, setRawSchema] = useState<PydanticFormSchemaRawJson>();
 
     // extract the JSON schema to a more usable custom schema
-    const { pydanticFormSchema, isLoading: isParsingSchema } =
+
+    const { pydanticFormSchema, isLoading: isParsingSchema } = //rawSchema is the response from the backend
+
+        //form labels are matched to the definition
         usePydanticFormParser(
             rawSchema,
             formLabels?.labels,
@@ -385,9 +389,11 @@ function PydanticFormContextProvider({
     };
 
     return (
-        <PydanticFormContext.Provider value={PydanticFormContextState}>
-            {children(PydanticFormContextState)}
-        </PydanticFormContext.Provider>
+        <TranslationsProvider>
+            <PydanticFormContext.Provider value={PydanticFormContextState}>
+                {children(PydanticFormContextState)}
+            </PydanticFormContext.Provider>
+        </TranslationsProvider>
     );
 }