@boost33/ui (英语)
软件包里有Boost33产品 十四个组成部分
设计符号它们被绘制出来,发布于公共 npm. 今天有11艘舰只;
账户Menu、通知中心和命令Palette属于v1的范围,而不是
已经建成了 在外壳上,它也会飞来飞去 LaunchLoader,屏幕是产品
当另一个打开时显示,然后 DotMatrixLoader 它与画.
是因为产品切换器和钱包芯片 在钱包和 没有别的地方,而且因为一个侧边栏固定在一个应用程序中,没有固定在另一个应用程序中 三个.
定向
| 我们如何在这里建设 | CLAUDE.md |
| 我们所建造的 | 线性文档 共享应用程序外壳 |
| 词汇 | CONTEXT.md,和倡议的 词汇 文档 |
| 已解决决定 | docs/adr/ |
| 不同版本之间有什么变化 | CHANGELOG.md |
| 车票 | 线性, 项目 Boost33 共享用户界面 |
图标
npm run typecheck
npm run test # behaviour only — screenshots run in CI
npm run lint
npm run afk # one Linear issue, unattended, in a container
在第一个AFK运行前
cp ~/.config/toolkit/afk.env .sandcastle/.env
npx sandcastle docker build-image # once per machine
npm run afk # watch the whole first iteration
在日志中注意真正的测试输出,而不是代理对其的总结.
消费者
钱包首先迁移,第二分数. 在从这两次渲染之前没有 1.0 软件包 ——在那之前它有一个消费者,这是一个带有版本号码的叉子.
字体: 映射悬钩 :root没有 body
工具箱的面孔读取了三个钩子, --boost33-font-display, (中文(简体) ), --boost33-font-sans
财务报告和审定财务报表 --boost33-font-mono,以及 tokens.css 解决他们 打开 :root
(单位:千美元)--font-sans: var(--boost33-font-sans, Inter), …) (中文(简体) ). 自定义属性解决
在它被宣布的地方, 所以一个钩子只设置 body 从来没有到达工具包
工具箱悄悄地倒回了Inter, Outfit和Geist Mono.
与 next/font,将每个字体的 .variable 课开始 <html>没有 <body>, (中文(简体) ),
绘制钩子 :root数字 :
:root {
--boost33-font-display: var(--font-outfit);
--boost33-font-sans: var(--font-inter);
}
为了检查它,检查任何工具包元素(一行导航)并读取其计算
font-family。一个错误的提醒:在无法使用谷歌字体的 dev运行中
已达到, next/font 自行替换 'Inter Fallback',而dev日志说
Failed to download `Inter` 。这是网络,而不是绘图(由
- 出局了).
服务器组件: 从未将一个函数传递给工具包的客户端组件
本软件包的三个模块是客户组件('use client':
AppSwitcher, (中文(简体) ), WalletChip 和内部 NavHeightBudgetWarning。 。 。 .
其他的一切都会.. AppShell, (中文(简体) ), TopBar, (中文(简体) ), Sidebar, (中文(简体) ), NavItem, (中文(简体) ), NavSection, (中文(简体) ),
NotificationButton, (中文(简体) ), PageHeader, (中文(简体) ), Wordmark 和标记 -- -- 制作在
服务器.
服务器组件不能将函数或组件传递给客户端组件 :
道具跨越边界序列化, Next拒绝任何非
纯数据。 这么说吧 从服务器组件, 绝不通过 linkComponent, (中文(简体) ),
onTopUp, (中文(简体) ), onOpenChange 或任何其他函数 AppSwitcher 或者说
WalletChip。 。 。 . 下个掷出( “功能不能直接传递给客户端 )
部件"),每个被签入者都会使返回达到500个(由护照找到).
renderToStaticMarkup 他们使一棵没有树
边界.
把两个放在一个小的里面 'use client' 文档,其中
导入您的路由器 Link 生成 <AppSwitcher linkComponent={Link} …/>
财务报告和审定财务报表 <WalletChip onTopUp={…} …/>,然后将文件的组件传入
苹果壳 switcher 财务报告和审定财务报表 wallet 插槽 。 可串行道具( S)products, (中文(简体) ),
labels, (中文(简体) ), locale,余额)仍然可以从服务器通过它而来.
AppShell 财务报告和审定财务报表 NavItem 带 linkComponent 安全:它们是服务器模块,
因此,函数从未跨越边界.
发射屏幕
LaunchLoader 是演示文稿。 使得它拥有时间和
通过 a caption (单位:千美元) progress (0-100,或 null 没有
诚实的号码。 每种产品的背景都包含在内:
黑色 有一道模糊的白橙色发光 从中间上升
屏幕。 没有产品颜色可以通行; stops 已贬值和被忽略
自0.5.1起 标题坐直 在发光
npm run launch-contrast-check 测量它.
发光由软件包样式表绘制,不取道道具,所以两侧 跳出一个相同的屏幕。 将地色也印入地上 所以瞬间 在样式表和标记到达之前, 颜色已经是黑色而不是白色 :
import { LaunchLoader, launchBackdropCss } from '@boost33/ui'
<style dangerouslySetInnerHTML={{ __html: launchBackdropCss() }} />
<LaunchLoader caption={caption} progress={progress} />
一个动画背景,当一个人存在,进入 backdrop 插槽 。 屏幕
必须保持完整的没有它。 见 CHANGELOG.md (B33-1389,B33-1401)全资合同.