Feature/mdjs sandbox demos

docs/_assets/codepen.js

@@ -0,0 +1,43 @@
+/**
+ * @param {string | null | undefined} codeContent
+ * @param {string | undefined} demoElName
+ */
+export async function editOnCodepen(codeContent, demoElName) {
+  // @ts-ignore
+  const imports = window.__importMap;
+
+  const data = {
+    head: `
+          <title>Lion ${demoElName}</title>
+          <script type="importmap">${JSON.stringify({ imports })}</script>
+          <script src="https://unpkg.com/@webcomponents/[email protected]/scoped-custom-element-registry.min.js"></script>
+      `,
+    title: `${demoElName} example`,
+    description: 'This CodePen was generated on the fly via JavaScript.',
+    tags: ['codepen', 'javascript', 'html', 'css'],
+    html: `<${demoElName}></${demoElName}>`,
+    js: codeContent,
+    editors: '101', // Which editors to open by default. 1 = HTML, 0 = CSS, 1 = JS,
+  };
+
+  // Convert the data object to a JSON string
+  const jsonData = JSON.stringify(data);
+
+  // Create a form element
+  const form = document.createElement('form');
+  form.action = 'https://codepen.io/pen/define';
+  form.method = 'POST';
+  form.target = '_blank';
+
+  // Create a hidden input field to hold the JSON data
+  const input = document.createElement('input');
+  input.type = 'hidden';
+  input.name = 'data';
+  input.value = jsonData;
+
+  // Append the input to the form and submit it
+  form.appendChild(input);
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
+}

docs/_assets/html-importmap.js

@@ -0,0 +1,39 @@
+// Create the import map script element
+
+// @ts-ignore
+window.__importMap = {
+  lit: 'https://esm.sh/[email protected]',
+  'lit-html': 'https://esm.sh/[email protected]',
+  'lit-html/is-server.js': 'https://esm.sh/[email protected]/is-server.js',
+  'lit-element': 'https://esm.sh/[email protected]',
+  'lit-element/lit-element.js': 'https://esm.sh/[email protected]',
+  '@lit/reactive-element': 'https://esm.sh/@lit/[email protected]',
+  '@open-wc/dedupe-mixin': 'https://unpkg.com/@open-wc/[email protected]/index.js',
+  '@open-wc/scoped-elements/lit-element.js':
+    'https://esm.sh/@open-wc/[email protected]/lit-element.js',
+  '@lion/ui/dialog': 'https://esm.sh/@lion/[email protected]/dialog.js',
+  '@lion/ui/overlays': 'https://esm.sh/@lion/[email protected]/overlays.js',
+  '@lion/ui/button.js': 'https://esm.sh/@lion/[email protected]/button.js',
+  '@lion/ui/accordion.js': 'https://esm.sh/@lion/[email protected]/accordion.js',
+  '@lion/ui/calendar.js': 'https://esm.sh/@lion/[email protected]/calendar.js',
+  '@lion/ui/checkbox-group.js': 'https://esm.sh/@lion/[email protected]/checkbox-group.js',
+  '@lion/ui/collapsible.js': 'https://esm.sh/@lion/[email protected]/collapsible.js',
+  '@lion/ui/combobox.js': 'https://esm.sh/@lion/[email protected]/combobox.js',
+  '@lion/ui/option.js': 'https://esm.sh/@lion/[email protected]/option.js',
+  '@lion/ui/drawer.js': 'https://esm.sh/@lion/[email protected]/drawer.js',
+  '@lion/ui/fieldset.js': 'https://esm.sh/@lion/[email protected]/fieldset.js',
+  '@lion/ui/input.js': 'https://esm.sh/@lion/[email protected]/input.js',
+  '@lion/ui/form.js': 'https://esm.sh/@lion/[email protected]/form.js',
+  '@lion/ui/icon.js': 'https://esm.sh/@lion/[email protected]/icon.js',
+  '@lion/ui/input-amount.js': 'https://esm.sh/@lion/[email protected]/input-amount.js',
+};
+
+const importMap = document.createElement('script');
+importMap.type = 'importmap';
+importMap.textContent = JSON.stringify({
+  // @ts-ignore
+  imports: window.__importMap,
+});
+
+// Append the import map to the document head
+document.head.appendChild(importMap);

docs/_assets/mdjs-sandbox.wc.js

@@ -0,0 +1,110 @@
+import { LitElement, html, css } from 'lit';
+import { editOnStackblitz } from './stackblitz.js';
+import { editOnCodepen } from './codepen.js';
+import { CodeIcon, CodeSandbox, Stackblitz } from './sandbox-icons.js';
+
+class MdjsSandbox extends LitElement {
+  static styles = css`
+    .mdjs-sandbox__preview {
+      border: 1px solid var(--primary-lines-color);
+      min-height: 4rem;
+      overflow: hidden;
+    }
+
+    .mdjs-sandbox__tools {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    .mdjs-sandbox__tools lion-button {
+      padding: 4px 6px;
+      font-size: 14px;
+    }
+
+    .mdjs-sandbox__tools lion-button svg {
+      margin-right: 0.25rem;
+      height: 1rem;
+      width: 1rem;
+    }
+
+    .mdjs-sandbox__demo {
+      padding: 1rem;
+    }
+  `;
+
+  static get properties() {
+    return {
+      codeContent: { type: String },
+      demoElName: { type: String },
+      showCode: { type: Boolean },
+    };
+  }
+
+  firstUpdated() {
+    this.__getAssignedNodes();
+  }
+
+  __getAssignedNodes() {
+    const slot = this.shadowRoot?.querySelector('slot[mdjs-sandbox-code]');
+    // @ts-ignore
+    slot.addEventListener('slotchange', () => {
+      try {
+        // @ts-ignore
+        const nodes = slot.assignedNodes();
+        const codeSnippets = document.createElement('script');
+        codeSnippets.setAttribute('type', 'module');
+        codeSnippets.textContent = nodes[1].textContent;
+
+        this.codeContent = nodes[1].textContent;
+
+        /* eslint-disable prefer-destructuring */
+        this.demoElName = (codeSnippets.textContent?.match(/\b([a-z-]+-demo)\b/) ?? [])[0];
+
+        // @ts-ignore
+        const demoElement = document.createElement(/** @type {any} */ this.demoElName);
+
+        this.renderRoot.querySelector('.mdjs-sandbox__demo')?.appendChild(demoElement);
+
+        document.body.appendChild(codeSnippets);
+      } catch (error) {
+        console.error('Demo is not loaded: ', error);
+      }
+    });
+  }
+
+  // @ts-ignore
+  __handleStackblitz() {
+    editOnStackblitz(this.codeContent, this.demoElName);
+  }
+
+  __handleCodepen() {
+    editOnCodepen(this.codeContent, this.demoElName);
+  }
+
+  __handleToggleCode() {
+    this.showCode = !this.showCode;
+  }
+
+  render() {
+    return html`
+      <div class="mdjs-sandbox">
+        <div class="mdjs-sandbox__preview">
+          <div class="mdjs-sandbox__tools">
+            <lion-button @click=${this.__handleStackblitz}>${Stackblitz} Stackblitz</lion-button>
+            <lion-button @click=${this.__handleCodepen}>${CodeSandbox} Code Pen</lion-button>
+            <lion-button @click=${this.__handleToggleCode}>${CodeIcon} Show Code</lion-button>
+          </div>
+          <div class="mdjs-sandbox__demo">
+            <!--- demo-commponent-tag will be injected here--->
+          </div>
+        </div>
+        <div class="mdjs-sandbox__code" ?hidden=${!this.showCode}>
+          <slot mdjs-sandbox-code></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('mdjs-sandbox', MdjsSandbox);

docs/_assets/sandbox-icons.js

@@ -0,0 +1,31 @@
+import { html } from 'lit';
+
+export const Stackblitz = html`
+  <svg focusable="false" aria-hidden="true" viewBox="0 0 19 28">
+    <path
+      d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z"
+    ></path>
+  </svg>
+`;
+
+export const CodeSandbox = html`
+  <svg focusable="false" aria-hidden="true" viewBox="0 0 1024 1024">
+    <path
+      d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"
+    ></path>
+  </svg>
+`;
+
+export const CodeIcon = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 -960 960 960"
+    width="24px"
+    fill="#434343"
+  >
+    <path
+      d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"
+    />
+  </svg>
+`;

docs/_assets/stackblitz.js

@@ -0,0 +1,72 @@
+/**
+ * @param {any} codeContent
+ * @param {string | undefined} demoElName
+ */
+export async function editOnStackblitz(codeContent, demoElName) {
+  /**
+   * @param {string} text
+   */
+  function startCase(text) {
+    return text
+      .split(/-/)
+      .map(t => t.charAt(0).toUpperCase() + t.slice(1))
+      .join(' ');
+  }
+
+  // @ts-ignore
+  const title = startCase(demoElName);
+
+  const indexHtml = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Lion ${title}</title>
+          <script src="https://unpkg.com/@webcomponents/[email protected]/scoped-custom-element-registry.min.js"></script>
+      </head>
+      <body>
+          <${demoElName}></${demoElName}>
+          <script type="module" src="./index.js"></script>
+      </body>
+      </html>
+  `;
+
+  const packageJson = JSON.stringify(
+    {
+      name: demoElName,
+      type: 'module',
+      scripts: {
+        dev: 'vite',
+      },
+      devDependencies: {
+        vite: '^5.2.13',
+      },
+      dependencies: {
+        '@lion/ui': '^0.11.2',
+        '@open-wc/scoped-elements': '^3.0.5',
+        '@webcomponents/scoped-custom-element-registry': '^0.0.9',
+        lit: '^3.2.1',
+      },
+    },
+    null,
+    2,
+  );
+
+  // @ts-ignore
+  const { openProject } = window.StackBlitzSDK;
+
+  const project = {
+    title,
+    description: `Stackblitz example of ${demoElName}`,
+    template: 'node',
+    files: {
+      // @ts-ignore
+      'index.html': indexHtml,
+      'index.js': codeContent,
+      'package.json': packageJson,
+    },
+  };
+
+  openProject(project);
+}

docs/_includes/_joiningBlocks/head/05-polyfills.njk

@@ -1 +1,4 @@
 <script src="{{ '/_assets/scoped-custom-element-registry.min.js' | asset | url }}"></script>
+<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>
+<script src="{{ '/_assets/html-importmap.js' | asset | url }}"></script>
+<script type="module" src="{{ '/_assets/mdjs-sandbox.wc.js' | asset | url }}"></script>