@pure-ds/storybook 0.7.4 → 0.7.23

package/.storybook/addons/html-preview/preview.js

@@ -247,7 +247,7 @@ function generatePdsOmniboxMarkup(omniboxElement) {
 function generatePdsTreeviewMarkup(treeviewElement) {
   const attrs = [];
 
-  const stringAttrs = ['name', 'value', 'src'];
+  const stringAttrs = ['name', 'value', 'src', 'multiselect'];
   stringAttrs.forEach((attr) => {
     const value = treeviewElement.getAttribute(attr);
     if (value !== null && value !== undefined && value !== '') {

package/.storybook/htmlPreview.js

@@ -5,7 +5,7 @@
  */
 
 import { render as litRender } from 'lit';
-import { highlight, getCurrentTheme, escapeHtml, preloadShiki } from './shiki.js';
+import { renderCodeBlock, getCurrentTheme, preloadShiki } from './shiki.js';
 
 // Pre-load Shiki in the background
 preloadShiki();
@@ -174,15 +174,10 @@ export const withHTMLSource = (storyFn, context) => {
         html = formatHTML(extractHTML(storyContainer));
       }
       
-      const codeEl = sourceSection.querySelector('.html-source-code');
       const preEl = sourceSection.querySelector('.html-source-pre');
       if (preEl && html) {
-        // Use Shiki for syntax highlighting
         const theme = getCurrentTheme();
-        const highlighted = await highlight(html, 'html', theme);
-        
-        // Shiki returns complete <pre><code>...</code></pre>, replace the whole pre element
-        preEl.outerHTML = highlighted;
+        await renderCodeBlock(preEl, html, 'html', theme);
       }
       
       // Setup copy button

package/.storybook/main.js

@@ -67,12 +67,20 @@ const config = {
       process.cwd()
     ];
     
-    // Ensure Lit import alias is resolved to PDS bundle
-    const aliases = {
-      ...config.resolve.alias,
-      '#pds': resolve(pdsSrcPath, 'js/pds.js'),
-      '#pds/lit': resolve(pdsSrcPath, 'js/lit.js'),
-    };
+    config.resolve = config.resolve || {};
+
+    // Ensure virtual import aliases resolve consistently.
+    // Use exact-match regex for #pds so it does not capture #pds/lit.
+    const existingAliases = Array.isArray(config.resolve.alias)
+      ? [...config.resolve.alias]
+      : Object.entries(config.resolve.alias || {}).map(([find, replacement]) => ({ find, replacement }));
+
+    const aliases = [
+      { find: '#pds/lit', replacement: resolve(pdsSrcPath, 'js/lit.js') },
+      { find: /^#pds$/, replacement: resolve(pdsSrcPath, 'js/pds.js') },
+      { find: /^#shiki$/, replacement: resolve(pdsSrcPath, 'js/external/shiki.js') },
+      ...existingAliases,
+    ];
 
      // In monorepo, map the local src folder to the monorepo root src folder
      // This eliminates the need for a copied src folder during development
@@ -80,15 +88,15 @@ const config = {
        aliases[resolve(currentDirname, '../src')] = pdsSrcPath;
      }
 
-    aliases['@pds-src'] = pdsSrcPath;
+    aliases.push({ find: '@pds-src', replacement: pdsSrcPath });
     config.resolve.alias = aliases;
 
     // Alias for relative paths to src (handles ../../../src in stories)
     // This allows stories to work in both monorepo (where ../../../src is valid)
     // and package (where it needs to be mapped to the local src folder)
     // Note: We use a regex to catch varying depths of ../
-    config.resolve.alias['../../../src'] = pdsSrcPath;
-    config.resolve.alias['../../../../src'] = pdsSrcPath;
+    config.resolve.alias.push({ find: '../../../src', replacement: pdsSrcPath });
+    config.resolve.alias.push({ find: '../../../../src', replacement: pdsSrcPath });
     
     // Also handle the case where the import is exactly 'D:\Code\pure\pure-ds\packages\src\js\common\ask.js'
     // which seems to be happening in the error log:
@@ -169,15 +177,15 @@ const config = {
     
     // I will change it back to `../../../../src`.
     
-    config.resolve.alias['../../../../src'] = pdsSrcPath;
+    config.resolve.alias.push({ find: '../../../../src', replacement: pdsSrcPath });
     
     // Try to resolve user's pds.config.js
     const userConfigPath = resolve(process.cwd(), 'pds.config.js');
     if (fs.existsSync(userConfigPath)) {
-        config.resolve.alias['@user/pds-config'] = userConfigPath;
+      config.resolve.alias.push({ find: '@user/pds-config', replacement: userConfigPath });
     } else {
         // Fallback to a default config file if user config doesn't exist
-        config.resolve.alias['@user/pds-config'] = resolve(currentDirname, '../default-pds.config.js');
+      config.resolve.alias.push({ find: '@user/pds-config', replacement: resolve(currentDirname, '../default-pds.config.js') });
     }
 
     // Support absolute path imports like: import { html } from '/assets/pds/external/lit.js';

package/.storybook/preview-head.html

@@ -11,6 +11,7 @@
   "imports": {
     "#pds": "/assets/pds/core.js",
     "#pds/lit": "/assets/pds/external/lit.js",
+    "#shiki": "/assets/pds/external/shiki.js",
     "#showdown": "https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.mjs"
   }
 }

package/.storybook/preview.js

@@ -16,6 +16,42 @@ import { toastFormData } from '../stories/utils/toast-utils.js';
 // Expose toastFormData globally for inline event handlers
 window.toastFormData = toastFormData;
 
+let pdsCodeLoadPromise = null;
+
+async function ensurePdsCodeLoaded() {
+  if (typeof customElements !== 'undefined' && customElements.get('pds-code')) {
+    return true;
+  }
+
+  if (!pdsCodeLoadPromise) {
+    pdsCodeLoadPromise = (async () => {
+      const candidates = [
+        '@pds-src/js/components/pds-code.js',
+        '/assets/pds/components/pds-code.js',
+        '/pds/components/pds-code.js',
+      ];
+
+      for (const specifier of candidates) {
+        try {
+          await import(specifier);
+          if (typeof customElements !== 'undefined' && customElements.get('pds-code')) {
+            return true;
+          }
+        } catch {
+          // try next candidate
+        }
+      }
+
+      console.warn('Failed to load pds-code component from known locations.');
+      return false;
+    })();
+  }
+
+  return pdsCodeLoadPromise;
+}
+
+void ensurePdsCodeLoaded();
+
 // Get initial preset from storage or URL or default
 const getInitialPreset = () => {
   try {
@@ -52,6 +88,36 @@ function isDocsPage() {
   }
 }
 
+function inferCodeLanguage(codeEl) {
+  if (!codeEl) return 'html';
+  const className = codeEl.className || '';
+  const languageMatch = className.match(/(?:language|lang)-([a-z0-9-]+)/i);
+  if (languageMatch?.[1]) {
+    return languageMatch[1].toLowerCase();
+  }
+  return codeEl.getAttribute('data-lang') || 'html';
+}
+
+function upgradeLegacyCodeBlocks(root) {
+  if (!root) return;
+  if (typeof customElements !== 'undefined' && !customElements.get('pds-code')) return;
+
+  const blocks = root.querySelectorAll('pre > code');
+  blocks.forEach((codeEl) => {
+    const preEl = codeEl.parentElement;
+    if (!preEl || preEl.closest('pds-code')) return;
+
+    const content = codeEl.textContent || '';
+    if (!content.trim()) return;
+
+    const lang = inferCodeLanguage(codeEl);
+    const pdsCode = document.createElement('pds-code');
+    pdsCode.setAttribute('lang', lang);
+    pdsCode.code = content;
+    preEl.replaceWith(pdsCode);
+  });
+}
+
 let liveGenerator = null;
 const setLiveGenerator = (generator) => {
   if (generator && typeof generator === 'object') {
@@ -216,6 +282,8 @@ const withPDS = (story, context) => {
   const adoptAllShadowStyles = async () => {
     const container = document.querySelector('#storybook-root');
     if (!container) return;
+
+    upgradeLegacyCodeBlocks(container);
     
     const walker = document.createTreeWalker(
       container,
@@ -283,6 +351,9 @@ const withPDS = (story, context) => {
   };
   
   // Initial adoption - run multiple times to catch lazy components
+  setTimeout(() => {
+    upgradeLegacyCodeBlocks(document.querySelector('#storybook-root'));
+  }, 0);
   setTimeout(adoptAllShadowStyles, 0);
   setTimeout(adoptAllShadowStyles, 100);
   setTimeout(adoptAllShadowStyles, 300);

package/.storybook/shiki.js

@@ -8,6 +8,7 @@
 export { 
   loadShiki, 
   highlight, 
+  renderCodeBlock,
   getCurrentTheme, 
   escapeHtml, 
   preloadShiki