reactjs / reactjs/react-docgen
Better TS enum support
Open
Nobody has claimed this yet.
new feature
typescript
- Dominant language
- TypeScript
- Stars
- 3.8k
- Forks
- 316
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 4
Description
Reporting from https://github.com/storybookjs/storybook/pull/24165
Currently TS enums analysis is lossy:
enum ButtonType {
Button = 'button',
Reset = 'reset',
Submit = 'submit',
}
type ButtonTestProps = {
type?: ButtonType;
};
export const ButtonTest = (props: ButtonTestProps) => {
return <button {...props}>Test</button>;
};
Produces:
"tsType": {
"name": "ButtonType"
},
Compare this to a union:
type ButtonType = "button" | "reset" | "submit";
Which produces:
"tsType": {
"name": "union",
"raw": "\"button\" | \"reset\" | \"submit\"",
"elements": [
{
"name": "literal",
"value": "\"button\""
},
{
"name": "literal",
"value": "\"reset\""
},
{
"name": "literal",
"value": "\"submit\""
}
]
},
It would be fantastic if react-docgen could produce something similar for enums!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no files, tests, or entry points. Reproduce the enum and union examples from the report, then locate the TypeScript analysis path that produces the shown tsType objects. Done means enum members retain structured information comparable to the union output, with the relevant existing checks passing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100