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<HTMLInputElement> {
  id: string
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
  checked?: boolean
  name?: string
}
const Checkbox: FC<Props> = ({
  name, id, onChange, checked, children, ...props
}) => (
                <input
                  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.

[CraigCowling79]

One thing we found recently when we had some stories documenting props and some not was that those those that were working were using components that were exported when they were declared and those that didn't did not include this.

e.g
export const Widget: React.FC<WidgetProps> = ({
vs
const Widget: React.FC<WidgetProps> = ({x

After adding export to the beginning of all of our components, all stories began documenting as expected.

[Lueton]

One thing we found recently when we had some stories documenting props and some not was that those those that were working were using components that were exported when they were declared and those that didn't did not include this.

e.g
export const Widget: React.FC<WidgetProps> = ({
vs
const Widget: React.FC<WidgetProps> = ({x

After adding export to the beginning of all of our components, all stories began documenting as expected.

That was exactly my problem! That should be fixed, right?

[coreybruyere]

I have components that are exported later as a default that do work and others written the same way that don't