Addon docs: Unwanted props appearing on the generated docs props.

[EdenTurgeman]

When viewing props from jsx using styled-components the props table will contain all props passed what seems to be styled-components

Example:

Also, for some reason, my docs page is not centered

Expected behavior
Only direct component props will be shown.
Docs are centered

My config:

import { configure, addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { withKnobs } from '@storybook/addon-knobs';
import { bootstrap } from '@logz-ui/styleguide';

bootstrap();

const storyBookDecorators = [
  withKnobs,
  withOptions({
    name: `@logz-ui/styleguide`,
    url: 'https://github.com/logzio/gaia-hermes-ws/tree/master/styleguide',
    hierarchyRootSeparator: /\|/,
  }),
];

storyBookDecorators.forEach(addon => addDecorator(addon));

configure(require.context('../stories', true, /\.story\.jsx?$/), module);

My Presets:

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {
        babelrc: path ,
        presets: [],
        plugins: ['emotion'],
      },
      sourceLoaderOptions: null,
    },
  },
    {
      name: "@storybook/preset-typescript",
      options: {
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
        },
        include: [path.resolve(__dirname, "../stories")]
      }
    }
];

Will provide more context if needed. would love to know the solution to thesetwo problems :)

[patricklafrance]

Hi @EdenTurgeman

You can fix this by specifying a propFilter to the tsDocgenLoaderOptions.

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

We should be able to excluded indirect props by default before the end of the beta.

[stale]

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]

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]

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!

[trumbitta]

We should be able to excluded indirect props by default before the end of the beta.

please reopen :)

Any updates on the quoted statement?

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.39 containing PR #10464 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.

[shilman]

The above PR doesn't exactly solve this issue, but it adds a lot more flexibility and a workaround using the include prop

[skpandey1294]

Hi @patricklafrance and @shilman I just want to know that the issue regarding indirect props is fixed or not? I am also facing similar problem. I am using Storybook 5.3.19

[trumbitta]

I'm in the process of updating to StoryBook 6 and there seem to be no need for my workaround anymore:

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('react-docgen-typescript-loader'),
          options: {
            // Do not show additional props from styled-components, React, etc in the Props table
            // Waiting to be handled automatically by Storybook: https://github.com/storybookjs/storybook/issues/8781
            propFilter: (propInfo) =>
              propInfo && propInfo.parent && !propInfo.parent.fileName.includes('/node_modules/'),
          },
        },
      ],
    });

But now I don't see any of the props of my component, and instead see some of the props from styled-components:

[shilman]

Thanks @trumbitta . There are a few different ways to disable rows in the ArgsTable in 6.0:

• Configure the propFilter as per your example
• Use the include/exclude property of the ArgsTable Addon-docs: Provide better props include/exclude features #10464
• Use table: { disable: true } in the ArgType

I know we're a bit all over the place here. Sorry for the confusion.

cc @jonniebigodes

[trumbitta]

@shilman Thank you for the hints!

The include/exclude property looks promising and I'll probably try it today / tomorrow as I'm completing the migration to v6 🤞 🤞 🤞

[shilman]

Fixed by include/exclude above, available as both parameters and props in 7.0 https://storybook.js.org/docs/react/api/doc-block-argtypes