Docgen info not generated for typescript components

[vnys]

Describe the bug

A clear and concise description of what the bug is.

Steps to reproduce the bug

1. Rewrite a component in typescript
2. Run build:for-storybook

Expected behavior

The bundle should have a docgen object for each component

[vnys]

Made a simple component in src/Component/index.tsx that looks like this:

import * as React from 'react'
import { FunctionComponent } from 'react'

type Props = {
  color?: string
} & React.HTMLAttributes<HTMLDivElement>

export const Component: FunctionComponent = ({
  children,
  color = 'orange',

this results in the following docgen info:

Component.__docgenInfo = {
  description: '',
  methods: [],
  displayName: 'Component',
  props: {
    color: {
      defaultValue: {
        value: "'orange'",
        computed: false,
      },
      required: false,
    },
  },
}

[mimarz]

Suggest testing with a component using forwardRef @vnys

[wenche]

The description field is undefined in Snackbar even if there is a comment in the code.

[vnys]

I get a description if I place the comment right before the function. If it’s at the top or above the type definition it’s not added.

import * as React from 'react'
import { FunctionComponent } from 'react'

type Props = {
  color?: string
} & React.HTMLAttributes<HTMLDivElement>

/**
 * This is the Component description
 */

export const Component: FunctionComponent = ({
  children,
  color = 'orange',
}: Props) => <div style={{ color: color }}>{children}</div>

results in

Component.__docgenInfo = {
  "description": "This is the Component description",
  "methods": [],
  "displayName": "Component",
  "props": {
    "color": {
      "defaultValue": {
        "value": "'orange'",
        "computed": false
      },
      "required": false
    }
  }
};

[vnys]

forwardRef works…

export const Component = forwardRef<HTMLDivElement, Props>(
  function EdsComponent({ children, color = 'orange' }, ref) {
    return (
      <div style={{ color: color }} ref={ref}>
        {children}
      </div>
    )
  },
)

[vnys]

Compound components work…

import { OtherComponent } from './OtherComponent'
import { Component as BaseComponent } from './Component'

type ComponentTypes = typeof BaseComponent & {
  OtherComponent: typeof OtherComponent
}

const Component = BaseComponent as ComponentTypes
Component.OtherComponent = OtherComponent

export { Component }

[vnys]

The Snackbar component works, but SnackbarAction does not. But Snackbar only has one prop, and that’s children. If I add another prop, such as foo?: string – then that type is only picked up if the component destructs the prop in the function signature with a default value: foo = ''. It looks like the same goes for required props 🤔

[vnys]

Took a look at <Accordion/>. This component imports types from an external file. This seem to work fine. But what does not work are spreads rest parameters 🙄. So if I remove ...props the types are picked up. A bit stuck on this one. I suggest we move to typescript for the storybook as well and see if that fixes these issues.

[vnys]

There are two processors that can be used to extract types from components, react-docgen-typescript and react-docgen. The first one is made by Styleguidist, who interestingly enough use react-docgen. Storybook uses react-docgen-typescript in the version we have, because react-docgen did not display props from imported types at the time. Michael Shilman wrote about that in a gist where he compares the two. This can be seen by adding the following snippet to .storybook/main.js:

  typescript: {
    reactDocgen: 'react-docgen',
  },

…which causes the Accordion component to only show internal types in the Storybook – and also removes the description from the types for some reason.

[vnys]

What I’ve done now, in #723, is to disable all the stories for components that have displayNames with hyphens. Also, the displayName must match the name of the component. So Accordion cannot have EdsAccordion as displayName, because then the props won’t show up in the Storybook.

[mimarz]

What I’ve done now, in #723, is to disable all the stories for components that have displayNames with hyphens. Also, the displayName must match the name of the component. So Accordion cannot have EdsAccordion as displayName, because then the props won’t show up in the Storybook.

So does that mean the function name must match displayName? or is prefixing using Eds a no go in general?

[vnys]

That’s correct. In some components we can just leave out displayName, and it will be generated from the component name, in other components eslint complains when I remove the displayName. I expect this to be solved when we streamline all the components once we’re done with the Typescript conversion.