CMSgov
[NO-TICKET] Upgrade React types to fix Storybook 8 branch
Summary
- Started out by upgrading the React types to the latest, trying to match
@types/reactand@types/react-domas close as possible and made sure it was consistent everywhere - Then I started trying to knock out the 109 TypeScript errors
- I found partway through that many of them could be reduced by cleaning up the
yarn.lockfile manually to get rid of old entries - I went back and reverted a few of my changes, but many of them were actually necessary
- I changed the way the Dialog and Drawer stories are organized so that none of them pop up automatically. I then went back and added browser interaction tests to get the screenshots we want. Turns out that we were missing dialog screenshots for a while.
How to test
yarn type-checkyarn storybook- Anything else you can think to check
Checklist
Planning to merge it into the other branch, and I think we'll want to put that branch into v11
Status update:
6811f4b shows that there were some significant regressions in Storybook's ability to infer TypeScript types and document them. Instead of the type for Badge size being listed as big (only supports big), it is now reported as literal. For string | React.ReactNode, it only says union. Instead of type being checkbox and radio, it’s union. Instead of ReactNode for React.ReactNode, it prints out as ReactReactNode. Neither are the args tables showing inherited properties anymore from things like UseHintProps. That last one's a big deal. Overall, the prop tables in the Storybook docs are a much less accurate representation of our props, which makes this dead in the water for now.
I also did some investigating into the yarn lockfile changes, and I made sure that all the "docgen"-related packages were either going up in version number or staying the same, just to rule out the possibility that we might literally be going backwards.
Status update: This is ready for review. I won't link to it here because GitHub will backlink it, but I added a feature to react-docgen-typescript that will allow for sorting the order of union type members. It hasn't been released yet, but really it doesn't need to block this pull request, as it is a separate issue.
Doh: I guess I forgot that the main reason I went off on that rabbit trail right now is that the CI tests generate a different sort order for union type members than my local machine does! If I remember correctly, I also tried running it in the docker container and still got different results on Jenkins. Maybe this is still dead in the water until we can get that fix.
That's a good idea, I'm cool with merging it and documenting it there. I don't see a reason that it needs to be separate.
That's a good idea, I'm cool with merging it and documenting it there. I don't see a reason that it needs to be separate.
Should we ask the new team which they'd prefer or go ahead and merge?
On second thought, I think the background knowledge required to have an opinion on what this PR changes vs the base PR is enough that we should just decide ourselves. I'd argue that the type versions are now more understandable (both on v18 instead of v17 and v18 between react and react-dom). I'm just going to merge it.