Add script to extract locale strings

package.json

@@ -13,6 +13,7 @@
     "url": "https://github.com/plotly/react-plotly.js-editor/issues"
   },
   "scripts": {
+    "find-strings": "babel-node utils/findLocaleStrings.js",
     "make:lib": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
     "make:lib:css": "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
     "make:dist": "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
@@ -39,10 +40,13 @@
   ],
   "devDependencies": {
     "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-traverse": "^6.26.0",
     "babelify": "^7.3.0",
     "browserify": "^14.5.0",
     "classnames": "^2.2.5",

src/DefaultEditor.js

@@ -387,7 +387,7 @@ class DefaultEditor extends Component {
                   <Info>
                     {_(
                       'The positioning inputs are relative to the ' +
-                        'anchor points on the text box'
+                        'anchor points on the text box.'
                     )}
                   </Info>
                   <Radio

src/components/fields/Field.js

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import MenuPanel from '../containers/MenuPanel';
 import classnames from 'classnames';
 import {bem, localize} from '../../lib';
-import {multiValueText} from '../../lib/constants';
+import {getMultiValueText} from '../../lib/constants';
 
 class Field extends Component {
   renderPostfix() {
@@ -48,10 +48,12 @@ class Field extends Component {
         <div className={fieldClass}>
           {children}
           {multiValued ? (
-            <MenuPanel label={_(multiValueText.title)} ownline question>
-              <div className="info__title">{_(multiValueText.title)}</div>
-              <div className="info__text">{_(multiValueText.text)}</div>
-              <div className="info__sub-text">{_(multiValueText.subText)}</div>
+            <MenuPanel label={getMultiValueText('title', _)} ownline question>
+              <div className="info__title">{getMultiValueText('title', _)}</div>
+              <div className="info__text">{getMultiValueText('text', _)}</div>
+              <div className="info__sub-text">
+                {getMultiValueText('subText', _)}
+              </div>
             </MenuPanel>
           ) : null}
         </div>

src/components/widgets/ColorPicker.js

@@ -49,7 +49,7 @@ const CustomColorPicker = localize(
     return (
       <div>
         <div>
-          <p className="colorpicker__title">{_('Custom colors')}</p>
+          <p className="colorpicker__title">{_('Custom Colors')}</p>
           <div className="colorpicker__saturation">
             <Saturation {...props} />
           </div>
@@ -72,7 +72,7 @@ const CustomColorPicker = localize(
           </div>
         </div>
         <div>
-          <p className="colorpicker__title">{_('Default colors')}</p>
+          <p className="colorpicker__title">{_('Default Colors')}</p>
           <div className="colorpicker__preset-colors">
             <PresetColors colors={defaultColors} onClick={onChangeComplete} />
           </div>

src/components/widgets/text_editors/RichText/LinkEditor.js

@@ -89,7 +89,7 @@ class LinkEditor extends Component {
   render() {
     const {position} = this.state;
     const {onBlur, onFocus, linkURL, localize: _} = this.props;
-    const placeholderText = _('Enter link URL');
+    const placeholderText = _('Enter Link URL');
     const urlText = _('URL');
 
     return (

src/lib/constants.js

@@ -13,14 +13,19 @@ export const MULTI_VALUED = '\x1bMIXED_VALUES';
 // how mixed values are represented in text inputs
 export const MULTI_VALUED_PLACEHOLDER = '---';
 
-export const multiValueText = {
-  title: 'Multiple Values',
-  text:
-    'This input has multiple values associated with it. ' +
-    'Changing this setting will override these custom inputs.',
-  subText:
-    "Common Case: An 'All' tab might display this message " +
-    'because the X and Y tabs contain different settings.',
+export const getMultiValueText = (key, _) => {
+  const multiValueText = {
+    title: _('Multiple Values'),
+    text: _(
+      'This input has multiple values associated with it. ' +
+        'Changing this setting will override these custom inputs.'
+    ),
+    subText: _(
+      "Common Case: An 'All' tab might display this message " +
+        'because the X and Y tabs contain different settings.'
+    ),
+  };
+  return multiValueText[key];
 };
 
 export const EDITOR_ACTIONS = {