Support Localization

app/package.json

@@ -7,9 +7,12 @@
     "@material-ui/icons": "^4.2.1",
     "@svgr/cli": "^4.3.2",
     "axios": "^0.19.0",
+    "i18next": "^20.1.0",
+    "i18next-browser-languagedetector": "^6.1.0",
     "react": "^16.8.6",
     "react-beautiful-dnd": "^11.0.5",
     "react-dom": "^16.8.6",
+    "react-i18next": "^11.8.11",
     "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.0.1",

app/src/components/DeleteSnackbar.js

@@ -1,8 +1,8 @@
-
 import React, { Component } from "react";
 import {message} from '../utils/messages';
 import { Button } from '@material-ui/core';
 import Snackbar from '@material-ui/core/Snackbar';
+import i18n from '../translate/i18n'
 
 class DeleteSnackbar extends Component {
     handleUndoSnack() {
@@ -30,7 +30,7 @@ class DeleteSnackbar extends Component {
                         color="secondary"
                         size="small"
                         onClick={() => this.handleUndoSnack()}>
-                        Desfazer
+                        {i18n.t('delete_snackbar')}
                     </Button>
                 ]}
             />

app/src/components/DeletionConfirmationDialog.js

@@ -1,10 +1,10 @@
-
 import React from "react";
 import { message } from '../utils/messages';
 import { Button } from '@material-ui/core';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import i18n from '../translate/i18n'
 
 const DeletionConfirmationDialog = ({ dialog_status, handleClose, deleteItem }) => {
     return (
@@ -19,14 +19,14 @@ const DeletionConfirmationDialog = ({ dialog_status, handleClose, deleteItem })
                     color="primary"
                     onClick={() => handleClose(false)}
                 >
-                    Cancelar
+                    {i18n.t('delete_confirmation_dialog.cancel')}
                     </Button>
                 <Button
                     autoFocus
                     color="primary"
                     onClick={() => deleteItem()}
                 >
-                    Apagar
+                    {i18n.t('delete_confirmation_dialog.delete')}
                     </Button>
             </DialogActions>
         </Dialog>

app/src/components/ExampleStory.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import Typography from '@material-ui/core/Typography';
 import { IntentBalloon, UtterFirstBalloon, UtterBalloon } from '../styles/exampleBalloon';
 import { message } from '../utils/messages';
+import i18n from '../translate/i18n'
 
 const styles = {
     title: {
@@ -85,7 +86,7 @@ class ExampleStory extends Component {
         return (
             <div style={styles.container}>
                 <Typography variant="body2" style={styles.title} color="primary">
-                    {this.props.content.length !== 0 ? "Exemplo:" : message.no_examples}
+                    {this.props.content.length !== 0 ? i18n.t('example_story') : message.no_examples}
                 </Typography>
                 {this.getExamples()}
             </div>

app/src/components/IntentForm.js

@@ -9,6 +9,7 @@ import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import Typography from '@material-ui/core/Typography';
 import SnackbarDelete from './DeleteSnackbar'
+import i18n from '../translate/i18n'
 
 import { Creators as IntentAction } from "../ducks/intents";
 
@@ -110,7 +111,7 @@ class IntentForm extends Component {
               <div style={style.new_question} tabIndex={0}
                 onClick={() => { this.handleClick() }}
               >
-                <Typography variant="body2">Nova pergunta</Typography>
+                <Typography variant="body2">{i18n.t('intent_form.new_question')}</Typography>
               </div>
             </Grid>
             <Grid item xs={1} />

app/src/components/ListFilter.js

@@ -3,6 +3,7 @@ import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 import Divider from '@material-ui/core/Divider';
 import ItemsList from "./ItemsList";
+import i18n from '../translate/i18n'
 
 import SearchIcon from '@material-ui/icons/Search';
 import CloseIcon from '@material-ui/icons/Close';
@@ -79,7 +80,7 @@ export default class ListFilter extends Component {
           <TextField
             fullWidth
             type="text"
-            label="Filtrar"
+            label={i18n.t('list_filter')}
             variant="outlined"
             value={this.state.value}
             style={style.field_form}

app/src/components/MenuNavbar.js

@@ -5,6 +5,7 @@ import UtterIcon from '../icons/UtterIcon';
 import IntentIcon from '../icons/IntentIcon';
 import { Tab, Tabs } from '@material-ui/core';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
+import i18n from '../translate/i18n'
 
 import AppIcon from '../icons/AppIcon';
 import Button from '@material-ui/core/Button';
@@ -75,9 +76,9 @@ export default function MenuNavbar() {
               value={value}
               onChange={handleChange}
               centered>
-              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<StoryIcon />} label="Diálogos" to="/" component={Link} />
-              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<IntentIcon />} label="Perguntas" to="/intents/new" component={Link} />
-              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<UtterIcon />} label="Respostas" to="/utters/new" component={Link} />
+              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<StoryIcon />} label={i18n.t('menu_nav_bar.stories')} to="/" component={Link} />
+              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<IntentIcon />} label={i18n.t('menu_nav_bar.intents')} to="/intents/new" component={Link} />
+              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<UtterIcon />} label={i18n.t('menu_nav_bar.utters')} to="/utters/new" component={Link} />
             </Tabs>
           <Button
             color="secondary"

app/src/components/ToolbarName.js

@@ -10,6 +10,7 @@ import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import InfoIcon from '@material-ui/icons/InfoOutlined';
 import Tooltip from '@material-ui/core/Tooltip';
+import i18n from '../translate/i18n'
 
 const style = {
     toolbar: {
@@ -18,7 +19,7 @@ const style = {
     },
 }
 
-const options = ['Apagar']
+const options = [i18n.t('toolbar_name.delete')]
 
 export default class ToolbarName extends Component {
     constructor(props) {
@@ -43,7 +44,7 @@ export default class ToolbarName extends Component {
                     options.map(option => (
                         <MenuItem
                             key={option}
-                            selected={option === 'Apagar'}
+                            selected={option === i18n.t('toolbar_name.delete')}
                             onClick={() => this.handleDelete()}
                         >
                             {option}
@@ -126,7 +127,7 @@ export default class ToolbarName extends Component {
                         disabled={!this.props.is_enabled}
                         onClick={() => this.handleClick()}
                     >
-                        <Done />Gravar
+                        <Done /> {i18n.t('toolbar_name.save')}
                     </Button>
 
                     {this.getDeleteOption()}

app/src/components/UtterForm.js

@@ -9,6 +9,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import TextField from '@material-ui/core/TextField';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
+import i18n from '../translate/i18n'
 
 import { Creators as UtterAction } from '../ducks/utters';
 import { DialogBoxPrimary, DialogBoxSecondary, NewPrimaryDialog, NewSecondaryDialog } from '../styles/dialog';
@@ -152,10 +153,10 @@ class UtterForm extends Component {
             <Grid item xs={10}>
               {this.props.multiple_alternatives ?
                 <NewPrimaryDialog onClick={() => { this.handleClick() }}>
-                    <Typography variant="body1">Novo balão de resposta</Typography>
+                    <Typography variant="body1">{i18n.t('uttter_form.new_balloon')}</Typography>
                 </NewPrimaryDialog> :
                 <NewSecondaryDialog onClick={() => { this.handleClick() }}>
-                    <Typography variant="body1">Novo balão de resposta</Typography>
+                    <Typography variant="body1">{i18n.t('uttter_form.new_balloon')}</Typography>
                 </NewSecondaryDialog>
               }
             </Grid>

app/src/pages/StoriesPage.js

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import { Creators as StoryAction } from '../ducks/stories';
 import SearchIcon from '@material-ui/icons/Search';
 import CloseIcon from '@material-ui/icons/Close';
+import i18n from '../translate/i18n'
 
 import { Add } from '../styles/button';
 import { Link } from 'react-router-dom';
@@ -65,15 +66,15 @@ class StoriesPage extends Component {
         <Grid item xs={9}>
           <Link to='/stories/new' style={{ textDecoration: 'none' }}>
             <Button color="primary" variant="contained" style={style.create_button}>
-              <Add />Criar novo diálogo
+              <Add /> {i18n.t('stories_page.create_dialogue')}
             </Button>
           </Link>
         </Grid>
         <Grid item xs={3}>
           <TextField
             fullWidth
             type="text"
-            label="Filtrar"
+            label={i18n.t('stories_page.filter')}
             value={this.state.value}
             variant="outlined"
             InputProps={{ endAdornment: this.getFilterIcon() }}

app/src/pages/StoryEditPage.js

@@ -21,6 +21,7 @@ import DeletionConfirmationDialog from '../components/DeletionConfirmationDialog
 import { message } from '../utils/messages';
 import { Add } from '../styles/button';
 import { Link } from 'react-router-dom';
+import i18n from '../translate/i18n'
 
 const style = {
     grid_item_list: {
@@ -137,7 +138,7 @@ class StoryEditPage extends Component {
                     <Grid container direction='row' style={style.grid_item_list}>
                         <Grid item xs={2} sm={6} style={style.list_container_intent}>
                             <Typography variant="body2" color="primary">
-                                Perguntas
+                                {i18n.t('stories_edit_page.itents')}
                             </Typography>
                             <ItemsList
                                 story={true}
@@ -151,7 +152,7 @@ class StoryEditPage extends Component {
                         </Grid>
                         <Grid item xs={2} sm={6} style={style.list_container_utter}>
                             <Typography variant="body2" color="primary">
-                                Respostas
+                                {i18n.t('stories_edit_page.utters')}
                             </Typography>
                             <ItemsList
                                 story={true}
@@ -170,7 +171,7 @@ class StoryEditPage extends Component {
                             <TextField
                                 fullWidth
                                 type="text"
-                                label="Filtrar"
+                                label={i18n.t('stories_edit_page.filter')}
                                 variant="outlined"
                                 value={this.state.value}
                                 InputProps={{ endAdornment: this.getFilterIcon() }}

app/src/translate/i18n.js

@@ -0,0 +1,25 @@
+// Importando as dependências
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+// import { initReactI18next } from 'react-i18next'
+
+// NO PRÓXIMO PASSO EU MOSTRO AS TRADUÇÕES
+// Buscando as nossas traduções da pasta locales (nome e local da pasta é você quem decide)
+import messages from './languages'
+
+// Configuração i18n
+const i18nConfig = {
+  resources: messages,  // resources são as nossas traduções
+  fallbackLng: 'pt',     // fallbackLng é o idioma padrão caso o browser não consiga detectar sozinho
+  defaultNS: 'translations' // defaultNS é o namespace padrão, podemos usar 'translations'
+}
+
+// Não vou entrar no assunto namespaces, nem em configurações mais complexas
+// O objetivo é simplicidade
+
+i18n
+  .use(LanguageDetector) // Usa o detector de idioma do seu browser
+  //.use(initReactI18next) // Usa o pacote do i18n específico para React
+  .init(i18nConfig) // Usa nossas configurações
+
+export default i18n

app/src/translate/languages/en.js

@@ -0,0 +1,77 @@
+const messages = {
+  en: {
+    translations: { // Mesmo valor usado nas configurações (defaultNS)
+      menu_nav_bar: {
+        stories: 'Stories',
+        intents: 'Intents',
+        utters: 'Utters'
+      },
+      stories_page: {
+        create_dialogue: "Create new story",
+        filter: 'Filter'
+      },
+      stories_edit_page: {
+        itents: 'Intents',
+        utters: 'Utters',
+        filter: 'Filter'
+      },
+      deleted: "Item deleted",
+      no_result: "No items found",
+      repeated_name: "Try a different name, this one already exists",
+      no_special_char: "Use only letters without accents, numbers or _",
+      no_dialogs: "Click on intents and utters to set up a story",
+      delete_confirmation: "Delete item?",
+      delete_confirmation_dialog: {
+        delete: "Delete",
+        cancel: "Cancel"
+      },
+      delete_snackbar: "Undo",
+      exportar_conteudo: 'Export content',
+      story: {
+        created: "Story created",
+        deleted: "Story deleted",
+        updated: "Story updated",
+        create_button: "Create new story",
+        first_element: "Story must begin with an intent",
+        two_intents: "Add an utter after each intent",
+      },
+    intent: {
+        created: "Intent created",
+        deleted: "Intent deleted",
+        updated: "Updated intent",
+        toolbar_name: "Intent title",
+        list_filter: "Registered intents",
+        create_button: "Create new intent",
+        placeholder: "Ex: General_Greet, How_To_Register",
+        name_good_pratice: "To identify intents clearly, add the main subject and then the type of intent, separated by '_'",
+      },
+    utter: {
+        created: "Utter created",
+        deleted: "Utter deleted",
+        selection: "Balloons appear:",
+        sequence_text: "sequentially",
+        updated: "Utter updated",
+        toolbar_name: "Utter title",
+        create_button: "Create new utter",
+        list_filter: "Registered utters",
+        alternatives_text: "as alternatives",
+        placeholder: "Ex: Utter_General_Greet, Utter_How_To_Register",
+        name_good_pratice: "To identify utters clearly, use 'Utter_' and the title of the corresponding question, if any",
+      },
+      toolbar_name: {
+        save: "Save",
+        delete: "Delete"
+      },
+      list_filter: 'Filter',
+      intent_form: {
+        new_question: 'New intent'
+      },
+      uttter_form: {
+        new_balloon: 'New balloon'
+      },
+      example_story:  'Example:'
+    }
+  }
+}
+
+export { messages }

app/src/translate/languages/index.js

@@ -0,0 +1,11 @@
+// Por último, importamos tudo e exportamos um único objeto
+
+import { messages as ptBrTranslations } from './pt'
+import { messages as enUsTranslations } from './en'
+
+const messages={
+  ...ptBrTranslations,
+  ...enUsTranslations}
+
+
+export default messages