Make PropsTable capable of accepting manual prop entries

React Docgen is… imperfect.

But the PropsTable looks great. I’d love to manually maintain a props listing for the docs using PropsTable like this:

<PropsTable
  props={[
    {property: 'variant', type: 'enum', required: false, default: 'primary', description: 'Can also specify "secondary"'},
    // ... etc.
  ]}
/>

Thoughts?

[dfee]

Here is the solution (called SimplePropsTable): https://gist.github.com/dfee/856f78ad4182d079dafbba6c63992005

Practically speaking, it implements an interface that PropsTable could (should) take advantage of – so one day this could be built-in.

[wsmd]

I love the idea, @kentcdodds!

I’m currently working on a project that doesn’t use prop-types and is not statically typed either 😬. Having the ability to manually add prop definitions is definitely a great addition to Docz!

I started working on this idea, and made some very good progress!

Here are the results of what I have so far…

Given this markup:

<PropsTable
  props={[
    {
      property: "variant",
      type: {
        name: "enum",
        value: [
          { value: "primary" },
          { value: "secondary" },
          { value: "outline" }
        ]
      },
      required: false,
      defaultValue: {
        value: "primary"
      },
      description: 'Can also specify "secondary"'
    },
    {
      property: "disabled",
      type: {
        name: "boolean"
      },
      required: false,
      defaultValue: {
        value: "false"
      }
    }
  ]}
/>

The following is rendered:

---

It’s worth mentioning that Docz has some expectations around the component’s docgen info, so I started experimenting with some schema validation mechanism that I think would go hand in hand with this feature. This will:

• prevent the rendering logic from throwing cryptic errors in case the schema passed via props doesn’t match what Docz expects (a valid react-docgen data structure, that is).
• help developers debugging the invalid parts of the schema.

For example, when defining a prop of type enum, its value should be an array of objects that have a key value, like in the example above. The following will not be considered valid:

<PropsTable
  props={[{
    property: "variant",
    type: {
      name: "enum",
      value: ['primary', 'secondary']
    },
    // ...

In case it was entered, an error like this will be thrown :

Another example:

There’s still a lot of work to be done here, but I thought I’d share my proof of concept as well! 😅