@cdc/chart 4.25.8 → 4.25.11

package/src/hooks/useTooltip.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useRef, useLayoutEffect } from 'react'
 // Local imports
 import parse from 'html-react-parser'
 import ConfigContext from '../ConfigContext'
@@ -8,10 +8,12 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 // Third-party library imports
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
-import _ from 'lodash'
+import _, { get } from 'lodash'
 import { getHorizontalBarHeights } from '../components/BarChart/helpers/getBarHeights'
 
 export const useTooltip = props => {
+  // Track the last X-axis value to prevent duplicate analytics events
+  const lastAnalyticsXValue = useRef<string | number | null>(null)
   const {
     tableData: data,
     config,
@@ -23,9 +25,17 @@ export const useTooltip = props => {
     setSharedFilter,
     isDraggingAnnotation
   } = useContext<ChartContext>(ConfigContext)
-  const { xScale, yScale, seriesScale, showTooltip, hideTooltip } = props
+  const { xScale, yScale, seriesScale, showTooltip, hideTooltip, interactionLabel = '' } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
 
+  // Track the latest xScale in a ref to prevent stale closures
+  const xScaleRef = useRef(xScale)
+
+  // Update ref whenever xScale prop changes
+  useLayoutEffect(() => {
+    xScaleRef.current = xScale
+  }, [xScale])
+
   const Y_AXIS_SIZE = Number(config.yAxis.size || 0)
 
   // function handles only Single series hovered data tooltips
@@ -84,6 +94,7 @@ export const useTooltip = props => {
 
     const resolvedScaleValues = getResolvedScaleValues([x, y])
     const singleSeriesValue = getYValueFromCoordinate(y, resolvedScaleValues)
+
     const columnsWithTooltips = []
     const tooltipItems = [] as any[][]
     for (const [colKey, column] of Object.entries(config.columns)) {
@@ -154,6 +165,10 @@ export const useTooltip = props => {
         return position
       }
       if (!config.tooltips.singleSeries || visualizationType === 'Line') {
+        // Collect analytics data for all series
+        const analyticsSeriesData: string[] = []
+        let xAxisValue: string | number | null = null
+
         tooltipItems.push(
           ...getIncludedTooltipSeries()
             ?.filter(seriesKey => {
@@ -168,6 +183,7 @@ export const useTooltip = props => {
               const seriesObjWithName = config.runtime.series.find(
                 series => series.dataKey === seriesKey && series.name !== undefined
               )
+
               if (
                 (value === null || value === undefined || value === '' || formattedValue === 'N/A') &&
                 config.general.hideNullValue
@@ -181,6 +197,29 @@ export const useTooltip = props => {
             })
         )
 
+        // Publish a single analytics event with all tooltip data
+        // Only publish if the X-axis value has changed (different from last hover)
+        if (analyticsSeriesData.length > 0 && xAxisValue !== lastAnalyticsXValue.current) {
+          lastAnalyticsXValue.current = xAxisValue
+
+          // Extract series names for the series field
+          const seriesNames = analyticsSeriesData.map(item => item.split(':')[0].trim()).join(', ')
+
+          const specifics = xAxisValue
+            ? `series: ${seriesNames}, x: ${xAxisValue}, ${analyticsSeriesData.join(', ')}`
+            : `series: ${seriesNames}, ${analyticsSeriesData.join(', ')}`
+
+          publishAnalyticsEvent({
+            vizType: config?.type,
+            vizSubType: getVizSubType(config),
+            eventType: `chart_hover`,
+            eventAction: 'hover',
+            eventLabel: interactionLabel || 'unknown',
+            vizTitle: getVizTitle(config),
+            specifics
+          })
+        }
+
         const runtimeSeries =
           config.tooltips.singleSeries && visualizationType === 'Line'
             ? [_.find(config.runtime.series, d => d.dataKey === singleSeriesValue)]
@@ -239,6 +278,9 @@ export const useTooltip = props => {
    * @returns {void} - The tooltip information is hidden
    */
   const handleTooltipMouseOff = () => {
+    // Reset the analytics tracking when mouse leaves
+    lastAnalyticsXValue.current = null
+
     if (config.visualizationType === 'Area Chart') {
       setTimeout(() => {
         hideTooltip()
@@ -255,15 +297,15 @@ export const useTooltip = props => {
    */
   const getXValueFromCoordinateDate = x => {
     if (config.xAxis.type === 'categorical' || config.visualizationType === 'Combo') {
-      let eachBand = xScale.step()
+      let eachBand = xScaleRef.current.step()
       let numerator = x
       const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
+      return xScaleRef.current.domain()[index - 1] // fixes off by 1 error
     }
 
     if (isDateScale(config.xAxis) && config.visualizationType !== 'Combo') {
       const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      const x0 = xScale.invert(xScale(x))
+      const x0 = xScaleRef.current.invert(xScaleRef.current(x))
       const index = bisectDate(config.data, x0, 1)
       const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
       return val
@@ -275,12 +317,12 @@ export const useTooltip = props => {
    * @function getXValueFromCoordinate
    * @returns {String} - the closest x value to the cursor position
    */
-  const getXValueFromCoordinate = (x, isClick = false) => {
+  const getXValueFromCoordinate = x => {
     if (visualizationType === 'Pie') return
     if (orientation === 'horizontal') return
 
     // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
-    if (xScale.type === 'point' || xAxis.type === 'continuous' || isDateScale(xAxis)) {
+    if (xScaleRef.current.type === 'point' || xAxis.type === 'continuous' || isDateScale(xAxis)) {
       // Find the closest x value by calculating the minimum distance
       let closestX = null
       let minDistance = Number.MAX_VALUE
@@ -288,9 +330,11 @@ export const useTooltip = props => {
 
       const barThicknessOffset = config.xAxis.type === 'date' ? xScale.bandwidth() / 2 : 0
       data.forEach(d => {
-        const xPosition = isDateScale(xAxis) ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
+        const xPosition = isDateScale(xAxis)
+          ? xScaleRef.current(parseDate(d[xAxis.dataKey]))
+          : xScaleRef.current(d[xAxis.dataKey])
         let bwOffset = config.barHeight
-        const distance = Math.abs(Number(xPosition + barThicknessOffset - offset + (isClick ? bwOffset * 2 : 0)))
+        const distance = Math.abs(Number(xPosition + barThicknessOffset - offset))
 
         if (distance <= minDistance) {
           minDistance = distance
@@ -300,16 +344,50 @@ export const useTooltip = props => {
       return closestX
     }
 
+    // For band scales, find which band the mouse x-coordinate falls within
     if (config.xAxis.type === 'categorical' || visualizationType === 'Combo') {
-      let range = xScale.range()[1] - xScale.range()[0]
-      let eachBand = range / (xScale.domain().length + 1)
+      const domain = xScaleRef.current.domain()
+      const bandwidth = xScaleRef.current.bandwidth()
 
-      let numerator = x
-      const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
-      return xScale.domain()[index] // fixes off by 1 error
+      let closestValue = null
+      let minDistance = Number.MAX_VALUE
+
+      domain.forEach(value => {
+        const bandStart = xScaleRef.current(value)
+        const bandCenter = bandStart + bandwidth / 2
+        const distance = Math.abs(x - bandCenter)
+
+        if (distance < minDistance) {
+          minDistance = distance
+          closestValue = value
+        }
+      })
+
+      return closestValue
     }
   }
 
+  /**
+   * Helper for converting data value to pixel coordinate (inverse of getXValueFromCoordinate)
+   * @function getCoordinateFromXValue
+   * @param {any} xAxisValue - X-axis data value (date, number, or category)
+   * @returns {number} - pixel coordinate for the data value
+   */
+  const getCoordinateFromXValue = xAxisValue => {
+    if (visualizationType === 'Pie') return 0
+    if (orientation === 'horizontal') return 0
+
+    // Convert data value to pixel coordinate using current xScale
+    let pixelX = isDateScale(xAxis) ? xScaleRef.current(parseDate(xAxisValue)) : xScaleRef.current(xAxisValue)
+
+    // For band scales (bar charts, categorical axes), add bandwidth offset to point to center of bar
+    if (xScaleRef.current.bandwidth) {
+      pixelX += xScaleRef.current.bandwidth() / 2
+    }
+
+    return pixelX
+  }
+
   const findClosest = (dataArray: [any, number][], mouseXorY) => {
     let dataColumn: Object
     dataArray.find(([d, xOrY]) => {
@@ -397,7 +475,7 @@ export const useTooltip = props => {
       const eventSvgCoords = localPoint(e)
       const { x } = eventSvgCoords
       if (!x) throw new Error('COVE: no x value in handleTooltipClick.')
-      let closestXScaleValue = getXValueFromCoordinate(x, true)
+      let closestXScaleValue = getXValueFromCoordinate(x)
       let datum = config.data?.filter(item => item[config.xAxis.dataKey] === closestXScaleValue)
       if (!closestXScaleValue) throw new Error('COVE: no closest x scale value in handleTooltipClick')
       if (isDateScale(xAxis) && closestXScaleValue) {
@@ -468,7 +546,7 @@ export const useTooltip = props => {
         const dataWithXScale = dataToSearch.map(
           d => [d, seriesScale(d[dynamicSeries.dynamicCategory])] as [Object, number]
         )
-        const xOffset = x - Y_AXIS_SIZE - xScale(closestXScaleValue)
+        const xOffset = x - Y_AXIS_SIZE - xScaleRef.current(closestXScaleValue)
         dataToSearch = [findClosest(dataWithXScale, xOffset)]
       }
     }
@@ -571,18 +649,26 @@ export const useTooltip = props => {
 
     // TOOLTIP BODY
     // handle suppressed tooltip items
-    const { label, displayGray } =
-      (config.visualizationSubType !== 'stacked' &&
-        config.general.showSuppressedSymbol &&
-        config.preliminaryData?.find(
-          pd =>
-            pd.label &&
-            pd.type === 'suppression' &&
-            pd.displayTooltip &&
-            value === pd.value &&
-            (!pd.column || key === pd.column)
-        )) ||
-      {}
+    const shouldCheckSuppression = config.visualizationSubType !== 'stacked'
+    let suppressionEntry
+    if (shouldCheckSuppression && config.preliminaryData) {
+      suppressionEntry = config.preliminaryData.find(
+        pd =>
+          pd.label &&
+          pd.type === 'suppression' &&
+          pd.displayTooltip &&
+          value === pd.value &&
+          (!pd.column || key === pd.column)
+      )
+    }
+
+    // Remove suppressed items entirely if not showing symbols
+    if (suppressionEntry && !config.general.showSuppressedSymbol) {
+      return null
+    }
+
+    const { label, displayGray } = suppressionEntry || {}
+
     let newValue = label || value
     const style = displayGray ? { color: '#8b8b8a' } : {}
 
@@ -603,6 +689,7 @@ export const useTooltip = props => {
     getIncludedTooltipSeries,
     getXValueFromCoordinate,
     getXValueFromCoordinateDate,
+    getCoordinateFromXValue,
     handleTooltipClick,
     handleTooltipMouseOff,
     handleTooltipMouseOver,

package/src/index.jsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import './coreStyles_chart.scss'
 import '@cdc/core/styles/cove-main.scss'
-import 'react-tooltip/dist/react-tooltip.css'
 
 import CdcChart from './CdcChart'
 

package/src/scss/main.scss

@@ -1,52 +1,4 @@
-@import '@cdc/core/styles/accessibility';
-
-@mixin breakpoint($class) {
-  @if $class == xs {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $class == sm {
-    @media (min-width: 768px) {
-      @content;
-    }
-  } @else if $class == md {
-    @media (min-width: 960px) {
-      @content;
-    }
-  } @else if $class == lg {
-    @media (min-width: 1300px) {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint mixin supports: xs, sm, md, lg";
-  }
-}
-
-@mixin breakpointClass($class) {
-  @if $class == xs {
-    &.xs,
-    &.xxs {
-      @content;
-    }
-  } @else if $class == sm {
-    &.sm,
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == md {
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == lg {
-    &.lg {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
-  }
-}
+@import '@cdc/core/styles/v2/utils/breakpoints';
 
 .form-container {
   overflow-y: auto;
@@ -91,37 +43,6 @@
 
   border-radius: 3px;
 
-  .checkbox-group {
-    padding: 16px;
-    border: 1px solid #c4c4c4;
-    border-radius: 8px;
-    margin-top: 8px;
-    margin-bottom: 24px;
-  }
-
-  .loader {
-    width: 100%;
-    text-align: center;
-    display: inline-block;
-    animation: spin 1s linear infinite;
-
-    &::before {
-      content: '\21BB';
-    }
-  }
-
-  .warning-icon {
-    position: relative;
-    top: 2px;
-    width: 15px;
-    height: 15px;
-    margin-left: 5px;
-
-    path {
-      fill: #d8000c;
-    }
-  }
-
   .chart-description {
     margin-bottom: 20px;
   }
@@ -741,3 +662,15 @@
 .cdc-open-viz-module .debug {
   border: 2px solid red;
 }
+
+// Pattern Legend Styles - using Bootstrap classes for layout, CSS for gaps only
+.legend-patterns {
+  gap: var(--space-between-legend-item-rows);
+  margin-top: var(--space-between-legend-item-rows);
+
+  // When in row layout (top/bottom), override gap for proper row/column spacing
+  &.flex-row {
+    row-gap: var(--space-between-legend-item-rows);
+    column-gap: var(--space-between-legend-item-columns);
+  }
+}

package/src/store/chart.actions.ts

@@ -12,6 +12,7 @@ type SET_EXCLUDED_DATA = Action<'SET_EXCLUDED_DATA', object[]>
 type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', object[]>
 type SET_SERIES_HIGHLIGHT = Action<'SET_SERIES_HIGHLIGHT', string[]>
 type SET_VIEWPORT = Action<'SET_VIEWPORT', string>
+type SET_VIZ_VIEWPORT = Action<'SET_VIZ_VIEWPORT', string>
 type SET_DIMENSIONS = Action<'SET_DIMENSIONS', DimensionsType>
 type SET_CONTAINER = Action<'SET_CONTAINER', object>
 type SET_LOADED_EVENT = Action<'SET_LOADED_EVENT', boolean>
@@ -26,6 +27,7 @@ type ChartActions =
   | SET_FILTERED_DATA
   | SET_SERIES_HIGHLIGHT
   | SET_VIEWPORT
+  | SET_VIZ_VIEWPORT
   | SET_DIMENSIONS
   | SET_CONTAINER
   | SET_LOADED_EVENT

package/src/store/chart.reducer.ts

@@ -13,6 +13,7 @@ type ChartState = {
   filteredData: object[]
   seriesHighlight: string[]
   currentViewport: ViewportSize
+  vizViewport: ViewportSize
   dimensions: DimensionsType
   container: HTMLElement | null
   coveLoadedEventRan: boolean
@@ -25,13 +26,14 @@ export const getInitialState = (configObj: ChartConfig): ChartState => {
   return {
     isLoading: true,
     config: defaults,
-    stateData: _.cloneDeep(configObj?.data) || [],
+    stateData: configObj?.data || [],
     colorScale: null,
     excludedData: undefined,
     filteredData: undefined,
     seriesHighlight:
       configObj && configObj?.legend?.seriesHighlight?.length ? [...configObj?.legend?.seriesHighlight] : [],
     currentViewport: 'lg',
+    vizViewport: 'lg',
     dimensions: [0, 0],
     container: null,
     coveLoadedEventRan: false,
@@ -61,6 +63,8 @@ export const reducer = (state: ChartState, action: ChartActions): ChartState =>
       return { ...state, seriesHighlight: action.payload }
     case 'SET_VIEWPORT':
       return { ...state, currentViewport: action.payload }
+    case 'SET_VIZ_VIEWPORT':
+      return { ...state, vizViewport: action.payload }
     case 'SET_DIMENSIONS':
       return { ...state, dimensions: action.payload }
     case 'SET_CONTAINER':

package/src/test/CdcChart.test.jsx

@@ -1,6 +1,11 @@
-// Placeholder test until we add them in.
+import path from 'path'
+import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
+import { describe, it, expect } from 'vitest'
+
 describe('Chart', () => {
-  it('has a test.', async () => {
-    return true
+  it('Can be built in isolation', async () => {
+    const pkgDir = path.join(__dirname, '..')
+    const result = testStandaloneBuild(pkgDir)
+    expect(result).toBe(true)
   })
 })

package/src/types/ChartConfig.ts

@@ -1,4 +1,5 @@
 import { Axis } from '@cdc/core/types/Axis'
+import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 import { type ForestPlotConfigSettings } from './ForestPlot'
 import { type Column } from '@cdc/core/types/Column'
 import { type Series } from '@cdc/core/types/Series'
@@ -6,7 +7,18 @@ import { Runtime } from '@cdc/core/types/Runtime'
 import { FilterBehavior } from '@cdc/core/types/FilterBehavior'
 import { Table } from '@cdc/core/types/Table'
 import { BoxPlot } from '@cdc/core/types/BoxPlot'
-import { General } from '@cdc/core/types/General'
+import { General as CoreGeneral } from '@cdc/core/types/General'
+
+// Extend the core General type to include palette information for charts
+type General = CoreGeneral & {
+  palette?: {
+    name?: string
+    version?: string
+    isReversed?: boolean
+    customColors?: string[]
+    customColorsOrdered?: string[]
+  }
+}
 import { type Link } from './../components/Sankey/types'
 import { type DataDescription } from '@cdc/core/types/DataDescription'
 import { type Legend as CoreLegend } from '@cdc/core/types/Legend'
@@ -19,7 +31,7 @@ import { Version } from '@cdc/core/types/Version'
 import Footnotes from '@cdc/core/types/Footnotes'
 
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
-export type ChartColumns = Record<string, Column>
+type ChartColumns = Record<string, Column>
 export type ChartOrientation = 'vertical' | 'horizontal'
 export type VisualizationType =
   | 'Area Chart'
@@ -64,6 +76,7 @@ type DataFormat = {
   bottomSuffix: string
   commas: boolean
   prefix: string
+  preserveOriginalDecimals?: boolean
   rightCommas: boolean
   rightPrefix: string
   rightRoundTo: number
@@ -80,7 +93,7 @@ type Exclusions = {
   dateEnd: string
 }
 
-export type Legend = CoreLegend & {
+type Legend = CoreLegend & {
   seriesHighlight: string[]
   unified: boolean
   hideSuppressionLink: boolean
@@ -96,6 +109,17 @@ export type Legend = CoreLegend & {
   }
   groupBy: string
   separators?: string
+  patterns?: {
+    [key: string]: {
+      label?: string
+      color?: string
+      shape?: string
+      dataKey?: string
+      dataValue?: string
+      contrastCheck?: boolean
+      patternSize?: number
+    }
+  }
 }
 
 type Visual = {
@@ -125,7 +149,6 @@ export type AllChartsConfig = {
   colorMatchLineSeriesLabels: boolean
   columns: ChartColumns
   confidenceKeys: ConfidenceInterval
-  customColors: string[]
   data: Object[]
   dataUrl: string
   dataCutoff: number
@@ -171,8 +194,22 @@ export type AllChartsConfig = {
   runtimeDataUrl: string
   series: Series
   showLineSeriesLabels: boolean
+  showAreaUnderLine?: boolean
   showSidebar: boolean
   showTitle: boolean
+  smallMultiples?: {
+    mode?: 'by-column' | 'by-series'
+    tileColumn?: string
+    tilesPerRowDesktop?: number
+    tilesPerRowMobile?: number
+    tileOrderType?: 'asc' | 'desc' | 'custom'
+    tileOrder?: string[]
+    tileTitles?: { [key: string]: string }
+    independentYAxis?: boolean
+    colorMode?: 'same' | 'different'
+    synchronizedTooltips?: boolean
+    showAreaUnderLine?: boolean
+  }
   sortData: 'ascending' | 'descending'
   stackedAreaChartLineType: string
   suppressedData?: { label: string; icon: string; value: string }[]
@@ -196,6 +233,8 @@ export type AllChartsConfig = {
   visualizationSubType: string
   xAxis: Axis
   yAxis: Axis
+  hideXAxisLabel?: boolean
+  hideYAxisLabel?: boolean
   xScale: Function
   yScale: Function
   regions: Region[]
@@ -225,12 +264,13 @@ export type AllChartsConfig = {
       default: string
     }
   }
-}
+} & MarkupConfig
 
-export type ForestPlotConfig = {
+type ForestPlotConfig = {
   visualizationType: 'Forest Plot'
   forestPlot: ForestPlotConfigSettings
-} & AllChartsConfig
+} & AllChartsConfig &
+  MarkupConfig
 
 export type LineChartConfig = {
   allowLineToBarGraph: boolean
@@ -238,9 +278,10 @@ export type LineChartConfig = {
   isolatedDotsSameSize: boolean
   lineDatapointStyle: 'hidden' | 'always show' | 'hover'
   visualizationType: 'Line'
-} & AllChartsConfig
+} & AllChartsConfig &
+  MarkupConfig
 
-export type SankeyLink = {
+type SankeyLink = {
   depth: number
   height: number
   id: string
@@ -261,7 +302,7 @@ type StoryNode = {
   segmentTextBefore: string
 }
 
-export type SankeyChartConfig = {
+type SankeyChartConfig = {
   enableTooltips: boolean
   data: [
     {
@@ -279,6 +320,7 @@ export type SankeyChartConfig = {
     }
   ]
   visualizationType: 'Sankey'
-} & AllChartsConfig
+} & AllChartsConfig &
+  MarkupConfig
 
 export type ChartConfig = SankeyChartConfig | LineChartConfig | ForestPlotConfig | AllChartsConfig

package/src/types/ChartContext.ts

@@ -16,13 +16,16 @@ type SharedChartContext = {
   clean: Function
   colorScale?: ColorScale
   config: ChartConfig
+  convertLineToBarGraph?: boolean
   currentViewport?: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  vizViewport?: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   dashboardConfig?: DashboardConfig
   // process top level chart aria label for each chart type
   handleChartAriaLabels: (config: any) => string
   handleDragStateChange: (isDragging: any) => void
   highlight?: Function
   handleShowAll?: Function
+  interactionLabel?: string
   // whether or not the chart is viewed within the editor screen
   isEditor?: boolean
   // whether or not the user is dragging an annotation
@@ -32,6 +35,7 @@ type SharedChartContext = {
   parentRef?: React.RefObject<HTMLDivElement>
   setLegendIsolateValues?: Function
   svgRef?: React.RefObject<SVGSVGElement>
+  handleSmallMultipleHover?: (xAxisValue: any, yCoordinate: number) => void
 }
 
 // Line Chart Specific Context

package/vite.config.js

@@ -1,4 +1,4 @@
-import GenerateViteConfig from '../../generateViteConfig.js'
+import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
 export default GenerateViteConfig(moduleName)

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['../../vitest.setup.ts'],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.storybook/**',
+      '**/*.stories.*',
+      '**/storybook-static/**'
+    ]
+  }
+})