@ bitrise/ bitkit-v2 (英语)
Bitrise 设计系统组件由 Chakra UI v3.
在故事书中浏览组件库 (需要谷歌认证)
使用 AI 助手( Claude Code, Cursor, Codex等)
如果你是原型 或气相编码 与AI助手,做到这一点 在此之前 写入任何 Bitkit 代码 :
1. 配置主机故事书MCP 因此AI可以查询活的组件道具,示例和符号而不是猜测. 添加到您的项目 .mcp.json数字 :
{
"mcpServers": {
"bitkit-storybook-mcp": {
"url": "https://storybook.services.bitrise.dev/projects/bitkit-v2/production/mcp",
"type": "http"
}
}
}
2. 参考比特基特语 AGENTS.md 所以人工智能会收集部分命名 state 道具图案,语义符号规则等图书馆惯例. 添加到您的项目 AGENTS.md (或 CLAUDE.md:
@./node_modules/@bitrise/bitkit-v2/AGENTS.md
主机故事书本身可浏览于 https://storybook.services.bitrise.dev/projects/bitkit-v2/production/ 页面存档备份,存于互联网档案馆 (需要Google 认证).
特征
- 自定义设计系统: 完成Bitrise品牌的实施
- 由 Chakra UI v3 所建 最新 Chakra UI 特性和性能
- 类型脚本: 带有自动生成类型的完整类型脚本支持
- 自办字体: Figtree 和源代码 Pro 通过 Bitkit 提供器捆绑
- 固定同伴依赖关系: Bitkit宣布查克拉,情感和查克拉CLI为被钉住的同龄人,因此你的树会被解开
安装
# Runtime peers — required for Bitkit to render
npm install @bitrise/bitkit-v2 @chakra-ui/[email protected] @emotion/[email protected]
# Build-time peer — required so the bundled postinstall hook can generate bitkit-specific theme typings
npm install --save-dev @chakra-ui/[email protected]
Chakra UI和情感被宣布为对等依赖,所以主机app在树上拥有Chakra的单拷贝. 安装在精确版本的 Bitkit 披针上 —— 任何其他版本(包括补丁凸起等) 3.37.1)触发了同位点不匹配的警告,不同的次要/主要也可能对 Bitkit 的编译输出造成运行时 API 不兼容 。 重复 Chakra 安装时, 只有在其它的过渡依赖性拖入漂移上不同的 Chakra 版本时才会出现, 但当它们被拖倒时, 才会悄悄地中断 BitkitProvider其主题上下文, 正好就是被绑住的失败模式对等者所防范的 .
@chakra-ui/cli 也是对等者——比特基特 postinstall 钩子用来生成 Chakra 主题输入到您的工程中 node_modules. 将它安装为主机应用程序中的 devdependency,以便钩子找到.
仅限生产安装(
npm ci --omit=dev, (中文(简体) ),pnpm install --prod等 : 因为@chakra-ui/cli通常安装在主机中devDependencies,它将被跳过——您的软件包管理器可能会发出一个未满足的对等警告,或者在严格的同行执行下(例如 pnpm )strict-peer-dependencies=true),失败安装. 捆绑postinstall钩子本身检测出缺失的CLI,打印出一个通知并干净地退出. 主题打字是开发时的考虑, 因此生产环境不需要 CLI; 如果您的 prod 安装配置为严格的对等器, 要么设置strict-peer-dependencies=false用于部署步骤,允许列表@chakra-ui/cli作为缺少的对等点,或将CLI安装为常规依赖而非devdependency.
所需资源
- 反应 18 + (同类依赖)
- 反应 DOM 18+( 同类依赖)
@chakra-ui/react3.37.0 (依赖性较强,固定)@emotion/react11.14.0(依赖性较强,被钉住)@chakra-ui/cli3.3.7.0 (同属依赖,被捆绑使用)postinstalltypegen hook; 在主机应用程序中安装为 devDependency)
主题打字
Bitkit将 Chakra UI v3 主题装入自定义的食谱,语义符号和设计符号. 对于 TypeScript 自动补全以识别比特Kit 特定值(例如. <BitkitButton variant="ai-primary">, (中文(简体) ), colors.purple.60Chakra的型号必须运行在您的项目中 node_modules 安装后.
自动通过 postinstall 钩被包裹了,只要 @chakra-ui/cli 被安装在主机应用程序中(由于这个原因它被宣布为对等依赖).
如果邮站被跳过(例如:. @chakra-ui/cli 未安装, 您运行 npm install --ignore-scripts,或 CI 跑步器阻断生命周期脚本),手动再生成打字:
npx chakra typegen node_modules/@bitrise/bitkit-v2/dist/theme/index.js
你可以通过检查来验证它是否有效 <BitkitButton variant="ai-primary" /> 在编辑器中检查类型 <BitkitButton variant="solid" /> 错误.
快速启动
import { BitkitProvider, BitkitButton } from '@bitrise/bitkit-v2';
function App() {
return (
<BitkitProvider>
<BitkitButton variant="primary">Hello Bitrise!</BitkitButton>
</BitkitProvider>
);
}
发展
所需资源
- 节点.js 24.x+(参见
.tool-versions用于开发的精确版本)
图标
# Install dependencies
npm install
# Start Storybook
npm run storybook
# Build the library
npm run build
# Generate theme types
npm run theme:generate-types
从 Figma 导出 SVG 图标
首先, 您应该创建一个 Figma Personal Access Token 到 Bitkit 基金会文件 : https://help.figma.com/hc/en-us/articles/8085703771159-Manage-个人-访问-tokens (中文(简体) )
FIGMA_TOKEN=<your-personal-access-token> npm run generate:icons
手动图标覆盖
少数图标是手自维护而来,而不是取自Figma(如拖柄,动画自旋器等). 手动图标总是使用 两者 一起标记 :
*.manual.svg- 指定来源icon-<name>-<size>.manual.svg。每次运行时,生成器都会删除任何已导出图像icon-<name>-<size>.svg带有.manual.svg师兄,所以figma-export能够 永远 覆盖它。 绘制单色图标#2B0E3F(svgr将其改写为:currentColor) (中文(简体) ).// @generate:skip首行中.tsx——所以发电机永远不会再生组件. 仍然出口,只要.manual.svg存在于lib/svgs/。 。 。 .
// @generate:skip
// Manually maintained icon.
import { Icon, type IconProps } from '@chakra-ui/react/icon';
// ... import the *.manual.svg and render it
当前手工图标 : IconDragHandle 编辑 IconSpinner* 图标(旋转器也默认) color 对语义 icon/* 符号). 其他一切来自法格玛——留给发电机.
许可证
麻省理工学院
捐款
请看我们的 提供指南。 。 。 .