Can't document components written with styled-components

[Yazan Alaboudi]

Thanks for the library. It works well when components are written from scratch using the react library. It seems to fail when trying to document a component using a syntax that is typical with styled-component. Example:

/**
 * Use this when you need an un-styled button
 */
export const PlainButton = styled.button<{ disabled?: boolean }>`
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  display: block;
  background: none;
  color: inherit;
  ${({ disabled }) => disabled && 'pointer-events: none'};
`;

When this component is used in a story, the comment above the component does not get registered as description text in the Doc tab. Also, the props tab is empty. Thanks again and hope you can fix this.

[Atanas Stoyanov]

Thanks a lot for the report - do you have a repo i can use to fix this issue?

[Yazan Alaboudi]

I'm currently working with a private repo. But I'll reproduce it for you in another repo ASAP

[Atanas Stoyanov]

It seems your problem is with storybook rather than my plugin - since the Prop table is not showing.

In orger to parse typescript property tables you need to somehow load a typescript loader. Storybook is using react-docgen-typescript-loader by default, and I also have published a typescript props loader: https://github.com/atanasster/webpack-react-docgen-typescript

Here is a setup I have with typescript components, dependencies addon and prop tables:

https://github.com/atanasster/grommet-controls/blob/1b5760b133d37e3ed68806811ab78a18b96f91e8/.storybook/main.js#L6

[Atanas Stoyanov]

Another thing came to mind - also export the component

import React, { FC } from 'react';

inteface PlainButtonProps {
  disabled?: boolean
}
const StyledButton  = styled.button<PlainButtonProps ...

export PlainButton: FC<PlainButtonProps> = props => <StyledButton {...props} />

you can also try directly

export  const PlainButton: FC<PlainButtonProps> = styled.button<PlainButtonProps ...

[Atanas Stoyanov]

closing for now, please open a new issue is still unresolved