Upgrade to Storybook 7

[daniel-heppner-ibigroup]

This PR upgrades Storybook to Storybook 7, along with a host of other related upgrades.

• Upgrades React to 18
• Removes storyshot and instead uses Jest snapshots in storybook-test-runner. This uses a hosted storybook and takes snapshots of the rendered DOM, so the rest of the changes focus on making sure the storybooks render the same on any computer.

First of all, dates. We can't rely on current time or the computer's timezone to render stories, since those vary.

• Updates to a custom version of storybook-react-intl. (PR open soon to upstream my changes). This custom version allows specifying the Timezone to react-intl, so it is the same across computers and in CI.
• Adds a new Storybook extension to mock the JS new Date(). In relevant stories (ItineraryBody) we now assign a fixed date.

There was also an issue with the elevation profile view, which uses an auto resize component to grab the page width. For some reason this was rendering differently in CI, likely due to differences between the headless browser used on Linux by Playwright and on MacOS. To solve this, I check the user agent and when we are in Playwright, we can mock this value and fix the width to a constant. This is in leg-diagram-preview.tsx.

AXE tests have also changed. The latest way to do this is with AXE-Playwright, which just runs in the Playwright tests. These tests have detected many more errors than before, which is causing the tests to fail. I don't know if these are false positives or if we had tests disabled before, or if the new checker has more rules.

The final issue that I still don't really know the cause of was that we had build problems when the default export of a component was different from the file name itself. We had many icons where the name of the icon began with Svg, while the filename did not. For example, export default SvgCar in Car.js. Webpack 5 (the new build system with Storybook 7). I fixed this by renaming the exports in all these files. I wish I had been able to find why this wasn't working, since I believe it should be.

For future reference, this is how I accomplished this rename:

❯ find . -type f -execdir sed -ibak "s/Svg[^ ;]*/$(basename {} .js)/" {} \;  
❯ find . -type f -execdir sed -ibak "s/\.js//" {} \;                                                                                  
❯ rm *bak

[daniel-heppner-ibigroup]

This exclude was overriding the exclude from the extended config at the root level

[miles-grant-ibigroup]

Really excited about this. Great work

[miles-grant-ibigroup]

Why was this removed

[daniel-heppner-ibigroup]

bad merge maybe?

[binh-dam-ibigroup]

Could you check consistency in using the story parameters to disable storyshots? Sometimes they are applied component wide, other times they are applied for each story.

[binh-dam-ibigroup]

Does that mean that OTP-RR will have to use React 18 once merged?

[daniel-heppner-ibigroup]

I think so, good point. I'll get that PR ready.

[binh-dam-ibigroup]

Note that this is to accommodate tests only, and that no release will be triggered for this package.

[binh-dam-ibigroup]

Note that this is to accommodate tests only, and that no release will be triggered for this package.

[binh-dam-ibigroup]

I noted the fixcommit for this change, which will trigger a release for this package.

[binh-dam-ibigroup]

Note that this is to accommodate tests only, and that no release will be triggered for this package.

[binh-dam-ibigroup]

Note that this is to accommodate tests only, and that no release will be triggered for this package.

[daniel-heppner-ibigroup]

Thanks for the feedback on consistency of disabling storyshots. I have moved all of them into the default export and got rid of the disableStoryshots variables since they're only used in one place now.

[binh-dam-ibigroup]

Going ahead and approving. That's a needed upgrade.

[binh-dam-ibigroup]

Nit: Sort attributes

[daniel-heppner-ibigroup]

oh oops, I forgot to do this.