@bardioc/ ui (英语)
Bardioc UI组件库用于BardiocOS应用. 将自定义的Bardioc组件层与Tailwind CSS 4.上方的Shadcn/Radix原始相融合.
安装
pnpm add @bardioc/ui
# peers (provide in the consumer app)
pnpm add react react-dom @bardioc/i18n-core
入境点
@bardioc/ui 船只出口次路径。 导入您需要的表面而不是软件包根 .
| 子路径 | 目的 |
|---|---|
@bardioc/ui/components | 气管组件(无图表表) |
@bardioc/ui/components/charts | Bardioc 图表组件( 背书) |
@bardioc/ui/components/metrics | 中度分数 |
@bardioc/ui/shadcn | Shadcn/Radix原始(非图)——作为命名空间导入 |
@bardioc/ui/shadcn/chart | Shadcn图表原始( 已备份) |
@bardioc/ui/hooks | 重用重用钩子 |
@bardioc/ui/lib | 功用函数( U)cn,颜色帮助者,发相,.) |
@bardioc/ui/types | 共享类型脚本 |
@bardioc/ui/consts | 共享常数 |
@bardioc/ui/icons | SVG 图标组件 |
@bardioc/ui/styles/* | CSS 入境点globals.css,组件样式表) |
@bardioc/ui/postcss.config | PostCSS 为消费者预设 |
使用准则
组件选择、设计符号、执行模式和UI复制规则船,包装在 docs/ (单位:千美元)node_modules/@bardioc/ui/docs/INDEX.md (已安装).
Shadcn原始人只读
下方的文件 src/components/shadcn/ 由 shadcn CLI(英语:CLI). 不要手剪他们。 要更改视觉或行为, 请创建或编辑 Bardioc 组件 src/components/bardioc/<category>/ 即超越或构成原始.
构建
tsc 将每个源文件汇编到一个带有其声明的无害环境管理文件,以及 tsc-alias 重写 #- 对亲属的异名 .js 路径。 每个模块有一个文件让消费者的捆绑者放下它不导入的每个文件,并保留每个模块的一个副本跨子路径.
反应服务器组件
只有阴影源文件携带 'use client' 指令; 桶和大多数巴迪奥克组件没有。 消耗时 @bardioc/ui/{components,shadcn,hooks} 从 React 服务器组件环境(例如 Next.js App Router)中,将消耗文件标记为 'use client' 自己说:
'use client';
import { Command } from '@bardioc/ui/shadcn';
非RSC环境(Vite, Plain Webpack, Storybook, Vitest)不需要特殊处理.
使用量
import { Button, DataTable } from '@bardioc/ui/components';
import { RevenueChart } from '@bardioc/ui/components/metrics';
import * as Shadcn from '@bardioc/ui/shadcn';
import { ChartContainer } from '@bardioc/ui/shadcn/chart';
import { cn } from '@bardioc/ui/lib';
import '@bardioc/ui/styles/bardioc-ui.css'; // pre-compiled theme + utilities
样式
本套件中的组件样式本身为 Tailwind 工具类(className="bg-primary text-primary-foreground rounded-md ...") (中文(简体) ). 尾风课并不是真正的CSS——它们是由尾风在建设时翻译为CSS规则的标志. 没有这种翻译,标记具有类属性,对浏览器没有意义,组件变形为无样式.
为使组件正确转换, 在您的应用程序的条目文件中导入预编译的 CSS 捆绑数字 :
// src/main.tsx (or app/layout.tsx, etc. — once per app)
import '@bardioc/ui/styles/bardioc-ui.css';
该捆绑(~200 KB 已修改)包含:
- 完整的 Tailwind v4 运行时基层
- Bardioc和Shadcn组件实际使用的每一类公用事业(我们大楼的树木被震动——未使用的公用事业除外)
- 边框主题变量和颜色调色板
- 阴影主题层( CSS 自定义属性用于
--background, (中文(简体) ),--primary, (中文(简体) ),--ring等,以光和暗两种模式) tw-animate-css动画公用事业- 每个组件定制 CSS 与我们的组件并存
消费者 不需要安装尾风 用来使用图书馆。 它们不需要配置 @source 或一个 content 阵列。 单CSS导入提供了我们所有组件的参考.
CSS的两个切入点——用于
| 条目 | 何时使用 |
|---|---|
@bardioc/ui/styles/bardioc-ui.css | 外部消费者 (npm安装). 事前编译,自成一体. 默认. |
@bardioc/ui/styles/globals.css | 只有独行侠兄弟。源样式;您自己运行 Tailwind 并添加 @source。 。 。 . |
globals.css 包含 @import 'tailwindcss' 加号 @source '../../../../packages/**/...' 仅在此单列范围内解决的指令。 它的存在使得兄弟姐妹们可以用自己的应用特定类名来扩展Tailwind,同时仍然分享我们的主题符号. 在安装的节点模块中,这些 @source 路径指向无稽之谈,文件无效. 使用 bardioc-ui.css 换句话说.
CSS的制作方式
软件包构建分三步运行:
tsc财务报告和审定财务报表tsc-alias编译每个源文件到dist/(无CSS处理).node scripts/copy-assets.mjs复制原始源 CSS 文件(globals.css, (中文(简体) ),shadcn.css, (中文(简体) ),components/*.css改为dist/styles/给独身伴侣的消费者.tailwindcss -i src/styles/build-bundle.css -o dist/styles/bardioc-ui.css --minify运行 Tailwind v4 CLI: 它扫描packages/ui/src/**/*.{ts,tsx}对于我们JSX中引用的类名,只生成匹配的功能 CSS, 预置主题层, 并写入单个已修改的捆绑 .
Tailwind编译步骤让外部消费者完全跳过工具链. 所建造的文物是可移植的,框架不可知的CSS——同样的文件在Next.js,Vite,plain HTML,或任何支持CSS导入的捆绑器中都有作用.
主题覆盖
bardioc-ui.css 将符号定义为CSS自定义属性(例如. --primary, (中文(简体) ), --background) (中文(简体) ). 在消费者CSS中覆盖它们 之后 导入捆绑 :
@import '@bardioc/ui/styles/bardioc-ui.css';
:root {
--primary: oklch(0.6 0.2 250);
--radius: 0.5rem;
}
对于更深层的主题(添加新的效用颜色、自定义断点等),使用源类型 globals.css 路径从一对一的双胞胎并直接延伸出 Tailwind.
发展
pnpm --filter @bardioc/ui build # tsc + copy CSS + tailwind compile
pnpm --filter @bardioc/ui check-types
pnpm --filter @bardioc/ui test
pnpm --filter @bardioc/ui pack:check # inspect what would be published
软件包以声明文件发布HEM JavaScript. 测试在 packages/ui/tests/unit/ 并被排除在 dist。 。 。 .