Types and interfaces shows as a name instead of type

radswiat commented 5 years ago

Example code:

export type IPropsVariant = 'primary' | 'secondary' | undefined
export type IPropsType = 'button' | 'submit' | 'reset' | undefined

export interface IProps {
  id?: string;
  type?: IPropsType;
  variant?: IPropsVariant;
  title?: 'string';
  tabIndex?: number;
  disabled?: boolean | undefined;
  className?: string;
}

Output:

Am i missing something ?:) Thanks for help!

clisterdmello commented 4 years ago

can you try this option shouldExtractLiteralValuesFromEnum: true Its given in https://github.com/strothj/react-docgen-typescript-loader

radswiat commented 4 years ago

I already solved the problem - kinda :)

What helped in my case was to remove undefined from TS type and then it started pulling up the values.

Thanks for the shout about shouldExtractLiteralValuesFromEnum i'll try it out, thanks!

Would probably be good to understand why undefined is breaking the render of types.

nekitk commented 4 years ago

shouldExtractLiteralValuesFromEnum currently works only with string unions and enums and leaves other unions as is.

To get rid of | undefined in optional props you can pass strict: false to compilerOptions of react-docgen-typescript-loader:

{
    loader: 'react-docgen-typescript-loader',
    options: {
        compilerOptions: {
            ...require('./tsconfig.json').compilerOptions,
            strict: false,
        },
        shouldExtractLiteralValuesFromEnum: true,
    },
}

For documentation purposes there's no need to include undefined in output since there's a required column in props table which shows, what props are optional and what are not.

Also there is no need in adding | undefined to already optional props (disabled for example) since prop being optional assumes that it can be undefined.

strothj / react-docgen-typescript-loader

Types and interfaces shows as a name instead of type #54