Skip to content

Commit a0c8c62

Browse files
Georgi2704Ruben van Leeuwen
Georgi2704
authored and
Ruben van Leeuwen
committed
Translations proof of concept, work in progress
1 parent ddfe42f commit a0c8c62

File tree

23 files changed

+325
-110
lines changed

23 files changed

+325
-110
lines changed

‎frontend/apps/example/messages/en-GB.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"footer": {
3+
"cancel": "Cancel",
4+
"send": "Send CUSTOM",
5+
"reset": "Reset",
6+
"notModifiedYet": "The form has not been modified yet",
7+
"notFilledYet": "The form has not been filled in yet"
8+
},
9+
"renderForm": {
10+
"loading": "Form is loading...",
11+
"successfullySent": "Your submission has been successfully received"
12+
}
13+
}

‎frontend/apps/example/messages/nl-NL.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"footer": {
3+
"cancel": "Annuleren",
4+
"send": "Verzenden CUSTOM",
5+
"reset": "Resetten",
6+
"notModifiedYet": "Het formulier is nog niet aangepast",
7+
"notFilledYet": "Het formulier is nog niet ingevuld"
8+
},
9+
"renderForm" : {
10+
"loading": "Formulier wordt geladen...",
11+
"successfullySent": "'Je inzending is succesvol ontvangen'"
12+
}
13+
}

‎frontend/apps/example/next.config.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import type { NextConfig } from 'next';
1+
import {NextConfig} from 'next';
2+
import createNextIntlPlugin from 'next-intl/plugin';
23

3-
const nextConfig: NextConfig = {
4-
/* config options here */
5-
};
4+
const nextConfig: NextConfig = {};
65

7-
export default nextConfig;
6+
const withNextIntl = createNextIntlPlugin();
7+
export default withNextIntl(nextConfig);

‎frontend/apps/example/src/app/[locale]/layout.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { Metadata } from 'next';
2+
import localFont from 'next/font/local';
3+
import {NextIntlClientProvider} from 'next-intl';
4+
5+
import '../globals.css';
6+
import {notFound} from "next/navigation";
7+
import {hasLocale} from "next-intl";
8+
import {routing} from "@/i18n/routing";
9+
10+
const geistSans = localFont({
11+
src: '../fonts/GeistVF.woff',
12+
variable: '--font-geist-sans',
13+
weight: '100 900',
14+
});
15+
const geistMono = localFont({
16+
src: '../fonts/GeistMonoVF.woff',
17+
variable: '--font-geist-mono',
18+
weight: '100 900',
19+
});
20+
21+
export const metadata: Metadata = {
22+
title: 'Pydantic forms example app',
23+
description: 'Generates forms from Pydantic models',
24+
};
25+
26+
export default async function RootLayout({
27+
children,
28+
params
29+
}: Readonly<{
30+
children: React.ReactNode;
31+
params: { locale: string };
32+
}>) {
33+
const {locale} = await params;
34+
if (!hasLocale(routing.locales, locale)) {
35+
notFound();
36+
}
37+
38+
const messages = (await import(`../../../messages/${locale}.json`)).default;
39+
40+
console.log('locale', locale);
41+
console.log("MESSAGE HERE", messages);
42+
43+
44+
return (
45+
<html lang={locale}>
46+
<body className={`${geistSans.variable} ${geistMono.variable}`}>
47+
<NextIntlClientProvider locale={locale} messages={messages}>
48+
{children}
49+
</NextIntlClientProvider>
50+
</body>
51+
</html>
52+
);
53+
}

frontend/apps/example/src/app/page.tsx renamed to frontend/apps/example/src/app/[locale]/page.tsx

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client';
22

3+
import { useParams } from 'next/navigation';
34
import {
45
PydanticForm,
56
PydanticFormFieldFormat,
@@ -14,9 +15,17 @@ import type {
1415

1516
import { TextArea } from '@/fields';
1617

17-
import styles from './page.module.css';
18+
import NLnl from '../../../messages/nl-NL.json';
19+
import styles from '../page.module.css';
20+
21+
export default function Home({
22+
messages,
23+
}: {
24+
messages: Record<string, string>;
25+
}) {
26+
const params = useParams();
27+
const locale = params?.locale as string; // Get locale from URL params
1828

19-
export default function Home() {
2029
const pydanticFormApiProvider: PydanticFormApiProvider = async ({
2130
requestBody,
2231
}) => {
@@ -74,9 +83,12 @@ export default function Home() {
7483
];
7584
};
7685

86+
// const translations = getMessages(locale);
87+
// console.log('NEW translations', translations);
88+
7789
return (
7890
<div className={styles.page}>
79-
<h1 style={{ marginBottom: '20px' }}>Pydantic Form</h1>
91+
<h1 style={{ marginBottom: '20px' }}>Pydantic Form ({locale})</h1>
8092

8193
<PydanticForm
8294
id="theForm"
@@ -91,7 +103,7 @@ export default function Home() {
91103
labelProvider: pydanticLabelProvider,
92104
customDataProvider: pydanticCustomDataProvider,
93105
componentMatcher: componentMatcher,
94-
translations : {} // key-value thing this will override the messages
106+
translations: NLnl,
95107
}}
96108
/>
97109
</div>

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

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎frontend/apps/example/src/i18n/navigation.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {createNavigation} from 'next-intl/navigation';
2+
import {routing} from './routing';
3+
4+
// Lightweight wrappers around Next.js' navigation
5+
// APIs that consider the routing configuration
6+
export const {Link, redirect, usePathname, useRouter, getPathname} =
7+
createNavigation(routing);

‎frontend/apps/example/src/i18n/request.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {getRequestConfig} from 'next-intl/server';
2+
import {hasLocale} from 'next-intl';
3+
import {routing} from './routing';
4+
5+
export default getRequestConfig(async ({requestLocale}) => {
6+
// Typically corresponds to the `[locale]` segment
7+
const requested = await requestLocale;
8+
console.log('requested', requested);
9+
const locale = hasLocale(routing.locales, requested)
10+
? requested
11+
: routing.defaultLocale;
12+
13+
return {
14+
locale,
15+
messages: (await import(`../../messages/${locale}.json`)).default
16+
};
17+
});

‎frontend/apps/example/src/i18n/routing.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {defineRouting} from 'next-intl/routing';
2+
3+
export const routing = defineRouting({
4+
// A list of all locales that are supported
5+
locales: ['en-GB', 'nl-NL'],
6+
7+
// Used when no locale matches
8+
defaultLocale: 'en-GB'
9+
});

‎frontend/apps/example/src/middleware.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import createMiddleware from 'next-intl/middleware';
2+
import {routing} from './i18n/routing';
3+
4+
export default createMiddleware(routing);
5+
6+
export const config = {
7+
// Match all pathnames except for
8+
// - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
9+
// - … the ones containing a dot (e.g. `favicon.ico`)
10+
matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
11+
};

0 commit comments

Comments
 (0)