[core] [i18n] Add interpolation to translation keys

CHANGELOG.md

@@ -57,7 +57,7 @@ A big thanks to the 10 contributors who made this release possible. Here are som
 - Fix redirection to GitHub example view (#4642) @oliviertassinari
 - Fix build errors with Next.js 14 (#4594) @bharatkashyap
 
-## CLI
+### CLI
 
 - Refactor CLI setup (#4597) @bharatkashyap
 - Fix package.json pretty print (#4644) @rkristelijn

docs/data/toolpad/core/components/sign-in-page/LocaleSignInPage.js

@@ -4,9 +4,9 @@ import { SignInPage } from '@toolpad/core/SignInPage';
 import hiIN from '@toolpad/core/locales/hiIN';
 
 const providers = [
-  { id: 'github', name: 'GitHub' },
-  { id: 'google', name: 'Google' },
-  { id: 'credentials', name: 'Email and Password' },
+  { id: 'github', name: 'गिटहब' },
+  { id: 'google', name: 'गूगल' },
+  { id: 'credentials', name: 'ईमेल और पासवर्ड' },
 ];
 
 const signIn = async (provider) => {
@@ -28,7 +28,9 @@ export default function LocaleSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        localeText={{ signInTitle: 'लॉग इन करें' }}
+        localeText={{
+          providerSignInTitle: (provider) => `${provider} से साइन इन करें`,
+        }}
       />
     </AppProvider>
     // preview-end

docs/data/toolpad/core/components/sign-in-page/LocaleSignInPage.tsx

@@ -8,9 +8,9 @@ import {
 import hiIN from '@toolpad/core/locales/hiIN';
 
 const providers = [
-  { id: 'github', name: 'GitHub' },
-  { id: 'google', name: 'Google' },
-  { id: 'credentials', name: 'Email and Password' },
+  { id: 'github', name: 'गिटहब' },
+  { id: 'google', name: 'गूगल' },
+  { id: 'credentials', name: 'ईमेल और पासवर्ड' },
 ];
 
 const signIn: (provider: AuthProvider) => void | Promise<AuthResponse> = async (
@@ -34,7 +34,9 @@ export default function LocaleSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        localeText={{ signInTitle: 'लॉग इन करें' }}
+        localeText={{
+          providerSignInTitle: (provider: string) => `${provider} से साइन इन करें`,
+        }}
       />
     </AppProvider>
     // preview-end

docs/data/toolpad/core/components/sign-in-page/LocaleSignInPage.tsx.preview

@@ -4,6 +4,8 @@
   <SignInPage
     signIn={signIn}
     providers={providers}
-    localeText={{ signInTitle: 'लॉग इन करें' }}
+    localeText={{
+      providerSignInTitle: (provider: string) => `${provider} से साइन इन करें`,
+    }}
   />
 </AppProvider>

docs/data/toolpad/core/introduction/base-concepts.md

@@ -197,7 +197,12 @@ If you pass a locale text through the `AppProvider` or the theme, and you provid
  
 
 ```tsx
-<AppProvider localeText={{ signInTtle: 'Sign In', accountPreviewTitle: 'Account' }}>
+<AppProvider
+  localeText={{
+    signInTtle: (brandingTitle: string) => `Sign In with ${brandingTitle}`,
+    accountPreviewTitle: 'Account',
+  }}
+>
   <Account
     localeText={{
       accountPreviewTitle: 'compte',
@@ -228,3 +233,17 @@ function CustomMenu() {
   // ...
 }
 ```
+
+### Interpolation
+
+Some [localization keys](https://github.com/mui/toolpad/blob/v0.13.0/packages/toolpad-core/src/AppProvider/LocalizationProvider.tsx#L7) allow interpolation:
+
+```tsx
+<SignInPage
+  signIn={signIn}
+  providers={providers}
+  localeText={{
+    providerSignInTitle: (provider: string) => `${provider} से साइन इन करें`,
+  }}
+/>
+```

packages/toolpad-core/src/AppProvider/LocalizationProvider.tsx

@@ -14,11 +14,9 @@ export interface LocaleText {
   accountPreviewTitle: string;
 
   // SignInPage
-  signInTitle: string;
+  signInTitle: string | ((brandingTitle?: string) => string);
   signInSubtitle: string;
-  oauthSignInTitle: string;
-  passkeySignInTitle: string;
-  magicLinkSignInTitle: string;
+  providerSignInTitle: (provider: string) => string;
   signInRememberMe: string;
 
   // Common authentication labels

packages/toolpad-core/src/SignInPage/SignInPage.test.tsx

@@ -33,7 +33,7 @@ describe('SignInPage', () => {
 
     const emailField = screen.getByRole('textbox', { name: 'Email' });
     const passwordField = screen.getByLabelText(/Password/);
-    const signInButton = screen.getByRole('button', { name: 'Sign in' });
+    const signInButton = screen.getByRole('button', { name: 'Sign in with credentials' });
 
     await userEvent.type(emailField, 'john@example.com');
     await userEvent.type(passwordField, 'thepassword');
@@ -55,7 +55,7 @@ describe('SignInPage', () => {
     render(<SignInPage signIn={signIn} providers={[{ id: 'nodemailer', name: 'Email' }]} />);
 
     const emailField = screen.getByRole('textbox', { name: 'Email' });
-    const signInButton = screen.getByRole('button', { name: 'Sign in with Email' });
+    const signInButton = screen.getByRole('button', { name: 'Sign in with email' });
 
     await userEvent.type(emailField, 'john@example.com');
     await userEvent.click(signInButton);

packages/toolpad-core/src/SignInPage/SignInPage.tsx

@@ -137,9 +137,10 @@ const IconProviderMap = new Map<SupportedAuthProvider, React.ReactNode>([
 ]);
 
 interface SignInPageLocaleText {
-  signInTitle: string;
+  signInTitle: string | ((brandingTitle?: string) => string);
   signInSubtitle: string;
   signInRememberMe: string;
+  providerSignInTitle: (provider: string) => string;
   email: string;
   password: string;
   or: string;
@@ -282,8 +283,10 @@ export interface SignInPageProps {
 }
 
 const defaultLocaleText: Pick<LocaleText, keyof SignInPageLocaleText> = {
-  signInTitle: 'Sign in',
+  signInTitle: (brandingTitle?: string) =>
+    brandingTitle ? `Sign in to ${brandingTitle}` : 'Sign in',
   signInSubtitle: 'Please sign in to continue',
+  providerSignInTitle: (provider: string) => `Sign in with ${provider}`,
   signInRememberMe: 'Remember me',
   email: 'Email',
   password: 'Password',
@@ -374,8 +377,9 @@ function SignInPage(props: SignInPageProps) {
                 fontWeight: 600,
               }}
             >
-              {localeText.signInTitle}{' '}
-              {branding?.title ? `${localeText.to?.toLocaleLowerCase()} ${branding.title}` : null}
+              {typeof localeText.signInTitle === 'string'
+                ? localeText.signInTitle
+                : localeText.signInTitle(branding?.title)}
             </Typography>
           )}
           {slots?.subtitle ? (
@@ -429,11 +433,7 @@ function SignInPage(props: SignInPageProps) {
                         }}
                         {...slotProps?.oAuthButton}
                       >
-                        <span>
-                          {localeText.oauthSignInTitle ||
-                            `${localeText.signInTitle} ${localeText.with}`}{' '}
-                          {provider.name}
-                        </span>
+                        <span>{localeText.providerSignInTitle(provider.name)}</span>
                       </Button>
                     </form>
                   );
@@ -504,9 +504,7 @@ function SignInPage(props: SignInPageProps) {
                       }}
                       {...slotProps?.submitButton}
                     >
-                      {localeText.passkeySignInTitle ||
-                        `${localeText.signInTitle} ${localeText.with}`}{' '}
-                      {passkeyProvider.name || localeText.passkey}
+                      {localeText.providerSignInTitle(passkeyProvider.name || localeText.passkey)}
                     </Button>
                   )}
                 </Box>
@@ -583,9 +581,9 @@ function SignInPage(props: SignInPageProps) {
                       }}
                       {...slotProps?.submitButton}
                     >
-                      {localeText.magicLinkSignInTitle ||
-                        `${localeText.signInTitle} ${localeText.with}`}{' '}
-                      {localeText.email}
+                      {localeText.providerSignInTitle(
+                        (emailProvider.name || localeText.email).toLocaleLowerCase(),
+                      )}
                     </Button>
                   )}
                 </Box>
@@ -712,7 +710,9 @@ function SignInPage(props: SignInPageProps) {
                       }}
                       {...slotProps?.submitButton}
                     >
-                      {localeText.signInTitle}
+                      {localeText.providerSignInTitle(
+                        (credentialsProvider.name || localeText.password).toLocaleLowerCase(),
+                      )}
                     </Button>
                   )}
 

packages/toolpad-core/src/locales/en.tsx

@@ -11,12 +11,11 @@ const en: LocaleText = {
   accountPreviewIconButtonLabel: 'Current User',
 
   // SignInPage
-  signInTitle: 'Sign In',
+  signInTitle: (brandingTitle?: string) =>
+    brandingTitle ? `Sign in to ${brandingTitle}` : 'Sign in',
   signInSubtitle: 'Welcome user, please sign in to continue',
   signInRememberMe: 'Remember Me',
-  oauthSignInTitle: 'Sign in with OAuth',
-  passkeySignInTitle: 'Sign in with Passkey',
-  magicLinkSignInTitle: 'Sign in with Magic Link',
+  providerSignInTitle: (provider: string) => `Sign in with ${provider}`,
 
   // Common authentication labels
   email: 'Email',

packages/toolpad-core/src/locales/hiIN.tsx

@@ -11,12 +11,11 @@ const hiINLabels: Partial<LocaleText> = {
   accountPreviewIconButtonLabel: 'वर्तमान उपयोगकर्ता',
 
   // SignInPage
-  signInTitle: 'साइन इन करें',
+  signInTitle: (brandingTitle?: string) =>
+    brandingTitle ? `${brandingTitle} में साइन इन करें ` : `साइन इन करें`,
   signInSubtitle: 'स्वागत है उपयोगकर्ता, कृपया जारी रखने के लिए साइन इन करें',
   signInRememberMe: 'मुझे याद रखें',
-  oauthSignInTitle: 'साइन इन विकल्प',
-  passkeySignInTitle: 'साइन इन विकल्प',
-  magicLinkSignInTitle: 'साइन इन विकल्प',
+  providerSignInTitle: (provider: string) => `${provider} से साइन इन करें`,
 
   // Common authentication labels
   email: 'ईमेल',

scripts/generateProptypes.ts

@@ -56,6 +56,7 @@ async function generateProptypes(
     project,
     shouldResolveObject: ({ name }) => {
       const propsToNotResolve = ['localeText'];
+
       if (propsToNotResolve.includes(name)) {
         return false;
       }