Merge 255d4fbf3c into fd05496e16

e2e/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

e2e/cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:4000',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

e2e/cypress/e2e/BadgeCom.spec.cy.ts

@@ -0,0 +1,32 @@
+
+
+
+describe('Badge Ribbon Component', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:4000');
+    });
+  
+    it('should display all Badge Ribbons with correct texts', () => {
+      cy.get('.ant-ribbon').each((ribbon) => {
+        expect(ribbon).to.contain.text('Hippies');
+      });
+    });
+  
+    it('should display Badge Ribbons with correct colors', () => {
+      const colors = ['', 'pink', 'red', 'cyan', 'green', 'purple', 'volcano', 'magenta'];
+      colors.forEach((color, index) => {
+        cy.get('.ant-ribbon').eq(index).should('be.visible');
+        if (color === '') {
+          cy.get('.ant-ribbon').eq(index).should('have.class', `ant-ribbon ant-ribbon-placement-end css-dev-only-do-not-override-3rel02`);
+        } else {
+          cy.get('.ant-ribbon').eq(index).should('have.class', `ant-ribbon-color-${color}`);
+        }
+      });
+  });
+  
+    it('should display the Card titles correctly', () => {
+      cy.get('.ant-card-small .ant-card-head-title').each((title) => {
+        expect(title).to.contain.text('Pushes open the window');
+      });
+    });
+  });

e2e/cypress/e2e/Breadcrumb.spec.cy.ts

@@ -0,0 +1,32 @@
+describe('Bredcrumb Component', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:4000');
+    });
+  
+    describe('Normal Bredcrumb', () => {
+      it('should display the Bredcrumb', () => {
+        cy.contains('Danger Button').should('exist');
+      });
+  
+      it('should respond to click', () => {
+        cy.contains('Danger Button').click();
+        cy.contains('Loading Button').should('exist');
+        cy.get('.button-result').should('contain', 'Clicked');
+      });
+    });
+  
+    describe('Float Bredcrumb is exist', () => {
+      it('should display the Float Bredcrumb', () => {
+        const floatButton = cy.contains('FloatBtn');
+        floatButton.should('exist');
+        floatButton.should('contain', 'FloatBtn');
+      });
+  
+      it('Float Bredcrumb should respond to hover', () => {
+        const floatButton = cy.contains('FloatBtn');
+        floatButton.trigger('mouseover');
+        cy.get('.ant-tooltip-inner', { timeout: 10000 }).should('be.visible');
+      });
+    });
+  });
+  

e2e/cypress/e2e/CalendarCom.spec.cy.ts

@@ -0,0 +1,35 @@
+
+
+  describe('Calendar Component', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:4000');
+    });
+  
+    describe('Normal Calendar', () => {
+      it('should display the Calendar', () => {
+        cy.contains('Danger Button').should('exist');
+      });
+  
+      it('should respond to click', () => {
+        cy.contains('Danger Button').click();
+        cy.contains('Loading Button').should('exist');
+        cy.get('.button-result').should('contain', 'Clicked');
+      });
+    });
+  
+    describe('Float Calendar is exist', () => {
+      it('should display the Float Calendar', () => {
+        const floatButton = cy.contains('FloatBtn');
+        floatButton.should('exist');
+        floatButton.should('contain', 'FloatBtn');
+      });
+  
+      it('Float Calendar should respond to hover', () => {
+        const floatButton = cy.contains('FloatBtn');
+        floatButton.trigger('mouseover');
+        cy.get('.ant-tooltip-inner', { timeout: 10000 }).should('be.visible');
+      });
+    });
+  });
+  
+  

e2e/cypress/e2e/CheckboxCom.spec.cy.ts

@@ -0,0 +1,35 @@
+
+
+describe('Checkbox Component', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:4000');
+    });
+  
+    describe('Normal Checkbox', () => {
+      it('should display the Checkbox', () => {
+        cy.contains('Danger Button').should('exist');
+      });
+  
+      it('should respond to click', () => {
+        cy.contains('Danger Button').click();
+        cy.contains('Loading Button').should('exist');
+        cy.get('.button-result').should('contain', 'Clicked');
+      });
+    });
+  
+    describe('Float Checkbox is exist', () => {
+      it('should display the Float Checkbox', () => {
+        const floatButton = cy.contains('FloatBtn');
+        floatButton.should('exist');
+        floatButton.should('contain', 'FloatBtn');
+      });
+  
+      it('Float Calendar should respond to hover', () => {
+        const floatButton = cy.contains('FloatBtn');
+        floatButton.trigger('mouseover');
+        cy.get('.ant-tooltip-inner', { timeout: 10000 }).should('be.visible');
+      });
+    });
+  });
+  
+  

e2e/cypress/e2e/DatePickerCom.spec.cy.ts

@@ -0,0 +1,35 @@
+describe('DatePicker Component', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:4000');
+    });
+  
+    describe('Normal DatePicker', () => {
+      it('should display the DatePicker', () => {
+        cy.contains('Danger Button').should('exist');
+      });
+  
+      it('should respond to click', () => {
+        cy.contains('Danger Button').click();
+        cy.contains('Loading Button').should('exist');
+        cy.contains('Loading Button Float').should('exist');
+        cy.get('.button-result').should('contain', 'Clicked');
+      });
+    });
+  
+    describe('Float DatePicker is exist', () => {
+      it('should display the Float DatePicker', () => {
+        const floatButton = cy.contains('FloatBtn');
+        floatButton.should('exist');
+        floatButton.contains('Loading Button Float').should('exist');
+        floatButton.should('contain', 'FloatBtn');
+      });
+  
+      it('Float Calendar should respond to hover', () => {
+        const floatButton = cy.contains('FloatBtn');
+        floatButton.trigger('mouseover');
+        cy.get('.ant-tooltip-inner', { timeout: 10000 }).should('be.visible');
+      });
+    });
+  });
+  
+  

e2e/cypress/e2e/button.spec.cy.ts

@@ -0,0 +1,116 @@
+describe('Button Component', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:4000');
+  });
+
+  describe('Normal Button', () => {
+    it('should display the button', () => {
+      cy.contains('Danger Button').should('exist');
+    });
+
+    it('should respond to click', () => {
+      cy.contains('Danger Button').click();
+      cy.contains('Loading Button').should('exist');
+      cy.get('.button-result').should('contain', 'Clicked');
+    });
+  });
+
+  describe('Float Button is exist', () => {
+    it('should display the Float button', () => {
+      const floatButton = cy.contains('FloatBtn');
+      floatButton.should('exist');
+      floatButton.should('contain', 'FloatBtn');
+    });
+
+    it('Float button should respond to hover', () => {
+      const floatButton = cy.contains('FloatBtn');
+      floatButton.trigger('mouseover');
+      cy.get('.ant-tooltip-inner', { timeout: 10000 }).should('be.visible');
+    });
+  });
+});
+
+
+
+
+
+/// <reference types="cypress" />
+
+describe('Descriptions Components', () => {
+  beforeEach(() => {
+    // 访问你的 React 应用，如果是本地运行的，可以是 'http://localhost:3000'
+    cy.visit('http://localhost:4000');
+  });
+
+
+  it('should display Descriptions with default size initially', () => {
+    // 检查Descriptions组件
+    cy.get('.ant-descriptions')
+      .should('be.visible')
+      .and('have.class', 'ant-descriptions-bordered'); // 假设默认大小与'bordered'类有关
+  
+    // 检查radio按钮
+    cy.get('label.ant-radio-wrapper-checked')
+      .should('have.class', 'ant-radio-wrapper')
+      .and('contain', 'default'); // 检查label中包含的文本是否是'default'
+  
+    // 或者检查具体的input元素
+    cy.get('input.ant-radio-input:checked')
+      .should('have.value', 'default'); // 检查value是否为'default'
+  });
+  
+  
+
+  it('should change Descriptions size when Radio button is clicked', () => {
+    // 点击不同的 Radio 按钮并检查 Descriptions 的大小是否更新
+    
+    // 点击 'middle' radio 按钮
+    cy.get('input[type="radio"]').check('middle', { force: true });
+    // 确保 Descriptions 组件在更新后具有正确的类名
+    cy.get('.ant-descriptions-bordered')
+      .should('be.visible')
+      .and('have.class', 'ant-radio ant-wave-target'); // 假设 'middle' 的实际类名
+    
+    // 点击 'small' radio 按钮
+    cy.get('input[type="radio"]').check('small', { force: true });
+    // 确保 Descriptions 组件在更新后具有正确的类名
+    cy.get('.ant-descriptions-bordered')
+      .should('be.visible')
+      .and('have.class', 'ant-radio ant-wave-target'); // 假设 'small' 的实际类名
+    
+    // 点击 'default' radio 按钮
+    cy.get('input[type="radio"]').check('default', { force: true });
+    // 确保 Descriptions 组件在更新后具有正确的类名
+    cy.get('.ant-descriptions-bordered')
+      .should('be.visible')
+      .and('have.class', 'ant-radio ant-wave-target ant-radio-checked'); // 假设 'default' 的实际类名
+  });
+  
+  
+
+  it('should correctly display items within the Descriptions', () => {
+    // 检查每一个 `items` 是否在 Descriptions 中正确显示
+    cy.get('.ant-descriptions-bordered')
+      .contains('Cloud Database').should('exist');
+    cy.get('.ant-descriptions-bordered')
+      .contains('Prepaid').should('exist');
+    cy.get('.ant-descriptions-bordered')
+      .contains('18:00:00').should('exist');
+    cy.get('.ant-descriptions-bordered')
+      .contains('$80.00').should('exist');
+    cy.get('.ant-descriptions-bordered')
+      .contains('$20.00').should('exist');
+    cy.get('.ant-descriptions-bordered')
+      .contains('$60.00').should('exist');
+
+    // 检查 Config Info 的显示
+    cy.get('.ant-descriptions-bordered')
+      .contains('Data disk type: MongoDB').should('exist');
+    cy.get('.ant-descriptions-bordered')
+      .contains('Database version: 3.4').should('exist');
+    cy.get('.ant-descriptions-bordered')
+      .contains('Storage space: 10 GB').should('exist');
+    cy.get('.ant-descriptions-bordered')
+      .contains('Region: East China 1').should('exist');
+  });
+});

e2e/cypress/e2e/viewsComs.spec.cy.ts

@@ -0,0 +1,30 @@
+describe('Button Component', () => {
+
+  beforeEach(() => {
+    cy.visit('http://localhost:4000');
+  });
+
+  describe('Paragraph Typography', () => {
+    it('should display the Paragraph', () => {
+      const typography: Cypress.Chainable<JQuery<HTMLElement>> = cy.get('.ant-typography');
+      typography.should('exist');
+      typography.contains('Paragraph Testing');
+    });
+  });
+
+  describe('Paragraph Typography Hover', () => {
+    it('should display the Paragraph on hover', () => {
+      const typography: Cypress.Chainable<JQuery<HTMLElement>> = cy.get('.ant-typography-edit');
+      typography.trigger('mouseover');
+      cy.get('.ant-tooltip-inner', { timeout: 10000 }).should('be.visible');
+    });
+  });
+
+
+  describe('Divider Display', () => {
+    it('should display the Divider Text', () => {
+      cy.get('.ant-divider').should('exist');
+      cy.get('.ant-divider-inner-text').contains('Divider Text');
+    });
+  });
+});

e2e/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

e2e/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

e2e/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

e2e/cypress/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["cypress"]
+  },
+  "include": ["**/*.ts"]
+}

e2e/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "e2e-test",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ant-design/icons": "^5.3.7",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.94",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
+    "antd": "^5.16.0",
+    "dayjs": "^1.11.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "cross-env PORT=4000 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/cypress": "^1.1.3",
+    "cross-env": "^7.0.3",
+    "cypress": "^13.7.2"
+  }
+}

e2e/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

e2e/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

e2e/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

e2e/src/App.css

@@ -0,0 +1,38 @@
+.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);
+  }
+}

e2e/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  // render(<App />);
+  // const linkElement = screen.getByText(/learn react/i);
+  // expect(linkElement).toBeInTheDocument();
+});

e2e/src/App.tsx

@@ -0,0 +1,161 @@
+import { Col, Descriptions, Row } from 'antd';
+import ButtonTest from './components/ButtonTest';
+import ViewsComs from './components/ViewsComs';
+import Wrapper, { Item } from './components/Wrapper';
+import BreadcrumbCom from './components/Breadcrumb';
+import DropdownCom from './components/DropdownCom';
+import MenuCom from './components/MenuCom';
+import StepsCom from './components/StepsCom';
+import PaginationCom from './components/PaginationCom';
+import CascaderCom from './components/CascaderCom';
+import CheckboxCom from './components/CheckboxCom';
+import DatePickerCom from './components/DatePickerCom';
+import InputCom from './components/InputCom';
+import RateCom from './components/RateCom';
+import FormCom from './components/FormCom';
+import SelectCom from './components/SelectCom';
+import BadgeCom from './components/BadgeCom';
+import CalendarCom from './components/CalendarCom';
+import DescriptionsCom from './components/DescriptionsCom';
+import StatisticCom from './components/StatisticCom';
+import TagCom from './components/TagCom';
+import TimelineCom from './components/TimelineCom';
+
+
+
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+
+<Wrapper name='View Data'>
+        <Row>
+          <Col span={15}>
+            <Item title='integrated  Form and Menu'>
+              <Row>
+                <Col span={10}>
+                  <MenuCom></MenuCom>
+                </Col>
+                <Col span={14}>
+                  <FormCom></FormCom>
+                </Col>
+              </Row>
+            </Item>
+          </Col>
+
+          <Col span={9}>
+            <Item title='Calendar'>
+              <CalendarCom></CalendarCom>
+            </Item>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col span={12}>
+            <Item title='Descriptions'>
+              <DescriptionsCom></DescriptionsCom>
+            </Item>
+          </Col>
+
+          <Col span={12}>
+            <Item title='Statistic'>
+              <StatisticCom></StatisticCom>
+            </Item>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col span={12}>
+            <Item title='Tag'>
+              <TagCom></TagCom>
+            </Item>
+          </Col>
+
+          <Col span={12}>
+            <Item title='Timeline'>
+              <TimelineCom></TimelineCom>
+            </Item>
+          </Col>
+        </Row>
+
+
+
+
+      </Wrapper>
+
+
+
+
+      <Wrapper name='导航类'>
+        <Item title='Menu'>
+          <MenuCom></MenuCom>
+        </Item>
+        <Item title='Dropdown'>
+          <DropdownCom />
+        </Item>
+        <Item title='Steps'>
+          <StepsCom />
+        </Item>
+        <Item title='Pagination'>
+          <PaginationCom />
+        </Item>
+        <Item title='Breadcrumb'>
+          <BreadcrumbCom />
+        </Item>
+      </Wrapper>
+
+      <Wrapper name='Input Data类'>
+        <Item title='Cascader'>
+          <CascaderCom />
+        </Item>
+        <Row>
+          <Col span={12}>
+            <Item title='Checkbox'>
+              <CheckboxCom />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item title='DatePicker'>
+              <DatePickerCom />
+            </Item>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <Item title='Input'>
+              <InputCom />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item title='Rate'>
+              <RateCom />
+            </Item>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col span={12}>
+            <Item title='Form'>
+              <FormCom></FormCom>
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item title='Select'>
+              <SelectCom></SelectCom>
+            </Item>
+          </Col>
+        </Row>
+      </Wrapper>
+
+    
+
+
+
+      <ButtonTest></ButtonTest>
+      <ViewsComs></ViewsComs>
+    </div>
+  );
+}
+
+export default App;

e2e/src/components/BadgeCom.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Badge, Card, Space } from 'antd';
+
+const App: React.FC = () => (
+  <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+    <Badge.Ribbon text="Hippies">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="pink">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="red">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="cyan">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="green">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="purple">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="volcano">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="magenta">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+  </Space>
+);
+
+export default App;

e2e/src/components/Breadcrumb.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { HomeOutlined, UserOutlined } from '@ant-design/icons';
+import { Breadcrumb } from 'antd';
+
+const BreadcrumbCom: React.FC = () => (
+  <Breadcrumb
+    style={{width: '30%', margin: '0 auto'}}
+    items={[
+      {
+        href: '',
+        title: <HomeOutlined />,
+      },
+      {
+        href: '',
+        title: (
+          <>
+            <UserOutlined />
+            <span>Application List</span>
+          </>
+        ),
+      },
+      {
+        title: 'Application',
+      },
+    ]}
+  />
+);
+
+export default BreadcrumbCom;

e2e/src/components/ButtonTest/button.css

@@ -0,0 +1,3 @@
+.button-wrapper .ant-btn {
+  margin: 0 10px;
+}

e2e/src/components/ButtonTest/index.tsx

@@ -0,0 +1,26 @@
+import {useState} from 'react';
+import { Button, FloatButton } from 'antd';
+import Wrapper from '../Wrapper';
+import './button.css';
+
+export default function ButtonTest() {
+  const [name, setName] = useState('');
+
+  const clickHandler = () => {
+    setName('Clicked');
+  }
+
+  return (
+    <Wrapper name='Button Components'>
+      <div className='button-wrapper'>
+        <Button danger loading={name === 'Clicked'} onClick={clickHandler}>Danger Button</Button>
+        <Button loading={true}>Loading Button</Button>
+        <Button type="primary">Primary Button</Button>
+        <Button shape="circle">Circle C</Button>
+        <FloatButton tooltip={<div>Float Button</div>} description='FloatBtn' />
+        <span className='button-result'>{name}</span>
+        <span className='float-button-result'>{name}</span>
+      </div>
+    </Wrapper>
+  )
+}

e2e/src/components/CalendarCom.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { BadgeProps, CalendarProps } from 'antd';
+import { Badge, Calendar } from 'antd';
+import type { Dayjs } from 'dayjs';
+
+const getListData = (value: Dayjs) => {
+  let listData;
+  switch (value.date()) {
+    case 8:
+      listData = [
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'success', content: 'This is usual event.' },
+      ];
+      break;
+    case 10:
+      listData = [
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'success', content: 'This is usual event.' },
+        { type: 'error', content: 'This is error event.' },
+      ];
+      break;
+    case 15:
+      listData = [
+        { type: 'warning', content: 'This is warning event' },
+        { type: 'success', content: 'This is very long usual event......' },
+        { type: 'error', content: 'This is error event 1.' },
+        { type: 'error', content: 'This is error event 2.' },
+        { type: 'error', content: 'This is error event 3.' },
+        { type: 'error', content: 'This is error event 4.' },
+      ];
+      break;
+    default:
+  }
+  return listData || [];
+};
+
+const getMonthData = (value: Dayjs) => {
+  if (value.month() === 8) {
+    return 1394;
+  }
+};
+
+const App: React.FC = () => {
+  const monthCellRender = (value: Dayjs) => {
+    const num = getMonthData(value);
+    return num ? (
+      <div className="notes-month">
+        <section>{num}</section>
+        <span>Backlog number</span>
+      </div>
+    ) : null;
+  };
+
+  const dateCellRender = (value: Dayjs) => {
+    const listData = getListData(value);
+    return (
+      <ul className="events">
+        {listData.map((item) => (
+          <li key={item.content}>
+            <Badge status={item.type as BadgeProps['status']} text={item.content} />
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
+    if (info.type === 'date') return dateCellRender(current);
+    if (info.type === 'month') return monthCellRender(current);
+    return info.originNode;
+  };
+
+  return <Calendar cellRender={cellRender} />;
+};
+
+export default App;

e2e/src/components/CascaderCom.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Cascader } from 'antd';
+
+const { SHOW_CHILD } = Cascader;
+
+interface Option {
+  value: string | number;
+  label: string;
+  children?: Option[];
+}
+const options: Option[] = [
+  {
+    label: 'Light',
+    value: 'light',
+    children: new Array(20)
+      .fill(null)
+      .map((_, index) => ({ label: `Number ${index}`, value: index })),
+  },
+  {
+    label: 'Bamboo',
+    value: 'bamboo',
+    children: [
+      {
+        label: 'Little',
+        value: 'little',
+        children: [
+          {
+            label: 'Toy Fish',
+            value: 'fish',
+          },
+          {
+            label: 'Toy Cards',
+            value: 'cards',
+          },
+          {
+            label: 'Toy Bird',
+            value: 'bird',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const CascaderCom: React.FC = () => {
+  const onChange = (value: any) => {
+    console.log(value);
+  };
+  return (
+    <>
+      <Cascader
+        style={{ width: '100%' }}
+        options={options}
+        onChange={onChange}
+        multiple
+        maxTagCount="responsive"
+        showCheckedStrategy={SHOW_CHILD}
+        defaultValue={[
+          ['bamboo', 'little', 'fish'],
+          ['bamboo', 'little', 'cards'],
+          ['bamboo', 'little', 'bird'],
+        ]}
+      />
+      <br />
+      <br />
+      <Cascader
+        style={{ width: '100%' }}
+        options={options}
+        onChange={onChange}
+        multiple
+        maxTagCount="responsive"
+        defaultValue={[['bamboo']]}
+      />
+    </>
+  );
+};
+
+export default CascaderCom;

e2e/src/components/CheckboxCom.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Checkbox } from 'antd';
+import type { GetProp } from 'antd';
+
+const onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
+  console.log('checked = ', checkedValues);
+};
+
+const plainOptions = ['Apple', 'Pear', 'Orange'];
+
+const options = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange' },
+];
+
+const optionsWithDisabled = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange', disabled: false },
+];
+
+const CheckboxCom: React.FC = () => (
+  <>
+    <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
+    <br />
+    <br />
+    <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
+    <br />
+    <br />
+    <Checkbox.Group
+      options={optionsWithDisabled}
+      disabled
+      defaultValue={['Apple']}
+      onChange={onChange}
+    />
+  </>
+);
+
+export default CheckboxCom;

e2e/src/components/DatePickerCom.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { DatePickerProps } from 'antd';
+import { DatePicker, Space } from 'antd';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
+
+const { RangePicker } = DatePicker;
+
+const dateFormat = 'YYYY/MM/DD';
+const weekFormat = 'MM/DD';
+const monthFormat = 'YYYY/MM';
+
+/** Manually entering any of the following formats will perform date parsing */
+const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY'];
+
+const customFormat: DatePickerProps['format'] = (value) =>
+  `custom format: ${value.format(dateFormat)}`;
+
+const customWeekStartEndFormat: DatePickerProps['format'] = (value) =>
+  `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
+    .endOf('week')
+    .format(weekFormat)}`;
+
+const App: React.FC = () => (
+  <Space direction="vertical" size={12}>
+    <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
+    <DatePicker defaultValue={dayjs('01/01/2015', dateFormatList[0])} format={dateFormatList} />
+    <DatePicker defaultValue={dayjs('2015/01', monthFormat)} format={monthFormat} picker="month" />
+    <DatePicker defaultValue={dayjs()} format={customWeekStartEndFormat} picker="week" />
+    <RangePicker
+      defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]}
+      format={dateFormat}
+    />
+    <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={customFormat} />
+  </Space>
+);
+
+export default App;

e2e/src/components/DescriptionsCom.tsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import { Button, Descriptions, Radio } from 'antd';
+import type { DescriptionsProps, RadioChangeEvent } from 'antd';
+
+const borderedItems: DescriptionsProps['items'] = [
+  {
+    key: '1',
+    label: 'Product',
+    children: 'Cloud Database',
+  },
+  {
+    key: '2',
+    label: 'Billing',
+    children: 'Prepaid',
+  },
+  {
+    key: '3',
+    label: 'Time',
+    children: '18:00:00',
+  },
+  {
+    key: '4',
+    label: 'Amount',
+    children: '$80.00',
+  },
+  {
+    key: '5',
+    label: 'Discount',
+    children: '$20.00',
+  },
+  {
+    key: '6',
+    label: 'Official',
+    children: '$60.00',
+  },
+  {
+    key: '7',
+    label: 'Config Info',
+    children: (
+      <>
+        Data disk type: MongoDB
+        <br />
+        Database version: 3.4
+        <br />
+        Package: dds.mongo.mid
+        <br />
+        Storage space: 10 GB
+        <br />
+        Replication factor: 3
+        <br />
+        Region: East China 1
+        <br />
+      </>
+    ),
+  },
+];
+
+const items: DescriptionsProps['items'] = [
+  {
+    key: '1',
+    label: 'Product',
+    children: 'Cloud Database',
+  },
+  {
+    key: '2',
+    label: 'Billing',
+    children: 'Prepaid',
+  },
+  {
+    key: '3',
+    label: 'Time',
+    children: '18:00:00',
+  },
+  {
+    key: '4',
+    label: 'Amount',
+    children: '$80.00',
+  },
+  {
+    key: '5',
+    label: 'Discount',
+    children: '$20.00',
+  },
+  {
+    key: '6',
+    label: 'Official',
+    children: '$60.00',
+  },
+];
+
+const App: React.FC = () => {
+  const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');
+
+  const onChange = (e: RadioChangeEvent) => {
+    console.log('size checked', e.target.value);
+    setSize(e.target.value);
+  };
+
+  return (
+    <div>
+      <Radio.Group onChange={onChange} value={size}>
+        <Radio value="default">default</Radio>
+        <Radio value="middle">middle</Radio>
+        <Radio value="small">small</Radio>
+      </Radio.Group>
+      <br />
+      <br />
+      <Descriptions
+        bordered
+        title="Custom Size"
+        size={size}
+        extra={<Button type="primary">Edit</Button>}
+        items={borderedItems}
+      />
+      <br />
+      <br />
+      <Descriptions
+        title="Custom Size"
+        size={size}
+        extra={<Button type="primary">Edit</Button>}
+        items={items}
+      />
+    </div>
+  );
+};
+
+export default App;

e2e/src/components/DropdownCom.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { DownOutlined, UserOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Button, Dropdown, message, Space, Tooltip } from 'antd';
+
+const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  message.info('Click on left button.');
+  console.log('click left button', e);
+};
+
+const handleMenuClick: MenuProps['onClick'] = (e) => {
+  message.info('Click on menu item.');
+  console.log('click', e);
+};
+
+const items: MenuProps['items'] = [
+  {
+    label: '1st menu item',
+    key: '1',
+    icon: <UserOutlined />,
+  },
+  {
+    label: '2nd menu item',
+    key: '2',
+    icon: <UserOutlined />,
+  },
+  {
+    label: '3rd menu item',
+    key: '3',
+    icon: <UserOutlined />,
+    danger: true,
+  },
+  {
+    label: '4rd menu item',
+    key: '4',
+    icon: <UserOutlined />,
+    danger: true,
+    disabled: true,
+  },
+];
+
+const menuProps = {
+  items,
+  onClick: handleMenuClick,
+};
+
+const App: React.FC = () => (
+  <Space wrap>
+    <Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button menu={menuProps} placement="bottom" icon={<UserOutlined />}>
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button
+      menu={menuProps}
+      buttonsRender={([leftButton, rightButton]) => [
+        <Tooltip title="tooltip" key="leftButton">
+          {leftButton}
+        </Tooltip>,
+        React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: true }),
+      ]}
+    >
+      With Tooltip
+    </Dropdown.Button>
+    <Dropdown menu={menuProps}>
+      <Button>
+        <Space>
+          Button
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Dropdown>
+    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>
+      Danger
+    </Dropdown.Button>
+  </Space>
+);
+
+export default App;

e2e/src/components/FormCom.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Cascader,
+  Checkbox,
+  ColorPicker,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Radio,
+  Select,
+  Slider,
+  Switch,
+  TreeSelect,
+  Upload,
+} from 'antd';
+
+const { RangePicker } = DatePicker;
+const { TextArea } = Input;
+
+const normFile = (e: any) => {
+  if (Array.isArray(e)) {
+    return e;
+  }
+  return e?.fileList;
+};
+
+const FormDisabledDemo: React.FC = () => {
+  const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
+
+  return (
+    <>
+      <Checkbox
+        checked={componentDisabled}
+        onChange={(e) => setComponentDisabled(e.target.checked)}
+      >
+        Form disabled
+      </Checkbox>
+      <Form
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 14 }}
+        layout="horizontal"
+        style={{ maxWidth: 600 }}
+      >
+        <Form.Item label="Checkbox" name="disabled" valuePropName="checked">
+          <Checkbox>Checkbox</Checkbox>
+        </Form.Item>
+        <Form.Item label="Radio">
+          <Radio.Group>
+            <Radio value="apple"> Apple </Radio>
+            <Radio value="pear"> Pear </Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="TreeSelect">
+          <TreeSelect
+            treeData={[
+              { title: 'Light', value: 'light', children: [{ title: 'Bamboo', value: 'bamboo' }] },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item label="Cascader">
+          <Cascader
+            options={[
+              {
+                value: 'zhejiang',
+                label: 'Zhejiang',
+                children: [
+                  {
+                    value: 'hangzhou',
+                    label: 'Hangzhou',
+                  },
+                ],
+              },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item label="DatePicker">
+          <DatePicker />
+        </Form.Item>
+        <Form.Item label="RangePicker">
+          <RangePicker />
+        </Form.Item>
+        <Form.Item label="Switch" valuePropName="checked">
+          <Switch />
+        </Form.Item>
+        <Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>
+          <Upload action="/upload.do" listType="picture-card">
+            <button style={{ border: 0, background: 'none' }} type="button">
+              <PlusOutlined />
+              <div style={{ marginTop: 8 }}>Upload</div>
+            </button>
+          </Upload>
+        </Form.Item>
+        <Form.Item label="Slider">
+          <Slider />
+        </Form.Item>
+        <Form.Item label="ColorPicker">
+          <ColorPicker />
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+export default () => <FormDisabledDemo />;

e2e/src/components/InputCom.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Input, Select, Space } from 'antd';
+
+const { Search } = Input;
+
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+  },
+];
+
+const InputCom: React.FC = () => (
+  <Space direction="vertical" size="middle">
+    <Space.Compact>
+      <Input defaultValue="26888888" />
+    </Space.Compact>
+    <Space.Compact>
+      <Input style={{ width: '20%' }} defaultValue="0571" />
+      <Input style={{ width: '80%' }} defaultValue="26888888" />
+    </Space.Compact>
+    <Space.Compact>
+      <Search addonBefore="https://" placeholder="input search text" allowClear />
+    </Space.Compact>
+    <Space.Compact style={{ width: '100%' }}>
+      <Input defaultValue="Combine input and button" />
+      <Button type="primary">Submit</Button>
+    </Space.Compact>
+    <Space.Compact>
+      <Select defaultValue="Zhejiang" options={options} />
+      <Input defaultValue="Xihu District, Hangzhou" />
+    </Space.Compact>
+    <Space.Compact size="large">
+      <Input addonBefore={<SearchOutlined />} placeholder="large size" />
+      <Input placeholder="another input" />
+    </Space.Compact>
+  </Space>
+);
+
+export default InputCom;

e2e/src/components/MenuCom.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import {
+  AppstoreOutlined,
+  ContainerOutlined,
+  DesktopOutlined,
+  MailOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  PieChartOutlined,
+} from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Button, Menu, Col, Row } from 'antd';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+const items: MenuItem[] = [
+  { key: '1', icon: <PieChartOutlined />, label: 'Option 1' },
+  { key: '2', icon: <DesktopOutlined />, label: 'Option 2' },
+  { key: '3', icon: <ContainerOutlined />, label: 'Option 3' },
+  {
+    key: 'sub1',
+    label: 'Navigation One',
+    icon: <MailOutlined />,
+    children: [
+      { key: '5', label: 'Option 5' },
+      { key: '6', label: 'Option 6' },
+      { key: '7', label: 'Option 7' },
+      { key: '8', label: 'Option 8' },
+    ],
+  },
+  {
+    key: 'sub2',
+    label: 'Navigation Two',
+    icon: <AppstoreOutlined />,
+    children: [
+      { key: '9', label: 'Option 9' },
+      { key: '10', label: 'Option 10' },
+      {
+        key: 'sub3',
+        label: 'Submenu',
+        children: [
+          { key: '11', label: 'Option 11' },
+          { key: '12', label: 'Option 12' },
+        ],
+      },
+    ],
+  },
+];
+
+const App: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  };
+
+  return (
+    <Row gutter={8}>
+      <Col span={24}>
+        <div style={{ width: 256 }}>
+          <Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>
+            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+          </Button>
+          <Menu
+            defaultSelectedKeys={['1']}
+            mode="inline"
+            theme="dark"
+            inlineCollapsed={collapsed}
+            items={items}
+          />
+        </div>
+      </Col>
+      {/* <Col span={15} style={{margin: '140px 0 0 40px'}}>
+        <Menu mode="horizontal" items={items} />;
+      </Col> */}
+    </Row>
+  );
+};
+
+export default App;

e2e/src/components/PaginationCom.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PaginationProps } from 'antd';
+import { Pagination } from 'antd';
+
+const onChange: PaginationProps['onChange'] = (pageNumber) => {
+  console.log('Page: ', pageNumber);
+};
+
+const App: React.FC = () => (
+  <>
+    <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
+    <br />
+    <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />
+  </>
+);
+
+export default App;

e2e/src/components/RateCom.tsx

@@ -0,0 +1,22 @@
+
+import React from 'react';
+import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
+import { Flex, Rate } from 'antd';
+
+const customIcons: Record<number, React.ReactNode> = {
+  1: <FrownOutlined />,
+  2: <FrownOutlined />,
+  3: <MehOutlined />,
+  4: <SmileOutlined />,
+  5: <SmileOutlined />,
+};
+
+const RateCom: React.FC = () => (
+  <Flex gap="middle" vertical>
+    <Rate defaultValue={2} character={({ index = 0 }) => index + 1} />
+    <Rate character="A" defaultValue={4} allowHalf style={{ fontSize: 36 }} />
+    <Rate defaultValue={3} character={({ index = 0 }) => customIcons[index + 1]} />
+  </Flex>
+);
+
+export default RateCom;

e2e/src/components/SelectCom.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Radio, Select, Space } from 'antd';
+import type { ConfigProviderProps, RadioChangeEvent, SelectProps } from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
+
+const options: SelectProps['options'] = [];
+
+for (let i = 10; i < 36; i++) {
+  options.push({
+    value: i.toString(36) + i,
+    label: i.toString(36) + i,
+  });
+}
+
+const handleChange = (value: string | string[]) => {
+  console.log(`Selected: ${value}`);
+};
+
+const App: React.FC = () => {
+  const [size, setSize] = useState<SizeType>('middle');
+
+  const handleSizeChange = (e: RadioChangeEvent) => {
+    setSize(e.target.value);
+  };
+
+  return (
+    <>
+      <Radio.Group value={size} onChange={handleSizeChange}>
+        <Radio.Button value="large">Large</Radio.Button>
+        <Radio.Button value="middle">Default</Radio.Button>
+        <Radio.Button value="small">Small</Radio.Button>
+      </Radio.Group>
+      <br />
+      <br />
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Select
+          size={size}
+          defaultValue="a1"
+          onChange={handleChange}
+          style={{ width: 200 }}
+          options={options}
+        />
+        <Select
+          mode="multiple"
+          size={size}
+          placeholder="Please select"
+          defaultValue={['a10', 'c12']}
+          onChange={handleChange}
+          style={{ width: '100%' }}
+          options={options}
+        />
+        <Select
+          mode="tags"
+          size={size}
+          placeholder="Please select"
+          defaultValue={['a10', 'c12']}
+          onChange={handleChange}
+          style={{ width: '100%' }}
+          options={options}
+        />
+      </Space>
+    </>
+  );
+};
+
+export default App;

e2e/src/components/StatisticCom.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { CountdownProps } from 'antd';
+import { Col, Row, Statistic } from 'antd';
+
+const { Countdown } = Statistic;
+
+const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Dayjs is also OK
+
+const onFinish: CountdownProps['onFinish'] = () => {
+  console.log('finished!');
+};
+
+const onChange: CountdownProps['onChange'] = (val) => {
+  if (typeof val === 'number' && 4.95 * 1000 < val && val < 5 * 1000) {
+    console.log('changed!');
+  }
+};
+
+const App: React.FC = () => (
+  <Row gutter={16}>
+    <Col span={12}>
+      <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
+    </Col>
+    <Col span={12}>
+      <Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />
+    </Col>
+    <Col span={24} style={{ marginTop: 32 }}>
+      <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
+    </Col>
+    <Col span={12}>
+      <Countdown title="Countdown" value={Date.now() + 10 * 1000} onChange={onChange} />
+    </Col>
+  </Row>
+);
+
+export default App;

e2e/src/components/StepsCom.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Steps } from 'antd';
+
+const description = 'This is a description.';
+const StepsCom: React.FC = () => (
+  <Steps
+    current={1}
+    items={[
+      {
+        title: 'Finished',
+        description,
+      },
+      {
+        title: 'In Progress',
+        description,
+        subTitle: 'Left 00:00:08',
+      },
+      {
+        title: 'Waiting',
+        description,
+      },
+    ]}
+  />
+);
+
+export default StepsCom;

e2e/src/components/TagCom.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  MinusCircleOutlined,
+  SyncOutlined,
+} from '@ant-design/icons';
+import { Divider, Flex, Tag } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <Divider orientation="left">Without icon</Divider>
+    <Flex gap="4px 0" wrap>
+      <Tag color="success">success</Tag>
+      <Tag color="processing">processing</Tag>
+      <Tag color="error">error</Tag>
+      <Tag color="warning">warning</Tag>
+      <Tag color="default">default</Tag>
+    </Flex>
+    <Divider orientation="left">With icon</Divider>
+    <Flex gap="4px 0" wrap>
+      <Tag icon={<CheckCircleOutlined />} color="success">
+        success
+      </Tag>
+      <Tag icon={<SyncOutlined spin />} color="processing">
+        processing
+      </Tag>
+      <Tag icon={<CloseCircleOutlined />} color="error">
+        error
+      </Tag>
+      <Tag icon={<ExclamationCircleOutlined />} color="warning">
+        warning
+      </Tag>
+      <Tag icon={<ClockCircleOutlined />} color="default">
+        waiting
+      </Tag>
+      <Tag icon={<MinusCircleOutlined />} color="default">
+        stop
+      </Tag>
+    </Flex>
+  </>
+);
+
+export default App;

e2e/src/components/TimelineCom.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ClockCircleOutlined } from '@ant-design/icons';
+import { Timeline } from 'antd';
+
+const App: React.FC = () => (
+  <Timeline
+    mode="alternate"
+    items={[
+      {
+        children: 'Create a services site 2015-09-01',
+      },
+      {
+        children: 'Solve initial network problems 2015-09-01',
+        color: 'green',
+      },
+      {
+        dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
+        children: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`,
+      },
+      {
+        color: 'red',
+        children: 'Network problems being solved 2015-09-01',
+      },
+      {
+        children: 'Create a services site 2015-09-01',
+      },
+      {
+        dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
+        children: 'Technical testing 2015-09-01',
+      },
+    ]}
+  />
+);
+
+export default App;

e2e/src/components/ViewsComs.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Wrapper from './Wrapper';
+import { Typography, Divider } from 'antd';
+
+const { Paragraph } = Typography;
+
+type ViewsComsProps = {
+  // props
+};
+
+const ViewsComs: React.FC<ViewsComsProps> = (props) => {
+  return (
+    <Wrapper name='Views Components'>
+      <Paragraph>Paragraph Testing</Paragraph>
+      <Divider>Divider Text</Divider>
+      <Paragraph
+        editable={{
+          tooltip: 'click to edit text',
+        }}
+      >
+        {'customIconStr'}
+      </Paragraph>
+    </Wrapper>
+  );
+};
+
+export default ViewsComs;

e2e/src/components/Wrapper.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+type WrapperProps = {
+  name: string;
+};
+
+const wrapperStyle = {
+  border: '1px solid #ddd',
+  margin: '20px',
+  padding: '20px',
+  borderRadius: '10px'
+}
+
+const Wrapper: React.FC<React.PropsWithChildren<WrapperProps>> = ({
+  name,
+  children
+}) => {
+  return (
+    <div style={wrapperStyle}>
+      <h1 style={{color: 'orange'}}>{name}</h1>
+      {children}
+    </div>
+  );
+};
+
+export const Item: React.FC<React.PropsWithChildren<{title?: string, block?: boolean}>> = ({ children, title }) => {
+  return <div style={{margin: '20px', textAlign: 'center', border: '1px dashed #ddd', padding: '0 40px 40px'}}>
+    <h3 style={{color: '#f76256', padding: '10px 0'}}>{title} Components</h3>
+    {children}
+  </div>;
+};
+
+export default Wrapper;

e2e/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

e2e/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

e2e/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

e2e/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

e2e/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

e2e/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

e2e/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}