Default column won't show values from defaultProps

[nkpgardose]

The default column doesn't show values coming from default props. I'm using CRA here.

"react": "^16.12.0",
"react-docgen-typescript": "^1.16.1",
"react-styleguidist": "^10.3.2",

Here is the screenshot:

Here is the code snippet

interface Props {
  /**
    * Different style modification by passing
    * Btn's variant or Parent's class elements.
    */
	variants?: string
  /**
   * Size by default is medium. Blank size is a medium size.
   */
	size?: '' | 'xsm' | 'sm' | 'lg' | 'xlg'
  /**
   * The usage depends on elements structure or scenario.
   */
	type?: 'button' | 'submit' | 'reset'
  /**
   * A callback when button is clicked.
	 * This will pass an React mouse event.
   */
	onClick?: React.MouseEventHandler<Element>
  /**
   * Any string or HTML element placed inside Btn
   */
	children: React.ReactNode | string
  /**
   * It makes button unclickable if the disabled attribute is active.
   */
	disabled?: boolean
}

const defaultProps = {
	disabled: false,
	type: 'submit',
	size: '',
	variants: '',
	onClick() { }
}

const Btn = ({ variants, size, children, onClick, disabled, type }: Props) => {/* ... */}

Btn.defaultProps = defaultProps

export default Btn

and lastly here's my styleguide.config.js

module.exports = {
  propsParser: require('react-docgen-typescript').withDefaultConfig({
    propFilter: {
      shouldExtractLiteralValuesFromEnum: true,
      skipPropsWithoutDoc: false
    }
  }).parse
}

[jyutzio]

You can set default props this way:

const Btn = ({
  variants = '',
  size = '',
  children,
  onClick,
  disabled = false,
  type = 'submit',
}: Props) => {
  /* ... */
};

The issue remaining is styleguidist does not seem to display default props which are booleans.

[hipstersmoothie]

This is because of how you define the defaults. You do it in a variable instead of directly. I just wrote the code to resolve this, but I don't think I should make a PR. This syntax will not make the react types play nicely (ex: when using the default props that won't work).

I think it's better to push users towards optimal TS react usage. So you should either do what @jyutzio said or do Btn.defaultProps.

@pvasek Thoughts?

[hipstersmoothie]

Related to #195