Update to latest release of react-flexbox-grid and add deprecation wa…

…rning to this repository

.babelrc

@@ -1,8 +1,7 @@
 {
-  "presets": ["es2015-loose", "stage-0", "react"],
-  "env": {
-    "development": {
-      "presets": ["react-hmre"]
-    }
-  }
+  "presets": [
+    "es2015",
+    "stage-1",
+    "react"
+  ]
 }

.gitignore

@@ -1,5 +1,7 @@
 build
 lib
+dist
 node_modules
 npm-debug.log
 .idea
+.DS_Store

.npmignore

@@ -1,3 +1,7 @@
+doc
+spec
+test
+
 node_modules
 .idea
 .travis.yml

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "4.2.1"
+  - "stable"
 script:
   - npm run lint
   - npm test

README.md

@@ -3,156 +3,15 @@
 [![Build Status](https://travis-ci.org/noentiger/react-app-flexbox-grid.svg)](https://travis-ci.org/noentiger/react-app-flexbox-grid)
 [![NPM Status](http://img.shields.io/npm/dm/react-app-flexbox-grid.svg?style=flat)](https://www.npmjs.org/package/react-app-flexbox-grid)
 
+
 Intention
 ---------
 
 To make [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) work seamless with e.g. [Facebook's create-react-app](https://github.com/facebookincubator/create-react-app)
 
-Info
-----
-
-`react-app-flexbox-grid` is a set of React components that implement [flexboxgrid.css](https://goo.gl/imrHBZ). It even has an optional support for [CSS Modules](https://github.com/webpack-contrib/css-loader#css-modules) with some extra configuration.
-
-
-Setup
------
-
-### Installation
-
-`react-app-flexbox-grid` can be installed as an [npm package](https://www.npmjs.com/package/react-app-flexbox-grid):
-
-```
-npm i -S react-app-flexbox-grid
-```
-
-### Minimal configuration
-
-The recommended way to use `react-app-flexbox-grid` is with a tool like [webpack](https://webpack.js.org/) or [Meteor](https://www.meteor.com/), make sure you set it up to support requiring CSS files. For example, the minimum required loader configuration for webpack would look like this:
-
-```js
-{
-  test: /\.css$/,
-  loader: 'style-loader!css-loader',
-  include: /flexboxgrid/
-}
-```
-
-`react-app-flexbox-grid` imports the styles from `flexboxgrid`, that's why we're configuring the loader for it.
-
-### CSS Modules
-
-If you want to use CSS Modules (this is _mandatory_ for versions earlier than v1), webpack's [`css-loader`](https://github.com/webpack-contrib/css-loader) supports this by passing `modules` param in the loader configuration.
-
-First, install `style-loader` and `css-loader` as development dependencies:
-
-```
-npm install --save-dev style-loader css-loader
-```
-
-Next, add a loader for `flexboxgrid` with CSS Modules enabled:
-
-```js
-{
-  test: /\.css$/,
-  loader: 'style-loader!css-loader?modules',
-  include: /flexboxgrid/
-}
-```
-
-Make sure you don't have another CSS loader which also affects `flexboxgrid`. In case you do, exclude `flexboxgrid`, for example:
-
-```js
-{
-  test: /\.css$/,
-  loader: 'style-loader!css-loader!postcss-loader',
-  include: path.join(__dirname, 'node_modules'), // oops, this also includes flexboxgrid
-  exclude: /flexboxgrid/ // so we have to exclude it
-}
-```
-
-Otherwise you would end up with an [obscure error](https://github.com/noentiger/react-app-flexbox-grid/issues/94#issuecomment-282825720) because webpack stacks loaders together, it doesn't override them.
-
-### Isomorphic support
-
-See [this comment](https://github.com/noentiger/react-app-flexbox-grid/issues/28#issuecomment-198758253).
-
-
-### Not using a bundler?
-
-If you want to use `react-app-flexbox-grid` the old-fashioned way, you must generate a build with all the CSS and JavaScript and include it in your `index.html`. The components will then be exposed in the `window` object.
-
-
-Usage
------
-
-Now you can import and use the components:
-
-```jsx
-import React from 'react';
-import { Grid, Row, Col } from 'react-app-flexbox-grid';
-
-class App extends React.Component {
-  render() {
-    return (
-      <Grid fluid>
-        <Row>
-          <Col xs={6} md={3}>
-            Hello, world!
-          </Col>
-        </Row>
-      </Grid>
-    );
-  }
-}
-```
-
-### Gotcha
-
-For the time being always use `fluid` for `<Grid>` to prevent [horizontal overflow issues](https://github.com/kristoferjoseph/flexboxgrid/issues/144).
-
-
-Example
--------
-Looking for a complete example? Head over to [react-app-flexbox-grid-example](https://github.com/noentiger/react-app-flexbox-grid-example).
-
-
-Advanced composition
--------
-
-We also export functions for generating Row and Column class names for use in other components.
-
-For example, suppose you're using a third party component that accepts `className` and you would like it to be rendered as `Col`.  You could do so by extracting the column sizing props that `MyComponent` uses and then pass the generated className on to `SomeComponent`
-
-
-```jsx
-import React from 'react';
-import { Row, Col, getRowProps, getColumnProps } from 'react-app-flexbox-grid';
-// a component that accepts a className
-import SomeComponent from 'some-package';
-
-export default function MyComponent(props) {
-  const colProps = getColumnProps(props);
-  const rowProps = getRowProps(props);
-
-  return (
-    <form className={rowProps.className}>
-      <SomeComponent classname={colProps.className} />
-      <input value={props.value} onChange={props.onChange} />
-    </form>
-  );
-}
-
-MyComponent.propTypes = Object.assign({
-  onChange: React.PropTypes.func.isRequired,
-  value: React.PropTypes.string.isRequired,
-}, Col.propTypes, Row.propTypes);  // Re-use existing Row and Col propType validations
-
-// Can now be rendered as: <MyComponent end="sm" sm={8} value="my input value" onChange={...} />
-```
-
-## Credits
-
-- [https://github.com/roylee0704/react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) for the original react components
+Deprecation Notice
+------------------
+Since now [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) works flawless with [create-react-app](https://github.com/facebookincubator/create-react-app) there is no point in using this package. I won't maintain this repository, so please use [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid).
 
 License
 -------

doc/app/components/box/index.jsx

@@ -1,13 +1,14 @@
-import React, {PropTypes} from 'react';
-import {Col} from 'react-app-flexbox-grid';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col } from 'react-app-flexbox-grid';
 import box from './style';
 
 const Box = (props) => {
   return (
     <Col {...props}>
-        <div className = {box[props.type || 'box']}>
-          {props.children}
-        </div>
+      <div className={box[props.type || 'box']}>
+        {props.children}
+      </div>
     </Col>
   );
 };

doc/app/components/button/index.jsx

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import style from './style';
 
 const Button = (props) => {

doc/app/components/hero/index.jsx

@@ -8,13 +8,13 @@ const Hero = () => {
   return (
     <header className={style.hero}>
       <Row center="xs">
-        <h1 className={style.headline}>react-app-flexbox-grid</h1>
+        <h1 className={style.headline}>React-FlexBox-Grid</h1>
       </Row>
       <Row className={style.description} center="xs">
-        <code>React(CSS-Modules(flexboxgrid.css));</code>
+        <code>React(CSS-Modules(flexboxgrid2.css));</code>
       </Row>
       <Row center="xs">
-        <Button url="https://github.com/noentiger/react-app-flexbox-grid">Github</Button>
+        <Button url="https://github.com/roylee0704/react-flexbox-grid">Github</Button>
       </Row>
     </header>
   );

doc/app/components/home/index.jsx

@@ -26,7 +26,7 @@ const Home = () => (
     <Grid fluid className={home.wrap}>
       <Section
         title="Responsive"
-        description="Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.">
+        description="Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.">
         <Row>
           <Box type="row" xs={12} sm={3} md={2} lg={1} />
           <Box type="row" xs={6} sm={6} md={8} lg={10} />

doc/app/components/section/index.jsx

@@ -1,9 +1,10 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import style from './style';
 
 const Section = (props) => {
   return (
-    <section className = {style.section}>
+    <section className={style.section}>
       <h2>{props.title}</h2>
       <p>{props.description}</p>
       {props.children}

doc/package.json

@@ -10,12 +10,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/noentiger/react-app-flexbox-grid.git"
+    "url": "git+https://github.com/roylee0704/react-flexbox-grid.git"
   },
-  "author": "noentiger <noentiger@gmail.com> (https://twitter.com/noentiger)",
+  "author": "roylee0704 <roylee0704@gmail.com> (https://twitter.com/roylee0704)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/noentiger/react-app-flexbox-grid/issues"
+    "url": "https://github.com/roylee0704/react-flexbox-grid/issues"
   },
   "dependencies": {
     "codemirror": "^5.8.0",

doc/server.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
-const config = require('./webpack.config.development');
+const config = require('./webpack.config');
 
 const app = express();
 const compiler = webpack(config);

doc/www/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>React Flexbox Grid</title>
   <meta name="description" content="React Flexbox Grid is a set of React components implementing flexboxgrid with the power of CSS Modules.">
-  <meta name="author" content="noentiger">
+  <meta name="author" content="roylee0704">
   <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
   <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
   <meta name="apple-mobile-web-app-title" content="React Toolbox">
@@ -15,14 +15,14 @@
   <meta http-equiv="cleartype" content="on">
 
   <meta name="twitter:card" content="summary">
-  <meta name="twitter:site" content="noentiger.github.io/react-app-flexbox-grid">
+  <meta name="twitter:site" content="roylee0704.github.io/react-flexbox-grid">
   <meta name="twitter:title" content="React Flexbox Grid">
   <meta name="twitter:description" content="React Flexbox Grid is a set of React components implementing flexboxgrid with the power of CSS Modules.">
   <meta name="twitter:image" content="images/logo.png">
 
   <meta name="og:title" content="React Flexbox Grid">
   <meta name="og:description" content="React Flexbox Grid is a set of React components implementing flexboxgrid with the power of CSS Modules.">
-  <meta name="og:url" content="noentiger.github.io/react-app-flexbox-grid">
+  <meta name="og:url" content="roylee0704.github.io/react-flexbox-grid">
   <meta name="og:image" content="images/logo.png">
   <meta name="og:type" content="app">
 

doc/www/other/CNAME

@@ -1 +1 @@
-noentiger.com/react-flexboxgrid.com
+roylee0704.com/react-flexboxgrid.com

karma.conf.js

@@ -1,4 +1,4 @@
-const webpackConfig = require('./webpack.config.test');
+const webpackConfig = require('./webpack.config');
 
 module.exports = function karmaConfig(config) {
   config.set({
@@ -15,6 +15,11 @@ module.exports = function karmaConfig(config) {
     webpack: webpackConfig,
     webpackServer: {
       noInfo: true
-    }
+    },
+    plugins: [
+      'karma-webpack',
+      'karma-phantomjs-launcher',
+      'karma-mocha'
+    ]
   });
 };