Install Storybook and write first story

[scotthallock]

Overview

This PR adds storybook to DockerPulse (in the /ui folder).

The npx storybook@latest init command was used to install storybook: https://storybook.js.org/docs/react/get-started/install

To run storybook:

cd ui
npm run storybook

This will compile and serve a development build of the Storybook that reflects the source code changes in the browser in real time.

Example story files were deleted from the installation, and I created our first story for the NavBar component.

[patrickv77]

Approved but just a small observation:

Across this PR, the export statements are uniform, but they are different from the format we've been using across the project. I'll leave it up to you to decide if it is worth it to maintain uniformity in regards to the export statements.

[scotthallock]

Across this PR, the export statements are uniform, but they are different from the format we've been using across the project. I'll leave it up to you to decide if it is worth it to maintain uniformity in regards to the export statements.

Good point, and I did look into this which led me down a little TS rabbit hole. Here's what I learned:

export default someFunction() { ... } is what we are using on other files (especially the react components), but in this PR we are primarily exporting objects, not functions.

Here's a really good discussion on this exact topic: microsoft/TypeScript#13626

You can't default export a named object:

While this syntax is valid, it is type-casting the object and therefore you purposefully lose type safety: