[enhancement] Use React Docgen to implement autodoc feature

最近我在做一个 Solid JS 的组件库，我使用了 Storybook 作为我的组件库的调试工具，但是发现 Controls 面板并没有显示出来。后面看到这个仓库在上个版本删除了 docgen 相关的数据，我就去查看 storybook react 版本的那个插件库，自己实现了 docgen。

Recently, I have been working on a Solid JS component library, and I have been using Storybook as a debugging tool for my component library. However, I noticed that the Controls panel was not displaying. Later, I found out that the repository had removed docgen-related data in the previous version. I checked the Storybook React version of that plugin library and implemented docgen myself.

其核心原理是使用 react-docgen 或者 react-docgen-typescript 生成组件的相关信息并交给 storybook 进行处理。因为 Solidjs 函数式组件的设计方式和 React 非常像，所以其大部分的功能都能够迁移使用。

The core principle is to use either react-docgen or react-docgen-typescript to generate relevant information about the components and hand it over to Storybook for processing. Since the design approach of SolidJS functional components is very similar to React, most of its functionality can be migrated and used.

实现方式

mian.ts： I add a Vite plugin like react component do

import solidjsDocgen from '@joshwooding/vite-plugin-react-docgen-typescript' // from react-vite
const config: StorybookConfig = {
// ....
async viteFinal(config, { presets }) {
    // Add docgen plugin
    const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply<any>('typescript', {})
    config.plugins?.push({
        enforce: 'pre',
        ...solidjsDocgen({
            ...reactDocgenTypescriptOptions,
            savePropValueAsString: true
        })
    })
    return config
}
}

preview.ts: copy whole docs folder from react plugin; and I imported extractArgTypes function only. (dependencies need to be installed.)

import { extractArgTypes } from 'storybook-solidjs-docgen/src/docs/extractArgTypes' // in my monorepo workspace

const preview: Preview = {
    parameters: {
       // ...
        controls: {
            expanded: true
        },
        docs: {
            extractArgTypes() {
                const res = extractArgTypes(...arguments)
                console.log(res)
                return res
            }
        }
    }
}

storybookjs / solidjs

[enhancement] Use React Docgen to implement autodoc feature #7