From 03a460786e6731587e99bf2a6e8eeb33c7d1a11a Mon Sep 17 00:00:00 2001
From: Travis Kaufman <traviskaufman@users.noreply.github.com>
Date: Fri, 16 Dec 2016 15:05:22 -0500
Subject: [PATCH] fix(framework-examples): Fix React example (#121)

- Fix import statements
- Add NPM packages as dependencies
- Remove reliance on sass loader and all sass-related features. Use
  built CSS instead
- Clean up package.json

Resolves #107
[ci skip]
---
 framework-examples/react/package.json      | 30 ++++------------------
 framework-examples/react/src/Checkbox.js   |  4 +--
 framework-examples/react/src/FormField.js  |  2 +-
 framework-examples/react/webpack.config.js | 21 +++------------
 4 files changed, 12 insertions(+), 45 deletions(-)

diff --git a/framework-examples/react/package.json b/framework-examples/react/package.json
index 9c7000f9767..f0fb8ddaa08 100644
--- a/framework-examples/react/package.json
+++ b/framework-examples/react/package.json
@@ -1,32 +1,13 @@
 {
-  "name": "react-hot-boilerplate",
+  "name": "mdc-web-example-react",
+  "private": true,
   "version": "1.0.0",
-  "description": "Boilerplate for ReactJS project with hot code reloading",
+  "description": "MDC-Web Framework Integration Example for React",
   "scripts": {
     "start": "node server.js",
     "lint": "eslint src"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gaearon/react-hot-boilerplate.git"
-  },
-  "keywords": [
-    "react",
-    "reactjs",
-    "boilerplate",
-    "hot",
-    "reload",
-    "hmr",
-    "live",
-    "edit",
-    "webpack"
-  ],
-  "author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
   "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
-  },
-  "homepage": "https://github.com/gaearon/react-hot-boilerplate",
   "devDependencies": {
     "autoprefixer": "^6.3.6",
     "babel-core": "^6.0.20",
@@ -36,15 +17,14 @@
     "babel-preset-react": "^6.0.15",
     "babel-preset-stage-0": "^6.0.15",
     "css-loader": "^0.23.1",
-    "node-sass": "^3.7.0",
-    "postcss-loader": "^0.9.1",
     "react-hot-loader": "^1.3.0",
-    "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.1"
   },
   "dependencies": {
+    "@material/checkbox": "^0.1.0",
+    "@material/form-field": "^0.1.0",
     "classnames": "^2.2.5",
     "immutable": "^3.8.1",
     "react": "^15.1.0",
diff --git a/framework-examples/react/src/Checkbox.js b/framework-examples/react/src/Checkbox.js
index 07ee9edc75c..a5f46f52145 100644
--- a/framework-examples/react/src/Checkbox.js
+++ b/framework-examples/react/src/Checkbox.js
@@ -26,8 +26,8 @@ import React, {Component, PropTypes} from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import {Set as ImmutableSet} from 'immutable';
 // Temporarily using relative reference until we publish on npm.
-import {MDCCheckboxFoundation} from '../../../packages/mdc-checkbox';
-import '../../../packages/mdc-checkbox/mdc-checkbox.scss';
+import {MDCCheckboxFoundation} from '@material/checkbox';
+import '@material/checkbox/dist/mdc.checkbox.css';
 
 const {ANIM_END_EVENT_NAME} = MDCCheckboxFoundation.strings;
 
diff --git a/framework-examples/react/src/FormField.js b/framework-examples/react/src/FormField.js
index 9e01c22704d..4ccf8e6800e 100644
--- a/framework-examples/react/src/FormField.js
+++ b/framework-examples/react/src/FormField.js
@@ -19,7 +19,7 @@
 import React from 'react';
 import classnames from 'classnames';
 
-import '../../../packages/mdc-form-field/mdc-form-field.scss';
+import '@material/form-field/dist/mdc.form-field.css';
 
 export default function FormField({alignEnd, children}) {
   return (
diff --git a/framework-examples/react/webpack.config.js b/framework-examples/react/webpack.config.js
index be74024d602..2c2445c38d3 100644
--- a/framework-examples/react/webpack.config.js
+++ b/framework-examples/react/webpack.config.js
@@ -37,25 +37,12 @@ module.exports = {
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
       include: [
-        path.join(__dirname, 'src')
+        path.join(__dirname, 'src'),
+        path.join(__dirname, 'node_modules', '@material')
       ]
     }, {
-      test: /\.js$/,
-      loaders: ['babel'],
-      include: [
-        path.resolve('../../packages')
-      ]
-    }, {
-      test: /\.scss$/,
-      loaders: ['style', 'css', 'postcss', 'sass']
+      test: /\.css$/,
+      loaders: ['style', 'css']
     }]
   },
-  sassLoader: {
-    includePaths: [path.resolve('../../packages')]
-  },
-  postcss: function() {
-    return [
-      require('autoprefixer')
-    ];
-  }
 };