Parse theme from querystring, put on util. Moment from require()

We also fully set up i18n and put it on util as well as making
it available on windows.i18n for Backbone views.

js/react/conversation/Message.md

@@ -1,6 +1,6 @@
 
 ```jsx
-<util.MessageParents theme="android">
+<util.MessageParents theme={util.theme}>
   <Message />
 </util.MessageParents>
 ```

js/react/util/BackboneWrapper.md

@@ -11,7 +11,7 @@ const View = Whisper.MessageView;
 const options = {
   model,
 };
-<util.MessageParents theme="android">
+<util.MessageParents theme={util.theme}>
   <util.BackboneWrapper
     View={View}
     options={options}

js/react/util/MessageParents.md

@@ -2,7 +2,7 @@
 The simplest example of using the `<MessagesParents />` component:
 
 ```jsx
-<util.MessageParents theme="android">
+<util.MessageParents theme={util.theme}>
   <div>Just a plain bit of text</div>
 </util.MessageParents>
 ```

js/react/util/index.ts

@@ -1,3 +1,6 @@
+import qs from 'qs';
+import moment from 'moment';
+
 // Helper components used in the styleguide, exposed at 'util' in the global scope via the
 //   context option in react-styleguidist.
 
@@ -38,6 +41,38 @@ export {
 // Required, or TypeScript complains about adding keys to window
 const parent = window as any;
 
+const query = window.location.search.replace(/^\?/, '');
+const urlOptions = qs.parse(query);
+const theme = urlOptions.theme || 'android';
+const locale = urlOptions.locale || 'en';
+
+// @ts-ignore
+import localeMessages from '../../../_locales/en/messages.json';
+
+// @ts-ignore
+import { setup } from '../../i18n';
+
+const i18n = setup(locale, localeMessages);
+
+export {
+  theme,
+  locale,
+  i18n,
+};
+
+
+parent.i18n = i18n;
+parent.moment = moment;
+
+parent.moment.updateLocale(locale, {
+  relativeTime: {
+    h: parent.i18n('timestamp_h'),
+    m: parent.i18n('timestamp_m'),
+    s: parent.i18n('timestamp_s'),
+  },
+});
+parent.moment.locale(locale);
+
 parent.React = React;
 parent.ReactDOM = ReactDOM;
 

package.json

@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@sindresorhus/is": "^0.8.0",
+    "@types/qs": "^6.5.1",
     "archiver": "^2.1.1",
     "blob-util": "^1.3.0",
     "blueimp-canvas-to-blob": "^3.14.0",
@@ -122,6 +123,7 @@
     "node-sass-import-once": "^1.2.0",
     "nsp": "^3.2.1",
     "nyc": "^11.4.1",
+    "qs": "^6.5.1",
     "react-docgen-typescript": "^1.2.6",
     "react-styleguidist": "^7.0.1",
     "sinon": "^4.4.2",

styleguide.config.js

@@ -44,9 +44,6 @@ module.exports = {
         {
           src: 'test/legacy_bridge.js',
         },
-        {
-          src: 'node_modules/moment/min/moment-with-locales.min.js',
-        },
         {
           src: 'js/components.js',
         },

yarn.lock

@@ -44,6 +44,10 @@
   version "8.9.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.9.4.tgz#dfd327582a06c114eb6e0441fa3d6fab35edad48"
 
+"@types/qs@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.5.1.tgz#a38f69c62528d56ba7bd1f91335a8004988d72f7"
+
 "@types/react-dom@^16.0.4":
   version "16.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.4.tgz#2e8fd45f5443780ed49bf2cdd9809e6091177a7d"
@@ -7010,7 +7014,7 @@ qs@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-5.2.0.tgz#a9f31142af468cb72b25b30136ba2456834916be"
 
-qs@6.5.1, qs@~6.5.1:
+qs@6.5.1, qs@^6.5.1, qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"