@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

package/components/select/demo/getting-started.html

@@ -42,83 +42,12 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
     <script type="module">
-      import {unified} from 'https://esm.sh/unified';
-      import remarkParse from 'https://esm.sh/remark-parse';
-      import remarkGfm from 'https://esm.sh/remark-gfm';
-      import remarkRehype from 'https://esm.sh/remark-rehype';
-      import rehypeRaw from 'https://esm.sh/rehype-raw';
-      import rehypeHighlight from 'https://esm.sh/rehype-highlight';
-      import rehypeStringify from 'https://esm.sh/rehype-stringify';
-
-      const response = await fetch('./getting-started.md');
-      const text = await response.text();
-      const result = await unified()
-        .use(remarkParse)
-        .use(remarkGfm)
-        .use(remarkRehype, { allowDangerousHtml: true })
-        .use(rehypeRaw)
-        .use(rehypeHighlight)
-        .use(rehypeStringify)
-        .process(text);
-
-      document.querySelector('main').innerHTML = String(result);
-    </script>
-    <script type="module">
-      // import "https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js";
-      // import "https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js";
-
-      function addCopyButtons() {
-        document.querySelectorAll('pre[class*="language-"]').forEach((pre) => {
-          const wrapper = document.createElement('div');
-          wrapper.className = 'pre-wrapper';
-          pre.parentNode.insertBefore(wrapper, pre);
-          wrapper.appendChild(pre);
-          const btn = document.createElement('button');
-          btn.className = 'copy-btn';
-          btn.textContent = 'Copy';
-          btn.addEventListener('click', () => {
-            const code = pre.querySelector('code');
-            const raw = code ? code.textContent : pre.textContent;
-            const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
-            navigator.clipboard.writeText(text).then(() => {
-              btn.textContent = 'Copied!';
-              setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
-            });
-          });
-          wrapper.appendChild(btn);
-        });
-      }
-
-      function openAccordion(id) {
-        document.querySelectorAll('auro-accordion').forEach((accordion) => {
-          accordion.removeAttribute('expanded');
-        });
-        const target = document.getElementById(id);
-        if (target) {
-          target.setAttribute('expanded', '');
-          // Wait for accordion collapse/expand animation (500ms) to finish before scrolling
-          setTimeout(() => {
-            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-          }, 550);
-        }
-      }
-
-      window.openAccordion = openAccordion;
-
-      // function loadMd(path) {
-      //   fetch(path)
-      //     .then((response) => response.text())
-      //     .then((text) => {
-      //       const rawHtml = marked.parse(text);
-      //       document.querySelector("main").innerHTML = rawHtml;
-      //       Prism.highlightAll();
-      //       addCopyButtons();
-      //     });
-      // }
-
-      // loadMd("./getting-started.md");
-      addCopyButtons();
+      import { renderPage } from './demo-support.js';
+      await renderPage('./getting-started.md');
+      import { initExamples } from "./getting-started.min.js";
+      initExamples();
     </script>
     <script src="./getting-started.min.js" data-demo-script="true" type="module"></script>
   </body>

package/components/select/demo/getting-started.js

@@ -1,9 +1,26 @@
-// import { exampleFunction } from "exampleFile.js";
-
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
+import { valueExample } from "../apiExamples/value";
+import { resetStateExample } from "../apiExamples/reset-state";
+import { updateActiveOptionExample } from "../apiExamples/update-active-option.js";
 import { AuroSelect } from '../src/auro-select.js';
 import '../../menu/src/registered.js';
 
-AuroSelect.register(); // registering to `auro-select`
+AuroSelect.register();
 AuroSelect.register('custom-select');
+
+export function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    valueExample();
+    resetStateExample();
+    updateActiveOptionExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}