ETT-260: upgrade to storybook 9

[carylwyatt]

This was a pretty significant upgrade for storybook, and we got some great new features out of it (visual testing locally and accessibility testing).

Some deprecated add-ons were removed, storybook-test was swapped for addon-vitest (hooray!), and there's a new chromatic add-on for visual testing locally in the browser.

I ran into some issues with storybook rendering our styles during the production build. Everything looked fine in the local storybook (i.e. npm run storybook which loads at localhost:6006), but when the build ran for chromatic, none of the styles were loading (example storybook build on chromatic). We've had issues with bootstrap styles not loading in storybook in the past, but absolutely none of the styles loading was wild. I read many, many pages of documentation and github issues/stack overflows, and in the end it made the most sense to just inject a <link rel="stylesheet"> with our full stylesheet directly into the iframe of storybook. I created a vite custom plugin (in .storybook/main.js) to do exactly that.

Currently, all our stories need a new baseline because of the change in default screen sizes. I'm going to see if I can't clean that up and get the stories to match our current baseline, because that's really annoying.

There shouldn't be any change in our stories outside of swapping old syntax for new.

[carylwyatt]

Yesterday when I ran npm run test locally, the 13 (?) firebird vitest tests were passing. But now it's trying to run vitest against storybook so some configuration change must've happened. I'll get that sorted, too.

[carylwyatt]

The tests are passing, but the visual diff is off because the viewports were updated. The way viewports are imported and applied changed in version 9, so I probably just need to tinker with those settings. See what I'm talking about here: https://www.chromatic.com/review?appId=656a2bfa011def621f569319&number=132&type=linked&view=changes

[carylwyatt]

....aaaaand now I need to update the github action to only take snapshots on PR 🥴 the local visual tests are nice, but they send the snapshots to chromatic which just ate up all our snapshots for the month (from an email):

90% of monthly free snapshots used
During the period starting November 1st, 2025 ending December 1st, 2025, hathitrust used 90% of monthly free snapshots. If you reach the free snapshot limit, UI review and testing will be affected. Update plan to get continuous service and expand test coverage.