Props auto complete does not support function component

Thanks for this great project!

I’m trying to apply playroom our own component library which is fully written in Typescript. Just notice that for Class component the props auto complete(popup in editor) works very well, but for functional component, it can render the component in UI, but no props popup.

I assume playroom use react-docgen-typescript to extract props definition from typescript files, I found an example in react-docgen-typescript’s Readme file:

import * as React from 'react';

/**
 * Grid properties.
 */
export interface GridProps {
    /** prop1 description */
    prop1?: string;
    /** prop2 description */
    prop2: number;
    /**
     * prop3 description
     */
    prop3: () => void;
    /** Working grid description */
    prop4: 'option1' | 'option2' | 'option3';
}

/**
 * Form Grid.
 */
export const Grid = (props: GridProps) => {
    return <div>Grid</div>;
};

There is no props popup for this component in UI.

[possibilities]

OK, I teased apart my own issue at least so posting back. Hopefully not too tangential/noisy from the OP.

When I publish my component library and deploy it’s accompanying docs website I also build a copy of playroom, etc. This works fine. All my props are autocompleted, both keys and values. All of my components export an interface… causing this to all work out-of-the box.

The problem I’m having is that I have another instance of playroom where I import components from 3rd party libraries as well as my own component library. Here autocompletion doesn’t work. This is all explained by the fact that react-docgen-typescript doesn’t support reading types from d.ts files. My component library exports types from the component tsx files but when I build it those are transpiled away and d.ts files are created (new to TS but assume this is typical).

I think it’d be best if playroom config took an option e.g. staticTypes that it would use if present rather than calling lib/getStaticTypes (see https://github.com/seek-oss/playroom/blob/master/lib/getStaticTypes.js).

I was able to generate the correct types pretty easily for my library, just need a way to load them. Would it be worthwhile to submit a patch? Happy to work on it.

Example of using getStaticTypes externally:

> cat ./generate-static-types.js
#!/usr/bin/env node
const getStaticTypes = require('playroom/lib/getStaticTypes')
const playroomConfig = require('./playroom.config')
const main = async () =>
  console.info(JSON.stringify(await getStaticTypes(playroomConfig), null, 2))
main()

> ./generate-static-types.js > ./static-types.json
> cat ./static-types.json| head -n 10
{
  "Column": {
    "width": [
      "content",
      "1/2",
      "1/3",
      "2/3",
      "1/4",
      "3/4",

[michaeltaranto]

Upgraded to use the latest docgen versions as part of #232, and functional components seem to be working.

Closed by #232