Can't document components written with styled-components
alaboudi opened this issue · comments
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.
Thanks a lot for the report - do you have a repo i can use to fix this issue?
I'm currently working with a private repo. But I'll reproduce it for you in another repo ASAP
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:
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 ...
closing for now, please open a new issue is still unresolved