Storybook: Addon-docs: Props doc block

[shilman]

• [x] Basic design
• [x] Annotation support
  
  
  
  • [x] proptypes
  
  
  • [x] docgen comments
  
  
  • [x] typescript
  
  
  • [x] flow
  
  
• [x] Stories & tests
• [ ] Update documentation

Knobs support split out as a separate issue #6639

[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!

[bastiW]

+1 for this

[wachunga]

Will this support typescript out of the box like <Props> from Docz?

[shilman]

@wachunga It already does! You need to use @storybook/preset-typescript or set up react-docgen-typescript-loader yourself to get this.

[sebastianfrey]

I use the @storybook/addon-docs along with Typescript. So I configured Storybook as suggested in docs via presets.js:

const path = require("path");

module.exports = [
  '@storybook/addon-docs/react/preset',
  {
    name: "@storybook/preset-typescript",
    options: {
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, "./tsconfig.json")
      },
      tsLoaderOptions: {
        configFile: path.resolve(__dirname, "./tsconfig.json"),
        transpileOnly: true
      },
      include: [path.resolve(__dirname, "../packages")]
    }
  }
];

But when I open DocPage for an Component, I get:

No props found for this component.

My Components are mostly Functional Components and as required by react-docgen-typescript-loader I export them as named export.

For example:

interface CoordinateListProps {
   ...
}

export const CoordinateList: React.FC<CoordinateListProps> = props => { ... }

export default CoordinateList;

And the related Story:

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

import { CoordinateList } from './CoordinateList';

const stories = storiesOf('CoordianteList');

stories.addParameters({ component: CoordinateList });
stories.addDecorator(withKnobs);

stories.add('Example CoordianteList', () => (
   <CoordinateList coordinates={[{x:100,y:100}]}></CoordinateList>
));

Is there something I missed?

Edit:

Storybook and Typescript related Dependencies:

    "@storybook/addon-actions": "^5.2.0-beta.19",
    "@storybook/addon-docs": "^5.2.0-beta.19",
    "@storybook/addon-info": "^5.2.0-beta.19",
    "@storybook/addon-knobs": "^5.2.0-beta.19",
    "@storybook/preset-typescript": "^1.1.0",
    "@storybook/react": "^5.2.0-beta.19",
    "react-docgen-typescript-loader": "^3.1.0",
    "ts-loader": "^6.0.4",

[shilman]

@sebastianfrey looks like a typo?

import { CoordinateList } from './CoordinateList

But CoordinateList is your default export. Otherwise looks good to me.

[sebastianfrey]

@shilman I fixed the default export without any effect.

Along the custom preset configuration, I also have a custom webpack configuration:

const path = require("path");
const { ProvidePlugin } = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const packagesPath = path.resolve(__dirname, '../packages');
const tsconfigPath = path.resolve(__dirname, 'tsconfig.json');

//dont need stories path if you have your stories inside your //components folder
module.exports = async ({config, ...rest}) => {
  return {
    ...config,
    plugins: [
      ...(config.plugins || []),
      new ForkTsCheckerWebpackPlugin(),
      new ProvidePlugin({ 'React': 'react', 'ReactDOM': 'react-dom' }),
    ],
    resolve: {
      ...config.resolve,
      plugins: [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({ configFile: tsconfigPath }),
      ],
      extensions: [
        ...(config.resolve.extensions || []),
        '.ts',
        '.tsx',
      ],
      modules: [
        packagesPath,
        'node_modules'
      ]
    }
  };
};

But I guess, this should have no effect?

Any idea how I can check, if react-docgen-typescript-loaders output is valid?

[shilman]

@sebastianfrey You should be able to do something like:

console.log({ docgen: JSON.stringify(CoordinateList.__docgenInfo) })

I expect that this will show up as undefined. And if it shows up as anything other than that, you're probably golden.

[sebastianfrey]

@shilman Thankfully I am not goden. ;-)

I got it work for some of my components, by defining a second tsconfig with jsx=preserve instead of jsx=react to handle my components via ts-loader.

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es6",
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "noResolve": false,
    "importHelpers": true,
    "lib": [
      "dom",
      "es5",
      "es6",
      "esnext"
    ],
    "baseUrl": "packages",
    "rootDir": "packages"
  },
  "exclude": [
    "node_modules",
    "lib",
    "es"
  ]
}

Then, I configured manually ts-loader and react-docgen-typesript-loader via my webpack configuration:

module.exports = async ({config}) => {
  const { module = {}, plugins = {}, resolve = {} } = config;

  return {
    ...config,
    module: {
      ...module,
      rules: [
        ...(module.rules || []),
        // Specify ts-loader and react-docgen-typescript-loader for components, which excludes stories.
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: require.resolve('ts-loader'),
              options: {
                configFile: tsconfigPath,
                transpileOnly: true
              },
            },
            {
              loader: require.resolve('react-docgen-typescript-loader'),
              options: {
                tsconfigPath: tsLoaderTsconfigPath, // Use custom tsconfig for ts-loader, when loading sources
              },
            },
          ],
          include: [packagesPath],
          exclude: [/\.(stories|story)\.tsx?$/] // Exclude stories
        },
        // specify a second ts-loader, which handles stories
        {
          test: /\.(stories|story).tsx?$/,
          use: [
            {
              loader: require.resolve('ts-loader'),
              options: {
                configFile: tsconfigPath,
                transpileOnly: true
              },
            },
          ],
          include: [packagesPath],
        },
      ],
    }
  };
};

Unfortunately this does not work for all my components. And in addition storybook startup time is now twice as long compared to setup with presets, which I guess is probably caused by two ts-loader declarations..?

[stuarthendren]

I'm testing put the doc in the @next, works really well.
I see it has an exclude prop, a corresponding include would be really useful so you can, say, use include to show only the main props for the component then maybe later in the page add a table with the remaining props using the existing exclude.

[thomaswelton]

Is supporting flow still in consideration / development?

[shilman]

@thomaswelton Yeah it's in consideration. I'm guessing it's probably a configuration issue more than anything. If any Flow users want to figure it out, I can add it to the guide.

[patricklafrance]

Basic support for Flow is available with the latest beta.

[shilman]

Closing & opening #9133 for docs