refactored internal components

Author: pan-kot

package.json

@@ -36,7 +36,9 @@
     "build:themeable": "node scripts/themeable-source",
     "build:pages:vite": "vite build",
     "build:pages:tsc": "tsc -p pages/tsconfig.json",
-    "postinstall": "node ./scripts/install-peer-dependency.js components:charts-design-tokens"
+    "postinstall": "npm run postinstall:theming && npm run postinstall:components",
+    "postinstall:theming": "node ./scripts/install-peer-dependency.js theming-core:expose-size-tokens",
+    "postinstall:components": "node ./scripts/install-peer-dependency.js components:charts-design-tokens"
   },
   "exports": {
     ".": "./index.js",

scripts/install-peer-dependency.js

@@ -15,6 +15,8 @@ const getModules = (packageName) => {
   switch (packageName) {
     case "components":
       return ["components", "design-tokens"];
+    case "theming-core":
+      return ["theming-build", "theming-runtime"];
     default:
       return [packageName];
   }
@@ -26,8 +28,12 @@ const getArtifactPath = (moduleName) => {
       return "/lib/components/*";
     case "design-tokens":
       return "/lib/design-tokens/*";
-    case '"board-components':
+    case "board-components":
       return "/lib/components/*";
+    case "theming-build":
+      return "/lib/node/*";
+    case "theming-runtime":
+      return "/lib/browser/*";
     default:
       return "/lib/*";
   }

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

@@ -8,7 +8,7 @@ import { useControllableState } from "@cloudscape-design/component-toolkit";
 
 import { CloudscapeHighcharts, CloudscapeHighchartsRef } from "../core/chart-core";
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
-import { ChartSeriesMarkerStatus } from "../internal/components/chart-series-marker";
+import { ChartSeriesMarkerStatus } from "../internal/components/series-marker";
 import { fireNonCancelableEvent, NonCancelableEventHandler } from "../internal/events";
 import { useChartTooltipCartesian } from "./chart-tooltip-cartesian";
 import { getDefaultFormatter } from "./default-formatters";

src/cartesian-chart/chart-tooltip-cartesian.tsx

@@ -4,9 +4,8 @@
 import { useState } from "react";
 
 import { TooltipContentGetter } from "../core/interfaces-core";
-import ChartPopoverFooter from "../internal/components/chart-popover-footer";
-import ChartSeriesDetails, { ChartSeriesDetailItem } from "../internal/components/chart-series-details";
-import { ChartSeriesMarkerStatus, ChartSeriesMarkerType } from "../internal/components/chart-series-marker";
+import ChartSeriesDetails, { ChartSeriesDetailItem } from "../internal/components/series-details";
+import { ChartSeriesMarkerStatus, ChartSeriesMarkerType } from "../internal/components/series-marker";
 import { getDefaultFormatter } from "./default-formatters";
 import { CartesianChartProps, InternalCartesianChartOptions, InternalSeriesOptions } from "./interfaces-cartesian";
 import { getDataExtremes } from "./utils";
@@ -145,16 +144,12 @@ export function useChartTooltipCartesian(
 
       const footer = props.tooltip?.footer?.(tooltipDetails);
 
-      const body = (
-        <>
-          {content}
-          {footer && <ChartPopoverFooter>{footer}</ChartPopoverFooter>}
-        </>
-      );
+      const body = content;
 
       return {
         title: props.tooltip?.title?.(tooltipDetails) ?? titleFormatter(point.x),
         body,
+        footer,
       };
     };
   };

src/core/chart-legend-markers.tsx

@@ -8,8 +8,8 @@ import type Highcharts from "highcharts";
 
 import { colorBackgroundLayoutMain } from "@cloudscape-design/design-tokens";
 
-import { ChartSeriesMarkerG, ChartSeriesMarkerType } from "../internal/components/chart-series-marker";
 import Portal from "../internal/components/portal";
+import { ChartSeriesMarkerG, ChartSeriesMarkerType } from "../internal/components/series-marker";
 import AsyncStore, { useSelector } from "../internal/utils/async-store";
 import { LegendMarkersProps } from "./interfaces-core";
 import { getLegendItemType, getSimpleColor } from "./utils";

src/core/chart-tooltip.tsx

@@ -6,7 +6,7 @@ import type Highcharts from "highcharts";
 
 import { colorChartsLineTick } from "@cloudscape-design/design-tokens";
 
-import ChartPopover from "../internal/components/chart-popover";
+import Popover from "../internal/components/popover";
 import AsyncStore, { useSelector } from "../internal/utils/async-store";
 import { DebouncedCall } from "../internal/utils/utils";
 import { Point, TooltipContent, TooltipContentGetter } from "./interfaces-core";
@@ -79,7 +79,7 @@ export function ChartTooltip<TooltipState>({
   }
   const renderedContent = tooltip.content(tooltipState);
   return (
-    <ChartPopover
+    <Popover
       getTrack={tooltipStore.getTrack}
       trackKey={tooltip.point.x + ":" + tooltip.point.y}
       container={null}
@@ -88,9 +88,10 @@ export function ChartTooltip<TooltipState>({
       onMouseEnter={tooltipStore.onMouseEnterTooltip}
       onMouseLeave={tooltipStore.onMouseLeaveTooltip}
       title={renderedContent.title}
+      footer={renderedContent.footer}
     >
       {renderedContent.body}
-    </ChartPopover>
+    </Popover>
   );
 }
 

src/core/interfaces-core.ts

@@ -3,7 +3,7 @@
 
 import type Highcharts from "highcharts";
 
-import { ChartSeriesMarkerStatus } from "../internal/components/chart-series-marker";
+import { ChartSeriesMarkerStatus } from "../internal/components/series-marker";
 
 export interface CloudscapeHighchartsBase {
   /**
@@ -73,6 +73,7 @@ export interface TooltipProps<TooltipState> {
 export interface TooltipContent {
   title: React.ReactNode;
   body: React.ReactNode;
+  footer?: React.ReactNode;
 }
 
 export interface Point {

src/core/utils.ts

@@ -3,7 +3,7 @@
 
 import type Highcharts from "highcharts";
 
-import { ChartSeriesMarkerType } from "../internal/components/chart-series-marker";
+import { ChartSeriesMarkerType } from "../internal/components/series-marker";
 
 type IdToSeriesMapping = Map<string, { series: Highcharts.Series; data: Map<string, Highcharts.Point> }>;