# @bbbtech/storybook-formik 中文文档
规范地址：https://npmcn.com/package/%40bbbtech/storybook-formik/
版本：4\.0\.0
npm 元数据更新时间：2025-01-25T12:36:59.908Z
中文译文更新时间：2026-11-07T18:45:43.224Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bbbtech/storybook-formik
原文对照：https://npmcn.com/package/%40bbbtech/storybook-formik/?lang=original
项目主页：https://bbbtech.github.io/storybook-formik/
源码仓库：https://github.com/bbbtech/storybook-formik
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：47.1 kB，23 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：formik ^1\.0\.0\|\|^2\.0\.0，react \*，react-dom \*
- 首次发布：2022-06-20T12:47:23.637Z
- 最新版本发布：2025-01-25T12:36:59.710Z
- 近 30 天下载量：42450（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）
## 中文简介
故事书的附加内容允许您在故事中使用依赖Formik上下文的组件,并在面板中看到内部的Formik状态.
## 安装
```sh
npm install @bbbtech/storybook-formik
```
也可以使用：`pnpm add @bbbtech/storybook-formik`、`yarn add @bbbtech/storybook-formik`、`bun add @bbbtech/storybook-formik`
## README
# 故事书格式
A 类 [故事书](https://storybook.js.org/) 添加和装饰器将Formik Fields包裹起来,并在一个面板中跟踪其状态.
您可以在行动中看到实例故事 [这里](https://bbbtech.github.io/storybook-formik/)。 。 。 .
感谢 [@ 贾雷德帕尔默](https://jaredpalmer.com/) 赐予了我们惊人的 [表单ik](https://github.com/jaredpalmer/formik) 图书馆和造型又很棒.
## 向BBB技术的迁移
注意, 此软件包已迁移到 org : [BBB 技术](https://github.com/bbbtech)。这唯一真正的区别 表示包需要安装一个新的命令,由org的 sult(即. `npm i --save-dev @bbbtech/storybook-formik`(中文(简体) ) 并更新您主.js中注册软件包时的路径.
这也意味着所有未来的版本都会在新软件包下发布,所以请迁移您的依赖性,如果你 想要获得未来的版本.
## 安装
```sh
npm install --save-dev @bbbtech/storybook-formik
```
然后注册加词 `.storybook/main.js`
```ts
module.exports = {
stories: ['../stories/**/*.stories.tsx'],
addons: ['@bbbtech/storybook-formik/register'],
};
```
## 使用量
假设您将表格分成较小的、可重复使用的组件, 而这些“ 子格式” 依赖于 formik 上下文, 每一个 子窗体可能用来建立更大的窗体,但您仍然想要测试并独立运行. 你可以用Formik的电脑 装饰器,这样我们就可以将子窗体包入一个Formik组件,它会将上下文传递为正常.
鉴于一个简单的子形式 :
```tsx
import React from 'react';
import { Field } from 'formik';
const PersonalInfoSubform = () => (
);
export default PersonalInfoSubform;
```
你再加一个 `withFormik` 装饰您的故事并可以传递任何 `Formik` 道具作为个别故事的参数.
```tsx
export const personalInfoSubform = () => (
<>
The decorator can wrap Components that include Fields (or anything else
expecting Formik context). This allows us to better componentise our
larger forms.
);
personalInfoSubform.decorators = [withFormik];
// can use the DecoratorParams type and pass a type for type-safety of initialValues
const personalInfoParams: DecoratorParams = {
formik: {
initialValues: personalInfoInitialValues,
validationSchema: personalInfoValidationSchema,
},
};
personalInfoSubform.parameters = personalInfoParams;
```
这使得您能够渲染Formik Fields , 期望Formik上下文, 但也能够跟踪关键formik状态 在下面的故事书面板.
见 [实例故事](https://github.com/bbbtech/storybook-formik/blob/main/stories/) 其他例子
### 遗留故事格式
示例 `storiesOf` 语法.
```tsx
import { storiesOf } from '@storybook/react';
import withFormik from '@bbbtech/storybook-formik';
import PersonalInfoSubform from '/PersonalInfoSubform';
storiesOf('Example', module)
.addDecorator(withFormik)
.add('default', () => , {
formik: {
initialValues: {
forename: 'John',
surname: 'Johnerson',
},
},
});
```
## 参数
你可以通过任何 `Formik` 组件道具(初始Values,验证Schema,验证OnBlur等)作为故事的参数. 这些道具必须在 `formik` 参数键.
如果没有提供初始值, `{ enableReinitialize: true, initialValues: StoryContext.args || {} }` 将被使用.
```tsx
export const myTextInput = () => (
);
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` 将窗体值与故事本控件同步.
```tsx
export const myTextInput = () => (
);
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` 脚本)
## 常见问题
### @bbbtech/storybook-formik 是什么？
故事书的附加内容允许您在故事中使用依赖Formik上下文的组件,并在面板中看到内部的Formik状态\.
### 如何安装 @bbbtech/storybook-formik？
在项目目录运行 npm install @bbbtech/storybook-formik，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：formik（^1\.0\.0\|\|^2\.0\.0）、react（\*）、react-dom（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @bbbtech/storybook-formik 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @bbbtech/storybook-formik 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @bbbtech/storybook-formik 可以商用吗？
@bbbtech/storybook-formik 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @bbbtech/storybook-formik 的下载量有多少？
根据 npm 官方下载统计，@bbbtech/storybook-formik 在 2026/10/08 – 2026/11/06 这 30 天内被下载 42,450 次，日均约 1,415 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @bbbtech/storybook-formik 还在维护吗？
最新版本 4\.0\.0 发布于 2025/01/25（1\.8 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/06/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。