designos-component-center

XC Design React component library. The package boundary is kept separate from the documentation application so components can be consumed by any React app.

Usage

import { Button, ConfigProvider } from 'designos-component-center';
import 'designos-component-center/style.css';

export function Example() {
  return (
    <ConfigProvider>
      <Button type="primary">保存</Button>
    </ConfigProvider>
  );
}

组件包会读取 src/design-system 中由规范工作台同步生成的视觉契约。编辑组件后，在工作台导出 JSON，再从仓库根目录执行：

npm run sync:design-system -- /path/to/designos-0.1.0.json

同步命令更新组件包目录下的 spec.ts、组件规范清单和视觉覆盖，不会覆盖已有的手写实现。默认只同步已经纳入组件包的目录；需要增量更新时可重复追加 --component <slug>，只写入指定组件并保留其他契约；新增 Arco 组件可配合 --scaffold 批量生成适配目录、实现入口和导出。

Local development

From the repository root:

npm run typecheck:lib
npm run build:lib
npm run pack:lib

Safe publishing

Publish from the repository root. Authentication uses the developer's npm login and two-factor authentication; do not store an npm token in this repository.

# Use the repository Node version when nvm is available
nvm use

# 1. Increment the package version
npm run version:lib:patch

# 2. Inspect the exact package contents without publishing
npm run release:lib:dry

# 3. Publish after reviewing the dry run
npm run release:lib

npm version also synchronizes the exported VERSION constant. prepack always runs type checking and a clean library build before npm creates the tarball. publishConfig pins publishing to the official public npm registry.

The current adapters use Arco Design as the implementation layer. Each component has its own directory so the implementation, public types, styles, tests and documentation can be migrated independently.

Component coverage

The current migration batch mirrors the high-reuse components covered by the design-system studio:

• Button
• Input
• Select
• Link
• Checkbox
• Radio
• Switch
• Alert
• Avatar
• Badge
• Card
• Collapse
• Comment
• Empty
• Image
• List
• Skeleton
• Table
• Transfer
• Modal
• Drawer
• Message
• Notification
• Popconfirm
• Pagination
• ConfigProvider
• Form
• Tabs
• Tag
• DatePicker
• Tooltip
• Popover
• InputNumber
• AutoComplete
• TimePicker
• Upload
• Dropdown
• Progress
• Menu
• Cascader
• TreeSelect
• Calendar
• ColorPicker
• Divider
• Grid
• InputTag
• Layout
• Mentions
• Space

The 50 public adapters above delegate rendering and public prop behavior to Arco while keeping an XC Design-owned directory, visual marker and barrel entry. ConfigProvider is included as a package runtime entry, but it intentionally has no component-level visual profile. The Studio currently exposes reviewed, component-specific visual controls for Button, Input, Select, Cascader, and TreeSelect; remaining profiles can be added in later batches.

Migration checklist

• [x] Create one public directory and entry file for each migrated component.
• [x] Export component values and public prop types from src/components/index.ts and src/index.ts.
• [x] Keep Arco as the implementation layer while the visual contract is finalized in the studio.
• [x] Bind migrated visual profiles to component-local CSS variables and state selectors.
• [x] Add a repeatable Studio JSON → package sync command.
• [ ] Add component-level tests, demos and release notes as each contract is approved.

Structure

packages/designos-react/
├── src/index.ts                 # public package entry
├── src/components/index.ts      # component barrel
├── src/components/specs.ts      # synced component contract barrel
├── src/components/<name>/
│   ├── <Name>.tsx               # implementation
│   ├── index.ts                 # component public entry
│   ├── interface.ts             # public types (when needed)
│   ├── style/                   # component styles
│   ├── __tests__/               # component tests
│   └── demo/                    # documentation examples
├── src/style/index.css          # global style entry
├── src/style/component-visuals.css # component visual variable bindings
├── src/design-system/            # typed visual profiles and synced manifest
├── vite.config.ts               # ESM/CJS library build
└── tsconfig.build.json          # declaration output

This follows the same ownership boundary used by Ant Design: the package exposes stable component entries, while the documentation/playground application remains outside the package.