@pure-ds/storybook 0.5.39 → 0.5.41

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

@@ -109,11 +109,12 @@ const CheckIcon = () => (
 );
 
 export const Panel = ({ active }) => {
-  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [] });
+  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [], fabs: [] });
   const [copied, setCopied] = useState(false);
   const [highlightedMarkup, setHighlightedMarkup] = useState('');
   const [highlightedforms, setHighlightedforms] = useState([]);
   const [highlightedOmniboxes, setHighlightedOmniboxes] = useState([]);
+  const [highlightedFabs, setHighlightedFabs] = useState([]);
   const shikiRef = useRef(null);
   
   // Get Storybook theme to detect light/dark mode
@@ -232,10 +233,44 @@ export const Panel = ({ active }) => {
     processOmniboxes();
   }, [source.omniboxes, shikiTheme]);
 
+  // Highlight fab satellites when source or theme changes
+  useEffect(() => {
+    if (!source.fabs || source.fabs.length === 0) {
+      setHighlightedFabs([]);
+      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 processFabs = async () => {
+      const highlighted = await Promise.all(
+        source.fabs.map(async (fab, index) => ({
+          id: fab.id ?? index,
+          label: fab.label,
+          satellites: await highlightCode(fab.satellites)
+        }))
+      );
+      setHighlightedFabs(highlighted);
+    };
+
+    processFabs();
+  }, [source.fabs, shikiTheme]);
+
   useChannel({
     [EVENTS.UPDATE_HTML]: (payload) => {
       if (typeof payload === 'string') {
-        setSource({ markup: payload || '', forms: [], omniboxes: [] });
+        setSource({ markup: payload || '', forms: [], omniboxes: [], fabs: [] });
         return;
       }
 
@@ -243,18 +278,19 @@ export const Panel = ({ active }) => {
         setSource({
           markup: payload.markup || '',
           forms: Array.isArray(payload.forms) ? payload.forms : [],
-          omniboxes: Array.isArray(payload.omniboxes) ? payload.omniboxes : []
+          omniboxes: Array.isArray(payload.omniboxes) ? payload.omniboxes : [],
+          fabs: Array.isArray(payload.fabs) ? payload.fabs : []
         });
         return;
       }
 
-      setSource({ markup: '', forms: [], omniboxes: [] });
+      setSource({ markup: '', forms: [], omniboxes: [], fabs: [] });
     }
   });
 
   // Request HTML update when panel becomes active
   React.useEffect(() => {
-    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.length === 0) {
+    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.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');
@@ -266,7 +302,7 @@ export const Panel = ({ active }) => {
         }, 100);
       }
     }
-  }, [active, source.markup, source.forms.length, source.omniboxes.length]);
+  }, [active, source.markup, source.forms.length, source.omniboxes.length, source.fabs.length]);
 
   const copyToClipboard = useCallback(async () => {
     try {
@@ -282,8 +318,9 @@ export const Panel = ({ active }) => {
   const hasMarkup = Boolean(source.markup);
   const hasforms = source.forms.length > 0;
   const hasOmniboxes = source.omniboxes.length > 0;
+  const hasFabs = source.fabs.length > 0;
 
-  if (!hasMarkup && !hasforms && !hasOmniboxes) {
+  if (!hasMarkup && !hasforms && !hasOmniboxes && !hasFabs) {
     return (
       <Container>
         <EmptyState>
@@ -303,6 +340,31 @@ export const Panel = ({ active }) => {
         </SectionWrapper>
       )}
 
+      {hasFabs && (
+        <SectionWrapper>
+          <SectionHeading>satellites</SectionHeading>
+          {source.fabs.map((sourceFab, index) => {
+            const key = sourceFab.id ?? index;
+            const highlightedFab = highlightedFabs[index];
+            const label = source.fabs.length > 1 ? (sourceFab.label || `Fab ${index + 1}`) : null;
+
+            return (
+              <div key={key}>
+                {label && <Subheading>{label}</Subheading>}
+                {sourceFab.satellites && (
+                  <CodeBlock
+                    $compact
+                    dangerouslySetInnerHTML={{
+                      __html: highlightedFab?.satellites || `<pre><code>${escapeHtml(sourceFab.satellites)}</code></pre>`
+                    }}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </SectionWrapper>
+      )}
+
       {hasforms && source.forms.map((sourceForm, index) => {
         const key = sourceForm.id ?? index;
         const highlightedForm = highlightedforms[index];
@@ -375,6 +437,7 @@ export const Panel = ({ active }) => {
         );
       })}
 
+
       {hasMarkup && (
         <CopyButton
           onClick={copyToClipboard}

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

@@ -33,7 +33,8 @@ function formatHTML(html) {
     }
   });
   
-  return formatted.trim();
+  const cleaned = formatted.trim();
+  return cleaned.replace(/\s([\w:-]+)=""/g, ' $1');
 }
 
 /**
@@ -45,10 +46,20 @@ function extractHTML(element) {
   const clone = element.cloneNode(true);
   
   // Clean up Storybook-specific attributes
+  const runtimeDataAttrs = new Set([
+    'data-original-icon',
+    'data-icon',
+    'data-uid',
+    'data-rendered',
+    'data-runtime',
+    'data-pds-runtime'
+  ]);
+
   const cleanElement = (el) => {
     if (el.removeAttribute) {
       el.removeAttribute('data-story-id');
       el.removeAttribute('data-view-mode');
+      runtimeDataAttrs.forEach((attr) => el.removeAttribute(attr));
     }
     if (el.children) {
       Array.from(el.children).forEach(cleanElement);
@@ -230,6 +241,39 @@ function generatePdsOmniboxMarkup(omniboxElement) {
   return `<pds-omnibox${formattedAttrs}></pds-omnibox>`;
 }
 
+/**
+ * Generate realistic source code for pds-fab elements
+ */
+function generatePdsFabMarkup(fabElement) {
+  const attrs = [];
+
+  const stringAttrs = ['id', 'radius', 'spread', 'start-angle'];
+  stringAttrs.forEach((attr) => {
+    const value = fabElement.getAttribute(attr);
+    if (value !== null && value !== undefined && value !== '') {
+      attrs.push(`${attr}="${value}"`);
+    }
+  });
+
+  if (Array.isArray(fabElement.satellites) && fabElement.satellites.length > 0) {
+    const satellitesSource =
+      fabElement.getAttribute?.('data-satellites-source') ||
+      fabElement.dataset?.satellitesSource ||
+      null;
+    attrs.push(satellitesSource || '.satellites=${satellites}');
+  }
+
+  const formattedAttrs = attrs.length > 0
+    ? '\n  ' + attrs.join('\n  ') + '\n'
+    : '';
+
+  const icon = fabElement.querySelector?.('pds-icon');
+  const iconMarkup = icon?.outerHTML || '<pds-icon icon="plus" size="lg"></pds-icon>';
+  const normalizedIcon = iconMarkup.replace(/\s([\w:-]+)=""/g, ' $1');
+
+  return `<pds-fab${formattedAttrs}>\n  ${normalizedIcon}\n</pds-fab>`;
+}
+
 /**
  * Global decorator that extracts and sends HTML to the panel
  */
@@ -247,7 +291,11 @@ export const withHTMLExtractor = (storyFn, context) => {
       // Check if this story has pds-form or pds-omnibox elements
       const pdsFormElements = Array.from(container.querySelectorAll('pds-form'));
       const pdsOmniboxElements = Array.from(container.querySelectorAll('pds-omnibox'));
-      const hasSpecialElements = pdsFormElements.length > 0 || pdsOmniboxElements.length > 0;
+      const pdsFabElements = Array.from(container.querySelectorAll('pds-fab'));
+      const hasSpecialElements =
+        pdsFormElements.length > 0 ||
+        pdsOmniboxElements.length > 0 ||
+        pdsFabElements.length > 0;
 
       if (hasSpecialElements) {
         // Generate realistic markup for pds-form / pds-omnibox stories
@@ -273,6 +321,11 @@ export const withHTMLExtractor = (storyFn, context) => {
           markup += generatePdsOmniboxMarkup(omnibox);
         });
 
+        // Add pds-fab markup
+        pdsFabElements.forEach(fab => {
+          markup += generatePdsFabMarkup(fab);
+        });
+
         html = markup;
       } else {
         // No pds-form elements, use standard extraction
@@ -326,10 +379,32 @@ export const withHTMLExtractor = (storyFn, context) => {
         })
         .filter((entry) => entry.settings);
 
+      const fabs = pdsFabElements
+        .map((fab, index) => {
+          const label =
+            fab.getAttribute?.('id') ||
+            (pdsFabElements.length > 1 ? `Fab ${index + 1}` : 'Fab');
+
+          const satellitesSource =
+            fab.getAttribute?.('data-satellites-source') ||
+            fab.dataset?.satellitesSource ||
+            null;
+
+          const satellites = satellitesSource || serializeForDisplay(fab.satellites);
+
+          return {
+            id: index,
+            label,
+            satellites
+          };
+        })
+        .filter((entry) => entry.satellites);
+
       channel.emit(EVENTS.UPDATE_HTML, {
         markup: html || '',
         forms,
-        omniboxes
+        omniboxes,
+        fabs
       });
     }
   };

package/.storybook/main.js

@@ -68,10 +68,10 @@ const config = {
       process.cwd()
     ];
     
-    // Ensure Lit import alias is resolved
+    // Ensure Lit import alias is resolved to PDS bundle
     const aliases = {
       ...config.resolve.alias,
-      '#pds/lit': 'lit',
+      '#pds/lit': resolve(pdsSrcPath, 'js/lit.js'),
     };
 
     // In monorepo, pds-configurator is in a separate package, not in src/js
@@ -184,7 +184,7 @@ const config = {
         config.resolve.alias['@user/pds-config'] = resolve(currentDirname, '../default-pds.config.js');
     }
 
-    // Support absolute path imports like: import { html } from '/assets/js/lit.js';
+    // Support absolute path imports like: import { html } from '/assets/pds/external/lit.js';
     // Vite blocks direct imports from public/, so we disable Vite's public directory
     // handling (Storybook uses staticDirs instead) and resolve these imports ourselves.
     const userPublicPath = resolve(process.cwd(), 'public');

package/.storybook/preview-head.html

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