@brett lamy/ ui (法语)
由UIKit容器模式所启发的触地-第一反应组件,以反应-aria-组件和Tailwind v4. 颜色,半径和字体来自您的阴影主题( CSS 变量); iOS 将船看成一个可选主题. 库有列表,导航,适应分页视图,抽屉,工作表,可再使用的跳绳,作曲器(一个Markdown快取框),PencilKit绘图和信件滚动器. 产品特定成分(一个IDE工作台,一个团队聊天外壳,一个地图聊天,.)是 块,而不是从此软件包中安装.
安装
两种方式,来自同一源文件. 文件解释: 安装 财务报告和审定财务报表 优化。 。 。 .
- shadcn登记(产品建议).
npx shadcn add https://blamy.github.io/ui/r/split-view.json复制一个组件的来源以及它导入到您的应用中的内容( e)components/ui/…, (中文(简体) ),lib/…),所以你拥有文件,并且只运送你使用的东西. - 没有. 一种依赖 里面的一切:
npm i @brett_lamy/ui
一次导入样式表——对于iOS调色板,则导入bl-主题(它设置了shadcn的CSS变量;留出它来使用您自己的shadcn主题). BLProvider 选取浅/暗和锡子树 ThemeScope 将任意一组变量覆盖到子树 :
@import '@brett_lamy/ui/styles.css';
@import '@brett_lamy/ui/theme.css'; /* optional: the iOS palette */
import { BLProvider, NavigationStack } from '@brett_lamy/ui';
export function App() {
return (
<BLProvider tint="#0a84ff">
<NavigationStack screens={screens} onPop={handlePop} />
</BLProvider>
);
}
一揽子措施是无害环境管理,每个源模块有一个输出模块(sideEffects 以 CSS 为限,所以捆绑者会舍弃您不导入的东西; 组件模块以 'use client' 给下一个Js.
需要反应19(使用组件) use(Context), (中文(简体) ), <Context value> 财务报告和审定财务报表 ref 作为道具).
索引栏
IndexBar 接受应用程序定义的字符串或数字键。 标签是可选的,所以密集的时间可以像点一样渲染,以及 preview 接受任何反应节点。 不导航的 Hover 预览; 指针拖放和键盘导航 ()ArrowUp, (中文(简体) ), ArrowDown, (中文(简体) ), Home, (中文(简体) ), End承诺停止.
import { IndexBar, type IndexBarItem } from '@brett_lamy/ui';
const stops: IndexBarItem<number>[] = turns.map((turn, index) => ({
key: turn.sequence,
label: index % 5 === 0 ? String(index + 1) : undefined,
caption: turn.author,
preview: <span>{turn.summary}</span>,
}));
<IndexBar
items={stops}
label="Jump to conversation turn"
onJump={(sequence) => scrollToTurn(sequence)}
/>;
若为 items ,该组件保留其A-Z形式:
<IndexBar
avail={new Set(['A', 'B', 'K'])}
onLetter={(letter) => scrollToSection(letter)}
/>;
出口
- 集装箱:
NavigationStack, (中文(简体) ),SplitView, (中文(简体) ),Credenza, (中文(简体) ),SideDrawer, (中文(简体) ),AdaptivePane, (中文(简体) ),Sidebar - 列表和导航:
List, (中文(简体) ),List.Section, (中文(简体) ),List.Row, (中文(简体) ),IndexBar, (中文(简体) ),TabBar, (中文(简体) ),TabView, (中文(简体) ),EditBar - 投入和反馈:
SearchField, (中文(简体) ),Switch, (中文(简体) ),Segmented,加上阴影式原始人(Button, (中文(简体) ),Dialog, (中文(简体) ),Sheet, (中文(简体) ),Select, (中文(简体) ),ComboBox, (中文(简体) ),Tabs, (...) (中文(简体) ) - 动议 :
springs, (中文(简体) ),springCss, (中文(简体) ),TextMorph, (中文(简体) ),NumberMorph, (中文(简体) ),AnimatedHeight, (中文(简体) ),ContentSwap, (中文(简体) ),Celebrate - 基金会:
BLProvider, (中文(简体) ),ThemeScope, (中文(简体) ),AppearanceProvider, (中文(简体) ),Icon, (中文(简体) ),Avatar, (中文(简体) ),Spinner - 团队聊天 :
ChatShell及其所属区域ChatShellNav, (中文(简体) ),ChatShellSidebar, (中文(简体) ),ChatShellMain, (中文(简体) ),ChatShellHeader, (中文(简体) ),ChatShellAside, (中文(简体) ),ChatShellPanel...FloatingSheet, (中文(简体) ),FloatingChat, (中文(简体) ),ChatColumn, (中文(简体) ),ArtifactChatContainer(Discord parts——频道,消息,线条,成员——活在discord-clone登记册块) - 工作间 :
WorkbenchShell及其零部件WorkbenchSidebar, (中文(简体) ),WorkbenchMain, (中文(简体) ),WorkbenchHeader, (中文(简体) ),WorkbenchDock, (中文(简体) ),WorkbenchPanel, (中文(简体) ),WorkbenchTabBar,),对话部分(Conversation, (中文(简体) ),UserMessage, (中文(简体) ),AssistantMessage, (中文(简体) ),WorkLog, (中文(简体) ),ToolCall,(......),TerminalHeader编号 :TerminalBody,表面(SurfacePicker, (中文(简体) ),SurfaceBrowser, (中文(简体) ),SurfaceFiles, (中文(简体) ),SurfaceDiff, (中文(简体) ),SurfaceAgents, (中文(简体) ),Composer及其各部分,ModelPicker, (中文(简体) ),MessageScroller, (中文(简体) ),MarkdownView - 演示应用 :
MapChatDemo, (中文(简体) ),DeliveryTrackingDemo, (中文(简体) ),SidebarDemo(完整的应用程序——Discord, T3代码, GitHub—— 是注册块)
每个组件从包根导出其道具类型. 互动和反应性实例见"故事书"目录.
团队聊天
ChatShell 是一个薄的布局根:它测量自己的宽度,拥有紧凑的导航抽屉并应用聊天调色板。 里面的一切都是你自己安排的一部分——省去布局不需要的东西. 部件读取 shell 状态 (width, (中文(简体) ), compact, (中文(简体) ), navOpen, (中文(简体) ), setNavOpen)通过 useChatShell()。一个完整的Discord风格的应用船作为 discord-clone 注册块,带有它的频道,消息,成员和作曲部分(安装它来拥有并编辑它们).
import {
ChatShell, ChatShellNav, ChatShellSidebar, ChatShellMain, ChatShellHeader, ChatShellNavTrigger, ChatShellTitle,
ChatShellFooter, TabView, TabViewBar, TabViewList, TabViewTab, TabViewIndicator, SidebarContent, SidebarSection,
SidebarItem, Composer, ComposerCard, ComposerInput, ComposerFooter, ComposerSpacer, ComposerSend,
} from '@brett_lamy/ui';
export function Chat() {
const [channel, setChannel] = useState('general');
return (
<ChatShell breakpoint={880}>
<ChatShellNav>
<TabView orientation="vertical" defaultSelectedKey="hq" className="contents">
<TabViewBar variant="workspace">
<TabViewList aria-label="Workspaces">
<TabViewTab id="hq" textValue="HQ"><TabViewIndicator variant="pill" />{/* tile */}</TabViewTab>
</TabViewList>
</TabViewBar>
</TabView>
<ChatShellSidebar>
<SidebarContent>
<SidebarSection title="Team">
<SidebarItem label="general" active={channel === 'general'} onPress={() => setChannel('general')} />
<SidebarItem label="dev" badge={2} active={channel === 'dev'} onPress={() => setChannel('dev')} />
</SidebarSection>
</SidebarContent>
</ChatShellSidebar>
</ChatShellNav>
<ChatShellMain>
<ChatShellHeader><ChatShellNavTrigger /><ChatShellTitle>{channel}</ChatShellTitle></ChatShellHeader>
<div role="log" className="min-h-0 flex-1 overflow-y-auto">{/* messages */}</div>
<ChatShellFooter>
<Composer onSubmit={send}>
<ComposerCard>
<ComposerInput placeholder={'Message #' + channel} />
<ComposerFooter><ComposerSpacer /><ComposerSend /></ComposerFooter>
</ComposerCard>
</Composer>
</ChatShellFooter>
</ChatShellMain>
</ChatShell>
);
}
ArtifactChatContainer 当空间允许时,在文物旁保持对话。 在其容器断点下方 文物保留了满布和 Composer 上面飘来飘去 上面写着记录.
<ArtifactChatContainer working={isWorking}>
<ArtifactChatContainer.Chat><Conversation /></ArtifactChatContainer.Chat>
<ArtifactChatContainer.Composer><MyComposer /></ArtifactChatContainer.Composer>
<ArtifactChatContainer.Content><Artifact /></ArtifactChatContainer.Content>
</ArtifactChatContainer>
工作区
由部件组成的适应性IDE脚手架: WorkbenchShell 根可以测量自身并拥有区域状态, 以及您所放置的部分。 每个部分从外壳的宽度级取出其演示文稿——桌面列(1120px并更宽),右上角面板抽屉(760–1119px),或汉堡侧边栏,紧凑面板页,底取分页栏,再从下取分页码头——取自外壳自取的容器,而非取景口. T3代码式的完整应用程序是 t3-clone 登记区块.
import {
WorkbenchShell, WorkbenchSidebar, WorkbenchMain, WorkbenchHeader, WorkbenchSidebarTrigger, WorkbenchTitle,
WorkbenchActions, WorkbenchDockTrigger, WorkbenchPanelTrigger, WorkbenchDock, WorkbenchPanel,
WorkbenchTabBar, WorkbenchTab,
} from '@brett_lamy/ui';
export function Workbench() {
return (
<WorkbenchShell tint="#0a84ff">
<WorkbenchSidebar><Threads /></WorkbenchSidebar>
<WorkbenchMain>
<WorkbenchHeader>
<WorkbenchSidebarTrigger />
<WorkbenchTitle project="cookbook">{thread.title}</WorkbenchTitle>
<WorkbenchActions><WorkbenchDockTrigger /><WorkbenchPanelTrigger /></WorkbenchActions>
</WorkbenchHeader>
<Chat />
<WorkbenchDock><Terminal /></WorkbenchDock>
</WorkbenchMain>
<WorkbenchPanel><Surfaces /></WorkbenchPanel>
<WorkbenchTabBar value={surface} onValueChange={setSurface}>
<WorkbenchTab id="chat" icon="msg">Chat</WorkbenchTab>
<WorkbenchTab id="diff" icon="diff">Diff</WorkbenchTab>
</WorkbenchTabBar>
</WorkbenchShell>
);
}
子孙阅读并驾驶外壳 useWorkbenchShell() (单位:千美元)sidebarOpen, (中文(简体) ), dockOpen, (中文(简体) ), panelOpen, (中文(简体) ), panelFullscreen他们的装饰和图案, widthClass, (中文(简体) ), compact) (中文(简体) ).
Composer 是构成的( 如 Shadcn 的输入组) : Composer 拥有草案, ComposerCard 持有 ComposerInput (单位:千美元) @brett_lamy/docstream-editor WYSIWYG 编辑器;被粘贴的图像成为附件芯片)和加通(ComposerFooter, (中文(简体) ), ComposerSelect, (中文(简体) ), ModelPicker, (中文(简体) ), ComposerSend,(......),以及 ComposerBump纸牌上或下方附着. WorkbenchComposer 是默认的构成. MarkdownView 向下列机构提交答复: @brett_lamy/docstream· ; SurfaceFiles 财务报告和审定财务报表 SurfaceDiff 使用情况 @pierre/trees 财务报告和审定财务报表 @pierre/diffs。 。 。 .
图像注释
按下附件打开 AnnotateLightbox,它以 PencilKitAnnotator 默认; 将下划平入图像。 注释器是可插件的——将它交换给a以下的每个作曲家 ComposerAnnotatorProvider,或每个作曲家 annotator 道具( r)annotator={null} 选择退出纯预览 :
import { ComposerAnnotatorProvider } from '@brett_lamy/ui';
<ComposerAnnotatorProvider annotator={MyAnnotator}>
<App />
</ComposerAnnotatorProvider>;
// or per composer: <Composer annotator={MyAnnotator}> (annotator={null} opts out)
注释员是一个称其 children 与 { canvas, toolbar?, title? }:画布被铺在图像上(它首先) <svg> 被平整为保存上的图像,工具栏就坐在其下方.
笔会Kit
PencilKit用 BL UI 语言绘制地表,在 完美的无手数字 : PencilCanvas,工具/墨水/宽度拾取器和取消栏, usePencilHistory,以及 StrokePath 用于渲染已保存的中风.
import { PencilKitDemo, demoStrokes } from '@brett_lamy/ui';
<div style={{ position: 'relative', height: 540 }}>
<PencilKitDemo defaultStrokes={demoStrokes()} style={{ position: 'absolute', inset: 0 }} />
</div>;
工作空间发展
pnpm nx build @brett_lamy/ui
pnpm nx lint @brett_lamy/ui