Merge branch 'release/v1.0.0' into stable

Author: chriscox

.lesshintrc

@@ -0,0 +1,6 @@
+{
+  "fileExtensions": [".less", ".css"],
+  "idSelector": false,
+  "importantRule": false,
+  "zeroUnit": false
+}

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.0.0
+
+Remixer v1.0.0 Release.
+
 ## 0.7.0
 
 Note: Versioning bumped in sync with [material-remixer](https://www.npmjs.com/package/material-remixer) dependency.

README.md

@@ -4,20 +4,33 @@
 
 [![Build Status](https://travis-ci.org/material-foundation/material-remixer-remote-web.svg?branch=develop)](https://travis-ci.org/material-foundation/material-remixer-remote-web) [![npm version](https://badge.fury.io/js/material-remixer-remote-web.svg)](https://badge.fury.io/js/material-remixer-remote-web)
 
-If enabled, the variables defined in your app will be exposed on a remote controller website that you can set up using Firebase hosting. Share the link to this site with your teammates from within the Remixer overlay or by emailing them. The remote controller allows updating the defined variables, and changes will be propagated in real-time across associated apps.
-
-If you are interested in using Remixer in another platform, you may want to check out the [iOS](https://github.com/material-foundation/material-remixer-ios), [Android](https://github.com/material-foundation/material-remixer-android), and [JavaScript](https://github.com/material-foundation/material-remixer-js) repos. With any of the three platforms you can use this Remote Controller to change the variables from a web dashboard.
-
-**New to Remixer?** Visit our [main repo](https://github.com/material-foundation/material-remixer) to get a full description of what it is and how it works.
+The Remixer variables defined in your app can be exposed on a remote controller
+website that you can set up using Firebase hosting. The remote controller allows
+updating your defined variables, and changes will be propagated in real-time
+across associated apps. Share the link to this site with your teammates from
+within the Remixer overlay or by emailing them.
+
+If you are interested in using Remixer on another platform, you may want to
+check out the [iOS](https://github.com/material-foundation/material-remixer-ios),
+[Android](https://github.com/material-foundation/material-remixer-android),
+and [JavaScript](https://github.com/material-foundation/material-remixer-js)
+repos. You can use this Remote Controller with any of these three platforms to
+change the variables from a web dashboard.
+
+**New to Remixer?** Visit our [main repo](https://github.com/material-foundation/material-remixer)
+to get a full description of what it is and how it works.
 - - -
 
 ## Quickstart
 
 #### 1. Sign up for Firebase.
 
-Remixer remote will work with any new or existing Firebase account. It will use the [Firebase Hosting](https://firebase.google.com/docs/hosting/) feature to host this remote controller. If you don't have an existing Firebase account you wish to use, you can signup following instructions [here](https://firebase.google.com).
+Remixer remote will work with any new or existing Firebase account. It will use
+the [Firebase Hosting](https://firebase.google.com/docs/hosting/) feature to
+host this remote controller. If you don't have an existing Firebase account you
+wish to use, you can signup following instructions [here](https://firebase.google.com).
 
-#### 2. Use `npm` to install the necessary dependencies.
+#### 2. Use [`npm`](https://www.npmjs.com/) to install the necessary dependencies.
 
 ```bash
 # Run the following script from root of this repo
@@ -26,7 +39,8 @@ npm install
 
 #### 3. Add your Firebase credentials.
 
-Add your Firebase credentials to the `index.html` file located in the `src` folder.
+Add your Firebase credentials to the `index.html` file located in the `src`
+folder.
 
 ```javascript
 // TODO: Replace with your project's info.
@@ -39,10 +53,12 @@ var config = {
 
 #### 4. Build and deploy the library to your Firebase Hosting account.
 
-Running the following script will generate a new `public` folder first with all of the required files. It will then copy these files to your Firebase Hosting storage.
+Running the following script will generate a new `public` folder first with all
+of the required files. It will then copy these files to your Firebase Hosting
+storage.
 
 ```bash
-# Run the following script from root of this repo
+# Run the following script from root of this repo.
 npm run deploy -- --project=<PROJECT_ID>
 ```
 
@@ -53,13 +69,22 @@ The Remixer remote controller will now be available at:
 https://<PROJECT_ID>.firebaseapp.com/<REMOTE_ID>
 ```
 
-## Is material-foundation affiliated with Google?
+## Contributing to Remixer Remote for Web
+
+We're excited you want to contribute to the project! Please read these docs so
+we can get your contributions submitted quickly.
 
-Yes, the [material-foundation](https://github.com/material-foundation) organization is one of Google's new homes for tools and frameworks related to our [Material Design](https://material.io) system. Please check out our blog post [Design is Never Done](https://design.google.com/articles/design-is-never-done/) for more information regarding Material Design and how Remixer integrates with the system.
+- [Contribution policy and guidelines](https://github.com/material-foundation/material-remixer-remote-web/blob/develop/CONTRIBUTING.md)
+- [Developing Remixer Remote for Web](https://github.com/material-foundation/material-remixer-remote-web/blob/develop/docs/developing.md)
 
-## Contributing
+## Is material-foundation affiliated with Google?
 
-We gladly welcome contributions! If you have found a bug, have questions, or wish to contribute, please follow our [Contributing Guidelines](https://github.com/material-foundation/material-remixer-remote-web/blob/develop/CONTRIBUTING.md).
+Yes, the [material-foundation](https://github.com/material-foundation)
+organization is one of Google's new homes for tools and frameworks related to
+our [Material Design](https://material.io) system. Please check out our blog
+post [Design is Never Done](https://design.google.com/articles/design-is-never-done/)
+for more information regarding Material Design and how Remixer integrates with
+the system.
 
 ## License
 

docs/developing.md

@@ -0,0 +1,73 @@
+# Developing Remixer Remote for Web
+
+### Setting up your development environment
+
+First you'll need a recent version of [Node.js](https://nodejs.org) to work
+with Remixer Remote.
+
+Once node is installed, simply clone our repo (or your fork of it) and
+run `npm install`.
+
+```bash
+git clone [email protected]:material-foundation/material-remixer-remote-web.git
+cd material-remixer-remote-web && npm install
+```
+
+### Typescript
+
+The source code for Remixer Remote is written in
+[Typescript](https://www.typescriptlang.org), and compiled to es5 javascript for
+distribution.
+
+### Building Remixer
+
+Use any of the following npm scripts to build dev or prod versions of Remixer
+Remote.
+
+```bash
+# Builds an unminified version of Remixer Remote within the build folder.
+npm run build:dev
+
+# Builds a minified version.
+npm run build:prod
+
+# Builds both unminified and minified versions.
+npm run build
+```
+
+### Running the development server
+
+We use [weback dev server](https://webpack.js.org/configuration/dev-server) for
+hosting and live-reloading of any code changes.
+
+```bash
+npm run dev
+open http://localhost:9000
+```
+
+### Linting
+
+```bash
+# Lint both CSS/LESS using lesshint.
+npm run lint:css
+
+# Lint typescript using tslint.
+npm run lint:ts
+
+# Lints both css and ts.
+npm run lint
+```
+
+### Testing and Code Coverage
+
+Testing uses the [karma](https://karma-runner.github.io) test runner with
+[mocha](https://mochajs.org/) flavored testing framework. Code coverage
+is reported by [istanbul](https://www.npmjs.com/package/istanbul-instrumenter-loader).
+
+```bash
+# Run tests and code coverage once.
+npm run test
+
+# Run with auto-watch indefinitely.
+npm run test:watch
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-remixer-remote-web",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "description": "A hosted remote controller for a Remixer target app.",
   "homepage": "https://github.com/material-foundation/material-remixer",
   "author": "The Material Remixer Authors (see AUTHORS)",
@@ -29,7 +29,11 @@
     "deploy": "npm run dist && firebase deploy",
     "dev": "npm run clean:build && npm run build && cross-env RMX_ENV=production webpack-dev-server",
     "dist": "npm run clean && npm run build && npm run copy",
-    "test": "karma start"
+    "lint:ts": "tslint --fix --force 'src/**/*.ts?(x)'",
+    "lint:css": "lesshint src/*.css",
+    "lint": "npm-run-all --parallel lint:*",
+    "test": "karma start",
+    "test:watch": "karma start --no-single-run"
   },
   "devDependencies": {
     "@types/chai": "^3.4.35",
@@ -57,18 +61,20 @@
     "karma-webpack": "^2.0.2",
     "less": "^2.7.2",
     "less-loader": "^4.0.2",
+    "lesshint": "^3.1.1",
     "mkdirp": "^0.5.1",
     "mocha": "^3.2.0",
     "npm-run-all": "^4.0.2",
     "react-addons-test-utils": "^15.4.2",
     "style-loader": "^0.16.1",
     "ts-loader": "^2.0.3",
     "tslint": "^4.0.2",
+    "tslint-react": "^2.5.0",
     "typescript": "^2.1.6",
     "webpack": "^2.3.2",
     "webpack-dev-server": "^2.4.2"
   },
   "dependencies": {
-    "material-remixer": "^0.7.0"
+    "material-remixer": "^1.0.0"
   }
 }

src/PageLayout.tsx

@@ -14,19 +14,19 @@
  *  under the License.
  */
 
-import * as React from "react";
+import * as React from 'react';
 
 /** Returns a stateless page layout template. */
 export function PageLayout(props: any) {
   return (
-    <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-      <header className="mdl-layout__header">
-        <div className="mdl-layout__header-row">
-          <img src="remixer.svg" alt="Remixer Remote" />
+    <div className='mdl-layout mdl-js-layout mdl-layout--fixed-header'>
+      <header className='mdl-layout__header'>
+        <div className='mdl-layout__header-row'>
+          <img src='remixer.svg' alt='Remixer Remote' />
         </div>
       </header>
-      <main className="mdl-layout__content">
-        <div className="page-content">
+      <main className='mdl-layout__content'>
+        <div className='page-content'>
           {props.children}
         </div>
       </main>

src/RemoteController.tsx

@@ -14,17 +14,17 @@
  *  under the License.
  */
 
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
-import "../node_modules/material-remixer/src/ui/styles/overlay.less";
+import '../node_modules/material-remixer/src/ui/styles/overlay.less';
 
-import { remixer } from "../node_modules/material-remixer/src/core/Remixer";
-import { ConstraintType, DataType } from "../node_modules/material-remixer/src/lib/Constants";
-import { LocalStorage } from "../node_modules/material-remixer/src/lib/LocalStorage";
-import { OverlayController } from "../node_modules/material-remixer/src/ui/OverlayController";
-import { PageLayout } from "./PageLayout";
-import { Variable } from "../node_modules/material-remixer/src/core/variables/Variable";
+import { remixer } from '../node_modules/material-remixer/src/core/Remixer';
+import { Variable } from '../node_modules/material-remixer/src/core/variables/Variable';
+import { ConstraintType, DataType } from '../node_modules/material-remixer/src/lib/Constants';
+import { LocalStorage } from '../node_modules/material-remixer/src/lib/LocalStorage';
+import { OverlayController } from '../node_modules/material-remixer/src/ui/OverlayController';
+import { PageLayout } from './PageLayout';
 
 /** The globally exposed library MDL exposes as `window['componentHandler']`. */
 declare var componentHandler: any;
@@ -71,14 +71,14 @@ class RemoteController {
    * @static
    */
   static start(): void {
-    let instance = this._sharedInstance;
+    const instance = this._sharedInstance;
 
     // Get remoteId from pathname.
     // (ie. https://<PROJECT-ID>.firebaseapp.com/<REMOTE-ID>)
-    let remoteId = location.pathname.split("/")[1];
+    const remoteId = location.pathname.split('/')[1];
 
     instance.dbReference = firebase.database().ref(`remixer/${remoteId}`);
-    instance.dbReference.on("value", (data: any) => {
+    instance.dbReference.on('value', (data: any) => {
       instance.syncData(data.val());
     });
   }
@@ -90,8 +90,8 @@ class RemoteController {
    */
    private syncData(data: any): void {
      this.variables = [];
-     for (let key in data) {
-       let variable = LocalStorage.deserialize(data[key]);
+     for (const key of Object.keys(data)) {
+       const variable = LocalStorage.deserialize(data[key]);
        if (variable instanceof Variable) {
          this.variables.push(variable);
        }
@@ -119,7 +119,7 @@ class RemoteController {
 
   /** Renders the remote controller to the DOM. */
    private redraw(): void {
-     const overlayWrapper = document.getElementById("remixer-remote");
+     const overlayWrapper = document.getElementById('remixer-remote');
      ReactDOM.render(
        <div>
          <PageLayout>

src/__tests__/RemoteController_test.tsx

@@ -1,17 +1,17 @@
-import * as React from "react";
-import * as TestUtils from "react-addons-test-utils";
-import * as chai from "chai";
+import * as chai from 'chai';
+import * as React from 'react';
+import * as TestUtils from 'react-addons-test-utils';
 
-import { remixer } from "../../node_modules/material-remixer/src/core/Remixer";
-import { CSS } from "../../node_modules/material-remixer/src/lib/Constants";
-import { TextFieldControl } from "../../node_modules/material-remixer/src/ui/controls/TextFieldControl";
-import { Variable } from "../../node_modules/material-remixer/src/core/variables/Variable";
+import { remixer } from '../../node_modules/material-remixer/src/core/Remixer';
+import { Variable } from '../../node_modules/material-remixer/src/core/variables/Variable';
+import { CSS } from '../../node_modules/material-remixer/src/lib/Constants';
+import { TextFieldControl } from '../../node_modules/material-remixer/src/ui/controls/TextFieldControl';
 
 const expect = chai.expect;
 
-describe("TextFieldControl", () => {
-  const key: string = "test_variable";
-  const initialValue: string = "test string value";
+describe('TextFieldControl', () => {
+  const key: string = 'test_variable';
+  const initialValue: string = 'test string value';
   let variable: Variable;
 
   beforeEach(() => {
@@ -21,21 +21,21 @@ describe("TextFieldControl", () => {
       <TextFieldControl
         variable={variable}
         updateVariable={null}
-      />
+      />,
     );
   });
 
-  it("should render with proper class name", () => {
-    let control = TestUtils.findRenderedDOMComponentWithClass(
-      this.component, CSS.RMX_TEXTFIELD
+  it('should render with proper class name', () => {
+    const control = TestUtils.findRenderedDOMComponentWithClass(
+      this.component, CSS.RMX_TEXTFIELD,
     );
 
     expect(TestUtils.isDOMComponent(control)).to.be.true;
   });
 
-  it("have correct innertext checked value", () => {
-    let textField = TestUtils.findRenderedDOMComponentWithClass(
-      this.component, "mdl-textfield__input"
+  it('have correct innertext checked value', () => {
+    const textField = TestUtils.findRenderedDOMComponentWithClass(
+      this.component, 'mdl-textfield__input',
     ) as HTMLInputElement;
 
     expect(textField.value).to.equal(initialValue);

src/remote-style.css

@@ -19,8 +19,8 @@ body {
 }
 
 .mdl-layout__header {
+  background-color: #ffffff;
   color: rgba(0, 0, 0, 0.8);
-  background-color: #fff;
 }
 
 .mdl-layout__header-row {
@@ -36,7 +36,7 @@ body {
 }
 
 #remixer-remote .mdl-card {
-  background-color: #fff;
+  background-color: #ffffff;
 }
 
 .mdl-card__title {