Improving Maintainability of an Ant Design‑Based Component Library with HoC, Dumi, and Monorepo

The background explains that the company's web frontend uses React and Ant Design, and the original approach of forking the antd repository for customizations caused growing maintenance problems: inconsistent component modifications, cumbersome documentation generation, and difficult coordination between the icon and component libraries.

To address these issues, the team adopted three main strategies: (1) uniformly wrap components with higher‑order components (HoC) instead of directly modifying source code; (2) replace the outdated bisheng documentation framework with dumi , which treats code as documentation; and (3) manage both the component library and the icon library in a single monorepo using Lerna for version control and Yarn Workspace for dependency management.

The HoC approach was compared with direct source modification in a table, highlighting that HoC provides a decorator pattern, separates customization from source, and improves maintainability, while direct modification risks losing type definitions and complicates upgrades.

Using dumi enables documentation that mirrors the development code. An example component page looks like this: import React from 'react' import { Button } from 'antd' export default function () { return ( Primary Button ) } This snippet shows that no extra dependencies are needed and the syntax matches normal component usage, greatly speeding up documentation writing.

Because the new documentation tool differs from antd's original format, a conversion script is required to migrate existing demos, after which only a small amount of manual adjustment is needed.

The monorepo layout is illustrated below: . ├── lerna.json // lerna configuration file └── packages // sub‑projects directory ├── components // component library │ ├── docs │ │ └── index.md // documentation entry │ ├── src │ │ ├── button │ │ │ ├── demos // demo code blocks │ │ │ ├── index.md // component doc entry │ │ │ ├── index.less // component style │ │ │ └── index.tsx // component (HoC) │ ├── index.ts // library entry │ └── styles │ ├── custom.less // antd variable overrides │ └── index.less // style entry │ ├── .fatherrc.ts // build configuration │ └── .umirc.ts // documentation build configuration ├── icons // icon library └── icons-svg // SVG base library The monorepo brings advantages such as dependency and configuration reuse and easier inter‑project references, while its drawbacks include a larger overall project size and more complex CI setup.

For on‑demand loading, the dumi build is configured to output ES modules: export default { esm: 'babel' } And Less files can be imported on demand using a Babel plugin: "plugins": [ [ 'import', { libraryName: 'laiyed', libraryDirectory: 'lib/components', style: (module) => `${module}/index.css`, }, ], ]

To preserve Ant Design's extensive type definitions after HoC wrapping, the library’s entry file re‑exports the necessary types: /** * Component library entry file */ export type { ButtonProps } from './components/button' export { default as Button } from './components/button' // ......

Additional CSS is added to the documentation to replicate styles that were originally defined in bisheng templates, for example: /** Button */ .__dumi-default-previewer[id^='button'] .ant-btn { margin-right: 12px; margin-bottom: 12px; } .__dumi-default-previewer[id='button-ghost'] .ant-btn { margin-bottom: 0; } .__dumi-default-previewer[id='button-ghost'] .__dumi-default-previewer-demo > div { padding: 8px; background: rgb(190, 200, 200); } #demo-btn-disabled { padding: 8px; background: rgb(190, 200, 200); } #demo-btn-disabled .ant-btn { margin-bottom: 0; } /** ... */

In summary, by selecting modern tools such as HoC, dumi, and a monorepo architecture, the team significantly improved the development efficiency and long‑term maintainability of their internal Ant Design‑based component library.