Feature/translation

packages/code-editor/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@obsidians/file-ops": "^0.3.0",
+    "@obsidians/i18n": "^0.3.0",
     "@obsidians/notification": "^0.3.0",
     "@obsidians/ui-components": "^0.3.0",
     "color-convert": "^2.0.1",

packages/code-editor/src/CodeEditorCollection.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import { Tabs } from '@obsidians/ui-components'
 import fileOps from '@obsidians/file-ops'
+import { t } from '@obsidians/i18n'
 
 import MonacoEditorContainer from './MonacoEditor/MonacoEditorContainer'
 import modelSessionManager from './MonacoEditor/modelSessionManager'
@@ -83,8 +84,8 @@ export default class CodeEditorCollection extends Component {
 
     const { response } = await fileOps.current.showMessageBox({
       // title: `Do you want to save the changes you made for ${path}?`,
-      message: 'Your changes will be lost if you close this item without saving.',
-      buttons: ['Save', 'Cancel', `Don't Save`]
+      message: t('editor.lost'),
+      buttons: [t('button.save'), t('button.cancel'), t('button.dontSave')]
     })
     clicked = response
 

packages/code-editor/src/MonacoEditor/modelSessionManager/index.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import * as monaco from 'monaco-editor'
-import fileOps from '@obsidians/file-ops' 
+import fileOps from '@obsidians/file-ops'
 import notification from '@obsidians/notification'
+import { t } from '@obsidians/i18n'
 
 import MonacoEditorModelSession from './MonacoEditorModelSession'
 
@@ -25,7 +26,7 @@ class ModelSessionManager {
   constructor () {
     this._editorContainer = undefined
     this._editor = undefined
-    
+
     this.modeDetector = defaultModeDetector
     this.CustomTabs = {}
     this.customTabTitles = {}
@@ -72,7 +73,7 @@ class ModelSessionManager {
 
   async newModelSession (filePath, remote = false, mode = this.modeDetector(filePath)) {
     if (!filePath) {
-      throw new Error('Empty path for "newModelSession"')
+      throw new Error(t('editor.error.emptyPath'))
     }
 
     if (!this.sessions[filePath]) {
@@ -91,7 +92,7 @@ class ModelSessionManager {
 
   async saveFile (filePath) {
     if (!this.sessions[filePath]) {
-      throw new Error(`File "${filePath}" is not open in the current workspace.`)
+      throw new Error(t('editor.error.fileNotOpen', { path: filePath }))
     }
     this._editorContainer.fileSaving(filePath)
     await fileOps.current.writeFile(filePath, this.sessions[filePath].value)
@@ -100,34 +101,34 @@ class ModelSessionManager {
 
   async saveCurrentFile () {
     if (!this.currentFilePath) {
-      throw new Error('No current file open.')
+      throw new Error(t('editor.error.noFile'))
     }
     try {
       await this.saveFile(this.currentFilePath)
     } catch (e) {
       console.warn(e)
-      notification.error('Save Failed', e.message)
+      notification.error(t('editor.error.saveFailed'), e.message)
     }
   }
 
   undo () {
     if (!this.currentFilePath || !this.sessions[this.currentFilePath]) {
-      throw new Error('No current file open.')
+      throw new Error(t('editor.error.noFile'))
     }
     window.model = this.sessions[this.currentFilePath].model
     this.sessions[this.currentFilePath].model.undo()
   }
 
   redo () {
     if (!this.currentFilePath || !this.sessions[this.currentFilePath]) {
-      throw new Error('No current file open.')
+      throw new Error(t('editor.error.noFile'))
     }
     this.sessions[this.currentFilePath].model.redo()
   }
 
   delete () {
     if (!this.currentFilePath || !this.sessions[this.currentFilePath]) {
-      throw new Error('No current file open.')
+      throw new Error(t('editor.error.noFile'))
     }
     const model = this.sessions[this.currentFilePath].model
     if (this._editor) {
@@ -141,7 +142,7 @@ class ModelSessionManager {
 
   selectAll () {
     if (!this.currentFilePath || !this.sessions[this.currentFilePath]) {
-      throw new Error('No current file open.')
+      throw new Error(t('editor.error.noFile'))
     }
     const model = this.sessions[this.currentFilePath].model
     this._editor?.setSelection(model.getFullModelRange())

packages/code-editor/src/customTabs/Invalid.js

@@ -4,19 +4,21 @@ import {
   Container
 } from 'reactstrap'
 
+import { t } from '@obsidians/i18n'
+
 export default class Invalid extends Component {
   render () {
     const fullName = this.props.eosProject.fullName
     return (
       <div className='custom-tab bg2'>
         <Jumbotron style={{ background: 'transparent' }} className='text-light'>
           <Container>
-            <h1>Invalid Project</h1>
+            <h1>{t('editor.project.invalid')}</h1>
             <hr className='my-2' />
             <p className='lead'>
-              Cannot read project settings for <kbd>{fullName}</kbd>.
+              {t('editor.project.cantReadSetting')} <kbd>{fullName}</kbd>.
             </p>
-            <p className='lead'>Make sure you have the read/write permission for <kbd>xxxx</kbd>.</p>
+            <p className='lead'>{t('editor.project.makeSurePermission')} <kbd>xxxx</kbd>.</p>
           </Container>
         </Jumbotron>
       </div>

packages/code-editor/src/customTabs/Settings/index.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
+import { t } from '@obsidians/i18n'
 
 export default class Settings extends Component {
   render () {
     return (
       <div className='custom-tab bg2'>
         <div className='jumbotron bg-transparent text-body'>
           <div className='container'>
-            <h1>Project Settings</h1>
+            <h1>{t('editor.project.setting')}</h1>
           </div>
         </div>
       </div>

packages/code-editor/src/customTabs/index.js

@@ -1,3 +1,5 @@
+import { t } from '@obsidians/i18n'
+
 import modelSessionManager from '../MonacoEditor/modelSessionManager'
 
 import Markdown from './Markdown'
@@ -8,6 +10,6 @@ export function useBuiltinCustomTabs(tabs) {
     modelSessionManager.registerCustomTab('markdown', Markdown)
   }
   if (tabs.indexOf('settings') > -1) {
-    modelSessionManager.registerCustomTab('settings', Settings, 'Project Settings')
+    modelSessionManager.registerCustomTab('settings', Settings, t('editor.project.setting'))
   }
 }

packages/docker/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@obsidians/ipc": "^0.3.0",
     "@obsidians/file-ops": "^0.3.0",
+    "@obsidians/i18n": "^0.3.0",
     "@obsidians/notification": "^0.3.0",
     "@obsidians/platform": "^0.3.0",
     "@obsidians/terminal": "^0.3.0",

packages/docker/src/DockerImageInputSelector.js

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react'
 import {
   DropdownInput,
 } from '@obsidians/ui-components'
+import { t } from '@obsidians/i18n'
 
 import platform from '@obsidians/platform'
 
@@ -40,33 +41,33 @@ export default class DockerImageInputSelector extends PureComponent {
 
   badgeProps = selected => {
     if (this.state.loading) {
-      return { badge: <span key='loading'><i className='fas fa-spin fa-spinner mr-1' />Loading...</span> }
+      return { badge: <span key='loading'><i className='fas fa-spin fa-spinner mr-1' />{t('loading')}</span> }
     }
     if (!selected) {
       if (this.state.versions.length) {
-        return { badge: 'not selected', badgeColor: 'danger' }
+        return { badge: t('docker.badge.noSelect'), badgeColor: 'danger' }
       }
       return
     }
     if (!this.state.versions.find(v => v.id === selected) && !this.props.extraOptions?.find(i => i.id === selected)) {
-      return { badge: 'not installed', badgeColor: 'danger' }
+      return { badge: t('docker.badge.noInstall'), badgeColor: 'danger' }
     }
   }
 
   render () {
     let { versions } = this.state
 
-    let placeholder = `Select a version of ${this.props.noneName || this.imageName}`
+    let placeholder = t('docker.image.select', { name: this.props.noneName || this.imageName })
     if (!versions.length) {
-      placeholder = `(No ${this.props.noneName || this.imageName} installed)`
+      placeholder = t('docker.image.noInstall', { name: this.props.noneName || this.imageName })
       versions.push({ id: 'none', display: placeholder, disabled: true })
     }
 
     let options
     if (platform.isDesktop) {
       options = [
         {
-          group: <><i className='fas fa-download mr-1' />Installed</>,
+          group: <><i className='fas fa-download mr-1' />{t('docker.installed')}</>,
           children: this.state.versions,
         },
         {
@@ -78,7 +79,7 @@ export default class DockerImageInputSelector extends PureComponent {
     } else {
       options = [
         {
-          group: <><i className='fas fa-code-merge mr-1' />Versions</>,
+          group: <><i className='fas fa-code-merge mr-1' />{t('docker.image.versions')}</>,
           children: this.state.versions,
         }
       ]

packages/docker/src/DockerImageManager.js

@@ -5,6 +5,7 @@ import {
   Modal,
   DeleteButton,
 } from '@obsidians/ui-components'
+import { t } from '@obsidians/i18n'
 
 import DockerImageChannel from './DockerImageChannel'
 import DownloadImageButton from './DownloadImageButton'
@@ -67,14 +68,14 @@ export default class DockerImageManager extends PureComponent {
       return (
         <tr key='loading'>
           <td align='middle' colSpan={4}>
-            <i className='fas fa-spin fa-spinner mr-1' />Loading...
+            <i className='fas fa-spin fa-spinner mr-1' />{t('loading')}
           </td>
         </tr>
       )
     }
 
     if (!this.state.installed.length) {
-      const none = `(No ${this.props.noneName || this.props.imageName} installed)`
+      const none = t('docker.image.noInstall', { name: this.props.noneName || this.props.imageName })
       return (
         <tr>
           <td align='middle' colSpan={4}>{none}</td>
@@ -91,7 +92,7 @@ export default class DockerImageManager extends PureComponent {
           <td align='right'>
             <DeleteButton
               onConfirm={() => this.deleteVersion(v.Tag)}
-              textConfirm='Click again to uninstall'
+              textConfirm={t('docker.image.uninstallConfirm')}
             />
           </td>
         </tr>
@@ -102,8 +103,8 @@ export default class DockerImageManager extends PureComponent {
   render () {
     const imageName = this.channel.imageName
     const {
-      modalTitle = `${imageName} Manager`,
-      downloadingTitle = `Downloading ${imageName}`,
+      modalTitle = t('docker.image.manager', { name: imageName }),
+      downloadingTitle = t('docker.image.manager', { name: imageName }),
     } = this.props
 
     return (
@@ -123,9 +124,9 @@ export default class DockerImageManager extends PureComponent {
         <table className='table table-sm table-hover table-striped'>
           <thead>
             <tr>
-              <th style={{ width: '40%' }}>version</th>
-              <th style={{ width: '35%' }}>created</th>
-              <th style={{ width: '15%' }}>size</th>
+              <th style={{ width: '40%' }}>{t('docker.table.version')}</th>
+              <th style={{ width: '35%' }}>{t('docker.table.created')}</th>
+              <th style={{ width: '15%' }}>{t('docker.table.size')}</th>
               <th style={{ width: '10%' }} />
             </tr>
           </thead>

packages/docker/src/DockerImageSelector.js

@@ -6,6 +6,7 @@ import {
   DropdownMenu,
   DropdownItem,
 } from '@obsidians/ui-components'
+import { t } from '@obsidians/i18n'
 
 import platform from '@obsidians/platform'
 
@@ -43,12 +44,12 @@ export default class DockerImageSelector extends PureComponent {
   renderItems = () => {
     if (this.state.loading) {
       return (
-        <DropdownItem key='images-loading' disabled><i className='fas fa-spin fa-spinner mr-1' />Loading...</DropdownItem>
+        <DropdownItem key='images-loading' disabled><i className='fas fa-spin fa-spinner mr-1' />{t('loading')}</DropdownItem>
       )
     }
 
     if (!this.state.versions.length) {
-      const none = `(No ${this.props.noneName || this.imageName} installed)`
+      const none = t('docker.image.noInstall', { name: this.props.noneName || this.imageName })
       return (
         <DropdownItem key='images-none' disabled>{none}</DropdownItem>
       )
@@ -87,9 +88,9 @@ export default class DockerImageSelector extends PureComponent {
 
     if (!HeaderDockerItems) {
       if (platform.isDesktop) {
-        HeaderDockerItems = <><i className='far fa-desktop mr-2' />Installed</>
+        HeaderDockerItems = <><i className='far fa-desktop mr-2' />{t('docker.installed')}</>
       } else {
-        HeaderDockerItems = <><i className='fas fa-code-merge mr-1' />Versions</>
+        HeaderDockerItems = <><i className='fas fa-code-merge mr-1' />{t('docker.image.versions')}</>
       }
     }
 
@@ -106,7 +107,7 @@ export default class DockerImageSelector extends PureComponent {
           style={{ maxWidth: 240 }}
         >
           {icon}
-          {this.props.title || this.imageName} ({this.props.selected?.toString() || 'none'})
+          {this.props.title || this.imageName} ({this.props.selected?.toString() || t('none')})
         </DropdownToggle>
         <DropdownMenu right className={this.props.size === 'sm' && 'dropdown-menu-sm'}>
           {children}

packages/docker/src/DownloadImageButton.js

@@ -7,6 +7,7 @@ import {
   DropdownItem,
   UncontrolledButtonDropdown
 } from '@obsidians/ui-components'
+import { t } from '@obsidians/i18n'
 
 import Terminal from '@obsidians/terminal'
 
@@ -64,13 +65,13 @@ export default class DownloadImageButton extends PureComponent {
     if (loading) {
       return (
         <DropdownItem key='icon-loading-versions'>
-          <i className='fas fa-spin fa-spinner mr-1' />Loading...
+          <i className='fas fa-spin fa-spinner mr-1' />{t('loading')}
         </DropdownItem>
       )
     }
 
     if (!versions.length) {
-      return <DropdownItem disabled>(None)</DropdownItem>
+      return <DropdownItem disabled>({t('none')})</DropdownItem>
     }
 
     return versions.map(({ name }) => (
@@ -81,8 +82,8 @@ export default class DownloadImageButton extends PureComponent {
   render () {
     const imageName = this.channel.imageName
     const {
-      installDropdownHeader = 'Available Versions',
-      downloadingTitle = `Downloading ${imageName}`,
+      installDropdownHeader = t('docker.image.availableVersions'),
+      downloadingTitle = t('docker.image.downloading', { name: imageName }),
       size,
       color = 'secondary',
       right,
@@ -102,7 +103,7 @@ export default class DownloadImageButton extends PureComponent {
           color={color}
           onClick={() => this.fetchRemoteVersions()}
         >
-          <i className='fas fa-download mr-1' />Install
+          <i className='fas fa-download mr-1' />{t('docker.install')}
         </DropdownToggle>
         <DropdownMenu right={right}>
           <DropdownItem header>{installDropdownHeader}</DropdownItem>