@pure-ds/storybook 0.4.16 → 0.4.19

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

@@ -1,8 +1,8 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useChannel } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
 import { EVENTS } from './constants.js';
-import { styled } from '@storybook/theming';
+import { styled, useTheme } from '@storybook/theming';
 import { loadShiki, escapeHtml } from '../../shiki.js';
 
 const Container = styled.div`
@@ -109,10 +109,15 @@ const CheckIcon = () => (
 );
 
 export const Panel = ({ active }) => {
-  const [source, setSource] = useState({ markup: '', jsonForms: [] });
+  const [source, setSource] = useState({ markup: '', forms: [] });
   const [copied, setCopied] = useState(false);
   const [highlightedMarkup, setHighlightedMarkup] = useState('');
+  const [highlightedforms, setHighlightedforms] = useState([]);
   const shikiRef = useRef(null);
+  
+  // Get Storybook theme to detect light/dark mode
+  const storybookTheme = useTheme();
+  const shikiTheme = storybookTheme.base === 'dark' ? 'github-dark' : 'github-light';
 
   // Load Shiki once on mount
   useEffect(() => {
@@ -121,7 +126,7 @@ export const Panel = ({ active }) => {
     });
   }, []);
 
-  // Highlight markup when source changes
+  // Highlight markup when source or theme changes
   useEffect(() => {
     if (!source.markup) {
       setHighlightedMarkup('');
@@ -133,7 +138,7 @@ export const Panel = ({ active }) => {
       try {
         const html = highlighter.codeToHtml(source.markup, {
           lang: 'html',
-          theme: 'github-dark'
+          theme: shikiTheme
         });
         setHighlightedMarkup(html);
       } catch (err) {
@@ -146,7 +151,7 @@ export const Panel = ({ active }) => {
       loadShiki().then(hl => {
         if (hl && source.markup) {
           try {
-            const html = hl.codeToHtml(source.markup, { lang: 'html', theme: 'github-dark' });
+            const html = hl.codeToHtml(source.markup, { lang: 'html', theme: shikiTheme });
             setHighlightedMarkup(html);
           } catch (err) {
             // Keep fallback
@@ -154,30 +159,66 @@ export const Panel = ({ active }) => {
         }
       });
     }
-  }, [source.markup]);
+  }, [source.markup, shikiTheme]);
+
+  // Highlight forms schemas when source or theme changes
+  useEffect(() => {
+    if (!source.forms || source.forms.length === 0) {
+      setHighlightedforms([]);
+      return;
+    }
+
+    const highlightJsonCode = async (code) => {
+      if (!code) return '';
+      const highlighter = shikiRef.current || await loadShiki();
+      if (highlighter) {
+        try {
+          return highlighter.codeToHtml(code, { lang: 'json', theme: shikiTheme });
+        } catch (err) {
+          return `<pre><code>${escapeHtml(code)}</code></pre>`;
+        }
+      }
+      return `<pre><code>${escapeHtml(code)}</code></pre>`;
+    };
+
+    const processforms = async () => {
+      const highlighted = await Promise.all(
+        source.forms.map(async (form, index) => ({
+          id: form.id ?? index,
+          label: form.label,
+          jsonSchema: await highlightJsonCode(form.jsonSchema),
+          uiSchema: await highlightJsonCode(form.uiSchema),
+          options: await highlightJsonCode(form.options)
+        }))
+      );
+      setHighlightedforms(highlighted);
+    };
+
+    processforms();
+  }, [source.forms, shikiTheme]);
 
   useChannel({
     [EVENTS.UPDATE_HTML]: (payload) => {
       if (typeof payload === 'string') {
-        setSource({ markup: payload || '', jsonForms: [] });
+        setSource({ markup: payload || '', forms: [] });
         return;
       }
 
       if (payload && typeof payload === 'object') {
         setSource({
           markup: payload.markup || '',
-          jsonForms: Array.isArray(payload.jsonForms) ? payload.jsonForms : []
+          forms: Array.isArray(payload.forms) ? payload.forms : []
         });
         return;
       }
 
-      setSource({ markup: '', jsonForms: [] });
+      setSource({ markup: '', forms: [] });
     }
   });
 
   // Request HTML update when panel becomes active
   React.useEffect(() => {
-    if (active && !source.markup && source.jsonForms.length === 0) {
+    if (active && !source.markup && source.forms.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');
@@ -189,7 +230,7 @@ export const Panel = ({ active }) => {
         }, 100);
       }
     }
-  }, [active, source.markup, source.jsonForms.length]);
+  }, [active, source.markup, source.forms.length]);
 
   const copyToClipboard = useCallback(async () => {
     try {
@@ -203,9 +244,9 @@ export const Panel = ({ active }) => {
   }, [source.markup]);
 
   const hasMarkup = Boolean(source.markup);
-  const hasJsonForms = source.jsonForms.length > 0;
+  const hasforms = source.forms.length > 0;
 
-  if (!hasMarkup && !hasJsonForms) {
+  if (!hasMarkup && !hasforms) {
     return (
       <Container>
         <EmptyState>
@@ -225,38 +266,48 @@ export const Panel = ({ active }) => {
         </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';
+      {hasforms && source.forms.map((sourceForm, index) => {
+        const key = sourceForm.id ?? index;
+        const highlightedForm = highlightedforms[index];
+        const heading = source.forms.length > 1 ? (sourceForm.label || `Form ${index + 1}`) : 'pds-form';
 
         return (
           <SectionWrapper key={key}>
             <SectionHeading>{heading}</SectionHeading>
 
-            {form.jsonSchema && (
+            {sourceForm.jsonSchema && (
               <>
                 <Subheading>jsonSchema</Subheading>
-                <CodeBlock $compact>
-                  <code>{form.jsonSchema}</code>
-                </CodeBlock>
+                <CodeBlock 
+                  $compact 
+                  dangerouslySetInnerHTML={{ 
+                    __html: highlightedForm?.jsonSchema || `<pre><code>${escapeHtml(sourceForm.jsonSchema)}</code></pre>` 
+                  }} 
+                />
               </>
             )}
 
-            {form.uiSchema && (
+            {sourceForm.uiSchema && (
               <>
                 <Subheading>uiSchema</Subheading>
-                <CodeBlock $compact>
-                  <code>{form.uiSchema}</code>
-                </CodeBlock>
+                <CodeBlock 
+                  $compact 
+                  dangerouslySetInnerHTML={{ 
+                    __html: highlightedForm?.uiSchema || `<pre><code>${escapeHtml(sourceForm.uiSchema)}</code></pre>` 
+                  }} 
+                />
               </>
             )}
 
-            {form.options && (
+            {sourceForm.options && (
               <>
                 <Subheading>options</Subheading>
-                <CodeBlock $compact>
-                  <code>{form.options}</code>
-                </CodeBlock>
+                <CodeBlock 
+                  $compact 
+                  dangerouslySetInnerHTML={{ 
+                    __html: highlightedForm?.options || `<pre><code>${escapeHtml(sourceForm.options)}</code></pre>` 
+                  }} 
+                />
               </>
             )}
           </SectionWrapper>

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

@@ -1,4 +1,4 @@
-import { useEffect } from '@storybook/preview-api';
+import { useEffect } from '@storybook/preview-api';
 import { addons } from '@storybook/preview-api';
 import { EVENTS } from './constants.js';
 import { render as litRender } from 'lit';
@@ -166,13 +166,12 @@ export const withHTMLExtractor = (storyFn, context) => {
         html = formatHTML(extractHTML(container));
       }
 
-      const forms = Array.from(container.querySelectorAll('pds-jsonform'));
-      const jsonForms = forms
+      const forms = Array.from(container.querySelectorAll('pds-form'))
         .map((form, index) => {
           const label =
             form.getAttribute?.('id') ||
             form.getAttribute?.('name') ||
-            (forms.length > 1 ? `Form ${index + 1}` : 'Form');
+            (Array.from(container.querySelectorAll('pds-form')).length > 1 ? `Form ${index + 1}` : 'Form');
 
           const jsonSchema = serializeForDisplay(form.jsonSchema);
           const uiSchema = serializeForDisplay(form.uiSchema);
@@ -190,7 +189,7 @@ export const withHTMLExtractor = (storyFn, context) => {
 
       channel.emit(EVENTS.UPDATE_HTML, {
         markup: html || '',
-        jsonForms
+        forms
       });
     }
   };