Localize first elements

Costumes and Sound tab strings.

package.json

@@ -55,6 +55,7 @@
     "react": "15.5.4",
     "react-dom": "15.5.4",
     "react-draggable": "2.2.6",
+    "react-intl": "2.3.0",
     "react-modal": "1.7.7",
     "react-redux": "5.0.5",
     "react-style-proptype": "3.0.0",

src/components/asset-panel/selector.jsx

@@ -1,5 +1,6 @@
 const PropTypes = require('prop-types');
 const React = require('react');
+const {FormattedMessage} = require('react-intl');
 
 const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx');
 
@@ -33,7 +34,7 @@ const Selector = props => {
                 ))}
             </Box>
             <Box className={styles.newButtons}>
-                {buttons.map(({text, img, onClick}, index) => (
+                {buttons.map(({message, img, onClick}, index) => (
                     <Box
                         className={styles.newButton}
                         key={index}
@@ -44,7 +45,7 @@ const Selector = props => {
                             src={img}
                         />
                         <Box className={styles.newButtonLabel}>
-                            {text}
+                            <FormattedMessage {...message} />
                         </Box>
                     </Box>
                 ))}
@@ -55,7 +56,11 @@ const Selector = props => {
 
 Selector.propTypes = {
     buttons: PropTypes.arrayOf(PropTypes.shape({
-        text: PropTypes.string.isRequired,
+        message: PropTypes.shape({
+            id: PropTypes.string.isRequired,
+            defaultMessage: PropTypes.string,
+            description: PropTypes.string
+        }),
         img: PropTypes.string.isRequired,
         onClick: PropTypes.func.isRequired
     })),

src/containers/costume-tab.jsx

@@ -1,6 +1,7 @@
 const PropTypes = require('prop-types');
 const React = require('react');
 const bindAll = require('lodash.bindall');
+const {defineMessages} = require('react-intl');
 
 const VM = require('scratch-vm');
 
@@ -61,18 +62,30 @@ class CostumeTab extends React.Component {
             return null;
         }
 
-        const addText = target.isStage ? 'Add Backdrop' : 'Add Costume';
+        const messages = defineMessages({
+            addBackdrop: {
+                id: 'action.addBackdrop',
+                defaultMessage: 'Add Backdrop',
+                description: 'Button to add a backdrop in the editor tab'
+            },
+            addCostume: {
+                id: 'action.addCostume',
+                defaultMessage: 'Add Costume',
+                description: 'Button to add a costume in the editor tab'
+            }
+        });
+
+        const addMessage = target.isStage ? messages.addBackdrop : messages.addCostume;
         const addFunc = target.isStage ? onNewBackdropClick : onNewCostumeClick;
 
         return (
             <AssetPanel
                 buttons={[{
-                    text: addText,
+                    message: addMessage,
                     img: addCostumeIcon,
                     onClick: addFunc
                 }]}
                 items={target.costumes || []}
-                newText={addText}
                 selectedItemIndex={this.state.selectedCostumeIndex}
                 onDeleteClick={this.handleDeleteCostume}
                 onItemClick={this.handleSelectCostume}

src/containers/sound-tab.jsx

@@ -1,6 +1,7 @@
 const PropTypes = require('prop-types');
 const React = require('react');
 const bindAll = require('lodash.bindall');
+const {defineMessages} = require('react-intl');
 
 const VM = require('scratch-vm');
 
@@ -74,14 +75,27 @@ class SoundTab extends React.Component {
             }
         )) : [];
 
+        const messages = defineMessages({
+            recordSound: {
+                id: 'action.recordSound',
+                defaultMessage: 'Record Sound',
+                description: 'Button to record a sound in the editor tab'
+            },
+            addSound: {
+                id: 'action.addSound',
+                defaultMessage: 'Add Sound',
+                description: 'Button to add a sound in the editor tab'
+            }
+        });
+
         return (
             <AssetPanel
                 buttons={[{
-                    text: 'Record Sound',
+                    message: messages.recordSound,
                     img: addSoundFromRecordingIcon,
                     onClick: onNewSoundFromRecordingClick
                 }, {
-                    text: 'Add Sound',
+                    message: messages.addSound,
                     img: addSoundFromLibraryIcon,
                     onClick: onNewSoundFromLibraryClick
                 }]}

src/index.jsx

@@ -1,6 +1,7 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
 const {Provider} = require('react-redux');
+const {IntlProvider} = require('react-intl');
 const {createStore, applyMiddleware} = require('redux');
 const throttle = require('redux-throttle').default;
 
@@ -68,6 +69,8 @@ const store = applyMiddleware(
 );
 ReactDOM.render((
     <Provider store={store}>
-        <App />
+        <IntlProvider locale="en">
+            <App />
+        </IntlProvider>
     </Provider>
 ), appTarget);