Merge pull request #216 from mlaursen/release/1.0.x

Release/1.0.x

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,14 @@
+*Before* submitting a pull request, please make sure the following is done:
+
+1. For the repo and create your branch from `release/MAJOR.MINOR.x`. At the time of creating this, react-md is at version
+v1.0.0, so you would branch off of `release/1.0.x`.
+2. If you have added code that should be tested, please add tests.
+3. If you have added new prop types or deprecated prop types, please update the docgen descriptions. When TypeScript is fully
+implemented, update the types as well.
+4. Ensure that the teset suite passes (`npm test`).
+5. Ensure that your code lints (`npm run lint`).
+  > NOTE: Sass changes rely on the Ruby version of `sass` and `scss-lint` to work.
+  
+
+6. If your pull request attempts to fix an existing issue, please reference that issue via a commit message
+or the pull request comment.

README.md

@@ -3,7 +3,7 @@
 React Material Design - React components built with sass
 
 [![Build Status](https://travis-ci.org/mlaursen/react-md.svg?branch=master)](https://travis-ci.org/mlaursen/react-md)
-[![Join the chat at https://gitter.im/mlaursen/react-md](https://badges.gitter.im/mlaursen/react-md.svg)](https://gitter.im/mlaursen/react-md?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/mlaursen03)
+[![Join the chat at Slack](https://react-md.herokuapp.com/badge.svg)](https://react-md.herokuapp.com) [![Join the chat at https://gitter.im/mlaursen/react-md](https://badges.gitter.im/mlaursen/react-md.svg)](https://gitter.im/mlaursen/react-md?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/mlaursen03)
 
 react-md is a set of React components and sass files for implementing [Google's Material Design](https://material.google.com). The
 [Documentation Website](http://react-md.mlaursen.com) can be used for viewing live examples, code samples, and general prop documentation.
@@ -20,6 +20,61 @@ $ npm i -S react \
 
 ## Usage
 
+### Using create-react-app
+`create-react-app` does [not support Sass](https://github.com/facebookincubator/create-react-app/issues/78), so
+here are some steps to get it working:
+
+```bash
+$ create-react-app my-app --scripts-version --custom-react-scripts
+$ npm i -S react-md
+```
+
+Customize the `.env` to include SASS. See [custom-react-scripts](https://github.com/kitze/create-react-app)
+for more information.
+
+If this is not a solution for you, you can always run `yarn run eject` (or `npm run eject`) from your app and add Sass yourself.
+
+```bash
+$ create-react-app my-app
+$ yarn run eject
+$ yarn add react-md
+$ yarn add --dev sass-loader node-sass
+$ vim -O config/webpack.config.dev.js config/webpack.config.prod.js
+```
+
+Add an scss/sass exclusion on line 109 (webpack.config.dev.js) and line 115 (webpack.config.prod.js)
+
+```js
+        exclude: [
+          /\.html$/,
+          /\.(js|jsx)$/,
+          /\.css$/,
+          /\.json$/,
+          /\.svg$/,
+          /\.s(c|a)ss$/,
+        ],
+```
+
+In the dev config, add a new loader after the CSS loader:
+
+```js
+      {
+        test: /\.s(a|c)ss$/,
+        loader: 'style!css?importLoaders=2!postcss!sass?sourceMap&outputStyle=expanded'
+      },
+```
+
+In the prod config:
+```js
+      {
+        test: /\.s(a|c)ss$/,
+        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=2!postcss!sass?outputStyle=compressed')
+      },
+```
+
+### Using one of the Boilerplates
+If `create-react-app` is not your thing, you can try using one of the available [boilerplates](https://react-md.mlaursen.com/discover-more/boilerplates).
+
 ### Basic Webpack Usage
 
 ```js
@@ -70,12 +125,12 @@ You can also use the UMD build from [unpkg](https://unpkg.com/#/):
 
 ```html
 <!-- Production Version -->
-<link rel="stylesheet" href="https://unpkg.com/[email protected].0/dist/react-md.deep_purple-pink.min.css">
-<script src="https://unpkg.com/[email protected].0/dist/react-md.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/[email protected].1/dist/react-md.deep_purple-pink.min.css">
+<script src="https://unpkg.com/[email protected].1/dist/react-md.min.js"></script>
 
 <!-- Development Version -->
 <!-- development version of CSS unavailable -->
-<script src="https://unpkg.com/[email protected].0/dist/react-md.js"></script>
+<script src="https://unpkg.com/[email protected].1/dist/react-md.js"></script>
 ```
 
 
@@ -85,14 +140,14 @@ You can also use the UMD build from [unpkg](https://unpkg.com/#/):
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="https://unpkg.com/[email protected].0/dist/react-md.deep_purple-pink.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected].1/dist/react-md.deep_purple-pink.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:400,500,700">
   </head>
   <body>
     <div id="app"></div>
     <script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
     <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
-    <script src="https://unpkg.com/[email protected].0/dist/react-md.min.js"></script>
+    <script src="https://unpkg.com/[email protected].1/dist/react-md.min.js"></script>
     <script>
     var MyAwesomeComponent = React.createClass({
       render: function()  {

docs/package.json

@@ -18,28 +18,31 @@
   "dependencies": {
     "apicache": "^0.4.1",
     "babel-polyfill": "^6.16.0",
-    "bluebird": "^3.4.6",
+    "bluebird": "^3.4.7",
+    "body-parser": "^1.15.2",
     "classnames": "^2.2.5",
     "compression": "^1.6.2",
-    "ejs": "^2.5.2",
+    "ejs": "^2.5.5",
     "express": "^4.14.0",
-    "fuse.js": "^2.5.0",
+    "fuse.js": "^2.6.1",
     "helmet": "^3.1.0",
     "highlight.js": "^9.7.0",
+    "hpp": "^0.2.1",
     "intl": "^1.2.5",
+    "intl-locales-supported": "^1.0.0",
     "isomorphic-fetch": "^2.2.1",
     "lodash.throttle": "^4.1.1",
     "lorem-ipsum": "^1.0.3",
     "marked": "^0.3.6",
     "morgan": "^1.7.0",
-    "node-sass": "^3.10.1",
+    "node-sass": "^4.1.1",
     "normalize.css": "^5.0.0",
-    "react": "15.4.0",
-    "react-addons-css-transition-group": "15.4.0",
-    "react-addons-transition-group": "15.3.2",
-    "react-dom": "15.4.0",
-    "react-motion": "^0.4.5",
-    "react-redux": "^4.4.5",
+    "react": "^15.4.1",
+    "react-addons-css-transition-group": "^15.4.1",
+    "react-addons-transition-group": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "react-motion": "^0.4.7",
+    "react-redux": "^5.0.1",
     "react-router": "^3.0.0",
     "react-router-redux": "^4.0.6",
     "react-waypoint": "^4.0.4",
@@ -49,12 +52,12 @@
     "webfontloader": "^1.6.26"
   },
   "devDependencies": {
-    "autoprefixer": "^6.5.1",
+    "autoprefixer": "^6.6.1",
     "babel": "^6.5.2",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.0",
     "babel-eslint": "^7.1.0",
-    "babel-loader": "^6.2.6",
+    "babel-loader": "^6.2.10",
     "babel-plugin-syntax-async-functions": "^6.13.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-regenerator": "^6.16.1",
@@ -72,23 +75,23 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
     "html-webpack-harddisk-plugin": "^0.0.2",
-    "html-webpack-plugin": "^2.24.0",
+    "html-webpack-plugin": "^2.26.0",
     "image-webpack-loader": "^3.0.0",
     "json-loader": "^0.5.4",
     "node-noop": "^1.0.0",
     "nodemon": "^1.11.0",
-    "postcss-loader": "^1.0.0",
+    "postcss-loader": "^1.2.1",
     "raw-loader": "^0.5.1",
-    "react-addons-perf": "15.4.0",
+    "react-addons-perf": "^15.4.1",
     "react-hot-loader": "3.0.0-beta.6",
     "rimraf": "^2.5.4",
-    "sass-loader": "^4.0.2",
+    "sass-loader": "^4.1.1",
     "sassdoc": "^2.1.20",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.3",
+    "webpack": "^1.14.0",
     "webpack-dev-middleware": "^1.8.4",
-    "webpack-hot-middleware": "^2.13.0",
+    "webpack-hot-middleware": "^2.15.0",
     "webpack-node-externals": "^1.5.4"
   }
 }

docs/src/client/index.jsx

@@ -7,17 +7,6 @@ import { syncHistoryWithStore } from 'react-router-redux';
 import { Provider } from 'react-redux';
 import { AppContainer } from 'react-hot-loader';
 
-import WebFont from 'webfontloader';
-WebFont.load({
-  google: {
-    families: ['Roboto:300,400,500,700', 'Material Icons'],
-  },
-  custom: {
-    families: ['FontAwesome'],
-    urls: ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'],
-  },
-});
-
 import './_styles.scss';
 import configureStore from 'stores/configureStore';
 import onRouteUpdate from 'utils/onRouteUpdate';
@@ -60,4 +49,20 @@ if (module.hot) {
   });
 }
 
-renderApp();
+if (!global.Intl) {
+  require.ensure([], require => {
+    const lang = window.navigator.userLanguage || window.navigator.language || 'en-US';
+
+    require('intl');
+    require('intl/locale-data/jsonp/en-US');
+    require('intl/locale-data/jsonp/da-DK');
+
+    if (['en-US', 'da-DK'].indexOf(lang) === -1) {
+      require(`intl/locale-data/jsonp/${lang}`);
+    }
+
+    renderApp();
+  });
+} else {
+  renderApp();
+}

docs/src/server/index.js

@@ -1,12 +1,14 @@
-const path = require('path');
-const express = require('express');
-const compression = require('compression');
-const logger = require('morgan');
-const { port } = require('../../serverConfig.json');
-const helmet = require('helmet');
+import path from 'path';
+import express from 'express';
+import compression from 'compression';
+import logger from 'morgan';
+import helmet from 'helmet';
+import hpp from 'hpp';
+import bodyParser from 'body-parser';
 
-const theme = require('./theme');
-const proxy = require('./proxy');
+import { port } from '../../serverConfig.json';
+import theme from './theme';
+import proxy from './proxy';
 
 const app = express();
 
@@ -23,6 +25,8 @@ app.use(helmet({
   noCache: false,
 }));
 app.use(compression());
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(hpp());
 app.use(logger(__DEV__ ? 'dev' : 'combined'));
 
 

docs/src/server/proxy.js

@@ -1,12 +1,12 @@
-const fetch = require('isomorphic-fetch');
+import fetch from 'isomorphic-fetch';
 
 /**
  * Does a very simple fetch for the requested url
  *
  * @param {Object} req - The http request
  * @param {Object} res - The http response
  */
-module.exports = function proxy(req, res) {
+export default function proxy(req, res) {
   // Soooo I don't know how to properly quote the url so that the query params get passed..
   // So gotta manually do it here :/
   const { url, start, limit } = req.query;
@@ -19,4 +19,4 @@ module.exports = function proxy(req, res) {
       res.sendStatus(error.status || 500);
     });
   }
-};
+}

docs/src/server/reactMD.js

@@ -5,10 +5,13 @@ import { Provider } from 'react-redux';
 import { syncHistoryWithStore } from 'react-router-redux';
 import getInitialDrawerState from './utils/getInitialDrawerState';
 import getInitialQuickNavigationState from './utils/getInitialQuickNavigationState';
+import intlLocalesSupported from 'intl-locales-supported';
 
 import routes from 'routes';
 import configureStore from 'stores/configureStore';
 
+const SUPPORTED_LANGUAGES = ['en', 'en-US', 'da-DK'];
+
 export default function reactMD(req, res) {
   const store = configureStore({
     ui: {
@@ -20,6 +23,15 @@ export default function reactMD(req, res) {
   const memoryHistory = createMemoryHistory(req.url);
   const history = syncHistoryWithStore(memoryHistory, store);
 
+  if (global.Intl) {
+    if (!intlLocalesSupported(SUPPORTED_LANGUAGES)) {
+      const Intl = require('intl');
+      global.Intl.DateTimeFormat = Intl.DateTimeFormat;
+    }
+  } else {
+    global.Intl = require('intl');
+  }
+
   match({ history, routes, location: req.url }, async (error, redirectLocation, renderProps) => {
     if (error) {
       req.sendStatus(500);

docs/src/shared/actions/fetch.js

@@ -82,13 +82,14 @@ export function fetchCreator(endpoint, id, stateKey, { request, success, failure
   if (addId) {
     fullStateKey = (typeof stateKey === 'string' ? stateKey.split('.') : stateKey);
     fullStateKey.push(id);
+    fullStateKey = fullStateKey.filter(k => !!k);
   }
 
   return (dispatch, getState) => {
     const existingState = reduceKey(getState(), fullStateKey);
 
     // Only cache requests in development mode.
-    if (!__DEV__ && existingState && existingState.length) {
+    if (!__DEV__ && existingState && (!(existingState instanceof Array) || existingState.length)) {
       return null;
     }
 

docs/src/shared/components/Community.jsx

@@ -10,7 +10,7 @@ const markdown = `
 > There really isn't one atm.
 
 If you want to see the progress of \`react-md\` or reach out to the community with a question,
-you can chat with me on [gitter](https://gitter.im/mlaursen/react-md) or use the contact email.
+you can chat with me on [Slack](https://react-md.herokuapp.com/) or use the contact email.
 `;
 
 export default class Community extends PureComponent {

docs/src/shared/components/Customization/Colors/README.md

@@ -15,12 +15,12 @@ All colors will have primary colors with suffixes: `50, 100, 200, 300, 400, 500,
 and all colors except for `brown`, `grey` and `blue-grey` will have accent suffixes of
 `100, 200, 400, 700`. In addition, the `$md-black-base` and `$md-white-base` variables are available.
 
-To help with getting specific colors, there is a SASS Map of every color and a mixin that will create
+To help with getting specific colors, there is a Sass Map of every color and a mixin that will create
 two class names for each material design color.
 
 ### `$md-color-map` 
 This map contains every material design color so that you can quickly access them and optionally use
-the [SASS Map functions](http://sass-lang.com/documentation/Sass/Script/Functions.html#map-functions)
+the [Sass Map functions](http://sass-lang.com/documentation/Sass/Script/Functions.html#map-functions)
 to programatically get colors. This is really just used for the `react-md-color-class-names mixin`.
 
 ### `mixin react-md-color-class-names`

docs/src/shared/components/Customization/Themes/ThemeBuilder.jsx

@@ -27,7 +27,7 @@ const ABOUT_THEME_BUILDER = `
 ### Custom CSS Theme Builder
 
 Select a primary color, a secondary color, the secondary color's hue, and optionally toggle the light theme
-to view a specific theme. When you have selected colors you like, either reference [Using with SASS](#using-with-sass)
+to view a specific theme. When you have selected colors you like, either reference [Using with Sass](#using-with-sass)
 or [pre-compiled themes](#pre-compiled-themes). Not all themes will already be compiled and hosted on \`unpkg\`.
 `;
 
@@ -134,7 +134,7 @@ export default class ThemeBuilder extends PureComponent {
     const compiledName = `react-md.${primary.replace('-', '_')}-${secondary.replace('-', '_')}${light ? '' : '.dark'}.min.css`;
 
     let howToUse = `
-#### Using with SASS
+#### Using with Sass
 
 \`\`\`scss
 @import '~react-md/src/scss/react-md';

docs/src/shared/components/Home/Home.jsx

@@ -13,8 +13,8 @@ import InlineSVG from 'components/InlineSVG';
 
 const about = `
 This project's goal is to be able to create a fully accessible material design
-styled website using React Components and SASS. With the separation of styles in
-SASS instead of inline styles, it should hopefully be easy to create custom
+styled website using React Components and Sass. With the separation of styles in
+Sass instead of inline styles, it should hopefully be easy to create custom
 components with the existing styles.
 `;