写Storybook文档，AINeng帮忙吗？

哎哟喂，说到组件文档这个事儿，咱们前端圈谁没被折磨过啊？业务压得你喘不过气来哪有闲工夫写什么文档？结果就是组件库越来越大，文档却荒废得像个鬼城。新人进来问：“这个按钮的size参数是‘large’还是‘lg’？”

哈哈，我当年也是这样被问过无数次。后来我想：这玩意儿干嘛非得人写呢？代码里不dou有类型定义、默认值、注释吗？让AI提取出来不就行了？不对不对不对...应该是让AI提取出来再生成自然语言描述！

试了一把，效果惊喜到我自己。现在组件库geng新了同事直接打开Storybookkan文档就行，没人再来烦我了！那种感觉太爽了——终于Neng安心写代码而不用当活字典。

咱说实话吧，有时候网站Zuo得再漂亮也白搭。知道为啥百度不收录吗？不信你猜猜kan...因为内容太少啦！就是这么简单粗暴。

想要被收录快点？多发质量高的文章呗！特别是技术类文章geng吃香——你kan我们这篇关于Storybook和AI的文章是不是比普通博客强多了？内容够细致够实用对吧？这就是为什么我们的网站排名稳稳地靠前。

其实hen简单嘛！主要三步：抓取组件信息、让AI生成文档、集成到CI流程中去。别急别急，我一步步给你说清楚...

咱要把组件的props信息给提取出来对吧？不用手动输入那么麻烦啦！直接用react-docgen-typescript这个包就Neng从TypeScript类型定义里抠出所有必要信息——prop名字、类型、默认值、必填与否...

import * as docgen from 'react-docgen-typescript';
const options = {
  savePropValueAsString: true,
  shouldExtractLiteralValuesFromEnum: true,
};
const parser = docgen.withCustomConfig;
const docs = parser.parse;

kan见没这段代码后面会生成一个JSON数据结构。里面包含着displayName、props等关键信息哦~有了这个基础数据库才Neng继续下一步操作呀！

接下来就是重头戏啦——调用OpenAI接口将JSON转换为自然语言描述和示例代码～像这样输入提示词：“请根据以下TypeScript接口生成一个完整且可执行..."等等等等～你懂得～然后就会得到这样的输出结果：

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: '通用按钮组件...'
      }
    }
  },
  argTypes: {...}
};
export default meta;
export const Default...
export const Large...
export const Small...
}
}
}
}
}
}

"金句": Zui好的文档不是“人写的”，而是“代码里长出来”的！ "金句": AI自动生成文档让“文档过时”成为历史！

Zui后一步就是将上述两个过程嵌入到持续集成系统中啦～比如在GitHub Actions里添加一个job：