React-styleguidist: Support imported propTypes

[sapegin]

Try react-docgen-external-proptypes-handler and if it's good: create a repo, publish to npm, and add to Styleguidist by default.

More details about the issue: https://github.com/reactjs/react-docgen/issues/33

Related issues: #548, #792

/cc @pasupuletics

[selrond]

@sapegin somebody already published a modified version of this: siddharthkp/react-docgen-external-proptypes-handler

[peroperje]

does it work? If yes, could you put an example of integration into react-styleguidist?
I have tried set up react-styleguidist with react-docgen-external-proptypes-handler to get something like this :

commonPropTypes.js

import PropTypes from 'prop-types'

export default {
  top: PropTypes.string
}

MyComponent.js

import commonPropTypes from './commonPropTypes'
const MyComponent = () => {}

MyComponent.propTypes = {
   ...commonPropTypes
}

export default MyComponent

but without success.

[stepancar]

@peroperje look at MoneyInput propTypes https://github.com/alfa-laboratory/arui-feather/blob/master/src/money-input/money-input.jsx and to config for react-styleguidist
https://github.com/alfa-laboratory/arui-feather/blob/master/styleguide.config.js#L23
It uses https://github.com/alfa-laboratory/library-utils
which allow you use propTypes from another component.

[peroperje]

Thanks, @stepancar.
I have tried but, unfortunately, it doesn't work for me.
I have instaled library-utils and when I put :

    propsParser(filePath) {
        return reactDoc(filePath);
    }

in my styleguide.config.js all propTypes for all components disappears from the documentation.

I am not sure what I do wrong.

[stepancar]

@peroperje could you provide repo where you use react-styleguidist?
I'll try to help you

[peroperje]

@stepancar Thanks for offered help, you are very polite, but I am not allowed to share our project code.

I have found that your react-doc library works as you described when a Component defined as a class.

But it doesn't work when a function component defined as a function, like this:

function MyFunctionComponent(props) {
  return <div>I am function component</div>;
}

MyFunctionComponent.propTypes = {
  /**
   * This is someProp
   */
  someProp: PropTypes.string
}

or like styled component

const Absolute = styled('div')`

`

Absolute.propTypes = {
    top: PropTypes.string
}

it gives _Warning: Cannot parse bar/foo/Foo.js: RangeError: Maximum call stack size exceeded_

[stepancar]

@Heymdall, do you know about this problem?

[Heymdall]

@stepancar We actually don't use this kind of components in our projects. But I will try to look into it today.

[siddharthkp]

@peroperje Don't know if you figured this out. Leaving for future wanderrs:

react-docgen only understands React components (not styled components)

Reference: https://github.com/styled-components/styled-components/issues/945

TL;DR: You'd have to use like this:

const H1 = styled.h1`
  font-size: 1.5em;
  text-align: center;
`;

const Headline = props => <H1 {...props} />;

Heading.propTypes = {
  top: PropTypes.string
}

[okonet]

@siddharthkp we actually do support styled-components in styleguidist with @component annotation. See https://github.com/styleguidist/react-styleguidist/pull/657

[okonet]

Apparently there is an ongoing work to support this natively in react-docgen: https://github.com/reactjs/react-docgen/pull/352