Support React.VoidFunctionComponent (React.VFC) by default

[peteragarclover]

Components that do not accept a children prop, or declare children as another type such as a function can declare their type with React.VoidFunctionComponent, or with the shorthand alias React.VFC.

The current defaultComponentTypes does not include "VoidFunctionComponent".

If you want to use the VFC type for your components the props will not be parsed unless you specify customComponentTypes: ["VoidFunctionComponent"]. This isn't immediately obvious and can be confusing why it doesn't work.

I'm not sure if there is a specific reason why this type is currently not supported by default, but I would like to suggest that "VoidFunctionComponent" be added to defaultComponentTypes.

[gaurav5430]

where do you add this ?

ustomComponentTypes: ["VoidFunctionComponent"]

[peteragarclover]

In your .storybook/main.js add:

module.exports = {
  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      customComponentTypes: ["VoidFunctionComponent"],
      ...

Some details about this config on https://storybook.js.org/docs/react/configure/typescript. It doesn't say a lot, but from digging through the source you can find that reactDocgenTypescriptOptions is passed through to react-docgen-typescript's ParserOptions. You can see it in use here: https://github.com/styleguidist/react-docgen-typescript/blob/1a14c0edc609455a4c2766fa5eec68bc3b902d05/src/parser.ts#L283

You can add other useful options there, like: shouldExtractLiteralValuesFromEnum, shouldRemoveUndefinedFromOptional, propFilter.

[gejimayu]

Good solution @peteragarclover. However, after adding VoidFunctionComponent the auto-generated controls & docs are messed up. Boolean is detected as an Object for some reason.

[peteragarclover]

Sorry @gejimayu I'm not really familiar with the details of how this all works, and nothing jumps out at me as to what could be causing your issue. I only debugged enough to find the customComponentTypes, added that property to my existing configuration, and it worked.

Here is my whole main.js file in case it helps though:

module.exports = {
  core: {
    builder: "webpack5",
  },

  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      // the default react-docgen-typescript component types doesn't include VFC
      // however, we can add our own!
      customComponentTypes: ["VoidFunctionComponent"],
      // This hides the type for arrays of string union types, but,
      // I think the downside is worth the upside for all the places it works,
      // i.e. instead of displaying `XxxType` it shows `"foo" | "bar" | "baz"`
      shouldExtractLiteralValuesFromEnum: true,
      shouldRemoveUndefinedFromOptional: true,
      propFilter: {
        skipPropsWithName: ["className", "style"],
      },
    },
  },

  stories: [
    "../assets/src/**/*.stories.mdx",
    "../assets/src/**/*.stories.@(|ts|tsx)",
  ],

  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],

  webpackFinal: async (config, { configType }) => {
    
    // custom webpack config goes here, e.g. sass options, custom resolve paths

    // Return the altered config
    return config;
  },
};

[github-actions[bot]]

There was no activity for a long time. The issue will be closed soon.

[github-actions[bot]]

Closing this issue as obsolete.