Comments aren't rendered at all

[tobiastimm]

I've created a button with styled-components. My Button has different variants

export interface ButtonProps {
  /**
   * Text of the button
   * @default "test"
   */
  text?: string;
  /** Is the button disabled? */
  disabled?: boolean;
  /**
   * Text of the button
   * @default "test"
   */
  onClick?(): void;
  icon?: string;
  preloader?: boolean;
  tooltipConfig?: any;
  light?: boolean;
  dark?: boolean;
  small?: boolean;
  primary?: boolean;
  secondary?: boolean;
  className?: any;
  $log?: any;
}

/**
 * This is a button
 */
const BaseButton: StatelessComponent<ButtonProps> = ({
  onClick,
  icon,
  text,
  disabled,
  dark,
  primary,
  secondary,
  className,
  $log,
}) => {
  if ($log) {
    $log.info('LOG SERVICE FROM REACT');
  }
  return (
    <button className={className} onClick={onClick}>
      {icon && <i />}
      <span>{text}</span>
    </button>
  );
};

export const Button = styled<ButtonProps>(BaseButton)`
  cursor: pointer;
  display: inline-block;
  height: ${props => props.theme.button.height}px;
  line-height: ${props => props.theme.button.lineHeight}px;
  padding: 0 20px;
  text-align: center;
  width: auto;
  min-width: 145px;
  background: transparent;
  font-size: ${props => props.theme.button.fontSize};
  font-weight: 600;
  -webkit-appearance: none;
  position: relative;
  border-radius: ${props => props.theme.button.borderRadius};
  &:focus,
  &:active,
  &:active:focus {
    outline: none;
    text-decoration: none;
    border: none;
    box-shadow: none;
    outline-style: none;
  }
  &:disabled {
    border: 1px solid $btn-disabled-border-color;
    background: $btn-disabled-bg-color;
    color: $btn-disabled-txt-color;
    opacity: 1;
    pointer-events: none;
  }
`;

export const PrimaryButton = styled<ButtonProps>(Button)`
  background: ${props => props.theme.button.primary.background};
  color: ${props => props.theme.button.primary.color};
  &:hover {
    background: ${props => props.theme.button.primary.hover.background};
  }
`;

In storybook the result is

[strothj]

Hello,

Can you upload a minimal reproduction? (You can copy the example project from this repo, add styled-components, and push to a repo).

Out of curiosity, are those components (base button/ button/ primary button) spread across different files? If so, what file contains the props interface?

[tobiastimm]

@strothj I've updated the example in my fork. https://github.com/tobiastimm/react-docgen-typescript-loader/tree/master/packages/react-docgen-typescript-loader-example Same behaviour

[strothj]

Awesome thank you. I will check this out sometime tomorrow

[strothj]

Hello,

I've reproduced the issue in Styleguidest as well, which means the issue lies in how react-docgen-typescript is handling the parsing.

I've uploaded a test repo with your component so you can open an issue there and have something to reference: https://github.com/strothj/react-docgen-typescript-loader-styleguidist-test-styled-components

Weird enough, if you change:

const BaseButton: StatelessComponent<ButtonProps> = ({

to

export const BaseButton: StatelessComponent<ButtonProps> = ({

the component gets detected as BaseButton and the props populate correctly. Obviously, you want the name to show up as PrimaryButton.

[tobiastimm]

@strothj ah okay. Yeah I only want to export PrimaryButton

[strothj]

I updated the reference project from https://github.com/strothj/react-docgen-typescript-loader/issues/13#issuecomment-396644880. I believe updates from react-docgen-typescript have resolved the issue.