Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>

library/modules/i18next/README.md

@@ -0,0 +1,14 @@
+---
+title: i18next Module
+hide_title: true
+---
+# i18next Module
+
+Module for using [i18next](https://www.i18next.com) in Noodl.
+The module has three nodes, _i18next_, _Language Bundle_ and _Translation_.
+
+- i18next node is used to keep track of current language and to change the language
+- Language Bundle holds the resources (i.e. localized texts) for a specific language
+- Translation retrieves the correct translation for a specific string (identified by a key) from the currently selected language. If the current language changes, all strings are updated accordingly.
+
+An example with the most common cases can be found [here](/library/examples/localization).

library/modules/i18next/i18next-node.md

@@ -0,0 +1,26 @@
+---
+title: i18next
+hide_title: true
+---
+
+<##head##>
+# i18next
+
+This is used to register bundles and to set and get the current language.
+<##head##>
+
+## Inputs
+
+**Language**  
+This is a string input that is used to specify the current language. It should be a language code that matches a langugage in the bundle.
+
+**ChangeLanguage**  
+This signal is used in combination with **Language** to set a new current language. The **Language** string should be a language code, and is matched to a language bundle. For example `en` for English.
+
+## Outputs
+
+**LanguageChanged**  
+This is triggered when the current language is changed, as a result of a signal received on **ChangeLanguage**. This is useful if your application needs to take action when the language is changed.
+
+**CurrentLanguage**  
+Contains the language code of the currently set language.

library/modules/i18next/language-bundle.md

@@ -0,0 +1,58 @@
+---
+title: LanguageBundle
+hide_title: true
+---
+
+<##head##>
+# LanguageBundle
+
+The language bundle contains the translations for a language. If you have multiple languages you will have one LanguageBundle for each language and they generally should contain the same strings, translated to the respective language.
+
+Each language bundle also has a "Namespace". This can be used to separate different parts of translations to different bundles that can be loaded at different times. For example you can have one bundle for static UI-texts called "UI" and one bundle for texts that are dynamically loaded based on content in the database called "Dbtexts". If you support two languages, English and Spanish, this would mean that you have four language bundle nodes: UI and Dbtexts for English and Spanish.
+
+The bundle itself is a JSON-object, as described on [i18next website](https://www.i18next.com/translation-function/essentials). It contains `key:string` pairs for each text. It can also include an inner structure (JSON objects) to help organize strings based on features. Aa bundle for English could look like this:
+
+```json
+{
+  "loginpage":{
+    "user_name":"User Name",
+    "confirm_button":{
+      "label":"Confirm",
+      "hover_text":"Press here to confirm"
+    }
+}
+```
+
+In this example the key `loginpage.confirm_button.hover_text` would identify the button hover text translation when used in a Translation node.
+Note that i18next supports various dynamic features in the texts, e.g. plurals, date formats, etc. These are generally supported when used in Noodl.
+
+There are typically two ways to use Language Bundles. For static texts, for example UI texts, you edit the bundle object directly in Noodl (pressing the "Edit" button on the property panel). As you build the UI you add new texts to the bundle. You have one bundle per language. For dynamic texts, for example loaded during execution from a database, you programatically create bundle objects and load them into the **LanguageBundle** when available and using the AddBundleObject input.
+<##head##>
+
+## Inputs
+
+**Language**  
+The language that this bundle applies to. Typically a language code string, e.g. `en`.
+
+**Namespace**  
+The name of the Namespace. Can by any string.
+
+**AddResource**  
+A signal to add a specific resource to the bundle. This is used for dynamic language string, e.g. when reading content from a database.
+
+**ResourceKey**  
+The resource key that will be added when the **AddResource** signal is received.
+
+**ResourceValue**  
+The resource value that will be associated with the **ResourceKey** when the **AddResource** signal is received.
+
+**AddBundleObject**  
+This signal is used to add a complete bundle object to the language bundle. This is typically used to dynamically add language resources to a bundle e.g. when fetching from a database.
+
+**Resource Bundle Object**  
+The object (a javascript object) that will be added to the language bundle when the **AddBundleObject** signal is received.
+
+## Outputs
+
+**BundleLoaded**  
+Triggered when a new bundle object has been loaded.

library/modules/i18next/translation.md

@@ -0,0 +1,32 @@
+---
+title: Translation
+hide_title: true
+---
+
+<##head##>
+# Translation
+
+This is the node where the translation happens. You typically connect these to your **Text** nodes and **Text Input** nodes. Translation nodes automatically change their output if language changes, if the bundle is changing, and when it becomes available.
+
+There are two dynamic features in the Translation node:
+
+- If your translation includes some of i18next dynamic features, for example having a `{{count}}` variable deciding between a plural string or not, or by inserting variables in the middle of the string, any variables used can be added as inputs on the Translation node, and be connected to other nodes in Noodl. For example if a translation uses the variable `{{count}}` adding an input named "count" and connecting it to a Number node, the translation will change when the Number node is updated.
+
+- The name of the key can be dynamic. In most cases the key of a translation is known when building the app, but there are cases when the name of the key is only known during runtime. For example, in a database with thousands of products and related texts translated to multiple languages, the translations are generated when needed. The name of the keys are also generated dynamically. A product with an id `xyz123abc` may have its translations stored in an object named `xyz123abc`, `{"xyz123abc":{"label":"Product A", "desc":"A great product"}}`. By using dynamic naming of the key in a Translation node, using the {}-pattern, the actual key can be resolved at runtime. In this scenario naming the Key in the translation node `{product_id}.label`, will expose a new input to the Translation node called "product_id" that can be connected to a Model node in Noodl.
+<##head##>
+
+## Inputs
+
+**Key**  
+The key of the translation. This can be a static text or a text including one or more variables using `{var}` syntax. Variables will become available as inputs.
+
+**Namespace**  
+The namespace that this translation is using. Should match a namespace of a Language Bundle.
+
+### Variables
+You can also add custom inputs to the translation node. They will be mapped to variables in the translated text itself (`{{var}}`) to make use of the i18next transformation functionality, such as plurals.
+
+## Outputs
+
+**Translation**  
+This translated and formatted text string.