search

equinor / design-system

The Equinor design system
MIT License
119 stars 65 forks source link

⬆️ Upgrade storybook 7.0 (previously mdx 2) #2514

Closed mimarz closed 1 year ago

mimarz commented 2 years ago

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 commented 2 years ago

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

mimarz commented 2 years ago

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 commented 1 year ago

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: bilde 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 commented 1 year ago

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

oddvernes commented 1 year ago

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)