@pure-ds/storybook 0.1.0

package/.storybook/addons/pds-configurator/preview.js

@@ -0,0 +1,159 @@
+/**
+ * Preview-side addon logic for PDS Configurator
+ * Runs in the iframe where stories are rendered
+ */
+
+import { addons } from '@storybook/preview-api';
+import { EVENTS } from './constants.js';
+
+let drawerElement = null;
+let configFormLoaded = false;
+
+// Initialize configurator UI in preview
+async function initializeConfigurator() {
+  if (drawerElement) return;
+
+  // Force-load pds-drawer by triggering AutoDefiner
+  // Create a temporary element to force the component to load
+  if (!customElements.get('pds-drawer')) {
+    const temp = document.createElement('pds-drawer');
+    temp.style.display = 'none';
+    document.body.appendChild(temp);
+    try {
+      await customElements.whenDefined('pds-drawer');
+    } finally {
+      temp.remove();
+    }
+  }
+
+  // Create drawer for configurator
+  drawerElement = document.createElement('pds-drawer');
+  drawerElement.id = 'storybook-pds-configurator';
+  drawerElement.setAttribute('position', 'bottom');
+  drawerElement.setAttribute('show-close', '');
+  drawerElement.style.zIndex = '999999';
+  
+  // Create header
+  //const header = document.createElement('div');
+  //header.slot = 'drawer-header';
+  //header.innerHTML = `
+  //`;
+  //drawerElement.appendChild(header);
+
+  // Create configurator content container
+  const content = document.createElement('div');
+  content.slot = 'drawer-content';
+  content.id = 'configurator-content';
+  
+  content.innerHTML = `<p style="padding: 1rem;">Loading configurator...</p>`;
+  drawerElement.appendChild(content);
+
+  document.body.appendChild(drawerElement);
+
+  // Load pds-config-form dynamically
+  loadConfigForm();
+}
+
+async function loadConfigForm() {
+  if (configFormLoaded) return;
+
+  try {
+    // Import the config form component with timeout
+    const importTimeout = new Promise((_, reject) => 
+      setTimeout(() => reject(new Error('Config form import timeout')), 3000)
+    );
+    
+    await Promise.race([
+      import('../../../../pds-configurator/src/pds-config-form.js'),
+      importTimeout
+    ]);
+    
+    // Wait for component to be defined
+    await customElements.whenDefined('pds-config-form');
+    
+    const content = document.getElementById('configurator-content');
+    if (content) {
+      content.innerHTML = '<pds-config-form id="storybook-config-form"></pds-config-form>';
+      configFormLoaded = true;
+
+      // Listen for design updates from the form
+      const PDS = (await import('../../../../../src/js/pds.js')).PDS;
+      PDS.addEventListener('pds:design:updated', async (e) => {
+        console.log('Design updated in configurator:', e.detail);
+        
+        try {
+          // The event detail contains both config and designer from pds-config-form
+          if (e.detail.designer) {
+            // Apply the styles from the designer that was already created by pds-config-form
+            await PDS.Generator.applyStyles(e.detail.designer);
+          }
+          
+          // Notify manager
+          const channel = addons.getChannel();
+          channel.emit(EVENTS.DESIGN_UPDATED, e.detail);
+        } catch (error) {
+          console.error('Failed to apply design update:', error);
+        }
+      });
+    }
+  } catch (error) {
+    console.error('Failed to load config form:', error);
+    const content = document.getElementById('configurator-content');
+    if (content) {
+      content.innerHTML = `<p style="padding: 1rem; color: red;">Error loading configurator: ${error.message}</p>`;
+    }
+  }
+}
+
+// Listen for addon events from manager
+if (typeof window !== 'undefined') {
+  const channel = addons.getChannel();
+  
+  channel.on(EVENTS.OPEN_CONFIGURATOR, async () => {
+    console.log('🎯 OPEN_CONFIGURATOR event received in preview');
+    try {
+      // Add timeout to prevent hanging forever
+      const timeout = new Promise((_, reject) => 
+        setTimeout(() => reject(new Error('Configurator initialization timeout')), 5000)
+      );
+      
+      await Promise.race([initializeConfigurator(), timeout]);
+      
+      if (drawerElement) {
+        console.log('✅ Opening configurator drawer');
+        // Always open (no toggle)
+        drawerElement.open = true;
+      } else {
+        throw new Error('Drawer element failed to initialize');
+      }
+    } catch (error) {
+      console.error('❌ Failed to open configurator:', error);
+      // Show user-friendly error
+      alert(`Failed to open PDS Configurator: ${error.message}\n\nPlease refresh the page and try again.`);
+    }
+  });
+
+  channel.on(EVENTS.QUERY_EXECUTED, async ({ query }) => {
+    try {
+      const PDS = (await import('../../../../../src/js/pds.js')).PDS;
+      const results = await PDS.query(query);
+      
+      // Send results back to manager
+      channel.emit(EVENTS.QUERY_EXECUTED + '_RESPONSE', {
+        query,
+        results: results.slice(0, 10).map(r => ({
+          id: r.text,
+          title: r.text,
+          value: r.value,
+          category: r.category,
+          onClick: () => {
+            console.log('Query result clicked:', r);
+            // Could copy to clipboard or navigate
+          }
+        }))
+      });
+    } catch (error) {
+      console.error('Query execution failed:', error);
+    }
+  });
+}

package/.storybook/addons/pds-configurator/register.js

@@ -0,0 +1,24 @@
+import { addons, types } from '@storybook/manager-api';
+import { ADDON_ID, TOOL_ID } from './constants.js';
+import { Tool } from './Tool.js';
+import { SearchTool } from './SearchTool.js';
+
+const SEARCH_TOOL_ID = `${ADDON_ID}/search`;
+
+addons.register(ADDON_ID, () => {
+  // Register PDS Configurator button
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: 'PDS Configurator',
+    match: ({ viewMode, tabId }) => !tabId && (viewMode === 'story' || viewMode === 'docs'),
+    render: Tool
+  });
+
+  // Register Quick Search button
+  addons.add(SEARCH_TOOL_ID, {
+    type: types.TOOL,
+    title: 'Quick Search',
+    match: ({ viewMode, tabId }) => !tabId && (viewMode === 'story' || viewMode === 'docs'),
+    render: SearchTool
+  });
+});

package/.storybook/docs.css

@@ -0,0 +1,35 @@
+/* Custom Docs page styling - hide all examples, show only description */
+
+/* Hide ALL story previews and interactive elements in Docs */
+.docs-story,
+.sbdocs-preview,
+.sb-unstyled,
+.docblock-canvas-wrapper,
+.docblock-canvas,
+.docblock-argstable-wrapper,
+.docblock-argstable,
+.docblock-source-wrapper,
+.docblock-source,
+.sbdocs-preview-wrapper,
+.sb-story,
+[id*="story--"],
+[class*="story-wrapper"] {
+  display: none !important;
+}
+
+/* Show only the description block */
+.sbdocs-wrapper {
+  background: var(--surface-bg);
+  color: var(--color-text-primary);
+}
+
+.sbdocs .sbdocs-title,
+.sbdocs .sbdocs-subtitle {
+  color: var(--color-text-primary);
+}
+
+.sbdocs-description,
+.sbdocs .sbdocs-p {
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}

package/.storybook/htmlPreview.css

@@ -0,0 +1,103 @@
+/* HTML Source Preview Styles */
+
+.html-source-section {
+  border-top: 1px solid var(--color-border);
+}
+
+.html-source-details {
+  margin: var(--spacing-4, 1rem);
+}
+
+.html-source-summary {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  cursor: pointer;
+  font-weight: 600;
+  user-select: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: var(--radius-md, 4px);
+}
+
+.html-source-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.html-source-icon {
+  font-size: 1.25rem;
+}
+
+.html-source-content {
+  padding: var(--spacing-4, 1rem);
+}
+
+.html-source-pre {
+  margin: 0;
+  padding: var(--spacing-4, 1rem);
+  border-radius: var(--radius-md, 4px);
+  overflow-x: auto;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  tab-size: 2;
+}
+
+/* Syntax highlighting colors - work in both light and dark modes */
+:root {
+  --code-bg: #282c34;
+  --code-text: #abb2bf;
+  --code-tag: #e06c75;
+  --code-attr: #d19a66;
+  --code-value: #98c379;
+  --code-comment: #5c6370;
+}
+
+[data-theme="dark"] {
+  --code-bg: #1e1e1e;
+  --code-text: #d4d4d4;
+  --code-tag: #569cd6;
+  --code-attr: #9cdcfe;
+  --code-value: #ce9178;
+  --code-comment: #6a9955;
+}
+
+.html-source-pre {
+  background: var(--code-bg);
+}
+
+.html-source-code {
+  color: var(--code-text);
+}
+
+.html-token-tag {
+  color: var(--code-tag);
+}
+
+.html-token-attr {
+  color: var(--code-attr);
+}
+
+.html-token-value {
+  color: var(--code-value);
+}
+
+.html-token-comment {
+  color: var(--code-comment);
+  font-style: italic;
+}
+
+pds-config-form {
+  position: relative;
+  label:has(input[type="color"]){
+    display: inline-block;
+    min-width: 7rem;
+  }
+
+  .designer-toolbar {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}

package/.storybook/htmlPreview.js

@@ -0,0 +1,271 @@
+/**
+ * HTML Preview and Copy Utility for Storybook
+ * Provides HTML source viewing and copy functionality for all stories
+ * Uses Storybook's built-in source code display in Docs mode
+ */
+
+import { render as litRender } from 'lit';
+
+/**
+ * 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 || '';
+}
+
+/**
+ * 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));
+  
+  return formatHTML(temp.innerHTML);
+}
+
+/**
+ * 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');
+      if (codeEl && html) {
+        // Simple syntax highlighter that properly tokenizes HTML
+        const highlightHTML = (code) => {
+          let result = '';
+          let i = 0;
+          
+          while (i < code.length) {
+            // Handle HTML comments
+            if (code.substr(i, 4) === '<!--') {
+              const end = code.indexOf('-->', i);
+              if (end !== -1) {
+                const comment = code.substring(i, end + 3);
+                result += `<span class="html-token-comment">${escapeHtml(comment)}</span>`;
+                i = end + 3;
+                continue;
+              }
+            }
+            
+            // Handle tags
+            if (code[i] === '<') {
+              const tagEnd = code.indexOf('>', i);
+              if (tagEnd !== -1) {
+                const tagContent = code.substring(i + 1, tagEnd);
+                result += '&lt;';
+                
+                // Check if it's a closing tag
+                if (tagContent[0] === '/') {
+                  result += '/';
+                  const tagName = tagContent.substring(1).split(/[\s>]/)[0];
+                  result += `<span class="html-token-tag">${escapeHtml(tagName)}</span>`;
+                } else {
+                  // Parse tag name and attributes
+                  const parts = tagContent.match(/^([\w-]+)([\s\S]*?)(\/?)?$/);
+                  if (parts) {
+                    const [, tagName, attrsStr, slash] = parts;
+                    result += `<span class="html-token-tag">${escapeHtml(tagName)}</span>`;
+                    
+                    // Parse attributes
+                    if (attrsStr.trim()) {
+                      const attrRegex = /([\w-]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]*)))?/g;
+                      let match;
+                      let lastIndex = 0;
+                      
+                      while ((match = attrRegex.exec(attrsStr)) !== null) {
+                        // Add whitespace before attribute
+                        result += escapeHtml(attrsStr.substring(lastIndex, match.index));
+                        
+                        const [fullMatch, attrName, doubleQuoted, singleQuoted, unquoted] = match;
+                        result += `<span class="html-token-attr">${escapeHtml(attrName)}</span>`;
+                        
+                        if (doubleQuoted !== undefined) {
+                          result += `=<span class="html-token-value">"${escapeHtml(doubleQuoted)}"</span>`;
+                        } else if (singleQuoted !== undefined) {
+                          result += `=<span class="html-token-value">'${escapeHtml(singleQuoted)}'</span>`;
+                        } else if (unquoted !== undefined) {
+                          result += `=<span class="html-token-value">${escapeHtml(unquoted)}</span>`;
+                        }
+                        
+                        lastIndex = match.index + fullMatch.length;
+                      }
+                      
+                      result += escapeHtml(attrsStr.substring(lastIndex));
+                    }
+                    
+                    if (slash) result += '/';
+                  }
+                }
+                
+                result += '&gt;';
+                i = tagEnd + 1;
+                continue;
+              }
+            }
+            
+            // Regular text
+            result += escapeHtml(code[i]);
+            i++;
+          }
+          
+          return result;
+        };
+        
+        const escapeHtml = (text) => {
+          return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+        };
+        
+        codeEl.innerHTML = highlightHTML(html);
+      }
+      
+      // 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;
+};