Docz: Bugs around styled-components 4.0 beta

[eramdam]

Bug Report

Some features of styled-components 4.0.0 beta are broken when used inside a Docz document.
I would open a bug to SC directly but the same code works fine in react-styleguidist so I'm not quite sure where I should open the issue.

The bugs seems to be mainly around the styled() syntax of styled-components. Which I assume got changed a bit internally with 4.x.

Considering this file

https://github.com/eramdam/docz-repro-error/blob/master/test/hello.tsx

Here is how it's supposed to look (and how it looks under styled-components 3.x):

Here is how it looks with styled-components 4.x installed:

Feel free to clone https://github.com/eramdam/docz-repro-error and alternate between the master branch (4.x) and sc-v3 (3.x) to try.

I'd be happy to provide more details if needed.

[jamsch]

styled-components v4 somehow broke my app's navigation as well as extending on base styles didn't seem to work. No console errors or logs. I don't think it's related to docz though.

[guilhermedecampo]

For me docz is not reading propTypes from styled components.

Link.js

import { Link as L } from '@reach/router'
import styled from 'styled-components'
import PropTypes from 'prop-types'

const Link = styled(L)`
  font-weight: bold;
  line-height: 1.5;
`

Link.propTypes = {
  to: PropTypes.string.isRequired,
}

export default Link

Link.mdx

name: Link
---

import { Playground, PropsTable } from 'docz'
import Link from './Link'

# Link

<PropsTable of={Link} />

## Basic usage

<Playground>
  <Link to="/">This is a link</Link>
</Playground>

dev mode

[pedronauck]

This problem is related to docgen parser, duplicated from #240 and all that depends of resolve this docgen bug 😕

[eramdam]

@pedronauck even the rendering issue with styled-components?

[pedronauck]

Sorry @eramdam, the rendering issue isn't a bug from react-docgen, I'll keep this openning 🙏

[itshizhan]

this is a real gotcha issue. i resolve it as follows：

// Link is a styled components
const LinkWrapper = (props)=>(
   <Link {...props}/>
)
// docz reading propTypes from LinkWrapper
LinkWrapper.propTypes = {
   //props
}
export default LinkWrapper

[antoniojps]

Any follow up on this issue?

[pedronauck]

I'm closing this issue now in favor of the new one, most of the problems have been solved and are working now, but some others appeared.