Merged PR 225: Implement translations

Implement translations with useContext in React
+Add events to allow changing the language in the app
+Refactor AppEvents
+Redesign vertical bars in elements

src/Components/UI/UI.tsx

@@ -16,6 +16,7 @@ import { UseWorker, UseAsync } from './UseWorker';
 import { FindContainerById } from '../../utils/itertools';
 import { IEditorState } from '../../Interfaces/IEditorState';
 import { GetCurrentHistoryState } from '../Editor/Editor';
+import { Text } from '../Text/Text';
 
 export interface IUIProps {
   editorState: IEditorState
@@ -95,14 +96,14 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
 
   switch (selectedSidebar) {
     case SidebarType.Components:
-      leftSidebarTitle = 'Components';
+      leftSidebarTitle = Text({ textId: '@Components' });
       leftChildren = <Components
         selectedContainer={selectedContainer}
         componentOptions={configuration.AvailableContainers}
         categories={configuration.Categories}
         buttonOnClick={methods.addContainer}
       />;
-      rightSidebarTitle = 'Elements';
+      rightSidebarTitle = Text({ textId: '@Elements' });
       rightChildren = <ElementsList
         containers={current.containers}
         mainContainer={mainContainer}
@@ -115,12 +116,12 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
       break;
 
     case SidebarType.Symbols:
-      leftSidebarTitle = 'Symbols';
+      leftSidebarTitle = Text({ textId: '@SymbolsLeft' });
       leftChildren = <Symbols
         componentOptions={configuration.AvailableSymbols}
         buttonOnClick={methods.addSymbol}
       />;
-      rightSidebarTitle = 'Symbols';
+      rightSidebarTitle = Text({ textId: '@SymbolsRight' });
       rightChildren = <SymbolsSidebar
         selectedSymbolId={current.selectedSymbolId}
         symbols={current.symbols}
@@ -130,7 +131,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
       break;
 
     case SidebarType.History:
-      leftSidebarTitle = 'Timeline';
+      leftSidebarTitle = Text({ textId: '@Timeline' });
       leftChildren = <History
         history={editorState.history}
         historyCurrentStep={editorState.historyCurrentStep}
@@ -139,7 +140,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
       break;
 
     case SidebarType.Messages:
-      leftSidebarTitle = 'Messages';
+      leftSidebarTitle = Text({ textId: '@Messages' });
       leftChildren = <Messages
         historyState={current}
         messages={messages}
@@ -148,7 +149,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
       break;
 
     case SidebarType.Settings:
-      leftSidebarTitle = 'Settings';
+      leftSidebarTitle = Text({ textId: '@Settings' });
       leftChildren = <Settings
         saveEditorAsJSON={methods.saveEditorAsJSON}
         saveEditorAsSVG={methods.saveEditorAsSVG}