upgrade create-react-app-2.x and other libs, add custom theme

.eslintrc

@@ -1,7 +1,6 @@
 {
  "extends": "react-app",
  "rules": {
- "import/no-webpack-loader-syntax": 0,
  "no-multi-spaces": 1,
  "react/jsx-tag-spacing": 1, // 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行
  "jsx-quotes": 1,

.gitignore

@@ -1,11 +1,7 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
-*/node_modules
-client/node_modules
-server/node_modules
-mqtt/node_modules
 
 # testing
 /coverage
@@ -23,6 +19,3 @@ mqtt/node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-.idea
-package-lock.json

CHANGELOG.md

@@ -0,0 +1,63 @@
+### 更新日志
+
+#### 2017-07-08
+- 依赖包版本升级
+ - react@15.6.1
+ - antd@2.11.2
+ - webpack@2.6.1
+ - 等等
+#### 2017-08-01
+- 引入redux系列
+ - redux@3.7.2
+ - redux-thunk@2.2.0
+ - react-redux@5.0.5
+- 增加权限管理模块
+ - 使用easy-mock模拟数据模拟登录接口
+ - 使用redux系列将登录用户数据传递给权限组件
+ - 权限组件采用Render Callback的方式传递权限给需要受控制的组件（具体做法请查看源代码。）
+ - 用户状态保存在localStorage中
+ - 具体做法请运行项目查看
+ - PS：以上管理权限只是一种方式，但这绝对不是唯一的方式，也不是最好的方式。如果你有更好的方式，不妨加上面的群和大家一起分享下。😄😄
+- 增加路径别名
+ - 使用@别名处理引入组件相对路径过长问题。
+ - 缺点：编辑器不能使用快捷提示和快捷跳转到相应的文件
+#### 2017-08-13
+- 权限管理模块增加页面跳转权限验证
+ - 点击权限管理的路由拦截，若没有访问权限则会跳转到404页面。
+ - 大致实现方式(非常简单)：通过向自定义router组件传入store，登录之后可获取到redux中的权限state数据，并通过判断是否包含权限进行跳转。ps: 该demo的效果是管理员登录之后才能跳转到路由拦截页面。具体操作请拉取代码尝试。
+#### 2017-08-26
+- 增加响应式布局
+ - 替换antd Col 组件的响应式栅格为md(具体参数用法请查看antd官方文档)
+ - 初始化页面是获取当前浏览器宽度设置菜单显示类型
+ - 监听window的onresize函数，设置菜单显示类型。PS：浏览器宽度存入redux中，方便组件之间传递。
+![截图](https://raw.githubusercontent.com/yezihaohao/react-admin/master/src/style/imgs/mobile.gif)
+#### 2017-09-13
+- 依赖包版本升级
+ - antd@2.13.1(目前最新版)
+
+#### 2017-10-21
+- 开发环境增加react-hot-loader-保持状态刷新组件(译：实时调整组件),可参考以下相关项目
+ - [react-hot-loader](https://github.com/gaearon/react-hot-loader)
+
+#### 2017-12-12
+- 依赖包版本升级
+ - antd@3.0.1(目前最新版)
+ - react-router-dom@4.2.2
+- 大改动
+ - react-router切换4.x版本，切换响应的版本路由写法(具体见代码更新日志) 
+ - ps: react-router 3.x的版本请查看代码分支router3.x
+
+#### 2018-01-12
+- 增加cssmodule的支持（css, less）
+ - 建议用css预处理器，文件名为 xxx.module.less，引入相应组件即可使用。 
+
+ - 具体做法参见新增模块，路由后缀：/app/cssModule。[点击访问](http://cheng_haohao.oschina.io/reactadmin/#/app/cssModule)
+
+#### 2018-10-13
+- 重大更新
+ - 升级create-react-app 2.x，详情文档见[官方文档](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
+- 升级大部分第三方库，升级版本见
+- 增加自定义主题功能
+ - 主题基础样式配置见[]()
+ - 修改主题基础样式后执行`yarn theme 或 npm run theme`，默认主题即可生效
+ - 页面上可自定义主题颜色配置(根据此可添加字体大小等其他antd的默认样式)

README.md

@@ -5,7 +5,7 @@ react-admin system solution
 
 ### 问题和方案汇总：[issue](https://github.com/yezihaohao/react-admin/issues/12)
 
-### 最下方增加版本更新日志😁
+### 更新日志迁移至[CHANGELOG.md](https://github.com/yezihaohao/react-admin/blob/master/CHANGELOG.md)😁
 
 ### 前言
 > 网上react后台管理开源免费的完整版项目比较少，所以利用空余时间集成了一个版本出来，已放到GitHub
@@ -150,60 +150,6 @@ yarn start or npm start
 yarn build or npm run build
 ```
 
-### 更新日志
-
-#### 2017-07-08
-- 依赖包版本升级
- - react@15.6.1
- - antd@2.11.2
- - webpack@2.6.1
- - 等等
-#### 2017-08-01
-- 引入redux系列
- - redux@3.7.2
- - redux-thunk@2.2.0
- - react-redux@5.0.5
-- 增加权限管理模块
- - 使用easy-mock模拟数据模拟登录接口
- - 使用redux系列将登录用户数据传递给权限组件
- - 权限组件采用Render Callback的方式传递权限给需要受控制的组件（具体做法请查看源代码。）
- - 用户状态保存在localStorage中
- - 具体做法请运行项目查看
- - PS：以上管理权限只是一种方式，但这绝对不是唯一的方式，也不是最好的方式。如果你有更好的方式，不妨加上面的群和大家一起分享下。😄😄
-- 增加路径别名
- - 使用@别名处理引入组件相对路径过长问题。
- - 缺点：编辑器不能使用快捷提示和快捷跳转到相应的文件
-#### 2017-08-13
-- 权限管理模块增加页面跳转权限验证
- - 点击权限管理的路由拦截，若没有访问权限则会跳转到404页面。
- - 大致实现方式(非常简单)：通过向自定义router组件传入store，登录之后可获取到redux中的权限state数据，并通过判断是否包含权限进行跳转。ps: 该demo的效果是管理员登录之后才能跳转到路由拦截页面。具体操作请拉取代码尝试。
-#### 2017-08-26
-- 增加响应式布局
- - 替换antd Col 组件的响应式栅格为md(具体参数用法请查看antd官方文档)
- - 初始化页面是获取当前浏览器宽度设置菜单显示类型
- - 监听window的onresize函数，设置菜单显示类型。PS：浏览器宽度存入redux中，方便组件之间传递。
-![截图](https://raw.githubusercontent.com/yezihaohao/react-admin/master/src/style/imgs/mobile.gif)
-#### 2017-09-13
-- 依赖包版本升级
- - antd@2.13.1(目前最新版)
-
-#### 2017-10-21
-- 开发环境增加react-hot-loader-保持状态刷新组件(译：实时调整组件),可参考以下相关项目
- - [react-hot-loader](https://github.com/gaearon/react-hot-loader)
-
-#### 2017-12-12
-- 依赖包版本升级
- - antd@3.0.1(目前最新版)
- - react-router-dom@4.2.2
-- 大改动
- - react-router切换4.x版本，切换响应的版本路由写法(具体见代码更新日志) 
- - ps: react-router 3.x的版本请查看代码分支router3.x
-
-#### 2018-01-12
-- 增加cssmodule的支持（css, less）
- - 建议用css预处理器，文件名为xxx.module.less，引入相应组件即可使用。
-   - 具体做法参见新增模块，路由后缀：/app/cssModule。[点击访问](http://cheng_haohao.oschina.io/reactadmin/#/app/cssModule)
-
 ### 结尾
 该项目会不定时更新，后续时间会添加更多的模块
 

config/env.js

@@ -27,24 +27,27 @@ var dotenvFiles = [
 
 // Load environment variables from .env* files. Suppress warnings using silent
 // if this file is missing. dotenv will never modify any environment variables
-// that have already been set.
+// that have already been set. Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
 dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
- require('dotenv').config({
- path: dotenvFile,
- });
+ require('dotenv-expand')(
+ require('dotenv').config({
+ path: dotenvFile,
+ })
+ );
  }
 });
 
 // We support resolving modules according to `NODE_PATH`.
 // This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebookincubator/create-react-app/issues/253.
+// https://github.com/facebook/create-react-app/issues/253.
 // It works similar to `NODE_PATH` in Node itself:
 // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
 // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
 // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
 process.env.NODE_PATH = (process.env.NODE_PATH || '')

config/jest/cssTransform.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
+// http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
  process() {

config/jest/fileTransform.js

@@ -3,10 +3,28 @@
 const path = require('path');
 
 // This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
+// http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
  process(src, filename) {
- return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+ const assetFilename = JSON.stringify(path.basename(filename));
+
+ if (filename.match(/\.svg$/)) {
+ return `module.exports = {
+ __esModule: true,
+ default: ${assetFilename},
+ ReactComponent: (props) => ({
+ $$typeof: Symbol.for('react.element'),
+ type: 'svg',
+ ref: null,
+ key: null,
+ props: Object.assign({}, props, {
+ children: ${assetFilename}
+ })
+ }),
+ };`;
+ }
+
+ return `module.exports = ${assetFilename};`;
  },
 };

config/paths.js

@@ -5,20 +5,20 @@ const fs = require('fs');
 const url = require('url');
 
 // Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebookincubator/create-react-app/issues/637
+// https://github.com/facebook/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
 const envPublicUrl = process.env.PUBLIC_URL;
 
-function ensureSlash(path, needsSlash) {
- const hasSlash = path.endsWith('/');
+function ensureSlash(inputPath, needsSlash) {
+ const hasSlash = inputPath.endsWith('/');
  if (hasSlash && !needsSlash) {
- return path.substr(path, path.length - 1);
+ return inputPath.substr(0, inputPath.length - 1);
  } else if (!hasSlash && needsSlash) {
- return `${path}/`;
+ return `${inputPath}/`;
  } else {
- return path;
+ return inputPath;
  }
 }
 
@@ -41,6 +41,7 @@ function getServedPath(appPackageJson) {
 // config after eject: we're in ./config/
 module.exports = {
  dotenv: resolveApp('.env'),
+ appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
@@ -49,8 +50,8 @@ module.exports = {
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
+ proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
- vendorConfig: resolveApp('config/vendor.config.js')
 };