Enable localization injection from outside for all texts

[fredicious]

Summary

It would be nice to avoid hard-coded English texts, and allow localization.

Examples

example of hard-coded English text: https://github.com/mui/toolpad/blob/master/packages/toolpad-core/src/SignInPage/SignInPage.tsx#L349

Motivation

I am building a dashboard in another language.

Search keywords: localize, translate, lang

[bharatkashyap]

Agreed. A LocaleContext already exists internally and is consumed by the Account and related components: https://mui.com/toolpad/core/react-account/#labels

We can extend the LocaleContextType to include every label across components, and add an optional defaultLocaleText prop on the AppProvider and consume the LocaleContext inside the AppProvider instead of Account.

[Janpot]

We can model it after the X implementation. See https://mui.com/x/react-date-pickers/localization/

@fredicious Which languages did you have in mind and are you open to contribute translations for them?

[gil-obradors]

As it is a first case, if no one else starts working on it, I would take care of it myself, but in two weeks' time.
@Janpot Regardless of who starts the work, once done I can contribute with Spanish and Catalan.

[Alexandre-Voinier-Afleya]

I'm interested by this feature, I can contribute with French.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@fredicious How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[gil-obradors]

Hi @bharatkashyap,
I have already done the translations of ca and es
I need to create a index.ts inside locales folder, otherwise it won't export my locales neither commited hiIn localization

My locales folder:

• ca|en|es|hiIn.tsx
• getLocalization.ts
• index.ts

My index.ts file:

export { default as ca } from "./ca"
export { default as es } from "./es"
export { default as en } from "./en"
export { default as hiIN} from './hiIN'

In Spanish

Catalan:

Is index.ts the correct way?