@pure-ds/storybook 0.4.4 → 0.4.5

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

@@ -1,9 +1,6 @@
 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
@@ -13,12 +10,4 @@ addons.register(ADDON_ID, () => {
     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/main.js

@@ -40,6 +40,8 @@ const config = {
   staticDirs: [
     { from: join(pdsAssetsPath, 'pds'), to: 'pds' },
     { from: pdsAssetsPath, to: 'assets' },
+    // Serve pds-reference.json for ontology search in manager
+    { from: join(currentDirname, '../dist'), to: 'pds-data' },
     // Add user's public folder if it exists
     ...(fs.existsSync(resolve(process.cwd(), 'public')) ? [{ from: resolve(process.cwd(), 'public'), to: '/' }] : [])
   ],

package/.storybook/manager.js

@@ -0,0 +1,550 @@
+// .storybook/manager.js
+// PDS Ontology-aware sidebar filtering for Storybook
+// Uses experimental_setFilter API to enrich search with PDS ontology concepts
+// ALL DATA IS LOADED FROM pds-reference.json (Single Source of Truth from pds-ontology.js)
+import { addons } from '@storybook/manager-api';
+
+const ADDON_ID = 'pds-ontology-filter';
+const FILTER_ID = 'pds-ontology';
+
+// ═══════════════════════════════════════════════════════════════════════════
+// PDS ONTOLOGY - Loaded from SSoT (pds-reference.json)
+// No hardcoded data here - everything comes from the ontology!
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** @type {Object|null} Loaded reference data */
+let referenceData = null;
+
+/** @type {Map<string, Set<string>>} Term to related terms (from searchRelations + derived) */
+let relationIndex = new Map();
+
+/** @type {Map<string, Set<string>>} Category to member IDs/tags */
+let categoryIndex = new Map();
+
+/** @type {Map<string, Set<string>>} Tag to items that have that tag */
+let tagIndex = new Map();
+
+/**
+ * Load ontology data from pds-reference.json
+ * This file is generated by build-pds-reference.mjs from the SSoT (pds-ontology.js)
+ */
+async function loadOntology() {
+  if (referenceData) return referenceData;
+  
+  try {
+    const response = await fetch('/pds-data/pds-reference.json');
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    referenceData = await response.json();
+    buildIndices();
+    console.log('%c🎨 PDS Ontology loaded from SSoT', 'color: #029cfd; font-weight: bold', {
+      searchRelations: Object.keys(referenceData.ontologyData?.searchRelations || {}).length,
+      primitives: referenceData.ontologyData?.primitives?.length || 0,
+      components: referenceData.ontologyData?.components?.length || 0,
+      enhancements: referenceData.ontologyData?.enhancements?.length || 0
+    });
+    return referenceData;
+  } catch (err) {
+    console.warn('PDS Ontology: Failed to load pds-reference.json', err);
+    referenceData = { components: {}, ontologyData: {}, enhancements: [], tokens: {} };
+    return referenceData;
+  }
+}
+
+/**
+ * Build search indices entirely from loaded ontology data
+ * NO HARDCODED DATA - everything derives from pds-ontology.js via pds-reference.json
+ */
+function buildIndices() {
+  if (!referenceData) return;
+  
+  const od = referenceData.ontologyData || {};
+  
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 1. Build relationIndex from searchRelations (SSoT)
+  // ═══════════════════════════════════════════════════════════════════════════
+  const searchRelations = od.searchRelations || {};
+  
+  // Bidirectional: if "text" → ["typography", "truncate"], then also "typography" → ["text"]
+  Object.entries(searchRelations).forEach(([key, related]) => {
+    const keyLower = key.toLowerCase();
+    if (!relationIndex.has(keyLower)) relationIndex.set(keyLower, new Set());
+    
+    (related || []).forEach(r => {
+      const rLower = String(r).toLowerCase();
+      relationIndex.get(keyLower).add(rLower);
+      
+      // Bidirectional mapping
+      if (!relationIndex.has(rLower)) relationIndex.set(rLower, new Set());
+      relationIndex.get(rLower).add(keyLower);
+    });
+  });
+  
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 2. Build categoryIndex from categories and items
+  // ═══════════════════════════════════════════════════════════════════════════
+  const categories = od.categories || {};
+  
+  // Map declared categories to their member IDs
+  Object.entries(categories).forEach(([cat, info]) => {
+    const catLower = cat.toLowerCase();
+    if (!categoryIndex.has(catLower)) categoryIndex.set(catLower, new Set());
+    
+    (info.primitives || []).forEach(id => categoryIndex.get(catLower).add(id.toLowerCase()));
+    (info.components || []).forEach(id => categoryIndex.get(catLower).add(id.toLowerCase()));
+    (info.patterns || []).forEach(id => categoryIndex.get(catLower).add(id.toLowerCase()));
+  });
+  
+  // Also index items by their declared category
+  (od.primitives || []).forEach(p => {
+    const cat = (p.category || 'other').toLowerCase();
+    if (!categoryIndex.has(cat)) categoryIndex.set(cat, new Set());
+    categoryIndex.get(cat).add(p.id?.toLowerCase());
+    (p.tags || []).forEach(t => categoryIndex.get(cat).add(t.toLowerCase()));
+  });
+  
+  (od.components || []).forEach(c => {
+    const cat = (c.category || 'other').toLowerCase();
+    if (!categoryIndex.has(cat)) categoryIndex.set(cat, new Set());
+    categoryIndex.get(cat).add(c.id?.toLowerCase());
+    (c.tags || []).forEach(t => categoryIndex.get(cat).add(t.toLowerCase()));
+  });
+  
+  (od.layoutPatterns || []).forEach(l => {
+    const cat = (l.category || 'layout').toLowerCase();
+    if (!categoryIndex.has(cat)) categoryIndex.set(cat, new Set());
+    categoryIndex.get(cat).add(l.id?.toLowerCase());
+    (l.tags || []).forEach(t => categoryIndex.get(cat).add(t.toLowerCase()));
+    // Also add selector-derived terms (e.g., ".grid" → "grid")
+    (l.selectors || []).forEach(s => {
+      const cleaned = s.replace(/[.#\[\]]/g, '').toLowerCase();
+      if (cleaned) categoryIndex.get(cat).add(cleaned);
+    });
+  });
+  
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 3. Build tagIndex from all item tags
+  // Maps tags to the specific item IDs that have that tag (NOT the type!)
+  // ═══════════════════════════════════════════════════════════════════════════
+  const indexItemTags = (items) => {
+    (items || []).forEach(item => {
+      const itemId = item.id?.toLowerCase();
+      if (!itemId) return;
+      
+      (item.tags || []).forEach(tag => {
+        const tagLower = tag.toLowerCase();
+        if (!tagIndex.has(tagLower)) tagIndex.set(tagLower, new Set());
+        tagIndex.get(tagLower).add(itemId);
+        
+        // Also add tag→id relations (but NOT the generic type like 'primitive')
+        if (!relationIndex.has(tagLower)) relationIndex.set(tagLower, new Set());
+        relationIndex.get(tagLower).add(itemId);
+      });
+    });
+  };
+  
+  indexItemTags(od.primitives);
+  indexItemTags(od.components);
+  indexItemTags(od.layoutPatterns);
+  indexItemTags(od.enhancements);
+  
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 4. Index utilities (text, backdrop, border, etc.)
+  // ═══════════════════════════════════════════════════════════════════════════
+  const utilities = od.utilities || {};
+  Object.entries(utilities).forEach(([group, value]) => {
+    const groupLower = group.toLowerCase();
+    if (!categoryIndex.has('utility')) categoryIndex.set('utility', new Set());
+    categoryIndex.get('utility').add(groupLower);
+    
+    // If value is an object with arrays, index the class names
+    if (typeof value === 'object' && value !== null) {
+      Object.entries(value).forEach(([subgroup, classes]) => {
+        if (Array.isArray(classes)) {
+          classes.forEach(cls => {
+            const cleaned = cls.replace(/[.#\[\]]/g, '').toLowerCase();
+            if (!relationIndex.has(groupLower)) relationIndex.set(groupLower, new Set());
+            relationIndex.get(groupLower).add(cleaned);
+            // Bidirectional
+            if (!relationIndex.has(cleaned)) relationIndex.set(cleaned, new Set());
+            relationIndex.get(cleaned).add(groupLower);
+          });
+        }
+      });
+    }
+  });
+  
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 5. Index components from the components object (with pdsTags)
+  // ═══════════════════════════════════════════════════════════════════════════
+  Object.values(referenceData.components || {}).forEach(comp => {
+    const tag = comp.tag?.toLowerCase();
+    const name = comp.displayName?.toLowerCase();
+    const cat = (comp.ontology?.category || comp.category || 'other').toLowerCase();
+    
+    if (!categoryIndex.has(cat)) categoryIndex.set(cat, new Set());
+    if (tag) categoryIndex.get(cat).add(tag);
+    if (name) categoryIndex.get(cat).add(name);
+    
+    // Index component tags
+    (comp.pdsTags || comp.ontology?.tags || []).forEach(t => {
+      const tagLower = t.toLowerCase();
+      if (!tagIndex.has(tagLower)) tagIndex.set(tagLower, new Set());
+      tagIndex.get(tagLower).add(tag);
+      
+      if (!relationIndex.has(tagLower)) relationIndex.set(tagLower, new Set());
+      relationIndex.get(tagLower).add(tag);
+      if (tag) {
+        if (!relationIndex.has(tag)) relationIndex.set(tag, new Set());
+        relationIndex.get(tag).add(tagLower);
+      }
+    });
+  });
+  
+  console.log('%c📚 Ontology indices built', 'color: #10b981', {
+    relations: relationIndex.size,
+    categories: categoryIndex.size,
+    tags: tagIndex.size
+  });
+}
+
+/**
+ * Expand a search query using ontology indices
+ * @param {string} query - User's search term
+ * @returns {string[]} - Array of related tags to search for
+ */
+function expandQuery(query) {
+  const q = query.toLowerCase().trim();
+  if (!q) return [];
+  
+  const terms = new Set([q]);
+  
+  // 1. Check searchRelations (primary SSoT for relationships)
+  if (relationIndex.has(q)) {
+    relationIndex.get(q).forEach(t => terms.add(t));
+  }
+  
+  // 2. Check if query matches a category - expand to all category members
+  if (categoryIndex.has(q)) {
+    categoryIndex.get(q).forEach(t => terms.add(t));
+  }
+  
+  // 3. Check if query is a tag - expand to items with that tag
+  if (tagIndex.has(q)) {
+    tagIndex.get(q).forEach(t => terms.add(t));
+  }
+  
+  // 4. Partial matches: only for longer queries (3+ chars) to avoid over-matching
+  // Only add the matched key - NOT its relations (that would cause transitive pollution)
+  if (q.length >= 3) {
+    relationIndex.forEach((related, key) => {
+      // Only match if query is a prefix/suffix of key or vice versa
+      const isPrefix = key.startsWith(q) || q.startsWith(key);
+      const isSuffix = key.endsWith(q) || q.endsWith(key);
+      if (isPrefix || isSuffix) {
+        terms.add(key);
+        // Don't add related terms here - that causes transitive expansion pollution
+      }
+    });
+  }
+  
+  // 5. Component tag variations (handle pds- prefix)
+  // Only add the component's tag/name - NOT all its pdsTags (which are too generic)
+  if (referenceData?.components) {
+    Object.values(referenceData.components).forEach(comp => {
+      const tag = comp.tag?.toLowerCase();
+      const name = comp.displayName?.toLowerCase();
+      const tagWithoutPrefix = tag?.replace('pds-', '');
+      
+      // Match if query equals or closely matches the component
+      if (tag === q || name === q || tagWithoutPrefix === q || 
+          tag?.includes(q) || name?.includes(q)) {
+        terms.add(tag);
+        terms.add(tagWithoutPrefix);
+        terms.add(name);
+        // Don't add pdsTags - they're too generic and cause over-matching
+      }
+    });
+  }
+  
+  // 6. Enhancement selectors
+  (referenceData?.enhancements || []).forEach(e => {
+    const sel = e.selector?.toLowerCase();
+    const id = e.id?.toLowerCase();
+    if (sel?.includes(q) || id?.includes(q)) {
+      terms.add(sel);
+      terms.add(id);
+    }
+  });
+  
+  return Array.from(terms).filter(Boolean);
+}
+
+/**
+ * Check if a story item matches the search query using ontology relations
+ * @param {Object} item - Storybook sidebar item
+ * @param {string[]} expandedTerms - Expanded search terms
+ * @returns {boolean}
+ */
+function matchesOntology(item, expandedTerms) {
+  if (!expandedTerms.length) return true;
+  
+  // Build searchable text from item properties
+  const searchableText = [
+    item.name,
+    item.title,
+    item.id,
+    item.importPath
+  ].filter(Boolean).join(' ').toLowerCase();
+  
+  // Match if ANY expanded term is found in the searchable text
+  return expandedTerms.some(term => searchableText.includes(term));
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// STORYBOOK INTEGRATION
+// ═══════════════════════════════════════════════════════════════════════════
+
+addons.register(ADDON_ID, (api) => {
+  let currentQuery = '';
+
+  const updateIndicator = (active, terms, noMatches = false) => {
+    let indicator = document.getElementById('pds-ontology-indicator');
+    if (!indicator) {
+      indicator = document.createElement('div');
+      indicator.id = 'pds-ontology-indicator';
+      indicator.innerHTML = `
+        <style>
+          #pds-ontology-indicator {
+            position: fixed;
+            bottom: 8px;
+            left: 8px;
+            background: var(--sb-bar-background, #1d1d1d);
+            border: 1px solid var(--sb-outline, #383838);
+            border-radius: 6px;
+            padding: 6px 10px;
+            font-size: 11px;
+            color: var(--sb-barTextColor, #999);
+            z-index: 100;
+            max-width: 280px;
+            display: none;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+            pointer-events: none;
+          }
+          #pds-ontology-indicator.active { display: block; }
+          #pds-ontology-indicator .title {
+            font-weight: bold;
+            color: var(--sb-primary, #029cfd);
+            margin-bottom: 4px;
+          }
+          #pds-ontology-indicator .terms {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 4px;
+          }
+          #pds-ontology-indicator .term {
+            background: var(--sb-secondary, #444);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-family: monospace;
+            font-size: 10px;
+          }
+          #pds-ontology-indicator .term.original {
+            background: var(--sb-primary, #029cfd);
+            color: white;
+          }
+          #pds-ontology-indicator .no-matches {
+            color: #f59e0b;
+            font-style: italic;
+          }
+          
+          /* PDS Ontology Search: Override Storybook's inline display styles */
+          #storybook-explorer-menu > div:last-child { display: none !important; }
+          #storybook-explorer-menu > div:first-child { display: block !important; }
+          [id^="downshift-"][role="listbox"] { display: none !important; }
+          
+          /* Hide empty storybook message */
+          .css-1w747cv,
+          #storybook-explorer-tree > div > div > div > div > div { display: none !important; }
+          
+          /* Show actual story items */
+          #storybook-explorer-tree .sidebar-subheading,
+          #storybook-explorer-tree .sidebar-item,
+          #storybook-explorer-tree [data-nodetype] { display: flex !important; }
+          
+          /* No results message */
+          #storybook-explorer-tree:not(:has([data-nodetype="story"], [data-nodetype="component"], [data-nodetype="document"]))::after {
+            content: "No matching stories. Try: text, form, layout, modal";
+            display: block;
+            padding: 1rem;
+            color: var(--sb-barTextColor, #999);
+            font-style: italic;
+            text-align: center;
+            font-size: 12px;
+          }
+          
+          /* Auto-expand filtered nodes */
+          body.pds-filter-active #storybook-explorer-tree [aria-expanded="false"] + div,
+          body.pds-filter-active #storybook-explorer-tree [data-nodetype="story"],
+          body.pds-filter-active #storybook-explorer-tree [data-nodetype="document"] { display: flex !important; }
+          
+          body.pds-filter-active #storybook-explorer-tree button[aria-expanded="false"] .css-5ba62h svg,
+          body.pds-filter-active #storybook-explorer-tree button[aria-expanded="false"] .css-1yuef8z svg {
+            transform: rotate(90deg);
+          }
+        </style>
+        <div class="title">🔍 PDS Ontology Search</div>
+        <div class="terms"></div>
+        <div class="no-matches" style="display: none;">No matches. Try: text, form, layout, modal</div>
+      `;
+      document.body.appendChild(indicator);
+    }
+    
+    indicator.classList.toggle('active', active);
+    document.body.classList.toggle('pds-filter-active', active);
+    
+    const termsEl = indicator.querySelector('.terms');
+    const noMatchesEl = indicator.querySelector('.no-matches');
+    
+    if (active && noMatches) {
+      termsEl.style.display = 'none';
+      noMatchesEl.style.display = 'block';
+    } else if (active && terms.length) {
+      termsEl.style.display = 'flex';
+      noMatchesEl.style.display = 'none';
+      const originalTerms = currentQuery.split(/\s+/);
+      termsEl.innerHTML = terms.slice(0, 20).map(t => 
+        `<span class="term${originalTerms.includes(t) ? ' original' : ''}">${t}</span>`
+      ).join('');
+    } else {
+      termsEl.style.display = 'none';
+      noMatchesEl.style.display = 'none';
+    }
+  };
+
+  const applyFilter = (query) => {
+    currentQuery = (query || '').trim().toLowerCase();
+    
+    if (!currentQuery) {
+      api.experimental_setFilter(FILTER_ID, () => true);
+      updateIndicator(false, [], false);
+      return;
+    }
+    
+    const expandedTerms = expandQuery(currentQuery);
+    
+    api.experimental_setFilter(FILTER_ID, (item) => matchesOntology(item, expandedTerms));
+    
+    setTimeout(() => {
+      const tree = document.getElementById('storybook-explorer-tree');
+      const hasVisibleItems = tree && tree.querySelector('[data-highlightable="true"]');
+      updateIndicator(true, expandedTerms, !hasVisibleItems);
+      
+      document.querySelectorAll('#storybook-explorer-menu ol').forEach(ol => {
+        ol.style.display = 'none';
+      });
+    }, 100);
+  };
+
+  const hookSearch = () => {
+    const searchField = document.getElementById('storybook-explorer-searchfield');
+    if (!searchField) {
+      requestAnimationFrame(hookSearch);
+      return;
+    }
+    
+    if (searchField.dataset.pdsHooked) return;
+    searchField.dataset.pdsHooked = 'true';
+    
+    console.log('%c🎨 PDS Ontology Search Active', 'color: #029cfd; font-weight: bold; font-size: 14px');
+    console.log('%cSearch expands via ontology relations. Try: "text", "form", "modal"', 'color: #999');
+    
+    let debounceTimer;
+    searchField.addEventListener('input', (e) => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => applyFilter(e.target.value), 100);
+    });
+    
+    searchField.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') setTimeout(() => applyFilter(''), 10);
+    });
+    
+    searchField.addEventListener('search', () => {
+      if (!searchField.value) applyFilter('');
+    });
+    
+    // Watch for the clear button click (the X button in the combobox)
+    // The button is a sibling or nearby element that clears the input
+    const searchContainer = searchField.closest('[role="search"]') || searchField.parentElement?.parentElement;
+    if (searchContainer) {
+      searchContainer.addEventListener('click', (e) => {
+        // Check if clicked element is a button (clear button) or inside one
+        const button = e.target.closest('button');
+        if (button && button !== searchField) {
+          // Small delay to let the clear action complete
+          setTimeout(() => {
+            if (!searchField.value) {
+              applyFilter('');
+            }
+          }, 50);
+        }
+      });
+    }
+    
+    // Also poll for value changes as a fallback (handles programmatic clears)
+    let lastValue = searchField.value;
+    const checkValue = () => {
+      if (searchField.value !== lastValue) {
+        lastValue = searchField.value;
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => applyFilter(searchField.value), 100);
+      }
+      requestAnimationFrame(checkValue);
+    };
+    checkValue();
+  };
+
+  applyFilter('');
+
+  const initializeOntologySearch = async () => {
+    await loadOntology();
+    hookSearch();
+  };
+
+  if (document.readyState === 'complete') {
+    setTimeout(initializeOntologySearch, 500);
+  } else {
+    window.addEventListener('load', () => setTimeout(initializeOntologySearch, 500));
+  }
+
+  const mutationObserver = new MutationObserver(() => {
+    const searchField = document.getElementById('storybook-explorer-searchfield');
+    if (searchField && !searchField.dataset.pdsHooked) hookSearch();
+  });
+  mutationObserver.observe(document.body, { childList: true, subtree: true });
+
+  // Debug API
+  window.pdsOntology = {
+    search: (query) => {
+      const field = document.getElementById('storybook-explorer-searchfield');
+      if (field) {
+        field.value = query;
+        field.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+      applyFilter(query);
+    },
+    expand: expandQuery,
+    clear: () => {
+      const field = document.getElementById('storybook-explorer-searchfield');
+      if (field) {
+        field.value = '';
+        field.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+      applyFilter('');
+    },
+    data: () => referenceData,
+    relations: () => Object.fromEntries([...relationIndex].map(([k, v]) => [k, [...v]])),
+    categories: () => Object.fromEntries([...categoryIndex].map(([k, v]) => [k, [...v]])),
+    tags: () => Object.fromEntries([...tagIndex].map(([k, v]) => [k, [...v]])),
+    currentQuery: () => currentQuery
+  };
+});