@pure-ds/storybook 0.7.25 → 0.7.28

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

@@ -109,13 +109,15 @@ const CheckIcon = () => (
 );
 
 export const Panel = ({ active }) => {
-  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
+  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [], treeviews: [], tags: [], fabs: [], pdsApiCalls: [] });
   const [copied, setCopied] = useState(false);
   const [highlightedMarkup, setHighlightedMarkup] = useState('');
   const [highlightedforms, setHighlightedforms] = useState([]);
   const [highlightedOmniboxes, setHighlightedOmniboxes] = useState([]);
   const [highlightedTreeviews, setHighlightedTreeviews] = useState([]);
+  const [highlightedTags, setHighlightedTags] = useState([]);
   const [highlightedFabs, setHighlightedFabs] = useState([]);
+  const [highlightedPdsApiCalls, setHighlightedPdsApiCalls] = useState([]);
   const shikiRef = useRef(null);
   
   // Get Storybook theme to detect light/dark mode
@@ -302,10 +304,79 @@ export const Panel = ({ active }) => {
     processTreeviews();
   }, [source.treeviews, shikiTheme]);
 
+  // Highlight tags options when source or theme changes
+  useEffect(() => {
+    if (!source.tags || source.tags.length === 0) {
+      setHighlightedTags([]);
+      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 processTags = async () => {
+      const highlighted = await Promise.all(
+        source.tags.map(async (tagEntry, index) => ({
+          id: tagEntry.id ?? index,
+          label: tagEntry.label,
+          options: await highlightCode(tagEntry.options)
+        }))
+      );
+      setHighlightedTags(highlighted);
+    };
+
+    processTags();
+  }, [source.tags, shikiTheme]);
+
+  // Highlight PDS API snippets when source or theme changes
+  useEffect(() => {
+    if (!source.pdsApiCalls || source.pdsApiCalls.length === 0) {
+      setHighlightedPdsApiCalls([]);
+      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 processPdsApiCalls = async () => {
+      const highlighted = await Promise.all(
+        source.pdsApiCalls.map(async (call, index) => ({
+          id: call.id ?? index,
+          heading: call.heading,
+          label: call.label,
+          code: await highlightCode(call.code)
+        }))
+      );
+      setHighlightedPdsApiCalls(highlighted);
+    };
+
+    processPdsApiCalls();
+  }, [source.pdsApiCalls, shikiTheme]);
+
   useChannel({
     [EVENTS.UPDATE_HTML]: (payload) => {
       if (typeof payload === 'string') {
-        setSource({ markup: payload || '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
+        setSource({ markup: payload || '', forms: [], omniboxes: [], treeviews: [], tags: [], fabs: [], pdsApiCalls: [] });
         return;
       }
 
@@ -315,18 +386,20 @@ export const Panel = ({ active }) => {
           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 : []
+          tags: Array.isArray(payload.tags) ? payload.tags : [],
+          fabs: Array.isArray(payload.fabs) ? payload.fabs : [],
+          pdsApiCalls: Array.isArray(payload.pdsApiCalls) ? payload.pdsApiCalls : []
         });
         return;
       }
 
-      setSource({ markup: '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
+      setSource({ markup: '', forms: [], omniboxes: [], treeviews: [], tags: [], fabs: [], pdsApiCalls: [] });
     }
   });
 
   // Request HTML update when panel becomes active
   React.useEffect(() => {
-    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.length === 0 && source.treeviews.length === 0 && source.fabs.length === 0) {
+    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.length === 0 && source.treeviews.length === 0 && source.tags.length === 0 && source.fabs.length === 0 && source.pdsApiCalls.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');
@@ -338,7 +411,7 @@ export const Panel = ({ active }) => {
         }, 100);
       }
     }
-  }, [active, source.markup, source.forms.length, source.omniboxes.length, source.treeviews.length, source.fabs.length]);
+  }, [active, source.markup, source.forms.length, source.omniboxes.length, source.treeviews.length, source.tags.length, source.fabs.length, source.pdsApiCalls.length]);
 
   const copyToClipboard = useCallback(async () => {
     try {
@@ -355,9 +428,11 @@ export const Panel = ({ active }) => {
   const hasforms = source.forms.length > 0;
   const hasOmniboxes = source.omniboxes.length > 0;
   const hasTreeviews = source.treeviews.length > 0;
+  const hasTags = source.tags.length > 0;
   const hasFabs = source.fabs.length > 0;
+  const hasPdsApiCalls = source.pdsApiCalls.length > 0;
 
-  if (!hasMarkup && !hasforms && !hasOmniboxes && !hasTreeviews && !hasFabs) {
+  if (!hasMarkup && !hasforms && !hasOmniboxes && !hasTreeviews && !hasTags && !hasFabs && !hasPdsApiCalls) {
     return (
       <Container>
         <EmptyState>
@@ -498,6 +573,52 @@ export const Panel = ({ active }) => {
         );
       })}
 
+      {hasTags && source.tags.map((sourceTags, index) => {
+        const key = sourceTags.id ?? index;
+        const highlightedTag = highlightedTags[index];
+        const heading = source.tags.length > 1 ? (sourceTags.label || `Tags ${index + 1}`) : 'pds-tags';
+
+        return (
+          <SectionWrapper key={key}>
+            <SectionHeading>{heading}</SectionHeading>
+
+            {sourceTags.options && (
+              <>
+                <Subheading>options</Subheading>
+                <CodeBlock
+                  $compact
+                  dangerouslySetInnerHTML={{
+                    __html: highlightedTag?.options || `<pre><code>${escapeHtml(sourceTags.options)}</code></pre>`
+                  }}
+                />
+              </>
+            )}
+          </SectionWrapper>
+        );
+      })}
+
+      {hasPdsApiCalls && source.pdsApiCalls.map((sourceCall, index) => {
+        const key = sourceCall.id ?? index;
+        const highlightedCall = highlightedPdsApiCalls[index];
+        const heading = sourceCall.heading || 'PDS API';
+
+        return (
+          <SectionWrapper key={key}>
+            <SectionHeading>{heading}</SectionHeading>
+
+            {sourceCall.label && <Subheading>{sourceCall.label}</Subheading>}
+            {sourceCall.code && (
+              <CodeBlock
+                $compact
+                dangerouslySetInnerHTML={{
+                  __html: highlightedCall?.code || `<pre><code>${escapeHtml(sourceCall.code)}</code></pre>`
+                }}
+              />
+            )}
+          </SectionWrapper>
+        );
+      })}
+
 
       {hasMarkup && (
         <CopyButton

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

@@ -157,6 +157,48 @@ function serializeForDisplay(value) {
   }
 }
 
+function collectPdsApiCalls(container) {
+  if (!container) return [];
+
+  const nodes = Array.from(container.querySelectorAll('*'));
+
+  return nodes
+    .map((element, index) => {
+      const source =
+        element.pdsCodeSource ||
+        element.pdsSource ||
+        element.dataset?.pdsCodeSource ||
+        element.getAttribute?.('data-pds-code-source') ||
+        '';
+
+      if (!source || typeof source !== 'string' || !source.trim()) {
+        return null;
+      }
+
+      const heading =
+        element.pdsCodeHeading ||
+        element.pdsHeading ||
+        element.dataset?.pdsCodeHeading ||
+        element.getAttribute?.('data-pds-code-heading') ||
+        'PDS API';
+
+      const label =
+        element.pdsCodeLabel ||
+        element.pdsLabel ||
+        element.dataset?.pdsCodeLabel ||
+        element.getAttribute?.('data-pds-code-label') ||
+        null;
+
+      return {
+        id: index,
+        heading,
+        label,
+        code: source,
+      };
+    })
+    .filter(Boolean);
+}
+
 /**
  * Generate realistic source code for pds-form elements
  */
@@ -273,6 +315,39 @@ function generatePdsTreeviewMarkup(treeviewElement) {
   return `<pds-treeview${formattedAttrs}></pds-treeview>`;
 }
 
+/**
+ * Generate realistic source code for pds-tags elements
+ */
+function generatePdsTagsMarkup(tagsElement) {
+  const attrs = [];
+
+  const stringAttrs = ['name', 'placeholder', 'value'];
+  stringAttrs.forEach((attr) => {
+    const value = tagsElement.getAttribute(attr);
+    if (value !== null && value !== undefined && value !== '') {
+      attrs.push(`${attr}="${value}"`);
+    }
+  });
+
+  if (tagsElement.hasAttribute('required')) {
+    attrs.push('required');
+  }
+
+  if (tagsElement.hasAttribute('disabled')) {
+    attrs.push('disabled');
+  }
+
+  if (tagsElement.options || tagsElement.settings) {
+    attrs.push('.options=${options}');
+  }
+
+  const formattedAttrs = attrs.length > 0
+    ? '\n  ' + attrs.join('\n  ') + '\n'
+    : '';
+
+  return `<pds-tags${formattedAttrs}></pds-tags>`;
+}
+
 /**
  * Generate realistic source code for pds-fab elements
  */
@@ -320,15 +395,17 @@ 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, pds-omnibox, pds-treeview, or pds-fab elements
+      // Check if this story has pds-form, pds-omnibox, pds-treeview, pds-tags, 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 pdsTagsElements = Array.from(container.querySelectorAll('pds-tags'));
       const pdsFabElements = Array.from(container.querySelectorAll('pds-fab'));
       const hasSpecialElements =
         pdsFormElements.length > 0 ||
         pdsOmniboxElements.length > 0 ||
         pdsTreeviewElements.length > 0 ||
+        pdsTagsElements.length > 0 ||
         pdsFabElements.length > 0;
 
       if (hasSpecialElements) {
@@ -360,6 +437,11 @@ export const withHTMLExtractor = (storyFn, context) => {
           markup += generatePdsTreeviewMarkup(treeview);
         });
 
+        // Add pds-tags markup
+        pdsTagsElements.forEach(tags => {
+          markup += generatePdsTagsMarkup(tags);
+        });
+
         // Add pds-fab markup
         pdsFabElements.forEach(fab => {
           markup += generatePdsFabMarkup(fab);
@@ -442,6 +524,30 @@ export const withHTMLExtractor = (storyFn, context) => {
           };
         });
 
+      const tags = pdsTagsElements
+        .map((tagElement, index) => {
+          const label =
+            tagElement.getAttribute?.('id') ||
+            tagElement.getAttribute?.('name') ||
+            (pdsTagsElements.length > 1 ? `Tags ${index + 1}` : 'Tags');
+
+          const optionsSource =
+            tagElement.getAttribute?.('data-options-source') ||
+            tagElement.dataset?.optionsSource ||
+            null;
+
+          const options =
+            optionsSource ||
+            serializeForDisplay(tagElement.options || tagElement.settings) ||
+            'const options = [];';
+
+          return {
+            id: index,
+            label,
+            options
+          };
+        });
+
       const fabs = pdsFabElements
         .map((fab, index) => {
           const label =
@@ -463,12 +569,16 @@ export const withHTMLExtractor = (storyFn, context) => {
         })
         .filter((entry) => entry.satellites);
 
+      const pdsApiCalls = collectPdsApiCalls(container);
+
       channel.emit(EVENTS.UPDATE_HTML, {
         markup: html || '',
         forms,
         omniboxes,
         treeviews,
-        fabs
+        tags,
+        fabs,
+        pdsApiCalls
       });
     }
   };

package/.storybook/preview.js

@@ -1478,6 +1478,7 @@ const preview = {
     },
     options: {
       storySort: {
+        method: 'alphabetical',
         order: [
           'About PDS',
           ['What Is PDS', 'Getting Started'],
@@ -1488,7 +1489,7 @@ const preview = {
             'Foundations',
             ['Colors', 'Typography', 'HTML Defaults', 'Icons', 'Spacing', 'Smart Surfaces'],
             'Primitives',
-            ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Tables', 'Media', 'Accordion'],
+            ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Articles', 'Tables', 'Media', 'Accordion'],
             'Layout',
             ['Overview', 'System'],
             'Utilities',
@@ -1498,7 +1499,7 @@ const preview = {
             'Enhancements',
             ['Mesh Gradients', 'Interactive States', 'Toggles', 'Dropdowns', 'Range Sliders', 'Required Fields'],
             'Components',
-            ['pds-form', 'Pds Icon', 'Pds Drawer', 'Pds Toaster', 'Pds Tabstrip', 'Pds Splitpanel', 'Pds Scrollrow', 'Pds Richtext', 'Pds Upload'],
+            ['*'],
             'Reference'
           ],
           'About PDS',
@@ -1506,7 +1507,7 @@ const preview = {
           'Foundations',
           ['Colors', 'Typography', 'HTML Defaults', 'Icons', 'Spacing', 'Smart Surfaces'],
           'Primitives',
-          ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Tables', 'Media', 'Accordion'],
+          ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Articles', 'Tables', 'Media', 'Accordion'],
           'Layout',
           ['Overview', 'System'],
           'Utilities',
@@ -1516,7 +1517,7 @@ const preview = {
           'Enhancements',
           ['Mesh Gradients', 'Interactive States', 'Toggles', 'Dropdowns', 'Range Sliders', 'Required Fields'],
           'Components',
-          ['pds-form', 'Pds Icon', 'Pds Drawer', 'Pds Toaster', 'Pds Tabstrip', 'Pds Splitpanel', 'Pds Scrollrow', 'Pds Richtext', 'Pds Upload'],
+          ['*'],
           'Reference',
           '*'
         ]