Design and Implementation of Xianyu Front-end Component Library

Background: Xianyu has grown into a complex product with many business lines and rapid demand growth, requiring a unified component library to improve efficiency and consistency.

Design Goal: The library aims to cover 80% of product line needs, providing a flexible, reusable component material pool.

Requirements: Establish UI specifications, create a cross‑team design language group, and define clear objectives: improve development efficiency, raise quality, ensure unified interaction experience, and reduce compatibility issues.

Key Objectives:

Increase efficiency by eliminating duplicate work across business lines.

Enhance quality through shared best‑practice components.

Provide a consistent cross‑platform user experience.

Solve compatibility and testing cost problems.

Architecture Analysis: Two packaging strategies were evaluated.

Single‑Package

All components are bundled together and released as one package (similar to Ant Design). Advantages: simple relative imports, single version management. Disadvantages: tight coupling, whole‑project repackaging for minor changes, inability to reuse existing group capabilities, higher maintenance cost.

Multi‑Package

Each component is independent, published separately, and managed under a monorepo (packages folder). Advantages: flexible publishing, on‑demand usage, reuse of existing project‑management flow, reduced duplicate dependencies. Disadvantages: inter‑component dependencies require NPM packages or symlinks, version conflicts, higher learning curve for developers.

Conclusion: Based on Xianyu’s multi‑team, long‑term maintenance needs, a Lerna‑based multi‑package approach was chosen, with atomic components managed as single packages and higher‑level business components in the multi‑package structure.

UI Style Strategy: Move away from inline styles to CSS modules with a unified prefix. Expose a pre prop for style configuration. Use CSS variables (var()) for theming, defining global variables on :root and providing a CDN for them.

Component Quality Measures:

EditorConfig for consistent formatting.

ESLint (replacing deprecated TSLint) for JavaScript/TypeScript linting.

Stylelint with stylelint-config-recess-order and stylelint-order for CSS ordering.

Commitlint to enforce conventional commit messages.

Code snippets:

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

const { getESLintConfig } = require('@iceworks/spec');
module.exports = getESLintConfig('rax-ts');

/**
 * ● feat: new feature
 * ● fix: bug fix
 * ● docs: documentation changes
 * ● style: code formatting only
 * ● test: add/modify tests
 * ● refactor: code refactor
 * ● chore: project chores
 * ● revert: revert changes
 *
 * Format:
(
):
*/

Component Classification: Atomic components (e.g., button) → General business components (based on UI spec) → Industry‑specific components (custom interactions).

Scaffolding & Process: Built on existing group tooling, extending Lerna scripts to fit Xianyu’s release workflow. Storybook is used for isolated component demos, with MD files converted to Storybook stories to lower documentation effort.

Conclusion: The component library has already delivered noticeable efficiency gains across business lines, reducing duplicate development and ensuring UI consistency, while ongoing work focuses on expanding the library and improving automation.