@pure-ds/storybook 0.1.0

package/.storybook/addons/description/preview.js

@@ -0,0 +1,15 @@
+import { addons } from '@storybook/preview-api';
+
+export const withDescription = (StoryFn, context) => {
+  const channel = addons.getChannel();
+  const description = context.parameters?.docs?.description?.component || '';
+  const title = context.title || '';
+
+  // Send description to the panel
+  channel.emit('pds-description/update', {
+    title,
+    description
+  });
+
+  return StoryFn();
+};

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

@@ -0,0 +1,60 @@
+import { addons, types } from '@storybook/manager-api';
+import { AddonPanel } from '@storybook/components';
+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] = useState('');
+  const [title, setTitle] = useState('');
+
+  useEffect(() => {
+    const channel = addons.getChannel();
+    
+    const updateDescription = (data) => {
+      setTitle(data.title || '');
+      setDescription(data.description || 'No description available.');
+    };
+
+    channel.on('pds-description/update', updateDescription);
+
+    return () => {
+      channel.removeListener('pds-description/update', updateDescription);
+    };
+  }, []);
+
+  return React.createElement('div', {
+    style: {
+      padding: '1rem',
+      height: '100%',
+      overflow: 'auto'
+    }
+  },
+    React.createElement('div', {
+      style: {
+        marginBottom: '0.5rem'
+      }
+    },
+      React.createElement('strong', {
+        style: {
+          fontSize: '1rem'
+        }
+      }, title)
+    ),
+    React.createElement(Markdown, null, description)
+  );
+};
+
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Description',
+    render: ({ active }) => {
+      return React.createElement(AddonPanel, { active },
+        React.createElement(DescriptionPanel)
+      );
+    }
+  });
+});

package/.storybook/addons/html-preview/Panel.jsx

@@ -0,0 +1,327 @@
+import React, { useState, useCallback } from 'react';
+import { useChannel } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { EVENTS } from './constants.js';
+import { styled } from '@storybook/theming';
+
+const Container = styled.div`
+  position: relative;
+  height: 100%;
+  overflow: auto;
+  background: ${props => props.theme.background.content};
+`;
+
+const CodeBlock = styled.pre`
+  margin: 0;
+  padding: 16px;
+  padding-bottom: ${props => (props.$compact ? '24px' : '60px')}; /* Space for fixed button */
+  font-family: ${props => props.theme.typography.fonts.mono};
+  font-size: 13px;
+  line-height: 1.6;
+  color: ${props => props.theme.color.defaultText};
+  background: transparent;
+  tab-size: 2;
+  
+  .html-token-tag {
+    color: #e06c75;
+  }
+  
+  .html-token-attr {
+    color: #d19a66;
+  }
+  
+  .html-token-value {
+    color: #98c379;
+  }
+  
+  .html-token-comment {
+    color: #5c6370;
+    font-style: italic;
+  }
+`;
+
+const SectionWrapper = styled.div`
+  border-bottom: 1px solid ${props => props.theme.appBorderColor};
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+`;
+
+const SectionHeading = styled.h3`
+  margin: 0;
+  padding: 16px 16px 0;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: ${props => props.theme.color.mediumdark};
+`;
+
+const Subheading = styled.h4`
+  margin: 0;
+  padding: 12px 16px 0;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: ${props => props.theme.color.mediumdark};
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: ${props => props.theme.color.mediumdark};
+  text-align: center;
+  padding: 20px;
+`;
+
+const CopyButton = styled(IconButton)`
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 10;
+  background: ${props => props.theme.background.app};
+  border: 1px solid ${props => props.theme.appBorderColor};
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  
+  &:hover {
+    background: ${props => props.theme.background.hoverable};
+  }
+  
+  &.copied {
+    background: ${props => props.theme.color.positive};
+    color: white;
+    border-color: ${props => props.theme.color.positive};
+  }
+`;
+
+const CopyIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <rect x="3" y="3" width="8" height="9" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+    <path d="M5 3V2C5 1.44772 5.44772 1 6 1H12C12.5523 1 13 1.44772 13 2V10C13 10.5523 12.5523 11 12 11H11" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path d="M2 7L5.5 10.5L12 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+export const Panel = ({ active }) => {
+  const [source, setSource] = useState({ markup: '', jsonForms: [] });
+  const [copied, setCopied] = useState(false);
+
+  useChannel({
+    [EVENTS.UPDATE_HTML]: (payload) => {
+      if (typeof payload === 'string') {
+        setSource({ markup: payload || '', jsonForms: [] });
+        return;
+      }
+
+      if (payload && typeof payload === 'object') {
+        setSource({
+          markup: payload.markup || '',
+          jsonForms: Array.isArray(payload.jsonForms) ? payload.jsonForms : []
+        });
+        return;
+      }
+
+      setSource({ markup: '', jsonForms: [] });
+    }
+  });
+
+  // Request HTML update when panel becomes active
+  React.useEffect(() => {
+    if (active && !source.markup && source.jsonForms.length === 0) {
+      // Trigger a re-extraction by emitting a request event
+      // The decorator will pick this up on the next render cycle
+      const container = document.querySelector('#storybook-root');
+      if (container && container.innerHTML) {
+        // Panel just became active, HTML might already be there
+        // Give it a moment to process
+        setTimeout(() => {
+          // This will be caught by subsequent decorator runs
+        }, 100);
+      }
+    }
+  }, [active, source.markup, source.jsonForms.length]);
+
+  const copyToClipboard = useCallback(async () => {
+    try {
+      if (!source.markup) return;
+      await navigator.clipboard.writeText(source.markup);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, [source.markup]);
+
+  const highlightHTML = useCallback((code) => {
+    if (!code) return '';
+    
+    let result = '';
+    let i = 0;
+    
+    const escapeHtml = (text) => {
+      return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    };
+    
+    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) {
+                  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 hasMarkup = Boolean(source.markup);
+  const hasJsonForms = source.jsonForms.length > 0;
+
+  if (!hasMarkup && !hasJsonForms) {
+    return (
+      <Container>
+        <EmptyState>
+          <p>No code to display</p>
+          <p style={{ fontSize: '0.875rem', opacity: 0.7 }}>Select a story to inspect its output</p>
+        </EmptyState>
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      {hasMarkup && (
+        <SectionWrapper>
+          <SectionHeading>Markup</SectionHeading>
+          <CodeBlock>
+            <code dangerouslySetInnerHTML={{ __html: highlightHTML(source.markup) }} />
+          </CodeBlock>
+        </SectionWrapper>
+      )}
+
+      {hasJsonForms && source.jsonForms.map((form, index) => {
+        const key = form.id ?? index;
+        const heading = source.jsonForms.length > 1 ? (form.label || `Form ${index + 1}`) : 'pds-jsonform';
+
+        return (
+          <SectionWrapper key={key}>
+            <SectionHeading>{heading}</SectionHeading>
+
+            {form.jsonSchema && (
+              <>
+                <Subheading>jsonSchema</Subheading>
+                <CodeBlock $compact>
+                  <code>{form.jsonSchema}</code>
+                </CodeBlock>
+              </>
+            )}
+
+            {form.uiSchema && (
+              <>
+                <Subheading>uiSchema</Subheading>
+                <CodeBlock $compact>
+                  <code>{form.uiSchema}</code>
+                </CodeBlock>
+              </>
+            )}
+
+            {form.options && (
+              <>
+                <Subheading>options</Subheading>
+                <CodeBlock $compact>
+                  <code>{form.options}</code>
+                </CodeBlock>
+              </>
+            )}
+          </SectionWrapper>
+        );
+      })}
+
+      {hasMarkup && (
+        <CopyButton
+          onClick={copyToClipboard}
+          title={copied ? 'Copied!' : 'Copy markup'}
+          className={copied ? 'copied' : ''}
+        >
+          {copied ? <CheckIcon /> : <CopyIcon />}
+        </CopyButton>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,6 @@
+export const ADDON_ID = 'html-preview';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+
+export const EVENTS = {
+  UPDATE_HTML: `${ADDON_ID}/updateHtml`
+};

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

@@ -0,0 +1,178 @@
+import { useEffect } from '@storybook/preview-api';
+import { addons } from '@storybook/preview-api';
+import { EVENTS } from './constants.js';
+import { render as litRender } from 'lit';
+
+/**
+ * Format HTML string with proper indentation
+ */
+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
+ */
+function extractHTML(element) {
+  if (!element) return '';
+  
+  const clone = element.cloneNode(true);
+  
+  // Clean up Storybook-specific attributes
+  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
+ */
+async function litToHTML(templateResult) {
+  if (!templateResult || !templateResult._$litType$) {
+    return '';
+  }
+  
+  const temp = document.createElement('div');
+  litRender(templateResult, temp);
+  
+  await new Promise(resolve => setTimeout(resolve, 50));
+  
+  return formatHTML(temp.innerHTML);
+}
+
+function serializeForDisplay(value) {
+  if (value === undefined) return '';
+  if (typeof value === 'bigint') return value.toString();
+  if (typeof value === 'symbol') return value.toString();
+
+  const seen = new WeakSet();
+
+  const replacer = (key, currentValue) => {
+    if (typeof currentValue === 'function') {
+      return `[Function${currentValue.name ? `: ${currentValue.name}` : ''}]`;
+    }
+    if (typeof currentValue === 'bigint') {
+      return currentValue.toString();
+    }
+    if (typeof currentValue === 'symbol') {
+      return currentValue.toString();
+    }
+    if (currentValue instanceof Map) {
+      return Object.fromEntries(currentValue);
+    }
+    if (currentValue instanceof Set) {
+      return Array.from(currentValue);
+    }
+    if (currentValue instanceof Date) {
+      return currentValue.toISOString();
+    }
+    if (typeof currentValue === 'object' && currentValue !== null) {
+      if (seen.has(currentValue)) {
+        return '[Circular]';
+      }
+      seen.add(currentValue);
+    }
+    return currentValue;
+  };
+
+  try {
+    if (value === null) {
+      return 'null';
+    }
+    return JSON.stringify(value, replacer, 2);
+  } catch (error) {
+    return `/* Unable to serialize value: ${error.message} */`;
+  }
+}
+
+/**
+ * Global decorator that extracts and sends HTML to the panel
+ */
+export const withHTMLExtractor = (storyFn, context) => {
+  const story = storyFn();
+  const channel = addons.getChannel();
+  
+  // Function to extract and send HTML
+  const extractAndSendHTML = async () => {
+    let html = '';
+    
+    // Try to get HTML from the story container
+    const container = document.querySelector('#storybook-root');
+    if (container) {
+      if (story && story._$litType$) {
+        html = await litToHTML(story);
+      } else {
+        html = formatHTML(extractHTML(container));
+      }
+
+      const forms = Array.from(container.querySelectorAll('pds-jsonform'));
+      const jsonForms = forms
+        .map((form, index) => {
+          const label =
+            form.getAttribute?.('id') ||
+            form.getAttribute?.('name') ||
+            (forms.length > 1 ? `Form ${index + 1}` : 'Form');
+
+          const jsonSchema = serializeForDisplay(form.jsonSchema);
+          const uiSchema = serializeForDisplay(form.uiSchema);
+          const options = serializeForDisplay(form.options);
+
+          return {
+            id: index,
+            label,
+            jsonSchema,
+            uiSchema,
+            options
+          };
+        })
+        .filter((entry) => entry.jsonSchema || entry.uiSchema || entry.options);
+
+      channel.emit(EVENTS.UPDATE_HTML, {
+        markup: html || '',
+        jsonForms
+      });
+    }
+  };
+  
+  // Extract and send HTML after render (multiple times to catch async renders)
+  setTimeout(extractAndSendHTML, 50);
+  setTimeout(extractAndSendHTML, 150);
+  setTimeout(extractAndSendHTML, 300);
+  
+  return story;
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { addons, types } from '@storybook/manager-api';
+import { ADDON_ID, PANEL_ID } from './constants.js';
+import { Panel } from './Panel.jsx';
+
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Code',
+    render: ({ active, key }) => (
+      <div style={{ display: active ? 'block' : 'none', height: '100%' }}>
+        <Panel key={key} active={active} />
+      </div>
+    )
+  });
+});

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

@@ -0,0 +1,44 @@
+import React, { useState, useCallback } from 'react';
+import { useChannel } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { EVENTS } from './constants.js';
+
+export const SearchTool = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const channel = useChannel({
+    [EVENTS.QUERY_EXECUTED + '_RESPONSE']: (data) => {
+      console.log('Query response received:', data);
+    }
+  });
+
+  const toggleSearch = useCallback(() => {
+    const newState = !isOpen;
+    console.log('Toggle search - current isOpen:', isOpen, 'newState:', newState);
+    
+    if (newState) {
+      // Emit event to open search in preview
+      const searchQuery = prompt('Enter search query (e.g., "primary color", "spacing", "button"):');
+      if (searchQuery) {
+        console.log('Executing search query:', searchQuery);
+        channel.emit(EVENTS.QUERY_EXECUTED, { query: searchQuery });
+      }
+    }
+    
+    setIsOpen(newState);
+  }, [isOpen, channel]);
+
+  return (
+    <IconButton
+      key="search-tool"
+      active={isOpen}
+      title="Quick Search PDS"
+      onClick={toggleSearch}
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="11" cy="11" r="8" />
+        <path d="m21 21-4.35-4.35" />
+      </svg>
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,30 @@
+import React, { useState, useCallback } from 'react';
+import { useChannel } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { EVENTS } from './constants.js';
+
+export const Tool = () => {
+  const emit = useChannel({
+    [EVENTS.DESIGN_UPDATED]: (data) => {
+      console.log('Design updated in addon:', data);
+    }
+  });
+
+  const openConfigurator = useCallback(() => {
+    console.log('Opening PDS Configurator');
+    emit(EVENTS.OPEN_CONFIGURATOR);
+  }, [emit]);
+
+  return (
+    <IconButton
+      key="configurator-toggle"
+      title="Open PDS Configurator"
+      onClick={openConfigurator}
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+        <circle cx="12" cy="12" r="3"/>
+      </svg>
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,9 @@
+export const ADDON_ID = 'pds-configurator';
+export const TOOL_ID = `${ADDON_ID}/tool`;
+export const PANEL_ID = `${ADDON_ID}/panel`;
+
+export const EVENTS = {
+  OPEN_CONFIGURATOR: `${ADDON_ID}/openConfigurator`,
+  DESIGN_UPDATED: `${ADDON_ID}/designUpdated`,
+  QUERY_EXECUTED: `${ADDON_ID}/queryExecuted`,
+};