fix: export missing types from core/interfaces (#37)

* fix: export missing types from core/interfaces

* address comments

* chore: Export core types ext (#52)

* address comments

* refactor and export core types

---------

Co-authored-by: Joao Silveira <[email protected]>

---------

Co-authored-by: Andrei Zhaleznichenka <[email protected]>

Author: jsilll

pages/03-core/simple-zooming.page.tsx

@@ -11,7 +11,7 @@ import Checkbox from "@cloudscape-design/components/checkbox";
 import SpaceBetween from "@cloudscape-design/components/space-between";
 import { colorChartsBlue1400, colorChartsLineTick } from "@cloudscape-design/design-tokens";
 
-import { CoreChartAPI, CoreChartProps } from "../../lib/components/core/interfaces";
+import { CoreChartProps } from "../../lib/components/core/interfaces";
 import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
 import { dateFormatter } from "../common/formatters";
 import { PageSettings, PageSettingsForm, useChartSettings } from "../common/page-settings";
@@ -135,9 +135,9 @@ function Charts() {
     chartProps,
   } = useChartSettings<ThisPageSettings>({ more: true });
   const commonProps = omit(chartProps.cartesian, ["ref"]);
-  const scatterChartRef = useRef<CoreChartAPI>(null) as React.MutableRefObject<CoreChartAPI>;
+  const scatterChartRef = useRef<CoreChartProps.ChartAPI>(null) as React.MutableRefObject<CoreChartProps.ChartAPI>;
   const getScatterChart = () => scatterChartRef.current!;
-  const navigatorChartRef = useRef<CoreChartAPI>(null) as React.MutableRefObject<CoreChartAPI>;
+  const navigatorChartRef = useRef<CoreChartProps.ChartAPI>(null) as React.MutableRefObject<CoreChartProps.ChartAPI>;
   const getNavigatorChart = () => navigatorChartRef.current!;
 
   const [zoomRange, setZoomRange] = useState<null | [number, number]>(null);
@@ -314,7 +314,7 @@ function Charts() {
   );
 }
 
-function highlightChartGroup(targetPoint: Highcharts.Point, api: CoreChartAPI) {
+function highlightChartGroup(targetPoint: Highcharts.Point, api: CoreChartProps.ChartAPI) {
   const group: Highcharts.Point[] = [];
   for (const s of api.chart.series) {
     for (const p of s.data) {

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -90,8 +90,8 @@ minimum width, the horizontal scrollbar is automatically added.",
     },
     {
       "description": "Defines options for filtering in the chart, including:
-* \`seriesFilter\` (otpional, boolean) - Displays default series filter at the top of the chart.
-* \`additionalFilters\` (otpional, slot) - A slot for custom chart filters at the top of the chart.",
+* \`seriesFilter\` (optional, boolean) - Displays default series filter at the top of the chart.
+* \`additionalFilters\` (optional, slot) - A slot for custom chart filters at the top of the chart.",
       "inlineType": {
         "name": "BaseFilterOptions",
         "properties": [
@@ -351,7 +351,7 @@ This property corresponds to "normal" stacking type in Highcharts ([plotOptions.
           {
             "name": "point",
             "optional": true,
-            "type": "((props: CartesianChartProps.TooltipPointRenderProps) => TooltipPointFormatted)",
+            "type": "((props: CartesianChartProps.TooltipPointRenderProps) => BaseTooltipPointFormatted)",
           },
           {
             "name": "size",
@@ -370,11 +370,11 @@ This property corresponds to "normal" stacking type in Highcharts ([plotOptions.
       "description": "Controls the placement of the vertical axis title.
 When set to "side", displays the title along the axis line.",
       "inlineType": {
-        "name": ""side" | "top"",
+        "name": ""top" | "side"",
         "type": "union",
         "values": [
-          "side",
           "top",
+          "side",
         ],
       },
       "name": "verticalAxisTitlePlacement",
@@ -615,8 +615,8 @@ minimum width, the horizontal scrollbar is automatically added.",
     },
     {
       "description": "Defines options for filtering in the chart, including:
-* \`seriesFilter\` (otpional, boolean) - Displays default series filter at the top of the chart.
-* \`additionalFilters\` (otpional, slot) - A slot for custom chart filters at the top of the chart.",
+* \`seriesFilter\` (optional, boolean) - Displays default series filter at the top of the chart.
+* \`additionalFilters\` (optional, slot) - A slot for custom chart filters at the top of the chart.",
       "inlineType": {
         "name": "BaseFilterOptions",
         "properties": [

src/cartesian-chart/chart-cartesian-internal.tsx

@@ -6,14 +6,7 @@ import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { useControllableState } from "@cloudscape-design/component-toolkit";
 
 import { InternalCoreChart } from "../core/chart-core";
-import {
-  CoreChartAPI,
-  CoreChartProps,
-  ErrorBarSeriesOptions,
-  TooltipContentItem,
-  TooltipPointProps,
-  TooltipSlotProps,
-} from "../core/interfaces";
+import { CoreChartProps, ErrorBarSeriesOptions } from "../core/interfaces";
 import { getOptionsId, isXThreshold } from "../core/utils";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import { fireNonCancelableEvent } from "../internal/events";
@@ -30,7 +23,7 @@ interface InternalCartesianChartProps extends InternalBaseComponentProps, Cartes
 
 export const InternalCartesianChart = forwardRef(
   ({ tooltip, ...props }: InternalCartesianChartProps, ref: React.Ref<CartesianChartProps.Ref>) => {
-    const apiRef = useRef<null | CoreChartAPI>(null);
+    const apiRef = useRef<null | CoreChartProps.ChartAPI>(null);
 
     // When visibleSeries and onVisibleSeriesChange are provided - the series visibility can be controlled from the outside.
     // Otherwise - the component handles series visibility using its internal state.
@@ -59,7 +52,7 @@ export const InternalCartesianChart = forwardRef(
       // assuming Highcharts makes no modifications for those. These options are not referentially equal
       // to the ones we get from the consumer due to the internal validation/transformation we run on them.
       // See: https://api.highcharts.com/class-reference/Highcharts.Chart#userOptions.
-      const transformItem = (item: TooltipContentItem): CartesianChartProps.TooltipPointItem => ({
+      const transformItem = (item: CoreChartProps.TooltipContentItem): CartesianChartProps.TooltipPointItem => ({
         x: item.point.x,
         y: isXThreshold(item.point.series) ? null : (item.point.y ?? null),
         series: item.point.series.userOptions as NonErrorBarSeriesOptions,
@@ -69,10 +62,14 @@ export const InternalCartesianChart = forwardRef(
           series: point.series.userOptions as ErrorBarSeriesOptions,
         })),
       });
-      const transformSeriesProps = (props: TooltipPointProps): CartesianChartProps.TooltipPointRenderProps => ({
+      const transformSeriesProps = (
+        props: CoreChartProps.TooltipPointProps,
+      ): CartesianChartProps.TooltipPointRenderProps => ({
         item: transformItem(props.item),
       });
-      const transformSlotProps = (props: TooltipSlotProps): CartesianChartProps.TooltipSlotRenderProps => ({
+      const transformSlotProps = (
+        props: CoreChartProps.TooltipSlotProps,
+      ): CartesianChartProps.TooltipSlotRenderProps => ({
         x: props.x,
         items: props.items.map(transformItem),
       });

src/cartesian-chart/interfaces.ts

@@ -183,7 +183,7 @@ export namespace CartesianChartProps {
     errorRanges: { low: number; high: number; series: CartesianChartProps.ErrorBarSeriesOptions }[];
     series: NonErrorBarSeriesOptions;
   }
-  export type TooltipPointFormatted = CoreTypes.TooltipPointFormatted;
+  export type TooltipPointFormatted = CoreTypes.BaseTooltipPointFormatted;
 
   export type LegendOptions = CoreTypes.BaseLegendOptions;
 

src/core/chart-api/chart-extra-context.tsx

@@ -5,7 +5,7 @@ import type Highcharts from "highcharts";
 
 import { getChartSeries } from "../../internal/utils/chart-series";
 import { ChartLabels } from "../i18n-utils";
-import { HighlightChangeDetail, HighlightClearDetail, Rect, VisibleItemsChangeDetail } from "../interfaces";
+import { CoreChartProps, Rect } from "../interfaces";
 import { getGroupRect, isSeriesStacked } from "../utils";
 
 // Chart API context is used for dependency injection for chart utilities.
@@ -33,9 +33,9 @@ export namespace ChartExtraContext {
   }
 
   export interface Handlers {
-    onHighlight?(detail: HighlightChangeDetail): void;
-    onClearHighlight?(detail: HighlightClearDetail): void;
-    onVisibleItemsChange?: (detail: VisibleItemsChangeDetail) => void;
+    onHighlight?(detail: CoreChartProps.HighlightChangeDetail): void;
+    onClearHighlight?(detail: CoreChartProps.HighlightClearDetail): void;
+    onVisibleItemsChange?: (detail: CoreChartProps.VisibleItemsChangeDetail) => void;
   }
 
   export interface State {

src/core/chart-api/chart-extra-legend.tsx

@@ -7,13 +7,13 @@ import { ChartSeriesMarker, ChartSeriesMarkerType } from "../../internal/compone
 import AsyncStore from "../../internal/utils/async-store";
 import { getChartSeries } from "../../internal/utils/chart-series";
 import { isEqualArrays } from "../../internal/utils/utils";
-import { CoreLegendItem } from "../interfaces";
+import { CoreChartProps } from "../interfaces";
 import { getChartLegendItems, getPointId, getSeriesId } from "../utils";
 import { ChartExtraContext } from "./chart-extra-context";
 
 // The reactive state is used to propagate changes in legend items to the core legend React component.
 export interface ReactiveLegendState {
-  items: readonly CoreLegendItem[];
+  items: readonly CoreChartProps.LegendItem[];
 }
 
 // Chart helper that implements custom legend behaviors.
@@ -88,8 +88,8 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
     this.updateLegendItems(legendItems);
   };
 
-  private updateLegendItems = (nextItems: CoreLegendItem[]) => {
-    function isLegendItemsEqual(a: CoreLegendItem, b: CoreLegendItem) {
+  private updateLegendItems = (nextItems: CoreChartProps.LegendItem[]) => {
+    function isLegendItemsEqual(a: CoreChartProps.LegendItem, b: CoreChartProps.LegendItem) {
       return (
         a.id === b.id &&
         a.name === b.name &&
@@ -116,7 +116,7 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
 
 function updateItemsVisibility(
   chart: Highcharts.Chart,
-  legendItems: readonly CoreLegendItem[],
+  legendItems: readonly CoreChartProps.LegendItem[],
   visibleItems?: readonly string[],
 ) {
   const availableItemsSet = new Set(legendItems.map((i) => i.id));

src/core/components/core-legend.tsx

@@ -6,7 +6,7 @@ import { useInternalI18n } from "@cloudscape-design/components/internal/do-not-u
 import { ChartLegend as ChartLegendComponent } from "../../internal/components/chart-legend";
 import { useSelector } from "../../internal/utils/async-store";
 import { ChartAPI } from "../chart-api";
-import { BaseI18nStrings, GetLegendTooltipContent } from "../interfaces";
+import { BaseI18nStrings, CoreChartProps } from "../interfaces";
 
 export function ChartLegend({
   api,
@@ -21,7 +21,7 @@ export function ChartLegend({
   actions?: React.ReactNode;
   position: "bottom" | "side";
   i18nStrings?: BaseI18nStrings;
-  getLegendTooltipContent?: GetLegendTooltipContent;
+  getLegendTooltipContent?: CoreChartProps.GetLegendTooltipContent;
 }) {
   const i18n = useInternalI18n("[charts]");
   const ariaLabel = i18n("i18nStrings.legendAriaLabel", i18nStrings?.legendAriaLabel);

src/core/components/core-tooltip.tsx

@@ -13,14 +13,7 @@ import { useSelector } from "../../internal/utils/async-store";
 import { getChartSeries } from "../../internal/utils/chart-series";
 import { ChartAPI } from "../chart-api";
 import { getFormatter } from "../formatters";
-import {
-  BaseI18nStrings,
-  CoreTooltipContent,
-  CoreTooltipOptions,
-  GetTooltipContent,
-  GetTooltipContentProps,
-  TooltipSlotProps,
-} from "../interfaces";
+import { BaseI18nStrings, CoreChartProps } from "../interfaces";
 import { getPointColor, getSeriesColor, getSeriesId, getSeriesMarkerType, isXThreshold } from "../utils";
 
 import styles from "../styles.css.js";
@@ -51,9 +44,9 @@ export function ChartTooltip({
   getTooltipContent: getTooltipContentOverrides,
   api,
   i18nStrings,
-}: CoreTooltipOptions & {
+}: CoreChartProps.TooltipOptions & {
   i18nStrings?: BaseI18nStrings;
-  getTooltipContent?: GetTooltipContent;
+  getTooltipContent?: CoreChartProps.GetTooltipContent;
   api: ChartAPI;
 }) {
   const [expandedSeries, setExpandedSeries] = useState<ExpandedSeriesState>({});
@@ -122,7 +115,9 @@ function getTrackKey(point: null | Highcharts.Point, group: readonly Highcharts.
 
 function getTooltipContent(
   api: ChartAPI,
-  props: GetTooltipContentProps & { renderers?: CoreTooltipContent } & ExpandedSeriesStateProps,
+  props: CoreChartProps.GetTooltipContentProps & {
+    renderers?: CoreChartProps.TooltipContentRenderer;
+  } & ExpandedSeriesStateProps,
 ): null | RenderedTooltipContent {
   if (props.point && props.point.series.type === "pie") {
     return getTooltipContentPie(api, { ...props, point: props.point });
@@ -141,7 +136,9 @@ function getTooltipContentCartesian(
     expandedSeries,
     renderers = {},
     setExpandedSeries,
-  }: GetTooltipContentProps & { renderers?: CoreTooltipContent } & ExpandedSeriesStateProps,
+  }: CoreChartProps.GetTooltipContentProps & {
+    renderers?: CoreChartProps.TooltipContentRenderer;
+  } & ExpandedSeriesStateProps,
 ): RenderedTooltipContent {
   // The cartesian tooltip might or might not have a selected point, but it always has a non-empty group.
   // By design, every point of the group has the same x value.
@@ -179,7 +176,7 @@ function getTooltipContentCartesian(
   });
   // We only support cartesian charts with a single x axis.
   const titleFormatter = getFormatter(chart.xAxis[0]);
-  const slotRenderProps: TooltipSlotProps = { x, items: matchedItems };
+  const slotRenderProps: CoreChartProps.TooltipSlotProps = { x, items: matchedItems };
   return {
     header: renderers.header?.(slotRenderProps) ?? titleFormatter(x),
     body: renderers.body?.(slotRenderProps) ?? (
@@ -205,9 +202,9 @@ function getTooltipContentCartesian(
 
 function getTooltipContentPie(
   api: ChartAPI,
-  { point, renderers = {} }: { point: Highcharts.Point } & { renderers?: CoreTooltipContent },
+  { point, renderers = {} }: { point: Highcharts.Point } & { renderers?: CoreChartProps.TooltipContentRenderer },
 ): RenderedTooltipContent {
-  const tooltipDetails: TooltipSlotProps = { x: point.x, items: [{ point, errorRanges: [] }] };
+  const tooltipDetails: CoreChartProps.TooltipSlotProps = { x: point.x, items: [{ point, errorRanges: [] }] };
   return {
     header: renderers.header?.(tooltipDetails) ?? (
       <div className={styles["tooltip-default-header"]}>

src/core/formatters.tsx

@@ -3,7 +3,7 @@
 
 import type Highcharts from "highcharts";
 
-import { InternalXAxisOptions, InternalYAxisOptions } from "./interfaces";
+import { CoreChartProps } from "./interfaces";
 
 // Takes value formatter from the axis options (InternalXAxisOptions.valueFormatter or InternalYAxisOptions.valueFormatter),
 // or provides a default formatter for numeric and datetime values.
@@ -21,7 +21,7 @@ export function getFormatter(axis?: Highcharts.Axis) {
     if (axis.options.type === "category") {
       return axis.categories?.[value] ?? value.toString();
     }
-    const axisOptions = axis.userOptions as InternalXAxisOptions | InternalYAxisOptions;
+    const axisOptions = axis.userOptions as CoreChartProps.XAxisOptions | CoreChartProps.YAxisOptions;
     if (axisOptions.valueFormatter) {
       return axisOptions.valueFormatter(value);
     }

src/core/i18n-utils.tsx

@@ -3,7 +3,7 @@
 
 import { useInternalI18n } from "@cloudscape-design/components/internal/do-not-use/i18n";
 
-import { CoreI18nStrings } from "./interfaces";
+import { CoreChartProps } from "./interfaces";
 
 export interface ChartLabels {
   chartLabel?: string;
@@ -21,7 +21,7 @@ export function useChartI18n({
 }: {
   ariaLabel?: string;
   ariaDescription?: string;
-  i18nStrings?: CoreI18nStrings;
+  i18nStrings?: CoreChartProps.I18nStrings;
 }) {
   const i18n = useInternalI18n("[charts]");
   const i18nPie = useInternalI18n("pie-chart");