故事书格式
A 类 故事书 添加和装饰器将Formik Fields包裹起来,并在一个面板中跟踪其状态.
您可以在行动中看到实例故事 这里。 。 。 .
感谢 @ 贾雷德帕尔默 赐予了我们惊人的 表单ik 图书馆和造型又很棒.
向BBB技术的迁移
注意, 此软件包已迁移到 org : BBB 技术。这唯一真正的区别
表示包需要安装一个新的命令,由org的 sult(即. npm i --save-dev @bbbtech/storybook-formik(中文(简体) )
并更新您主.js中注册软件包时的路径.
这也意味着所有未来的版本都会在新软件包下发布,所以请迁移您的依赖性,如果你 想要获得未来的版本.
安装
npm install --save-dev @bbbtech/storybook-formik
然后注册加词 .storybook/main.js
module.exports = {
stories: ['../stories/**/*.stories.tsx'],
addons: ['@bbbtech/storybook-formik/register'],
};
使用量
假设您将表格分成较小的、可重复使用的组件, 而这些“ 子格式” 依赖于 formik 上下文, 每一个 子窗体可能用来建立更大的窗体,但您仍然想要测试并独立运行. 你可以用Formik的电脑 装饰器,这样我们就可以将子窗体包入一个Formik组件,它会将上下文传递为正常.
鉴于一个简单的子形式 :
import React from 'react';
import { Field } from 'formik';
const PersonalInfoSubform = () => (
<div>
<Field name="forename" type="input" />
<Field name="surname" type="input" />
</div>
);
export default PersonalInfoSubform;
你再加一个 withFormik 装饰您的故事并可以传递任何 Formik 道具作为个别故事的参数.
export const personalInfoSubform = () => (
<>
<p>
The decorator can wrap Components that include Fields (or anything else
expecting Formik context). This allows us to better componentise our
larger forms.
</p>
<PersonalInfoSubForm />
</>
);
personalInfoSubform.decorators = [withFormik];
// can use the DecoratorParams type and pass a type for type-safety of initialValues
const personalInfoParams: DecoratorParams<PersonalInfo> = {
formik: {
initialValues: personalInfoInitialValues,
validationSchema: personalInfoValidationSchema,
},
};
personalInfoSubform.parameters = personalInfoParams;
这使得您能够渲染Formik Fields , 期望Formik上下文, 但也能够跟踪关键formik状态 在下面的故事书面板.
见 实例故事 其他例子
遗留故事格式
示例 storiesOf 语法.
import { storiesOf } from '@storybook/react';
import withFormik from '@bbbtech/storybook-formik';
import PersonalInfoSubform from '<your_component_path>/PersonalInfoSubform';
storiesOf('Example', module)
.addDecorator(withFormik)
.add('default', () => <PersonalInfoSubform />, {
formik: {
initialValues: {
forename: 'John',
surname: 'Johnerson',
},
},
});
参数
你可以通过任何 Formik 组件道具(初始Values,验证Schema,验证OnBlur等)作为故事的参数.
这些道具必须在 formik 参数键.
如果没有提供初始值, { enableReinitialize: true, initialValues: StoryContext.args || {} } 将被使用.
export const myTextInput = () => (
<MyTextInput
name="formikTweet"
label="Describe formik in 80 characters"
placeholder="I love formik because..."
/>
);
myTextInput.parameters = {
formik: {
initialValues: {
formikTweet: '',
},
validationSchema: someSchema,
onSubmit: v => console.log('I want to log these... ', v),
},
};
formik.castValues 与 formik.validationSchema
如果有的话 validationSchema 载于 formik 配置和 { castValues: true },则 validationSchema.cast(initialValues || StoryContext.args || {}) 将调用,结果作为 initialValues。 。 。 .
如果窗体字段需要给其值以一定格式,或者当自动转换时,此功能是有用的 StoryContext.args 变成有效的一组 initialValues。 。 。 .
使用控件
如果使用 @storybook/addon-essentials 财务报告和审定财务报表 StoryContext.args, (中文(简体) ), withFormik 将窗体值与故事本控件同步.
export const myTextInput = () => (
<MyTextInput
name="formikTweet"
label="Describe formik in 80 characters"
placeholder="I love formik because..."
/>
);
myTextInput.args = {
formikTweet: '',
};
myTextInput.parameters = {
formik: {
validationSchema: someSchema,
onSubmit: v => console.log('I want to log these... ', v),
},
};
性质示例
随着时间的推移,我将增加更成熟的例子,以显示子形式模式在更大范围内的有用性。 有谁 如有好的例子,请提交.
捐款
发展
您可以通过本地构建软件包来测试更改 。 流动会是这样的:
- 更改为加词
npm run build:watch- 以监视模式在本地建立 dist 捆绑npm run storybook- 以示例形式运行软件包故事本,在此预览更改npm run test- 运行单元测试
发布新版本
部署非常简单,你只需要: npm version,并指定新版本,这将
踢出套件中定义的相关生命周期脚本. json(包括 npm publish 输入 postversion 脚本)