Search code examples
javascriptreactjsstorybook

Storybook controls disapers when wrapping component in HOC

I have a Component in my storybook that have some controls and looks like this in the UI enter image description here

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?

Solution

  • 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