Launchpad: Enable use storybook on launchpad package

[gabrielcaires]

Related to #87192 More context here paYKcK-45j-p2

Proposed Changes

• Install the storybook to render the components in an isolated context
• Install MSW to mock requests
• Create initial stories for the components: (Launchpad, LaunchpadInternal, Checklist, ChecklistItem.
• Enable the accessibility plugin

Testing Instructions

• Run yarn install after the clone
• Run yarn workspace @automattic/launchpad run storybook
• Play with the components
• Go to the launchpad internal component
• Select the "link-in-bio" option as I did on the video.

https://github.com/Automattic/wp-calypso/assets/38718/3114cb18-7b21-4b5c-8b25-936619a4de63

Pre-merge Checklist

• [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
• [ ] https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
• [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• [ ] Have you checked for TypeScript, React or other console errors?
• [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[matticbot]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-99345

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-99345&env=jetpack

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[andres-blanco]

Hi @gabrielcaires ! There's a lot of code here to review, and I am not sure of what is the intent here. Is there some context on what we are trying to achieve with this storybook? That will set me up better for testing.

[gabrielcaires]

@andres-blanco as I explained on the issue and the paYKcK-45j-p2 storybook is a very important frontend tool to enable use to work in components separately. It helps us to shape them easily and better.

Another useful like is: https://storybook.js.org/docs/get-started/why-storybook

[markbiek]

When I run yarn workspace @automattic/launchpad run storybook, Storybook launches but I get this error when I click on the LaunchpadInternal component.

I also get these errors on the command-line:

[markbiek]

I also noticed this among the messages that Storybook puts out:

Not sure if this is something we need to be concerned about or not.

[gabrielcaires]

@markbiek Oh it missing to run `yarn install ' after checking this branch. I thought we had something automatic to warn us about it. Testing instructions updated.

Regarding the second screenshot I will check this telemetry.

[markbiek]

@gabrielcaires Good find on disabling that telemetry!

[markbiek]

@gabrielcaires I'm not sure what the cause of that test failure is. It doesn't seem related to this PR so maybe it's worth rebasing trunk?