Add ant design

config/webpack.config.js

@@ -63,6 +63,8 @@ const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
+const lessRegex = /\.less$/;
+const lessModuleRegex = /\.module\.less$/;
 
 const hasJsxRuntime = (() => {
   if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
@@ -151,6 +153,13 @@ module.exports = function (webpackEnv) {
           loader: require.resolve(preProcessor),
           options: {
             sourceMap: true,
+            ...(preProcessor === 'less-loader'
+                ? {
+                  lessOptions: {
+                    javascriptEnabled: true,
+                  },
+                }
+                : void 0),
           },
         }
       );
@@ -496,6 +505,36 @@ module.exports = function (webpackEnv) {
                 },
               }),
             },
+            {
+              test: lessRegex,
+              exclude: lessModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                },
+                'less-loader',
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            {
+              test: lessModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
+                },
+                'less-loader',
+              ),
+              sideEffects: true,
+            },
             // Opt-in support for SASS (using .scss or .sass extensions).
             // By default we support SASS Modules with the
             // extensions .module.scss or .module.sass

package.json

@@ -18,6 +18,7 @@
     "@types/react-router-dom": "^5.3.2",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
+    "antd": "^4.16.13",
     "axios": "0.24.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
@@ -50,6 +51,8 @@
     "jest-circus": "26.6.0",
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
+    "less": "^4.1.2",
+    "less-loader": "7.3.0",
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
@@ -64,7 +67,7 @@
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "^11.0.3",
     "react-dom": "^17.0.2",
-    "react-redux": "7.2.0",
+    "react-redux": "7.2.6",
     "react-refresh": "^0.8.3",
     "react-router-dom": "^5.3.0",
     "resolve": "1.18.1",

src/App.less

@@ -0,0 +1,44 @@
+@import '~antd/dist/antd.less';
+
+#components-form-demo-control-hooks .ant-btn {
+  margin-right: 8px;
+}
+
+/*.App {*/
+/*  text-align: center;*/
+/*}*/
+
+/*.App-logo {*/
+/*  height: 40vmin;*/
+/*  pointer-events: none;*/
+/*}*/
+
+/*@media (prefers-reduced-motion: no-preference) {*/
+/*  .App-logo {*/
+/*    animation: App-logo-spin infinite 20s linear;*/
+/*  }*/
+/*}*/
+
+/*.App-header {*/
+/*  background-color: #282c34;*/
+/*  min-height: 100vh;*/
+/*  display: flex;*/
+/*  flex-direction: column;*/
+/*  align-items: center;*/
+/*  justify-content: center;*/
+/*  font-size: calc(10px + 2vmin);*/
+/*  color: white;*/
+/*}*/
+
+/*.App-link {*/
+/*  color: #61dafb;*/
+/*}*/
+
+/*@keyframes App-logo-spin {*/
+/*  from {*/
+/*    transform: rotate(0deg);*/
+/*  }*/
+/*  to {*/
+/*    transform: rotate(360deg);*/
+/*  }*/
+/*}*/

src/App.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import logo from './logo.svg';
-import './App.css';
-import Button from './Button';
+import './App.less';
+import MyButton from './MyButton';
 import ThemeToggle from './ThemeToggle';
 import ThemeDisplay from './ThemeDisplay';
 import { ThemeProvider } from './ThemeProvider';
 import CountDisplay from './CountDisplay';
 import UseRef from './components/use-ref/UseRef';
 import { useAppDispatch } from './app/hooks';
+import Login from './pages/login/Login';
 import { incrementAsync } from './features/auth/authSlice';
 
 function App() {
@@ -41,32 +42,35 @@ function App() {
 
   return (
     <ThemeProvider>
-      <input value={count} onChange={(event) => setCount(+event.target.value)} />
-      <CountDisplay onClick={handleClick} />
+      <div hidden>
+        <input value={count} onChange={(event) => setCount(+event.target.value)} />
+        <CountDisplay onClick={handleClick} />
 
-      <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>
-          <Button content="Alert" onClick={handleClick} />
-          <ThemeToggle />
-          <ThemeDisplay onClick={handleThemDisplayOnClick} />
-          {loading && <label>Loading....</label>}
-        </header>
-        <section>
-          <UseRef />
-        </section>
+        <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>
+            <MyButton content="Alert" onClick={handleClick} />
+            <ThemeToggle />
+            <ThemeDisplay onClick={handleThemDisplayOnClick} />
+            {loading && <label>Loading....</label>}
+          </header>
+          <section>
+            <UseRef />
+          </section>
+        </div>
       </div>
+      <Login />
     </ThemeProvider>
   );
 }

src/Button.tsx → src/MyButton.tsx

@@ -5,8 +5,8 @@ interface Props {
   onClick: () => void;
 }
 
-function Button(props: Props) {
+function MyButton(props: Props) {
   console.log('Button re-render');
   return <button onClick={props.onClick}>{props.content}a</button>;
 }
-export default React.memo(Button);
+export default React.memo(MyButton);

src/layouts/AuthLayout.less

@@ -0,0 +1,53 @@
+@import '~antd/es/style/themes/default.less';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background-color: white;
+}
+
+.logo {
+  height: 44px;
+  margin-right: 16px;
+  vertical-align: top;
+}
+
+.container > * {
+  box-shadow: none !important;
+}
+
+.content {
+  flex: 1;
+  padding: 32px 0;
+}
+
+.top {
+  text-align: center;
+}
+
+.header {
+  height: 44px;
+  line-height: 44px;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.title {
+  position: relative;
+  top: 2px;
+  color: @heading-color;
+  font-weight: 600;
+  font-size: 33px;
+  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+.desc {
+  margin-top: 12px;
+  margin-bottom: 40px;
+  color: @text-color-secondary;
+  font-size: @font-size-base;
+}

src/layouts/AuthLayout.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Layout, Typography } from 'antd';
+import logo from '../logo.svg';
+import './AuthLayout.less';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function AuthLayout(props: Props) {
+  return (
+    <div className={'container'}>
+      <div className={'content'}>
+        <div className={'top'}>
+          <div className={'header'}>
+            <a href="/">
+              <a>
+                <img className={'logo'} src={logo} alt="App Logo" />
+                <span className={'title'}>Feednext</span>
+              </a>
+            </a>
+          </div>
+          <div className={'desc'} />
+        </div>
+        {props.children}
+      </div>
+      <Layout.Footer style={{ background: 'transparent', textAlign: 'center' }}>
+        <Typography.Text>Feednext © 2020. All rights reserved</Typography.Text>
+      </Layout.Footer>
+    </div>
+  );
+}

src/pages/login/Login.less

@@ -0,0 +1,15 @@
+@import '~antd/es/style/themes/default.less';
+
+.main {
+  width: 368px;
+  margin: 0 auto;
+
+  .submit {
+    width: 50%;
+  }
+
+  .register {
+    float: right;
+    line-height: @btn-height-lg;
+  }
+}