Storybook

[illume]

Storybook

This creates stories for many of the frontend components. Along the way this makes some improvements and fixes some issues discovered.

cd frontend && npm install && npm run storybook

Here is a summary of changes:

• Typing issues were fixed whilst converting from JavaScript specs to TypeScript stories. Providing example input to components stresses the types more allowing the typechecker to find more issues.
• Multiple different states are added for the stories, not just one. For each component you should be able to see different states the component can be in now inside the storybook. This also increases the test/type coverage.
• Component interface documentation. Many of the component prop interfaces are documented where it makes sense. (So they are shown on hover in IDE and inside storybook).
• Replaces spec tests which were mostly 'does it crash when rendering' and tests with storyshot snapshot tests. We get snap shot testing for free with storyshots.
• Uses ComponentName.tsx filename for ComponentName. (Following react convention. It's hard to tell which <Item> in the react dev tools, and finding the component name can be quicker if it is the filename. If you have several Item or Index open in your editor, then each tab grows longer to include the path and it's hard to see which is which).

• Separates Pure presentational components with state and effects mostly in a higher level container/wrapper component. See more about this pattern in the storybook presentational pages documentation. This reduces the complexity of larger components especially, because it divides the logic into two pieces.
• Uses Context for some API modules to allow reliably mocking, and make the stores be initialized when used not when imported.
• Removes redundant js folder (also for consistency with headlamp and other CRA apps). Also follow Headlamp a bit with lower case folder names ("common" and "layouts") which are not components so should not be capitalized.
• Moves locale based date time handling into i18n/dateTime and make date use consistent TZ and formatting defaults under test (different platforms can have different default locales and TZ).
• Adds icons to repo. (because it's inconvenient with formatting and git, and there's no reason really to generate them all the time). Going forward svg files should live inside their component folder.
• Adds frontend coverage testing to make test, and to CI. The statement test coverage percentage is currently 35% (up from 25% before this PR).

How to use

To run the storybook:

cd frontend
npm install
npm run storynook

To test with the storybook:

cd frontend
npm install
npm run test

Testing done

• no new console error logs in when running the frontend
• no console error logs in each storybook component
• no network connections made from the storybook

[illume]

This is rebased on the new proof-of-concept3 branch(which is itself up to date with main). Added a few more bug fixes in there related to timezones mostly along the way.

[joaquimrocha]

Left a few comments. I would like to understand why we should repeat the context/area as part of the component names when we have them in the folder.

[illume]

This was rebased against main, and is ready to review again.

[joaquimrocha]

I still don't love the import ConfirmationContent from '../../components/Common/ConfirmationContent'; ->
import ConfirmationContent from '../../components/common/ConfirmationContent/ConfirmationContent
changes and think that if we had introduced also an index.tsx for it, we'd avoid having to modify so many files + having the repetition on the imports.

[illume]

I filled all the common/ and layout/ folder components with index.tsx.