欧

Firna React Industrial and web surfaces的共享UI组件库. 最早的消费者是会计应用和朱诺应用.

关键特性

• 共享下拉菜单, 选择器, 组合框, 拖动选择, 分块控制, 无线电卡、开关、自旋器、装货机(六个不确定形状外加) 确定进度栏和环、按钮、标签输入/文本区域、, 数据表, 可编辑数据网格(气相表/名称式), a 从擦出交互式图表家族(栏、行、区域、火花线、stat) 瓷砖 甜甜圈 仪表 子弹 漏斗 基质热图 散射 直方图, 瀑布,小倍数) 在彩色盲光的调色板上, 跨平台块 丰富文本编辑器, 并带有条形标记 协作层(活页、跟踪变化、评论线), 模式 土司提供者/控制者 相机 状态徽章 动画相机 边框、 日历加热图、 完整的事件日历( 月/ 周/ 日/ 议程, 经常性事件,拖放创建),分支工作流程构建器步骤图 原始版,一个多轨编辑时间表,包含pro剪辑编辑,以及 环绕它的视频编辑面板(方案显示器、运输、水平) meter, media bin, 财产检查器, 效果架, 键框编辑器, 导出 对话).
• 共享 xs 编号 : sm 编号 : md 编号 : lg 缩放( e)ControlSize横跨 交互式控制——按钮、输入、下拉选择器、日期字段、, 分节控件、开关和列表行. xs 是密度为26px的大小.
• 触摸表面:在a TouchSurface,控件和列表行给出每个 目标至少44乘44px,无论大小。 任择紧凑文本 尺度为密集地表面服务.
• App shell 部件: 链接按钮和与当前页面状态的链接标签, 中性 和紧急通知、页和面板的空状态、已打开的菜单 带有电话菜单表,以及控制面板调整控件大小.
• 可主题视觉标志 这样消费者可以使用自己的品牌主要颜色, 带有4个已运出预设——会计违约和朱诺,每套都取自 和一暗变相. 每个部件都从符号中读出颜色,太暗 模式是预设的互换,而不是每个组件的选入.
• 一个共享的,平静的焦点 闪耀在每一个控制。 在网络上 DOM 后端画 这是CSS的 :focus-visible,所以服务器上和静态的 HTML 保持不变 键盘在水合之前的承受力——或根本没有JavaScript。 土著 保持其平台焦点行为. 一个 focusIndicator 设置——主题 每个控制,或每个实例——选择发光(ring),浏览器 控件可见框的大纲(outline),或者完全没有焦点样式 (单位:千美元)none对于嵌入在表面的显示焦点本身的控制.
• 门户化、固定的网络日期/下拉/人口覆盖,各由其放置 拥有量度的尺寸 所以它翻过扳机而不是被剪去, 带有内容大小的选取菜单和z-index逃生舱门,加 (原始内容存档于2017-10-12). touch-feel friends.
• 对顶端对话框进行焦点控制的堆叠的网络对话框, 命令焦点 返回,一个页面滚动锁, 和现场土司反馈, 加上本地对话框和 底盘.
• 由 Expo, React Introduct 和库本身的 DOM 共享的平台文件 网络上的后端.
• 重点单位测试,浏览器交互测试,以及包出口检查.
• 故事书预览,用于同存非放出PR上的视觉评论.
• 请发布 PRs 和 npm 可信发布 @firna/ui。 。 。 .

用户界面

软件包名称是 @firna/ui公共出口可通过以下渠道获得:

• @firna/ui 为所有公共部门和助手提供服务.
• @firna/ui/animated-border 用于跟踪一个的动画彗星-轨道边框 圆形矩形外缘以突出元素,以单色或单色显示 双色品牌梯度.
• @firna/ui/avatar 以圆形或圆形平方表示.
• @firna/ui/badge 配有口音、变体和 大小变相.
• @firna/ui/button 以声调、大小和区块变体为主的按钮, (单位:千美元) role 将它重新指向另一个单激活角色(checkbox, (中文(简体) ), menuitem, (中文(简体) ), radio, (中文(简体) ), switch, (中文(简体) ), tab),与该角色必须承担的状态——如此 标签或复选框保持共享焦点发光,而不是被手卷.
• @firna/ui/calendar 整个活动日历(月、周、日、和议程) 视图、经常性事件和拖放创建).
• @firna/ui/chart 用于交互式图表家族——栏、行、区域、, 火花 花砖 甜甜圈 仪表 子弹 漏斗 基质热图 散射, 气泡、直方图、瀑布和小倍数——由图书馆建造 拥有原始人和 react-native-svg,没有图表依赖。 每个 轮船图 键盘导航接地层、悬浮/扫描读出和 可读数据表双向.
• @firna/ui/data-grid 可编辑的气表/编号式数据网格 (单元格范围选择、键盘导航、虚拟化无穷卷轴、键入) 可编辑的单元格、列菜单和反应卡堆.
• @firna/ui/date 用于单日期和日期范围字段.
• @firna/ui/drag-select 用于选择行和牌的橡胶带:a 能够覆盖一个列表或应用程序 shell 的每一页的提供者 useDragSelectableOptions 页面钩子、目标和状态钩子,控制 (单位:千美元)selectedIds)或无控制选择,每页选择范围, 可配置的起步规则和一个被忽略的标记,边缘自动滚动,一个自定义 框通过 renderMarquee,和几何帮助。 手势继续 网络; 本地保存选择状态.
• @firna/ui/dropdown 用于下拉菜单、选择器、组合框、图层帮助器和 选择器在形成水合物后对必须的焦点进行反射.
• @firna/ui/empty-state 用于页和面板中带有标题级的空状态 由呼叫者提供.
• @firna/ui/heatmap 日历贡献加热图及其纯版式 和彩色级的助手.
• @firna/ui/input 用于标记的文本输入、文本区和赤色输入 边框.
• @firna/ui/kanban 横向滚动 状态板,该状态板将单个选择字段记录为列.
• @firna/ui/link 链接按钮和与目的地链接标签 当前页面状态 .
• @firna/ui/list 对于带有项目间分隔符的垂直列表,可选 可点击的项目、链接导航行和 ListItem 排队.
• @firna/ui/loader 用于加载指标家族: Loader 有六个 可互换的不确定形状( c)ring, (中文(简体) ), dot-grid, (中文(简体) ), dots, (中文(简体) ), bars, (中文(简体) ), blades, (中文(简体) ), pulse),加 (中文(简体) ) ProgressBar 财务报告和审定财务报表 ProgressRing 总计 已经知道.
• @firna/ui/modal 用于自动网络堆叠的共享对话框 和本地模式演示,加上公共门户、模型和分层帮助.
• @firna/ui/notice 中性通知和紧急通知,并附有机身和行动位置.
• @firna/ui/panel-resize 用于控制面板大小调整手柄.
• @firna/ui/popover 用于固定的弹出器、就地菜单和电话菜单 床单.
• @firna/ui/radio 对标题为“无线电选择卡”.
• @firna/ui/rich-text 用于点名式块编辑器,并加减号, 内行格式化、列表/检查列表、本地键盘工具栏和 协作层(活页、跟踪变化、评论线程) RichTextPresenceBar 财务报告和审定财务报表 RichTextCollabRail 表面 .
• @firna/ui/segmented 对主题的单选分块控件.
• @firna/ui/sheet 用于主机模式底页 表格、菜单列表或一个控制下的API后面的拾取器.
• @firna/ui/skeleton 对于内容形状的加载 占位符:发光的条和圆,一行和一列组,以及 脉冲提供商将一整个骨架从一动画中扫出.
• @firna/ui/sortable-list 可拖放列表(指针+) 键盘重排顺序,可选的起取/取取取手柄,以及垂直或 横向流动)加 SortableGroups 让多个 * 列出交换物品——作为分块或板块叠放——报告 各随其来源和目的地组移动.
• @firna/ui/spinner 用于固定的旋转加载指示器.
• @firna/ui/status-dot 小主题状态 信号显示在标签旁边 可以在状态正常时脉冲.
• @firna/ui/switch 用于打开/关闭二进制开关.
• @firna/ui/table 对于带有可选标题和可点击行的数据表格.
• @firna/ui/theme 页:1 SharedUiThemeProvider,默认会计类型 符号、朱诺符号预设、 darkSharedUiTheme 财务报告和审定财务报表 junoDarkSharedUiTheme 黑暗预设 SharedUiScheme 类型, createSharedUiTheme(overrides, base),以及整个主题 focusIndicator (单位:千美元)SharedUiThemeProvider theme={{ focusIndicator: "outline" }} 互换次数 control的焦点发光, 用于浏览器大纲。 见 他们 黑暗模式合同和 重点指标 用于焦点模式.
• @firna/ui/focusRing 页:1 useFocusRing, (中文(简体) ), focusRingStyleFor, (中文(简体) ), focusRingCssVariablesFor,以及 focusRingDomPropsFor见 重点指标指南 用于自定义控制.
• @firna/ui/timeline 用于多轨道编辑 时间表:一个视频或音频编辑器的标尺、车道、剪辑和播放头.
• @firna/ui/toast 给面包供应商的 useToast 钩子 toastController 和临时通知土司,包括 带有可选自定义主要图标的卡和固态变体.
• @firna/ui/touch-surface 页:1 TouchSurface 财务报告和审定财务报表 useTouchSurface,哪个 标记和读取带有44px控制目标的表面.
• @firna/ui/typography 用于文本角色, TextScaleProvider, (中文(简体) ), useTextScale, (中文(简体) ), 和内容 scale 超过.
• @firna/ui/video-editor 视频编辑器 时间线周围的面板:程序显示器、传输、平分表、媒体 bin, 属性检查器, 效果架, 键框编辑器, 以及导出对话框 .
• @firna/ui/workflow 用于分支工作流程构建器 — 步图画布 (颜色编码节点、有色边标签、叉子、传说、添加步骤) 构建自动化工作流程.

安装

npm install @firna/ui

所有平台软件包都是可选的对等依赖; 安装集 目标:

• 仅网络( Vite, Next.js, 任意 DOM 捆绑器) : react, (中文(简体) ), react-dom,以及 lucide-react - 这是整个网络对等集。 没有 react-native 没有 react-native-web 安装,不需要捆绑器别名: import 条件确定为 dist/node每一个原始人都会通过 库自己的DOM后端. 这对类型也有好处——网络建设 声明是自成一体的,所以即使是严格的TypeScript消费者 安装任何额外设备.
• 博览会/反应原生(iOS,Android,和博览会网络): react, (中文(简体) ), react-dom, (中文(简体) ), react-native, (中文(简体) ), react-native-svg, (中文(简体) ), lucide-react-native,以及 lucide-react地铁 react-native 条件解析 dist/**时 每个文件选择本地或网络执行。 博览会网络应用 留着什么 react-native-web 自身对应的本地代码需求 图书馆 .web 文件解析到 DOM 后端, 也永远无法到达 对于它.
• 本地人可选择: @gorhom/bottom-sheet, (中文(简体) ), react-native-gesture-handler, (中文(简体) ), 财务报告和审定财务报表 react-native-reanimated 为本地底页提供动力.

每个组件都通过 src/primitives,一小组 带有本地文件和 .web 兄弟姐妹:反应原生原始人 (单位:千美元)react-native (原始内容存档于2017-03-21) (中文(简体) ). Natural; 库自有的DOM后端在网络上), SVG (单位:千美元)react-native-svg 打开 土生土长, DOM <svg> )和图标(lucide-react-native 在本土, lucide-react ) (中文(简体) ). 接受图标道具 IconComponent,该类型同时是Lucide 包的图标满足,所以消费者通过与其匹配的 平台.

他们

见 主题指南。 。 。 .

重点指标

见 重点指标指南。 。 。 .

Web 焦点 CSS 和服务器渲染

见 重点指标指南。 。 。 .

图表颜色

见 主题指南。 。 。 .

开发者开始

npm ci
npm test
npm run typecheck
npm run typecheck:web
npm run build
npm run test:dist
npm run test:package
npm run storybook
npm run storybook:build
npm run test:browser

这个 发展指南 解释每个支票,完整 cargo xtask check 大门,AI审查 包装、模拟目录、浏览器和快照套件以及套件 导出地图 .

软件包发布

见 发布和部署指南。 。 。 .

故事书部署

见 发布和部署指南。 。 。 .

密钥代码跳出点

• 平台接合( 反应原生, SVG, 图标) : 弧/原生物
• 共享主题边界 : src/主题.tsx
• 家庭研究: 用户界面 链接其读取.
• 共享控制大小缩放 : 弧/控制Size.ts
• 触摸表面标记及其44px目标大小: src/touch Surface.tsx (法语)中,和触摸度量单位 斜弧/触摸
• 共享焦点- 光线原始 : src/焦点页:1 标记拼写 斜弧/焦距,则 CSS 规则在 斜弧/原生/大小/分数
• 指南: 主题, (中文(简体) ), 重点指标, (中文(简体) ), 发展, (中文(简体) ), 财务报告和审定财务报表 释放和部署
• 浏览器测试 : 测试/浏览器/,每个游戏剧作家谱 组成家庭
• 故事视觉/ARIA快照扫描: 测试/浏览器/相机. spec.ts
• 仓库自动化 : 任务/README.md
• 共享组件协议及其链接页面: 文件/议定书/共享-ui组件
• App shell 部件协议,用于 xs 大小、紧凑文本、触摸表面, 链接、通知、空态、菜单和面板大小 : 文档/议定书/应用壳部分
• 口袋目录 : 文件/堆放/README.md
• 网络覆盖协议 : 文献/议定书/网络覆盖
• 丰富文本合作协议 : 文件/protocol/rich-text-collising.md
• 拖动选中的协议 : 文档/protocol/drag-select.md, (中文(简体) ), 联合国 筛选规则,以及 选项参考
• 消费者移徙: 文件/消费者-移民.md

相关仓库

• 消费者/来源会计组成部分: /Users/calummoore/projects/futex/accounting
• 朱诺消费者: /Users/calummoore/projects/futex/juno