Grafana UI: Use Eslint no-restricted-imports in tests and stories (#99191)

* style(eslint): remove ignore from grafana/ui-overrides * style(grafana-ui): update imports for tests * style(grafana-ui): update imports for stories * chore(betterer): update results file * Fix useTheme import * Change deprecated Horizontal/Vertical group usages --------- Co-authored-by: Tom Ratcliffe <tom.ratcliffe@grafana.com>
2025-01-20 09:44:19 +01:00
parent 1a2a284972
commit dea2e41e9f
57 changed files with 128 additions and 126 deletions
@@ -643,9 +643,6 @@ exports[`better eslint`] = {
    "packages/grafana-ui/src/components/FileUpload/FileUpload.tsx:5381": [
      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"]
    ],
-    "packages/grafana-ui/src/components/Forms/FieldArray.story.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
    "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -663,9 +660,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
    ],
-    "packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
    "packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx:5381": [
      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"]
    ],
@@ -673,10 +667,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
-    "packages/grafana-ui/src/components/Layout/Layout.story.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
-    ],
    "packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx:5381": [
      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"]
    ],
@@ -190,7 +190,6 @@ module.exports = [
  {
    name: 'grafana/ui-overrides',
    files: ['packages/grafana-ui/**/*.{ts,tsx}'],
-    ignores: ['packages/grafana-ui/**/*.{test,story}.{ts,tsx}'],
    rules: {
      'no-restricted-imports': [
        'error',
@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import { StoryFn, Meta } from '@storybook/react';

-import { Alert, AlertVariant, Stack } from '@grafana/ui';
-
 import { StoryExample } from '../../utils/storybook/StoryExample';
+import { Stack } from '../Layout/Stack/Stack';

+import { Alert, AlertVariant } from './Alert';
 import mdx from './Alert.mdx';

 const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import { StoryFn, Meta } from '@storybook/react';

-import { Alert, AlertVariant, Stack } from '@grafana/ui';
-
 import { StoryExample } from '../../utils/storybook/StoryExample';
+import { Stack } from '../Layout/Stack/Stack';

+import { Alert, AlertVariant } from './Alert';
 import mdx from './Alert.mdx';

 const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
@@ -1,9 +1,8 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { Badge } from '@grafana/ui';
-
 import { iconOptions } from '../../utils/storybook/icons';

+import { Badge } from './Badge';
 import mdx from './Badge.mdx';

 const meta: Meta<typeof Badge> = {
@@ -1,11 +1,11 @@
 import { StoryFn, Meta } from '@storybook/react';

 import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
-import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
+import { BarGaugeDisplayMode } from '@grafana/schema';

 import { useTheme2 } from '../../themes';

-import { Props } from './BarGauge';
+import { BarGauge, Props } from './BarGauge';
 import mdx from './BarGauge.mdx';

 const meta: Meta = {
@@ -1,7 +1,6 @@
 import { CSSProperties } from 'react';

 import { createTheme, FieldType } from '@grafana/data';
-import { config } from '@grafana/runtime';
 import { PercentChangeColorMode } from '@grafana/schema';

 import { Props, BigValueColorMode, BigValueGraphMode, BigValueTextMode } from './BigValue';
@@ -104,7 +103,8 @@ describe('BigValueLayout', () => {
  });

  describe('percentChangeColor', () => {
-    const themeVisualizationColors = config.theme2.visualization;
+    const theme = createTheme();
+    const themeVisualizationColors = theme.visualization;
    const red = themeVisualizationColors.getColorByName('red');
    const green = themeVisualizationColors.getColorByName('green');
    it('standard negative should be red', () => {
@@ -1,6 +1,6 @@
 import { StoryFn, Meta } from '@storybook/react';

-import { ButtonCascader } from '@grafana/ui';
+import { ButtonCascader } from './ButtonCascader';

 const meta: Meta<typeof ButtonCascader> = {
  title: 'Forms/Cascader/ButtonCascader',
@@ -1,9 +1,7 @@
 import { StoryFn, Meta } from '@storybook/react';
 import { useState } from 'react';

-import { Cascader } from '@grafana/ui';
-
-import { CascaderOption } from './Cascader';
+import { Cascader, CascaderOption } from './Cascader';
 import mdx from './Cascader.mdx';

 const onSelect = (val: string) => console.log(val);
@@ -2,9 +2,12 @@ import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';

-import { SeriesColorPicker, ColorPicker, clearButtonStyles, useStyles2, ColorPickerInput } from '@grafana/ui';
+import { useStyles2 } from '../../themes/ThemeContext';
+import { clearButtonStyles } from '../Button';

+import { ColorPicker, SeriesColorPicker } from './ColorPicker';
 import mdx from './ColorPicker.mdx';
+import { ColorPickerInput } from './ColorPickerInput';

 const meta: Meta<typeof ColorPicker> = {
  title: 'Pickers and Editors/ColorPicker',
@@ -1,11 +1,9 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';

-import { ConfirmButton } from '@grafana/ui';
-
 import { Button } from '../Button';

-import { Props } from './ConfirmButton';
+import { ConfirmButton, Props } from './ConfirmButton';
 import mdx from './ConfirmButton.mdx';
 import { DeleteButton } from './DeleteButton';

@@ -1,8 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';

-import { ConfirmModal } from '@grafana/ui';
-
+import { ConfirmModal } from './ConfirmModal';
 import mdx from './ConfirmModal.mdx';

 const defaultExcludes = ['onConfirm', 'onDismiss', 'onAlternative'];
@@ -1,8 +1,6 @@
 import { render, screen } from '@testing-library/react';

-import { AlertingSettings } from '@grafana/ui';
-
-import { Props, AlertingConfig } from './AlertingSettings';
+import { AlertingSettings, Props, AlertingConfig } from './AlertingSettings';

 const setup = () => {
  const onOptionsChange = jest.fn();
@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';

-import { DataSourceHttpSettings } from '@grafana/ui';
-
+import { DataSourceHttpSettings } from './DataSourceHttpSettings';
 import { HttpSettingsProps } from './types';

 const setup = (propOverrides?: object) => {
@@ -3,7 +3,8 @@ import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';

 import { dateTime } from '@grafana/data';
-import { TimeOfDayPicker } from '@grafana/ui';
+
+import { TimeOfDayPicker } from './TimeOfDayPicker';

 const meta: Meta<typeof TimeOfDayPicker> = {
  title: 'Pickers and Editors/TimePickers/TimeOfDayPicker',
@@ -3,8 +3,8 @@ import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';

 import { dateTime, DefaultTimeZone, isDateTime, TimeRange } from '@grafana/data';
-import { TimeRangeInput } from '@grafana/ui';

+import { TimeRangeInput } from './TimeRangeInput';
 import mdx from './TimeRangeInput.mdx';

 const now = dateTime(Date.now());
@@ -3,7 +3,8 @@ import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';

 import { dateTime, DefaultTimeZone } from '@grafana/data';
-import { TimeRangePicker } from '@grafana/ui';
+
+import { TimeRangePicker } from './TimeRangePicker';

 const to = dateTime();
 const from = to.subtract(6, 'h');
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';

-import { TimeZonePicker } from '@grafana/ui';
+import { TimeZonePicker } from './TimeZonePicker';

 const meta: Meta<typeof TimeZonePicker> = {
  title: 'Pickers and Editors/TimePickers/TimeZonePicker',
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';

-import { WeekStartPicker } from '@grafana/ui';
+import { WeekStartPicker } from './WeekStartPicker';

 const meta: Meta<typeof WeekStartPicker> = {
  title: 'Pickers and Editors/TimePickers/WeekStartPicker',
@@ -1,8 +1,11 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';

-import { Button, Drawer, Tab, TabsBar } from '@grafana/ui';
+import { Button } from '../Button/Button';
+import { Tab } from '../Tabs/Tab';
+import { TabsBar } from '../Tabs/TabsBar';

+import { Drawer } from './Drawer';
 import mdx from './Drawer.mdx';

 const meta: Meta<typeof Drawer> = {
@@ -1,8 +1,8 @@
 import { Meta, StoryFn } from '@storybook/react';

 import { FeatureState } from '@grafana/data';
-import { FeatureBadge } from '@grafana/ui';

+import { FeatureBadge } from './FeatureBadge';
 import mdx from './FeatureBadge.mdx';

 const meta: Meta<typeof FeatureBadge> = {
@@ -1,7 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { FileDropzone } from '@grafana/ui';
-
+import { FileDropzone } from './FileDropzone';
 import mdx from './FileDropzone.mdx';

 const meta: Meta<typeof FileDropzone> = {
@@ -1,7 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { FileUpload } from '@grafana/ui';
-
+import { FileUpload } from './FileUpload';
 import mdx from './FileUpload.mdx';

 const meta: Meta<typeof FileUpload> = {
@@ -1,12 +1,14 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { FieldValues } from 'react-hook-form';

-import { Form, Input, Button, HorizontalGroup } from '@grafana/ui';
-
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
+import { Button } from '../Button/Button';
+import { Input } from '../Input/Input';
+import { Stack } from '../Layout/Stack/Stack';

 import { FieldArray } from './FieldArray';
 import mdx from './FieldArray.mdx';
+import { Form } from './Form';

 const meta: Meta = {
  title: 'Forms/FieldArray',
@@ -41,7 +43,7 @@ export const Simple: StoryFn = (args) => {
              <>
                <div style={{ marginBottom: '1rem' }}>
                  {fields.map((field, index) => (
-                    <HorizontalGroup key={field.id}>
+                    <Stack key={field.id}>
                      <Input
                        key={field.id}
                        {...register(`people.${index}.firstName` as const)}
@@ -52,7 +54,7 @@ export const Simple: StoryFn = (args) => {
                        {...register(`people.${index}.lastName` as const)}
                        defaultValue={field.lastName}
                      />
-                    </HorizontalGroup>
+                    </Stack>
                  ))}
                </div>
                <Button
@@ -1,11 +1,12 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { Input, Form, FieldSet, Field } from '@grafana/ui';
-
 import { Button } from '../Button';
+import { Input } from '../Input/Input';

-import { Props } from './FieldSet';
+import { Field } from './Field';
+import { FieldSet, Props } from './FieldSet';
 import mdx from './FieldSet.mdx';
+import { Form } from './Form';

 const meta: Meta<typeof FieldSet> = {
  title: 'Forms/FieldSet',
@@ -1,23 +1,20 @@
 import { StoryFn } from '@storybook/react';
 import { ValidateResult } from 'react-hook-form';

-import {
-  Field,
-  Legend,
-  Input,
-  Button,
-  Form,
-  Switch,
-  Checkbox,
-  Select,
-  InputControl,
-  TextArea,
-  RadioButtonGroup,
-} from '@grafana/ui';
-
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
+import { Button } from '../Button';
+import { Input } from '../Input/Input';
+import { InputControl } from '../InputControl';
+import { Select } from '../Select/Select';
+import { Switch } from '../Switch/Switch';
+import { TextArea } from '../TextArea/TextArea';

+import { Checkbox } from './Checkbox';
+import { Field } from './Field';
+import { Form } from './Form';
 import mdx from './Form.mdx';
+import { Legend } from './Legend';
+import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';

 export default {
  title: 'Forms/Form',
@@ -1,7 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { Legend } from '@grafana/ui';
-
+import { Legend } from './Legend';
 import mdx from './Legend.mdx';

 const meta: Meta<typeof Legend> = {
@@ -3,11 +3,13 @@ import { Meta } from '@storybook/react';
 import { ChangeEvent, useState } from 'react';

 import { toIconName, IconName } from '@grafana/data';
-import { Input, Field, Icon } from '@grafana/ui';

 import { useTheme2 } from '../../themes';
 import { getAvailableIcons } from '../../types';
+import { Field } from '../Forms/Field';
+import { Input } from '../Input/Input';

+import { Icon } from './Icon';
 import mdx from './Icon.mdx';

 const meta: Meta<typeof Icon> = {
@@ -1,9 +1,11 @@
 import { Meta, StoryFn } from '@storybook/react';

 import { FeatureState } from '@grafana/data';
-import { InfoBox, FeatureInfoBox, VerticalGroup } from '@grafana/ui';

-import { FeatureInfoBoxProps } from './FeatureInfoBox';
+import { Stack } from '../Layout/Stack/Stack';
+
+import { FeatureInfoBox, FeatureInfoBoxProps } from './FeatureInfoBox';
+import { InfoBox } from './InfoBox';
 import mdx from './InfoBox.mdx';

 const meta: Meta = {
@@ -46,10 +48,10 @@ const defaultProps: FeatureInfoBoxProps = {

 const InfoBoxTemplate: StoryFn<typeof InfoBox> = (args) => {
  return (
-    <VerticalGroup>
+    <Stack direction="column">
      <div>Deprecrated component, use Alert with info severity</div>
      <InfoBox {...args} />
-    </VerticalGroup>
+    </Stack>
  );
 };
 export const infoBox = InfoBoxTemplate.bind({});
@@ -57,10 +59,10 @@ infoBox.args = defaultProps;

 const FeatureInfoBoxTemplate: StoryFn<typeof FeatureInfoBox> = (args) => {
  return (
-    <VerticalGroup>
+    <Stack direction="column">
      <div>Deprecrated component, use Alert with info severity</div>
      <FeatureInfoBox {...args} />
-    </VerticalGroup>
+    </Stack>
  );
 };

@@ -1,9 +1,9 @@
 import { StoryFn, Meta } from '@storybook/react';

-import { Button, AutoSizeInput } from '@grafana/ui';
-
 import { iconOptions } from '../../utils/storybook/icons';
+import { Button } from '../Button/Button';

+import { AutoSizeInput } from './AutoSizeInput';
 import mdx from './AutoSizeInput.mdx';
 import { parseAccessory } from './storyUtils';

@@ -2,10 +2,12 @@ import { StoryFn, Meta } from '@storybook/react';
 import { useState } from 'react';

 import { KeyValue } from '@grafana/data';
-import { Field, Button, Input } from '@grafana/ui';

 import { getAvailableIcons } from '../../types';
+import { Button } from '../Button';
+import { Field } from '../Forms/Field';

+import { Input } from './Input';
 import mdx from './Input.mdx';
 import { parseAccessory } from './storyUtils';

@@ -1,12 +1,12 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useCallback, useMemo, useState } from 'react';
+import { CellProps } from 'react-table';

-import { InteractiveTable, CellProps, LinkButton } from '@grafana/ui';
-
+import { LinkButton } from '../Button';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';

-import { FetchDataArgs, InteractiveTableHeaderTooltip } from './InteractiveTable';
+import { FetchDataArgs, InteractiveTable, InteractiveTableHeaderTooltip } from './InteractiveTable';
 import mdx from './InteractiveTable.mdx';

 const EXCLUDED_PROPS = ['className', 'renderExpandedRow', 'getRowId', 'fetchData'];
@@ -1,10 +1,9 @@
 import { StoryFn, Meta } from '@storybook/react';

-import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
-
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
+import { Button } from '../Button';

-import { Layout, LayoutProps } from './Layout';
+import { HorizontalGroup, Layout, LayoutProps, VerticalGroup } from './Layout';
 import mdx from './Layout.mdx';

 const meta: Meta = {
@@ -2,10 +2,11 @@ import { css } from '@emotion/css';
 import { Meta, StoryFn } from '@storybook/react';

 import { GrafanaTheme2 } from '@grafana/data';
-import { LoadingBar, LoadingBarProps, useStyles2 } from '@grafana/ui';

+import { useStyles2 } from '../../themes/ThemeContext';
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';

+import { LoadingBar, LoadingBarProps } from './LoadingBar';
 import mdx from './LoadingBar.mdx';

 const meta: Meta<typeof LoadingBar> = {
@@ -3,11 +3,13 @@ import { StoryFn, Meta } from '@storybook/react';
 import { oneLineTrim } from 'common-tags';
 import { useState } from 'react';

-import { Button, Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
-
 import { getAvailableIcons } from '../../types';
+import { Button } from '../Button';
+import { TabContent } from '../Tabs';

+import { Modal } from './Modal';
 import mdx from './Modal.mdx';
+import { ModalTabsHeader } from './ModalTabsHeader';

 const meta: Meta = {
  title: 'Overlays/Modal',
@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import { Meta } from '@storybook/react';

-import { ToolbarButton, Stack } from '@grafana/ui';
-
 import { StoryExample } from '../../utils/storybook/StoryExample';
 import { IconButton } from '../IconButton/IconButton';
+import { Stack } from '../Layout/Stack/Stack';
+import { ToolbarButton } from '../ToolbarButton';

 import { PageToolbar } from './PageToolbar';

@@ -1,8 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';

-import { Pagination } from '@grafana/ui';
-
+import { Pagination } from './Pagination';
 import mdx from './Pagination.mdx';

 const meta: Meta<typeof Pagination> = {
@@ -5,13 +5,19 @@ import { CSSProperties, useState, ReactNode } from 'react';
 import { useInterval, useToggle } from 'react-use';

 import { LoadingState } from '@grafana/data';
-import { Button, Icon, PanelChrome, PanelChromeProps, RadioButtonGroup, Stack } from '@grafana/ui';

 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
+import { Button } from '../Button';
+import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
+import { Icon } from '../Icon/Icon';
+import { Stack } from '../Layout/Stack/Stack';
 import { Menu } from '../Menu/Menu';

+import { PanelChromeProps } from './PanelChrome';
 import mdx from './PanelChrome.mdx';

+import { PanelChrome } from '.';
+
 const PANEL_WIDTH = 400;
 const PANEL_HEIGHT = 150;

@@ -1,8 +1,8 @@
 import { Meta, StoryFn } from '@storybook/react';

 import { PluginSignatureStatus } from '@grafana/data';
-import { PluginSignatureBadge } from '@grafana/ui';

+import { PluginSignatureBadge } from './PluginSignatureBadge';
 import mdx from './PluginSignatureBadge.mdx';

 const meta: Meta<typeof PluginSignatureBadge> = {
@@ -2,8 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';

-import { RefreshPicker } from '@grafana/ui';
-
+import { RefreshPicker } from './RefreshPicker';
 import mdx from './RefreshPicker.mdx';

 const meta: Meta<typeof RefreshPicker> = {
@@ -4,9 +4,11 @@ import { useState } from 'react';
 import * as React from 'react';

 import { SelectableValue } from '@grafana/data';
-import { Segment, Icon, SegmentSection } from '@grafana/ui';

-import { SegmentSyncProps } from './Segment';
+import { Icon } from '../Icon/Icon';
+
+import { Segment, SegmentSyncProps } from './Segment';
+import { SegmentSection } from './SegmentSection';

 const AddButton = (
  <span className="gf-form-label query-part">
@@ -5,9 +5,11 @@ import * as React from 'react';
 import { AsyncState } from 'react-use/lib/useAsync';

 import { SelectableValue } from '@grafana/data';
-import { SegmentAsync, Icon, SegmentSection } from '@grafana/ui';

-import { SegmentAsyncProps } from './SegmentAsync';
+import { Icon } from '../Icon/Icon';
+
+import { SegmentAsync, SegmentAsyncProps } from './SegmentAsync';
+import { SegmentSection } from './SegmentSection';

 const AddButton = (
  <span className="gf-form-label query-part">
@@ -3,9 +3,10 @@ import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 import * as React from 'react';

-import { SegmentInput, Icon, SegmentSection } from '@grafana/ui';
+import { Icon } from '../Icon/Icon';

-import { SegmentInputProps } from './SegmentInput';
+import { SegmentInput, SegmentInputProps } from './SegmentInput';
+import { SegmentSection } from './SegmentSection';

 const SegmentFrame = ({ children }: React.PropsWithChildren) => (
  <>
@@ -5,10 +5,11 @@ import Chance from 'chance';
 import { useState } from 'react';

 import { SelectableValue, toIconName } from '@grafana/data';
-import { Icon, Select, AsyncSelect, MultiSelect, AsyncMultiSelect } from '@grafana/ui';

 import { getAvailableIcons } from '../../types';
+import { Icon } from '../Icon/Icon';

+import { AsyncMultiSelect, AsyncSelect, MultiSelect, Select } from './Select';
 import mdx from './Select.mdx';
 import { generateOptions, generateThousandsOfOptions } from './mockOptions';
 import { SelectCommonProps } from './types';
@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { RangeSlider } from '@grafana/ui';
+import { RangeSlider } from './RangeSlider';

 const meta: Meta<typeof RangeSlider> = {
  title: 'Forms/Slider/Range',
@@ -1,6 +1,6 @@
 import { StoryFn, Meta } from '@storybook/react';

-import { Slider } from '@grafana/ui';
+import { Slider } from './Slider';

 const meta: Meta<typeof Slider> = {
  title: 'Forms/Slider',
@@ -1,8 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { Spinner } from '@grafana/ui';
-
-import { Props } from './Spinner';
+import { Props, Spinner } from './Spinner';
 import mdx from './Spinner.mdx';

 const meta: Meta = {
@@ -1,8 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { Box } from '@grafana/ui';
-
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
+import { Box } from '../Layout/Box/Box';

 import { UseSplitterOptions, useSplitter } from './useSplitter';
 import mdx from './useSplitter.mdx';
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 import { PureComponent } from 'react';

-import { StatsPicker } from '@grafana/ui';
+import { StatsPicker } from './StatsPicker';

 interface State {
  stats: string[];
@@ -2,11 +2,11 @@ import { Meta, StoryFn } from '@storybook/react';
 import { useState, useCallback } from 'react';
 import * as React from 'react';

-import { InlineField, Switch, InlineSwitch } from '@grafana/ui';
-
 import { Field } from '../Forms/Field';
+import { InlineField } from '../Forms/InlineField';
 import { InlineFieldRow } from '../Forms/InlineFieldRow';

+import { InlineSwitch, Switch } from './Switch';
 import mdx from './Switch.mdx';

 const meta: Meta<typeof Switch> = {
@@ -12,12 +12,13 @@ import {
  formattedValueToString,
  Field,
 } from '@grafana/data';
-import { Button, Table } from '@grafana/ui';

 import { useTheme2 } from '../../themes';
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 import { prepDataForStorybook } from '../../utils/storybook/data';
+import { Button } from '../Button/Button';

+import { Table } from './Table';
 import mdx from './Table.mdx';
 import { FooterItem, TableCellDisplayMode, TableCustomCellOptions } from './types';

@@ -1,11 +1,12 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';

-import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
-
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';

-import { CounterProps } from './Counter';
+import { CounterProps, Counter as TabCounter } from './Counter';
+import { Tab } from './Tab';
+import { TabContent } from './TabContent';
+import { TabsBar } from './TabsBar';
 import mdx from './TabsBar.mdx';

 const meta: Meta = {
@@ -1,7 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { TextArea } from '@grafana/ui';
-
+import { TextArea } from './TextArea';
 import mdx from './TextArea.mdx';

 const meta: Meta = {
@@ -1,7 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { Avatar } from '@grafana/ui';
-
+import { Avatar } from './Avatar';
 import mdx from './Avatar.mdx';

 const meta: Meta<typeof Avatar> = {
@@ -1,10 +1,9 @@
 import { Meta, StoryFn } from '@storybook/react';

-import { ValuePicker } from '@grafana/ui';
-
 import { getAvailableIcons } from '../../types';
 import { generateOptions } from '../Select/mockOptions';

+import { ValuePicker } from './ValuePicker';
 import mdx from './ValuePicker.mdx';

 const meta: Meta<typeof ValuePicker> = {
@@ -3,8 +3,10 @@ import { FC, useEffect, useState } from 'react';

 import { DisplayValue, GrafanaTheme2 } from '@grafana/data';
 import { LegendDisplayMode, LegendPlacement } from '@grafana/schema';
-import { useTheme2, VizLegend } from '@grafana/ui';

+import { useTheme2 } from '../../themes';
+
+import { VizLegend } from './VizLegend';
 import { VizLegendItem } from './types';

 const meta: Meta = {
@@ -1,5 +1,6 @@
 import { EventBus, FieldType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
+
+import { getTheme } from '../../themes/getTheme';

 import { preparePlotConfigBuilder } from './utils';