addon-docs: Generate props using typescript with styled-components, react.

[ashr81]

I am able to generate props using @storybook/addon-docs when the props are inline to that component. but the plugin doesn't pick the props from the type definition the component has:

Ex:
TextProps definition:

interface TextProps {
  fontSize: string;
  fontWeight: number;
}

When rendered on storybook using Props:

# Text
<Props of={Text} />

When used this way without returning the markup as done when a react component is rendered:

export const Text = styled.p<TextProps>`
  ${space}
  ${lineHeight}
  ${letterSpacing}
  ${fontStyle}
  ${fontWeight}
  ${fontSize}
  ${color}
  ${({ textTransform }: TextProps) => textTransform && css`
    text-transform: ${textTransform};
  `}
  ${BaseCSS}
`

The props passed using TextProps are not shown on storybook:

Ideally, it should contain fontSize and fontWeight. but it never shows up.

How do I get all the required props in the storybook?

used storybook versions:

    "@storybook/addon-docs": "^5.3.19",
    "@storybook/addon-info": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^5.3.19",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5"
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "styled-components": "^5.1.1",
    "styled-system": "^5.1.5"
    "react-docgen-typescript-loader": "^3.7.2",

Using ts-loader and react-docgen-typescript-loader and my main.js configuration looks like this:

module.exports = {
  stories: ['../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-docs'
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
        },
        {
          loader: require.resolve('react-docgen-typescript-loader'),
        },
      ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

[shilman]

Please try 6.0 and see if that helps. We've revamped everything related to typescript & props.

[ashr81]

Will the addons present for storybook version 5.3.19 work with the latest 6.0 version as well?

[ashr81]

@shilman , When I upgraded to the latest 6.0.0 beta 38. I have a workspace set up using yarn. When I run storybook inside a folder. it always checks for node_modules from my root workspace instead of the node_modules from the folder I am working on. I didn't face this issue before Upgradation. I think it is not related to the storybook. but this change triggered this error:

Failed to load preset: {"name":"@storybook/addon-docs","type":"presets"} on level 1
ERR! Error: Cannot find module '@storybook/addon-docs'

[shilman]

Hmm I'm not sure about that error. @storybook/addon-info has been deprecated so you should remove it in 6.0

[ashr81]

Tried version 6.0 - beta 38. still the feature is missing.

[ashr81]

I found the fix. Props are shown when component is exported as named import instead of default import;