Issues getting this to work

[davidfloegel]

Hi there,

I've installed the package for my nextjs application we're using to build a documentation app.

I've copied the example from the storybook but when I run my app, I'm getting these errors on the console:

Could not find property to go with default of kind in [object Object] prop types
Could not find property to go with default of value in [object Object] prop types
Could not find property to go with default of name in [object Object] prop types
Could not find property to go with default of kind in [object Object] prop types
Could not find property to go with default of value in [object Object] prop types
Could not find property to go with default of name in [object Object] prop types

The app itself doesn't display anything. Is there any way to debug & fix that?

Also: Is there a way to literally just get an array of the props rather than having to use pretty-proptypes?

Best

David

[danieldelcore]

Hi David 🙋‍♂️,

Would you be able to share some code with me so I can gather more context on your problem?

You might need to set up either the webpack-loader or the Babel plug-in (see read me for more info) to get it to work.

Regarding using it without pretty prop types, that's totally possible! The output of the loader / Babel plug-in is an object that pretty-proptypes simply renders out. You can look at that code to help you understand the object and how to render it out in your own application 😃

That being said, you can modify the appearance of pretty-proptypes with the component prop to suit your usecase / design. That's where I would recommend you start before trying to implement your own.

Let me know how you go, happy to help 😀

[davidfloegel]

Hi Daniel 👋🏽

Thanks so much for your response!

I've just actually set up a new project with next and I think I figured out what I was doing wrong...

All our components have the structure:

const MyComponent: React.FC<Props> = () => (

)

Whereas, in your example it's:

const MyComponent = (props: Props) => (

)

When I change my component signature to the latter it works just fine. Is there a way to get the first syntax to work at all? Since we have roughly 50 components using that syntax, it'd be a bit of a ball-ache to change them all. // Edit: I did see there was an issue and a merged PR around that but it's not working for me...

I will have a look whether I can figure out how the parsing works - we have quite a neat layout idea for the prop-types table so I'll have to build my own :)

Also: If I extend my interface, i.e.

interface MyComponentProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  description?: string;
  variant: "default" | "error" | "warning";
}

The default props for buttons won't show up - am I missing something in my config?

Best wishes and thanks for the help!

David

[davidfloegel]

@danieldelcore Regarding being able to just use the output of the converter, what about allowing a render function to be passed in to the Props table? I've been trying to copy & paste what's happening in the pretty-proptypes package but no luck so far.

So I was thinking something like this could work?

<Props component={MyComponent}>
  {(props) => (
    <CustomPropsTable props={props} />
  )}
</Props>

What do you think?

[danieldelcore]

No worries at all, always happy to help!

FC

Yeah you've actually stumbled over something I've been meaning to fix! We currently have support for FC like this and not like React.FC:

import { FC } from 'react';

const MyComponent: FC<Props> = () => null;

I've just spun up a new issue to address that: https://github.com/atlassian/extract-react-types/issues/181 in the meantime if you could use the FC syntax that should hopefully unblock you 😄

Extends

That's new, I don't know what's happening there, it might be related to this issue though: https://github.com/atlassian/extract-react-types/issues/155 I'll investigate that 👍

Pretty-proptypes

Interesting suggestion! I think @declan-warn has been playing around with a similar idea in this PR: https://github.com/atlassian/extract-react-types/pull/179/files

As it is today though, if the overall layout of the pre-built prop tables are what you want, you can tweak the look of it using the components prop the i mentioned before like so:

<Props
  heading="My Cool Component"
  props={require('!!extract-react-types-loader!../MyCoolComponent')}
  components={{
   TypeMeta: (props) => <MyCustomTypeMetaComponent />
  }}
/>

Otherwise, like my previous suggestion, you might want to implement your own like this:

<MyCustomLayout
  props={require('!!extract-react-types-loader!../MyCoolComponent')}
/>

Here the raw data structure parsed by ERT will be sent directly to the props prop and you can use it to do whatever 😄

[davidfloegel]

@danieldelcore Ok most of my issues seem addressed! Thank you so much :)

FC

I can live with either way I think - so might just write a script that refactors React.FC to FC

Extends

I'll keep an eye on that issue! Thank you :)

Pretty-proptypes

I will have a play with the component override as that definitely would be the easiest way. However, we want to group & sort the prop types in a specific way so I'm not sure how far I'll get.

I can see how I've been an idiot trying to implement this myself since I clearly didn't read the docs properly on using

require('!!extract-react-types-loader!../MyCoolComponent')

One last question (I hope) though, if I may: It passes the props to my custom layout component, however it is the default props for the Avatar since types are not extracted during dev mode. That is fine - and I found the comment saying:

"extract-react-types is not being run in dev mode for speed reasons. If you need to
see prop types add the environment variable `FORCE_EXTRACT_REACT_TYPES`
eg:
- `FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>`
- `FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>`"

So I did exactly that, I created my .env.local file for next and put in

FORCE_EXTRACT_REACT_TYPES=true

However, now when I run my application, all I get passed through to props is

{ kind: 'program' }

I promise I dug through the issues and docs but I'm at a loss...

This is how I'm calling my custom table.

      <PropsTable
        props={require("!!extract-react-types-loader!./MyComponent")}
      />

And the component I'm using is this:

interface MyComponentProps {
  /**
   * Title of the button
   */
  title: string;
  /**
   * When hovering, this will be displayed
   */
  description?: string;
  /**
   * Which colour does the button have?
   */
  variant: "default" | "error" | "warning";
}

export const MyComponent = (props: MyComponentProps) => (
  <div>I am a component</div>
);

Best wishes and happy easter 🐰

[davidfloegel]

Hey @danieldelcore - thanks for the update to making React.FC work!! 🎉

I've just upgraded locally but I'm running into weird issues in our project...

Have a look on this video: https://drops.tray.io/2NuwzRQ8

If I don't actually access the props, it's fine. However, as soon as I add the parameter to the () the props disappear but I'm not getting any error/warning message.

Another issue seems to be that when a lib is outside of the project folder it can't read the types anymore. We're using NX and our project structure is like this:

repo
- apps
-- docs
--- props-table -> trying to access libs/uikit
- libs
-- uikit
--- our components

Is there any way you can help me with debugging? I'm happy to give those issues a go but not really sure where to start.