@ factorialco/rjsf-f0 (英语)
这个 f0 (中文(简体) ) 主题 反应-jsonschema-形式。它使一个RJSF格式具有真实的f0组件——输入,选择,复选框,按钮——而不是平面HTML外观为f0.
在一个已经运行 f0 的应用程序内使用它( Cindual 代码仪表板, Cindial 单体). 将表格嵌入任意页面的Apps应该保留表格SDK自己的主题,这个主题不需要设计系统:f0不能被树震动,因此将其拉入成本兆字节.
安装
pnpm add @factorialco/rjsf-f0
您必须拥有的同伴: react, (中文(简体) ), react-dom, (中文(简体) ), @rjsf/core 6, (简体中文), @rjsf/utils 联合国 @factorialco/f0-react 4.39+或6 (英语:.
使用量
用"阶乘码"格式SDK——它不断取取出表单光谱并提交,只有渲染变化:
import FcodeForm from '@factorialco/fcode-react-forms';
import { Theme, markdownComponents } from '@factorialco/rjsf-f0';
import '@factorialco/rjsf-f0/styles.css';
<FcodeForm
team="my-team"
processId="my-process"
rjsfTheme={Theme}
// Renders the execution result message (markdown) with f0 components —
// GFM tables become the f0 table card with Excel/CSV export.
markdownComponents={markdownComponents}
// Suppresses the SDK's standalone stylesheet, which resets inherited styles
// and would fight the host app's own.
options={{ theme: 'none', locale: 'en' }}
/>;
独立,作为任何 RJSF 主题 :
import Form from '@factorialco/rjsf-f0';
import validator from '@rjsf/validator-ajv8';
import '@factorialco/rjsf-f0/styles.css';
<Form schema={schema} validator={validator} />;
也导出 : Theme, (中文(简体) ), Templates, (中文(简体) ), Widgets, (中文(简体) ), generateTheme(), (中文(简体) ), generateForm() ——匹配官员布局 @rjsf/* 主题软件包——和 markdownComponents,f0的标记下标记渲染器作为反应-标记下 components 地图(内部用于 schema.markdown.before/after传递给 FcodeForm 为结果信息).
主机应用程序必须转换为 f0 F0Provider 高于窗体并导入 @factorialco/f0-react/dist/styles.css;此套件假设同时并只为舰船提供RJSF所编部分的布局规则. 这个 F0Provider 也服务于平分表卡, 其标题和导出菜单通过 f0 的 i18n 解析; 导出一个表格懒散导入 xlsx 通过f0本身的依赖.
制图工作
| 无国界记者协会 | f0 (中文(简体) ) |
|---|---|
| 文本 / 电子邮件 / url / 密码 | F0FormField text |
数字/ 整数 / updown 编号 : range | F0FormField number |
date 编号 : datetime-local 编号 : time | F0FormField date 编号 : datetime 编号 : time |
textarea | F0FormField textarea |
| enum 选择, 多选择 | F0FormField select |
布尔复选框, checkboxes | F0Checkbox |
radio | F0FormField cardSelect (f0没有无线电控制) |
file 编号 : data-url | f0 类 droppzone + 文件芯片(见下文) |
| 提交、增加/移动/复制/删除 | F0Button |
oauth 连接控制 | F0Button (见下文) |
| 错误摘要 | F0Alert |
| 节标题 | F0Heading |
绘制地图的两个蓄意后果:
- RJSF保留对验证的所有权. f0 字段通常用 zod 进行验证; 这里被告知它们处于错误状态(
error)而不是衍生出一种,所以"计划"仍然是真理的唯一来源. 消息是按主题传送的FieldErrorTemplate,而不是通过控制: 一半的地图不是F0FormField完全 —— 复选框、 文件空投区、 对象和数组级别 —— 因此, 完全针对这些会丢弃一个控件 . - 标签由主题提供,而不是由f0提供. 阶乘码格式标签可能包含平分标记,f0取为平分字符串. 主题让标记下标记本身和手取 f0 纯文本,所以控件保持了可访问的名称.
文件字段
FileWidget 替换核心的,使一个赤裸的 <input type="file">。该输入以 CSS 无法达到两种方式给出一个非本地对话框:其“ 没有选择文件” 文本和浏览按钮 浏览器 标签 浏览器 语言——一种西班牙语形式的英语染色体,我们这边的任何语言传播都无法修复.
主题绘制出自己的滴区和每个被选取的文件一个芯片(名称,人可读大小,去掉按钮). 数值不变:核心本身 useFileWidgetProps 仍然拥有 File - > (中文) data: URL交换,所以RJSF储存的都是同字节.
一种例外,选入:当表格提供时 formContext.fcode.keptFiles (单位:千美元)FcodeForm 从 @factorialco/fcode-react-forms ),一个大于50个米B的单文件(LARGE_FILE_BYTES) 在根字段中,完全不读取. 1 GB 附近文件的 Base64 比浏览器所能持有的时间最长的字符串长, 因此在提交表单前编码失败; 大小大小的文件无论如何只能通过上传授权来运行, 它发送 File 如来相. 部件将 File 改为 keptFiles.keep(file) 并存储它返回的字符串: a data: 无内容的 URL 和 a fcode-kept 参数,因此验证,有条件的schemas和JSON复制的形态数据像其他文件值一样对待它. keptFiles.get(value) 返回时 File 后面,主机在提交时把它换回来。 多个文件与嵌入地总是被编码. 独自渲染此主题的主机不会 keptFiles 并不断得到 data: 包含内容的URL. 如果浏览器无法读取所选文件,则部件会显示出错并保留上一个值 .
没错 没有 桥到f0's F0FormField file该字段是由上传钩子驱动的,它返回了一个不透明的识别码,并且——这个阻断器——它的 accept 关闭 MimeType 没有文件扩展名的允许列表 . ui:options.accept 是一个原始的 HTML 接受字符串,所以需要一个图案 .msj (或任何没有注册的MIME类型的扩展)都会默默地失去其过滤器. 投放区保持字符串的逐字形.
ui:options数字 :
| 选项 | 效果 |
|---|---|
accept | 传入输入逐字记录. 也显示为跳动区文字下的提示 . |
dropzoneText | 在任何翻译之前替换空降区副本。 对于一个市场应用来说,这是一条有效的途径: 计划弦通过平台的i18n符号替换,不需要嵌入器的合作. |
染色体定位
每个字符串这个主题都使得这个计划不是作者通过 RJSF 的 translateString —— 说 Add Item, (中文(简体) ), Remove, (中文(简体) ), Move up, (中文(简体) ), Move down, (中文(简体) ), Copy, (中文(简体) ), Errors,还有空降区副本. 他们都是英语 直到一个主机提供翻译,因为 RJSF 的默认翻译是身份函数及其 TranslatableString 数值 为: 英文本RemoveButton 字义 'Remove') (中文(简体) ). 本包中没有任何东西是自己翻译的.
表格上的一个道具将批量定位:
<FcodeForm
translateString={(key, params) => myTable[key] ?? englishStringTranslator(key, params)}
…
/>
由于RJSF没有enum成员
Drag a file here, or click to choose oneDrag files here, or click to choose them(当multiple(中文(简体) )
在本地化产品中制取的表单没有这个道具,则显示在已翻译的字段标签旁边的英文按钮. ui:options.dropzoneText 只修补发区; 翻译者修补一切.
标记下提示
markdownComponents 以 GitHub 警示标记为 f0 调用
> [!NOTE]
> **Nothing is written yet.** You will see a preview first.
| 标记 | f0 变种 |
|---|---|
[!NOTE] | info |
[!TIP] | positive |
[!IMPORTANT] | info |
[!WARNING] | warning |
[!CAUTION] | critical |
任何其它的块引文仍作为 f0 的块引文制作,一个未识别的标记保留在文本中.
有两件事值得了解:
- 这些不是GFM. GFM 谱面包括表格、任务列表、切换、自动链接和脚注;提醒是 GitHub.com 常规和
remark-gfm不分析它们。 标记在引文开头时作为普通文本解析幸存下来,这就是这个渲染器的密钥的取出之处——所以没有评论插件和新的依赖关系,共享markdown-content.tsx以它为首的捆绑,是不被侵犯的。 这也意味着 无 这个渲染器是一个字形[!NOTE]将打印给用户. - 呼唤不是
F0Alert。 。 。 . 那个部件title财务报告和审定财务报表description简单strings,所以通过它将块引出会平整身体,并放下一个作者可以合法地放入平分块的粗体,链接,列表和代码. 呼号保留了真正的平分子并借用了f0的语义色彩尺度,所以仍然以暗模式翻转.
下行标题级别
一个计划作者选择 # 或者说 ### 内部 markdown.before 编号 : markdown.after (或结果) message)无法看到表格本身的标题是什么。 这就是这个尺度,量度,所以可以故意做出选择.
f0 类型尺度为 没有 尾风的默认—— f0/packages/core/src/tokens/typography.ts 设置 base 在14px时, lg 在16px和 2xl 在22px时。 所以说:
| 来源 | 显示在 | |
|---|---|---|
表格本身的标题 (司马 title(中文(简体) ) | F0Heading variant="heading" | 16px / 600 (英语) |
# | f0 (中文(简体) ) text-2xl font-medium | 22px / 500 个 |
## | f0 (中文(简体) ) text-lg font-medium | 16px / 500 个 |
### | f0 (中文(简体) ) text-base font-semibold | 14px / 600 (韩语) |
#### | 此软件包的样式表 | 14px / 600 (韩语) |
##### | 此软件包的样式表 | 14px / 500 个 |
###### | 此软件包的样式表 | 14px / 500, 中学 |
| 正文文本 | f0 (中文(简体) ) text-base font-normal | 14px / 400 个 |
**bold** | f0 (中文(简体) ) font-semibold | 14px / 600 (韩语) |
关于表格的标题没有这方面的规则. 在选择一个关卡前读取表格,因为有三行相撞:
#排名高于表格的标题. 22px对着标题的16px,所以形式内部的取向大于它所坐的取出形式. 避免#一种形式.###与**bold**——均为14px/600. A###部分标题与粗体句是无法区分的.####土地价值相同,因此无法与两者区分.##匹配标题大小 以较轻的一分轻的重量级来表示,这是标题的同级,而不是标题下的一个部分.
压缩是f0's,而不是这个包:在标题(16-600)和正文(14-400)之间,比例尺有两个插槽,而马克下限有6个级别——所以任何映射都必须倒塌的级别而不是保存.
哪个级别读作一节,取决于它直接下方的是什么,这就是表不能告诉你的部分。 A 类 markdown.before 标题几乎总是后面有两样东西之一,它们不是相同的重量:
| 直接从下方 | 显示在 | 上面的那个方向 |
|---|---|---|
| 普通字段的标签 | 16px / 500, 阴暗 | ### (14/600,全能)读作明显地是一个标题——更小,但更大胆更暗 |
对象或数组的标题( Q)TitleFieldTemplate → F0Heading(中文(简体) ) | 16px / 600, 全员 | ### 读作从属于它引入的领域;没有任何东西比它高,因为 ## 为 16/500 和 # 会排出表单本身 |
这么说吧 ### 是普通字段之上的正确默认,而数组之上的错误默认——和 ## 因为它只符合标题的大小,同时保持了更轻的重量. dev/main.tsx 使两个级别都高于一个字段,从而可以看出差异而不是理由.
标题上方 对象或数组 通常是错误的形状而不是错误的级别。 这些字段在16/600时已经形成了自己的标题,因此,一个上方的标记是同一事物的第二个标题,因此无论它使用哪个级别,它都读得很差。 两条出路,都比选别的好 #数字 :
---
一条规则在不竞争标题的情况下打开了组合:它使1px发线与12px的通关,而这个字段自己的标题成为了一节标题. 当标题的要点是将组合与之前的组合分开时使用这个.
或将标记下块放下,让标题自己携带部分. 用这个当标题和标题 说相同的事情.
一个头在打开一群人的时候 就能赢得它的位置 多个 字段,每个字段都有自己的标签——在那里,它命名了没有任何一个字段的标题能够命名的东西.
分级
一个普通值列表——地址,标记,代号——每件做一行:控件,然后是项目工具栏,然后是数组的添加按钮.
带行 没有自己的标签. RJSF 在数组后各加其位置(Emails-1, (中文(简体) ), Emails-2)并标出每个需要的非核项,在两个地址的可选列表中产生一个重复的标题和两个星号. 数组本身的标题已命名为组,控件通过 f0 保留其可访问名称 hideLabel。持有对象或嵌入式阵列的行不受影响:这些是多个字段的块,它们的标签是从下一个字段中分离出来的.
工具栏是RJSF的,所以决定一行能做什么的,是计划:
{ "ui:options": { "orderable": false } }
orderable (默认) true) 向上/向下绘图——当命令没有意义时将其关闭,这是最平面的列表. copyable 默认为 false 现在, removable 财务报告和审定财务报表 addable 改为 true。 。 。 .
OAuth 连接字段
SDK的表单 "ui:widget": "oauth" 字段在弹出时打开提供者,当流量结束时作出反应;部件逻辑船在其中 @factorialco/fcode-react-forms。这个主题只贡献它绘制的控制,例如 Theme.oauth.ConnectControl页:1 F0Button (单位:千美元)default 在闲置和等待的时候, outline 加上下面的流量错误信息. FcodeJsonSchemaForm 找到它通过 rjsfTheme.oauth和它找到的一样 rjsfTheme.multistep。 。 。 .
还没有f0
range作为数字输入而不是F0Slider。 。 。 .- 标题
h1– 说吧 –h3来源于f0自己的制造器;h4– 说吧 –h6由这个软件包的样式表来取而代之,因为这里的渲染器必须携带由主机的 Tailwind 构建而来从未生成的 Tailwind 工具类(它)contentglubs不包括此软件包). - SDK的表单
sourceCode字段保留其摩纳哥编辑器,它不是f0型.
发展
pnpm test # vitest: renders forms through the theme and checks value round-trips
pnpm dev # vite playground with every widget
pnpm build # tsc + vitest + vite (es + cjs + types + styles.css)