@ danxbot/ ui (英语)
反应设计系统以运动为地基,而非完成通关.
npm install @danxbot/ui
import { Button, Chat, ThemeMenu } from "@danxbot/ui";
/* your app's Tailwind entry — see Setup, all three lines are required */
@import "tailwindcss";
@import "@danxbot/ui/theme.css";
@import "@danxbot/ui/styles.css";
需要反应 19和 Tailwind CSS 4 在消费建筑中 - 包裹 故意没有编订的公用事业。 麻省理工学院有执照.
里面有什么东西
102个组件横跨形式,覆盖,结构,数据,布局和聊天.
表单 - 外地、外地、输入、文本区、复选框、开关、无线电、无线电卡、, 选择、组合框、多组合框、滑动器、数字输入、OTP输入、文件上载、, 日期选择器、 切换器、 切换组、 工具栏
重叠 – 对话框, 提醒Dialog, Popover, 工具提示, Toast, Menu, CommandPalette
结构 - 纸牌,标签,Annion, Breadcrumb, Pagination, Appshell,, 等, 分隔器、 滚动区域、 可折叠、 面板组
显示 - 阿凡达,进步,测量,进步,Stat,火花线,时光线, 树、 空状态、 徽章、 图标、 斯平纳、 斯平通、 装入覆盖
数据 数据表
聊天 聊天 信件 信件滚动器 作曲器 Markdown 代码Block, 工具呼叫、 附件、 模型选择器、 努力控制、 上下文计数器
值得我们了解的部分
运动是一层,不是装饰
四道春色曲线被烤成CSS linear() 放松点 弹簧曲线编码
其起坝比例- 形状 - 没有别的了,所以时间是免费的
参数和一个曲线在任何速度上都是正确的。 没有 Java 脚本
动画运行时间;等效费用为35–40 KB来做这些免费的工作.
减少动议 减少常规 animation-duration: 0.01ms !important
扫描错误两次: spec要求删除、 减少 或者说
已替换,以及 !important 使决定不可逾越。 相反
--motion-scale 将期限减半 --motion-travel 无相距, 所以
组件在不知道存在的情况下继承偏好.
两个主题都来自一个合同
颜色是一个三级的 OKLCH 系统——原始的,语义上的符号,组件 符号——而两个主题都是针对同一种语义名称来写的. 阴暗 口音的手调大约为20%,因为一个大的饱和 在暗地上填充,读作"光"而不是"强调".
无障碍是您可以选择的下层
兼容性是一个切换器(data-contrast="aa"),不是永久状态.
各地强制AA 平分等级:去强调文本停止
取消强调。 默认为所绘制的调色板; AA 覆盖为 1
属性和荣誉 prefers-contrast: more 在第一负载.
大小是乘数,不是分点
data-ui-scale 设置无单位倍数 rem,与
读者自己的浏览器字体大小而不是压倒它. 它移动类型,间隔,
控制高度和图标大小, 硬地层, 这样一个水龙头目标永远不会
下降至24px以下.
聊天信息为打字部件
消息是部分列表——文本,代码,推理,工具调用,文件,或一个 命名应用程序组件——绝不是一连串的减值。 一个助手转身 平时互通出道词、一个工具呼叫和一个确认按钮,每个都 一个不同的渲染问题。 应用程序通过 名称,因此消息可以携带工作 UI :
<Chat
messages={messages}
components={{
approval: (props, ctx) => (
<ApprovalCard {...props} onApprove={ctx.app.approve} />
),
}}
appContext={{ approve }}
/>
道具是简单的数据,组件是按名称处理的,所以留下记录 可串行性——电文中提及的内容将使得不可能 持续或重放.
图书馆命名自己的更丰富的选项
COMPONENT_GUIDANCE (从包根导出)是一个数据表,而不是一个
doc 页面: 对于每个基本原始- 以及每个本地- HTML/ ARIA 形状
库直接替换——它命名了通常适合的更丰富的组件
改善和原因Textarea → InlineMarkdownEdit编号 :MarkdownEditor 以传道者发誓,
(单位:千美元) <pre> → Markdown,一个幽灵文本 Button → IconButton,等等). A 类
消费 repo 自己的源扫描读取此表而不是硬编码
同样的列表,所以在这里添加了一个新的更丰富的组件 延伸每个消费者的
执行时其侧面没有编辑。 拇指规则 它编码: 为
每块数据,使用最能匹配的元件,内含
编辑作为默认的交互——一个更简单的原始是
有时候还是正确的, 这就是消费者自己的逃生夹克
提出评论意见并不是使表格不完整的理由.
设置
两个样式表,你要两个。 在您的应用程序 Tailwind 条目中:
@import "tailwindcss";
@import "@danxbot/ui/theme.css"; /* @source + the @theme bridge */
@import "@danxbot/ui/styles.css"; /* the token values, base layer and component CSS */
这是整个合同。 没有层序语句可以记住和 无配置路径 .
你的"尾风"建筑 汇编了这个图书馆的公用设施 不是我们的.
theme.css 携带 @source "./**/*.js",将您的编译器指向
已发运的模块;货包本身为零产生公用事业。 这是
它是一个真正的缺陷的修复: 编译的样式表向
@layer utilities,这是 相同的图层名称,以等价键
特异性,是最后导入的——所以库用来赢得每一个平局. 测量a
在1440px消耗应用, grid grid-cols-1 xl:grid-cols-[1.6fr_1fr] 已执行
一栏和 md:grid-cols-2 xl:grid-cols-3 做了两个。 什么都没有
滥用; xl: 是应该击败 md: 因为尾风 类型 断点,
而这个保证只保存在一个编译器的输出内. 所以有一个
编译器.
theme.css 并携带 @theme 桥, 建构时从源取出
时间,将每个语义符号映射到Tailwind的命名空间上——没有它,你
拥有 bg-accent-subtle 无声地编译为一无所有. 秩序事项数字 :
styles.css 因为它能提供桥口的值.
不用"尾风4"吗? 那么,这个软件包将不作任何样式: 符号、基层和手写组件CSS,没有公用事业 都说吧 构件在结构上正确,视觉上没有样式——响亮,在 而不是像一个断点 悄悄地弄错了 尾风 4 消耗性建筑是一项要求,而不是一项建议.
字体是自动托管的woff2子集,而不是由 CDN 装入的,因为一个被屏蔽
CDN 使每个设计在系统字体中无任何出错. 他们是
被拉进来的 styles.css· ; @danxbot/ui/fonts.css 揭露 @font-face
如果你需要的话,他们自己决定.
首选项从 <html> 属性如此简单 CSS 和门户化内容
两人都看见:
import { useTheme, useUiScale, useContrast, useMotionPreference } from "@danxbot/ui";
ThemeMenu 把四个都捆到一个口袋里.
浏览器支持
现代常绿浏览器——Chrome,Safari,Firefox和现代移动. 那个
选择才是 @property, (中文(简体) ), @starting-style集装箱查询,
field-sizing 和 OKLCH 无倒数可用.
运行测试
维特套房运行在一个地方: Linux Docker 容器,由 Dockerfile.test。 。 。 . npm test 构建图像( 刻录到 package-lock.json 变换),将这个取出(git-visible)文件流入容器,运行到那里并取出容器. 这台机器上没有任何装置,没有 node_modules 共享.
npm test # the whole suite
npm test -- src/__tests__/board.test.tsx # named files
npm run test:dist # the whole suite with the built dist/ copied in (what `verify` and `release` run)
npm run probe:slider # the slider browser probe against the built demo (needs `npm run build:demo`), same container
node scripts/test-in-container.mjs --script probe-scale audit-hover a11y-scan # any browser probe, audit or screenshot script, in order, in one container
npm run probe # every browser probe (needs `npm run build:lib` and `npm run build:demo`)
npm run audit # every audit
npm run visual # the Playwright visual suite, in the Playwright container (`visual:update` re-records baselines)
A 类 vitest 运行到其它任何地方( Windows 检查出, 赤裸的 WSL shell) 在任何测试运行前拒绝运行, 并给此命令命名 。 每个浏览器的探测、审计和截图脚本也一样(scripts/probe-*.mjs, (中文(简体) ), scripts/audit-*.mjs, (中文(简体) ), a11y-scan, (中文(简体) ), shoot*和赤裸裸的 playwright test 在Playwright容器外拒绝。 无CI运行:没有工作流程.
许可证
麻省理工学院