3 - Storybook Setup

[MellyGray]

What this PR does / why we need it:

This PR configures Storybook to be used in the SPA development. Storybooks allows to render each component individually to develop them without being attached to a page, this allows a better development of the components since they are actually uncoupled from other components or pages.

Storybook also allows an easy setup for accessibility tests with the a11y addon.

For Storybook example purposes the HelloDataverse.tsx component has been edited to have a Header.tsx component. This Header will be edited in the future to really match the Dataverse design but for the moment it serves as an example of how to integrate Storybook in the UI development workflow.

Which issue(s) this PR closes:

Closes #3

Special notes for your reviewer:

Changes

• Storybook added to the project
• Headers.tsx and Button.tsx components added to serve as examples for the Storybook use. They may be reused for the SPA real pages in the future
• Header, Button and HelloDataverse stories added to the Storybook to test the different states of the components such as Log in and Log out
• HelloDataverse.tsx component edited to have the Header.tsx component, just for example purposes
• test Github workflow edited to run also the Storybook tests, to check if Storybook is still working and to run the accessibility tests

Disclaimer about this console error

You'll see this error message in the console when accessing Storybook.

Stoybook is working on it but still there is no solution for the message, however it shouldn't affect Storybook functionalities

Suggestions on how to test this:

Install node v19 and npm v9.

Run npm install

Run npm run storybook and go to http://localhost:6006 to see the Storybook page

Run npm run test-storybook to run Storybook tests

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Hello Dataverse with Header screen If you cannot access the screen please contact melinahernandez@theagilemonkeys.com

Is there a release notes update needed for this change?:

Storybook added to the project

Additional documentation:

Dataverse - SPA Development Strategy

[rtreacy]

Looks good