校对:soup
可访问的光- DOM UI 组件 @ecopages/radiant 财务报告和审定财务报表 @ecopages/jsx,被"故事书"所记载.
自定义元素使用 rui-* 标记前缀。 公共类型Script / JSX 输出使用 Rui* 前缀.
这个项目是 不是反应应用程序JSX汇编 @ecopages/jsx。 。 。 .
软件包
| 路径 | 作用 |
|---|---|
src/components/ui | @ecopages/radiant-ui 组件库(面向APG的部件) |
@ecopages/storybook-radiant-vite | Radiant(客户+SSR-水合物)的故事书框架 |
src/components/client, (中文(简体) ), src/components/ssr, (中文(简体) ), src/stories | 框架狗食品演示(不是已出版的UI目录) |
框架文件(API、SSR合同、Vitest、限制):
./故事书 -- -- 发光 -- -- 录像/README.md
图书馆概况和公约:故事手册 导言 (单位:千美元)src/Introduction.mdx) (中文(简体) ). 组件作者 : src/components/ui/README.md。 。 。 .
开发
pnpm install
pnpm run storybook
打开 URL 故事簿打印( 默认端口) 6006) (中文(简体) ).
检查布局和样式
- 自动化(爱心):
pnpm run test:storybook运行每个故事play函数在真实浏览器(Vitest + Playwright)中。 布局帮助者居住.storybook/layout-assertions.ts(流量,--text-control-input字体大小, 弹出式取景口界限) — 见Components/DateRangePicker→ 纳罗拉尤特。共享打字文件定义类型大小和输入大小;每个完整的主题用品--font-sans, (中文(简体) ),--font-heading,以及--font-mono。 。 。 . - 手动 : 运行
pnpm run storybook并使用浏览器的响应模式或调整预览大小;不需要第三方视觉服务. - 像素快照( 可选) : Vitest 浏览器模式支持 Playwright
toHaveScreenshot()如果您想要图像 diffs 没有色谱, 则在重播中输入基线.
有用的脚本 :
pnpm run test # Vitest (storybook + unit browser projects)
pnpm run test:storybook # Story interaction/render tests (CI)
pnpm run test:ssr:smoke # SSR smoke (6 stories × client/ssr-static/ssr-hydrate; runs on PRs)
pnpm run test:ssr # Full Components/* SSR matrix (run on demand)
pnpm run typecheck
pnpm run lint
pnpm run build:lib # generate exports + build JS/types + compile CSS
test:storybook 通过Vitest addon(没有故事本 Dev 服务器)运行故事. test:ssr:smoke 财务报告和审定财务报表 test:ssr 产卵故事书 访问 Playwright 的故事 失败 .radiant-ssr-error 横幅或不允许的页面错误。 对于预期要上载的故事,在检查结果之前,会简短地等待内容或SSR错误标语. 空挂载只针对列出的故事失败 scripts/storybook-ssr-harness.ts (单位:千美元)expectsMount 编号 : allowEmptyMount) (中文(简体) ).
已出版 dist/ 实值 已编译 (台风) @apply (已解决)。 主题和符号值仍为CSS自定义属性,因此应用程序可以在运行时互换主题. 软件包不会将 CSS 缩写 。 已公布的申报进口在 build:lib,以及 test:package 拒绝未解决的来源别名 .
条目为代码分割:由多个条目导入的模块,例如字段控制协议或组件类,一旦被放入 dist/chunks/ 列入 sideEffects。这保持模块状态,比如 registerFieldControl 登记册,以及 instanceof 检查一个副本的条目之间。 Chunk 名称是内容散列,不能导入;只使用所记录的条目 。 没有捆绑器, 根 index.js 装入许多块文件. src/built-package/*.test.ts 导入 dist/ 和运行自己 built-package vitest项目,其中 unit 不包括项目。 内容 globalSetup (单位:千美元).storybook/built-package.global-setup.ts检查一下 dist/ 财务报告和审定财务报表 dist/chunks 已经存在,并且比已发运的来源更新,项目测试失败 pnpm --filter @ecopages/radiant-ui build:lib 犹如平地;赤地 pnpm test 没有建筑 仍然运行其他项目。 新鲜度检查比较了mtimes,所以只格式化的源编辑也要求重建. test:all 先盖起. build:lib 并捆绑一个条目,以确认 chunks/*.js sideEffects glob 保留注册,以及 test:package 失败 dist/chunks 文件匹配无 sideEffects glo.
组件条目注册他们的嵌入自定义元素以及自己的主机. 包裹 sideEffects 列表保留源 *.script.ts 编号 : *.script.tsx 图书馆建设和建造过程中的登记模块 index.js 消费者捆绑期间的条目。 消除这些源副作用可以在SSR期间留下被嵌入的"衍生树"作为空标记. build:lib 运行 test:package 禁止孤立地进口已建日期构成和侧边栏触发器,以核实注册和服务器的标记.
使用光线- ui
Rui* JSX道具仍为骆驼Case. 在直接自定义元素 HTML 中,骆驼Case @prop 名称使用 kebab 大小写属性( 例如, mobileBreakpoint 实值 mobile-breakpoint) (中文(简体) ).
import '@ecopages/radiant-ui/themes/default';
import '@ecopages/radiant-ui/styles.css';
import '@ecopages/radiant-ui/disclosure';
import { RuiDisclosure, RuiDisclosureGroup } from '@ecopages/radiant-ui/disclosure';
import { RuiButton } from '@ecopages/radiant-ui/button';
Radiant UI舰艇一个可访问的默认主题: Radiant Default 有近Zed间隔(28,32和36px控制,14px文本),受限的控制半径(默认为0.7比例为4.2px),平面控制,
和轻半透明边界(11%)。 可选的完整主题和命名的紧凑变体,如GitHub Contract, Vercel,
材料设计,高对比度,Windows 95,Mac OS Classic, macOS, 和Zed生活于此
@ecopages/radiant-themes。默认的 OKLCH 颜色家族可以通过
压倒性 --rui-primary, (中文(简体) ), --rui-secondary,以及 --rui-neutral 在导入主题后. --rui-density, (中文(简体) ),
--rui-neutral-tint (灰色如何强烈地携带中性花环,默认为1.3), --rui-radius-scale (违约为0.7)和
--rui-border-alpha (默认为 11%) 完成调制表面 。 可选主题自行设定
形状、间距、打字和组件细节。 默认是对减动、增相接和
强制颜色偏好.
或者从根项中注册每个自定义元素( 仍然单独装入主题 + 样式) :
import '@ecopages/radiant-ui/themes/default';
import '@ecopages/radiant-ui/styles.css';
import '@ecopages/radiant-ui';
基础捆绑( Tailwind、 共享公用事业和默认主题; 组件样式仍然来自 styles.css:
import '@ecopages/radiant-ui/radiant-ui.css';
设计符号和主题:参见 DESIGN.md代理工作规则: AGENTS.md。 。 。 .
故事地图
- 构成部分/ —— 说
radiant-ui目录( e)src/components/ui(中文(简体) ) - 客户/ 从 Radiant 移植的框架演示
playground/vite - 安保部门/ 从 Radiant 移植的框架演示
playground/vite-nitro