⬆️ Upgrade storybook 7.0 (previously mdx 2)

[mimarz]

MDX has been updated to 2.0 with big changes: https://mdxjs.com/blog/v2/

Storybook will eventually move to mdx-2, migration guide for experimental support: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#opt-in-mdx2-support

[oddvernes]

Is this done, since it is listed as a blocker for react 18?

[mimarz]

Is this done, since it is listed as a blocker for react 18?

Its not done, but had to be done after #2285 as it had upgrades and changes to Storybook config.

Should be good to do the migration now.

[oddvernes]

From what I can see, the experimental mdx2 support in storybook 6.5 is still problematic and I am not the only one getting styling issues. They say it will work better out of the box with storybook 7, So I think perhaps we should just wait for that and upgrade to storybook 7 whenever that is stable.

Things to note when upgrading:
mdx2 does not support html comments (<!--...-->) and should be replaced with {/*...*/}
<strong>word</strong> must be replaced with **word**
It also complained about newline here:

But hopefully that is fixed with the 7.0 implementation
Other than that it runs, but there are issues with styling, especially code blocks which just renders as black text currently.

[oddvernes]

Storybook 7.0 is now released. We'll probably wait for at least 7.1.0 (currently in alpha)

[oddvernes]

Note: in storybook 7, the ArgsTable has been deprecated and you are supposed to use <Controls /> instead, however this new block does not support subComponents. According to this issue ArgsTable will be kept around until a working replacement for subComponents is in place, so we should just keep using ArgsTable until then (which is called <PropsTable /> in our storybook to add some default values)