Docz: PropsTable does not render

[brunolemos]

Bug Report

PropsTable did not render anything in the screen. (cc #138)
I'm using TypeScript.

To Reproduce

---
name: Button
---

import { PropsTable } from 'docz'

import Button from './Button'

# Button

<Button onPress={() => alert('pressed')}>Click</Button>

<PropsTable of={Button} />

import React from 'react'
import { StyleSheet, Text, Touchable } from 'react-primitives'

const styles = StyleSheet.create({
  text: {
    color: 'green',
  },
})

export interface ButtonProps {
  test?: string
  children: string
}

const Button: React.SFC<ButtonProps> = props => (
  <Touchable {...props}>
    <Text style={styles.text}>{props.children}</Text>
  </Touchable>
)

export default Button

Expected behavior

Render PropsTable, getting props from TypeScript interface automatically

Environment

• OS: macOS 10.14
• Node/npm version: Node 8/npm 5

Additional context/Screenshots

[mrac]

I had the same issue. The problem was import line for 'react'.
import * as React from 'react' helped.

[mdapper]

Same bug here, only worked with @mrac suggestion.

It's possible that Docz, or other dependencie that handle the PropsTable, don't work with the following TypeScript setting?

// tsconfig.json
{
  "compilerOptions": {
    ...
    "allowSyntheticDefaultImports": true,
    ...
  },
}

This setting allows to use import React from 'react' instead of import * as React from 'react'

[JeroenReumkens]

You guys are right that import * as React from 'react'; does solve the issue. But for most of us that's probably not a viable solution.

Right now I'm searching if there is a way to override the tsconfig to set this option to true like I have in my main project as well. As soon as I have found a solution I'll post back here.

I find people mentioning the exact same thing in the React Docgen Typescript repo where I feel this issue is coming from: https://github.com/styleguidist/react-docgen-typescript/issues/100

[markusoelhafen]

I already had import * as React from 'react'; but the props table still didn't render.

What did the trick, was changing the default exported element with lowercase instead of PascalCase.

so, this didn't render the table:

const Input: React.StatelessComponent<InputProps> = (props): JSX.Element => (
  <StyledInput {...props} />
);

export default Input;

but this did:

const input: React.St...

export default input;

I would still rather use camelcase for my constants, any chance to solve this?

[JeroenReumkens]

@markusoelhafen That's actually very strange. For me it did work with PascalCase. But I also notice that you are using a functional component, which I didn't. Maybe that also makes a difference.
Unfortunately I still haven't been able to find a fix for this problem.

[strothj]

Try changing export default Input; to export { Input }; or exporting as a named export in addition to the default export.

I believe the package react-docgen-typescript handles the parsing. I've always had the most success using named exports.

[markusoelhafen]

Hey @strothj ,
named exports fixed the problem, and now everything is running smoothly 👍
thx!

[JeroenReumkens]

I haven't had the time to try named exports, I'll assume that works. But still one might want to have default exports, since this is a pretty common thing. I don't like changing my code base for a specific tool I use to render documentation. So I'm still hoping someone will pass by with the solution that works in all cases 😄

[markusoelhafen]

Hey @JeroenReumkens,
We still have default exports, but we explicitly made the components named exports here.

Now that it works I'm pretty happy with docz :)

[JeroenReumkens]

@markusoelhafen Yeah exactly, so you just do both? Still not totally comfortable with the solution, since other developers constantly need the explanation why we do that.
Maybe if this works, it might also work if we use import { default as ComponentName } from './Component' then? I'm going to give that a try somewhere this week.

[markusoelhafen]

@JeroenReumkens Gave it a quick try, but didn't work with import { default as ComponentName } from './Component'.
Maybe this issue somehow relates to this issue at react-docgen-typescript?

[strothj]

export const Input: React.StatelessComponent<InputProps> = (props): JSX.Element => (
  <StyledInput {...props} />
);

export default Input;

If I'm not mistaken, adding an additional named export along with the default may work. That way you can continue to use the default export but the parser will be able to attach the docgen information to it.

After processing the file with the parser (react-docgen-typescript), react-docgen-typescript-loader takes the list of docgen's for the file and attaches them to their components like this:

const Input: React.StatelessComponent<InputProps> = (props): JSX.Element => ( ...

Input.__docgenInfo.props.someProp = {
  defaultValue: "blue",
  description: "Prop description.",
  name: "someProp",
  required: true,
  type: "'blue' | 'green'",
}

[JeroenReumkens]

I've just tried to get it to work, but unfortunately it didn't. I even tried making a very small component (tried but functional and class), which also didn't work.

Example:

interface PriceProps {
  value: string | number;
}

const Test = (props: PriceProps) => <div>{props.value}</div>;
// Price was also defined. 
export { Price, Test };

The difference might be that I'm using the babel-6 plugin? I have planned to upgrade that in the coming weeks, but it would be great if I could get Docz running before that.

[three60five]

I am not using Typescript in my project. What is the solution to using PropsTable component?

[pedronauck]

Please guys, can you test with the new release... I think that this was fixed!

[wceolin]

Thanks for the update, @pedronauck. It still doesn't render in my case (using with Styled Components - as discussed in #156).

I saw some people mentioned they'd start working on that but I didn't see any further updates about it. Are you working with them to make docz compatible with styled components? Do you need any help/is there a way to collaborate?

[JeroenReumkens]

Hey,

I was testing the same thing yesterday. Didn’t render either 😢 I’m not using styled components but do use Typescript, and Babel 6. For the latter I read there were some problems with, so i’m trying to upgrade to Babel 7 and will test again after that. But that is going to take a few days before I can test that.

Thanks for all the hard work @pedronauck !

[pedronauck]

@wceolin if you want to out styled-components together right now, you can do something like we're doing on our styled-components example

[wceolin]

@pedronauck Thanks, I had seen that example but I'm trying to figure out a solution without having to update all components 😅

[pedronauck]

I'll close this issue in favor of #240, since both is related to pass custom configuration to react-docgen resolver!

[smakosh]

Having the same issue as @wceolin

[yiyeum]

I've tried import * as React from 'react' but doesn't work.
Using docz: ^1.3.2 with react / typescript.

ex) Button folder has index.tsx with export const Button and doc.mdx with

import { Props } 'docz';
import { Button } from './';
<Props of={Button} />

but doesn't render prop table...