Storybook: addon-docs: Description not showing in Documentation

[albshin]

Describe the bug
Description is being generated by react-docgen-typescript-loader but is not showing up in the DocsPage. Seems like a Webpack configuration error but I can't seem to figure out what it is. I am using TypeScript.

To Reproduce

ProgressBar.tsx

import React, { HTMLAttributes } from 'react';
import styled from 'styled-components';
import { Flex, Box } from 'rebass/styled-components';
import { variant, MarginProps } from 'styled-system';

export interface ProgressBarProps
  extends MarginProps,
    HTMLAttributes<HTMLDivElement> {
  variant?: 'primary' | 'secondary';
  /**
   * The value property represents how much progress has been made out of 100.
   */
  value?: number;
}

export interface BarProps extends ProgressBarProps {
  progressWidth: string;
}

const Progress = styled(Flex)`
  overflow: hidden;
  border-radius: 0.25rem;
  height: 1rem;
`;

const Bar = styled(Box)<BarProps>`
  width: ${props => props.progressWidth};

  ${variant({
    scale: 'progressBars',
    variants: { primary: {} }
  })}
`;

/**
 * What's up?
 */
export const ProgressBar = ({
  value = 0,
  variant = 'primary',
  ...props
}: ProgressBarProps) => {
  console.log(ProgressBar.__docgenInfo);
  return (
    <Progress bg="gray.0" {...props}>
      <Bar role="progressbar" progressWidth={`${value}%`} variant={variant} />
    </Progress>
  );
};

export default ProgressBar;

console.log(ProgressBar.__docgenInfo) outputs:

{
    "description": "What's up?",  // Description clearly is populated
    "displayName": "ProgressBar",
    "props": {
        "variant": {
            "defaultValue": {
                "value": "primary"
            },
            "description": "",
            "name": "variant",
            "required": false,
            "type": {
                "name": "\"primary\" | \"secondary\""
            }
        },
        "value": {
            "defaultValue": {
                "value": 0
            },
            "description": "The value property represents how much progress has been made out of 100.",
            "name": "value",
            "required": false,
            "type": {
                "name": "number"
            }
        },
......
}

ProgressBar.stories.tsx

import React from 'react';
import { ProgressBar } from './ProgressBar';

export default { title: 'Components|ProgressBar', component: ProgressBar };

export const Default = () => (
  <>
    <ProgressBar mb={2} />
    <ProgressBar value={25} />
  </>
);

webpack.config.js

const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

module.exports = async ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: path.resolve(__dirname, '../node_modules/'),
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]]
        }
      },
      {
        loader: 'react-docgen-typescript-loader',
        options: {
          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
          propFilter: prop => {
            if (prop.name) {
              if (prop.name === 'css' || prop.name === 'ref' || prop.name === 'theme' || prop.name === 'as' || prop.name === 'forwardedAs') {
                return false;
              }
            }

            if (prop.parent) {
              if (prop.parent.fileName.includes('styled-system')) {
                // Filter out long form SpaceProps
                if (prop.parent.name === 'SpaceProps' && prop.name.length > 2) return false;
                return true;
              }
              return !prop.parent.fileName.includes('node_modules');
            }
            return true;
          }
        }
      }
    ]
  });
  config.module.rules.push({
    test: /\.(stories|story)\.mdx$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-transform-react-jsx']
        }
      },
      {
        loader: '@mdx-js/loader',
        options: {
          compilers: [createCompiler({})]
        }
      }
    ]
  });
  config.module.rules.push({
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: require.resolve('@storybook/source-loader'),
    exclude: path.resolve(__dirname, '../node_modules/'),
    enforce: 'pre'
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

.babelrc

{
  "plugins": ["babel-plugin-styled-components"]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowSyntheticDefaultImports": true,
    "allowJs": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "jsx": "react",
    "sourceMap": true
  },
  "exclude": ["node_modules", "/packages/**/lib/*"]
}

Expected behavior
The description, "What's up?" appears on the DocsPage for ProgressBar.

Screenshots

System:

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 72.0.2
  npmPackages:
    @storybook/addon-a11y: ^5.3.12 => 5.3.12 
    @storybook/addon-actions: ^5.3.12 => 5.3.12 
    @storybook/addon-docs: ^5.3.12 => 5.3.12 
    @storybook/addon-links: ^5.3.12 => 5.3.12 
    @storybook/addon-storysource: ^5.3.12 => 5.3.12 
    @storybook/addons: ^5.3.12 => 5.3.12 
    @storybook/react: ^5.3.12 => 5.3.12 

[shilman]

All of this looks good to me. Do you have a repro I can look at?

[albshin]

Reproduction repository here:
https://github.com/albshin/storybook-description

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@albshin You're using the manual configuration. If you do the manual configuration, you also need to provide a function to extract the component description. I recommend using the preset and have updated the docs accordingly.

[albshin]

Hi,

I got it to finally work using by switching over to the preset. However, I was required to use react-docgen-typescript-loader in my project to get docgen to work and was quite confused with the documentation on how to set it up in my project. Initially, I checked the documentation where it stated that:

1. You can use @storybook/preset-typescript which includes react-docgen-typescript-loader.

but through further inspection, react-docgen-typescript-loader was removed from @storybook/preset-typescript recently https://github.com/storybookjs/presets/pull/68. The documentation should be updated to reflect these changes.

In the end, I ended up editing the webpack config in main.js to implement react-docgen-typescript-loader into my project. This is how my configuration turned out for future reference:

const path = require('path');

module.exports = {
  addons: [
    '@storybook/addon-storysource',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-a11y',
    '@storybook/addon-docs',
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          transpileOnly: true,
          configFile: path.resolve(__dirname, '../tsconfig.json'),
        }
      }
    }
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.tsx?$/,
      exclude: path.resolve(__dirname, '../node_modules/'),
      use: [
        {
          loader: 'react-docgen-typescript-loader',
          options: {
            tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
            propFilter: prop => {
              if (prop.name) {
                if (prop.name === 'css' || prop.name === 'ref' || prop.name === 'theme' || prop.name === 'as' || prop.name === 'forwardedAs') {
                  return false;
                }
              }

              if (prop.parent) {
                if (prop.parent.fileName.includes('react-select')) return true;

                if (prop.parent.fileName.includes('styled-system')) {
                  // Filter out long form SpaceProps
                  if (prop.parent.name === 'SpaceProps' && prop.name.length > 2) return false;
                  return true;
                }
                return !prop.parent.fileName.includes('node_modules');
              }
              return true;
            }
          }
        }
      ],
    });

    config.resolve.extensions.push(".ts", ".tsx");

    return config;
  }
};

[shilman]

@albshin sorry for the confusion. i'll be updating the documentation shortly -- we'll be moving away from react-docgen-typescript-loader in 6.0 because typescript is now supported directly in react-docgen. the typescript preset stuff just got released yesterday and the docs side hasn't caught up yet.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

FYI the recommended 6.0 setup (should work in 5.3 too) is ready, and is the default in the most recent versions of both @storybook/preset-typescript and @storybook/preset-create-react-app:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-prop-tables-with-typescript

I am commenting on all props-related issues to request that you upgrade so we can get this right before release. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!