bump v1.0.0

package.json

@@ -1,24 +1,32 @@
 {
- "name": "cra-template-typescript",
- "version": "1.1.2",
+ "name": "cra-template-antd-admin",
+ "version": "1.0.0",
  "keywords": [
  "react",
+ "admin",
  "create-react-app",
  "template",
- "typescript"
+ "typescript",
+ "antd",
+ "ant-design",
+ "styled-components",
+ "tailwind",
+ "tailwindcss",
+ "react-router",
+ "react-query"
  ],
- "description": "The base TypeScript template for Create React App.",
+ "description": "The antd admin template for Create React App.",
  "repository": {
  "type": "git",
- "url": "https://github.com/facebook/create-react-app.git",
+ "url": "https://github.com/FallOutChonny/cra-template-antd-admin.git",
  "directory": "packages/cra-template-typescript"
  },
  "license": "MIT",
  "engines": {
  "node": ">=14"
  },
  "bugs": {
- "url": "https://github.com/facebook/create-react-app/issues"
+ "url": "https://github.com/FallOutChonny/cra-template-antd-admin/issues"
  },
  "files": [
  "template",

template.json

@@ -7,10 +7,11 @@
  },
  "dependencies": {
  "antd": "^4.16.10",
- "history": "^5.0.0",
+ "history": "4.10.1",
+ "react-query": "^3.19.2",
  "react-router-dom": "^5.2.0",
  "styled-components": "^5.3.0",
- "tailwindcss": "^2.2.7"
+ "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7"
  },
  "devDependencies": {
  "@craco/craco": "^6.2.0",
@@ -22,13 +23,17 @@
  "@types/node": "^12.0.0",
  "@types/react": "^17.0.0",
  "@types/react-dom": "^17.0.0",
+ "@types/react-query": "^1.2.9",
  "@types/react-router-dom": "^5.1.8",
  "@types/styled-components": "^5.1.12",
  "antd-dayjs-webpack-plugin": "^1.0.6",
+ "autoprefixer": "^9",
  "babel-plugin-import": "^1.13.3",
  "babel-plugin-styled-components": "^1.13.2",
+ "enhanced-resolve": "^5.8.2",
  "husky": "^7.0.1",
  "lint-staged": "^11.1.2",
+ "postcss": "^7",
  "prettier": "^2.3.2",
  "typescript": "^4.1.2",
  "web-vitals": "^1.0.1",
@@ -45,5 +50,10 @@
  "lint-staged": {
  "*.{ts,tsx,js,jsx,json,css,scss,less}": ["prettier --write", "git add"]
  }
+ },
+ "tsconfg": {
+ "compilerOptions": {
+ "baseUrl": "src"
+ }
  }
 }

template/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

template/.env.development

@@ -0,0 +1,2 @@
+ANALYZER=false
+REACT_APP_BASENAME=

template/.env.production

@@ -0,0 +1,3 @@
+ANALYZER=true
+PUBLICR_URL=
+REACT_APP_BASENAME=

template/craco.config.js

@@ -1,6 +1,11 @@
+const path = require('path')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
+const AliasPlugin = require('enhanced-resolve/lib/AliasPlugin')
 const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
 
+const resolveApp = relativePath => path.resolve(__dirname, relativePath)
+
 module.exports = {
  style: {
  postcss: {
@@ -26,14 +31,42 @@ module.exports = {
  },
  webpack: {
  alias: {
-
+ '@icons': resolveApp('src/components/icons'),
+ '@pages': resolveApp('src/pages'),
+ '@services': resolveApp('src/hooks'),
+ '@hooks': resolveApp('src/hooks'),
+ '@utils': resolveApp('src/utils'),
+ '@lib': resolveApp('src/lib'),
  },
- plugins: {
- remove: [],
- add: [
- new AntdDayjsWebpackPlugin(),
- process.env.ANALYZER === 'true' && new BundleAnalyzerPlugin(),
- ].filter(Boolean),
+ configure: (config, { env, paths }) => {
+ if (process.env.ANALYZER === 'true') {
+ config.resolve.plugins.push(new BundleAnalyzerPlugin())
+ }
+
+ config.resolve.plugins = config.resolve.plugins.filter(
+ plugin => !(plugin instanceof ModuleScopePlugin)
+ )
+
+ config.resolve.plugins.push(
+ new AliasPlugin(
+ 'described-resolve',
+ [
+ {
+ name: '@components',
+ alias: [
+ resolveApp('src/components'),
+ resolveApp('src/components/ui'),
+ resolveApp('src/components/common'),
+ ],
+ },
+ ],
+ 'resolve'
+ )
+ )
+
+ // config.resolve.plugins.push(new AntdDayjsWebpackPlugin())
+
+ return config
  },
  },
 }

template/src/App.tsx

@@ -1,26 +1,62 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Suspense } from 'react'
+import { Route, Switch } from 'react-router-dom'
+import { Layout } from 'antd'
+import ErrorBoundary from '@components/ErrorBoundary'
+import Exception from '@components/Exception'
+import Sider from '@components/Sider'
+import Loading from '@components/Loading'
+import Home from '@pages/Home'
+import { routes, RouteProps } from '@lib/routes'
 
 function App() {
+ const renderRoute = (route: RouteProps) => {
+ if (!route.Component || !route.url) {
+ return null
+ }
+
+ return (
+ <Route
+ key={route.key}
+ exact={route.exact}
+ component={route.Component}
+ path={route.url}
+ />
+ )
+ }
+
+ const _routes = routes
+ .map(r => (r.children ? r.children.map(renderRoute) : renderRoute(r)))
+ .reduce((result: any[], route) => {
+ if (!route) {
+ return result
+ }
+ if (Array.isArray(route)) {
+ return [...result, ...route.filter(Boolean)]
+ }
+
+ result.push(route)
+
+ return result
+ }, [])
+
  return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.tsx</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
- );
+ <ErrorBoundary>
+ <Layout>
+ <Sider />
+ <Layout className="ml-200">
+ <Layout.Content>
+  <Suspense fallback={<Loading />}>
+  <Switch>
+  <Route exact path="/" component={Home} />
+  {_routes}
+  <Route component={Exception} />
+  </Switch>
+  </Suspense>
+ </Layout.Content>
+ </Layout>
+ </Layout>
+ </ErrorBoundary>
+ )
 }
 
-export default App;
+export default App