1. Several ways to develop component libraries

There are many tools for packaging component libraries

  • rollup, packed JS tools, very lightweight, integrated tree-shaking
  • create-react-app/vue-cli3, can quickly modify a component library scaffolding
  • webpackTo encapsulate
  • umi/father, rollup and Babel component packaging, docz documentation integration, TypeScript support, etc
  • Go directly to Ant-Design or elementUI’s Github repository and copy the code into your own component library scaffolding

Here are my articles on how to use webpack4.0 and rollup:

How to use the rollup package front-end components Use webpack4.0 lu single/multiple pages scaffold (jquery, react, vue, typescript)

Component system design ideas and patterns

We can encapsulate organisms with similar functions or requirements as a business component and expose interfaces for flexible customizability so that we can reuse the same logic and functionality across subsystems on different pages.

  • General-purpose components: Button, Icon, etc.
  • Layout components: Grid, Layout, etc.
  • Navigational components: like Breadcrumb,
  • Drop-down menus :Dropdown, Menu, etc.
  • Data entry components: form form, Switch Switch, Upload file, etc.
  • Data display components: such as Avator avatar, Table, List, etc.
  • Feedback components: such as Progress bar, Drawer, Modal dialog box, etc.
  • Other Business types

Component case column: hand touch hand to achieve a lightweight extensible Modal box (Modal) component

Component construction practice

React +umi/father+react

Principle:

  • React encapsulates components in index.jsexportUse exposure
  • Based on the UMI /father scaffolding, provide integration tools for component libraries or tool libraries packaged, we just need to change the configuration file to easily build a component library with documentation. Docz document
  • NPM release
  • Import directly

Project: XUI — Ant-Design, a lightweight UI component library based on React

Based on vuE-CLI3 + plug-in mount build

componentlib

element

Component test

Mini-case: Model components

  • Make sure thatCancel the eventMust be stated
  it('onCancel should be called'.() = > {
    const onCancel = jest.fn();  / / jest. Fn () returns a new, unused simulation function [] (https://www.jestjs.cn/docs/mock-function-api).
    const wrapper = mount(<Modal visible onCancel={onCancel} />);
    wrapper.find('.ant-btn').first().simulate('click');
    expect(onCancel).toHaveBeenCalled(); // Make sure the mock function is called
  });
Copy the code
  • Ensure that the value passed by type is true, that is, not:false.0.' '.null.undefined, andNaN
  it('danger type'.() = > {
    const wrapper = mount(<Modal okType="danger" visible />);
    expect(wrapper.find(Button).last().props().danger).toBeTruthy();
  });
Copy the code
  • Confirm mode should be turned off when the close button is clicked
  it('should close confirm modal when click close button'.() = > {
    jest.useFakeTimers();
    const onCancel = jest.fn();
    Modal.confirm({
      title: 'title'.content: 'content'.closable: true.closeIcon: 'X',
      onCancel,
    });
    act(() = > {
      jest.runAllTimers();
    });
    expect($$(`.ant-modal-close`)).toHaveLength(1); $$,'.ant-btn') [0].click();
    act(() = > {
      jest.runAllTimers();
    });
    expect($$(`.ant-modal-close`)).toHaveLength(0);
    expect(onCancel).toHaveBeenCalledTimes(1);
    jest.useRealTimers();
  });
Copy the code

React Jest ant-design Jest