UI: Fill out the styleguide

[DingoEatingFuzz]

The styleguide (only present in dev builds) is essentially a dictionary of every style, pattern, and component in the UI.

It has been around since day one, but it has never fully represented the full breadth of the app code...

...until now 🎉 🎉

Pages added

1. Diff viewer
2. Dropdown
3. Timeline
4. Gutter menu
5. Header
6. Inline definitions
7. JSON viewer
8. Log stream
9. Metrics
10. Page tabs
11. Page title
12. Search box
13. Tables
14. Attributes table
15. Accordion
16. Alerts
17. Two-step button

---

Having all of this styleguide code adds a non-trivial amount of weight to the compiled assets. Weight that can't even be utilized in production builds.

This PR now also filters styleguide-specific components out of production builds.

Here are some build stats:

Master branch

File sizes:
 - dist/assets/nomad-ui.js: 358.49 KB (51.01 KB gzipped)
 - dist/assets/nomad-ui.css: 194.72 KB (28.54 KB gzipped)
 - dist/assets/vendor.js: 1.08 MB (276.58 KB gzipped)
 - dist/assets/vendor.css: 0 B
 - dist/ember-fetch/fastboot-fetch.js: 283 B (199 B gzipped)

This branch, no filtering

File sizes:
 - dist/assets/nomad-ui.js: 452.31 KB (64.13 KB gzipped)
 - dist/assets/nomad-ui.css: 195.08 KB (28.62 KB gzipped)
 - dist/assets/vendor.js: 1.08 MB (276.58 KB gzipped)
 - dist/assets/vendor.css: 0 B
 - dist/ember-fetch/fastboot-fetch.js: 283 B (199 B gzipped)

This branch, with filtering

File sizes:
 - dist/assets/nomad-ui.js: 331.68 KB (48.05 KB gzipped)
 - dist/assets/nomad-ui.css: 195.08 KB (28.62 KB gzipped)
 - dist/assets/vendor.js: 1.08 MB (276.58 KB gzipped)
 - dist/assets/vendor.css: 0 B
 - dist/ember-fetch/fastboot-fetch.js: 283 B (199 B gzipped)

The numbers in raw are kinda hard to look at, so here are the actual deltas:

Size reduction from filtering out styleguide code:

Branch	Reduction
From this branch	120.63 KB (16.08 KB gzipped)
From master	26.81 KB (2.96 KB gzipped)

Screenshot

It doesn't make sense to capture everything in a screenshot, but here's a preview:

[johncowen]

Had a quick look in the app, looks nice!

Couple of observations:

1. faker might be nice here?
2. At first glance at least, seems like an awful lot of code to write. Is there anyway this could be done without having to write so much extra code?

TIL ember-cli-funnel, would have been handy for me a few weeks back 😄

[DingoEatingFuzz]

faker might be nice here?

Could be. I opted for tailored data to make the examples more realistic.

At first glance at least, seems like an awful lot of code to write. Is there anyway this could be done without having to write so much extra code?

Although there is a lot of code, there isn't a lot of boilerplate. There might possibly be ways to generate a styleguide from components, but it would be especially difficult to do without having typed parameters.

Even if this code was entirely typed so appropriate values could be procedurally passed to components, I worry that it would have a lot of signal to noise.

My gut says that even though this is a lot of code when presented with it all at once like this, it isn't unreasonable. Bear in mind that this is documentation for design and programming work that has already been done in a bespoke fashion.

I'm open to suggestions on how to improve this, and I think this (or something like it) is critical to the success of a design system.

[github-actions]

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.