Add typescript guard to the i18next key used on buttons in "ui" project

[charIeszhao]

In Logto monorepo, there's a sub-package/project called "ui", which holds the forms used in sign-in main flows.

Moreover, we use react-i18next as the i18n solution, and the phrases we used in "ui" are located in "phrases-ui" project.

The issue is, however, even though we are using react-i18next key phrases in "ui", the Button component does not enforce the usage of the i18n key, as the button text is passed in as the children of Button component.

This leaves potential risks that someone may forget to use i18n for new buttons created, and uses a string value instead.

Expected behavior: We need to enforce the usage of i18n keys defined in "phrases-ui" on Button components in "ui" project. You can refer to the Button component in "console" project, which builds the admin console, and migrate the component logic to "ui".

Or, ultimately, you can extract the Button component to "shared" project, and use it across different projects under the same "Logto" monorepo. (This is not required to complete the task, but a bonus item.)

[5war00p]

@charIeszhao Can I take up this?

[charIeszhao]

@charIeszhao Can I take up this?

Sure! Ticket assigned to you. Thanks!