[feat] Add internationalization

[Kitenite]

Describe the feature

Requested languages:

• Chinese
• Japanese

[alexandreantunesmnds]

Hi @Kitenite can I work on this issue ?

[alexandreantunesmnds]

@Kitenite would you like something like that for this new feature ?

[drfarrell]

@Kitenite would you like something like that for this new feature ?

This would likely be set in the user settings page as the user would only need to access it once. 🌐

We can add a line for Language with a dropdown to select the language in the Settings page.

[Kitenite]

This would likely be set in the user settings page as the user would only need to access it once. 🌐

@drfarrell @alexandreantunesmnds it should be very easy to get to so I'm more in favor of having it on top but I could be wrong. Because you may accidentally toggle a language and need to revert easily.

This is also going to be complex engineering-wise. I would really like if there's a low effort way we can support translation earlier on such as adding automated translation. The more popular way is to actually wrap text in internationalization but it's going to take effort to maintain. https://github.com/i18next/react-i18next

@alexandreantunesmnds what are your thoughts on the correct approach moving forward?

[alexandreantunesmnds]

@drfarrell @Kitenite I can place the language selector in the user settings as suggested. However, I’m not entirely sure where the user settings section is located in the app—could you provide some guidance on this?

Regarding the technical approach, I’ve started by implementing react-i18next, as it seemed like the most structured way to manage translations. I’m less familiar with how an automated translation approach would work here, so I thought this would be the best starting point. Let me know if you have any specific ideas for handling automated translation or if you’d like me to continue with react-i18next.

[Kitenite]

@alexandreantunesmnds , the settings can be accessed be going out of the project view. I just realized that this was not accisible in dev mode. It is now as of https://github.com/onlook-dev/onlook/pull/754

react-i18next sounds like the right approach. What are your thoughts on making this maintainable and low foot-print? Seems like we'd have to wrap each of our existing string and extend support for any subsequent string?

[Kitenite]

@alexandreantunesmnds , I do want to note that this is far out on the roadmap since it will slow down development significantly. So even if we have the infrastructure in place, I don't think we will add language support right away. Just FYI since you're already spending time on this and I don't want you to feel that it'll go to waste.

[alexandreantunesmnds]

@Kitenite I would like to make a good first contribution to the project. Since translation is not currently a priority, I’d love to work on something else. Do you have any simple issues or tasks where I could start as a beginner? I’d appreciate any guidance or suggestions. Thank you very much!

[drfarrell]

Hey @alexandreantunesmnds we have a bunch of issues that could use your help:

This feature I'd really love to be solved – the Flexbox and Layout have been tricky for people to get used to and it'd be so nice to handle: https://github.com/onlook-dev/onlook/issues/567

This one is a particularly annoying bug that can probably be a quick solve: https://github.com/onlook-dev/onlook/issues/589

This one I just added a design for, and is a bit more intermediate: https://github.com/onlook-dev/onlook/issues/417

Feel free to comment on any of them that you'd like to work on them and we can assign you 👌

[alexandreantunesmnds]

Hey @drfarrell , thanks for sharing these! The first issue about Flexbox looks interesting to me. I’ll take a look at #567 and leave a comment if I have any questions.