Move global chart context hooks into separate files

adamwoodnz · adamwoodnz · commit 082354835e1e · 2025-08-28T09:38:40.000+12:00
diff --git a/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx b/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx
@@ -14,7 +14,7 @@ import {
 	GlobalChartsProvider,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartsContext,
+	useGlobalChartContext,
 } from '../../providers/chart-context';
 import { GlobalChartsContext } from '../../providers/chart-context/global-charts-provider';
 import { attachSubComponents } from '../../utils';
@@ -125,7 +125,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		totalPoints,
 	} );
 
-	const { resolveGroupColor } = useGlobalChartsContext();
+	const { resolveGroupColor } = useGlobalChartContext();
 
 	const getColor = useCallback(
 		( seriesData: SeriesData, index: number ) =>
diff --git a/projects/js-packages/charts/src/components/conversion-funnel-chart/conversion-funnel-chart.tsx b/projects/js-packages/charts/src/components/conversion-funnel-chart/conversion-funnel-chart.tsx
@@ -1,7 +1,7 @@
 import { __experimentalText as Text } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import clsx from 'clsx';
 import { type FC, useRef, useMemo, useEffect, useCallback } from 'react';
-import { useGlobalChartTheme } from '../../hooks';
+import { useGlobalChartTheme } from '../../providers/chart-context';
 import styles from './conversion-funnel-chart.module.scss';
 import { useFunnelSelection } from './hooks/use-funnel-selection';
 import { hexToRgba } from './utils/color-utils';
diff --git a/projects/js-packages/charts/src/components/leaderboard-chart/leaderboard-chart.tsx b/projects/js-packages/charts/src/components/leaderboard-chart/leaderboard-chart.tsx
@@ -8,7 +8,7 @@ import {
 import { Fragment } from '@wordpress/element';
 import clsx from 'clsx';
 import { type FC } from 'react';
-import { useGlobalChartTheme } from '../../hooks';
+import { useGlobalChartTheme } from '../../providers/chart-context';
 import { formatMetricValue } from '../../utils';
 import styles from './leaderboard-chart.module.scss';
 
diff --git a/projects/js-packages/charts/src/components/legend/base-legend.tsx b/projects/js-packages/charts/src/components/legend/base-legend.tsx
@@ -3,8 +3,7 @@ import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from '@visx/legen
 import { scaleOrdinal } from '@visx/scale';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useMemo, useContext } from 'react';
-import { useGlobalChartTheme } from '../../hooks';
-import { GlobalChartsContext } from '../../providers/chart-context';
+import { useGlobalChartTheme, GlobalChartsContext } from '../../providers/chart-context';
 import styles from './legend.module.scss';
 import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from './utils';
 import type { BaseLegendProps } from './types';
diff --git a/projects/js-packages/charts/src/components/legend/use-chart-legend-items.ts b/projects/js-packages/charts/src/components/legend/use-chart-legend-items.ts
@@ -1,6 +1,6 @@
 import { LineStyles } from '@visx/xychart';
 import { CSSProperties, useMemo } from 'react';
-import { useGlobalChartTheme } from '../../hooks';
+import { useGlobalChartTheme } from '../../providers/chart-context';
 import { getItemShapeStyles, getSeriesStroke } from '../../utils';
 import type { LegendItemWithGlyph, LegendItemWithoutGlyph } from './types';
 import type { ChartTheme, SeriesData, DataPointDate, DataPointPercentage } from '../../types';
diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart-annotation.tsx b/projects/js-packages/charts/src/components/line-chart/line-chart-annotation.tsx
@@ -9,7 +9,7 @@ import {
 import { DataContext } from '@visx/xychart';
 import merge from 'deepmerge';
 import { useContext, useRef, useEffect, useState, useMemo } from 'react';
-import { useGlobalChartTheme } from '../../hooks';
+import { useGlobalChartTheme } from '../../providers/chart-context';
 import { isSafari } from '../../utils';
 import LineChartAnnotationLabelWithPopover, {
 	POPOVER_BUTTON_SIZE,
diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx
@@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useMemo, useContext, forwardRef, useImperativeHandle, useState, useRef } from 'react';
 import {
-	useGlobalChartTheme,
 	useXYChartTheme,
 	useChartDataTransform,
 	useChartMargin,
@@ -17,7 +16,8 @@ import {
 	GlobalChartsContext,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartsContext,
+	useGlobalChartContext,
+	useGlobalChartTheme,
 } from '../../providers/chart-context';
 import { attachSubComponents, getSeriesLineStyles } from '../../utils';
 import { DefaultGlyph } from '../default-glyph';
@@ -278,7 +278,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		);
 
 		const dataSorted = useChartDataTransform( data );
-		const { resolveGroupColor } = useGlobalChartsContext();
+		const { resolveGroupColor } = useGlobalChartContext();
 
 		// Use the keyboard navigation hook
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
diff --git a/projects/js-packages/charts/src/components/line-chart/stories/glyph.stories.tsx b/projects/js-packages/charts/src/components/line-chart/stories/glyph.stories.tsx
@@ -1,5 +1,5 @@
 import { GlyphStar } from '@visx/glyph';
-import { useGlobalChartTheme } from '../../../hooks';
+import { useGlobalChartTheme } from '../../../providers/chart-context';
 import { GlobalChartsProvider } from '../../../providers/chart-context/global-charts-provider';
 import { CHART_THEME_MAP, themeArgTypes } from '../../../stories/theme-config';
 import LineChart from '../line-chart';
diff --git a/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx b/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx
@@ -2,12 +2,13 @@ import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import clsx from 'clsx';
 import { useContext, useMemo } from 'react';
-import { useChartMouseHandler, useGlobalChartTheme, useElementHeight } from '../../hooks';
+import { useChartMouseHandler, useElementHeight } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartsContext,
+	useGlobalChartContext,
+	useGlobalChartTheme,
 } from '../../providers/chart-context';
 import { GlobalChartsContext } from '../../providers/chart-context/global-charts-provider';
 import { attachSubComponents } from '../../utils';
@@ -155,7 +156,7 @@ const PieChartInternal = ( {
 		metadata: chartMetadata,
 	} );
 
-	const { resolveGroupColor } = useGlobalChartsContext();
+	const { resolveGroupColor } = useGlobalChartContext();
 
 	if ( ! isValid ) {
 		return (
diff --git a/projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx b/projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx
@@ -10,7 +10,7 @@ import {
 	GlobalChartsProvider,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartsContext,
+	useGlobalChartContext,
 	GlobalChartsContext,
 } from '../../providers/chart-context';
 import { attachSubComponents } from '../../utils';
@@ -148,7 +148,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	// Validate data first to get validation result
 	const { isValid, message } = validateData( data );
 
-	const { resolveGroupColor } = useGlobalChartsContext();
+	const { resolveGroupColor } = useGlobalChartContext();
 
 	// Define accessors with useMemo to avoid changing dependencies
 	const accessors = useMemo(
diff --git a/projects/js-packages/charts/src/hooks/index.ts b/projects/js-packages/charts/src/hooks/index.ts
@@ -1,5 +1,4 @@
 export { useDeepMemo } from './use-deep-memo';
-export { useGlobalChartTheme } from './use-global-chart-theme';
 export { useChartMouseHandler } from './use-chart-mouse-handler';
 export { useXYChartTheme } from './use-xychart-theme';
 export { useChartDataTransform } from './use-chart-data-transform';
diff --git a/projects/js-packages/charts/src/hooks/use-xychart-theme.ts b/projects/js-packages/charts/src/hooks/use-xychart-theme.ts
@@ -1,7 +1,7 @@
 import { buildChartTheme } from '@visx/xychart';
 import { useMemo } from 'react';
+import { useGlobalChartTheme } from '../providers/chart-context';
 import { SeriesData } from '../types';
-import { useGlobalChartTheme } from './use-global-chart-theme';
 
 export const useXYChartTheme = ( data: SeriesData[] ) => {
 	const theme = useGlobalChartTheme();
diff --git a/projects/js-packages/charts/src/index.ts b/projects/js-packages/charts/src/index.ts
@@ -18,12 +18,13 @@ export { LineShape, CircleShape, RectShape } from './visx/legend';
 // Themes
 export { ThemeProvider } from './providers/theme';
 export { defaultTheme, jetpackTheme, wooTheme } from './providers/theme/themes';
+export { useGlobalChartTheme } from './providers/chart-context';
 
 // Utilities
 export { mergeThemes } from './utils';
 
 // Hooks
-export { useDeepMemo, useGlobalChartTheme, useChartMouseHandler, useXYChartTheme } from './hooks';
+export { useDeepMemo, useChartMouseHandler, useXYChartTheme } from './hooks';
 
 // LeaderboardChart utilities
 export { formatMetricValue } from './components/leaderboard-chart';
diff --git a/projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx b/projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx
@@ -1,12 +1,4 @@
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useMemo,
-	useState,
-	useEffect,
-	useRef,
-} from 'react';
+import { createContext, useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { defaultTheme } from '../theme/themes';
 import type { ChartContextValue, ChartRegistration } from './types';
 import type { ChartTheme } from '../../types';
@@ -97,11 +89,3 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 
 	return <GlobalChartsContext.Provider value={ value }>{ children }</GlobalChartsContext.Provider>;
 };
-
-export const useGlobalChartsContext = (): ChartContextValue => {
-	const context = useContext( GlobalChartsContext );
-	if ( ! context ) {
-		throw new Error( 'useGlobalChartsContext must be used within a GlobalChartsProvider' );
-	}
-	return context;
-};
diff --git a/projects/js-packages/charts/src/providers/chart-context/hooks/use-chart-id.ts b/projects/js-packages/charts/src/providers/chart-context/hooks/use-chart-id.ts
@@ -0,0 +1,6 @@
+import { useId } from 'react';
+
+export const useChartId = ( providedId?: string ): string => {
+	const generatedId = useId();
+	return providedId || generatedId;
+};
diff --git a/projects/js-packages/charts/src/providers/chart-context/hooks/use-chart-registration.ts b/projects/js-packages/charts/src/providers/chart-context/hooks/use-chart-registration.ts
@@ -1,12 +1,7 @@
-import { useEffect, useId, useMemo } from 'react';
-import { useDeepMemo } from '../../hooks';
-import { useGlobalChartsContext } from './global-charts-provider';
-import type { BaseLegendItem } from '../../components/legend/types';
-
-export const useChartId = ( providedId?: string ): string => {
-	const generatedId = useId();
-	return providedId || generatedId;
-};
+import { useEffect, useMemo } from 'react';
+import { useDeepMemo } from '../../../hooks';
+import { useGlobalChartContext } from './use-global-chart-context';
+import type { BaseLegendItem } from '../../../components/legend/types';
 
 export const useChartRegistration = ( {
 	chartId,
@@ -21,7 +16,7 @@ export const useChartRegistration = ( {
 	isDataValid: boolean;
 	metadata?: Record< string, unknown >;
 } ): void => {
-	const { registerChart, unregisterChart } = useGlobalChartsContext();
+	const { registerChart, unregisterChart } = useGlobalChartContext();
 
 	// Memoize legendItems with deep comparison to prevent infinite loops
 	const stableLegendItems = useDeepMemo( legendItems );
diff --git a/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-chart-context.ts b/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-chart-context.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { GlobalChartsContext } from '../global-charts-provider';
+import type { ChartContextValue } from '../types';
+
+export const useGlobalChartContext = (): ChartContextValue => {
+	const context = useContext( GlobalChartsContext );
+	if ( ! context ) {
+		throw new Error( 'useGlobalChartContext must be used within a GlobalChartsProvider' );
+	}
+	return context;
+};
diff --git a/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-chart-theme.ts b/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-chart-theme.ts
@@ -1,9 +1,9 @@
 import { useContext, useMemo } from 'react';
-import { GlobalChartsContext } from '../providers/chart-context/global-charts-provider';
-import { useChartTheme } from '../providers/theme';
-import { defaultTheme } from '../providers/theme/themes';
-import { mergeThemes } from '../utils';
-import type { ChartTheme } from '../types';
+import { mergeThemes } from '../../../utils';
+import { useChartTheme } from '../../theme';
+import { defaultTheme } from '../../theme/themes';
+import { GlobalChartsContext } from '../global-charts-provider';
+import type { ChartTheme } from '../../../types';
 
 /**
  * Hook to get the effective chart theme, merging global and local themes.
diff --git a/projects/js-packages/charts/src/providers/chart-context/index.ts b/projects/js-packages/charts/src/providers/chart-context/index.ts
@@ -1,7 +1,6 @@
-export {
-	GlobalChartsProvider,
-	GlobalChartsContext,
-	useGlobalChartsContext,
-} from './global-charts-provider';
-export { useChartId, useChartRegistration } from './utils';
+export { GlobalChartsProvider, GlobalChartsContext } from './global-charts-provider';
+export { useGlobalChartContext } from './hooks/use-global-chart-context';
+export { useChartId } from './hooks/use-chart-id';
+export { useChartRegistration } from './hooks/use-chart-registration';
+export { useGlobalChartTheme } from './hooks/use-global-chart-theme';
 export type { ChartContextValue, ChartRegistration } from './types';
diff --git a/projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx b/projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx
diff --git a/projects/js-packages/charts/src/providers/chart-context/test/use-global-chart-theme.test.tsx b/projects/js-packages/charts/src/providers/chart-context/test/use-global-chart-theme.test.tsx
