create new grid type called GridProps

projects/js-packages/charts/src/components/grid-control/grid-control.tsx

@@ -1,9 +1,9 @@
 import { GridRows, GridColumns } from '@visx/grid';
 import React from 'react';
 import styles from './grid-control.module.scss';
-import type { BaseGridProps } from '../shared/types';
+import type { GridProps } from '../shared/types';
 
-const GridControl: React.FC< BaseGridProps > = ( {
+const GridControl: React.FC< GridProps > = ( {
 	width,
 	height,
 	xScale,

projects/js-packages/charts/src/components/shared/types.d.ts

@@ -66,9 +66,56 @@ export type ChartTheme = {
 };
 
 /**
- * Base properties for grid components
+ * Base properties shared across all chart components
  */
-export type BaseGridProps = {
+export type BaseChartProps< T = DataPoint | DataPointDate > = {
+	/**
+	 * Array of data points to display in the chart
+	 */
+	data?: T extends DataPoint | DataPointDate ? T[] : T;
+	/**
+	 * Additional CSS class name for the chart container
+	 */
+	className?: string;
+	/**
+	 * Width of the chart in pixels
+	 */
+	width: number;
+	/**
+	 * Height of the chart in pixels
+	 */
+	height?: number;
+	/**
+	 * Chart margins
+	 */
+	margin?: {
+		top: number;
+		right: number;
+		bottom: number;
+		left: number;
+	};
+	/**
+	 * Whether to show tooltips on hover. False by default.
+	 */
+	withTooltips?: boolean;
+	/**
+	 * Whether to show legend
+	 */
+	showLegend?: boolean;
+	/**
+	 * Legend orientation
+	 */
+	legendOrientation?: 'horizontal' | 'vertical';
+	/**
+	 * Grid visibility. x is default.
+	 */
+	gridVisibility?: 'x' | 'y' | 'xy' | 'none';
+};
+
+/**
+ * Properties for grid components
+ */
+export type GridProps = {
 	/**
 	 * Width of the grid in pixels
 	 */