Update Path Expansion Page

src/renderer/src/stories/CodeBlock.js

@@ -0,0 +1,35 @@
+import { LitElement, css, html } from "lit";
+
+export class CodeBlock extends LitElement {
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+                font-size: 85%;
+                background: #f2f1f1;
+                border-radius: 10px;
+                border: 1px solid gray;
+                overflow: hidden;
+            }
+
+            pre {
+                overflow: auto;
+                padding: 5px 10px;
+                box-sizing: border-box;
+                user-select: text;
+                margin: 0;
+            }
+        `;
+    }
+
+    constructor({ text = "" }) {
+        super();
+        this.text = text;
+    }
+
+    render() {
+        return html`<pre>${this.text}</pre>`;
+    }
+}
+
+customElements.get("code-block") || customElements.define("code-block", CodeBlock);

src/renderer/src/stories/InfoBox.js

@@ -76,37 +76,40 @@ export class InfoBox extends LitElement {
         `;
     }
 
-    constructor({ header = "Info", content, type = "info" } = {}) {
+    constructor({ header = "Info", content, type = "info", open = false } = {}) {
         super();
         this.header = header;
         this.content = content;
         this.type = type;
+        this.open = open;
     }
 
     updated() {
-        const infoDropdowns = this.shadowRoot.querySelectorAll(".guided--info-dropdown");
-        for (const infoDropdown of Array.from(infoDropdowns)) {
-            const infoTextElement = infoDropdown.querySelector("#header");
-
-            // Auto-add icons if they're not there
-            if (this.type === "info") infoTextElement.insertAdjacentHTML("beforebegin", `<span class="icon">ℹ️</span>`);
-            if (this.type === "warning")
-                infoTextElement.insertAdjacentHTML("beforebegin", ` <span class="icon">⚠️</span>`);
-
-            infoDropdown.onclick = () => {
-                const infoContainer = infoDropdown.nextElementSibling;
-                const infoContainerChevron = infoDropdown.querySelector("nwb-chevron");
-
-                const infoContainerIsopen = infoContainer.classList.contains("container-open");
-
-                if (infoContainerIsopen) {
-                    infoContainerChevron.direction = "right";
-                    infoContainer.classList.remove("container-open");
-                } else {
-                    infoContainerChevron.direction = "bottom";
-                    infoContainer.classList.add("container-open");
-                }
-            };
+        const infoDropdown = this.shadowRoot.querySelector(".guided--info-dropdown");
+        const infoTextElement = infoDropdown.querySelector("#header");
+
+        // Auto-add icons if they're not there
+        if (this.type === "info") infoTextElement.insertAdjacentHTML("beforebegin", `<span class="icon">ℹ️</span>`);
+        if (this.type === "warning") infoTextElement.insertAdjacentHTML("beforebegin", ` <span class="icon">⚠️</span>`);
+
+        const infoContainer = infoDropdown.nextElementSibling;
+        infoDropdown.onclick = () => this.onToggle(!infoContainer.classList.contains("container-open"));
+
+        this.onToggle();
+    }
+
+    onToggle(open = this.open) {
+        const infoDropdown = this.shadowRoot.querySelector(".guided--info-dropdown");
+
+        const infoContainer = infoDropdown.nextElementSibling;
+        const infoContainerChevron = infoDropdown.querySelector("nwb-chevron");
+
+        if (open) {
+            infoContainerChevron.direction = "bottom";
+            infoContainer.classList.add("container-open");
+        } else {
+            infoContainerChevron.direction = "right";
+            infoContainer.classList.remove("container-open");
         }
     }
 

src/renderer/src/stories/JSONSchemaForm.js

@@ -96,15 +96,15 @@ hr {
   margin: 1em 0 1.5em 0;
 }
 
-pre {
-  white-space: pre-wrap;       /* Since CSS 2.1 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
-  font-family: unset;
-  color: DimGray;
-}
+    pre {
+        white-space: pre-wrap;       /* Since CSS 2.1 */
+        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+        white-space: -pre-wrap;      /* Opera 4-6 */
+        white-space: -o-pre-wrap;    /* Opera 7 */
+        word-wrap: break-word;       /* Internet Explorer 5.5+ */
+        font-family: unset;
+        color: DimGray;
+    }
 
   .required label:after {
     content: " *";
@@ -434,6 +434,7 @@ export class JSONSchemaForm extends LitElement {
                 ${interactiveInput}
                 <div class="errors"></div>
                 <div class="warnings"></div>
+                <div class="info"></div>
             </div>
         `;
     };
@@ -587,6 +588,8 @@ export class JSONSchemaForm extends LitElement {
             ? valid?.filter((info) => info.type === "error" || (isRequired && info.missing))
             : [];
 
+        const info = Array.isArray(valid) ? valid?.filter((info) => info.type === "info") : [];
+
         const hasLinks = this.#getLink(externalPath);
         if (hasLinks) {
             if (checkLinks) {
@@ -612,6 +615,7 @@ export class JSONSchemaForm extends LitElement {
         // Clear old errors and warnings
         this.#clearMessages(fullPath, "errors");
         this.#clearMessages(fullPath, "warnings");
+        this.#clearMessages(fullPath, "info");
 
         const isFunction = typeof valid === "function";
         const isValid =
@@ -629,6 +633,7 @@ export class JSONSchemaForm extends LitElement {
 
         // Show aggregated errors and warnings (if any)
         warnings.forEach((info) => this.#addMessage(fullPath, info, "warnings"));
+        info.forEach((info) => this.#addMessage(fullPath, info, "info"));
 
         if (isValid && errors.length === 0) {
             element.classList.remove("invalid");

src/renderer/src/stories/OptionalSection.js

@@ -7,14 +7,17 @@ export class OptionalSection extends LitElement {
         return css`
             :host {
                 display: block;
-                text-align: center;
             }
 
             h2 {
                 margin: 0;
                 margin-bottom: 15px;
             }
 
+            .optional-section__toggle {
+                padding-bottom: 20px;
+            }
+
             .optional-section__content {
                 text-align: left;
             }
@@ -99,17 +102,15 @@ export class OptionalSection extends LitElement {
 
     render() {
         return html`
-            <div class="optional-section">
-                <div class="optional-section__header">
-                    ${this.header ? html`<h2>${this.header}</h2>` : ""}
-                    <div>${this.description}</div>
-                    <div class="optional-section__toggle">${this.yes} ${this.no}</div>
-                </div>
-                <div class="optional-section__content" hidden>
-                    <slot>${this.content}</slot>
-                </div>
-                <div id="altContent" class="optional-section__content" hidden>${this.altContent}</div>
+            <div class="optional-section__header">
+                ${this.header ? html`<h2>${this.header}</h2>` : ""}
+                <div>${this.description}</div>
+                <div class="optional-section__toggle">${this.yes} ${this.no}</div>
+            </div>
+            <div class="optional-section__content" hidden>
+                <slot>${this.content}</slot>
             </div>
+            <div id="altContent" class="optional-section__content" hidden>${this.altContent}</div>
         `;
     }
 }