Storybook 控件在将组件包装在高阶组件中时消失

huangapple go评论73阅读模式
英文:

Storybook controls disapers when wrapping component in HOC

问题

我在storybook中有一个组件,其中有一些控件,并在UI中如下所示
Storybook 控件在将组件包装在高阶组件中时消失

但是当我将组件包装在HOC export default withAlign(Avatar) 中时,它会中断,并且不显示任何控件,并且控件部分被替换为以下文本:找不到此组件的输入。阅读文档

这是我的故事的代码
index.stories.tsx

import { Meta } from '@storybook/react'
import Avatar from '../Avatar'
export { AvatarColor } from './AvatarColor.stories'
export { Default } from './AvatarDefault.stories'

export default {
  title: 'Components/Avatar',
  component: Avatar,
  parameters: {
    docs: {
      description: {
        component: `头像是用户、团队或实体的图形表示。
        头像可以显示图像、图标或首字母,并支持各种大小和形状。`,
      },
    },
  },
  decorators: [
    (Story) => (
      <div
        style={{
          display: 'flex',
          gap: '5px',
          flexWrap: 'wrap',
        }}
      >
        <Story />
      </div>
    ),
  ],
} as Meta

AvatarDefault.stories.tsx

import Avatar from '../Avatar'
import { AvatarProps } from '../Avatar.types'

export const Default = (props: Partial<AvatarProps>) => (
  <Avatar {...props}>Yooo</Avatar>
)

然后我有我的类型

import { HTMLAttributes } from 'react'

export type AvatarProps = Omit<HTMLAttributes<HTMLElement>, 'color'> & {
  /**
   * 大小。
   *
   * @default 50
   */
  size?: number
  /**
   * 属性。
   * @default 80
   */
  someotherprop?: number
  /**
   * 颜色。
   *
   * @default "red"
   */
  color?: string
}

你有想法吗,我如何在将组件包装在HOC时显示控件?

英文:

I have a Component in my storybook that have some controls and looks like this in the UI
Storybook 控件在将组件包装在高阶组件中时消失

But when i wrap my component in a HOC export default withAlign(Avatar) it breaks and does not display any controls, and the controls section is replaces with the following text: No inputs found for this component. Read the docs

Here is my code for the stories
index.stories.tsx

import { Meta } from '@storybook/react'
import Avatar from '../Avatar'
export { AvatarColor } from './AvatarColor.stories'
export { Default } from './AvatarDefault.stories'

export default {
  title: 'Components/Avatar',
  component: Avatar,
  parameters: {
    docs: {
      description: {
        component: `An Avatar is a graphical representation of a user, team, or entity.
        Avatar can display an image, icon, or initials, and supports various sizes and shapes.`,
      },
    },
  },
  decorators: [
    (Story) => (
      <div
        style={{
          display: 'flex',
          gap: '5px',
          flexWrap: 'wrap',
        }}
      >
        <Story />
      </div>
    ),
  ],
} as Meta

AvatarDefault.stories.tsx

import Avatar from '../Avatar'
import { AvatarProps } from '../Avatar.types'

export const Default = (props: Partial<AvatarProps>) => (
  <Avatar {...props}>Yooo</Avatar>
)

And then I have my type

import { HTMLAttributes } from 'react'

export type AvatarProps = Omit<HTMLAttributes<HTMLElement>, 'color'> & {
  /**
   * The Size.
   *
   * @default 50
   */
  size?: number
  /**
   * The prop.
   * @default 80
   */
  someotherprop?: number
  /**
   * The color.
   *
   * @default "red"
   */
  color?: string
}

Any idea how I can display the controls when wrapping my component in a HOC?

答案1

得分: 0

reactDocgen来自@storybook/addon-docs的一部分,属于@storybook/addon-essentials,在默认导出高阶组件(HoCs)时无法工作。

简单地将export default withAlign(Avatar)更改为:

const Avatar = withAlign(AvatarComponent)
export { Avatar }

解决了这个问题,组件属性和高阶组件属性都会显示在文档页面中。

英文:

reactDocgen from @storybook/addon-docs part of @storybook/addon-essentials Does not work with HoCs when you default export them.

Simply changing export default withAlign(Avatar)

To

const Avatar = withAlign(AvatarComponent)
export { Avatar }

Solved the issue and The component props and HoC props are displayed in the docs page

huangapple
  • 本文由 发表于 2023年3月31日 20:26:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/75898505.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定