Simorgh - Storybook Upgrade

[ryanmccombe]

Part of #9198

Overall change:
Upgrade to latest version of Storybook.

Code changes:

• Add the a11y plugin and viewport plugin to package.json - we seem to be trying to use these in the storybook config, but they were never installed, so this never worked. This PR now correctly shows the "A11y" tab in storybook.
• Install addon-controls - the replacement for addon-knobs.
• _Install addon-docs - we appear to be trying to use addon-notes in some stories to populate the docs tab with the contents of a markdown file - eg

  simorgh/src/app/components/MediaPlayer/index.stories.jsx

  Line 10 in 935c898

  import notes from './README.md';

  , but the plugin is never installed or added to the config, so this never worked. add-on notes is now stale - addon-docs seems preferred

---

• I have assigned myself to this PR and the corresponding issues
• I have added the cross-team label to this PR if it requires visibility across World Service teams
• I have assigned this PR to the Simorgh project
• (BBC contributors only) This PR follows the repository use guidelines

Testing:

• Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)
• If necessary, I have run the local E2E non-smoke tests relevant to my changes (CYPRESS_APP_ENV=local CYPRESS_SMOKE=false yarn test:e2e:interactive)
• This PR requires manual testing

[HarveyPeachey]

Nice catch on the plugin fixes!

[HarveyPeachey]

Does this need to be changed to 6.3.1? When I checkout the branch and run yarn and then yarn run storybook, I get a notification in the terminal saying A new version (6.3.1) is available!

[HarryVerhoef]

Nice one 🚀 I think they've just released 6.3.2 so may be worth bumping again, but I'm sure 6.3.1 is fine too

[andrewscfc]

Thanks for doing this upgrade 👍

So to make sure I understand we updating to the latest stable version of Storybook 6 to solve security problems?

I thought we were going to upgrade to a Storybook 7 rc to get around the emotion support problems too? Looks like that isn't finished though judging by this issue: storybookjs/storybook#13491

[andrewscfc]

I guess these are the various pinned dependencies we had to avoid security issues that are no longer needed?

[ryanmccombe]

Yep :)

[ryanmccombe]

So to make sure I understand we updating to the latest stable version of Storybook 6 to solve security problems?

Storybook 6.3 was the RC version at the time we had that call - it is now stable. I don't think a 7.0 RC is available yet, unless I'm missing something - https://www.npmjs.com/package/@storybook/react

[ryanmccombe]

This does seem to have caused 2 stories to stop working - the next PR is a rewrite of all stories, however, so will see if this is still an issue then. Confirmed the components still work, so the problem is restricted to storybook