docs: upgrade storybook to v7

[petermakowski]

Done

• docs: upgrade storybook to v7
• remove deprecated defaultValue from stories https://storybook.js.org/docs/react/api/arg-types#defaultvalue

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Run yarn docs locally and verify docs are displayed correctly

Fixes

Fixes: # .

Screenshots

[webteam-app]

Demo starting at https://react-components-995.demos.haus

[petermakowski]

All issues have been resolved and this is ready for review now @bartaz

[bartaz]

There seem to be some breaking changes in the styling that percy surfaces: https://percy.io/bb49709b/react-components/builds/31116305/

Looks like paragraphs are rendered inside some components from Storybook? Is this some weird way of applying markdown?

[bartaz]

Seems like this may be caused by this bug: https://github.com/storybookjs/storybook/issues/18921 There are some workarounds mentioned in the comments.

[petermakowski]

Seems like this may be caused by this bug: storybookjs/storybook#18921 There are some workarounds mentioned in the comments.

@bartaz This seems to be correct as in mdx files each new line produces a new paragraph. I'll update this PR to conform with mdx interleaving rule https://mdxjs.com/docs/what-is-mdx/#interleaving

Long term solution for this would be to move over to the new CSF story format https://storybook.js.org/docs/react/api/csf

[petermakowski]

@bartaz I fixed the failing stories manually and created an issue to follow this up and use the latest storybook story format: https://github.com/canonical/react-components/issues/1001

[petermakowski]

Seems that defaultValue has been deprecated the in latest storybook as well, I had to make more changes to fix components docs that weren't displayed with intended values. https://storybook.js.org/docs/react/api/arg-types#defaultvalue