Switch to compound component pattern

Author: adamwoodnz

projects/js-packages/charts/src/components/line-chart/line-chart-annotations-overlay.tsx

@@ -1,12 +1,11 @@
 import { DataContext } from '@visx/xychart';
 import { useEffect, useState, useCallback } from 'react';
-import { useChartContext } from '../../providers/chart-context';
+import { useLineChartContext } from './line-chart-context';
 import styles from './line-chart.module.scss';
 import type { AxisScale } from '@visx/axis';
 import type { FC, ReactNode } from 'react';
 
 interface LineChartAnnotationsProps {
-	chartId: string;
 	children?: ReactNode;
 }
 
@@ -15,17 +14,8 @@ interface ScaleData {
 	yScale: AxisScale< number >;
 }
 
-const LineChartAnnotationsOverlay: FC< LineChartAnnotationsProps > = ( { chartId, children } ) => {
-	const { getChartData } = useChartContext();
-
-	let chartData = null;
-	if ( chartId ) {
-		chartData = getChartData( chartId );
-	}
-
-	const chartRef = chartData?.chartRef;
-	const chartWidth = chartData?.chartWidth || 0;
-	const chartHeight = chartData?.chartHeight || 0;
+const LineChartAnnotationsOverlay: FC< LineChartAnnotationsProps > = ( { children } ) => {
+	const { chartRef, chartWidth, chartHeight } = useLineChartContext();
 
 	const [ scales, setScales ] = useState< ScaleData | null >( null );
 	const [ scalesStable, setScalesStable ] = useState< boolean >( false );

projects/js-packages/charts/src/components/line-chart/line-chart-context.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+
+export interface LineChartRef {
+	getScales: () => { xScale: unknown; yScale: unknown } | null;
+	getChartDimensions: () => {
+		width: number;
+		height: number;
+		margin: { top?: number; right?: number; bottom?: number; left?: number };
+	};
+}
+
+// Local context for LineChart implicit state sharing
+export interface LineChartContextValue {
+	chartId: string;
+	chartRef: React.RefObject< LineChartRef >;
+	chartWidth: number;
+	chartHeight: number;
+}
+
+export const LineChartContext = createContext< LineChartContextValue | null >( null );
+
+export const useLineChartContext = (): LineChartContextValue => {
+	const context = useContext( LineChartContext );
+	if ( ! context ) {
+		throw new Error( 'useLineChartContext must be used within a LineChart component' );
+	}
+	return context;
+};