@pure-ds/storybook 0.6.9 → 0.7.1

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

@@ -109,11 +109,12 @@ const CheckIcon = () => (
 );
 
 export const Panel = ({ active }) => {
-  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [], fabs: [] });
+  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
   const [copied, setCopied] = useState(false);
   const [highlightedMarkup, setHighlightedMarkup] = useState('');
   const [highlightedforms, setHighlightedforms] = useState([]);
   const [highlightedOmniboxes, setHighlightedOmniboxes] = useState([]);
+  const [highlightedTreeviews, setHighlightedTreeviews] = useState([]);
   const [highlightedFabs, setHighlightedFabs] = useState([]);
   const shikiRef = useRef(null);
   
@@ -267,10 +268,44 @@ export const Panel = ({ active }) => {
     processFabs();
   }, [source.fabs, shikiTheme]);
 
+  // Highlight treeview options when source or theme changes
+  useEffect(() => {
+    if (!source.treeviews || source.treeviews.length === 0) {
+      setHighlightedTreeviews([]);
+      return;
+    }
+
+    const highlightCode = async (code) => {
+      if (!code) return '';
+      const highlighter = shikiRef.current || await loadShiki();
+      if (highlighter) {
+        try {
+          return highlighter.codeToHtml(code, { lang: 'javascript', theme: shikiTheme });
+        } catch (err) {
+          return `<pre><code>${escapeHtml(code)}</code></pre>`;
+        }
+      }
+      return `<pre><code>${escapeHtml(code)}</code></pre>`;
+    };
+
+    const processTreeviews = async () => {
+      const highlighted = await Promise.all(
+        source.treeviews.map(async (treeview, index) => ({
+          id: treeview.id ?? index,
+          label: treeview.label,
+          options: await highlightCode(treeview.options)
+        }))
+      );
+      setHighlightedTreeviews(highlighted);
+    };
+
+    processTreeviews();
+  }, [source.treeviews, shikiTheme]);
+
   useChannel({
     [EVENTS.UPDATE_HTML]: (payload) => {
       if (typeof payload === 'string') {
-        setSource({ markup: payload || '', forms: [], omniboxes: [], fabs: [] });
+        setSource({ markup: payload || '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
         return;
       }
 
@@ -279,18 +314,19 @@ export const Panel = ({ active }) => {
           markup: payload.markup || '',
           forms: Array.isArray(payload.forms) ? payload.forms : [],
           omniboxes: Array.isArray(payload.omniboxes) ? payload.omniboxes : [],
+          treeviews: Array.isArray(payload.treeviews) ? payload.treeviews : [],
           fabs: Array.isArray(payload.fabs) ? payload.fabs : []
         });
         return;
       }
 
-      setSource({ markup: '', forms: [], omniboxes: [], fabs: [] });
+      setSource({ markup: '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
     }
   });
 
   // Request HTML update when panel becomes active
   React.useEffect(() => {
-    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.length === 0 && source.fabs.length === 0) {
+    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.length === 0 && source.treeviews.length === 0 && source.fabs.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');
@@ -302,7 +338,7 @@ export const Panel = ({ active }) => {
         }, 100);
       }
     }
-  }, [active, source.markup, source.forms.length, source.omniboxes.length, source.fabs.length]);
+  }, [active, source.markup, source.forms.length, source.omniboxes.length, source.treeviews.length, source.fabs.length]);
 
   const copyToClipboard = useCallback(async () => {
     try {
@@ -318,9 +354,10 @@ export const Panel = ({ active }) => {
   const hasMarkup = Boolean(source.markup);
   const hasforms = source.forms.length > 0;
   const hasOmniboxes = source.omniboxes.length > 0;
+  const hasTreeviews = source.treeviews.length > 0;
   const hasFabs = source.fabs.length > 0;
 
-  if (!hasMarkup && !hasforms && !hasOmniboxes && !hasFabs) {
+  if (!hasMarkup && !hasforms && !hasOmniboxes && !hasTreeviews && !hasFabs) {
     return (
       <Container>
         <EmptyState>
@@ -437,6 +474,30 @@ export const Panel = ({ active }) => {
         );
       })}
 
+      {hasTreeviews && source.treeviews.map((sourceTreeview, index) => {
+        const key = sourceTreeview.id ?? index;
+        const highlightedTreeview = highlightedTreeviews[index];
+        const heading = source.treeviews.length > 1 ? (sourceTreeview.label || `Treeview ${index + 1}`) : 'pds-treeview';
+
+        return (
+          <SectionWrapper key={key}>
+            <SectionHeading>{heading}</SectionHeading>
+
+            {sourceTreeview.options && (
+              <>
+                <Subheading>options</Subheading>
+                <CodeBlock
+                  $compact
+                  dangerouslySetInnerHTML={{
+                    __html: highlightedTreeview?.options || `<pre><code>${escapeHtml(sourceTreeview.options)}</code></pre>`
+                  }}
+                />
+              </>
+            )}
+          </SectionWrapper>
+        );
+      })}
+
 
       {hasMarkup && (
         <CopyButton

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

@@ -241,6 +241,38 @@ function generatePdsOmniboxMarkup(omniboxElement) {
   return `<pds-omnibox${formattedAttrs}></pds-omnibox>`;
 }
 
+/**
+ * Generate realistic source code for pds-treeview elements
+ */
+function generatePdsTreeviewMarkup(treeviewElement) {
+  const attrs = [];
+
+  const stringAttrs = ['name', 'value', 'src'];
+  stringAttrs.forEach((attr) => {
+    const value = treeviewElement.getAttribute(attr);
+    if (value !== null && value !== undefined && value !== '') {
+      attrs.push(`${attr}="${value}"`);
+    }
+  });
+
+  const booleanAttrs = ['required', 'disabled', 'display-only', 'expanded-all'];
+  booleanAttrs.forEach((attr) => {
+    if (treeviewElement.hasAttribute(attr)) {
+      attrs.push(attr);
+    }
+  });
+
+  if (treeviewElement.options || treeviewElement.settings) {
+    attrs.push('.options=${options}');
+  }
+
+  const formattedAttrs = attrs.length > 0
+    ? '\n  ' + attrs.join('\n  ') + '\n'
+    : '';
+
+  return `<pds-treeview${formattedAttrs}></pds-treeview>`;
+}
+
 /**
  * Generate realistic source code for pds-fab elements
  */
@@ -288,17 +320,19 @@ export const withHTMLExtractor = (storyFn, context) => {
     // Try to get HTML from the story container
     const container = document.querySelector('#storybook-root');
     if (container) {
-      // Check if this story has pds-form or pds-omnibox elements
+      // Check if this story has pds-form, pds-omnibox, pds-treeview, or pds-fab elements
       const pdsFormElements = Array.from(container.querySelectorAll('pds-form'));
       const pdsOmniboxElements = Array.from(container.querySelectorAll('pds-omnibox'));
+      const pdsTreeviewElements = Array.from(container.querySelectorAll('pds-treeview'));
       const pdsFabElements = Array.from(container.querySelectorAll('pds-fab'));
       const hasSpecialElements =
         pdsFormElements.length > 0 ||
         pdsOmniboxElements.length > 0 ||
+        pdsTreeviewElements.length > 0 ||
         pdsFabElements.length > 0;
 
       if (hasSpecialElements) {
-        // Generate realistic markup for pds-form / pds-omnibox stories
+        // Generate realistic markup for PDS component stories
         const alerts = Array.from(container.querySelectorAll('.callout'));
         let markup = '';
 
@@ -321,6 +355,11 @@ export const withHTMLExtractor = (storyFn, context) => {
           markup += generatePdsOmniboxMarkup(omnibox);
         });
 
+        // Add pds-treeview markup
+        pdsTreeviewElements.forEach(treeview => {
+          markup += generatePdsTreeviewMarkup(treeview);
+        });
+
         // Add pds-fab markup
         pdsFabElements.forEach(fab => {
           markup += generatePdsFabMarkup(fab);
@@ -379,6 +418,30 @@ export const withHTMLExtractor = (storyFn, context) => {
         })
         .filter((entry) => entry.settings);
 
+      const treeviews = pdsTreeviewElements
+        .map((treeview, index) => {
+          const label =
+            treeview.getAttribute?.('id') ||
+            treeview.getAttribute?.('name') ||
+            (pdsTreeviewElements.length > 1 ? `Treeview ${index + 1}` : 'Treeview');
+
+          const optionsSource =
+            treeview.getAttribute?.('data-options-source') ||
+            treeview.dataset?.optionsSource ||
+            null;
+
+          const options =
+            optionsSource ||
+            serializeForDisplay(treeview.options || treeview.settings) ||
+            'const options = {};';
+
+          return {
+            id: index,
+            label,
+            options
+          };
+        });
+
       const fabs = pdsFabElements
         .map((fab, index) => {
           const label =
@@ -404,6 +467,7 @@ export const withHTMLExtractor = (storyFn, context) => {
         markup: html || '',
         forms,
         omniboxes,
+        treeviews,
         fabs
       });
     }

package/.storybook/main.js

@@ -70,6 +70,7 @@ const config = {
     // 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'),
     };
 

package/.storybook/manager.js

@@ -818,7 +818,7 @@ addons.register(ADDON_ID, (api) => {
   mutationObserver.observe(document.body, { childList: true, subtree: true });
 
   // Public API for programmatic search
-  window.pdsOntology = {
+  const pdsOntologyApi = {
     search: (query) => {
       const field = document.getElementById('storybook-explorer-searchfield');
       if (field) {
@@ -838,6 +838,10 @@ addons.register(ADDON_ID, (api) => {
     }
   };
 
+  if (typeof globalThis !== 'undefined') {
+    globalThis.pdsOntology = pdsOntologyApi;
+  }
+
   // ═══════════════════════════════════════════════════════════════════════════
   // AUTO-SELECT CODE PANEL FOR ENHANCEMENT STORIES
   // Switch to the "Code" panel when navigating to Enhancement stories

package/.storybook/preview-head.html

@@ -9,6 +9,7 @@
 <script type="importmap">
 {
   "imports": {
+    "#pds": "/assets/pds/core.js",
     "#pds/lit": "/assets/pds/external/lit.js",
     "#showdown": "https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.mjs"
   }