Webpack

package.json

@@ -9,7 +9,7 @@
   ],
   "style": "build/styles.css",
   "scripts": {
-    "build": "rollup -c",
+    "build": "webpack --mode production",
     "build-storybook": "build-storybook",
     "flow": "flow",
     "prepare": "npm run build",
@@ -18,46 +18,54 @@
   },
   "license": "ISC",
   "dependencies": {
-    "i18next": "^19.4.4",
-    "react": "^16.13.1",
     "react-color": "^2.18.1",
     "react-dnd": "^10.0.2",
     "react-dnd-html5-backend": "^10.0.2",
-    "react-dom": "^16.13.1",
     "react-google-maps": "^9.4.5",
-    "react-i18next": "^11.4.0",
     "react-uuid": "^1.0.2",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.2",
     "simple-keyboard": "^2.29.19",
     "simple-keyboard-layouts": "^1.12.82",
     "underscore": "^1.10.2"
   },
+  "peerDependencies": {
+    "i18next": "^19.4.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-i18next": "^11.4.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.6",
     "@babel/plugin-external-helpers": "^7.8.3",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
-    "@rollup/plugin-babel": "^5.0.0",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-node-resolve": "^7.1.3",
     "@storybook/addon-a11y": "^5.3.18",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-knobs": "^5.3.18",
     "@storybook/addon-links": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
     "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.5.3",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "flow-bin": "^0.123.0",
+    "i18next": "^19.4.4",
+    "path": "^0.12.7",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-i18next": "^11.4.0",
     "react-scripts": "^3.4.1",
-    "rollup": "^2.7.6",
-    "rollup-plugin-postcss": "^3.1.1"
+    "style-loader": "^1.2.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-node-externals": "^1.7.2"
   }
 }

src/i18n/i18n.js

@@ -1,5 +1,4 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
+import i18next from 'i18next';
 
 import en from './en.json';
 
@@ -9,16 +8,17 @@ const resources = {
   }
 };
 
+const i18n = i18next.createInstance();
+
 i18n
-  .use(initReactI18next)
   .init({
     debug: true,
     fallbackLng: 'en',
     lng: 'en',
     interpolation: {
-      escapeValue: false, // not needed for react as it escapes by default
+      escapeValue: false,
     },
     resources
-  });
+});
 
 export default i18n;

src/semantic-ui/AssociatedDropdown.js

@@ -1,10 +1,11 @@
 // @flow
 
 import React, { Component } from 'react';
-import { Button, Dropdown } from 'semantic-ui-react';
 import { withTranslation } from 'react-i18next';
+import { Button, Dropdown } from 'semantic-ui-react';
 import _ from 'underscore';
 import createEditModal from './EditModal';
+import i18n from '../i18n/i18n';
 import Timer from '../utils/Timer';
 import './AssociatedDropdown.css';
 
@@ -213,7 +214,7 @@ class AssociatedDropdown extends Component<Props, State> {
     return (
       <Button
         basic
-        content={this.props.t('Common.buttons.add')}
+        content={i18n.t('Common.buttons.add')}
         icon='plus'
         onClick={() => this.setState({ modalAdd: true })}
         type='button'
@@ -265,7 +266,7 @@ class AssociatedDropdown extends Component<Props, State> {
     return (
       <Button
         basic
-        content={this.props.t('Common.buttons.clear')}
+        content={i18n.t('Common.buttons.clear')}
         icon='times'
         onClick={this.onClear.bind(this)}
         type='button'
@@ -290,4 +291,4 @@ AssociatedDropdown.defaultProps = {
   upward: false
 };
 
-export default withTranslation()(AssociatedDropdown);
+export default AssociatedDropdown;

src/semantic-ui/ColorPickerModal.js

@@ -2,8 +2,8 @@
 
 import React, { Component } from 'react';
 import { SketchPicker } from 'react-color';
-import { withTranslation } from 'react-i18next';
 import { Button, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
 import './ColorPickerModal.css';
 
 type Props = {
@@ -58,7 +58,7 @@ class ColorPickerModal extends Component<Props, State> {
             size='medium'
             type='submit'
           >
-            { this.props.t('Common.buttons.save') }
+            { i18n.t('Common.buttons.save') }
           </Button>
           <Button
             inverted
@@ -67,12 +67,12 @@ class ColorPickerModal extends Component<Props, State> {
             size='medium'
             type='button'
           >
-            { this.props.t('Common.buttons.cancel') }
+            { i18n.t('Common.buttons.cancel') }
           </Button>
         </Modal.Actions>
       </Modal>
     );
   }
 }
 
-export default withTranslation()(ColorPickerModal);
+export default ColorPickerModal;

src/semantic-ui/DataTable.js

@@ -12,6 +12,7 @@ import {
 } from 'semantic-ui-react';
 import { Trans, withTranslation } from 'react-i18next';
 import _ from 'underscore';
+import i18n from '../i18n/i18n';
 import createEditModal from './EditModal';
 import './DataTable.css';
 
@@ -276,7 +277,7 @@ class DataTable extends Component<Props, State> {
 
     return (
       <Table.HeaderCell>
-        { this.props.t('DataTable.columns.actions') }
+        { i18n.t('DataTable.columns.actions') }
       </Table.HeaderCell>
     );
   }
@@ -298,7 +299,7 @@ class DataTable extends Component<Props, State> {
         onClick={this.onAddButton.bind(this)}
       >
         <Icon name='plus' />
-        { this.props.t('DataTable.buttons.add') }
+        { i18n.t('DataTable.buttons.add') }
       </Button>
     );
   }
@@ -408,7 +409,7 @@ class DataTable extends Component<Props, State> {
 
     return (
       <Confirm
-        content={this.props.t('DataTable.deleteContent')}
+        content={i18n.t('DataTable.deleteContent')}
         header={<Header icon='trash alternate outline' content={this.props.t('DataTable.deleteHeader')} />}
         onCancel={onCancel}
         onConfirm={onConfirm}
@@ -475,7 +476,7 @@ class DataTable extends Component<Props, State> {
    */
   renderEmptyMessage() {
     if (!(this.props.addButton && this.props.modal)) {
-      return this.props.t('DataTable.emptyList');
+      return i18n.t('DataTable.emptyList');
     }
 
     return (
@@ -600,7 +601,7 @@ class DataTable extends Component<Props, State> {
         sorted={this.props.sortColumn === column.name ? this.props.sortDirection : null}
         onClick={this.props.onColumnClick.bind(this, column)}
       >
-        { column.label && this.props.t(column.label) }
+        { column.label && i18n.t(column.label) }
       </Table.HeaderCell>
     );
   }
@@ -679,4 +680,4 @@ DataTable.defaultProps = {
   sortDirection: undefined
 };
 
-export default withTranslation()(DataTable);
+export default DataTable;

src/semantic-ui/EditModal.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 import { Button, Loader, Modal } from 'semantic-ui-react';
 import _ from 'underscore';
+import i18n from '../i18n/i18n';
 import './EditModal.css';
 
 type Props = {
@@ -155,19 +156,19 @@ function createEditModal(WrappedComponent, componentProps, initialState) {
 
         _.each(fieldErrors, (error) => {
           if (error === ERROR_UNIQUE) {
-            _.extend(validationErrors, { [key]: this.props.t('EditModal.errors.unique', { key, value }) });
+            _.extend(validationErrors, { [key]: i18n.t('EditModal.errors.unique', { key, value }) });
 
             validationErrors.push();
           } else if (error === ERROR_EMPTY) {
-            _.extend(validationErrors, { [key]: this.props.t('EditModal.errors.required', { key }) });
+            _.extend(validationErrors, { [key]: i18n.t('EditModal.errors.required', { key }) });
           } else if (componentProps.resolveValidationError) {
             _.extend(validationErrors, componentProps.resolveValidationError(error, this.state.item));
           }
         });
       });
 
       if (status === 400 && !_.keys(validationErrors).length) {
-        _.extend(validationErrors, { error: this.props.t('EditModal.errors.general') });
+        _.extend(validationErrors, { error: i18n.t('EditModal.errors.general') });
       }
 
       this.setState({ saving: false, validationErrors });
@@ -360,7 +361,7 @@ function createEditModal(WrappedComponent, componentProps, initialState) {
               size='medium'
               type='submit'
             >
-              { this.props.t('Common.buttons.save') }
+              { i18n.t('Common.buttons.save') }
               { this.renderLoader() }
             </Button>
             <Button
@@ -371,7 +372,7 @@ function createEditModal(WrappedComponent, componentProps, initialState) {
               size='medium'
               type='button'
             >
-              { this.props.t('Common.buttons.cancel') }
+              { i18n.t('Common.buttons.cancel') }
             </Button>
           </Modal.Actions>
         </WrappedComponent>
@@ -426,7 +427,7 @@ function createEditModal(WrappedComponent, componentProps, initialState) {
         }
 
         if (invalid) {
-          _.extend(validationErrors, { [key]: this.props.t('EditModal.errors.required', { key }) });
+          _.extend(validationErrors, { [key]: i18n.t('EditModal.errors.required', { key }) });
         }
       });
 

src/semantic-ui/FileUpload.js

@@ -2,8 +2,9 @@
 
 import React, { Component, createRef } from 'react';
 import { Icon, Message } from 'semantic-ui-react';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import _ from 'underscore';
+import i18n from '../i18n/i18n';
 import './FileUpload.css';
 
 type Props = {
@@ -71,7 +72,7 @@ class FileUpload extends Component<Props, State> {
       >
         <Message
           error
-          header={this.props.t('Common.errors.title')}
+          header={i18n.t('Common.errors.title')}
           hidden={!(this.state.errors && this.state.errors.length)}
           onDismiss={() => this.setState({ errors: null })}
           list={this.state.errors}
@@ -147,13 +148,13 @@ class FileUpload extends Component<Props, State> {
       // Files are invalid if they exceed the maximum size
       if (this.props.maxSize && file.size > this.props.maxSize) {
         valid = false;
-        errors.push(this.props.t('FileUpload.errors.maxSize', { name: file.name }));
+        errors.push(i18n.t('FileUpload.errors.maxSize', { name: file.name }));
       }
 
       // Files are invalid if they do not match the acceptable types
       if (this.filePattern && !file.name.match(this.filePattern)) {
         valid = false;
-        errors.push(this.props.t('FileUpload.errors.fileType', { name: file.name, type: /[^.]+$/.exec(file.name) }));
+        errors.push(i18n.t('FileUpload.errors.fileType', { name: file.name, type: /[^.]+$/.exec(file.name) }));
       }
 
       if (valid) {
@@ -167,4 +168,4 @@ class FileUpload extends Component<Props, State> {
   }
 }
 
-export default withTranslation()(FileUpload);
+export default FileUpload;

src/semantic-ui/KeyboardField.js

@@ -1,9 +1,9 @@
 // @flow
 
 import React, { Component } from 'react';
-import { withTranslation } from 'react-i18next';
 import { Form, Segment, Transition } from 'semantic-ui-react';
 import Keyboard from '../common/Keyboard';
+import i18n from '../i18n/i18n';
 import LinkLabel from './LinkLabel';
 import './KeyboardField.css';
 
@@ -125,8 +125,8 @@ class KeyboardField extends Component<Props, State> {
     return (
       <LinkLabel
         content={this.state.showKeyboard
-          ? this.props.t('KeyboardField.labels.hideKeyboard')
-          : this.props.t('KeyboardField.labels.showKeyboard')}
+          ? i18n.t('KeyboardField.labels.hideKeyboard')
+          : i18n.t('KeyboardField.labels.showKeyboard')}
         htmlFor={this.props.name}
         label={this.props.label}
         onClick={() => this.setState((state) => ({ showKeyboard: !state.showKeyboard }))}
@@ -142,4 +142,4 @@ KeyboardField.defaultProps = {
   id: ''
 };
 
-export default withTranslation()(KeyboardField);
+export default KeyboardField;