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

[william-will-angi]

Thank you @CraigCowling79! Took me forever to figure that out.

Would be cool if we could write components as

const Component: React.FC<Prop> = ({
...
export default Component

and still have the controls inferred

Edit: Looks like the props are inferred even when using the default export, but the named export still has to be there.

[penx]

I'm finding that docs will generate for this:

Works:

import React from 'react';

export const Button = (props: ButtonOwnProps) => <div />;
export interface ButtonOwnProps {
  /**
   * Some prop
   */
  someProp?: boolean;
}

export default Button;

But docs gen will fail if I add a type declaration (: React.FC<ButtonOwnProps>):

Doesn't work:

import React from 'react';

export const Button: React.FC<ButtonOwnProps> = (props: ButtonOwnProps) => <div />;
export interface ButtonOwnProps {
  /**
   * Some prop
   */
  someProp?: boolean;
}

export default Button;

This can be resolved by replacing import React from 'react'; with import * as React from 'react';

Works:

import * as React from 'react';

export const Button: React.FC<ButtonOwnProps> = (props: ButtonOwnProps) => <div />;
export interface ButtonOwnProps {
  /**
   * Some prop
   */
  someProp?: boolean;
}

export default Button;

Also worth noting this is hard to recreate as the docs gen seems to cache information, so you have to restart storybook to be sure of what the breaking changes are!

[shilman]

Thanks @penx -- very interesting. We rely on a dependency called react-docgen-typescript to produce good types, which in turn relies on the TypeScript compiler. We're in the process of rearchitecting the Storybook side of the equation to make ArgType extraction faster and simpler. After the refactor I'd like to invest time in improving or replacing react-docgen-typescript to better handle all the edge cases.

[penx]

It seems that react-docgen-typescript is not respecting allowSyntheticDefaultImports: true (or esModuleInterop) if you have it in your project's tsconfig.json:

When set to true, allowSyntheticDefaultImports allows you to write an import like:

import React from "react";

instead of:

import * as React from "react";

https://www.typescriptlang.org/tsconfig#Interop_Constraints_6252

Related:

• Usage with esModuleInterop option styleguidist/react-docgen-typescript#100
• Components with defined types not picked up styleguidist/react-docgen-typescript#71

[rwieruch]

Using the latest version: 6.4.19

Can it be that subcomponents are not inferred at all?

storiesOf('First Steps/Table', module)
  .addParameters({
    component: Table,
    subcomponents: {
      Row,
      Cell,
    },
  })

If I put Row or Cell as component, I see their inferred props. But not when I put them as subcomponents.

Also I noticed that children do not get inferred.

[ciampo]

We may have incurred in the same issue in WordPress/gutenberg#39468 (comment)

[tgshell]

same issue too

[smellai]

We have this issue in components with generics. The args table is restored if we force the typecast in this way (last row):

import React, { ComponentPropsWithRef, ElementType, forwardRef } from 'react';

type OverridableLinkBaseProps<C extends ElementType = 'a'> = ComponentPropsWithRef<'a'> & {
  component?: C;
};

export type OverridableLinkProps<C extends ElementType = 'a'> = OverridableLinkBaseProps<C> &
  Omit<ComponentPropsWithRef<C>, keyof OverridableLinkBaseProps<C>>;

function OverridableLinkBase<C extends React.ElementType>(
  props: OverridableLinkProps<C>,
  ref: ComponentPropsWithRef<C>['ref']
) {
  const { component: Component = 'a', ...rest } = props;

  return <Component ref={ref} {...rest} />;
}

// We use typecasting to force args table to show up in Storybook
export const OverridableLink = forwardRef(OverridableLinkBase) as typeof OverridableLinkBase;

[allypalanzi]

Same issue here; workarounds aren't working either.

[ereminnf]

My problem was that I was using export default or displayName in the forwardRef component.

version react: 17.0.2
version @storybook/react: 6.5.9

Doesn't work:

export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
    // ...
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
    // ...
     
    return (
        <button className={classNames.root} {...rest} {...attrs} ref={ref}>
            {children}
        </button>
    )
})

export default Button

Doesn't work:

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
    // ...
})

Button.displayName = 'RuiButton'

Works:

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
    // ...
    
    return (
        <button className={classNames.root} {...rest} {...attrs} ref={ref}>
            {children}
        </button>
    )
})

Button.displayName = 'Button' // or remove

[katerberg]

Same issue here.

[Maysjtu]

Same issue here.

[mhgamble1]

Same issue here.

[lucasmaffazioli]

In my case, if is default export it doesn't work. I have a polymorphic component.

[ChangHyun2]

storybook : 6.5.16
addon-docs : 6.5.16

NOT work

const Checkbox: React.FC<CheckboxProps> = ({ children }) => {
  return (
    <>
      <input type="checkbox" className={s.checkbox}>
        {children}
      </input>
    </>
  );
};

export default Checkbox;

[ivanzamarro]

This issue has been open for 2 years, and this bug has persisted until version 7. It's not normal for Storybook to force an export pattern for my components. This issue should escalate in priority or at least for the maintainers to give us a solution.

[sag1v]

@ivanzamarro I agree. In our case, no matter what type of export we have, we can't make it work (after a migration from v6 to v7).

worked fine on v6, doesn't work on v7.

[ivanzamarro]

@sag1v In our case, we have decided to stick with version 6 for the same problem, even having to do some hacks in the rendering of component props, but that's another separate issue.

If there's anything we can help you with, feel free to reach out.

[sag1v]

@sag1v In our case, we have decided to stick with version 6 for the same problem, even having to do some hacks in the rendering of component props, but that's another separate issue.

If there's anything we can help you with, feel free to reach out.

Thanks a lot @ivanzamarro
In our case we need to move to v7 because our Design system is being upgraded to react18.
AFAIK, Storybook v6 won't render with the new API of react-dom v18.

[sag1v]

@ivanzamarro See my comment here. I think i found the issue or at least a part of it and a possible way to workaround it.

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[katerberg]

What other information is needed for this one?