diff --git a/.betterer.results b/.betterer.results index 7f8289827a0..74e1cff93f2 100644 --- a/.betterer.results +++ b/.betterer.results @@ -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 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 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 or use t()", "0"] ], diff --git a/eslint.config.js b/eslint.config.js index 17be1ebc4e0..cf427ade626 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -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', diff --git a/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx b/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx index 3588d79b570..61d573d0f1f 100644 --- a/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx +++ b/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx @@ -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']; diff --git a/packages/grafana-ui/src/components/Alert/Toast.story.tsx b/packages/grafana-ui/src/components/Alert/Toast.story.tsx index 789d3757d2b..12991adcb03 100644 --- a/packages/grafana-ui/src/components/Alert/Toast.story.tsx +++ b/packages/grafana-ui/src/components/Alert/Toast.story.tsx @@ -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']; diff --git a/packages/grafana-ui/src/components/Badge/Badge.story.tsx b/packages/grafana-ui/src/components/Badge/Badge.story.tsx index 442daa3a379..173ba2ab36d 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.story.tsx +++ b/packages/grafana-ui/src/components/Badge/Badge.story.tsx @@ -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 = { diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx index be5fe58381f..fb10481d786 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx @@ -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 = { diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx index 9c2c9f6ef3f..8a2cf4aaf25 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx @@ -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', () => { diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx index 7ae5ad2bae8..edb861bbfad 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx +++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx @@ -1,6 +1,6 @@ import { StoryFn, Meta } from '@storybook/react'; -import { ButtonCascader } from '@grafana/ui'; +import { ButtonCascader } from './ButtonCascader'; const meta: Meta = { title: 'Forms/Cascader/ButtonCascader', diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx index 9135ec928ae..43d8c337589 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx +++ b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx @@ -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); diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx index b239587710e..5c56d45e3b5 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx @@ -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 = { title: 'Pickers and Editors/ColorPicker', diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index e8b577fe32b..49a3564daae 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx index 25ef06ffb2b..6208effe298 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx @@ -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']; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.test.tsx b/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.test.tsx index 82c0c782fd3..4ceb92b0bbe 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.test.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.test.tsx @@ -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(); diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx index 61ce7d881ff..bc73c393965 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx @@ -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) => { diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx index b75516367cc..abd37242483 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx @@ -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 = { title: 'Pickers and Editors/TimePickers/TimeOfDayPicker', diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx index db5c56a8816..ef2ce7d2923 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx @@ -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()); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx index 47ad36a6c6d..f7ae73b010c 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx @@ -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'); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx index a609ee8daa8..ee1b5e7e9d5 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx @@ -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 = { title: 'Pickers and Editors/TimePickers/TimeZonePicker', diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx index 9054e9b53fd..cf80764789c 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx @@ -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 = { title: 'Pickers and Editors/TimePickers/WeekStartPicker', diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx index 9c99056f00b..9cb4e548919 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx @@ -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 = { diff --git a/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.story.tsx b/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.story.tsx index bac8577fbf4..e3e24bf77a9 100644 --- a/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.story.tsx +++ b/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.story.tsx @@ -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 = { diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx index c3cb4d216cb..de3ef47612e 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx +++ b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx @@ -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 = { diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx index ac49c175392..f6e7025553a 100644 --- a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx +++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx @@ -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 = { diff --git a/packages/grafana-ui/src/components/Forms/FieldArray.story.tsx b/packages/grafana-ui/src/components/Forms/FieldArray.story.tsx index 3bec83bf20e..fa38cf6521e 100644 --- a/packages/grafana-ui/src/components/Forms/FieldArray.story.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldArray.story.tsx @@ -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) => { <>
{fields.map((field, index) => ( - + { {...register(`people.${index}.lastName` as const)} defaultValue={field.lastName} /> - + ))}