ui: Remove storybook, add docfy (#9831)

This PR removes storybook and adds docfy and uses docfy to render our existing README files.

This now means we can keep adding README documentation without committing any specific format or framework. If we eventually move to storybook then fine, or if we just want to remove docfy for whatever reason then fine - we will still have a full set of README files viewable via GitHub.

ui/packages/consul-ui/.docfy-config.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const autolinkHeadings = require('remark-autolink-headings');
+const refractor = require('refractor');
+const prism = require('@mapbox/rehype-prism');
+
+refractor.alias('handlebars', 'hbs');
+refractor.alias('shell', 'sh');
+
+module.exports = {
+  remarkHbsOptions: {
+    escapeCurliesCode: false
+  },
+  remarkPlugins: [
+    autolinkHeadings,
+    {
+      behavior: 'wrap'
+    }
+  ],
+  rehypePlugins: [
+    prism
+  ],
+  sources: [
+    {
+      root: path.resolve(__dirname, 'app/components'),
+      pattern: '**/README.mdx',
+      urlSchema: 'auto',
+      urlPrefix: 'docs/components',
+    }
+  ],
+};

ui/packages/consul-ui/.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
       files: [
         '.eslintrc.js',
         '.dev.eslintrc.js',
+        '.docfy-config.js',
         '.template-lintrc.js',
         'ember-cli-build.js',
         'testem.js',

ui/packages/consul-ui/.storybook/main.js

@@ -1,11 +0,0 @@
-/* eslint-env node */
-module.exports = {
-  "stories": [
-    "../app/**/*.stories.mdx"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-docs",
-    "@storybook/addon-controls",
-  ]
-}

ui/packages/consul-ui/.storybook/preview.js

@@ -1,4 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  layout: 'padded'
-}

ui/packages/consul-ui/app/components/app-error/README.stories.mdx

@@ -1,30 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-
-<Meta title="Components/AppError" />
-
-# AppError
-
-<Canvas>
-  <Story
-    name="Basic"
-    argTypes={{
-      status: {
-        defaultValue: '404',
-        control: {
-          type: 'select',
-          options: [
-            '404',
-            '403',
-            '500'
-          ]
-        }
-      }
-    }}
-  >{(args) => ({
-    template: hbs`<AppError @error={{hash status=status}} />`,
-    context: args
-  })}
-  </Story>
-</Canvas>
-

ui/packages/consul-ui/app/components/app/index.scss

@@ -11,7 +11,7 @@
 [role="banner"] > label {
   @extend %main-nav-horizontal-toggle-button;
 }
-.hashicorp-consul > input[id] {
+.app > input[id] {
   @extend %main-nav-horizontal-toggle;
 }
 %main-header-horizontal > div {

ui/packages/consul-ui/app/components/auth-dialog/README.mdx

@@ -1,7 +1,7 @@
 ## AuthDialog
 
-```handlebars
+```hbs
-<AuthDialog @dc={{dc}} @nspace={{}} @onchange={{action 'change'}} as |api components|>
+<AuthDialog @dc={{dc}} @nspace={{ns}} @onchange={{action 'change'}} as |api components|>
   {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
     <BlockSlot @name="unauthorized">
       Here's the login form:

ui/packages/consul-ui/app/components/auth-profile/README.mdx

@@ -1,6 +1,6 @@
 ## AuthProfile
 
-```handlebars
+```hbs
 <AuthProfile @item={{token}} />
 ```
 

ui/packages/consul-ui/app/components/consul/metadata/list/README.mdx

@@ -15,7 +15,7 @@ A presentational component for presenting Consul Metadata
 The following example shows how to construct the required structure from the
 Consul API using a `object-entries` helper.
 
-```handlebars
+```hbs
   <ConsulMetadataList @items={{object-entries item.Meta}} />
 ```
 

ui/packages/consul-ui/app/components/copy-button/README.mdx

@@ -1,7 +1,6 @@
-## CopyButton
+# CopyButton
 
-```handlebars
+```hbs preview-template
-{{! inline }}
 <CopyButton
   @value={{stringToCopy}}
   @name="Thing"

ui/packages/consul-ui/app/components/data-collection/README.mdx

@@ -1,6 +1,6 @@
-## DataSource
+## DataCollection
 
-```handlebars
+```hbs
 <DataCollection
   @search={{''}}
   @sort={{''}}

ui/packages/consul-ui/app/components/data-sink/README.mdx

@@ -1,6 +1,6 @@
 ## DataSink
 
-```handlebars
+```hbs
 <DataSink
   @sink="/dc/nspace/intentions/{{intentions.uid}}"
   @onchange={{action (mut items) value="data"}}
@@ -33,7 +33,7 @@ Behind the scenes in the Consul UI we map URIs back to our `ember-data` backed `
 
 ### Examples
 
-```handlebars
+```hbs
   <DataSink @src="/dc/nspace/intentions/{{intention.uid}}"
     @onchange={{action (mut item) value="data"}}
     @onerror={{action (mut error) value="error"}}
@@ -45,7 +45,7 @@ Behind the scenes in the Consul UI we map URIs back to our `ember-data` backed `
   {{item.Name}}
 ```
 
-```handlebars
+```hbs
   <DataSink @src="/dc/nspace/intentions/{{intention.uid}}"
     @data=(hash Name="New Name")
     @onchange={{action (mut item) value="data"}}

ui/packages/consul-ui/app/components/data-source/README.mdx

@@ -1,14 +1,14 @@
 ## DataSource
 
-```handlebars
+```hbs preview-template
 <DataSource
   @src="/nspace/dc/services"
   @loading="eager"
   @disabled={{false}}
-  @onchange={{action (mut items) value="data"}}
-  @onerror={{action (mut error) value="error"}}
 as |source|>
-  <source.Source @src="" />
+{{#each source.data as |service|}}
+{{service.Name}}<br />
+{{/each}}
 </DataSource>
 ```
 
@@ -38,7 +38,7 @@ Behind the scenes in the Consul UI we map URIs back to our `ember-data` backed `
 
 Straightforward usage can use `mut` to easily update data within a template using an event handler approach.
 
-```handlebars
+```hbs
   {{! listen for HTTP API changes}}
   <DataSource
     @src="/nspace/dc/services"
@@ -68,7 +68,7 @@ Straightforward usage can use `mut` to easily update data within a template usin
 
 A property approach to easily update data within a template
 
-```handlebars
+```hbs
   {{! listen for HTTP API changes}}
   <DataSource
     @src="/nspace/dc/services"
@@ -90,7 +90,7 @@ Both approaches can be used in tandem.
 
 DataSources can also be recursively nested for loading in series as opposed to in parallel. Nested DataSources will not start loading until the immediate parent has loaded (ie. it has data) as they are not placed into the DOM until this has happened. However, if a DataSource has started loading, and the immediate parent errors, the nested DataSource will stop receiving updates yet it and its properties will remain accessible within the DOM.
 
-```handlebars
+```hbs
 
   {{! straightforwards error/loading states}}
   {{#if error}}

ui/packages/consul-ui/app/components/debug/navigation/index.hbs

@@ -0,0 +1,3 @@
+  <li>
+    <a href={{href-to 'docs'}} target="_blank">Eng Docs</a>
+  </li>

ui/packages/consul-ui/app/components/event-source/README.mdx

@@ -1,6 +1,6 @@
 ## EventSource
 
-```handlebars
+```hbs
 <EventSource
   @src={{eventSourceObject}}
   @onerror={{action 'error'}}

ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs

@@ -147,6 +147,7 @@
 
     <:complementary-nav>
       <ul>
+          <Debug::Navigation />
           <li data-test-main-nav-help>
             <PopoverMenu @position="right" as |components|>
               <BlockSlot @name="trigger">

ui/packages/consul-ui/app/components/jwt-source/README.mdx

@@ -1,6 +1,6 @@
 ## JwtSource
 
-```handlebars
+```hbs
 <JwtSource @src={{url}} @onchange={{action 'change'}} @onerror={{action 'error'}} />
 ```
 

ui/packages/consul-ui/app/components/ref/README.mdx

@@ -21,7 +21,7 @@ This can be thought of as providing the public API for the component, the author
 
 Here we provide a public API for a form component whilst authoring.
 
-```handlebars
+```hbs
 {{! /components/form/index.hbs }}
 <form onsubmit={{action "submit"}}>
   {{yield (hash
@@ -36,7 +36,7 @@ Here we provide a public API for a form component whilst authoring.
 
 The user of the component now has access to the public API of the ember/glimmer `<Form>` component, in the same way that using the `{{ref}}` modifier gives the user access to the public API of native DOM elements (for example `<input {{ref this 'input'}}/>` / `this.input.focus()`).
 
-```handlebars
+```hbs
 {{! /templates/index.hbs}}
 <Form as |api|>
   <Ref @target={{this}} @name="form" @value={{api}} />

ui/packages/consul-ui/app/components/state-chart/README.mdx

@@ -1,6 +1,6 @@
 ## StateChart
 
-```handlebars
+```hbs
 <StateChart
   @chart={{xstateStateChartObject}}
   as |State Guard Action dispatch state|>
@@ -30,7 +30,7 @@ and 2 further objects:
 
 ### Example
 
-```handlebars
+```hbs
 <StateChart
   @chart={{xstateStateChartObject}}
   as |State Guard Action dispatch state|>

ui/packages/consul-ui/app/components/state/README.mdx

@@ -18,7 +18,7 @@ be shown.
 
 ### Example
 
-```handlebars
+```hbs
 <State @state={{state}} @matches="idle">
   Currently Idle
 </State>

ui/packages/consul-ui/app/components/toggle-button/README.mdx

@@ -16,7 +16,7 @@ Additionally, a `clickoutside` is currently included, so if the toggle is in an
 ### Methods/Actions/api
 
 | Method/Action |  Description |
-| --- | --- | --- | --- |
+| --- | --- |
 | `click` | Fire a click event on the ToggleButton/input which reverse the state of the toggle. |
 
 ### Example

ui/packages/consul-ui/app/components/token-source/README.mdx

@@ -1,6 +1,6 @@
 ## TokenSource
 
-```handlebars
+```hbs
   <TokenSource
     @dc={{dc}}
     @nspace={{nspace}}

ui/packages/consul-ui/app/instance-initializers/debug.js

@@ -0,0 +1,31 @@
+import ApplicationRoute from '../routes/application';
+let isDebugRoute = false;
+const routeChange = function(transition) {
+  isDebugRoute = transition.to.name.startsWith('docs');
+};
+const DebugRoute = class extends ApplicationRoute {
+  constructor(owner) {
+    super(...arguments);
+    this.router = owner.lookup('service:router');
+    this.router.on('routeWillChange', routeChange);
+  }
+
+  renderTemplate() {
+    if (isDebugRoute) {
+      this.render('debug');
+    } else {
+      super.renderTemplate(...arguments);
+    }
+  }
+
+  willDestroy() {
+    this.router.off('routeWillChange', routeChange);
+    super.willDestroy(...arguments);
+  }
+};
+export default {
+  name: 'debug',
+  initialize(application) {
+    application.register('route:application', DebugRoute);
+  },
+};

ui/packages/consul-ui/app/router.js

@@ -1,3 +1,4 @@
+/* globals requirejs */
 import EmberRouter from '@ember/routing/router';
 import { runInDebug } from '@ember/debug';
 import { env } from 'consul-ui/env';
@@ -197,6 +198,36 @@ if (env('CONSUL_NSPACES_ENABLED')) {
     dc: routes.dc,
   };
 }
+runInDebug(() => {
+  // check to see if we are running docfy and if so add its routes to our
+  // route config
+  const docfyOutput = requirejs.entries['consul-ui/docfy-output'];
+  if (typeof docfyOutput !== 'undefined') {
+    const output = {};
+    docfyOutput.callback(output);
+    // see https://github.com/josemarluedke/docfy/blob/904529641279975586402431108895713d156b55/packages/ember/addon/index.ts
+    (function addPage(route, page) {
+      if (page.name !== '/') {
+        route = route[page.name] = {
+          _options: { path: page.name },
+        };
+      }
+      page.pages.forEach(page => {
+        const url = page.relativeUrl;
+        if (typeof url === 'string') {
+          if (url !== '') {
+            route[url] = {
+              _options: { path: url },
+            };
+          }
+        }
+      });
+      page.children.forEach(child => {
+        addPage(route, child);
+      });
+    })(routes, output.default.nested);
+  }
+});
 export default class Router extends EmberRouter {
   location = env('locationType');
   rootURL = env('rootURL');

ui/packages/consul-ui/app/styles/debug.scss

@@ -0,0 +1,40 @@
+@import './base/reset/index';
+@import './base/index';
+@import 'prism-coldark-dark';
+
+.docs {
+  main {
+    background-color: white;
+  }
+  [class^='docfy'] {
+    margin-bottom: 1em;
+  }
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 1em;
+  }
+  h1 {
+    padding-top: 20px;
+    @extend %h100;
+  }
+  h2 {
+    @extend %h200;
+  }
+  h3 {
+    @extend %h300;
+  }
+  p {
+    @extend %p1;
+  }
+  table {
+    margin-bottom: 3em;
+  }
+  td {
+    font-weight: normal !important;
+    cursor: default !important;
+  }
+  tr:hover {
+    box-shadow: none;
+  }
+}

ui/packages/consul-ui/app/styles/prism-coldark-cold.scss

@@ -0,0 +1,317 @@
+/**
+ * Coldark Theme for Prism.js
+ * Theme variation: Cold
+ * Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
+ * @author Armand Philippot <contact@armandphilippot.com>
+ * @homepage https://github.com/ArmandPhilippot/coldark-prism
+ * @license MIT
+ */
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #111b27;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+  background: #8da1b9;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  background: #8da1b9;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #e3eaf2;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #3c526d;
+}
+
+.token.punctuation {
+  color: #111b27;
+}
+
+.token.delimiter.important,
+.token.selector .parent,
+.token.tag,
+.token.tag .token.punctuation {
+  color: #006d6d;
+}
+
+.token.attr-name,
+.token.boolean,
+.token.boolean.important,
+.token.number,
+.token.constant,
+.token.selector .token.attribute {
+  color: #755f00;
+}
+
+.token.class-name,
+.token.key,
+.token.parameter,
+.token.property,
+.token.property-access,
+.token.variable {
+  color: #005a8e;
+}
+
+.token.attr-value,
+.token.inserted,
+.token.color,
+.token.selector .token.value,
+.token.string,
+.token.string .token.url-link {
+  color: #116b00;
+}
+
+.token.builtin,
+.token.keyword-array,
+.token.package,
+.token.regex {
+  color: #af00af;
+}
+
+.token.function,
+.token.selector .token.class,
+.token.selector .token.id {
+  color: #7c00aa;
+}
+
+.token.atrule .token.rule,
+.token.combinator,
+.token.keyword,
+.token.operator,
+.token.pseudo-class,
+.token.pseudo-element,
+.token.selector,
+.token.unit {
+  color: #a04900;
+}
+
+.token.deleted,
+.token.important {
+  color: #c22f2e;
+}
+
+.token.keyword-this,
+.token.this {
+  color: #005a8e;
+}
+
+.token.important,
+.token.keyword-this,
+.token.this,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.delimiter.important {
+  font-weight: inherit;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.language-markdown .token.title,
+.language-markdown .token.title .token.punctuation {
+  color: #005a8e;
+  font-weight: bold;
+}
+
+.language-markdown .token.blockquote.punctuation {
+  color: #af00af;
+}
+
+.language-markdown .token.code {
+  color: #006d6d;
+}
+
+.language-markdown .token.hr.punctuation {
+  color: #005a8e;
+}
+
+.language-markdown .token.url > .token.content {
+  color: #116b00;
+}
+
+.language-markdown .token.url-link {
+  color: #755f00;
+}
+
+.language-markdown .token.list.punctuation {
+  color: #af00af;
+}
+
+.language-markdown .token.table-header {
+  color: #111b27;
+}
+
+.language-json .token.operator {
+  color: #111b27;
+}
+
+.language-scss .token.variable {
+  color: #006d6d;
+}
+
+/* overrides color-values for the Show Invisibles plugin
+ * https://prismjs.com/plugins/show-invisibles/
+ */
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before,
+.token.space:before {
+  color: #3c526d;
+}
+
+/* overrides color-values for the Toolbar plugin
+ * https://prismjs.com/plugins/toolbar/
+ */
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button {
+  color: #e3eaf2;
+  background: #005a8e;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus {
+  color: #e3eaf2;
+  background: #005a8eda;
+  text-decoration: none;
+}
+
+div.code-toolbar > .toolbar span,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+  color: #e3eaf2;
+  background: #3c526d;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight {
+  background: #8da1b92f;
+  background: linear-gradient(to right, #8da1b92f 70%, #8da1b925);
+}
+
+.line-highlight:before,
+.line-highlight[data-end]:after {
+  background-color: #3c526d;
+  color: #e3eaf2;
+  box-shadow: 0 1px #8da1b9;
+}
+
+pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
+  background-color: #3c526d1f;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers .line-numbers-rows {
+  border-right: 1px solid #8da1b97a;
+  background: #d0dae77a;
+}
+
+.line-numbers-rows > span:before {
+  color: #3c526dda;
+}
+
+/* overrides color-values for the Match Braces plugin
+ * https://prismjs.com/plugins/match-braces/
+ */
+.rainbow-braces .token.punctuation.brace-level-1,
+.rainbow-braces .token.punctuation.brace-level-5,
+.rainbow-braces .token.punctuation.brace-level-9 {
+  color: #755f00;
+}
+
+.rainbow-braces .token.punctuation.brace-level-2,
+.rainbow-braces .token.punctuation.brace-level-6,
+.rainbow-braces .token.punctuation.brace-level-10 {
+  color: #af00af;
+}
+
+.rainbow-braces .token.punctuation.brace-level-3,
+.rainbow-braces .token.punctuation.brace-level-7,
+.rainbow-braces .token.punctuation.brace-level-11 {
+  color: #005a8e;
+}
+
+.rainbow-braces .token.punctuation.brace-level-4,
+.rainbow-braces .token.punctuation.brace-level-8,
+.rainbow-braces .token.punctuation.brace-level-12 {
+  color: #7c00aa;
+}
+
+/* overrides color-values for the Diff Highlight plugin
+ * https://prismjs.com/plugins/diff-highlight/
+ */
+pre.diff-highlight > code .token.deleted:not(.prefix),
+pre > code.diff-highlight .token.deleted:not(.prefix) {
+  background-color: #c22f2e1f;
+}
+
+pre.diff-highlight > code .token.inserted:not(.prefix),
+pre > code.diff-highlight .token.inserted:not(.prefix) {
+  background-color: #116b001f;
+}
+
+/* overrides color-values for the Command Line plugin
+ * https://prismjs.com/plugins/command-line/
+ */
+.command-line-prompt {
+  border-right: 1px solid #8da1b97a;
+}
+
+.command-line-prompt > span:before {
+  color: #3c526dda;
+}

ui/packages/consul-ui/app/styles/prism-coldark-dark.scss

@@ -0,0 +1,317 @@
+/**
+ * Coldark Theme for Prism.js
+ * Theme variation: Dark
+ * Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
+ * @author Armand Philippot <contact@armandphilippot.com>
+ * @homepage https://github.com/ArmandPhilippot/coldark-prism
+ * @license MIT
+ */
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #e3eaf2;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+  background: #3c526d;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  background: #3c526d;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #111b27;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #8da1b9;
+}
+
+.token.punctuation {
+  color: #e3eaf2;
+}
+
+.token.delimiter.important,
+.token.selector .parent,
+.token.tag,
+.token.tag .token.punctuation {
+  color: #66cccc;
+}
+
+.token.attr-name,
+.token.boolean,
+.token.boolean.important,
+.token.number,
+.token.constant,
+.token.selector .token.attribute {
+  color: #e6d37a;
+}
+
+.token.class-name,
+.token.key,
+.token.parameter,
+.token.property,
+.token.property-access,
+.token.variable {
+  color: #6cb8e6;
+}
+
+.token.attr-value,
+.token.inserted,
+.token.color,
+.token.selector .token.value,
+.token.string,
+.token.string .token.url-link {
+  color: #91d076;
+}
+
+.token.builtin,
+.token.keyword-array,
+.token.package,
+.token.regex {
+  color: #f4adf4;
+}
+
+.token.function,
+.token.selector .token.class,
+.token.selector .token.id {
+  color: #c699e3;
+}
+
+.token.atrule .token.rule,
+.token.combinator,
+.token.keyword,
+.token.operator,
+.token.pseudo-class,
+.token.pseudo-element,
+.token.selector,
+.token.unit {
+  color: #e9ae7e;
+}
+
+.token.deleted,
+.token.important {
+  color: #cd6660;
+}
+
+.token.keyword-this,
+.token.this {
+  color: #6cb8e6;
+}
+
+.token.important,
+.token.keyword-this,
+.token.this,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.delimiter.important {
+  font-weight: inherit;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.language-markdown .token.title,
+.language-markdown .token.title .token.punctuation {
+  color: #6cb8e6;
+  font-weight: bold;
+}
+
+.language-markdown .token.blockquote.punctuation {
+  color: #f4adf4;
+}
+
+.language-markdown .token.code {
+  color: #66cccc;
+}
+
+.language-markdown .token.hr.punctuation {
+  color: #6cb8e6;
+}
+
+.language-markdown .token.url .token.content {
+  color: #91d076;
+}
+
+.language-markdown .token.url-link {
+  color: #e6d37a;
+}
+
+.language-markdown .token.list.punctuation {
+  color: #f4adf4;
+}
+
+.language-markdown .token.table-header {
+  color: #e3eaf2;
+}
+
+.language-json .token.operator {
+  color: #e3eaf2;
+}
+
+.language-scss .token.variable {
+  color: #66cccc;
+}
+
+/* overrides color-values for the Show Invisibles plugin
+ * https://prismjs.com/plugins/show-invisibles/
+ */
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before,
+.token.space:before {
+  color: #8da1b9;
+}
+
+/* overrides color-values for the Toolbar plugin
+ * https://prismjs.com/plugins/toolbar/
+ */
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button {
+  color: #111b27;
+  background: #6cb8e6;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus {
+  color: #111b27;
+  background: #6cb8e6da;
+  text-decoration: none;
+}
+
+div.code-toolbar > .toolbar span,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+  color: #111b27;
+  background: #8da1b9;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight {
+  background: #3c526d5f;
+  background: linear-gradient(to right, #3c526d5f 70%, #3c526d55);
+}
+
+.line-highlight:before,
+.line-highlight[data-end]:after {
+  background-color: #8da1b9;
+  color: #111b27;
+  box-shadow: 0 1px #3c526d;
+}
+
+pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
+  background-color: #8da1b918;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers .line-numbers-rows {
+  border-right: 1px solid #0b121b;
+  background: #0b121b7a;
+}
+
+.line-numbers-rows > span:before {
+  color: #8da1b9da;
+}
+
+/* overrides color-values for the Match Braces plugin
+ * https://prismjs.com/plugins/match-braces/
+ */
+.rainbow-braces .token.punctuation.brace-level-1,
+.rainbow-braces .token.punctuation.brace-level-5,
+.rainbow-braces .token.punctuation.brace-level-9 {
+  color: #e6d37a;
+}
+
+.rainbow-braces .token.punctuation.brace-level-2,
+.rainbow-braces .token.punctuation.brace-level-6,
+.rainbow-braces .token.punctuation.brace-level-10 {
+  color: #f4adf4;
+}
+
+.rainbow-braces .token.punctuation.brace-level-3,
+.rainbow-braces .token.punctuation.brace-level-7,
+.rainbow-braces .token.punctuation.brace-level-11 {
+  color: #6cb8e6;
+}
+
+.rainbow-braces .token.punctuation.brace-level-4,
+.rainbow-braces .token.punctuation.brace-level-8,
+.rainbow-braces .token.punctuation.brace-level-12 {
+  color: #c699e3;
+}
+
+/* overrides color-values for the Diff Highlight plugin
+ * https://prismjs.com/plugins/diff-highlight/
+ */
+pre.diff-highlight > code .token.deleted:not(.prefix),
+pre > code.diff-highlight .token.deleted:not(.prefix) {
+  background-color: #cd66601f;
+}
+
+pre.diff-highlight > code .token.inserted:not(.prefix),
+pre > code.diff-highlight .token.inserted:not(.prefix) {
+  background-color: #91d0761f;
+}
+
+/* overrides color-values for the Command Line plugin
+ * https://prismjs.com/plugins/command-line/
+ */
+.command-line-prompt {
+  border-right: 1px solid #0b121b;
+}
+
+.command-line-prompt > span:before {
+  color: #8da1b9da;
+}

ui/packages/consul-ui/app/templates/debug.hbs

@@ -0,0 +1,24 @@
+<App class="docs" id="wrapper">
+  <:main-nav>
+<DocfyOutput as |node|>
+  <ul>
+    {{#each node.children as |child|}}
+          {{#each child.children as |child|}}
+                {{#each child.pages as |child|}}
+                  <li>
+                    <DocfyLink @to={{child.url}}>
+                      {{child.title}}
+                    </DocfyLink>
+                  </li>
+                {{/each}}
+          {{/each}}
+    {{/each}}
+  </ul>
+</DocfyOutput>
+
+  </:main-nav>
+  <:main>
+    {{outlet}}
+  </:main>
+</App>
+

ui/packages/consul-ui/ember-cli-build.js

@@ -7,7 +7,9 @@ module.exports = function(defaults) {
   const isProd = env === 'production';
   const isProdLike = prodlike.indexOf(env) > -1;
   const sourcemaps = !isProd;
-  let trees = {};
+  const trees = {};
+  const addons = {};
+  const outputPaths = {};
   if (isProdLike) {
     // exclude any component/pageobject.js files from production-like environments
     trees.app = new Funnel('app', {
@@ -15,8 +17,24 @@ module.exports = function(defaults) {
         'components/**/pageobject.js',
         'components/**/*.test-support.js',
         'components/**/*.test.js',
+        // exclude our debug initializer, route and template
+        'instance-initializers/debug.js',
+        'templates/debug.hbs',
+        'components/debug/**/*.*'
       ],
     });
+    // exclude any debug like addons from production-like environments
+    addons.blacklist = [
+      // exclude docfy
+      '@docfy/ember'
+    ];
+  } else {
+    // add debug css is we are not in prodlike environments
+    outputPaths.app = {
+      css: {
+        'debug': '/assets/debug.css'
+      }
+    }
   }
   let app = new EmberApp(
     Object.assign({}, defaults, {
@@ -24,6 +42,8 @@ module.exports = function(defaults) {
     }),
     {
       trees: trees,
+      addons: addons,
+      outputPaths: outputPaths,
       'ember-cli-babel': {
         includePolyfill: true,
       },

ui/packages/consul-ui/lib/startup/index.js

@@ -9,6 +9,9 @@ const promisify = require('util').promisify;
 const read = promisify(fs.readFile);
 const apiDouble = require('@hashicorp/api-double');
 
+const mergeTrees = require('broccoli-merge-trees');
+const writeFile = require('broccoli-file-creator');
+
 const apiDoubleHeaders = require('@hashicorp/api-double/lib/headers');
 const cookieParser = require('cookie-parser');
 const bodyParser = require('body-parser');
@@ -36,6 +39,16 @@ module.exports = {
       return app.use(item);
     }, server.app);
   },
+  treeFor: function(name) {
+    const tree = this._super.treeFor.apply(this, arguments);
+    if (name === 'app') {
+      const prodlike = ['production', 'staging'];
+      if (prodlike.includes(process.env.EMBER_ENV)) {
+        return mergeTrees([tree, writeFile('components/debug/navigation/index.hbs', '')]);
+      }
+    }
+    return tree;
+  },
   contentFor: function(type, config) {
     const vars = {
       appName: config.modulePrefix,

ui/packages/consul-ui/lib/startup/templates/head.html.js

@@ -8,6 +8,9 @@ module.exports = ({ appName, environment, rootURL, config }) => `
   <link rel="icon" type="image/png" href="${rootURL}assets/favicon-16x16.png" sizes="16x16">
   <link integrity="" rel="stylesheet" href="${rootURL}assets/vendor.css">
   <link integrity="" rel="stylesheet" href="${rootURL}assets/${appName}.css">
+  ${
+    environment === 'development' ? `<link rel="stylesheet" href="${rootURL}assets/debug.css">` : ``
+  }
   ${
     environment === 'test' ? `<link rel="stylesheet" href="${rootURL}assets/test-support.css">` : ``
   }

ui/packages/consul-ui/package.json

@@ -58,17 +58,13 @@
     "@babel/helper-call-delegate": "^7.10.1",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@docfy/ember": "^0.4.0",
     "@ember/optional-features": "^1.3.0",
     "@ember/render-modifiers": "^1.0.2",
     "@glimmer/component": "^1.0.0",
     "@glimmer/tracking": "^1.0.0",
     "@hashicorp/ember-cli-api-double": "^3.1.0",
-    "@storybook/addon-actions": "^6.0.27",
+    "@mapbox/rehype-prism": "^0.5.0",
-    "@storybook/addon-controls": "^6.0.28",
-    "@storybook/addon-essentials": "^6.0.27",
-    "@storybook/addon-links": "^6.0.27",
-    "@storybook/ember": "^6.0.27",
-    "@storybook/ember-cli-storybook": "^0.2.1",
     "@xstate/fsm": "^1.4.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.1.0",
@@ -157,6 +153,9 @@
     "prettier": "^1.10.2",
     "qunit-dom": "^1.0.0",
     "react-is": "^17.0.1",
+    "refractor": "^3.3.1",
+    "remark-autolink-headings": "^6.0.1",
+    "remark-hbs": "^0.3.3",
     "sass": "^1.28.0",
     "tape": "^5.0.1",
     "text-encoding": "^0.7.0",