[Bug]: Controls can't display enum props

[morewings]

Describe the bug

Storybook Controls component can't display enum based props.

To Reproduce

Create a React component like this

enum Foo {
  foo = 'foo',
  bar = 'bar'
}
const Component: FC<{propName:keyof typeof Foo}> = () => <div/>

The property control will not be user editable in Controls tab

System

Storybook Environment Info:

  System:
    OS: macOS 12.7.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.1 - /usr/local/bin/pnpm <----- active
  Browsers:
    Chrome: 123.0.6312.107
    Edge: 123.0.2420.81
    Safari: 17.4
  npmPackages:
    @storybook/addon-essentials: 8.0.5 => 8.0.5 
    @storybook/addon-interactions: 8.0.5 => 8.0.5 
    @storybook/addon-links: 8.0.5 => 8.0.5 
    @storybook/addon-storysource: 8.0.5 => 8.0.5 
    @storybook/blocks: 8.0.5 => 8.0.5 
    @storybook/react: 8.0.5 => 8.0.5 
    @storybook/react-vite: 8.0.5 => 8.0.5 
    @storybook/test: 8.0.5 => 8.0.5 
    @storybook/types: 8.0.5 => 8.0.5 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    storybook: 8.0.5 => 8.0.5

Additional context

No response

[valentinpalkovic]

Hi @morewings

Thank you for raising this issue.

If I understand you correctly, this is a bug in react-docgen and not in Storybook per se.

If you need enum support and you don't want to wait until the issue gets resolved, you can opt out to react-docgen-typescript, which was the default in Storybook 7.

// .storybook/main.js|ts
export default {
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
};

I am closing this issue because we can't do much about it. Please let me know if this issue isn't react-docgen related.

[morewings]

@valentinpalkovic thank for the hint. Are docgen guys aware of this?

[valentinpalkovic]

Well, an issue in their repo is created. It is up to them now to tackle the issue.