docs: add storybook

[petermakowski]

Done

• add storybook with example stories for AppSideNavigation, Meter, TooltipButon, MachineActionFormWrapper
• include @storybook/addon-a11y for easy accessibility testing
• refactor AppSideNavigation
• extend HACKING.md docs
• export context providers from AppRoot as RootProviders (so that they can be used in storybook)

Rationale

This PR adds storybook to maas-ui to encourage component-driven development and good component design.

It allows to quickly preview various states of components acting as an interactive documentation and speeding up the development.

It's not using extensive customisation options or specifying separate variants for each type of component to keep things simple and minimize the maintenance burden.

For example, MachineActionFormWrapper is not added as separate Stories for each action (deploy, abort, etc.). This would have the benefit of them being displayed in the navigation on the left, but would require specifying each story manually. We can achieve the same thing by simply switching the "action" prop using storybook controls. These are added automatically and don't require any extra code.

What's not included

• Mocking of the API.
• Customisation of redux store/dispatching actions (will be added in the future). For that reason some of the machine actions may render unexpected results like an infinitely loading spinner.

QA

QA steps

• run yarn storybook
• verify you can view components and control their props via storybook controls

Screenshots

After

[webteam-app]

Demo starting at https://maas-ui-5162.demos.haus

[ndv99]

I really like this. I think the re-structure of the app side navigation is a really solid example for extracting component state from presentation, and a good basis for future improvements. LGTM!

[petermakowski]

I really like this. I think the re-structure of the app side navigation is a really solid example for extracting component state from presentation, and a good basis for future improvements. LGTM!

Thanks. Keep in mind that it's just the beginning. The shared MAAS UI Component Library is where the real work will happen in terms of refactoring and aligning with component design best practices.