feat: refactor project basic layout, basic config, upgrade to Antd V4

Author: chachaxw

.commitlintrc.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "always"
+}

husky.config.js

@@ -0,0 +1,11 @@
+const isWin = process.platform === 'win32';
+const commands = ['lint-staged', isWin ? 'npm run jest:win' : 'npm run jest'];
+
+const tasks = (arr) => arr.join(' && ');
+
+module.exports = {
+  hooks: {
+    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
+    'pre-commit': tasks(commands),
+  },
+};

package-lock.json

@@ -4,47 +4,56 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@storybook/addon-knobs": "^5.2.1",
-    "@types/classnames": "^2.2.8",
+    "@ant-design/compatible": "^1.0.5",
+    "@commitlint/cli": "^9.1.1",
+    "@commitlint/config-conventional": "^9.1.1",
+    "@storybook/addon-knobs": "^6.0.4",
+    "@testing-library/react": "^10.4.8",
+    "@types/classnames": "^2.2.10",
     "@types/dva": "^1.1.0",
-    "@types/enzyme": "^3.9.4",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/jest": "^24.0.18",
-    "@types/node": "^12.7.5",
-    "@types/qs": "^6.5.3",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^26.0.9",
+    "@types/node": "^14.0.27",
+    "@types/nprogress": "^0.2.0",
+    "@types/qs": "^6.9.4",
     "@types/react": "^16.9.2",
-    "@types/react-document-title": "^2.0.3",
+    "@types/react-document-title": "^2.0.4",
     "@types/react-dom": "^16.9.0",
     "@types/react-infinite-scroller": "^1.2.1",
-    "@types/react-loadable": "^5.5.1",
-    "@types/redux-logger": "^3.0.7",
+    "@types/react-loadable": "^5.5.3",
+    "@types/react-motion": "^0.0.29",
+    "@types/redux-logger": "^3.0.8",
     "@types/storybook__addon-knobs": "^5.0.4",
-    "@types/storybook__react": "^4.0.2",
-    "antd": "^3.23.4",
-    "axios": "^0.19.0",
+    "@types/storybook__react": "^5.2.1",
+    "antd": "^4.5.4",
+    "axios": "^0.19.2",
     "classnames": "^2.2.6",
+    "commitizen": "^4.1.2",
     "date-fns": "^2.2.1",
     "dva": "^2.4.1",
     "dva-loading": "^3.0.14",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.3.5",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.3",
+    "enzyme-to-json": "^3.5.0",
     "faker": "^4.1.0",
-    "history": "^4.10.1",
-    "jest-fetch-mock": "^2.1.2",
-    "lodash": "^4.17.11",
+    "history": "^5.0.0",
+    "jest-fetch-mock": "^3.0.3",
+    "lodash": "^4.17.19",
     "lodash-decorators": "^6.0.1",
-    "node-sass": "^4.12.0",
-    "path-to-regexp": "^3.1.0",
+    "node-sass": "^4.14.1",
+    "nprogress": "^0.2.0",
+    "path-to-regexp": "^6.1.0",
     "qs": "^6.9.0",
     "query-string": "^6.8.3",
-    "react": "^16.8.6",
+    "react": "^16.13.1",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.13.1",
     "react-hot-loader": "^4.12.14",
     "react-infinite-scroller": "^1.2.4",
     "react-loadable": "^5.5.0",
-    "react-test-renderer": "^16.8.6",
+    "react-motion": "^0.5.2",
+    "react-test-renderer": "^16.13.1",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.1.0",
     "typescript": "^3.6.3"
@@ -56,17 +65,14 @@
     "build": "react-app-rewired build",
     "staging": "cross-env REACT_APP_BUILD=staging react-app-rewired start",
     "test": "react-app-rewired test",
-    "jest": "CI=true react-app-rewired test",
+    "jest": "CI=true yarn test",
+    "jest:win": "set CI=true&&yarn test",
+    "coverage": "npm test -- --coverage",
     "tslint": "tslint --fix 'src/**/*.(ts|tsx)'",
     "mock": "json-server mock/db.js",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged && npm run jest"
-    }
-  },
   "lint-staged": {
     "*.(ts|tsx)": [
       "npm run check"
@@ -82,28 +88,33 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@storybook/addon-actions": "^5.1.9",
-    "@storybook/addon-info": "^5.1.9",
-    "@storybook/addon-links": "^5.1.9",
-    "@storybook/addons": "^5.1.9",
-    "@storybook/react": "^5.1.9",
-    "babel-plugin-import": "^1.12.0",
-    "cross-env": "^5.2.0",
-    "customize-cra": "^0.5.0",
-    "husky": "^3.0.3",
-    "lint-staged": "^9.2.1",
+    "@storybook/addon-actions": "^6.0.4",
+    "@storybook/addon-info": "^5.3.19",
+    "@storybook/addon-links": "^6.0.4",
+    "@storybook/addons": "^6.0.4",
+    "@storybook/react": "^6.0.4",
+    "babel-plugin-import": "^1.13.0",
+    "cross-env": "^7.0.2",
+    "customize-cra": "^1.0.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.11",
     "react-app-rewire-hot-loader": "^2.0.1",
-    "react-app-rewired": "^2.1.1",
-    "react-scripts": "^3.0.1",
-    "redux-mock-store": "^1.5.3",
-    "tslint": "^5.18.0",
+    "react-app-rewired": "^2.1.6",
+    "react-scripts": "^3.4.2",
+    "redux-mock-store": "^1.5.4",
+    "tslint": "^6.1.3",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-lines-between-class-members": "^1.3.4",
-    "tslint-react": "^4.0.0",
-    "tslint-react-hooks": "^2.1.1",
-    "webpack-cli": "^3.3.5"
+    "tslint-react": "^5.0.0",
+    "tslint-react-hooks": "^2.2.2",
+    "webpack-cli": "^3.3.12"
   },
   "engines": {
     "node": ">= 8.9.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

package.json

@@ -0,0 +1,74 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

public/css/nprogress.css

@@ -13,6 +13,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel='stylesheet' href='%PUBLIC_URL%/css/nprogress.css' />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/index.html

@@ -1,16 +1,16 @@
-import './App.css';
-
 import { Layout } from 'antd';
 import { connect } from 'dva';
 import React, { FC } from 'react';
 
-import { Content, ErrorBoundary, Footer, Header, SideBar } from './components';
+import { BreadCrumbs, Content, ErrorBoundary, Footer, Header, SideBar } from './components';
 import { Auth } from './models/global';
-import AppRoutes from './routes';
-import routesConfig from './routes/config';
+import { AppRoutes } from './routes';
+import { appRoutes } from './routes/config';
 import { getFlatMenuKeys } from './utils/utils';
 
-const menu = routesConfig.app;
+import './App.css';
+
+const menu = appRoutes.app;
 const flatMenuKeys = getFlatMenuKeys(menu);
 
 interface DvaProps {
@@ -29,13 +29,19 @@ const App: FC<Props> = (props: Props) => {
 
   return (
     <Layout className="App">
-      <SideBar collapsed={collapsed} menu={menu} onCollapse={onCollapse}
-        flatMenuKeys={flatMenuKeys} location={location} />
+      <SideBar
+        menu={menu}
+        location={location}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+        flatMenuKeys={flatMenuKeys}
+      />
       <Layout>
         <Header />
         <Content>
+          <BreadCrumbs menu={menu} url={location.pathname} />
           <ErrorBoundary>
-            <AppRoutes app={app} auth={auth} />
+            <AppRoutes menu={menu} app={app} auth={auth} />
           </ErrorBoundary>
         </Content>
         <Footer className="Footer" />

src/App.tsx

@@ -0,0 +1,7 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+
+import { appRoutes } from '../../routes';
+import BreadCrumbs from './BreadCrumbs';
+
+storiesOf('BreadCrumbs', module).add('default', () => <BreadCrumbs menu={appRoutes.app} url="/app/dashboard" />);

src/components/BreadCrumbs/BreadCrumbs.stories.tsx

@@ -1,29 +1,50 @@
-import { Breadcrumb } from 'antd';
+import { Breadcrumb, Typography } from 'antd';
 import { Link } from 'dva/router';
-import React, { PureComponent } from 'react';
+import React, { FC } from 'react';
 
-interface InternalProps {
-  first?: string;
-  second?: string;
+import { RouteConfig } from '../../routes';
+import { getBreadcrumbNameMap, urlToList } from '../../utils/utils';
+
+const { Item } = Breadcrumb;
+const { Text } = Typography;
+
+// 渲染 Breadcrumb 子节点
+// Render the Breadcrumb child node
+interface DefaultItemProps {
+  path: string;
+  name: string;
+  component?: string;
 }
 
-class BreadCrumbs extends PureComponent<InternalProps> {
-
-  public render() {
-    const { first, second } = this.props;
-
-    return (
-      <span>
-        <Breadcrumb style={{ margin: '12px 0' }}>
-          <Breadcrumb.Item>
-            <Link to={'/app/dashboard'}>首页</Link>
-          </Breadcrumb.Item>
-          {first && <Breadcrumb.Item>{first}</Breadcrumb.Item>}
-          {second && <Breadcrumb.Item>{second}</Breadcrumb.Item>}
-        </Breadcrumb>
-      </span>
-    );
-  }
+export const DefaultItem: FC<DefaultItemProps> = (props) => {
+  const { path, component, name } = props;
+  return component ? <Link to={path}>{name}</Link> : <Text>{name}</Text>;
+};
+
+interface Props {
+  url: string;
+  menu: RouteConfig[];
 }
 
+export const BreadCrumbs: FC<Props> = (props) => {
+  const { url, menu } = props;
+  const urlList = urlToList(url);
+  const breadCrumbsMap = getBreadcrumbNameMap(menu);
+  const breadCrumbs = urlList.map((item: string) => breadCrumbsMap[item]).filter((item) => item && item);
+
+  if (!(breadCrumbs && breadCrumbs.length)) {
+    return null;
+  }
+
+  return (
+    <Breadcrumb style={{ margin: '12px 16px' }}>
+      {breadCrumbs.map((item: RouteConfig) => (
+        <Item key={item.path}>
+          <DefaultItem path={item.path} name={item.name} component={item.component} />
+        </Item>
+      ))}
+    </Breadcrumb>
+  );
+};
+
 export default BreadCrumbs;