Storybook 7 upgrade

[jattasNI]

Pull Request

🤨 Rationale

We want to be on the latest storybook version because it fixes issues we've had with dependencies and it enables more powerful docs pages via mdx and Component Story Format enhancements.

Notable changes:

• landing page uses correct fonts and errors in console are gone (fixing Storybook Getting Started page has styling issues #825 and Storybook home page is showing reference image at 2x size #943 properly)
• no more Docs tab. Each story group has a docs page under it instead.
• XD previews are gone (feature was deprecated)
• Actions not working yet and some code previews have stopped working; see "Follow ups" below

👩‍💻 Implementation

Following the upgrade guide didn't work very well because it is buggy with a monorepo. Fred's general strategy was to run the upgrade command from within nimble-components then delete the node_modules and package-lock.json that it creates there, then re-install everything from the root. The migration tool is responsible for the changes to:

1. storybook configuration files
2. package.json
3. renaming types like Story -> StoryFn and storyName to name
4. deleting the withXD decorator which is no longer supported

Beyond that there were a few other manual changes:

1. establish static dependencies on components needed by each story. Storybook seems to have gotten more aggressive about compiling away unneeded components so if something isn't imported, it won't be found and components won't render correctly. This meant:
   1. replacing a few literals for element tag names in stories with the elementTag export
   2. updating the nimble-menu to explicitly depend on nimble-anchored-region (see comment on menu/index.ts)
2. Enable 'autodocs' for component and token stories but disable it for test stories
3. Add a patch file to work around [Bug]: 7.0.0-rc.8 Cannot find module 'lib/types/dist' in @storybook/html storybookjs/storybook#21820
4. simplified return types of story generation functions in storybook.ts in response to storybook type changes
5. regenerated landing page screenshot and annotation now that docs tab is gone

🔜 Follow ups in future PRs

Fixing these issues is tracked by #1146 . I tried upgrading to ts 4.7 but it didn't fix any of them.

• [Bug]: 7.0.0-rc.8 Cannot find module 'lib/types/dist' in @storybook/html storybookjs/storybook#21820
• Figure out why actions aren't firing when you click a button. Likely need this decorator but it's not present in current rc: [Bug]: 7.0.0-beta.55 Module "@storybook/addon-actions/decorator" has no exported member 'withActions' storybookjs/storybook#21308
• Some code previews (table, tooltip) are not available in the Docs page

🧪 Testing

Chromatic caught several diffs which resulted in the manual changes described above 👍. It's still showing new stories for the wafer map and button. (The wafer map one is caused by Chromatic getting confused when I tried renaming that story, ran a Chromatic build, and then reverted that change. I don't know the cause of the button change.) <- this went away on a subsequent build

Also manually spot checked many of the stories across browsers, especially ones that have workarounds in them like table and theme-aware tokens.

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.