CineSend UI 工具包
为 CineSend apps 共享反应组件,令牌和 CSS. 这是 没有 一个应用:没有产品屏幕,没有API呼叫,没有应用逻辑.
发布到 npm 为 @cinesend/ui-kit。 GitHub 重播为 BitCine/cinesend-ui-kit没有 BitCine/ui-kit 复发.
安装
npm install @cinesend/ui-kit
import { Button, TextField } from "@cinesend/ui-kit";
import "@cinesend/ui-kit/styles.css";
样式表是一个单独的切入点, 必须导入一次, 靠近您的应用根 。 它没有被捆绑在联署材料中.
本地开发( 在应用程序旁边加上这个 repo ):
"@cinesend/ui-kit": "file:../cinesend-ui-kit"
从 a 安装 file: 路径服务已建 dist/运行 npm run build 换了装备后再来.
从 git 安装
更古老的路径依然有效
"@cinesend/ui-kit": "github:BitCine/cinesend-ui-kit#staging"
dist/ 没有承诺,所以一个 git 安装通过
prepare 剧本. 这意味着消费者下载了这个包
依赖性,在每一个 npm ci. 预选 npm
释放; 此路径存在, 因此应用程序不会被迫在锁步中迁移 .
同伴依赖关系
应用程序必须提供:
react财务报告和审定财务报表react-dom(>=18.2 < 20)@phosphor-icons/react^2.1.10 (中文(简体) )sonner^2.0.7 (中文(简体) )
运行时间依赖 : @base-ui/react。 。 。 .
数据密集组件
这些工具箱大多是花砖和以文件为导向的,这就是文件与屏幕
需要帮助. Table, (中文(简体) ), Pagination, (中文(简体) ), Badge 页面状态用于数据密集度
内部工具,他们共享一条规则 值得说明一次: 他们描述
页面中包含服务器持有的数据,并永远不要重新解释.
排序, 包含行选择和每个单元格中的真实控制, 光和暗:
-
Table没有什么 可排序标题报告它想要的种类 结束onSortChange; 拥有查询答案的人。 交给的行 它是一个更大的一页集, 所以命令它们 在组件 排序页面而不是数据,并不同意两者的总数 下一页 选择被控制 出于同样的原因, 并只覆盖屏幕上的密钥.caption需要: 它是表格的可访问名称,是视觉的 藏起来 没有它,屏幕阅读器宣布"表",没有别的.onRowClick是一个指针快捷键,不是行的唯一路线. 保留行 他们的row角色,因此它们不能聚焦,没有被宣布为 控件 —— 在单元格中设置一个真实的链接或按钮并让行 点击复制。 单击从该控件开始的(或任何其他) 行中的交互式元素)不同时运行行快捷键,所以 动作起火一次而不是两次。 显而易见的另一种选择,role="button"加号tabIndex编辑<tr>,故意避免:它凌驾于 隐含行角色,让每个单元格没有有效的行所有者,断开 屏幕读取器的表格导航,并嵌入选择的复选框 在一个按钮内.stickyHeader需要将高度绑入表根本身,哪个 这是什么className用于:<Table stickyHeader className="h-[32rem]" … />不是在包装上.
.cs-table携带overflow-x,当一个 轴不是visible其他计算为auto这样啊.cs-table这是 最近的滚动容器 。 将包装包捆起来,然后将页头滚动 和桌子一起看的 看上去就像道克一样 工作时.虚拟化是故意超出范围的. 每行给定的是 已经完成。 进入高的百分百的空间很舒适, 覆盖一页 管理列表 。 屏幕需要数以万计的一行一行 不同组件, 而不是旗子在此.
-
Pagination计数,而不是一个响应信封——每个后端 以不同方式拼写其页形, 以及理解一个的组件 框架meta是下一个应用在周围工作。 给我pageSize财务报告和审定财务报表onPageSizeChange用于逐行选择; 更改大小 哪一行在哪一页, 所以回到第一页.
-
TableToolbar持有TableSearch, (中文(简体) ),TableSortMenu财务报告和审定财务报表TableFilters。 。 。 . 喜欢Table,它们报告用户要求的,并且不更改行:保留 它们的值位于构建查询的状态,然后在 他们改变.
-
Badge使用语义语调,而不是状态. 绘制自己的词汇 进入呼叫站点的五吨位 然后返回neutral页:1 任何无法识别的东西, 所以一个不熟悉的状况 仍然显示在比较 而不是掉下来。 (WorkspaceBadge是装饰性的起首部分,旁边是 工作空间名称; 是aria-hidden而不是这个。 ) -
Alert是一个属于旁边内容的讯息:失败 惟有在表单上方的警告。 这不是页面状态( 使用EmptyState或者说ErrorState而不是一个敬酒。 错误和警告是 立即宣布, 其余的礼貌.
-
ProgressBar将其值夹到 0- 100 并读取NaN作为0,所以 将字节除以尚未到达的总数是安全的.Image财务报告和审定财务报表Poster当图像是时, 以固定比例显示占位符 缺少或未加载, 因此布局不会跳出 .
-
FileUpload是一个跳伞区和一个按钮, 仅此而已:它给你 第一个文件被选中或删除,没有网络工作。 运行传输 你自己,然后喂回来uploading财务报告和审定财务报表error。 。 。 .accept使用输入 属性的语法, 在浏览器没有时也会在跳下时检查 执行它。 没有Chip: 静态标签为中性Badge。 。 。 .
-
DonutChart是普通的SVG 从工具箱的符号中抽取,所以它添加了不 绘制依赖图。 给完成的部分 进展铃声和 剩余muted,或者离开音符 以崩溃。 负数和 非数值计为零。 它没有徘徊或点击:label已经告诉屏幕阅读器每个段的值, 以及可选的 因此,传说被隐藏在辅助技术中.
-
toUtcDateValue编号 :fromUtcDateValue在 UTC 时间戳之间转换 编辑YYYY-MM-DD价值DatePicker拿着 比较读取协调世界时的日期 而不是本地的 是停止存储的午夜UTC日期显示为 在协调世界时的前一天, 任何人的背后. -
LoadingState编号 :EmptyState编号 :ErrorState三个,永远不要 一个 "这里什么都没有" "我们找不到"导致相反 行动.ErrorState使用信件串而不是错误对象 : 将失败变成句子需要知道您 API 的状态代码 用于"晚点再来"与"这个不见了",这是套件无法知道的.
选择 哪个 要显示的状态是呼叫者的工作——这取决于数据 这个工具箱没有意见.
当地工具包工作
节点24(见 .nvmrc(b) —— nvm use 捡起. 构建工具链的需要
节点20.19+或22.12+;在任何更老的建筑物上,建筑物会因混乱而死
node:util 编号 : styleText 模块错误而不是版本投诉.
nvm use
npm install
npm test
npm run catalog:check
npm run catalog
目录 catalog/ 文档此软件包。 这不是文件演示.
释放
出版者: .github/workflows/release.yml 使用 npm 数据
受托出版 (OIDC) (英语). 没有
NPM_TOKEN 机密 — npmjs.com 配置以信任此 repo 的 release.yml
工作流程.
证出已绝( 二publishConfig.provenance) (中文(简体) ). 信任的出版 打开它
默认和 npm 不接受来自私人来源
仓库, (中文(简体) ),
这部《古兰经》是真实的,所以它不能出版。 如果
重金永远公开.
要剪掉释放,碰上 version 内 package.json 作为公关的一部分。 合并为
staging 运行类型检查、测试和构建、发布和标记承诺
v<version>。 。 。 .
一个未撞倒版本的合并不发布任何信息: 工作流程询问 npm
是否该版本存在,如果存在则停止,所以普通合并是
而不是失败的发布 。 推动 v* 手动标记仍然有效
对照 package.json。 。 。 .
用于消耗应用程序的堆栈
反应+Vite. TanStack 查询所有服务器数据 。 不添加原始内容 fetch 编号 : useEffect 数据装入应用程序.