AlixPartners 用户界面组件库
一个可重复使用的 React 组件库 AlixPartners 设计系统。 。 。 .
发表于 @alixpartners/ui-components 时间npm。 现任少校是: 3.x 运算。 。 。 .
3.x 有什么新情况
- 反应 19 支持与React 18.3+ — 消费的应用程序不会被迫升级React
- 自动发布 npm 合并到
main,带有Slack发布注释 - 复合符号 ——从Figma地取出打字机作为SCSS混音器(
@mixin ap-*),应用了全文样式(大小、重量、行高、字母间隔、变换),而不是一次性硬码值 - 设计符号、图标和插图 由 Figma 生成 in-repo, 当设计系统改变时自动使用 PR
- 无害环境管理 库构建( Vite 6) , 将 CSS 注入捆绑中—— 不导入单独的样式表
- 故事集 9 作为讲习班的组成部分
- 中情局 对反应18和反应19进行单元测试和建造
- 图标字体船 仅woff / woff2 (遗产)
.eot编号 :.svg格式已删除)
版本支持
| 线条 | 状态 |
|---|---|
| ưμ㼯a | 目前——生产 |
| v2.x (英语) | 上届 |
| v1.x (韩语) | 仅存遗产(关键修正) |
3.0为 没有 向后兼容 1.x. 现有的1.x应用程序可以留在这条线上. 新作应使用3.x.
反应支持
同伴依赖接受反应 ^18.3.1 || ^19.0.0,因此应用程序可以停留在18.3上或移动到19上.
| 反应版本 | 支助 |
|---|---|
| 18.3+ (中文(简体) ) | 对 |
| 19.x (中文(简体) ) | 对 |
有用链接
| 资源 | 網址 |
|---|---|
| 设计系统 | 平台设计系统 |
| 故事书 | apuilibdev.azurewebsites.net 互联网档案馆的存檔,存档日期2013-12-22 |
| 无 | @alixpartners/ui-组件 |
| 图片 | 平台设计系统 |
| 偷懒 | #平台-组件-图书馆 |
安装
npm install @alixpartners/ui-components
如果消费应用程序还没有端点, 则安装端点依赖性 :
npm install react@^18.3.1 react-dom@^18.3.1
反应19同样有效:
npm install react@^19.0.0 react-dom@^19.0.0
radix-ui 财务报告和审定财务报表 notistack 与软件包相通的船(在构建时间外部粘接,这样他们就可以与同样使用它们的应用程序共享运行时状态). 您不需要单独安装它们, 除非您想要自己的代码的顶级副本 .
样式(包括图标字体和设计-系统符号)被与软件包捆绑. 您不需要单独的 CSS 导入 .
软件包是 仅限无害环境管理从无害环境管理/捆绑编码中导入(import(没有) require()。 。 。 .
使用量
import { Button } from '@alixpartners/ui-components'
function App() {
return (
<Button type="primary" variant="default">
Click me
</Button>
)
}
ToastProvider (和 useToast包装应用程序一次:
import { ToastProvider, useToast } from '@alixpartners/ui-components'
function App() {
return (
<ToastProvider>
<Page />
</ToastProvider>
)
}
构成部分
探索故事书中的每个组件,变体,和道具. 公共出口包括:
| 组 | 构成部分 |
|---|---|
| 行动 | Button, (中文(简体) ), SplitButton |
| 投入 | Input, (中文(简体) ), Textarea, (中文(简体) ), Checkbox, (中文(简体) ), Radio, (中文(简体) ), RadioGroup, (中文(简体) ), Toggle, (中文(简体) ), Search, (中文(简体) ), Datepicker, (中文(简体) ), Dropdown, (中文(简体) ), Creatable, (中文(简体) ), TagsFields, (中文(简体) ), RichTextEditor |
| 反馈 | Banner, (中文(简体) ), Toast, (中文(简体) ), ToastProvider, (中文(简体) ), useToast, (中文(简体) ), Tooltip, (中文(简体) ), Dialog, (中文(简体) ), Spinner, (中文(简体) ), Ghost |
| 导航 | NavBar, (中文(简体) ), CorusHeader, (中文(简体) ), Breadcrumb, (中文(简体) ), Tab, (中文(简体) ), TabNavigation |
| 文件 | FilePicker, (中文(简体) ), DragAndDrop |
| 显示 | Tag, (中文(简体) ), Icon, (中文(简体) ), Illustration |
浏览 主机故事本,或在当地运行 :
npm run storybook
设计符号
Tokens,图标web-font,和插图都来自此repo内部的Figma(design-tokens/) (中文(简体) ). 管道同步设计-系统更改并打开 PR 以对抗 development。 。 。 .
原子符号(颜色、相距、大小)成为 $ap-* SCSS变量. 复合符号 ——目前打字——改为: @mixin ap-* 混合到一个组件可以应用一个完整的文字样式,例如包括 @include ap-button-md-contained。 。 。 .
登陆 Tokens 工作室导出
UX 从 Figma (Tokens Studio) 导出令牌时 多个文件 .zip),运行 /sync-design-tokens 在 Claude 代码或光标中,此重播打开。 附加拉链和设计系统版本(例如. 1.5.0) (中文(简体) ). 命令将导出打开 design-tokens/tokens/,重建 src/assets/_variables.scss,损坏的修理 $ap-* 消费者反驳,并打开公关反对 development 打开 design-tokens/<version>。 。 。 .
/sync-design-tokens
/sync-design-tokens 1.5.0
/sync-design-tokens --sync # also refresh icons/illustrations from Figma
/sync-design-tokens --dry-run # unpack + rebuild + report; no commit/push/PR
拉链必须包含 $metadata.json (文件夹 / 多文件导出), 而非单独 tokens.json。克劳德桌面不装入回波斜拉命令——使用克劳德代码或光标,或遵循 .claude/skills/sync-design-tokens/SKILL.md 带了拉链.
当地再生
npm run tokens:build # parse JSON tokens → SCSS (no Figma secrets)
npm run tokens:sync # fetch from Figma, rebuild font + SCSS + illustrations
npm run tokens:verify # fail if src/assets/_variables.scss has drifted
见 design-tokens/README.md 用于输入、输出和惊喜(位置图标代码点、不可复制的字体二进制、打字混合).
构建
npm run build
产出土地 dist/。所公布的条目是 dist/main.js (ESM),类型在 dist/main.d.ts。 。 。 .
在另一个项目中使用本地建筑
# In this repo:
npm link
# In the consuming project:
npm link @alixpartners/ui-components
然后从 @alixpartners/ui-components 和往常一样.
测试
CI运行单元测试和生产大楼,对 反应 18.3.1 财务报告和审定财务报表 反应 19.1.0。 。 。 .
npm run test # Vitest (unit + Storybook projects)
npm run test:unit # unit tests only (happy-dom)
npm run test:storybook # Storybook interaction tests
npm run test:playwright # Playwright e2e
npm run coverage # Vitest coverage
出版
执行 没有 手工出版。 合并为 main 发表 @alixpartners/ui-components 登记在册.
- 弹出版本
package.json, (中文(简体) ),package-lock.json,以及CHANGELOG.md联 合 国development(中文(简体) ) - 打开拉取请求
development→main - 公关合并后,
.pipelines/publish-prod.yml建立图书馆, 运行npm publish --access public移动到 Slack
管道需要秘密变量 NPM_TOKEN (npm 自动化令牌,有出版权 @alixpartners和 SLACK_WEBHOOK_URL。 。 。 .
软件包 : npmjs.com/package/@alixpartners/ui-组件
捐款
见 捐款额 过程和组成部分结构。 打开拉动请求对 development。 。 。 .