@cdc/core 4.25.7 → 4.25.10

package/components/PaletteSelector/DeveloperPaletteRollback.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import _ from 'lodash'
+import { isCoveDeveloperMode } from '../../helpers/queryStringUtils'
+import { 
+  hasPaletteBackup, 
+  getOriginalPaletteName, 
+  rollbackPaletteToOriginal,
+  hasTwoColorPaletteBackup,
+  getOriginalTwoColorPaletteName,
+  rollbackTwoColorPaletteToOriginal
+} from '../../helpers/palettes/utils'
+import './PaletteSelector.css'
+
+interface DeveloperPaletteRollbackProps {
+  config: any
+  updateConfig: (newConfig: any) => void
+  className?: string
+}
+
+const DeveloperPaletteRollback: React.FC<DeveloperPaletteRollbackProps> = ({
+  config,
+  updateConfig,
+  className = ''
+}) => {
+  // Only show if developer mode is enabled
+  if (!isCoveDeveloperMode()) {
+    return null
+  }
+
+  // Check for both regular and two-color palette backups
+  const hasRegularBackup = hasPaletteBackup(config)
+  const hasTwoColorBackup = hasTwoColorPaletteBackup(config)
+  
+  // Only show if there's backup data available
+  if (!hasRegularBackup && !hasTwoColorBackup) {
+    return null
+  }
+
+  const originalPaletteName = getOriginalPaletteName(config)
+  const originalTwoColorPaletteName = getOriginalTwoColorPaletteName(config)
+  const currentPaletteName = config?.general?.palette?.name || config?.palette || config?.color
+  const currentTwoColorPaletteName = config?.twoColor?.palette
+
+  const handleRollback = () => {
+    // Determine which type of rollback to perform and show appropriate confirmation
+    let confirmMessage = ''
+    let fromName = ''
+    let toName = ''
+    
+    if (hasTwoColorBackup) {
+      // Two-color palette rollback
+      fromName = currentTwoColorPaletteName
+      toName = originalTwoColorPaletteName
+      confirmMessage = `Are you sure you want to rollback the palette from "${fromName}" to "${toName}"?\n\nThis will restore the original v1 palette configuration.`
+    } else if (hasRegularBackup) {
+      // Regular palette rollback  
+      fromName = currentPaletteName
+      toName = originalPaletteName
+      confirmMessage = `Are you sure you want to rollback the palette from "${fromName}" to "${toName}"?\n\nThis will restore the original palette configuration and remove the migrated structure.`
+    }
+
+    const confirmRollback = window.confirm(confirmMessage)
+
+    if (confirmRollback) {
+      const configCopy = _.cloneDeep(config)
+      console.log('Config before rollback:', JSON.stringify(configCopy, null, 2))
+      
+      let success = false
+      
+      if (hasTwoColorBackup) {
+        success = rollbackTwoColorPaletteToOriginal(configCopy)
+        console.log('Two-color rollback success:', success)
+      } else if (hasRegularBackup) {
+        const rolledBackConfig = rollbackPaletteToOriginal(configCopy)
+        success = !!rolledBackConfig
+        console.log('Regular rollback success:', success)
+      }
+      
+      console.log('Config after rollback:', JSON.stringify(configCopy, null, 2))
+
+      if (success) {
+        updateConfig(configCopy)
+      } else {
+        alert('Rollback failed: No backup data available')
+      }
+    }
+  }
+
+  // Determine display text based on available backups
+  const displayPaletteName = hasTwoColorBackup ? originalTwoColorPaletteName : originalPaletteName
+  const infoText = hasTwoColorBackup 
+    ? `Developer Mode: Two-color palette migrated from "${originalTwoColorPaletteName}"`
+    : `Developer Mode: Migrated from "${originalPaletteName}"`
+
+  return (
+    <div className={`developer-palette-rollback ${className}`}>
+      <div className="rollback-info">
+        <small className="text-muted">
+          {infoText}
+        </small>
+      </div>
+      <button
+        type="button"
+        className="btn btn-sm btn-outline-warning"
+        onClick={handleRollback}
+        title={`Rollback to original palette: ${displayPaletteName}`}
+      >
+        Rollback Palette
+      </button>
+    </div>
+  )
+}
+
+export default DeveloperPaletteRollback

package/components/PaletteSelector/PaletteSelector.css

@@ -0,0 +1,51 @@
+/* PaletteSelector component styles */
+/* Shared styles for palette color swatches across all visualization types */
+
+.color-palette {
+  /* Button-based palette selector (used by charts) */
+}
+
+.color-palette button:not(.selected) {
+  border: var(--cool-gray-30) 2px solid !important;
+}
+
+.color-palette button.selected {
+  border: black 2px solid !important;
+}
+
+/* List item-based palette selector (used by maps) */
+.color-palette li {
+  border: var(--cool-gray-30) 2px solid;
+}
+
+.color-palette li.selected {
+  border: black 2px solid;
+}
+
+/* Developer rollback component styles */
+.developer-palette-rollback {
+  margin: 8px 0;
+  padding: 8px;
+  border: 1px dashed #ffc107;
+  border-radius: 4px;
+  background-color: #fffbf0;
+}
+
+.developer-palette-rollback .rollback-info {
+  margin-bottom: 4px;
+}
+
+.developer-palette-rollback .rollback-info small {
+  color: #856404;
+  font-size: 0.75rem;
+}
+
+.developer-palette-rollback button {
+  font-size: 0.75rem;
+  padding: 2px 8px;
+}
+
+.developer-palette-rollback button:hover {
+  background-color: #ffc107;
+  color: #212529;
+}

package/components/PaletteSelector/PaletteSelector.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { getPaletteAccessor } from '../../helpers/getPaletteAccessor'
+import './PaletteSelector.css'
+
+interface PaletteSelectorProps {
+  palettes: string[]
+  colorPalettes: any
+  config: any
+  onPaletteSelect: (palette: string) => void
+  selectedPalette?: string
+  colorIndices?: [number, number, number]
+  className?: string
+  element?: 'button' | 'li'
+  minColorsForFilter?: (palette: string, paletteAccessor: any, config: any) => boolean
+  getItemClassName?: (palette: string) => string
+}
+
+const PaletteSelector: React.FC<PaletteSelectorProps> = ({
+  palettes,
+  colorPalettes,
+  config,
+  onPaletteSelect,
+  selectedPalette,
+  colorIndices = [2, 3, 5],
+  className = 'color-palette',
+  element = 'button',
+  minColorsForFilter,
+  getItemClassName
+}) => {
+
+  const handlePaletteSelection = (palette: string) => (e: React.MouseEvent) => {
+    if (element === 'button') {
+      e.preventDefault()
+    }
+    onPaletteSelect(palette)
+  }
+
+  const getSelectedClass = (palette: string) => {
+    if (getItemClassName) {
+      return getItemClassName(palette)
+    }
+    return selectedPalette === palette ? 'selected' : ''
+  }
+
+  const renderPaletteColors = (palette: string) => {
+    const [colorOneIndex, colorTwoIndex, colorThreeIndex] = colorIndices
+
+    // Use the enhanced getPaletteAccessor to get the specific palette colors
+    const paletteColors = getPaletteAccessor(colorPalettes, config, palette)
+
+    if (!paletteColors || !Array.isArray(paletteColors)) {
+      return (
+        <>
+          <span style={{ backgroundColor: '#ccc' }}></span>
+          <span style={{ backgroundColor: '#ccc' }}></span>
+          <span style={{ backgroundColor: '#ccc' }}></span>
+        </>
+      )
+    }
+
+    const colorOne = {
+      backgroundColor: paletteColors[colorOneIndex] || '#ccc'
+    }
+
+    const colorTwo = {
+      backgroundColor: paletteColors[colorTwoIndex] || '#ccc'
+    }
+
+    const colorThree = {
+      backgroundColor: paletteColors[colorThreeIndex] || '#ccc'
+    }
+
+    return (
+      <>
+        <span style={colorOne}></span>
+        <span style={colorTwo}></span>
+        <span style={colorThree}></span>
+      </>
+    )
+  }
+
+  const Container = element === 'li' ? 'ul' : 'div'
+
+  return (
+    <Container className={className}>
+      {palettes.map(palette => {
+        // Apply custom filter if provided
+        if (minColorsForFilter) {
+          const paletteColors = getPaletteAccessor(colorPalettes, config, palette)
+          if (!minColorsForFilter(palette, paletteColors, config)) {
+            return null
+          }
+        }
+
+        const Element = element
+
+        return (
+          <Element
+            key={palette}
+            title={palette}
+            onClick={handlePaletteSelection(palette)}
+            className={getSelectedClass(palette)}
+          >
+            {renderPaletteColors(palette)}
+          </Element>
+        )
+      })}
+    </Container>
+  )
+}
+
+export default PaletteSelector

package/components/PaletteSelector/index.ts

@@ -0,0 +1,2 @@
+export { default as PaletteSelector } from './PaletteSelector'
+export { default as DeveloperPaletteRollback } from './DeveloperPaletteRollback'

package/components/RichTooltip/RichTooltip.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
 import './richTooltip.css'
 
 const RichTooltip = ({ linkText, href = null, tooltipOpacity = 100, tooltipContent }) => {

package/components/Table/Table.tsx

@@ -46,8 +46,10 @@ const Table = ({
   const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
 
+  const { cellMinWidth, ...tableAttrs } = tableOptions
+
   return (
-    <table {...tableOptions}>
+    <table {...tableAttrs}>
       <caption className='visually-hidden'>{caption}</caption>
       {noData ? (
         <tr>

package/components/_stories/BlurStrokeTest.stories.tsx

@@ -1,6 +1,6 @@
 import { a } from 'vitest/dist/suite-IbNSsUWN'
 import { BlurStrokeText } from '../BlurStrokeText'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 const meta: Meta<typeof BlurStrokeText> = {
   title: 'Components/Atoms/BlurStrokeText',

package/components/_stories/DataTable.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import DataTable from '../DataTable'
 import './styles.scss'

package/components/_stories/Filters.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import Filters from '../Filters'
 import { VizFilter } from '../../types/VizFilter'

package/components/_stories/Footnotes.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import Footnotes from '../Footnotes'
 
 const meta: Meta<typeof Footnotes> = {

package/components/_stories/Inputs.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import InputSelect from '../inputs/InputSelect'
 import { useState } from 'react'

package/components/_stories/MultiSelect.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import MultiSelect from '../MultiSelect'
-import { userEvent, within } from '@storybook/testing-library'
+import { userEvent, within } from 'storybook/test'
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Components/Molecules/MultiSelect',
@@ -10,7 +10,7 @@ const meta: Meta<typeof MultiSelect> = {
 
 type Story = StoryObj<typeof MultiSelect>
 
-export const Primary: Story = {
+export const PrimaryTests: Story = {
   args: {
     options: [
       { value: '1', label: 'One' },

package/components/_stories/NestedDropdown.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import NestedDropdown from '../NestedDropdown'
 import nestedDropdownStory from './_mocks/nested-dropdown.json'
 import { useState } from 'react'

package/components/_stories/Table.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import Table from '../Table'
 import { ReactNode } from 'react'

package/components/elements/_stories/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Button from '../Button'
 

package/components/elements/_stories/Card.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Card from '../Card'
 

package/components/inputs/InputToggle.tsx

@@ -19,6 +19,8 @@ type InputSliderProps = {
   fieldName?: string
   /** Prop drill down of the updateField function */
   updateField?: Function
+  /** Click handler function */
+  onClick?: Function
   /** Current value of the input, usually the current config option value */
   value: boolean
 }

package/components/managers/DataDesigner.tsx

@@ -22,6 +22,7 @@ type DataDesignerProps = {
 
 const DataDesigner = (props: DataDesignerProps) => {
   const { configureData, updateDescriptionProp, config, setConfig } = props
+  const firstDataRow = configureData?.data?.[0] || {}
   const hasDataOrientation = config?.visualizationType !== 'Forest Plot'
   const hasMultipleSeries = config?.visualizationType !== 'Forest Plot'
   const hasRowSelection = config?.visualizationType !== 'Forest Plot'
@@ -134,7 +135,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 defaultValue={configureData.dataDescription.seriesKey}
               >
                 <option value=''>Choose an option</option>
-                {Object.keys(configureData.data[0]).map((value, index) => (
+                {Object.keys(firstDataRow).map((value, index) => (
                   <option value={value} key={index}>
                     {value}
                   </option>
@@ -200,7 +201,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                         defaultValue={configureData.dataDescription.seriesKey}
                       >
                         <option value=''>Choose an option</option>
-                        {Object.keys(configureData.data[0]).map((value, index) => (
+                        {Object.keys(firstDataRow).map((value, index) => (
                           <option value={value} key={index}>
                             {value}
                           </option>
@@ -218,7 +219,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                         defaultValue={configureData.dataDescription.xKey}
                       >
                         <option value=''>Choose an option</option>
-                        {Object.keys(configureData.data[0]).map((value, index) => (
+                        {Object.keys(firstDataRow).map((value, index) => (
                           <option value={value} key={index}>
                             {value}
                           </option>
@@ -264,7 +265,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                         }}
                       >
                         <option value=''>Choose an option</option>
-                        {Object.keys(configureData.data[0])
+                        {Object.keys(firstDataRow)
                           .filter(
                             value =>
                               !configureData.dataDescription.valueKeysTallSupport ||
@@ -313,7 +314,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                         }}
                       >
                         <option value=''>Choose an option</option>
-                        {Object.keys(configureData.data[0])
+                        {Object.keys(firstDataRow)
                           .filter(
                             value =>
                               !configureData.dataDescription.ignoredKeys ||
@@ -348,7 +349,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   defaultValue={'Select'}
                 >
                   <option value=''>Choose an option</option>
-                  {Object.keys(configureData.data[0]).map((value, index) => (
+                  {Object.keys(firstDataRow).map((value, index) => (
                     <option value={value} key={index}>
                       {value}
                     </option>
@@ -371,7 +372,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   defaultValue={'Select'}
                 >
                   <option value=''>Choose an option</option>
-                  {Object.keys(configureData.data[0]).map((value, index) => (
+                  {Object.keys(firstDataRow).map((value, index) => (
                     <option value={value} key={index}>
                       {value}
                     </option>
@@ -394,7 +395,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   defaultValue={'Select'}
                 >
                   <option value=''>Choose an option</option>
-                  {Object.keys(configureData.data[0]).map((value, index) => (
+                  {Object.keys(firstDataRow).map((value, index) => (
                     <option value={value} key={index}>
                       {value}
                     </option>
@@ -417,7 +418,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   defaultValue={'Select'}
                 >
                   <option value=''>Choose an option</option>
-                  {Object.keys(configureData.data[0]).map((value, index) => (
+                  {Object.keys(firstDataRow).map((value, index) => (
                     <option value={value} key={index}>
                       {value}
                     </option>

package/components/managers/_stories/DataDesigner.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import DataDesigner from '../DataDesigner'
 

package/components/ui/Tooltip.tsx

@@ -2,6 +2,7 @@ import { useId } from 'react'
 
 // Third Party
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
 import type { PlacesType } from 'react-tooltip'
 
 // Styles
@@ -44,7 +45,7 @@ const Tooltip: React.FC<ToolTipProps> & { Target; Content } = ({
         className='cove-tooltip--target'
         data-tooltip-float={float}
         data-tooltip-place={place}
-        data-tooltip-isOpen={true}
+        data-tooltip-isopen={true}
       >
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
       </a>

package/components/ui/_stories/Accordion.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import Accordion from '../Accordion'