Use NutUI to build a "custom business style" component library | JD Cloud technical team

Author: JD Retail Tong En

This article introduces how to use the NutUI component library to build a set of business component libraries for exclusive business styles.

NutUI is a JD-style mobile component library. NutUI currently supports Vue and React technology stacks, and supports Taro multi-terminal adaptation.

current implementation

General component libraries will provide users with a way to modify the theme. For example, in the NutUI component library, users are provided with two methods:

• Modify CSS variables, the NutUI component library supports theme customization through the global configuration component ConfigProvider component;

const customTheme = {
  nutuiBadgeBorderRadius: '12px 12px 12px 0',
}

<ConfigProvider theme={customTheme}>
  <Badge value="NEW">
    <Avatar icon="my" shape="square" />
  </Badge>
</ConfigProvider>

• Through SCSS variables, the NutUI component library provides a set of custom theme style files to directly overwrite existing style files to complete theme customization.

// 新建一个 SCSS 文件 custom_theme.scss 进行自定义
// 主色调
$primary-color: #478EF2;
$primary-color-end: #496AF2;

// vue 版本
{
  test: /\.(sa|sc)ss$/,
  use: [
    {
      loader: 'sass-loader',
      options: {
        // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档
        data: `@import "@/assets/custom_theme.scss";@import "@nutui/nutui-react/dist/styles/variables.scss";`,
       }
     }
  ]
}

Current Problems and Solutions

The above two methods are relatively simple for us to implement a single project, but if every project under our business line needs to be accessed in this way, then this access method will appear clumsy.

So how can we access it gracefully?

Our idea is that NutUI and the business side will jointly output a set of component libraries that belong to their own business style. Among them, NutUI provides a component library to support the configuration and compilation capabilities of theme customization, and the business side outputs interaction and visual specifications to jointly complete the adaptation scheme of the component library, output the NPM package of the customized component library, and then provide support in business projects.

In this way, in business development, you no longer need to pay attention to the issue of theme customization.

Landing plan

After clarifying the direction, we gave a revision plan based on the structure of the existing component library. The sorting process is as follows:

Below, we will disassemble the implementation plan for better access.

Adaptation layer: add compilation configuration and execution script

In the adaptation layer, we hope to reduce the cost for developers to build component library projects, and provide developers with a set of quick build script tools. For example, you can use npm run dev to quickly start local projects, npm run test to start single-test verification, and npm run dev:taro:weapp to start locally adapted Taro projects.

On this basis, we have added compilation items that adapt to the business line. For example, you can use npm run dev:taro:weapp:jmapp to start the local "adapt Taro" project that "adapts to Jingmai business (jmapp) style" ".

The specific implementation is as follows:

"dev:taro:weapp:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:weapp:jmapp",

That is, by setting the environment variable projectId='jmapp', inform the business line that the compilation script is currently running to adapt to the theme variable files or font files that the business line depends on. For example, we will refer to different file information according to projectId in the load-style.js file, as follows:

const projectId = process.env.VITE_APP_PROJECT_ID
if (nameLowerCase === 'icon') {
  rewrite =
    `import '../../../styles/font${
      projectId ? `-${projectId}` : ''
    }/iconfont.css'\n` + rewrite
}

Similarly, we will modify the theme generated files, etc. accordingly. At the same time, we will also complete the adaptation scheme of the demo demonstration at this layer, that is, modify the variable file path introduced in demo app.tsx, and the method is similar.

Component layer: add variable files, adapt components according to business vision specifications

1. Add variable files

After completing the adaptation layer, we need to add the required variable files and font files in the corresponding directory. We can directly copy the original theme and modify it to the name we need, such as variables-jmapp.scss. At this time, start npm run dev:taro:weapp:jmapp, and you will see a demo presentation consistent with the default theme.

Next, it is necessary to revise the extracted CSS variable values ​​into variable values ​​in the business vision according to the visual specification provided by the business party, such as:

// 默认品牌色-京东主题色
$brand-color: var(--nutui-brand-color, #fa2c19) !default;

// 修订后品牌色-京麦主题色
$brand-color: var(--nutui-brand-color, #3768fa) !default;

Use this to push, check and revise variable values ​​one by one. You will see such a change in effect, from the Jingdong theme on the right to the Jingmai theme on the left, as shown in the figure:

Theme Difference Display

2. Adapt components according to business vision specifications

Generally, there will be some special interaction methods on the business side, and if these interaction methods can be transformed into general interaction methods, it is recommended to put these interaction methods into the implementation of the component library, which means that the component library has been strengthened output of the function. And this is also a part that takes a lot of time when doing business specification adaptation in the component library.

Through in-depth cooperation with the Jingmai team this time, we have also added 20+ new component functions and enhanced the adaptability of the NutUI component library. For more details, please refer to the NutUI New Demo.

Output layer: Demo and business theme customization package

At the component layer, we start the local running script to display a complete demo demonstration. Through the demo demonstration, we quickly check whether the current component library has covered the business vision specification. If it is confirmed that the verification has been completely completed, then we are ready to publish Conditions for theme customization packages.

Next we just need to compile and publish the theme package. Among them, the compilation script part is similar to the release of the default package, and the configuration logic refers to the first step of the adaptation layer.

For the publishing process, refer to the following. During the testing phase, we recommend releasing beta versions.

User Layer: Authentication Theme Custom Package

To verify the theme package, just like using other common packages, we import the package and install and run it, and then we can see the effect of our use.

summary

Through the above operations, we can customize the theme for our line of business, once and for all, team members no longer need to make a trade-off between using the component library and theme customization.

I don't know if you are moved. If you are interested, try to use NutUI to complete your own set of business theme packages.

{{o.name}}

{{m.name}}