Is there a good way to add new localization/translations by providing the necessary text?

[Atif-Rafique]

First of all, thank you guys for providing and improving Kepler day by day. I've been working with Kepler from almost 1 year, understood how its communicating with different parts of app from a technical and user perspective is truly amazing 🤩

Back to the point;

Is your feature request related to a problem? Please describe.
I'm having a hard time understanding how can I provide/setup my own custom translation/localization for Kepler.
Means I want to add a new language which is currently not available in Kepler's default translation i-e ca,cn,en,es,fi,ja,pt and ru.

Let's assume some "ab" language. I created/modifies the LOCALES values and provide it to the <MapControl /> component; the same way Kepler is doing.

export const LOCALES = {
  en: 'English',
  fi: 'Suomi',
  pt: 'Português',
  es: 'Español',
  ca: 'Català',
  ja: '日本語',
  cn: '简体中文',
  ru: 'Русский',
  ab: 'AB'
};

const LOCALE_CODES_ARRAY = Object.keys(LOCALE_CODES);

 <MapControl
            mapState={mapState}
            datasets={datasets}
            availableLocales={LOCALE_CODES_ARRAY}
            ...
            >
  ...
 </MapControl>

I created my own translation file for ab language. and make it according to the Kepler's expectation.

But when I try to change language in Kepler, it just displays the fallback ids not the translated text.

Describe the solution you'd like
I want Kepler to accepts additional locales and new translated text in the same way as its accepts availableLocales={LOCALE_CODES_ARRAY} .

Example:

 <MapControl
            mapState={mapState}
            datasets={datasets}
            availableLocales={LOCALE_CODES_ARRAY} // contains new one as well
            availableLocalesText={LOCALE_TEXT} // {en: {text1: 'English', more}, ...}
            ...
            >
  ...
 </MapControl>

I know there's a prop of Kepler that accepts localMessages, but it only works for languages that are already supported by Kepler, not new ones.

Describe alternatives you've considered
My hacky alternative approach right now is to fool Kepler 🥲.
For instance, I use the es key as placeholder/mask for the ab locale. This means that when I change my language in Kepler to es, it will use my custom ab translation rather than the actual translation of es. (assuming the translation file for ab is already configured)

Additional context

Also please note that my locale changes in redux as well i-e in Kepler UiState and my localization object is well configured and structured the same way as others but with change text.