search

seek-oss / playroom

Design with JSX, powered by your own component library.
MIT License
4.45k stars 183 forks source link

Docs to show all prop values with noErrorTruncation #220

Closed jesstelford closed 2 years ago

jesstelford commented 3 years ago

This was an interesting one!

react-docgen-typescript calls TypeScript which returns a comma delimited string of strings representing the possible types. This string was passed back to Playroom, which then used a regex to snip out anything that wasn't explicitly a match for essentially "(.*)".

The end result was TypeScript would return strings like:

{
    "name": "\"transparent\" | \"current\" | \"black\" | \"white\" | \"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" |
  \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | ... 5 more ... | und
  efined"
}

(Note the ... 5 more ...)

And Playroom would end up with an array of:

[
  "transparent",
  "current",
  "black",
  "white",
  "whiteAlpha",
  "blackAlpha",
  "gray",
  "red",
  "orange",
  "yellow",
  "green",
  "teal",
  "blue",
  "cyan",
  "purple",
  "pink",
  "linkedin",
]

But when using noErrorTruncation, Typescript will return the full set of types:

{
  "name": "\"transparent\" | \"current\" | \"black\" | \"white\" | \"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" |
\"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"mes
senger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | undefined"
}

So Playroom gets the full array of possible values:

[
  "transparent",
  "current",
  "black",
  "white",
  "whiteAlpha",
  "blackAlpha",
  "gray",
  "red",
  "orange",
  "yellow",
  "green",
  "teal",
  "blue",
  "cyan",
  "purple",
  "pink",
  "linkedin",
  "facebook",
  "mes senger",
  "whatsapp",
  "twitter",
  "telegram",
]

The way TypeScript returns a comma delimited string of strings representing the possible types was very surprising! Why doesn't TypeScript return something more... structured?

This issue is particularly noticable in situations where sizing props are based on a scale:

{
  sizes: {
    "size-0": 0,
    "size-1": '1rem',
    "size-2": '2.5rem',
    "size-3": '4rem',
    ...
    "size-72: '400rem',
    "size-full": '100%',
  }
}

Most of the possible values would be missing due to the truncation

michaeltaranto commented 2 years ago

Thanks for pointing this out, its now the default way it works (sorry about not getting to this sooner).

Closed by https://github.com/seek-oss/playroom/pull/232