refactor the project with rsuite 5 and typescript

.eslintrc.js

@@ -1,41 +1,40 @@
-'use strict';
-
 const OFF = 0;
-// const WARNING = 1;
+const WARNING = 1;
 const ERROR = 2;
 
 module.exports = {
-  'env': {
-    'browser': true,
-    'es6': true
+  env: {
+    browser: true,
+    es6: true
   },
-  'parser': 'babel-eslint',
-  'plugins': [
-    'babel'
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier'
   ],
-  'parserOptions': {
-    'ecmaVersion': 6,
-    'sourceType': 'module',
-    'ecmaFeatures': {
-      'jsx': true,
-      'experimentalObjectRestSpread': true
-    }
+  parserOptions: {},
+  plugins: ['@typescript-eslint', 'react'],
+  rules: {
+    semi: [ERROR, 'always'],
+    'space-infix-ops': ERROR,
+    'prefer-spread': ERROR,
+    'no-multi-spaces': ERROR,
+    'class-methods-use-this': WARNING,
+    'arrow-parens': [ERROR, 'as-needed'],
+    '@typescript-eslint/no-unused-vars': ERROR,
+    '@typescript-eslint/no-explicit-any': OFF,
+    '@typescript-eslint/explicit-function-return-type': OFF,
+    '@typescript-eslint/explicit-member-accessibility': OFF,
+    '@typescript-eslint/no-namespace': OFF,
+    '@typescript-eslint/explicit-module-boundary-types': OFF,
+    'react/display-name': OFF,
+    'react/prop-types': OFF
   },
-  'rules': {
-    'indent': [ERROR, 2, { 'SwitchCase': 1 }],    //规定代码的缩进方式：2个空格
-    'camelcase': ERROR,                         //强制驼峰法命名
-    'curly': ERROR,                             //必须使用 if(){} 中的{}
-    'eqeqeq': ERROR,                            //必须使用全等
-    'brace-style': [ERROR, '1tbs'],             //大括号风格
-    'quotes': [ERROR, 'single'],                //引号类型
-    'semi': [ERROR, 'always'],                  //语句强制分号结尾
-    'space-infix-ops': ERROR,                   //中缀操作符周围要不要有空格
-    'no-param-reassign': OFF,                   //不允许对函数的形参进行赋值
-    'prefer-spread': ERROR,                     //首选展开运算
-    'comma-dangle': OFF,                        //不允许或强制在对象字面量或者数组属性的结尾使用逗号
-    'padded-blocks': OFF,                       //规定代码块前后是否要加空行
-    'prefer-const': OFF,
-    'no-var': OFF,
-    'one-var': OFF
+  settings: {
+    react: {
+      version: 'detect'
+    }
   }
 };

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  singleQuote: true,
+  arrowParens: 'avoid',
+  trailingComma: 'none'
+};

README.md

@@ -1,27 +1,34 @@
-# RSUITE ANALYTICS 
+# Admin Dashboard Template
 
-这是一个 React Suite 示例项目
+Ease developers’ life with the React Suite 5. TypeScript will help with optimizing. Quick start & easily extensible code.
 
-![demo](./readme.jpg)
+![preview](./preview-1.png)
 
+![preview](./preview-2.png)
 
-## 开发
+## Development
+
+Fork this repo to your namespace and clone to your local machine.
 
 ```
-npm run dev
+git clone [email protected]:<YOUR NAME>/rsuite-admin-template.git
+$ cd rsuite-admin-template
 ```
 
-
-## 测试
+Install dependencies
 
 ```
-npm run test
+npm install
 ```
 
+Now you can start the development server by running npm run dev
 
-## 打包发布
-
+It's serving at http://127.0.0.1:3100/ by default.
 
 ```
-npm run build
-```
+npm run dev
+```
+
+## License
+
+MIT © [simonguo](https://github.com/simonguo)

babel.config.js

@@ -0,0 +1,25 @@
+module.exports = (api, options) => {
+  const { NODE_ENV } = options || process.env;
+  const dev = NODE_ENV === 'development';
+  const modules = NODE_ENV === 'esm' ? false : 'commonjs';
+
+  if (api) {
+    api.cache(() => NODE_ENV);
+  }
+
+  return {
+    presets: [
+      ['@babel/preset-env', { modules, loose: true }],
+      ['@babel/preset-react', { development: dev, runtime: 'automatic' }],
+      '@babel/typescript'
+    ],
+    plugins: [
+      ['@babel/plugin-proposal-class-properties', { loose: true }],
+      '@babel/plugin-proposal-optional-chaining',
+      '@babel/plugin-proposal-export-namespace-from',
+      '@babel/plugin-proposal-export-default-from',
+      ['@babel/plugin-transform-runtime', { useESModules: !modules }],
+      ['module-resolver', { alias: { '@': './src' } }]
+    ]
+  };
+};