refactor(charts): use vite alias paths in stories and tests (#8508)

Lukas742 · web-flow · commit 02bd290e8911 · 2026-04-20T14:43:52.000+02:00
diff --git a/packages/charts/src/components/BarChart/BarChart.cy.tsx b/packages/charts/src/components/BarChart/BarChart.cy.tsx
@@ -1,11 +1,11 @@
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { BarChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
-} from '../../../../../cypress/support/utils';
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { BarChart } from './index.js';
+} from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/BarChart/BarChart.mdx b/packages/charts/src/components/BarChart/BarChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
@@ -1,10 +1,6 @@
-import {
-  cypressPassThroughTestsFactory,
-  testChartLegendConfig,
-  testChartZoomingTool,
-} from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { BulletChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/BulletChart/BulletChart.mdx b/packages/charts/src/components/BulletChart/BulletChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
@@ -1,11 +1,11 @@
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { ColumnChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
-} from '../../../../../cypress/support/utils';
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { ColumnChart } from './index.js';
+} from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.mdx b/packages/charts/src/components/ColumnChart/ColumnChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
@@ -1,10 +1,6 @@
-import {
-  cypressPassThroughTestsFactory,
-  testChartLegendConfig,
-  testChartZoomingTool,
-} from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { ColumnChartWithTrend } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './ColumnChartWithTrend.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
@@ -1,11 +1,11 @@
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { ComposedChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
-} from '../../../../../cypress/support/utils';
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { ComposedChart } from './index.js';
+} from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.mdx b/packages/charts/src/components/ComposedChart/ComposedChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/DonutChart/DonutChart.cy.tsx b/packages/charts/src/components/DonutChart/DonutChart.cy.tsx
@@ -1,6 +1,6 @@
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { DonutChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const dimension = {
   accessor: 'name',
diff --git a/packages/charts/src/components/DonutChart/DonutChart.mdx b/packages/charts/src/components/DonutChart/DonutChart.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './DonutChart.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/LineChart/LineChart.cy.tsx b/packages/charts/src/components/LineChart/LineChart.cy.tsx
@@ -1,10 +1,6 @@
-import {
-  cypressPassThroughTestsFactory,
-  testChartLegendConfig,
-  testChartZoomingTool,
-} from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { LineChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/LineChart/LineChart.mdx b/packages/charts/src/components/LineChart/LineChart.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './LineChart.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/PieChart/PieChart.cy.tsx b/packages/charts/src/components/PieChart/PieChart.cy.tsx
@@ -1,7 +1,7 @@
 import { Text as RechartsText } from 'recharts';
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { PieChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const dimension = {
   accessor: 'name',
diff --git a/packages/charts/src/components/PieChart/PieChart.mdx b/packages/charts/src/components/PieChart/PieChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './PieChart.stories';
diff --git a/packages/charts/src/components/RadarChart/RadarChart.cy.tsx b/packages/charts/src/components/RadarChart/RadarChart.cy.tsx
@@ -1,6 +1,6 @@
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { RadarChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/RadarChart/RadarChart.mdx b/packages/charts/src/components/RadarChart/RadarChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './RadarChart.stories';
diff --git a/packages/charts/src/components/RadialChart/RadialChart.cy.tsx b/packages/charts/src/components/RadialChart/RadialChart.cy.tsx
@@ -1,5 +1,5 @@
-import { cypressPassThroughTestsFactory } from '../../../../../cypress/support/utils';
 import { RadialChart } from './index.js';
+import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
 describe('RadialChart', () => {
   it('Basic', () => {
diff --git a/packages/charts/src/components/RadialChart/RadialChart.mdx b/packages/charts/src/components/RadialChart/RadialChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './RadialChart.stories';
 
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx
@@ -1,6 +1,6 @@
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, scatterComplexDataSet } from '../../resources/DemoProps.js';
 import { ScatterChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const measures = [
   {
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.mdx b/packages/charts/src/components/ScatterChart/ScatterChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './ScatterChart.stories';
diff --git a/packages/charts/src/components/TimelineChart/TimeLineChart.mdx b/packages/charts/src/components/TimelineChart/TimeLineChart.mdx
@@ -1,6 +1,5 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
-import { Canvas, Meta, Markdown, ArgTypes } from '@storybook/addon-docs/blocks';
-import SubcomponentsSection from '../../../../../.storybook/docs/SubcomponentsSection.md?raw';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './TimeLineChart.stories';
 import { TimelineChartAnnotation } from './TimelineChartAnnotation';
 
@@ -133,8 +132,6 @@ A lot more things can be customized in the `TimelineChart`. These include:
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
-<Markdown>{SubcomponentsSection}</Markdown>
-
 ## TimelineChartAnnotation
 
 The `TimelineChartAnnotation` is designed to be used for creating custom annotations, markers

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';`
	`1`	`+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';`
`2`	`2`	`import { Canvas, Meta } from '@storybook/addon-docs/blocks';`
`3`	`3`	`import TooltipStory from '../../resources/TooltipConfig.mdx';`
`4`	`4`	`import LegendStory from '../../resources/LegendConfig.mdx';`