Merge branch 'master' into miljo/install-deploy

.npmignore

@@ -1,12 +1,22 @@
-src
-node_modules
-.gitignore
-.gitattributes
+*.config.js
+*.nuspec
+*.yml
 .editorconfig
+.gitattributes
+.gitignore
+.vscode
+coverage
+dist/*.stats.html
+dist/demo*.*
+examples
 gulpfile.js
-config.js
-tsconfig.json
+index.html
 jsconfig.json
-webpack.config.js
+karma.config.js
+node_modules
+src
+tsconfig.json
+tsd.json
+tslint.json
 typings
-
+webpack.config.js

.pullapprove.yml

@@ -0,0 +1,19 @@
+approve_by_comment: true
+approve_regex: ^Approved
+reject_regex: ^Rejected
+reset_on_push: false
+reject_value: -1
+reviewers:
+  members:
+  - ericthompson
+  - Jahnp
+  - battletoilet
+  - wdo3650
+  - mikewheaton
+  - dzearing
+  - cliffkoh
+  - aditima
+  - yiminwu
+  - antonlabunets
+  name: pullapprove
+  required: 1

.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+node_js:
+- '4.2'
+before_script:
+- npm install -g gulp
+script: gulp --production
+deploy:
+  provider: npm
+  email: [email protected]
+  api_key:
+    secure: kLwlKSvDBoGsYP0p+64JnW5kmSpZfSmt2YxKKwWFcThlsiftbZtUILWFVpPd7A5yymsYuOONZTXppaW00OWaH1Bqs6yVHOn3kVQzE7VK/FtVwGZnqFfF0ea0pYYfto3OIFnyZ86vZ0M8u2A+3FGqjGYT1y3RDbG5GqhURBNd+KBhHrMS+pSaGDgEjskslLeQ+QtQ1/t17j0ZQZeYpxl+qFKislR1djeF0pkOjaoJ8wAUB77E0RhVyKP4cOyvtiF9E8nmnaurNYuabZqFMzOg0PgzMhh6xWv10aGF7jNzgojzCix/grCJR1gdfaE6epPGkrufK1nFjCVb60Z+jHZmuhXrW80Qa9AsMbNkXLlm9g6OLm63Ub2xqNQ5338NteGygWj8FRYe7ZngQ/vAY7SK44oA6+QRJAcpV6ieUFeIN8oEoZ42TJjUuKa6xaRVxuRQs2yobB3GzE4QioWLtqlDo+jbkzc0uFUpQHfErH5pHa7+qHDawiY9sO41lKvds6KfD3PXqHJxdokQh5nRB28k0eN+rFiSyvimDmerqBeG0U2oVJuYGVwGZSMKkOXGoZjZaCOFkPaZcS+HQZ+iDYpqEoB1jF1iYgkknZQLDlprWywjXEy/u2C2Bkd1K31aFCwYxrxkgGquii1ugUFVrjCpNLbeeoKALx5JapDfyAUVF+U=
+  on:
+    tags: true
+    repo: OfficeDev/office-ui-fabric-react

.vscode/settings.json

@@ -8,14 +8,14 @@
   // When enabled, will trim trailing whitespace when you save a file.
   "files.trimTrailingWhitespace": true,
 
-	// Controls if the editor should automatically close brackets after opening them
-	"editor.autoClosingBrackets": false,
+  // Controls if the editor should automatically close brackets after opening them
+  "editor.autoClosingBrackets": false,
 
   // Controls whether the editor should render whitespace characters
   "editor.renderWhitespace": true,
 
-	// Controls if the editor will insert spaces for tabs. Accepted values:  "auto", true, false. If set to "auto", the value will be guessed when a file is opened.
-	"editor.insertSpaces": true,
+  // Controls if the editor will insert spaces for tabs. Accepted values:  "auto", true, false. If set to "auto", the value will be guessed when a file is opened.
+  "editor.insertSpaces": true,
 
   "files.exclude": {
     "**/.git": true,

README.md

@@ -19,7 +19,7 @@ Fabric React is a responsive, mobile-first collection of robust components desig
 
 ## View the docs
 
-Before you get started, make sure you have [node.js](https://nodejs.org/), [gulp](http://gulpjs.com/), and [git](https://git-scm.com/) installed. To view the doucmentation including examples, contracts, current statuses, and to add functionality or fix issues locally, you can:
+Before you get started, make sure you have [node.js](https://nodejs.org/), [gulp](http://gulpjs.com/), and [git](https://git-scm.com/) installed. To view the documentation including examples, contracts, component status, and to add functionality or fix issues locally, you can:
 
 1. `git clone https://github.com/OfficeDev/office-ui-fabric-react.git`
 2. `npm install`
@@ -30,6 +30,10 @@ This will open a web browser with the example page. You can make changes to the
 
 ## Get started
 
+### Tutorial
+[Here is a step by step tutorial](./TUTORIAL.md) on how to build a simple React app with an Office UI Fabric React component.
+
+### Integrate into an existing project
 Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as Webpack which can resolve NPM package imports in your code and can bundle the specific things you import.
 
 Within an npm project, you should install the package and save it as a dependency:
@@ -52,7 +56,6 @@ const MyPage = () => (<div><Button>I am a button.</Button></div>);
 ReactDOM.render(<MyPage />, document.body.firstChild);
 ```
 
-
 ## Advanced usage
 
 For advanced usage including info about module vs. path-based imports and using an AMD bundler like Require, see our [advanced documentation](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/ghdocs/ADVANCED.md).
@@ -70,7 +73,7 @@ We're excited to share our development of this project with folks outside of the
 
 ## Licenses
 
-All files on the Office UI Fabric React GitHub repository are subject to the MIT license. Please read the License file at the root of the project. 
+All files on the Office UI Fabric React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.
 
 Usage of the fonts referenced in Office UI Fabric files is subject to the [license](http://appsforoffice.microsoft.com/fabric/Segoe_UI_and_Fabric_CDN_License.txt).
 
@@ -79,6 +82,6 @@ Usage of the fonts referenced in Office UI Fabric files is subject to the [licen
 
 We use [GitHub Releases](https://github.com/blog/1547-release-your-software) to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes on the [releases](https://github.com/OfficeDev/office-ui-fabric-react/releases) page.
 
-- - - 
+- - -
 
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments.

examples/todo-app/gulpfile.js

@@ -0,0 +1,8 @@
+'use strict';
+
+let build = require('web-library-build');
+
+build.tslint.isEnabled = () => false;
+build.sass.isEnabled =() => true;
+
+build.initialize(require('gulp'));

examples/todo-app/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html dir="ltr">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Test Page</title>
+
+    <link rel="stylesheet" type="text/css" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
+  </head>
+  <body>
+    <script type="text/javascript" src="dist/fabric-react-example.js"></script>
+  </body>
+</html>

examples/todo-app/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "fabric-react-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "react-addons-update": "^0.14.0",
+    "web-library-build": "^0.1.3"
+  },
+  "dependencies": {
+    "es6-promise": "^3.2.1",
+    "load-themed-styles": "^1.2.0",
+    "office-ui-fabric": "^2.6.1",
+    "office-ui-fabric-react": "^0.33.0",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
+  }
+}

examples/todo-app/src/DataProvider.ts

@@ -0,0 +1,166 @@
+import update = require('react-addons-update');
+import { findIndex } from 'office-ui-fabric-react/lib/utilities/array';
+import { ITodoItem, IDataProvider } from './types/index';
+
+const ADD_ITEMS_DELAY = 500;
+
+/**
+ * DataProvider the class used to maintain the client side data.
+ *
+ * It interact with data provider to sync data items with sharepoint list.
+ * It also maintain the loading state to tell React Component once the action is
+ * started of finished.
+ */
+export default class DataProvider implements IDataProvider {
+  /**
+   * The counter used to identify the latest server call.
+   * If the current call is not the latest one, we don't want to update the list
+   * to mess up with the out of date data with data in this store.
+   */
+  private _items: ITodoItem[];
+  private _isLoading: boolean;
+  private _listeners: Array<() => void>;
+
+  /**
+   * The items store in the local. It only contains the data recently fetched from server.
+   */
+  public get items(): Array<ITodoItem> { return this._items; }
+  public set items(value: Array<ITodoItem>) {
+    this._items = value;
+    this._emitChange();
+  }
+
+  /**
+   * Whether there is unfinished server request currently.
+   */
+  public get isLoading(): boolean { return this._isLoading; }
+  public set isLoading(value: boolean) {
+    this._isLoading = value;
+    this._emitChange();
+  }
+
+  constructor() {
+    this._items = [
+      {
+        id: '61b59681-2a82-4a51-b221-8c35e333ae89',
+        title: 'Finish Sample Todo web part before dev kitchen',
+        isComplete: false
+      },
+      {
+        id: '94a844ae-0c6a-4820-8042-dbc386bdf930',
+        title: 'Finish All the work in Todo web part before dev kitchen',
+        isComplete: false
+      },
+      {
+        id: '5fa55618-90f9-4b5f-b12d-60c9fb1fc7f0',
+        title: 'SharePoint API investigation for Todo web part',
+        isComplete: true
+      },
+      {
+        id: '2ae54c74-1395-4a49-8dd2-4857efdd0e5e',
+        title: 'Bug fixing of Pivot Control',
+        isComplete: true
+      }
+    ];
+    this._isLoading = false;
+
+    this._listeners = [];
+    this.createItem = this.createItem.bind(this);
+    this.deleteItem = this.deleteItem.bind(this);
+    this.toggleComplete = this.toggleComplete.bind(this);
+  }
+
+  /**
+   * Create a new item and add it to the list through data provider.
+   */
+  public createItem(title: string): Promise<ITodoItem[]> {
+    this.isLoading = true;
+
+    return new Promise<ITodoItem[]>((resolve) => {
+      const newItem: ITodoItem = {
+        id: this._generateGuid(),
+        title: title,
+        isComplete: false
+      };
+
+      setTimeout(() => {
+        this.items = this.items.concat(newItem);
+        this.isLoading = false;
+        resolve(this.items);
+      }, ADD_ITEMS_DELAY);
+    });
+  }
+
+  /**
+   * Delete a item from the list through data provider.
+   */
+  public deleteItem(delItem: ITodoItem): Promise<ITodoItem[]> {
+    return new Promise<ITodoItem[]>((resolve) => {
+      this.items =
+        this.items.filter((item: ITodoItem) => item.id !== delItem.id);
+      resolve(this.items);
+    });
+  }
+
+  /**
+   * Toggle the complete state of an item by.
+   *
+   * Will call updateItem function to update complete state of this item.
+   */
+  public toggleComplete(item: ITodoItem): Promise<ITodoItem[]> {
+    // Create a new Item in which the PercentComplete value has been changed.
+    const newItem: ITodoItem = update(item, {
+      isComplete: { $set: item.isComplete === true ? false : true }
+    });
+
+    return new Promise<ITodoItem[]>((resolve, reject) => {
+      const index: number =
+        findIndex(
+          this.items,
+          (item: ITodoItem) => item.id === newItem.id
+        );
+      if (index !== -1) {
+        this.items[index] = newItem;
+        this.items = this.items.slice(0);
+        resolve(this.items);
+      } else {
+        reject(new Error(`Item to update doesn't exist.`));
+      }
+    });
+  }
+
+  /**
+   * Add listener to the provider.
+   *
+   * Once the store has a change of state and emit that change, the listeners will be called.
+   */
+  public addListener(listener: () => void): void {
+    this._listeners.push(listener);
+  }
+
+  /**
+   * Remove the registered listener.
+   *
+   * You must remove the listener registered by addListener method when you are not going to use it anymore.
+   */
+  public removeListener(listener: () => void): void {
+    const listenerIdx: number = this._listeners.indexOf(listener);
+    if (listenerIdx > -1) {
+      this._listeners.splice(listenerIdx, 1);
+    }
+  }
+
+  /**
+   * Emit the changes in the store to all listeners.
+   */
+  private _emitChange(): void {
+    this._listeners.forEach((listener: () => void) => listener());
+  }
+
+  private _generateGuid(): string {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+      return v.toString(16);
+    });
+  }
+}