react+ts+编写代码时候自动生成文档生成工具集成

create-react-app 正常生成1个支持ts项目
yarn create react-app ts-antd-components --typescript
然后正常的1个组件比如:

import React, {ButtonHTMLAttributes, FC, ReactNode} from 'react';
import classnames from 'classnames';

enum ButtonSize {
    Large = 'lg',
    Small = 'sm'
}

enum ButtonType {
    Primary = 'primary',
    Default = 'default',
    Danger = 'danger',
    Link = 'link'
}

interface BaseButtonProps {
    /** classname */
    className?: string,
    /** 是否可点击*/
    disabled?: boolean,
    /**  设置btn大小*/
    size?: string,
    // size?: ButtonSize,
    /**  设置btn类型*/
    btnType?: 'primary' | 'default' | 'danger' | 'link',
    // btnType?: string,
    children?: ReactNode
    /**  链接*/
    herf?: string
}

type NativeButtonProps = BaseButtonProps & ButtonHTMLAttributes;
export type ButtonProps = Partial;
/**
 *  这是我们的第一个Button组件
 *  ## button 这是我们的第一个Button组件
 *  ~~~ js
 *  import { Button} from 'pj-antd'
 *  ~~~
 */
export const Button: FC = (props) => {
    const {
        btnType, disabled, size, children, herf,
        className
        , ...restProps
    } = props
    // 默认有btn样式
    // btn-primary btn-default
    const classes = classnames('btn', className, {
        [`btn-${btnType}`]: btnType,
        [`btn-${size}`]: size,
        'disabled': btnType === ButtonType.Link && disabled
    })
    if (btnType === ButtonType.Link && herf) { // 有href
        console.log(btnType)
        return (
            
                {
                    children
                }
            
        )
    } else {
        return (
            
                {
                    children
                }
            
        )
    }
}

Button.defaultProps = {
    disabled: false,
    btnType: ButtonType.Default
}
export default Button;

很简单的1个按钮组件+ts

但是我们需要集成文档给人家查看咋办呢?类似于如下效果自动生成

npx -p @storybook/cli sb init --type react_scripts

然后居于他会在根目录生成2个命令

image.png

但是又要这个支持ts咋办呢?

image.png

ok? 但是如何可以生成文档呢？

image.png

ok？ 现在我们就要开始描述文档了

const storyWrapper = (stroyFn: any) => (
    

        
组件演示
        {stroyFn()}
    
)
const defaultButton = () => (
    默认
)
const SizeButton = () => (
    <>
         大尺寸lg
         sm按钮
    
)
const TypeButton = () => (
    <>
         primary
         link按钮
         danger按钮
         default
    
)
storiesOf('btton Commponent', module)
    .addDecorator(storyWrapper)
    .addDecorator(withInfo)
    .addParameters({
        info: {
            // text: `
            //    文档
            //     ~~~js
            //     Click Here
            //     ~~~
            //   `,
            inline: true,
            header:false
        }
    })
    .add('Button', defaultButton)
    .add('不同尺寸的按钮', SizeButton)
    .add('不同类型的按钮', TypeButton)

即可得到图1的效果，然后在团队定义组件的时候，文档可追溯啊 ，希望小伙伴们可以一起学习下