ui: Start using mermaid state diagrams in our docs (#12350)

ui/package.json

@@ -20,7 +20,10 @@
     "npm-run-all": "^4.1.5"
   },
   "resolutions": {
-    "xmlhttprequest-ssl": "^1.6.3"
+    "xmlhttprequest-ssl": "^1.6.3",
+    "ember-basic-dropdown": "3.0.21",
+    "ember-changeset": "3.10.1",
+    "validated-changeset": "0.10.0"
   },
   "engines": {
     "node": ">=10 <=14"

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

@@ -1,9 +1,11 @@
 const path = require('path');
 
 const autolinkHeadings = require('remark-autolink-headings');
+const prism = require('./lib/rehype-prism/index');
 const refractor = require('refractor');
 const gherkin = require('refractor/lang/gherkin');
-const prism = require('@mapbox/rehype-prism');
+const mermaid = require('refractor/lang/mermaid');
+const handlebars = require('refractor/lang/handlebars');
 
 const fs = require('fs');
 const read = fs.readFileSync;
@@ -26,8 +28,14 @@ if($CONSUL_DOCFY_CONFIG.length > 0) {
 }
 
 refractor.register(gherkin);
-refractor.alias('handlebars', 'hbs');
+refractor.register(mermaid);
-refractor.alias('shell', 'sh');
+refractor.register(handlebars);
+
+refractor.alias({
+  handlebars: ['hbs'],
+  shell: ['sh']
+});
+
 
 
 module.exports = {

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

@@ -209,6 +209,30 @@ An `<Action />` component with the correct aria attributes added.
 | `id` | `String` | A unique id which you **should** (for aria reasons) use for the root DOM element you are controlling with the disclosure |
 | `expanded` | `Boolean` | An alias of `disclosure.expanded`. Whether the disclosure is 'expanded' or not. If disclosure of the `Details` is controlled via CSS you **should** use this to set/unset `aria-hidden` |
 
+## Internal States
+
+Opened and closed states of the Disclosure are managed internally by a simple boolean state machine:
+
+```mermaid
+stateDiagram-v2
+    [*] --> false
+    true --> false: TOGGLE
+    true --> false: FALSE
+    false --> true: TOGGLE
+    false --> true: TRUE
+```
+
+which in the context of the Disclosure component is better represented via:
+
+```mermaid
+stateDiagram-v2
+    [*] --> closed
+    opened --> closed: TOGGLE
+    opened --> closed: CLOSE
+    closed --> opened: TOGGLE
+    closed --> opened: OPEN
+```
+
 ## See
 
 - [Component Source Code](./index.js)

ui/packages/consul-ui/lib/rehype-prism/index.js

@@ -0,0 +1,64 @@
+// modified from https://github.com/mapbox/rehype-prism/blob/fb4174fce30a1cde8d784fa94e7c04d8a7fa6d28/index.js
+
+// MIT License
+
+// Copyright (c) 2017 Mapbox
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+'use strict';
+
+const visit = require('unist-util-visit');
+const nodeToString = require('hast-util-to-string');
+const refractor = require('refractor');
+
+module.exports = (options) => {
+  options = options || {};
+
+  if (options.alias) {
+    refractor.alias(options.alias);
+  }
+
+  return (tree) => {
+    visit(tree, 'element', (node, index, parent) => {
+      if (typeof parent === 'undefined' ||
+          parent.tagName !== 'pre' ||
+          node.tagName !== 'code'
+      ) {
+        return;
+      }
+      const languagePrefix = 'language-';
+      const langClass = ((node.properties.className || []).find(item => item.startsWith(languagePrefix)) || '').toLowerCase();
+      if (langClass.length === 0) {
+        return;
+      }
+      const lang = langClass.substr(languagePrefix.length);
+      try {
+        parent.properties.className = (parent.properties.className || []).concat(langClass);
+        const result = refractor.highlight(nodeToString(node), lang);
+        node.children = result;
+      } catch (err) {
+        if (options.ignoreMissing && /Unknown language/.test(err.message)) {
+          return;
+        }
+        throw err;
+      }
+    });
+  };
+};

ui/packages/consul-ui/package.json

@@ -64,7 +64,6 @@
     "@glimmer/tracking": "^1.0.0",
     "@hashicorp/ember-cli-api-double": "^3.1.0",
     "@lit/reactive-element": "^1.2.1",
-    "@mapbox/rehype-prism": "^0.6.0",
     "@xstate/fsm": "^1.4.0",
     "a11y-dialog": "^6.0.1",
     "babel-eslint": "^10.0.3",
@@ -149,6 +148,7 @@
     "eslint-plugin-node": "^11.0.0",
     "faker": "^5.5.3",
     "flat": "^5.0.0",
+    "hast-util-to-string": "^1.0.4",
     "husky": "^4.2.5",
     "ivy-codemirror": "^2.1.0",
     "js-yaml": "^4.0.0",
@@ -163,7 +163,7 @@
     "pretty-ms": "^7.0.1",
     "qunit-dom": "^1.0.0",
     "react-is": "^17.0.1",
-    "refractor": "^3.3.1",
+    "refractor": "^3.5.0",
     "remark-autolink-headings": "^6.0.1",
     "remark-hbs": "^0.4.0",
     "sass": "^1.28.0",
@@ -171,13 +171,9 @@
     "text-encoding": "^0.7.0",
     "tippy.js": "^6.2.7",
     "torii": "^0.10.1",
+    "unist-util-visit": "^2.0.3",
     "wayfarer": "^7.0.1"
   },
-  "resolutions": {
-    "ember-basic-dropdown": "^3.0.10",
-    "ember-changeset": "3.10.1",
-    "validated-changeset": "0.10.0"
-  },
   "engines": {
     "node": ">=10 <=14"
   },

ui/yarn.lock

@@ -1565,15 +1565,6 @@
   resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.2.1.tgz#8620d7f0baf63e12821fa93c34d21e23477736f7"
   integrity sha512-03FYfMguIWo9E1y1qcTpXzoO8Ukpn0j5o4GjNFq/iHqJEPY6pYopsU44e7NSFIgCTorr8wdUU5PfVy8VeD6Rwg==
 
-"@mapbox/rehype-prism@^0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@mapbox/rehype-prism/-/rehype-prism-0.6.0.tgz#3d8a860870951d4354257d0ba908d11545bd5ed5"
-  integrity sha512-/0Ev/PB4fXdKPT6VDzVpnAPxGpWFIc4Yz3mf/DzLEMxlpIPZpZlCzaFk4V4NGFofQXPc41+GpEcZtWP3VuFWVA==
-  dependencies:
-    hast-util-to-string "^1.0.4"
-    refractor "^3.3.1"
-    unist-util-visit "^2.0.3"
-
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -4525,7 +4516,7 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-clipboard@^2.0.0, clipboard@^2.0.4:
+clipboard@^2.0.4:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
   integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
@@ -5511,7 +5502,7 @@ ember-auto-import@^1.5.2, ember-auto-import@^1.5.3, ember-auto-import@^1.6.0:
     walk-sync "^0.3.3"
     webpack "^4.43.0"
 
-ember-basic-dropdown@^3.0.16:
+ember-basic-dropdown@3.0.21, ember-basic-dropdown@^3.0.16:
   version "3.0.21"
   resolved "https://registry.yarnpkg.com/ember-basic-dropdown/-/ember-basic-dropdown-3.0.21.tgz#5711d071966919c9578d2d5ac2c6dcadbb5ea0e0"
   integrity sha512-Wu9hJWyqorKo+ZT2PMSIO1BxAeAdaiIC2IjSic0+HcKjmMU47botvG0xbxlprimOWaS9vM+nHat6Pt3xPvcB0A==
@@ -5556,7 +5547,7 @@ ember-changeset-validations@~3.9.0:
     ember-get-config "^0.2.4"
     ember-validators "^2.0.0"
 
-ember-changeset@^3.9.1:
+ember-changeset@3.10.1, ember-changeset@^3.9.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/ember-changeset/-/ember-changeset-3.10.1.tgz#d6f06bc55f867a2c1ac7c5fd780776bd1e5a9b60"
   integrity sha512-4FoGKRcKxixSr+NBQ+ZoiwwbJE0/fuZRULUp9M1RIHejYhst+U8/ni47SsphrMhoRAcZCeyl+JqlBMlwR7v50g==
@@ -11616,12 +11607,10 @@ printf@^0.5.1:
   resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.3.tgz#8b7eec278d886833312238b2bf42b2b6f250880a"
   integrity sha512-t3lYN6vPU5PZXDiEZZqoyXvN8wCsBfi8gPoxTKo2e5hhV673t/KUh+mfO8P8lCOCDC/BWcOGIxKyebxc5FuqLA==
 
-prismjs@~1.23.0:
+prismjs@~1.25.0:
-  version "1.23.0"
+  version "1.25.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
-  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
+  integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==
-  optionalDependencies:
-    clipboard "^2.0.0"
 
 private@^0.1.6, private@^0.1.8:
   version "0.1.8"
@@ -11980,14 +11969,14 @@ redeyed@~1.0.0:
   dependencies:
     esprima "~3.0.0"
 
-refractor@^3.3.1:
+refractor@^3.5.0:
-  version "3.3.1"
+  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.3.1.tgz#ebbc04b427ea81dc25ad333f7f67a0b5f4f0be3a"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.5.0.tgz#334586f352dda4beaf354099b48c2d18e0819aec"
-  integrity sha512-vaN6R56kLMuBszHSWlwTpcZ8KTMG6aUCok4GrxYDT20UIOXxOc5o6oDc8tNTzSlH3m2sI+Eu9Jo2kVdDcUTWYw==
+  integrity sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==
   dependencies:
     hastscript "^6.0.0"
     parse-entities "^2.0.0"
-    prismjs "~1.23.0"
+    prismjs "~1.25.0"
 
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
@@ -14275,7 +14264,7 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
-validated-changeset@~0.10.0:
+validated-changeset@0.10.0, validated-changeset@~0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/validated-changeset/-/validated-changeset-0.10.0.tgz#2e8188c089ab282c1b51fba3c289073f6bd14c8b"
   integrity sha512-n8NB3ol6Tbi0O7bnq1wz81m5Wd1gfHw0HUcH4MatOfqO3DyXzWZV+bUaNq6wThXn20rMFB82C8pTNFSWbgXJLA==