Docz: PropsTable does not render

[ilyanoskov]

Bug Report

Describe the bug

I have a simple Button component with some props. I tried to use PropsTable but it does not even get mounted. What could be the source of this issue? I have also tried to check whether react-docgen parses the PropTypes information and it does.

Environment

• OS: 10.13.5
• Node/npm version: 10.1

Additional context/Screenshots

[felipeduardo]

Me too

[ilyanoskov]

I pretty much ended up writing my own propTable component, I can share it here when I finalise it

[ilyanoskov]

so, the solution was to use https://github.com/storybooks/babel-plugin-react-docgen

I have added it to my doczrc.js file

import { babel } from 'docz-plugin-babel6';

export default {
  dist: './dist',
  plugins: [babel()],
  modifyBabelRc: config => {
    config.plugins.push('react-docgen');
    console.log(config);

    return config;
  }
};

and implemented a custom-made prop-table inspired by this post https://medium.com/@mrcthms/using-proptype-declarations-to-document-your-react-components-3ba7e18d0a3f

[pedronauck]

This is very weird @ilyanoskov since we already have babel-plugin-react-docgen inside. Can you share more details about this or maybe your solution?

[ilyanoskov]

@pedronauck my solution looks like this:

import React from 'react';
import styled from 'react-emotion';
import Table from '../../src/components/Table';
import { standard } from '../../src/themes/index';
import { ThemeProvider } from 'emotion-theming';

const StyledTable = styled('table')`
  color: #999;
  margin-top: 64px;
  border-collapse: collapse;
`;

const StyledTh = styled('th')`
  font-weight: 600;
  text-align: left;
  color: #000;

  font-size: 16px;
  padding: 16px;
  border: 1px solid #111111;
`;

const StyledTd = styled('td')`
  font-size: 16px;
  padding: 16px;
  border: 1px solid #999;
`;

const getRows = props => Object.keys(props).map(prop => [
  prop,
  props[prop].type.name,
  props[prop].required.toString(),
  props[prop].defaultValue.value.toString(),
  props[prop].description
]);

const PropTable = ({ component }) => {
  const parsed = component.__docgenInfo;
  let { props, description } = parsed;
  return (
    <div style={{ overflow: 'scroll', border: '1px solid lightgray' }}>
      <ThemeProvider theme={standard}>
        <Table
          headers={['Name', 'Type', 'Required', 'Default Value', 'Description']}
          rows={getRows(props)}
        />
      </ThemeProvider>
    </div>
  );
};


export default PropTable;

I don't know why the PropsTable won't work, it just does not generate the table. Nothing gets rendered.

And I did not know you already had react-docgen, I just removed it from doczrc.js and my table component is still working.

[ilyanoskov]

With 0.9.2 I no longer have this issue. @felipeduardo do you have this issue?