Storybook: Docs Generation - No inputs found for this component | Typescript | React

[jamesdalel]

Describe the bug
I'm trying to get the storybook to auto implement the docs using the @storybook/addon-docs. The project consists of react and typescript. So far I have updated the npx sb upgrade and added @storybook/addon-docs to the addons in main.js. From the documentation I just expected this to work however I'm seeing No inputs found for this component. Read the docs when I access the docs page within my storybook application.

I have tried a few things including trying to set docgen: 'react-docgen-typescript'

To Reproduce
I have an existing storybook app, which has various components.

1. Go to Docs section of a component

Expected behavior
The Docs page should show the correct props

Screenshots

Code snippets
Current Addons

addons: [
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-viewport/register',
    '@storybook/addon-docs',
 ],
````

Current Packages

...
"@storybook/addon-actions": "6.1.7",
"@storybook/addon-info": "5.3.21",
"@storybook/addon-knobs": "6.1.7",
"@storybook/addon-viewport": "6.1.7",
"@storybook/react": "6.1.7",

"@storybook/addon-docs": "6.1.7",
"react": "16.12.0",
...
````
Example Story

import React, { useState } from 'react';
import { text, boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import Checkbox from '.';

export const normal = () => (
  <Checkbox
    id="someId"
    onChange={action('Checkbox changed')}
    checked={boolean('checked', false)}
  >
    {text('children', 'Check Me Out')}
  </Checkbox>
);

export default {
  component: Checkbox,
  title: 'Checkbox',
  decorators: [withKnobs],
};
````

interface Props extends InputHTMLAttributes {
id: string
onChange?: (event: ChangeEvent) => void
checked?: boolean
name?: string
}
const Checkbox: FC = ({
name, id, onChange, checked, children, ...props
}) => (
type="checkbox"
id={id}
name={name}
checked={checked}
onChange={(event) => {
handleOnChange(event)
}}
/>
)

export default Checkbox
````

System
```
Environment Info:

System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Browsers:
Chrome: 87.0.4280.67
Safari: 14.0.1
npmPackages:
@storybook/addon-actions: 6.1.7 => 6.1.7
@storybook/addon-docs: ^6.1.7 => 6.1.7
@storybook/addon-info: 5.3.21 => 5.3.21
@storybook/addon-knobs: 6.1.7 => 6.1.7
@storybook/addon-viewport: 6.1.7 => 6.1.7
@storybook/react: 6.1.7 => 6.1.7
````

Additional context

The app also uses CSS Modules, not sure if that affects how everything is put together

[shilman]

Can you remove addon-info from package.json and reinstall? If that doesn't work, do you have a repro repo you can share?

[pauliusef]

@shilman I'm experiencing similar issue where Storybook doesn't generate Docs for a component story. I have a simple example repo based on the latest Storybook packages (installed with npx sb init. The Docs aren't properly generated for components that are export as default export from a file that is named using kebab-case.

I did run DEBUG=docgen:* yarn storybook to get some debug output from react-docgen-typescript and noticed the difference in setting displayName. For default exports it's set all lowercase, which probably doesn't match with what Storybook is looking for when generating Docs page for that components story.

 docgen:docs try {
  docgen:docs     // @ts-ignore
  docgen:docs     ButtonNamed.displayName = "ButtonNamed";
  docgen:docs     // @ts-ignore
  docgen:docs     ButtonNamed.__docgenInfo = { "description": "Primary UI component for user interaction", "displayName": "ButtonNamed", "props": { "primary": { "defaultValue": { value: false }, "description": "Is this the principal call to action on the page?", "name": "primary", "required": false, "type": { "name": "boolean" } }, "backgroundColor": { "defaultValue": null, "description": "What background color to use", "name": "backgroundColor", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { value: "medium" }, "description": "How large should the button be?", "name": "size", "required": false, "type": { "name": "\"small\" | \"medium\" | \"large\"" } }, "label": { "defaultValue": null, "description": "Button contents", "name": "label", "required": true, "type": { "name": "string" } }, "onClick": { "defaultValue": null, "description": "Optional click handler", "name": "onClick", "required": false, "type": { "name": "(() => void)" } } } };
  docgen:docs     // @ts-ignore
  docgen:docs     if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
  docgen:docs         // @ts-ignore
  docgen:docs         STORYBOOK_REACT_CLASSES["src/components/button-named.tsx#ButtonNamed"] = { docgenInfo: ButtonNamed.__docgenInfo, name: "ButtonNamed", path: "src/components/button-named.tsx#ButtonNamed" };
  docgen:docs }
  docgen:docs catch (__react_docgen_typescript_loader_error) { } +0ms
  docgen:docs try {
  docgen:docs     // @ts-ignore
  docgen:docs     buttondefault.displayName = "buttondefault";
  docgen:docs     // @ts-ignore
  docgen:docs     buttondefault.__docgenInfo = { "description": "Primary UI component for user interaction", "displayName": "buttondefault", "props": { "primary": { "defaultValue": { value: false }, "description": "Is this the principal call to action on the page?", "name": "primary", "required": false, "type": { "name": "boolean" } }, "backgroundColor": { "defaultValue": null, "description": "What background color to use", "name": "backgroundColor", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { value: "medium" }, "description": "How large should the button be?", "name": "size", "required": false, "type": { "name": "\"small\" | \"medium\" | \"large\"" } }, "label": { "defaultValue": null, "description": "Button contents", "name": "label", "required": true, "type": { "name": "string" } }, "onClick": { "defaultValue": null, "description": "Optional click handler", "name": "onClick", "required": false, "type": { "name": "(() => void)" } } } };
  docgen:docs     // @ts-ignore
  docgen:docs     if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
  docgen:docs         // @ts-ignore
  docgen:docs         STORYBOOK_REACT_CLASSES["src/components/button-default.tsx#buttondefault"] = { docgenInfo: buttondefault.__docgenInfo, name: "buttondefault", path: "src/components/button-default.tsx#buttondefault" };
  docgen:docs }
  docgen:docs catch (__react_docgen_typescript_loader_error) { } +5ms

Example repo: https://github.com/pauliusef/sb-ts-doc-test

[pauliusef]

I think this could probably be raised as an issue with react-docgen-typescript package. Let me know what you think and I'll share this issue on their repo as well.