Skip to content

Commit cbe0574

Browse files
Georgi2704Georgi2704
authored
Merge pull request #58 from workfloworchestrator/1718-add-translations-pydantic-forms
1718 add translations pydantic forms
2 parents 3ef82df + b757509 commit cbe0574

File tree

17 files changed

+418
-30
lines changed

17 files changed

+418
-30
lines changed

‎frontend/apps/example/src/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ export const metadata: Metadata = {
1919
description: 'Generates forms from Pydantic models',
2020
};
2121

22-
export default function RootLayout({
22+
export default async function RootLayout({
2323
children,
2424
}: Readonly<{
2525
children: React.ReactNode;
2626
}>) {
2727
return (
28-
<html lang="en">
28+
<html>
2929
<body className={`${geistSans.variable} ${geistMono.variable}`}>
3030
{children}
3131
</body>

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import {
4+
Locale,
45
PydanticForm,
56
PydanticFormFieldFormat,
67
PydanticFormFieldType,
@@ -74,9 +75,16 @@ export default function Home() {
7475
];
7576
};
7677

78+
const customTranslations = {
79+
renderForm: {
80+
loading: 'The form is loading. Please wait.',
81+
},
82+
};
83+
const locale = Locale.enGB;
84+
7785
return (
7886
<div className={styles.page}>
79-
<h1 style={{ marginBottom: '20px' }}>Pydantic Form</h1>
87+
<h1 style={{ marginBottom: '20px' }}>Pydantic Form </h1>
8088

8189
<PydanticForm
8290
id="theForm"
@@ -91,6 +99,8 @@ export default function Home() {
9199
labelProvider: pydanticLabelProvider,
92100
customDataProvider: pydanticCustomDataProvider,
93101
componentMatcher: componentMatcher,
102+
customTranslations: customTranslations,
103+
locale: locale,
94104
}}
95105
/>
96106
</div>

‎frontend/package-lock.json‎

Lines changed: 130 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
},
1616
"devDependencies": {
1717
"@changesets/cli": "^2.27.1",
18+
"@types/lodash": "^4.17.16",
1819
"turbo": "^2.3.3"
1920
},
2021
"engines": {
@@ -27,6 +28,7 @@
2728
"packages/*"
2829
],
2930
"dependencies": {
31+
"lodash.merge": "^4.6.2",
3032
"typescript": "^5.8.2"
3133
}
3234
}

‎frontend/packages/pydantic-forms/next.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// import {NextConfig} from 'next';
2+
// import createNextIntlPlugin from 'next-intl/plugin';
3+
//
4+
// const nextConfig: NextConfig = {};
5+
//
6+
// const withNextIntl = createNextIntlPlugin();
7+
// export default withNextIntl(nextConfig);

‎frontend/packages/pydantic-forms/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@
5858
"@hookform/resolvers": "^3.9.1",
5959
"dayjs": "^1.11.13",
6060
"i18next": "^24.1.2",
61+
"lodash": "^4.17.21",
62+
"next-intl": "^4.0.2",
6163
"react-hook-form": "^7.54.1",
6264
"swr": "^2.3.0",
6365
"zod": "^3.24.1",

‎frontend/packages/pydantic-forms/src/PydanticForm.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import React from 'react';
1010

1111
import RenderForm from '@/components/render/RenderForm';
1212
import PydanticFormContextProvider from '@/core/PydanticFormContextProvider';
13+
import { TranslationsProvider } from '@/messages/translationsProvider';
1314
import type {
1415
PydanticFormInitialContextProps,
1516
PydanticFormMetaData,
@@ -26,13 +27,18 @@ export const PydanticForm = ({
2627
metaData,
2728
...contextProps
2829
}: PydanticFormProps) => (
29-
<PydanticFormContextProvider
30-
{...contextProps}
31-
formKey={id}
32-
metaData={metaData}
30+
<TranslationsProvider
31+
customTranslations={contextProps.config.customTranslations}
32+
locale={contextProps.config.locale}
3333
>
34-
{RenderForm}
35-
</PydanticFormContextProvider>
34+
<PydanticFormContextProvider
35+
{...contextProps}
36+
formKey={id}
37+
metaData={metaData}
38+
>
39+
{RenderForm}
40+
</PydanticFormContextProvider>
41+
</TranslationsProvider>
3642
);
3743

3844
export default PydanticForm;

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
*/
66
import React from 'react';
77

8+
import { useTranslations } from 'next-intl';
9+
810
import { usePydanticFormContext } from '@/core';
911

1012
const Footer = () => {
@@ -20,6 +22,8 @@ const Footer = () => {
2022
allowUntouchedSubmit,
2123
} = usePydanticFormContext();
2224

25+
const t = useTranslations('footer');
26+
2327
return (
2428
<div style={{ height: '200px' }}>
2529
{footerComponent && <div>{footerComponent}</div>}{' '}
@@ -45,14 +49,13 @@ const Footer = () => {
4549
}}
4650
style={{ padding: '4px' }}
4751
>
48-
Reset
52+
{t('reset')}
4953
</button>
5054
)}
51-
5255
{!!onCancel &&
5356
(cancelButton ?? (
5457
<button type="button" onClick={onCancel}>
55-
Annuleren
58+
{t('cancel')}
5659
</button>
5760
))}
5861

@@ -65,11 +68,11 @@ const Footer = () => {
6568
!rhf.formState.isSubmitting)
6669
}
6770
>
68-
{sendLabel ?? 'Verzenden'}
71+
{sendLabel ?? t('send')}
6972
</button>
7073
</div>
7174
{!rhf.formState.isValid && rhf.formState.isDirty && (
72-
<div>Het formulier is nog niet correct ingevuld</div>
75+
<div>{t('notFilledYet')}</div>
7376
)}
7477
</div>
7578
);

0 commit comments

Comments
 (0)