feat: Added documentation for OHIF-v3 (#2450)

* Added docs with new screenshots

* Added doc to architecture

* Added documentations to various extension modules

* Added more documentation to modes

* Added docs to managers

* Added docs for services

* Fixed deployment docs

* Added white labelling documentation

* Added i18n docs and measurement export

docs/latest/viewer/internationalization.md

@@ -15,6 +15,16 @@ where is the main instance of i18n containing several languages and tools.
   </div>
 </div>
 
+
+## How to change language for the viewer?
+You can take a look into user manuals to see how to change the viewer's language.
+In summary you can change the language:
+
+- In the preference modals
+- Using the language query in the URL: `lng=Test-LNG`
+
+
+
 ## Installing
 
 ```bash
@@ -63,35 +73,27 @@ This section will introduce you to [react-i18next](https://react.i18next.com/)
 basics and show how to implement the [t](https://www.i18next.com/overview/api#t)
 function easily.
 
-#### Using HOCs
 
-In most cases we used
-[High Order Components](https://react.i18next.com/latest/withtranslation-hoc) to
-share the `t` function among OHIF's components.
+#### Using Hooks
+You can use `useTranslation` hooks that is provided by `react-i18next`
+
+
+You can read more about this [here](https://react.i18next.com/latest/usetranslation-hook).
 
-E.g.
 
 ```js
 import React from 'react';
-import { withTranslation } from '@ohif/i18n';
+import { useTranslation } from 'react-i18next';
+
+
+function MyComponent() {
+  const { t } = useTranslation();
 
-function MyComponent({ t, i18n }) {
   return <p>{t('my translated text')}</p>;
 }
 
-export default withTranslation('MyNameSpace')(MyComponent);
 ```
 
-> Important: if you are using React outside the OHIF Viewer, check the
-> [I18nextProvider](#using-outside-of-ohif-viewer) section, `withTranslation`
-> HOC doesnt works without a I18nextProvider
-
-#### Using Hooks
-
-Also, it's possible to get the `t` tool using
-[React Hooks](https://react.i18next.com/latest/usetranslation-hook), but it
-requires at least React > 16.8 😉
-
 ### Using outside of OHIF viewer
 
 OHIF Viewer already sets a main
@@ -147,6 +149,10 @@ becomes a new namespace automatically.
 - Header: translations related to OHIF's Header Top Bar
 - MeasurementTable - Translations for the `@ohif/ui` Measurement Table
 - UserPreferencesModal - Translations for the `@ohif/ui` Preferences Modal
+- Modals - Translations available for other modals
+- PatientInfo - Translations for patients info hover
+- SidePanel - Translations for side panels
+- ToolTip - Translations for tool tips
 
 ### How to use another NameSpace inside the current NameSpace?
 
@@ -154,7 +160,7 @@ i18next provides a parsing feature able to get translations strings from any
 NameSpace, like this following example getting data from `Common` NameSpace:
 
 ```
-$t(Common:Reset)
+$t('Common:Reset')
 ```
 
 ## Extending Languages in @ohif/i18n
@@ -239,7 +245,7 @@ To set a brand new language you can do it in two different ways:
 
 - Setting it only in your project or extension:
 
-You'll need a a final object like the following, what is setting French as
+You'll need a final object like the following, what is setting French as
 language, and send it to `addLocales` method.
 
 ```js
@@ -275,6 +281,15 @@ You can also set them manually, one by one, using this
 
 ---
 
+
+
+## Test Language
+We have created a test language that its translations can be seen in the locales folder. You can copy paste the folder and its `.json` namespaces and add your custom
+language translations.
+
+> If you apply the test-LNG you can see all the elements get appended with 'Test {}'.
+> For instance `Study list` becomes `Test Study list`.
+
 ## Language Detections
 
 @ohif/i18n uses