@pure-ds/storybook 0.5.56 → 0.6.1

package/.storybook/addons/description/register.js

@@ -1,16 +1,16 @@
 import { addons, types } from '@storybook/manager-api';
 import { AddonPanel } from '@storybook/components';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Markdown } from '@storybook/blocks';
 
 const ADDON_ID = 'pds-description';
 const PANEL_ID = `${ADDON_ID}/panel`;
 
 const DescriptionPanel = () => {
-  const [description, setDescription] = React.useState('');
-  const [title, setTitle] = React.useState('');
+  const [description, setDescription] = useState('');
+  const [title, setTitle] = useState('');
 
-  React.useEffect(() => {
+  useEffect(() => {
     const channel = addons.getChannel();
     
     const updateDescription = (data) => {
@@ -25,23 +25,23 @@ const DescriptionPanel = () => {
     };
   }, []);
 
-  return React.createElement(
-    'div',
-    {
+  return React.createElement('div', {
+    style: {
+      padding: '1rem',
+      height: '100%',
+      overflow: 'auto'
+    }
+  },
+    React.createElement('div', {
       style: {
-        padding: '1rem',
-        height: '100%',
-        overflow: 'auto'
+        marginBottom: '0.5rem'
       }
     },
-    React.createElement(
-      'div',
-      { style: { marginBottom: '0.5rem' } },
-      React.createElement(
-        'strong',
-        { style: { fontSize: '1rem' } },
-        title
-      )
+      React.createElement('strong', {
+        style: {
+          fontSize: '1rem'
+        }
+      }, title)
     ),
     React.createElement(Markdown, null, description)
   );
@@ -51,11 +51,10 @@ addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Description',
-    render: ({ active }) =>
-      React.createElement(
-        AddonPanel,
-        { active },
+    render: ({ active }) => {
+      return React.createElement(AddonPanel, { active },
         React.createElement(DescriptionPanel)
-      )
+      );
+    }
   });
 });

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

@@ -1,41 +1,16 @@
 import React from 'react';
 import { addons, types } from '@storybook/manager-api';
 import { ADDON_ID, PANEL_ID } from './constants.js';
-
-const PanelLoader = ({ active }) => {
-  const [PanelComponent, setPanelComponent] = React.useState(null);
-
-  React.useEffect(() => {
-    let mounted = true;
-
-    import('./Panel.jsx')
-      .then((mod) => {
-        if (!mounted) return;
-        const Resolved = mod.Panel || mod.default || null;
-        if (Resolved) setPanelComponent(() => Resolved);
-      })
-      .catch((error) => {
-        console.error('Failed to load html-preview Panel:', error);
-      });
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  if (!PanelComponent) return null;
-  return React.createElement(PanelComponent, { active });
-};
+import { Panel } from './Panel.jsx';
 
 addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Code',
-    render: ({ active, key }) =>
-      React.createElement(
-        'div',
-        { style: { display: active ? 'block' : 'none', height: '100%' } },
-        React.createElement(PanelLoader, { key, active })
-      )
+    render: ({ active, key }) => (
+      <div style={{ display: active ? 'block' : 'none', height: '100%' }}>
+        <Panel key={key} active={active} />
+      </div>
+    )
   });
 });

package/.storybook/htmlPreview.js

@@ -1,219 +1,219 @@
-/**
- * HTML Preview and Copy Utility for Storybook
- * Provides HTML source viewing and copy functionality for all stories
- * Uses Shiki for syntax highlighting
- */
-
-import { render as litRender } from 'lit';
-import { highlight, getCurrentTheme, escapeHtml, preloadShiki } from './shiki.js';
-
-// Pre-load Shiki in the background
-preloadShiki();
-
-/**
- * Format HTML string with proper indentation
- */
-export function formatHTML(html) {
-  if (!html) return '';
-  
-  let formatted = '';
-  let indent = 0;
-  const tab = '  ';
-  
-  const tokens = html.split(/(<[^>]+>)/g).filter(Boolean);
-  
-  tokens.forEach((token) => {
-    if (token.startsWith('</')) {
-      // Closing tag
-      indent = Math.max(0, indent - 1);
-      formatted += '\n' + tab.repeat(indent) + token;
-    } else if (token.startsWith('<')) {
-      // Opening tag
-      const isSelfClosing = token.endsWith('/>') || token.match(/<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)/);
-      formatted += '\n' + tab.repeat(indent) + token;
-      if (!isSelfClosing) {
-        indent++;
-      }
-    } else if (token.trim()) {
-      // Text content
-      formatted += token.trim();
-    }
-  });
-  
-  return formatted.trim();
-}
-
-/**
- * Extract HTML from a rendered story
- */
-export function extractHTML(element) {
-  if (!element) return '';
-  
-  // Clone the element to avoid modifying the original
-  const clone = element.cloneNode(true);
-  
-  // Clean up any Storybook-specific attributes or classes
-  const cleanElement = (el) => {
-    if (el.removeAttribute) {
-      el.removeAttribute('data-story-id');
-      el.removeAttribute('data-view-mode');
-    }
-    if (el.children) {
-      Array.from(el.children).forEach(cleanElement);
-    }
-  };
-  
-  cleanElement(clone);
-  return clone.innerHTML || '';
-}
-
-/**
- * Strip Lit template comments from rendered HTML
- * Removes markers like <!--?lit$641514976$-->, <!---->, etc.
- */
-export function stripLitComments(html) {
-  if (!html) return '';
-  
-  // Remove Lit binding markers: <!--?lit$...$-->
-  html = html.replace(/<!--\?lit\$[^$]+\$-->/g, '');
-  
-  // Remove empty Lit comments: <!---->
-  html = html.replace(/<!---->/g, '');
-  
-  // Remove Lit template marker comments: <!--lit-part...-->
-  html = html.replace(/<!--lit-part[^>]*-->/g, '');
-  html = html.replace(/<!--\/lit-part-->/g, '');
-  
-  // Clean up any resulting multiple whitespace/newlines
-  html = html.replace(/\n\s*\n\s*\n/g, '\n\n');
-  
-  return html;
-}
-
-/**
- * Transform Lit template result to HTML string
- */
-export async function litToHTML(templateResult) {
-  if (!templateResult || !templateResult._$litType$) {
-    return '';
-  }
-  
-  const temp = document.createElement('div');
-  litRender(templateResult, temp);
-  
-  // Wait for any custom elements to upgrade
-  await new Promise(resolve => setTimeout(resolve, 50));
-  
-  // Strip Lit comments before formatting
-  const cleanedHTML = stripLitComments(temp.innerHTML);
-  
-  return formatHTML(cleanedHTML);
-}
-
-/**
- * Global decorator that provides HTML source code display
- */
-export const withHTMLSource = (storyFn, context) => {
-  const story = storyFn();
-  
-  // For docs mode, Storybook will automatically show source
-  // We just need to ensure the parameters are set
-  if (context.viewMode === 'docs') {
-    return story;
-  }
-  
-  // For canvas/story mode, we'll add a source viewer below the story
-  const container = document.createElement('div');
-  container.style.cssText = 'display: flex; flex-direction: column; gap: 1rem; width: 100%; height: 100%;';
-  
-  // Story container
-  const storyContainer = document.createElement('div');
-  storyContainer.id = 'story-preview';
-  storyContainer.style.cssText = 'flex: 1; overflow: auto;';
-  
-  // Source panel with copy button
-  const sourceSection = document.createElement('div');
-  sourceSection.className = 'html-source-section';
-  sourceSection.innerHTML = `
-    <details class="html-source-details surface-subtle">
-      <summary class="html-source-summary surface-elevated">
-        <span class="html-source-title">
-          <span class="html-source-icon">📝</span>
-          <span>View HTML Source</span>
-        </span>
-        <button id="copy-source-btn" class="btn-outline">
-          📋 Copy HTML
-        </button>
-      </summary>
-      <div class="html-source-content">
-        <pre class="html-source-pre"><code class="html-source-code"></code></pre>
-      </div>
-    </details>
-  `;
-  
-  container.appendChild(storyContainer);
-  container.appendChild(sourceSection);
-  
-  // Render the story
-  setTimeout(async () => {
-    if (story && story._$litType$) {
-      litRender(story, storyContainer);
-    } else if (story instanceof HTMLElement) {
-      storyContainer.appendChild(story);
-    } else if (typeof story === 'string') {
-      storyContainer.innerHTML = story;
-    }
-    
-    // Extract and display HTML
-    setTimeout(async () => {
-      let html = '';
-      
-      if (story && story._$litType$) {
-        html = await litToHTML(story);
-      } else {
-        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;
-      }
-      
-      // Setup copy button
-      const copyBtn = sourceSection.querySelector('#copy-source-btn');
-      if (copyBtn && html) {
-        copyBtn.addEventListener('click', async (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          
-          try {
-            await navigator.clipboard.writeText(html);
-            const originalClass = copyBtn.className;
-            copyBtn.textContent = '✅ Copied!';
-            copyBtn.className = 'btn-primary';
-            
-            setTimeout(() => {
-              copyBtn.textContent = '📋 Copy HTML';
-              copyBtn.className = originalClass;
-            }, 2000);
-          } catch (err) {
-            console.error('Copy failed:', err);
-            const originalText = copyBtn.textContent;
-            copyBtn.textContent = '❌ Failed';
-            setTimeout(() => {
-              copyBtn.textContent = originalText;
-            }, 2000);
-          }
-        });
-      }
-    }, 100);
-  }, 0);
-  
-  return container;
-};
+/**
+ * HTML Preview and Copy Utility for Storybook
+ * Provides HTML source viewing and copy functionality for all stories
+ * Uses Shiki for syntax highlighting
+ */
+
+import { render as litRender } from 'lit';
+import { highlight, getCurrentTheme, escapeHtml, preloadShiki } from './shiki.js';
+
+// Pre-load Shiki in the background
+preloadShiki();
+
+/**
+ * Format HTML string with proper indentation
+ */
+export function formatHTML(html) {
+  if (!html) return '';
+  
+  let formatted = '';
+  let indent = 0;
+  const tab = '  ';
+  
+  const tokens = html.split(/(<[^>]+>)/g).filter(Boolean);
+  
+  tokens.forEach((token) => {
+    if (token.startsWith('</')) {
+      // Closing tag
+      indent = Math.max(0, indent - 1);
+      formatted += '\n' + tab.repeat(indent) + token;
+    } else if (token.startsWith('<')) {
+      // Opening tag
+      const isSelfClosing = token.endsWith('/>') || token.match(/<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)/);
+      formatted += '\n' + tab.repeat(indent) + token;
+      if (!isSelfClosing) {
+        indent++;
+      }
+    } else if (token.trim()) {
+      // Text content
+      formatted += token.trim();
+    }
+  });
+  
+  return formatted.trim();
+}
+
+/**
+ * Extract HTML from a rendered story
+ */
+export function extractHTML(element) {
+  if (!element) return '';
+  
+  // Clone the element to avoid modifying the original
+  const clone = element.cloneNode(true);
+  
+  // Clean up any Storybook-specific attributes or classes
+  const cleanElement = (el) => {
+    if (el.removeAttribute) {
+      el.removeAttribute('data-story-id');
+      el.removeAttribute('data-view-mode');
+    }
+    if (el.children) {
+      Array.from(el.children).forEach(cleanElement);
+    }
+  };
+  
+  cleanElement(clone);
+  return clone.innerHTML || '';
+}
+
+/**
+ * Strip Lit template comments from rendered HTML
+ * Removes markers like <!--?lit$641514976$-->, <!---->, etc.
+ */
+export function stripLitComments(html) {
+  if (!html) return '';
+  
+  // Remove Lit binding markers: <!--?lit$...$-->
+  html = html.replace(/<!--\?lit\$[^$]+\$-->/g, '');
+  
+  // Remove empty Lit comments: <!---->
+  html = html.replace(/<!---->/g, '');
+  
+  // Remove Lit template marker comments: <!--lit-part...-->
+  html = html.replace(/<!--lit-part[^>]*-->/g, '');
+  html = html.replace(/<!--\/lit-part-->/g, '');
+  
+  // Clean up any resulting multiple whitespace/newlines
+  html = html.replace(/\n\s*\n\s*\n/g, '\n\n');
+  
+  return html;
+}
+
+/**
+ * Transform Lit template result to HTML string
+ */
+export async function litToHTML(templateResult) {
+  if (!templateResult || !templateResult._$litType$) {
+    return '';
+  }
+  
+  const temp = document.createElement('div');
+  litRender(templateResult, temp);
+  
+  // Wait for any custom elements to upgrade
+  await new Promise(resolve => setTimeout(resolve, 50));
+  
+  // Strip Lit comments before formatting
+  const cleanedHTML = stripLitComments(temp.innerHTML);
+  
+  return formatHTML(cleanedHTML);
+}
+
+/**
+ * Global decorator that provides HTML source code display
+ */
+export const withHTMLSource = (storyFn, context) => {
+  const story = storyFn();
+  
+  // For docs mode, Storybook will automatically show source
+  // We just need to ensure the parameters are set
+  if (context.viewMode === 'docs') {
+    return story;
+  }
+  
+  // For canvas/story mode, we'll add a source viewer below the story
+  const container = document.createElement('div');
+  container.style.cssText = 'display: flex; flex-direction: column; gap: 1rem; width: 100%; height: 100%;';
+  
+  // Story container
+  const storyContainer = document.createElement('div');
+  storyContainer.id = 'story-preview';
+  storyContainer.style.cssText = 'flex: 1; overflow: auto;';
+  
+  // Source panel with copy button
+  const sourceSection = document.createElement('div');
+  sourceSection.className = 'html-source-section';
+  sourceSection.innerHTML = `
+    <details class="html-source-details surface-subtle">
+      <summary class="html-source-summary surface-elevated">
+        <span class="html-source-title">
+          <span class="html-source-icon">📝</span>
+          <span>View HTML Source</span>
+        </span>
+        <button id="copy-source-btn" class="btn-outline">
+          📋 Copy HTML
+        </button>
+      </summary>
+      <div class="html-source-content">
+        <pre class="html-source-pre"><code class="html-source-code"></code></pre>
+      </div>
+    </details>
+  `;
+  
+  container.appendChild(storyContainer);
+  container.appendChild(sourceSection);
+  
+  // Render the story
+  setTimeout(async () => {
+    if (story && story._$litType$) {
+      litRender(story, storyContainer);
+    } else if (story instanceof HTMLElement) {
+      storyContainer.appendChild(story);
+    } else if (typeof story === 'string') {
+      storyContainer.innerHTML = story;
+    }
+    
+    // Extract and display HTML
+    setTimeout(async () => {
+      let html = '';
+      
+      if (story && story._$litType$) {
+        html = await litToHTML(story);
+      } else {
+        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;
+      }
+      
+      // Setup copy button
+      const copyBtn = sourceSection.querySelector('#copy-source-btn');
+      if (copyBtn && html) {
+        copyBtn.addEventListener('click', async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          
+          try {
+            await navigator.clipboard.writeText(html);
+            const originalClass = copyBtn.className;
+            copyBtn.textContent = '✅ Copied!';
+            copyBtn.className = 'btn-primary';
+            
+            setTimeout(() => {
+              copyBtn.textContent = '📋 Copy HTML';
+              copyBtn.className = originalClass;
+            }, 2000);
+          } catch (err) {
+            console.error('Copy failed:', err);
+            const originalText = copyBtn.textContent;
+            copyBtn.textContent = '❌ Failed';
+            setTimeout(() => {
+              copyBtn.textContent = originalText;
+            }, 2000);
+          }
+        });
+      }
+    }, 100);
+  }, 0);
+  
+  return container;
+};

package/.storybook/main.js

@@ -29,9 +29,8 @@ const config = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    './addons/pds-configurator/register.cjs',
-    './addons/html-preview/register.cjs',
-    './addons/description/register.cjs'
+    './addons/html-preview/register.js',
+    './addons/description/register.js'
   ],
   framework: {
     name: '@storybook/web-components-vite',
@@ -74,15 +73,11 @@ const config = {
       '#pds/lit': resolve(pdsSrcPath, 'js/lit.js'),
     };
 
-    // In monorepo, pds-configurator is in a separate package, not in src/js
-    // This must be defined BEFORE @pds-src to take precedence
-    if (!isPackage) {
-       aliases['@pds-src/js/pds-configurator'] = resolve(currentDirname, '../../../packages/pds-configurator/src');
-       
-       // Map the local src folder to the monorepo root src folder
-       // This eliminates the need for a copied src folder during development
+     // In monorepo, map the local src folder to the monorepo root src folder
+     // This eliminates the need for a copied src folder during development
+     if (!isPackage) {
        aliases[resolve(currentDirname, '../src')] = pdsSrcPath;
-    }
+     }
 
     aliases['@pds-src'] = pdsSrcPath;
     config.resolve.alias = aliases;

package/.storybook/preview.js

@@ -2,12 +2,11 @@ import { addons } from '@storybook/preview-api';
 import { SELECT_STORY, UPDATE_GLOBALS } from '@storybook/core-events';
 import React from 'react';
 import { Title, Subtitle, Description as DocsDescription, Controls } from '@storybook/blocks';
-import { PDS } from '@pure-ds/core';
+import { PDS } from '@pds-src/js/pds.js';
 import { presets } from '@pds-src/js/pds-core/pds-config.js';
 import { Generator } from '@pds-src/js/pds-core/pds-generator.js';
 import { applyStyles } from '@pds-src/js/pds-core/pds-runtime.js';
 import { config as userConfig } from '@user/pds-config';
-import './addons/pds-configurator/preview.js';
 import { withHTMLExtractor } from './addons/html-preview/preview.js';
 import { withDescription } from './addons/description/preview.js';
 import './htmlPreview.css';
@@ -17,10 +16,6 @@ import { toastFormData } from '../stories/utils/toast-utils.js';
 // Expose toastFormData globally for inline event handlers
 window.toastFormData = toastFormData;
 
-console.log('[PDS Storybook] preview.js loaded');
-console.log('[PDS Storybook] PDS import', PDS ? 'OK' : 'MISSING');
-console.log('[PDS Storybook] location', window.location.href);
-
 // Get initial preset from storage or URL or default
 const getInitialPreset = () => {
   try {
@@ -65,7 +60,6 @@ const setLiveGenerator = (generator) => {
 };
 
 PDS.addEventListener('pds:ready', (event) => {
-  console.log('[PDS Storybook] pds:ready event', event?.detail || event);
   if (event?.detail?.generator) {
     setLiveGenerator(event.detail.generator);
   }
@@ -73,7 +67,6 @@ PDS.addEventListener('pds:ready', (event) => {
 
 // Wrap top-level await in IIFE for production build compatibility
 (async () => {
-  console.log('[PDS Storybook] init start');
   PDS.initializing = true;
   
   // NEVER apply global styles on init - only apply in story decorator
@@ -108,14 +101,7 @@ PDS.addEventListener('pds:ready', (event) => {
   // Always override mode to 'live' regardless of user config to prevent style injection failures
   pdsOptions.mode = 'live';
 
-  let initResult;
-  try {
-    initResult = await PDS.start(pdsOptions);
-    console.log('[PDS Storybook] PDS.start resolved', initResult);
-  } catch (error) {
-    console.error('[PDS Storybook] PDS.start failed', error);
-    throw error;
-  }
+  const initResult = await PDS.start(pdsOptions);
   setLiveGenerator(initResult?.generator);
   PDS.initializing = false;