Remove dependencies from core to other packages

Author: jayb

.github/workflows/unit-test.yml

@@ -19,6 +19,5 @@ jobs:
           node-version: 20.x
           cache: 'npm'
       - run: yarn install --production=false
-      - run: cd packages/core && npm link
       - run: lerna run build
       - run: npm run test --workspaces

docs/PACKAGE_DEPENDENCIES.md

@@ -244,9 +244,9 @@ To check for dependency violations:
 npx lerna run test
 
 # Search for explicit cross-package imports (excluding core, stories, dashboard, and editor)
-grep -r "from '@cdc/" packages/*/src --exclude="*.stories.*" | grep -v "/_stories/" | grep -v "@cdc/core" | grep -v "packages/dashboard/" | grep -v "packages/editor/"
+grep -r "from '@cdc/" packages/ --exclude="*.stories.*" --exclude-dir=node_modules | grep -v "/_stories/" | grep -v "@cdc/core" | grep -v "packages/dashboard/" | grep -v "packages/editor/" | grep -v "/types/" | grep -v "README.md"
 
 # Search for relative imports that explicitly reference other package names
 # These patterns catch imports like: from '../../chart/...' or from '../../../map/src/...'
-grep -rE "from ['\"]\.\..*/(chart|map|data-table|data-bite|waffle-chart|filtered-text|markup-include|dashboard|editor)/" packages/*/src --exclude="*.stories.*" | grep -v "/_stories/" | grep -v "packages/dashboard/" | grep -v "packages/editor/"
+grep -rE "from ['\"]\.\..*/(chart|map|data-table|data-bite|waffle-chart|filtered-text|markup-include|dashboard|editor)/" packages/ --exclude="*.stories.*" --exclude-dir=node_modules | grep -v "/_stories/" | grep -v "packages/dashboard/" | grep -v "packages/editor/"
 ```

packages/core/components/DataTable/DataTable.tsx

@@ -48,6 +48,14 @@ export type DataTableProps = {
   setFilteredCountryCode?: string // used for Maps only
   tabbingId: string
   tableTitle: string
+  applyLegendToRow?: (
+    rowObj: any,
+    config: any,
+    runtimeLegend: any,
+    legendMemo: any,
+    legendSpecialClassLastMemo: any
+  ) => string[]
+  getPatternForRow?: (rowObj: any, config: any) => any
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   vizTitle?: string
   // determines if columns should be wrapped in the table
@@ -145,23 +153,23 @@ const DataTable = (props: DataTableProps) => {
   const rows =
     isVertical && sortBy.column
       ? rawRows.sort((a, b) => {
-        let dataA
-        let dataB
-        if (config.type === 'map' && config.columns) {
-          const sortByColName = config.columns[sortBy.column].name
-          dataA = runtimeData[a][sortByColName]
-          dataB = runtimeData[b][sortByColName]
-        }
-        if (['chart', 'dashboard', 'table'].includes(config.type)) {
-          dataA = runtimeData[a][sortBy.column]
-          dataB = runtimeData[b][sortBy.column]
-        }
-        if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
-          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
-          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
-        }
-        return dataA || dataB ? customSort(dataA, dataB, sortBy, config) : 0
-      })
+          let dataA
+          let dataB
+          if (config.type === 'map' && config.columns) {
+            const sortByColName = config.columns[sortBy.column].name
+            dataA = runtimeData[a][sortByColName]
+            dataB = runtimeData[b][sortByColName]
+          }
+          if (['chart', 'dashboard', 'table'].includes(config.type)) {
+            dataA = runtimeData[a][sortBy.column]
+            dataB = runtimeData[b][sortBy.column]
+          }
+          if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
+            dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
+            dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
+          }
+          return dataA || dataB ? customSort(dataA, dataB, sortBy, config) : 0
+        })
       : rawRows
 
   const limitHeight = {
@@ -240,17 +248,17 @@ const DataTable = (props: DataTableProps) => {
       const visibleData =
         config.type === 'map'
           ? getMapRowData(
-            rows,
-            columns,
-            config,
-            formatLegendLocation,
-            runtimeData as Record<string, Object>,
-            displayGeoName,
-            filterColumns
-          )
+              rows,
+              columns,
+              config,
+              formatLegendLocation,
+              runtimeData as Record<string, Object>,
+              displayGeoName,
+              filterColumns
+            )
           : runtimeData.map(d => {
-            return _.pick(d, [...filterColumns, ...dataSeriesColumns])
-          })
+              return _.pick(d, [...filterColumns, ...dataSeriesColumns])
+            })
       const csvData = config.table?.downloadVisibleDataOnly ? visibleData : rawData
 
       // only use fullGeoName on County maps and no other
@@ -287,28 +295,28 @@ const DataTable = (props: DataTableProps) => {
     const childrenMatrix =
       config.type === 'map'
         ? mapCellMatrix({
-          ...props,
-          rows,
-          wrapColumns,
-          runtimeData,
-          viewport,
-          legendMemo: props.legendMemo || defaultLegendMemo,
-          legendSpecialClassLastMemo: props.legendSpecialClassLastMemo || defaultLegendSpecialClassLastMemo,
-          runtimeLegend: props.runtimeLegend || defaultRuntimeLegend
-        })
+            ...props,
+            rows,
+            wrapColumns,
+            runtimeData,
+            viewport,
+            legendMemo: props.legendMemo || defaultLegendMemo,
+            legendSpecialClassLastMemo: props.legendSpecialClassLastMemo || defaultLegendSpecialClassLastMemo,
+            runtimeLegend: props.runtimeLegend || defaultRuntimeLegend
+          })
         : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
 
     const useBottomExpandCollapse = config.table.showBottomCollapse && expanded && Array.isArray(childrenMatrix)
 
     // If every value in a column is a number, record the column index so the header and cells can be right-aligned
     const rightAlignedCols = childrenMatrix.length
       ? Object.fromEntries(
-        Object.keys(childrenMatrix[0])
-          .filter(
-            i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
-          )
-          .map(x => [x, true])
-      )
+          Object.keys(childrenMatrix[0])
+            .filter(
+              i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
+            )
+            .map(x => [x, true])
+        )
       : {}
 
     const showCollapseButton = config.table.collapsible !== false && useBottomExpandCollapse
@@ -384,8 +392,9 @@ const DataTable = (props: DataTableProps) => {
                 )
               }
               tableOptions={{
-                className: `table table-striped table-width-unset ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'
-                  }${isVertical ? '' : ' horizontal'}`,
+                className: `table table-striped table-width-unset ${
+                  expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'
+                }${isVertical ? '' : ' horizontal'}`,
                 'aria-live': 'assertive',
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded,

packages/core/components/DataTable/helpers/mapCellMatrix.tsx

@@ -4,12 +4,18 @@ import { DataTableProps } from '../DataTable'
 import { ReactNode } from 'react'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 import _ from 'lodash'
-import { applyLegendToRow } from '@cdc/map/src/helpers/applyLegendToRow'
-import { hashObj } from '@cdc/map/src/helpers'
-import { getPatternForRow } from '@cdc/map/src/helpers/getPatternForRow'
+import { hashObj } from '../../../helpers/hashObj'
 
 type MapRowsProps = DataTableProps & {
   rows: string[]
+  applyLegendToRow: (
+    rowObj: any,
+    config: any,
+    runtimeLegend: any,
+    legendMemo: any,
+    legendSpecialClassLastMemo: any
+  ) => string[]
+  getPatternForRow: (rowObj: any, config: any) => any
 }
 
 const getGeoLabel = (config, row, formatLegendLocation, displayGeoName, runtimeData = null) => {
@@ -92,7 +98,9 @@ const mapCellArray = ({
   setFilteredCountryCode,
   legendMemo,
   legendSpecialClassLastMemo,
-  runtimeLegend
+  runtimeLegend,
+  applyLegendToRow,
+  getPatternForRow
 }: MapRowsProps): ReactNode[][] => {
   const { allowMapZoom, geoType, type } = config.general
   return rows.map(row =>
@@ -116,11 +124,11 @@ const mapCellArray = ({
             type === 'bubble' && allowMapZoom && geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
 
           const validColor = legendColor && legendColor.length > 0 && !noColor
-          
+
           // Check for pattern information
           const patternInfo = getPatternForRow(rowObj, config)
           const mapId = config.runtime?.uniqueId || 'map'
-          
+
           return (
             <div className='col-12'>
               {validColor ? (

packages/core/components/Filters/Filters.tsx

@@ -14,7 +14,7 @@ import { getNestedOptions } from './helpers/getNestedOptions'
 import { getWrappingStatuses } from './helpers/filterWrapping'
 import { handleSorting } from './helpers/handleSorting'
 import { getChangedFilters } from './helpers/getChangedFilters'
-import { getUniqueValues } from '@cdc/map/src/helpers'
+import { getUniqueValues } from '../../helpers/getUniqueValues'
 import { getQueryParams, updateQueryString } from '../../helpers/queryStringUtils'
 import { applyQueuedActive } from './helpers/applyQueuedActive'
 import Tabs from './components/Tabs'
@@ -95,7 +95,9 @@ const Filters: React.FC<FilterProps> = ({
       eventAction: 'change',
       eventLabel: interactionLabel,
       vizTitle: getVizTitle(visualizationConfig),
-      specifics: `key: ${String(newFilters?.[index]?.columnName).toLowerCase()}, value: ${String(newFilters?.[index]?.active).toLowerCase()}`
+      specifics: `key: ${String(newFilters?.[index]?.columnName).toLowerCase()}, value: ${String(
+        newFilters?.[index]?.active
+      ).toLowerCase()}`
     })
   }
 

packages/core/components/Legend/Legend.Gradient.tsx

@@ -4,7 +4,7 @@ import { type MapConfig } from '@cdc/map/src/types/MapConfig'
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { getTextWidth } from '../../helpers/getTextWidth'
 import { DimensionsType } from '../../types/Dimensions'
-import useLegendSeparators from '@cdc/map/src/hooks/useLegendSeparators'
+import useLegendSeparators from '../../hooks/useLegendSeparators'
 
 const MARGIN = 1
 const BORDER_SIZE = 1

…kages/map/src/helpers/getUniqueValues.ts packages/core/helpers/getUniqueValues.tspackages/map/src/helpers/getUniqueValues.ts renamed to packages/core/helpers/getUniqueValues.ts packages/map/src/helpers/getUniqueValues.ts renamed to packages/core/helpers/getUniqueValues.ts

@@ -27,15 +27,32 @@ export function testStandaloneBuild(pkgDir) {
   const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), `cdc-open-viz-${pkgName}-`))
   copyDirSync(pkgDir, tmpDir)
 
+  let coreTarballPath = null
+
   try {
     execSync('npm install --include=dev', { cwd: tmpDir })
-    execSync('npm link @cdc/core', { cwd: tmpDir })
+
+    // Pack core into tmp directory with unique name then install from package tarball
+    const coreDir = path.join(pkgDir, '..', 'core')
+    const uniqueId = `${Date.now()}-${Math.random().toString(36).substring(7)}`
+    const tarballDir = os.tmpdir()
+    const packOutput = execSync(`npm pack --pack-destination="${tarballDir}"`, { cwd: coreDir, encoding: 'utf-8' })
+    const tarballName = packOutput.trim().split('\n').pop() // Get last line (tarball filename)
+    const originalTarballPath = path.join(tarballDir, tarballName)
+    coreTarballPath = path.join(tarballDir, `cdc-core-${uniqueId}.tgz`)
+    fs.renameSync(originalTarballPath, coreTarballPath)
+    execSync(`npm install "${coreTarballPath}"`, { cwd: tmpDir, stdio: 'inherit' })
+
     execSync('npm run build', { cwd: tmpDir })
     return true
   } catch (err) {
     console.error(`❌ Isolated build for ${pkgName} package failed`)
+    console.error(err.message)
     return false
   } finally {
+    if (coreTarballPath && fs.existsSync(coreTarballPath)) {
+      fs.unlinkSync(coreTarballPath)
+    }
     fs.rmSync(tmpDir, { recursive: true, force: true })
   }
 }

packages/map/src/helpers/hashObj.ts packages/core/helpers/hashObj.tspackages/map/src/helpers/hashObj.ts renamed to packages/core/helpers/hashObj.ts

@@ -1,4 +1,3 @@
-import useResizeObserver from '@cdc/map/src/hooks/useResizeObserver'
 import { isBelowBreakpoint } from './viewports'
 
 export default function useDataVizClasses(config, viewport = null) {