CRDCDH-2458 Setup Storybook

[amattu2]

Overview

This PR adds storybook to our repository, which required a few small supporting code changes. Additionally, I created stories for some components, mostly to use as a reference for future stories. We can adjust the integration at any point (e.g. adding new addons), but I think this is a decent baseline.

Note

1. Storybook does support being deployed as a static build (just like react), but we don't really have any way to create feature deployments for each branch ATM (e.g. like Cloudflare pages). If feature deployments are supported in the future, I'd like to have a separate deployment for our stories
2. Chromatic can be used to catch visual regressions automatically, but the free tier has limited builds per month, so I'm just keeping it limited to running new builds on each release/main branch. Depending on whether we like using storybook, we can look into enabling that on each PR

Note

To run storybook locally and interact with it:

npm run storybook

Some notable stories:

• Navigation / Header – This supports toggling different user permissions via storybook controls
• Dialogs / API Token – This shows the usage of Apollo MockedResponse within stories, just like in tests
• Submission Requests / Cancel-Restore Button – Simple documentation for each story inferred from comments

Change Details (Specifics)

• Add storybook and some addons that benefit us (Accessibility, Apollo, etc)
• Add Storybook ESLint rules
• Migrate /docs markdown documents to mdx (markdown with jsx) and integrate with storybook
• Fix ESLint from triggering import/no-extraneous-dependencies for development dependencies
• Setup basic Chromatic GitHub action
• Adjust our Jest CI script to ignore stories when computing coverage

Related Ticket(s)

CRDCDH-2458

[coveralls]

Pull Request Test Coverage Report for Build 13771417671

Details

• 3 of 6 (50.0%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.008%) to 60.271%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/env.ts	3	4	75.0%
src/layouts/index.tsx	0	2	0.0%

Totals
Change from base Build 13771365852:	-0.008%
Covered Lines:	4374
Relevant Lines:	6838

---

💛 - Coveralls