Storybook: Addon-docs: Support JSDoc @ignore tag to remove a prop from the props table

[patricklafrance]

Is your feature request related to a problem? Please describe.
My component contains props that the consumer shouldn't be bothered with. I would like those props to be ignored by the props table.

Describe the solution you'd like
JSDoc already support the @ignore tag. The props table could also use this tag to ignore the props.

Usage:

static propTypes = {
   /**
    * @ignore
    */
   reactDatesCalendar: node
};

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.41 containing PR #8702 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[eybbus]

I'm not sure if It is me being a noob or it is an issue. with this implementation it is not possible to ignore extended interfaces in typescript, right?

for example, how would I ignore DefaultComposeProps, FlexComposeProps and PositionComposeProps in the codeblock below?

interface BackgroundImageProps extends DefaultComposeProps, FlexComposeProps, PositionComposeProps {
  image?: string
  overlay?: string[][]
  overlayOpacity?: number[]
  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
}

[shilman]

@eybbus In SB6-beta, you can use the propFilter option of react-docgen-typescript-loader

See: https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md#mainjs-configuration

https://github.com/strothj/react-docgen-typescript-loader#loader-options

As a hack, you can also use the include prop of the Props block to create a whitelist for that particular component.

[georgewilde]

@eybbus I had the same question and @shamin your response was spot-on, so thanks for that. Just in case anyone else is wondering what that actually looks like when you add the propFilter here is the end result from my main.ts file:

config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
        {
            loader: require.resolve('babel-loader'),
            options: {
                presets: [
                    '@babel/preset-react',
                    '@babel/preset-typescript',
                ],
            },
        },
        {
            loader: require.resolve('react-docgen-typescript-loader'),
            options: {
            propFilter: prop =>
                prop.parent
                    ? !/node_modules/.test(prop.parent.fileName)
                    : true,
            },
        },
    ],
});

[jpmarra]

As a hack, you can also use the include prop of the Props block to create a whitelist for that particular component.

@shilman Do you have any examples of how to use the include prop? Struggling to find documentation.

[jpmarra]

The only thing I'm seeing is exclude which doesn't seem to help in this case. https://github.com/storybookjs/storybook/blob/5c47099b2e87efbf02c04e4176486992a950589d/addons/docs/src/blocks/Props.tsx#L22

[shilman]

SB6 = next branch

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/blocks/Props.tsx