PropTable does not work with styled-component

[marcuslindfeldt]

Bug Report

Describe the bug
PropTable won't render for a styled-component like the following:

// Header.js
import React from 'react';
import PropTypes from 'prop-types';

import styled from 'styled-components';

const Header = styled.header`
  z-index: 100;
  background-color: ${props => props.bg};
  min-height: 3rem;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1rem;
  display: flex;
  align-items: center;
`;

Header.defaultProps = {
  bg: #333,
};

Header.propTypes = {
  children: PropTypes.node.isRequired,
  bg: PropTypes.string,
};

export default Header;

---
name: Header
menu: Components
---

import { PropsTable } from 'docz';
import Header from './Header';

# Header

## Properties

<PropsTable of={Header} />

To Reproduce

1. Create a styled-component
2. Import it into an .mdx file
3. start docz dev server
4. See error

[0xpatrickdev]

@marcuslindfeldt Running into the same issue. The current workaround seems to be something like this:

// Header.js
import React from 'react';
import PropTypes from 'prop-types';

import styled from 'styled-components';

const StyledHeader = styled.header`
  z-index: 100;
  background-color: ${props => props.bg};
  min-height: 3rem;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1rem;
  display: flex;
  align-items: center;
`;

const Header = props => <StyledHeader {...props} />

Header.defaultProps = {
  bg: #333,
};

Header.propTypes = {
  children: PropTypes.node.isRequired,
  bg: PropTypes.string,
};

export default Header;

Although it's less than ideal...

[0xpatrickdev]

Digging a bit more, it seems to be related to the 'docgen parser':
#347 (comment)

And will be resolved in v0.14:
#240 (comment)

[diondiondion]

Any news/progress on this issue? It's a bit of a shame we have to add extra wrapper components to make the Props component work with styled-components.

Is there maybe some other way (i.e. annotation via comments) to tell the parser to pick up the propTypes & defaultProps?

[zainxyz]

I've heard react-docgen v5 (link) is suppose to fix this issue and parse the props out of native styled-components correctly.

But for now, to continue working and moving forward, I've done something similar in our implementation. Yes it adds an extra step, but it works and doesn't break any of our components.

const ButtonStyled = styled.button`
    background-color: ${themeGet('bgColor')};
    color: ${themeGet('textColor')};
    box-shadow: ${themeGet('elevation')};
`;

const Button = React.forwardRef((props, ref) => <ButtonStyled {...props} ref={ref} />);

Button.displayName = 'Button';

We use React.forwardRef due to some refs that we need access to. So we just wrap around our styled variants with a forwardRef comp.

We tried to move this logic to an HOC but HOC breaks with the Props table.

Hopefully the anticipated react-docgen@5 fixes most of these issues. 👍

[josebrito]

Can this issue be reopened? This is still not supported, and I guess that docz still depends on react-docgen@4.1.1.

=> Found "react-docgen@4.1.1"
info Reasons this module exists
   - "docz#docz-core" depends on it
   - Hoisted from "docz#docz-core#react-docgen"
   - Hoisted from "docz#docz-core#react-docgen-actual-name-handler#react-docgen"

Any chance of upgrading react-docgen to v5?

[sciotta]

+1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[josebrito]

No news on this? What's preventing docz from upgrading react-docgen to v5?

[Raphalex46]

Why is this closed ? I think a lot of React projects use styled components, and using a workaround like the one that was suggested is not an option for everybody. This seems like quite a simple fix, and it would be great to get rid of this little bug. The problem with the workaround is also that it makes little sense to change your real code for the sake of documentation, it's weird.

The stale bot is also a real problem here. It's not because the issue is stale that the issue is invalid...

[sdb1228]

This is still an issue for us, but the workaround above solved this issue.

[prxg22]

This is still an issue for us. We are developing a design-system and need to export the styled-components. We need to be able to extended the component's styles in other styled-components