@cdc/core 4.25.8 → 4.25.11

package/_stories/StoryRenderingTests.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import { performAndAssert } from '@cdc/core/helpers/testing'
+
+const ChartRenderingValidator = () => (
+  <div data-testid='chart-rendering-validator'>
+    <h2>Simple COVE Visualization Tests</h2>
+    <p>This test validates all stories load and render.</p>
+  </div>
+)
+
+const meta: Meta<typeof ChartRenderingValidator> = {
+  title: 'Testing/Story Rendering Tests',
+  component: ChartRenderingValidator,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  tags: ['!dev', '!autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof ChartRenderingValidator>
+
+/**
+ * Fetch all stories from Storybook's JSON API and filter for visualization stories
+ * @returns Promise that resolves to an array of story URLs to test
+ */
+const getVisualizationStoryUrls = async (): Promise<string[]> => {
+  let response
+  try {
+    response = await fetch('http://localhost:6006/index.json')
+  } catch (error) {
+    console.error('Error fetching visualization story URLs:', error)
+    return []
+  }
+
+  const data = await response.json()
+
+  const storyUrls: string[] = []
+
+  Object.values(data.entries).forEach((story: any) => {
+    if (story.type === 'story') {
+      const isVisualizationStory =
+        story.title.includes('Components/Templates/') &&
+        !story.name.toLowerCase().includes('test') &&
+        !story.title.includes('Guide')
+
+      if (isVisualizationStory) {
+        const iframeUrl = `http://localhost:6006/iframe.html?id=${story.id}`
+        storyUrls.push(iframeUrl)
+      }
+    }
+  })
+  return storyUrls
+}
+
+/**
+ * Convert iframe URL to Storybook story URL for better debugging
+ * @param iframeUrl - The iframe URL (e.g., 'http://localhost:6006/iframe.html?id=components-templates-chart--multiple-lines')
+ * @returns The Storybook story URL (e.g., 'http://localhost:6006/?path=/story/components-templates-chart--multiple-lines')
+ */
+const iframeUrlToStoryUrl = (iframeUrl: string): string => {
+  const url = new URL(iframeUrl)
+  const storyId = url.searchParams.get('id')
+  return `http://localhost:6006/?path=/story/${storyId}`
+}
+
+/**
+ * Test a single Storybook iframe URL for successful visualization rendering
+ * @param iframeUrl - The complete iframe URL to test (e.g., 'http://localhost:6006/iframe.html?id=...')
+ * @returns Promise that resolves with test results
+ */
+const testIframeVisualization = async (iframeUrl: string) => {
+  iframeUrl = iframeUrl
+
+  const iframe = document.createElement('iframe')
+  iframe.style.width = '1200px'
+  iframe.style.height = '800px'
+  iframe.src = iframeUrl
+  document.body.appendChild(iframe)
+
+  try {
+    await performAndAssert(
+      'Wait for iframe to load',
+      () => {
+        try {
+          const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document
+          return {
+            loaded: !!iframeDoc && iframeDoc.readyState !== 'loading',
+            readyState: iframeDoc?.readyState || 'unknown'
+          }
+        } catch (error: any) {
+          return { loaded: false, readyState: 'error', error: error.message }
+        }
+      },
+      async () => {},
+      (before, after) => {
+        return after.loaded
+      }
+    )
+
+    await performAndAssert(
+      'Wait for SVG elements to render in iframe',
+      () => {
+        try {
+          const iframeDoc = iframe?.contentDocument || iframe?.contentWindow?.document
+          if (!iframeDoc) return { svgCount: 0, hasCoveModule: false, error: 'No document access' }
+
+          const svgCount = iframeDoc.querySelectorAll('svg').length
+          const hasCoveModule = !!iframeDoc.querySelector('.cdc-open-viz-module')
+          const isDataBite = !!iframeDoc.querySelector('.bite-content')
+          const isDataTable = !!iframeDoc.querySelector('.data-table')
+
+          return { svgCount, hasCoveModule, isDataBite, isDataTable, error: null }
+        } catch (error: any) {
+          return { svgCount: 0, hasCoveModule: false, isDataBite: false, isDataTable: false, error: error.message }
+        }
+      },
+      async () => {},
+      (before, after) => {
+        return (after.svgCount > 0 && after.hasCoveModule) || after.isDataBite || after.isDataTable
+      }
+    )
+  } finally {
+    if (iframe.parentNode) {
+      document.body.removeChild(iframe)
+    }
+  }
+}
+
+export const StoryRenderingTests: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByTestId('chart-rendering-validator')).toBeInTheDocument()
+
+    const storyUrls = await getVisualizationStoryUrls()
+
+    if (storyUrls.length === 0) {
+      console.warn('No visualization stories found to test')
+      return
+    }
+
+    const results: { iframeUrl: string; storyUrl: string; success: boolean; error?: string }[] = []
+
+    for (const [i, iframeUrl] of storyUrls.entries()) {
+      const storyUrl = iframeUrlToStoryUrl(iframeUrl)
+
+      try {
+        await testIframeVisualization(iframeUrl)
+        results.push({ iframeUrl, storyUrl, success: true })
+      } catch (error: any) {
+        if (i > 0) {
+          results.push({ iframeUrl, storyUrl, success: false, error: error.message })
+        }
+      }
+    }
+
+    const failed = results.filter(r => !r.success).length
+
+    if (failed > 0) {
+      throw new Error(`${failed} out of ${storyUrls.length} visualization stories failed to render`)
+    }
+  }
+}

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -3,12 +3,17 @@ import MapIcon from '../../assets/map-folded.svg'
 import ChartIcon from '../../assets/icon-chart-bar.svg'
 import MarkupIncludeIcon from '../../assets/icon-code.svg'
 import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
-import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
 import './advanced-editor-styles.css'
 import _ from 'lodash'
 import Tooltip from '../ui/Tooltip'
 
-export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
+export const AdvancedEditor = ({
+  loadConfig,
+  config,
+  convertStateToConfig,
+  stripConfig = config => config,
+  onExpandCollapse = () => {}
+}) => {
   const [advancedToggle, _setAdvancedToggle] = useState(false)
   const [configTextboxValue, setConfigTextbox] = useState<Record<string, any>>({})
   const setAdvancedToggle = val => {
@@ -26,19 +31,37 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
   }
 
   useEffect(() => {
-    let parsedConfig = stripConfig(config)
-    if (config.type !== 'dashboard') {
-      parsedConfig = convertStateToConfig()
+    // Only process config when advanced editor is open to improve performance
+    if (advancedToggle) {
+      let parsedConfig = stripConfig(config)
+      if (config.type !== 'dashboard') {
+        parsedConfig = convertStateToConfig()
+      }
+
+      setConfigTextbox(parsedConfig)
     }
+  }, [config, advancedToggle])
 
-    setConfigTextbox(parsedConfig)
-  }, [config])
+  // Initialize config when advanced editor is first opened
+  const handleToggleOpen = () => {
+    if (!advancedToggle) {
+      // Process config only when opening for the first time
+      let parsedConfig = stripConfig(config)
+      if (config.type !== 'dashboard') {
+        parsedConfig = convertStateToConfig()
+      }
+      setConfigTextbox(parsedConfig)
+    }
+    setAdvancedToggle(!advancedToggle)
+  }
 
   const typeLookup = {
     chart: ['Charts', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
     dashboard: ['Dashboard', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
     map: ['Maps', 'https://www.cdc.gov/cove/index.html', <MapIcon />],
-    'markup-include': ['Markup Include', 'https://www.cdc.gov/cove/index.html', <MarkupIncludeIcon />]
+    'markup-include': ['Markup Include', 'https://www.cdc.gov/cove/index.html', <MarkupIncludeIcon />],
+    'data-bite': ['Data Bite', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
+    'waffle-chart': ['Waffle Chart', 'https://www.cdc.gov/cove/index.html', <ChartIcon />]
   }
 
   if (!config.type) return <></>
@@ -58,7 +81,7 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
         </div>
       </a>
       <div className='advanced'>
-        <span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
+        <span className='advanced-toggle-link' onClick={handleToggleOpen}>
           <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
         </span>
         {advancedToggle && (

package/components/CustomColorsEditor/CustomColorsEditor.css

@@ -0,0 +1,299 @@
+.custom-colors-editor {
+  padding: 0.75rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  background-color: #f8f9fa;
+}
+
+.custom-colors-editor .custom-colors-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  color: #495057;
+}
+
+.custom-colors-editor .custom-colors-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  background-color: #d1ecf1;
+  border: 1px solid #bee5eb;
+  border-radius: 0.25rem;
+  color: #0c5460;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.custom-colors-editor .custom-colors-notice .notice-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  color: #17a2b8;
+}
+
+.custom-colors-editor .custom-colors-notice strong {
+  font-weight: 600;
+}
+
+.custom-colors-editor .custom-colors-notice a {
+  color: #0c5460;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.custom-colors-editor .custom-colors-notice a:hover {
+  color: #062a30;
+  text-decoration: none;
+}
+
+.custom-colors-editor .custom-colors-preview {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  min-height: 36px;
+  overflow: hidden;
+}
+
+.custom-colors-editor .custom-colors-preview .preview-swatch {
+  flex: 1;
+  min-width: 8px;
+  border-radius: 2px;
+  transition: transform 0.15s ease;
+}
+
+.custom-colors-editor .custom-colors-preview .preview-swatch:hover {
+  transform: scale(1.1);
+}
+
+.custom-colors-editor .custom-colors-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-right: 0.25rem;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.custom-colors-editor .custom-color-item {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  transition: box-shadow 0.15s ease, opacity 0.15s ease;
+}
+
+.custom-colors-editor .custom-color-item.dragging {
+  opacity: 0.5;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  cursor: grabbing;
+}
+
+.custom-colors-editor .custom-color-item:hover:not(.dragging) {
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
+  border-color: #adb5bd;
+}
+
+.custom-colors-editor .color-item-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 576px) {
+  .custom-colors-editor .color-item-controls {
+    gap: 0.375rem;
+  }
+}
+
+.custom-colors-editor .color-item-drag-handle {
+  color: #adb5bd;
+  font-size: 0.875rem;
+  cursor: grab;
+  user-select: none;
+  line-height: 1;
+  flex-shrink: 0;
+  padding: 0 0.125rem;
+}
+
+.custom-colors-editor .color-item-drag-handle:active {
+  cursor: grabbing;
+}
+
+.custom-colors-editor .custom-color-item:hover .color-item-drag-handle {
+  color: #6c757d;
+}
+
+.custom-colors-editor .color-item-number {
+  font-weight: 600;
+  min-width: 24px;
+  text-align: right;
+  color: #6c757d;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.custom-colors-editor .color-picker {
+  width: 48px;
+  height: 34px;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  padding: 2px;
+  flex-shrink: 0;
+  transition: border-color 0.15s ease;
+}
+
+.custom-colors-editor .color-picker:hover {
+  border-color: #80bdff;
+}
+
+.custom-colors-editor .color-picker:focus {
+  outline: none;
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.custom-colors-editor .color-input-wrapper {
+  flex: 1;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+/* Override TextField label wrapper styles */
+.custom-colors-editor .color-input-wrapper label {
+  margin-bottom: 0;
+}
+
+/* Hide the label text since we're passing empty string */
+.custom-colors-editor .color-input-wrapper label .edit-label {
+  display: none;
+}
+
+.custom-colors-editor .color-input-wrapper label input[type='text'] {
+  font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  text-transform: uppercase;
+}
+
+@media (max-width: 576px) {
+  .custom-colors-editor .color-input-wrapper {
+    flex-basis: 100%;
+  }
+}
+
+.custom-colors-editor .color-item-buttons {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.custom-colors-editor .btn-move,
+.custom-colors-editor .btn-remove {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+}
+
+.custom-colors-editor .btn-move:hover:not(:disabled),
+.custom-colors-editor .btn-remove:hover:not(:disabled) {
+  background-color: #e9ecef;
+  border-color: #adb5bd;
+}
+
+.custom-colors-editor .btn-move:active:not(:disabled),
+.custom-colors-editor .btn-remove:active:not(:disabled) {
+  background-color: #dee2e6;
+  transform: scale(0.95);
+}
+
+.custom-colors-editor .btn-move:disabled,
+.custom-colors-editor .btn-remove:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.custom-colors-editor .btn-remove {
+  color: #dc3545;
+  font-weight: 700;
+  font-size: 1.125rem;
+}
+
+.custom-colors-editor .btn-remove:hover:not(:disabled) {
+  background-color: #dc3545;
+  color: #fff;
+  border-color: #dc3545;
+}
+
+.custom-colors-editor .btn-add-color {
+  width: 100%;
+  padding: 0.5rem;
+  border: 2px dashed #ced4da;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  color: #6c757d;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.custom-colors-editor .btn-add-color:hover:not(:disabled) {
+  border-color: #007bff;
+  color: #007bff;
+  background-color: #e7f1ff;
+}
+
+.custom-colors-editor .btn-add-color:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.custom-colors-editor .btn-add-color:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.custom-colors-editor .custom-colors-info {
+  text-align: center;
+  font-size: 0.75rem;
+  color: #6c757d;
+  margin-top: 0.5rem;
+  font-style: italic;
+}