Typescript extended props not show v6

Describe the bug Define typescript props for component with extending other props, doesn’t show the extended props.

For example a component with

interface TProps extends ComponentPropsWithoutRef<"input"> {
  label?: string;
  state?: InputState;
  helper?: string | React.ReactElement;
}

export const TextField = forwardRef(
  (
    { label, placeholder, state, helper, ...rest }: TProps,
    ref: Ref<HTMLInputElement>
  ) => (
    ...
  )
);

Produces the following

Expected behavior Its suppose to show all the props valid for the component such as type, max, min e.t.c

System:

Environment Info:
  Binaries:
    Node: 14.2.0 - ~/.nvm/versions/node/v14.2.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.2.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 77.0.1
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-docs: ^6.0.6 => 6.0.6 
    @storybook/addon-essentials: ^6.0.6 => 6.0.6 
    @storybook/addon-knobs: ^6.0.6 => 6.0.6 
    @storybook/addon-links: ^6.0.6 => 6.0.6 
    @storybook/addon-notes: ^5.3.19 => 5.3.19 
    @storybook/addon-storysource: ^6.0.6 => 6.0.6 
    @storybook/addon-viewport: ^6.0.6 => 6.0.6 
    @storybook/addons: ^6.0.6 => 6.0.6 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.6 => 6.0.6

[mstosio]

Maybe it a little bit tricky but I found temporary solution to generate only material ui props and ignore all of HTML props.

module.exports = {
  stories: ["../src/**/*.stories.tsx"],
  // Add any Storybook addons you want here: https://storybook.js.org/addons/
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {
        return prop.parent
            ?  prop.parent.name !== 'DOMAttributes' && prop.parent.name !== 'HTMLAttributes' && prop.parent.name !== 'AriaAttributes'
            : true;
      },
    },
  },
}

[KasimAhmic]

Currently we’re using Storybook 6.2.9 with Material UI 4.12.0 and the below configuration works flawlessly for us. It renders all the MUI props properly and ignores all the default HTML props. The two key changes for us were the propFilter and allowSyntheticDefaultImports options. Hope this helps some of you!

module.exports = {
  stories: ["../src/**/*.stories.@(ts|tsx|js|jsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  typescript: {
    check: true,
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent
          ? /@material-ui/.test(prop.parent.fileName) || !/node_modules/.test(prop.parent.fileName)
          : true,
      compilerOptions: {
        allowSyntheticDefaultImports: false,
      },
    },
  },
}