Docs -> Form -> Props -> Size property - Showing lodash 'without' function

[FranciscoGileno]

Steps

Go to Form documentation page. Look at Props table, size property.

Expected Result

Show the all possible sizes.

Actual Result

A lodash function: _.without(...)

Version

0.67.2

I would love to work on this. It seems to affect another pages as well. Can I have a try? Someone can point me to the right direction?

Thanks.

[levithomason]

Would love a PR :)

When running the docs, docs/app/docgenInfo.json is generated which describes all components and props. Our docs parse this JSON object.

Specifically, ComponentProps.js handles rendering the props table. You'd be looking for the renderEnums method in that component. It has logic for parsing enums, but not all enums.

For info setting up and running this project, see the CONTRIBUTING.md.

[FranciscoGileno]

Hi @levithomason, thanks for replying...

I spent some time having a look at it and I find this:

On docs/app/docgenInfo.json we pass three types of value to enums:

1. An array of objects:

"value": [
  {
    "value": "'horizontally'",
    "computed": false
  },
  {
    "value": "'vertically'",
    "computed": false
  }
]

2. A constant that represents an array:

"value": "SUI.FLOATS"

3. A lodash function:

"value": "_.without(SUI.SIZES, 'medium')"

Items 1 and 2 are covered on ComponentProps.js in the expandEnums method:

expandEnums = (value) => {
  const parts = value.split('.')
  if (parts[0] === 'SUI') {
    return SUI[parts[1]]
  }
  return value
}

But clearly it is not prepared to parse the lodash function.

Is that right? I might have missed something.

Solutions

Since Eval is dangeours and slow I think we have to come up with another alternative.

I did not find anything good enough yet.

One solution would be to change how we represent constant arrays(without some item) in the docs/app/docgenInfo.json.

"_.without(SUI.SIZES, 'big', 'massive')" would become something like: SUI.SIZES:without['big', 'massive'], so we could implement the logic for parsing this, but honestly I think this is very limited and buggy.

Any thoughts?

[levithomason]

The simplest way would be to inline the literal values in every array, though, that is a lot of repetition.

We use our own custom gulp plugin for parsing the react-docgen output. It would be somewhat safer to eval the json at that time as it is only done server side. That way, the output json would be an already parsed array.