[Bug]: DefaultProps not being picked up with auto-docs in certain cases

[tourshi]

Describe the bug

Hi, with React 19 being stable now and defaultProps is deprecated. We've migrated our components to use ES6 defaults instead. However the storybook docs (react-docgen-typescript?) is not picking up the default props in certain cases.
For example. If I destructure the props in the component args it works, but if I destructure the props in the function body, it doesn't work.
const Component = ({ color = 'red', size = '10px', ...otherProps}) => ... this works, but const Component = (props) => { const { color = 'red', size = '10px', ...otherProps } = props; } doesn't work.

I know the manual alternative is to specify these defaults manually but are there any plans to have the docs plugin pick up on these defaults?

I'm asking because its not ideal to have two sources of truth for defaults, one in the component and one for the arg types. Also in my specific case we have a component library so there are hundreds of components to add argTypes for.

Thank you

Reproduction link

https://stackblitz.com/edit/github-nu39kd6h?file=src%2Fstories%2FButton.tsx

Reproduction steps

1. Open the link you'll see an example of it not working, if you place the destrcutured props in the component args, then it works (auto docs shows the defaults as expected)

System

System:
    OS: macOS 15.3
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm <----- active
  Browsers:
    Chrome: 125.0.6422.78
    Edge: 132.0.2957.127
    Safari: 18.3
  npmPackages:
    @storybook/addon-a11y: 8.5.2 => 8.5.2 
    @storybook/addon-actions: 8.5.2 => 8.5.2 
    @storybook/addon-docs: 8.5.2 => 8.5.2 
    @storybook/addon-essentials: 8.5.2 => 8.5.2 
    @storybook/addon-interactions: 8.5.2 => 8.5.2 
    @storybook/addon-knobs: 8.0.1 => 8.0.1 
    @storybook/addon-links: 8.5.2 => 8.5.2 
    @storybook/addon-onboarding: 8.5.2 => 8.5.2 
    @storybook/addon-storysource: 8.5.2 => 8.5.2 
    @storybook/addon-toolbars: 8.5.2 => 8.5.2 
    @storybook/addon-viewport: 8.5.2 => 8.5.2 
    @storybook/addon-webpack5-compiler-babel: 3.0.5 => 3.0.5 
    @storybook/blocks: 8.5.2 => 8.5.2 
    @storybook/react: 8.5.2 => 8.5.2 
    @storybook/react-webpack5: 8.5.2 => 8.5.2 
    @storybook/test: 8.5.2 => 8.5.2 
    @storybook/theming: 8.5.2 => 8.5.2 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    storybook: 8.5.2 => 8.5.2

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is a known limitation with react-docgen-typescript's prop detection. The issue occurs because default values assigned within function bodies are not statically analyzable in the same way as parameter defaults.

To fix this, you would need to either:

1. Use parameter destructuring with defaults:

const Component = ({ color = 'red', size = '10px', ...otherProps }) => {}

2. Or define the props interface with default values:

interface Props {
  color?: string;
  size?: string;
}

const defaultProps = {
  color: 'red',
  size: '10px'
} as const;

const Component = (props: Props = defaultProps) => {}

The underlying issue is in react-docgen-typescript's prop detection logic which primarily looks at TypeScript types and parameter-level defaults rather than runtime assignments.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[valentinpalkovic]

Hi @tourshi

Have you tried react-docgen instead of react-docgen-typescript. Does it do a better job of extracting default props?

[valentinpalkovic]

Hi @tourshi

I looked deeper at your issue and your provided example is not supposed to work. Default property values are only recognized when assigned in the arguments section of a function. Tools like react-docgen or react-docgen-typescript are not parsing function bodies to determine a component's default value. You can imagine that this is an almost impossible task, since you can pass any logic somehow to set a component's args' default values.

This is just a natural limitation which will very likely not be supported by react-docgen or react-docgen-typescript