feat: Storybook7 Upgrade

[scotttjob]

Motivations

Storybook6 is out of date. We needed to move to Storybook7. This gets us there.

Changes

Upgraded Storybook6 to Storybook7

Testing

Click on everything inside Storybook and make sure everything is 1:1 with prod.

This is a tedious, manual check. I've gone through things many times myself, but if you're reviewing this I would love a dig around to find any differences. I've tried my best to make things line up 1:1 but in some cases there are minor differences that can't be avoided.

Old Outstanding Issues (these have been resolved)

1. ~~Our <details> sections in our MD files (the README) and some of our <table>s are not being parsed/rendered properly in the new MDX2 world with markdown-to-jsx. We're using the Storybook provided Markdown component, but it's trying to convert those HTML tags to JSX and it seems to be failing in the process. Need to figure out a path forward here. It might unfortunately be to duplicate the content as moving the <details> blocks directly into the mdx file renders perfectly.~~ (I unfortunately had to recode our

   sections as just normal sections. MDX is moving away from GFM and parsing HTML in general. If you can find another solution to this problem, I am interested in contributions)

2. ~~The image at the top of the README for circleCI is broken. It's a valid MD image link, but markdown-to-jsx doesn't like it. If you import the MD content directly into the mdx file it works fine, but when you pass it through the provided Storybook Markdown component (like with details and table) it doesn't work.~~ (I added a custom renderRule in our MarkdownWrapper. It's ugly, but this is a legit bug in the rendering library so the ugly fix is necessary until they fix it)

3. ~~The MarkdownWrapper component is currently a bunch of differently things cobbled together from .storybook into docs (copying was easier to prove that this was going to work). Before moving this to prod I'd like to clean up that component and see if we can do things in a neater way (import components from .storybook into docs without error)~~ (It's been cleaned up, and context/documentation added but this could still use some more tidy up if anyone is interested)

4. ~~We need to rewrite the docs/stories for InputNumber and InputText. They use name= props on their component (see original/prod code) which Storybook is trying to render with their MDX2 changes. For now I've removed the name= props so they wouldn't generate an error (and crash the page) but we should find a way to get those back in.~~ (Turns out you just needed to wrap these uses with a <Story> component with a name. That prevents Storybook from trying to render out a story based on the name prop)

5. ~~DataList. We need to rewrite the stories for this one. This component 'renders' in the stories, but it causes the tab to crash which is probably not ideal. I did not debug this one as we should just rewrite the docs in mdx2 format which should alleviate this issue (and we need to do it anyway).~~ (I rewrote the stories. Wasn't too bad. Much faster to load now)

6. ~~There are a few changes in this PR that is just me removing HTML comments in markdown files. I think we just need to wrap those in comments in JS/React style comments {/** **/}, but didn't want to spend my timebox time on that problem. The straight HTML comments cause crashing errors.~~ (I tried wrapping in the JS style comments, but our auto-linter then tries to escape them. So I've just removed the commented out blocks)

7. ~~Upgrading to the latest rollup in the design folder (required for this upgrade, errors otherwise) I believe has caused us to generate a bunch of blank css.d.ts files on build for the main/foundation css files which then generate errors on commit/start because they're blank. As a workaround I've put an empty variable in them which makes everything happy but is not a good long-term solution. I would rather uncover the issue under the hood and fix things but I did not have the time to dig in because of my time-box.~~ (I went back and removed the d.ts files and they don't seem to be generating anymore).

---

In Atlantis we use Github's built in pull request reviews.